Resumen de la clase de Javascript y DOM

Definiciones Iniciales

  • Javascript es un lenguaje de programación, orientado a objetos, basado en prototipos (en lugar de clases), con una sintaxis similar a Java.
    • El lugar más común (por lejos) donde encontrar Javascript es en los browsers. Prácticamente todos los browsers permiten ejecutar código Javascript dentro de una página HTML. Este código se ejecutará client-side.
  • DOM significa Document Object Model y se refiere al modelo de objetos que permite manipular todos los objetos que conforman una página HTML, en el browser.
    • Manipular el DOM desde Javascript nos permite modificar una página dinamicamente a partir de código que se ejecuta client-side.
  • DHTML significa Dynamic HTML y se refiere a la modificación client-side del HTML de una página.

Ejemplos básicos usando JavaScript

El código resultante de este ejemplo lo pueden bajar de http://svn2.xp-dev.com/svn/utn-tadp-projects/ejemplos-basicos/js-ajax-base (calculadora.html).

  • En cualquier link o botón (usando input type="button" en lugar de "submit") podemos ejecutar una función de Javascript (en lugar de invocar a una nueva página).
    • Lo más fácil para hacer en Javascript es un alert:
      • <input type="button" value="Sumar" onClick="alert('hola');">
    • Además, la función confirm nos permite aceptar o confirmar una acción:
      • <input type="button" value="Sumar" onClick="if (confirm('te saludo?')) alert('hola');">
    • También podemos capturar eventos de los botones como onBlur (pérdida de foco), onChange (cualquier cambio) y onKeyup (se presionó una tecla).
  • A partir de estas herramientas podemos comenzar a agregar algún comportamiento muy básico, una minicalculadora:
    • <form method="post" action="search">
    • Ingrese un valor: <input id="op1" type="text">
    • Ingrese otro valor: <input id="op2" type="text">
    • <input type="button" id="sumar" value="Sumar" onClick="javascript:calcular();" >
    • <span id="resultado" />
    • </form>
    • Necesitamos que cada uno de los controles del form tenga su id y agregamos un nuevo elemento de tipo span que nos va a permitir poner el resultado.
    • La función calcular tiene la siguiente forma:
    • <script language="javascript">
    • function calcular() {
    • var op1 = parseFloat(document.getElementById("op1").value);
    • var op2 = parseFloat(document.getElementById("op2").value);
    • document.getElementById("resultado").innerHTML = op1 + op2;
    • }
    • </script>
    • La función getElementById nos permite obtener cualquier elemento del documento.
    • La pseudo variable document nos permite acceder a la totalidad de la página (ver referencia de los mensajes que entiende document y otras pseudovariables disponibles en JavaScript).
  • Luego podemos invalidar el botón si no tenemos un valor válido en los sumandos. Para eso agregamos una función actualizar estado:
    • function actualizarEstado() {
    • var op1 = isNaN(parseFloat(document.getElementById("op1").value));
    • var op2 = isNaN(parseFloat(document.getElementById("op2").value));
    • document.getElementById("sumar").disabled = (op1 || op2);
    • }
    • Y a los texts les agregamos un listener para ese evento: onKeyup="javascript:actualizarEstado();"
    • Adicionalmente podemos hacer que el botón comience deshabilitado: disabled="true"

Otras pruebas que pueden hacer:

  • Manipular el HTML mediante los objetos del DOM, en lugar de innerHTML. Esto es un poco más prolijo si uno hace cosas complejas o con mucha lógica. Por ejemplo:
    • var resultado = document.createElement("input");
    • resultado.setAttribute("type", "text");
    • resultado.setAttribute("value", op1 + op2);
    • document.getElementById("resultado").appendChild(resultado);
  • Para jugar un poco, mover el resultado por la pantalla:
    • div = document.getElementById("resultado");
    • div.style.position = "absolute";
    • div.style.top = op1 + "px";
    • div.style.left = op2 + "px";
  • Automatizar el movimiento:
    • setInterval(moverResultado, 25);
    • function moverResultado() {
    • currentLeft += 1;
    • document.getElementById("resultado").style.left = currentLeft + "px";
    • }
    • También existe la función setTimeout.