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.