Ejemplo <script type>: Tipo de código local (en atributos de eventos)

Cuando el código de script se inserta de forma local, es decir, en el atributo de evento, la forma que tiene el navegador de saber el tipo es mediante un elemento <meta> con la siguiente forma <meta http-equiv="Content-Script-Type" content="JavaScript" />. Si este encabezado no se incluye, los navegadores suelen optar por JavaScript por defecto.

Aunque la especificación no habla sobre ello, al menos para Explorer podemos declarar un tipo local anteponiéndolo al código, como en el siguiente ejemplo. Esta página que está leyendo se ha declarado con un encabezado <meta> para JavaScript. Ahora incluiremos un código en VBScript en un atributo de evento onclick para un botón:

<input type="button" name="vb" value="botón para Explorer"
onclick="vbscript:MsgBox 'Mensaje', vbYesNo+vbInformation, 'MENSAJE EN VBSCRIPT'" />
            

El tipo de código se identifica anteponiendo vbscript: al mismo, de tal forma que Explorer reconoce que el código es de Visual Basic Script y así puede mostrar el mensaje personalizado con su función MsgBox. En Visual Basic cuando una función no devuelve nada no deben usarse paréntesis para encerrar sus parámetros, que en este ejemplo son el mensaje, la configuración de botones e imágenes de información y el título del cuadro. Por supuesto, otros navegadores como Opera no actúan con VBScript, acusando un error de script o ignorando totalmente el evento cuando se pulsa el botón.

Ejemplo <script charset>

El código en JavaScript se incluye en este ejemplo en un archivo externo llamado charset.js. Simplemente contiene una cadena de texto con document.write("Generando la palabra 'CAÑÓN'") que generará la palabra "CAÑÓN". Las letras "Ñ" y el acento se codificaron en el documento usando ISO-8859-1, mientra que la página actual muestra los caracteres en UTF-8. Para evitar estas incompatibilidades se usa el atributo charset como se expone en este ejemplo.

<p>El script externo...
    <script src="/charset.js"></script>
</p>
<p>En cambio con el atributo...
    <script src="charset.js" charset="ISO-8859-1"></script>
</p>                
            

Ejemplo <defer> para diferir la ejecución de scripts hasta que se cargue el DOM de la página

Queremos saber como este atributo difiere la ejecución del script hasta que el árbol del DOM esté completamente cargado. Para ello disponemos un primer cuadro con un bloque <div> sin nada en su interior. Luego ponemos un <script> y a continuación otro bloque <div> como el anterior. El script intentará rellenar el contenido de los dos bloques con un elemento <p> y texto mediante generación dinámica, para lo cual deberá acceder al DOM con la función document.getElementById("...") y generar el nuevo elemento con innerHTML. Hacemos dos páginas con el mismo código, una usando el atributo defer="defer" y otra sin usarlo (que equivale a decir que defer = false).

<p>Aquí hay...</p>
<div id="conten1" style="border: red solid 1px;"></div>

<p>Después de esto viene...</p>     
<script defer="defer"> (o sin defer para el otro caso)
       document.getElementById("conten1").innerHTML = 
           "<p style='border: green solid 1px; color: green;'>ABC</p>";
       document.getElementById("conten2").innerHTML = 
           "<p style='border: green solid 1px; color: green;'>ABC</p>";		        
</script>

<p>Aquí hay...;/p>  
<div id="conten2" style="border: red solid 1px;"></div>    

Sin usar defer el script podrá localizar el bloque anterior identificado como id="conten1" pues ya pasó por él y lo cargó en el DOM. Pero no podrá localizar el segundo bloque id=conten2 pues éste aún no ha sido cargado en el DOM. El segundo bloque no contendrá nada y, si tenemos los avisos de errores de script activados, saltará el error en ese momento antes de seguir "pintando" el resto de la página.

Usando defer la ejecución del script se deja para el final, es decir, para cuando todos los elementos han sido ya presentados visualmente y cargados en el DOM. Con ello ya puede el script encontrar todas las referencias a elementos en la página y rellenar los <p> dentro de los <div> vacíos.

Ejemplo: Evento onclick

<p>Un elemento 
    <span onclick="alert('Evento onclick')"
    style="border: solid 1px;">SPAN</span> 
    que actúa con...
</p>
<p>
    Dirigiendo el foco a este
    <input type="button" name="botonclick" 
    onclick="alert('Evento onclick')" value="botón" /> 
    puede actuar...
</p>  
            

Ejemplo: Evento ondblclick

<p>Un elemento <span ondblclick="alert('Evento ondblclick')" 
    style="border: solid 1px;">SPAN</span> que actúa...
</p>
<p>Un elemento imagen....
</p>                
<div style="border: solid 1px; width: 30px; ">
    <img ondblclick="alert('Evento ondblclick')" style="margin: 5px;" 
    src="ejemplos/script/img_1.jpg" width="16" height="16" alt="img_1.jpg" />
</div>
            

Resultado:

Un elemento SPAN que actúa con el evento ondblclick mostrando un mensaje.

Un elemento imagen que actúa con el evento ondblclick mostrando un mensaje, pero que se sitúa en un bloque que no contiene texto:

Ejemplo: Evento onmousedown

<p>Un elemento 
    <input type="button" name="botomousedown" 
    onmousedown="alert('Evento onmousedown')" value="botón" /> 
    que actúa...
</p>
            

Ejemplo: Evento onmouseup

<p>
    Un elemento
    <span onmousedown="document.getElementById('md').innerHTML = 'MOUSE-DOWN';" 
    onmouseup="document.getElementById('mu').innerHTML = 'MOUSE-UP';" 
    style="border: solid 1px;">SPAN</span>
    que actúa ... Puede repetir ... con este botón: 
    <input type="button" value="borrar" 
    onclick="document.getElementById('md').innerHTML = '&nbsp;'; 
    document.getElementById('mu').innerHTML = '&nbsp;';" />
</p> 
<div id="md" style="border: red solid 1px;"> </div>
<div id="mu" style="border: red solid 1px;"> </div> 
            

Ejemplo: Evento onmouseover

<script>
    function cambiaFondo(elemento){
         var fondo = elemento.style.backgroundColor;
         if ((fondo == "aqua")||(fondo == "#00ffff")) {
            elemento.style.backgroundColor = "white";
          } else {
            elemento.style.backgroundColor = "aqua";
        }
    }
</script>
<p>Un elemento 
    <span onmouseover="cambiaFondo(this)" style="border: solid 1px;">
        Span con fondo cambiante
    </span>
    que cambia de color...
</p>
            

Ejemplo con el evento onmousemove: uso de las palabras claves this y event.

Este ejemplo no tiene mucha utilidad, pero nos muestra algunos detalles. Por un lado podemos usar la propiedad de evento para cambiar dinámicamente las propiedades de estilo. En este caso cambiamos el color de fondo de un bloque <div> al mover el ratón sobre el mismo. Para ello usamos en ese elemento onmousemove="this.style.backgroundColor=cambiaColor(this, event)" donde se llama a la función cambiaColor(this, event) observándose que:

1. La palabra clave de JavaScript this hace referencia al propio elemento donde está situado el evento. Esta referencia luego, dentro de la función, nos servirá para acceder a una de sus propiedades, su posición izquierda con offsetLeft.
2. La palabra clave event hace referencia al manejador de eventos de la ventana, es decir a window.event, de tal forma que en la función podremos acceder a su propiedad clientX que nos da la posición horizontal del cursor del ratón en la ventana (no en el elemento donde se originó el evento).

También ejecutamos en la función la selección de otro elemento mediante el uso de var miSpan = document.getElementById("unspan"), para luego cambiarle el color y poner el número que indica la posición desde el borde izquierdo del elemento que señala en ese momento el cursor.

<script>
    function cambiaColor(elemento, eventoEntrada) {
        var izquierda = elemento.offsetLeft;
        var x = eventoEntrada.clientX - izquierda;
        var miColor = "white";
        if (0<x && x<=30) {
            miColor = "navy";
        } else if (30<x && x<=60) {
            miColor = "blue"; 
        } else if (60<x && x<=90) {
            miColor = "aqua";
        } else if (90<x && x<=120) {
            miColor = "purple";
        } else if (120<x && x<=150) {
            miColor = "red";
        } else if (150<x && x<=180) {
            miColor = "orange"; 
        } else if (180<x && x<=210) { 
            miColor = "yellow";   
        } else if (210<x && x<=240) { 
            miColor = "green";   
        } else {
            miColor = "lime";
        }
        var miSpan = document.getElementById("unspan");
        miSpan.style.borderColor=miColor;  
        miSpan.innerHTML = x;
        return miColor;
    }
</script>
<p>Este elemento...
</p>
<div style="border: solid 1px; width: 240px; height: 30px " 
    onmousemove="this.style.backgroundColor=cambiaColor(this, event)"
    onmouseout="this.style.backgroundColor='white'">
</div>
<p>Este elemento ...
<span id="unspan" style="border: solid 4px; height: 10px">SPAN</span> 
...
</p>
            

Ejemplo: Evento onmouseout

Una forma para cargar una página con imágenes pequeñas a modo de iconos y luego según el usuario lo desee ampliar las mismas. Disponemos de 4 fotos de 38x51 píxeles que incluimos juntas en la misma línea. Cuando el ratón entra en una imagen con onmouseover se llama a una función zoom(this), pasando en el argumento la referencia al elemento. Luego en el script extraemos el valor de un zoom que el usuario puede seleccionar mediante un cuadro desplegable. Con document.getElementById("nZoom").value extraemos ese valor. El ancho y alto máximo de cada foto es de 384x512 píxeles, todas del mismo tamaño. Por lo tanto dividimos el máximo por el valor de zoom introducido y, según la foto desde donde hemos accedido a la función, aplicamos ese tamaño así como la foto original en tamaño grande. Como vemos, la función no retorna nada sino que cambia los atributos de la imagen desde la propia función, pues su argumento es una referencia a la misma.

Cuando salimos de una foto con onmouseout volvemos a poner la imagen original con onmouseout="this.src='script/fotochica1.jpg'; this.width='38'; this.height='51'", incluyendo el código necesario dentro del propio atributo de evento.

<script>
    function zoom(imagen){
        var numZ=document.getElementById("nZoom").value;
        imagen.width = 384/numZ;
        imagen.height= 512/numZ;
        switch (imagen.id) {
            case "foto1": imagen.src="ejemplos/script/fotogrande1.jpg";break;
            case "foto2": imagen.src="ejemplos/script/fotogrande2.jpg";break;
            case "foto3": imagen.src="ejemplos/script/fotogrande3.jpg";break;
            case "foto4": imagen.src="ejemplos/script/fotogrande4.jpg";break;
        }
    }
</script>
<p>
<label>Seleccione el zoom que desee para ampliar la foto:
    <select name="nZoom" id="nZoom">
        <option value="1">x 10</option>
        <option value="2">x 5</option>
        <option value="3" selected="selected">x 3.33</option>
        <option value="5">x 2</option>
        <option value="8">x 1.25</option>
    </select>
</label><br />
<img 
id="foto1" src="ejemplos/script/fotochica1.jpg" width="38" height="51" alt="foto1"
onmouseover="zoom(this)" 
onmouseout="this.src='ejemplos/script/fotochica1.jpg'; this.width='38'; this.height='51'" 
/><img 
id="foto2" src="ejemplos/script/fotochica2.jpg" width="38" height="51" alt="foto2"
onmouseover="zoom(this)"
onmouseout="this.src='ejemplos/script/fotochica2.jpg'; this.width='38'; this.height='51'" 
/><img 
id="foto3" src="ejemplos/script/fotochica3.jpg" width="38" height="51" alt="foto1"
onmouseover="zoom(this)"
onmouseout="this.src='ejemplos/script/fotochica3.jpg'; this.width='38'; this.height='51'" 
/><img 
id="foto4" src="ejemplos/script/fotochica4.jpg" width="38" height="51" alt="foto1"
onmouseover="zoom(this)"
onmouseout="this.src='ejemplos/script/fotochica4.jpg'; this.width='38'; this.height='51'" 
/>                    
</p>                
            

Ejemplo: Evento onkeypress para validar números en un cuadro de texto

Evento cuando se pulsa una tecla. Una de las utilidades de este evento puede mostrarse con un campo de texto <input> donde queremos controlar que sólo se introduzcan cuatro números. La longitud del campo es fácil limitarla con el atributo maxlength. Para controlar que sólo se tecleen números hemos de usar un script. Aunque no pretendemos introducirnos demasiado en el lenguaje JavaScript, intentaremos explicar brevemente el funcionamiento de un script que realizaría este control.

Con eventos como onkeypress, onclick y onsubmit se puede retroceder la acción del usuario que provocó el evento si éste devuelve un valor false. En otro caso si no devuelve falso, es decir, si devuelve cualquier cosa que no sea false, entonces el evento proseguirá su curso. Veámos un ejemplo:

<p>En este control...
    <input type="text" onkeypress="return false" />
</p>
<p>En cambio en este control...
     <input type="text" onkeypress="return true" />, ...
</p> 
            

Aprovechando esta característica podemos controlar los caracteres que se introducen en un campo de texto. Desde el control usamos la función que hemos creado compruebaNum(eventoEntrante), donde el argumento trae la referencia al manejador de eventos window.event. Una propiedad de este objeto event es el código ASCII del carácter de una tecla pulsada. Nos encontramos con el problema de que con Explorer hay que extraerlo con keyCode y para otros navegadores con charCode, lo cual salvamos poniendo código alternativo var codigoAscii = eventoEntrante.charCode || eventoEntrante.keyCode. Una vez tengamos el código ASCII, lo convertimos en un caracter con la función String.fromCharCode(). Luego la comparamos con la cadena "0123456789" para ver si la tecla pulsada no es alguno de los números en cuyo caso nos devolvería -1, devolviendo entonces false y no permitiendo volcar el carácter no numérico en el cuadro de texto.

 <script>
    function compruebaNum(eventoEntrante){
        var codigoAscii = eventoEntrante.charCode || eventoEntrante.keyCode;
        var caracter = String.fromCharCode(codigoAscii);
        var numeros = "0123456789";
        return numeros.indexOf(caracter) != -1;
      }
 </script>
<p>Introduzca el año...
    <input type="text" name="anyo" maxlength="4" 
    onkeypress="return compruebaNum(event)" />
</p> 
            

Ejemplo: Evento onkeypress para limitar el tamaño máximo de un cuadro de texto de múltiples líneas.

El evento de teclado onkeypress tiene una gran utilidad para validar los datos que se introducen en los campos de un formulario. Por ejemplo, el control <input> con el tipo text nos permite introducir texto en una línea y limitar su tamaño con el atributo maxlength a un número determinado de caracteres. Sin embargo el control <textarea> para introducir texto en múltiples líneas no tiene forma de limitar el tamaño. Este ejemplo se destina a ello.

En el atributo de evento del cuadro de texto devolvemos el resultado true, false de una función que hemos creado, llamándose con llegoFin(this, event, 10). El primer argumento es una referencia al elemento. El segundo nos permite referenciar el evento para luego obtener el código ASCII de la tecla pulsada. El último argumento es el tamaño máximo de caracteres que podemos introducir en el cuadro de texto.

En la función extraemos la longitud actual del cuadro de texto con elemento.value.length. Si no supera el tamaño devolvemos true y el usuario podrá seguir tecleando caracteres. Si supera el tamaño máximo podemos permitir que el usuario pueda pulsar las teclas de retroceso, suprimir o las flechas de dirección. Estas tienen los valores ASCII 8, 37, 38, 39, 40 y 46, que son introducidos en el array teclas. Captamos el código ASCII de la tecla pulsada de la misma forma que lo expuesto en el ejemplo de validación de números. Luego comprobamos si esa tecla está en el array, en cuyo caso la permitimos devolviendo true, en otro caso devolvemos false.

<script>
        function llegoFin(elemento, eventoEntrante, maximoTamanyo){
            var longitud = elemento.value.length;
            if (longitud > maximoTamanyo) {
                var codigoAscii = eventoEntrante.charCode || eventoEntrante.keyCode;
                var teclas = [8, 37, 38, 39, 40, 46];                          
                for (i in teclas){
                    if (codigoAscii == teclas[i]) {
                        return true;
                    }
                }                           
                return false;
            } else {
                return true;
            }
        }
</script>
<label>
    <textarea name="muchotexto" rows="6" cols="15"
    onkeypress="return llegoFin(this, event, 10)" ></textarea>
</label>
            

Ejemplo: Evento onkeyup. Controlando entradas de texto en un control de formulario

<script>
    function confirmaCntr(elemento){
        if (elemento.value == "1234") {
            alert("La contraseña es correcta: '1234'");
            //aquí se realizaría el proceso permitido
        }
    }
</script>
<p>Introduzca contraseña: 
    <input type="password" name="textbox" onkeyup="confirmaCntr(this)" />
</p>
            

Ejemplo: Evento onfocus. Pasando el foco a controles de formulario

Aquí presentamos un formulario con controles y un elemento de texto que sirve como notas destinadas al usuario para explicar como debe rellenar el formulario. Con el evento onfocus obtenemos el identificador del elemento al pie para dotarle del comentario que deseemos usando innerHTML, el cuál modifica el contenido del elemento.

<form style="border: solid 1px;">
    <label>Nombre: 
        <input type="text" name="campo1" size="100"
        onfocus="document.getElementById('este-pie').innerHTML=
        'Nota: Introduzca el nombre y dos apellidos'" />
    </label><br />
    <label>Dirección: 
        <input type="text" name="campo2" size="100"
        onfocus="document.getElementById('este-pie').innerHTML=
        'Nota: Dirección completa, con el número, bloque, portal, etc.'" 
        />
    </label><br />
    <label>Fecha de nacimiento: 
        <input type="text" name="campo3" size="10"
        onfocus="document.getElementById('este-pie').innerHTML=
        'Nota: Fecha con el formato dd/mm/aaaa'" 
        />
    </label><br />                    
    <span id="este-pie" style="font: italic 0.8em 'Arial';">Nota:</span>
</form>
            

Ejemplo: Evento onblur. Botones con script

Podemos denominar a un vínculo con imagen como un "botón" en el sentido de que es capaz de ejecutarse algo cuando hacemos "click" en la imagen. Añadir una imagen a un vínculo es sencillo, por ejemplo con una imagen de 32x32 píxeles podemos formar el siguiente vínculo con imagen , cuyo código es

<a id="aqui-mismo"/><a href="#aqui-mismo"><img 
src="ejemplos/script/boton-script/pyramid.gif"alt="" /></a>
            

Aprovechando esta utilidad podemos mejorarla dotándo a este botón con estilos, dándole un fondo y un borde personalizado. Para ello usamos la imagen de 32x32 píxeles para el fondo y que personaliza un borde con esquinas redondeadas , el cual hemos creado con facilidad con cualquier editor de imágenes, que combinada con la imagen del botón formamos como un botón de vínculo. El código para esto es:

<a id="aqui-tambien"/><a href="#aqui-tambien"><img 
src="ejemplos/script/boton-script/pyramid.gif" alt=""
style="background-image: url(ejemplos/script/boton-script/fondo.gif); 
background-repeat: no-repeat; border: 0" /></a>                
            

Es conveniente observar que en el código no puede haber espacios, ni siquiera saltos de línea, entre el elemento imagen y el vínculo que lo encierra, con el objeto de que la imagen se ajuste perfectamente al fondo y, por otro lado, el vínculo <a> se ajuste al tamaño de la imagen. Observe que la imagen del botón tiene el fondo de color transparente, lo que puede hacerse con el formato gif, para que deje entrever detrás a la imagen con bordes redondeados, que a su vez también es transparente para dejar entrever el fondo de la página.

La propuesta es darle un toque dinámico a este botón, de tal forma que cuando el usuario entre con el ratón o con el tabulador, el botón se "encienda" de alguna forma. Hemos elegido la imagen para ello, que es la misma que la del fondo pero dándole un color. Así el botón "encendido" quedará . El siguiente paso es hacer uso de los eventos y script necesarios para realizar este efecto. El elemento <a> dispone de los eventos onfocus, onblur para cuando obtiene y pierde el foco respectivamente, pero el elemento <img> no puede obtener el foco. Como el fondo o resalte del botón hay que aplicarlo a la propiedad {background-image}, del elemento imagen, hay que tener en cuenta que cuando el elemento vínculo recibe los eventos onfocus, onblur debe trasladar la accion al elemento imagen. Por otro lado los eventos onmouseover, onmouseout detectan cuando el ratón entra o sale de un elemento, pudiendo ser generados tanto por el vínculo como por la imagen. En nuestro caso aplicarán también la propiedad {background-image} al elemento imagen, por lo que captaremos estos eventos desde ese elemento. El código para encender o apagar un botón sería:

<a href="pyramid.gif" onfocus="manejarBoton(document.getElementById('bot1'), 'on')"
onblur="manejarBoton(document.getElementById('bot1'), 'off')"         
><img class="bot" id="bot1" src="pyramid.gif" alt="" title="Imagen 'pyramid.gif'"
width="32" height="32" onmouseover="manejarBoton(this, 'on')" 
onmouseout="manejarBoton(this, 'off')" /></a>                
            

Por un lado el elemento vínculo al obtener o perder el foco acciona la función manejarBoton(a,b) para encender o apagar el botón, pasando como argumentos una referencia al elemento imagen y un valor "on" o "off" según el caso deseado. Por otro lado el elemento imagen capta los eventos con el ratón y ejecuta directamente la misma función, pero pasándose a sí mismo como referencia (con this). El script de la función se describe a continuación:

function manejarBoton (boton, onoff){
    if (onoff == "on"){
        boton.style.backgroundImage = "url(resalte.gif)"
    } else {
        boton.style.backgroundImage = "url(fondo.gif)"
    }
}

Como vemos, en el primer argumento traemos la referencia al elemento adecuada (vínculo o imagen), mientras que en el segundo argumento nos dice si hemos de resaltar el botón con la imagen "resalte.gif" o apagar el botón con "fondo.gif". Para completar el tema se incluyen todos los botones (3 en este ejemplo) dentro de un bloque dotado de un color de fondo para visualizar el efecto, lo cual puede observar en el código completo de la página.

Por último queremos indicar que si una página contiene un gran número de estos botones, puede resultar engorroso tanto código en la página. Una forma de "limpiar" de código script una página es aplicando los manejadores de eventos semánticos y las funciones anónimas mediante el uso del evento onload. Este mismo ejemplo se desarrolla de esta forma en otro ejemplo expuesto más abajo en la descripción del evento onload.

Ejemplo: Evento onload para un menú lateral con scripts

El "layout" o enmaquetado de las páginas de un sitio y más especialmente de la página de inicio es un tema importante. Antes se realizaba con tablas, pero la aparición de CSS ha promovido otras formas de confeccionar las páginas, y más exactamente los marcos y menús de selección que permiten navegar al usuario por el sitio. Los scripts ofrecen alternativas sin límite. En otros lugares ya hemos presentado una página de inicio con marcos realizados mediante CSS, como el ejemplo marcos de página, donde se aprecia que no se han usado los elementos <frame> que se convertirán en obsoletos en un futuro.

Otro elemento importante son los menús. Confeccionados con elementos de listas, CSS y pseudoclases de vínculo tenemos también el ejemplo de un menú lateral. Ahora proponemos combinar los marcos CSS y una nueva forma de presentar menús laterales con CSS y scripts. El siguiente código representa la página de inicio de un sitio de ejemplo, aunque todas las páginas del sitio que se enlazan con el menú del inicio se configuran igual. El esquema básico de la página son tres divisiones con clases cabecera, menu y contenido. Todas las páginas enlazan al mismo código JavaScript en el archivo manejamenu.js, que luego explicaremos. Las únicas diferencias que hay entre las páginas del sitio son (en negrita en el código):

• Por supuesto, la información propia de cada página, como puede ser el título en la división de cabecera o la división contenido con la información propia de esa página.
• Los argumentos de una función en el script incluidos en el atributo onload del cuerpo <body> de cada página.

Por lo tanto la división menu es la misma para todas las páginas, siempre y cuando se desee repetir este menú en todas las páginas. El menú se realiza con vínculos y divisiones, a los cuales se les dota de estilos, como al resto de la página, con el archivo externo base.css. Una entrada del menú la identificamos con marcomenuN, donde "N" representa un número de 0 en adelante siendo el cero para la página de inicio. Dentro ponemos el vínculo a la página identificado con menuN. Vemos que id="marcomenu0" y id="menu0" son los que corresponden al menu inicio. A continuación la siguiente entrada es id="marcomenu1", cuyo vínculo no nos lleva a ninguna página, sino a unas subentradas relacionadas en id="listamenu1". Luego cada subentrada ya nos dirige a los lugares definitivos.

...
    <script src="manejamenu.js"></script>
</head>
<body onload="muestraMenu(document.getElementById('menu0'), false); poneFecha()">
    <div class="cabecera">
        <div class="linea1">
            INICIO
        </div>
        <div class="linea2" id="fechaHoy"></div>
    </div>
    <div class="menu">
        <div id="marcomenu0" style="border: 0;">
            <a id="menu0"  href="index.html" 
            onclick="muestraMenu(this, false)" >Inicio</a><br />
        </div>           
        <div id="marcomenu1" style="border: 0;">
            <a id="menu1"  href="#listamenu1" 
            onclick="muestraMenu(this, true)">Productos</a><br />
            <div id="listamenu1" class="listamenu" style="display: none;">
                <a href="productos.html#mesas">Mesas</a><br />
                <a href="productos.html#sillas">Sillas</a><br />
                <a href="productos.html#varios">Varios</a><br />
            </div>            
        </div>
        ....siguen otras entradas de menú
    </div>
    <div class="contenido">
        contenido de la página de Inicio
        ....
            

Cada entrada de menú tiene un script en su atributo de evento onclick que configura visualmente esa entrada usando la función muestraMenu(a,b). El argumento "a" es una referencia a un elemento de la página, para luego tener acceso a él desde la función. El argumento "b" es un booleano que nos dice si la entrada del menú tiene una lista de submenús o no. Esta función también se invoca con el evento onload cuando la página se haya cargado completamente. El código del script en el archivo externo se reproduce a continuación:

//En cada página se crean dos variables globales para controlar cual
//es el marco de menú de entrada y la lista de submenús que se han desplegado
var marcoDesplegado = "";
var listaDesplegada = "";
function muestraMenu(elemento, conLista){
    //Antes de tratar una nueva entrada de menú, plegamos marcos y lista
    //que estuvieran desplegadas antes
    if (marcoDesplegado != "") {
        document.getElementById(marcoDesplegado).style.border="0"
    }
    if (listaDesplegada != "") {
        document.getElementById(listaDesplegada).style.display="none"
    }
    //Nombramos el nuevo marco de entrada de menú
    marcoDesplegado = "marco"+elemento.id
    //Le añadimos un borde para saber que ha sido pinchado
    document.getElementById(marcoDesplegado).style.border="green solid 1px"
    //Si la entrada tiene una lista de submenús, entonces la desplegamos
    if (conLista) {
        listaDesplegada = "lista" + elemento.id
        document.getElementById(listaDesplegada).style.display="block"
    } else {
        listaDesplegada = ""
    }
}

//Esta función se limita a poner la fecha actual en un elemento cuyo id sea
//igual a "fechaHoy"
function poneFecha(){
    document.getElementById("fechaHoy").innerHTML = Date()
}                
            

Los comentarios incluidos en el código así como observar el resultado deben ser suficientes para su entendimiento. En definitiva se trata de poner un borde a cada entrada de menú y desplegar el submenú si esa entrada lo tuviera, plegando en su caso otros submenús que estuvieran abiertos previamente.

Pero también la función muestraMenu(a,b) se ejecuta con el evento onload en la carga de la página. La razón de ello es que cuando accedemos a una página debe mostrarse resaltado la entrada de menú que previamente se seleccionó. Pero la función anterior hace referencias a elementos de la página, referencias que no existirán hasta que la página se haya cargado completamente. Por ello es necesario incluir la función en ese lugar, que ejecutará el resaltado del menu adecuado para cada página. Por ejemplo, en la página 1 que tiene un submenú pondríamos onload="muestraMenu(document.getElementById('menu1'), true);, es decir, cambiando menu0 por menu1, asi como true porqué esa página tiene un submenú. Y esto es todo lo que habría que modificar de una página a otra, aparte por supuesto de títulos y contenidos.

Ejemplo: Botones con scripts. Usando evento onload con manejadores de eventos semánticos y funciones anónimas.

Donde se expone el evento onblur expusimos un ejemplo para dotar de botones personalizados a una página. Allí se dijo que un exceso de botones configurados de esta forma cargarían en exceso de código script. Una forma de "limpiar" de codigo una página es con el uso de las funciones anónimas y manejadores de eventos semánticos

Manejadores de eventos semánticos

Si no queremos incluir el código en el atributo para un determinado evento de un cierto elemento, entonces podemos incluir la sentencia siguiente para que se ejecute con la carga de la página:

referencia_al_elemento.on_evento = nombre_funcion_sin_argumentos
            

Por ejemplo, sea un elemento como <p id="pr" onclick="miFuncion()">, donde en el script de la cabecera de la página o en archivo externo se codificaría miFuncion(). Entonces si con la carga de la página podemos ejecutar document.getElementById("pr").onclick = miFuncion, ya no hace falta incluir el código en el elemento, quedando simplemente como <p id="pr">, pues cuando el usuario haga "click" sobre ese párrafo, ya tiene adjudicado un código para ese evento. Veáse que el nombre del evento debe ponerse con el prefijo on y además en la parte derecha sólo debe ponerse el nombre de la función, sin argumentos.

La utilidad es obvia, pues al inicio con la carga de la página se adjudicarían todas las funciones a los eventos que tengan los elementos y en la página no se encontraría ninguna línea de código script. Sin embargo no pueden, como es lógico, pasarse argumentos particulares, aunque esta técnica si tiene algunas ventajas. Una de ellas es que, de forma automática, se pasa un argumento con la referencia al objeto donde se causó el evento. Así desde miFuncion() podemos referirnos a ese elemento con this. Hay que tener en cuenta que en una función de usuario sin aplicar esta técnica, la referencia this apunta a la propia función, no al elemento que causó el evento. En ese caso la referencia al elemento se obtiene de otra forma, por ejemplo con document.getElementById().

Otro argumento que se pasa de forma automática es event, simplemente pasando cualquier nombre de argumento, luego puede ser referenciado el manejador event dentro de la función (no con Explorer, que tendremos que usar window.event como veremos más abajo).

Funciones anónimas

Para completar los eventos semánticos, es necesario que las adjudicaciones de eventos se realice cuando la página se haya cargado completamente. Esto es lógico pues debe accederse al elemento para adjudicarle el evento. Para realizar esto se puede usar una función anónima, que sin entrar en más detalles se codificaría así:

window.onload = function(){ 
    //adjudicación de eventos
    ...
    document.getElementById("identificador").on_evento = función 
    ...
}
            

Nuevamente evento y función se refieren al nombre de evento con on y al nombre de la función sin argumentos. Así no es necesario incluir ningún código tampoco para el evento onload en el elemento <body>. En resumen, es posible incluir todo el código script de una página en un archivo externo, sólo con incluir un script en la cabecera de la página que vincule con ese archivo. Esto da como resultado una página "limpia", siguiendo el mismo criterio que con CSS, pues en definitiva una página podría tener sólo código XHTML, con CSS y scripts en archivos externos vinculados en los correspondientes elementos de la cabecera.

Aplicando lo anterior a nuestro ejemplos de botones con scripts

El script para nuestro ejemplo contendrá todo el código necesario para manejar los botones tal como se muestra a continuación:

//Función de adjudicación de eventos
window.onload = function() {
    var botones = document.getElementById("botonera")
    var botonA = botones.getElementsByTagName("a")
    var botonImg = botones.getElementsByTagName("img")
    if (botonA.length != botonImg.length) {
        //error, los dos deben ser iguales
    } else {
        for (var i=0; i<botonA.length; i++) {
            botonA[i].onfocus = manejarBoton
            botonA[i].onblur = manejarBoton
        }
        for (var i=0; i<botonImg.length; i++) {
            botonImg[i].onmouseover = manejarBoton
            botonImg[i].onmouseout = manejarBoton
        }                    
    }
}        
//Función para manejar el resaltado de los botones
function manejarBoton (eventoEntrante){
    var evento = eventoEntrante || window.event
    switch (evento.type) {
        case 'mouseover':
            this.style.backgroundImage = "url(resalte.gif)"
            break
        case 'mouseout':
            this.style.backgroundImage = "url(fondo.gif)"
            break
        case 'focus':
            document.getElementById(this.id + "img").style.backgroundImage="url(resalte.gif)"
            break;
        case 'blur':
            document.getElementById(this.id + "img").style.backgroundImage="url(fondo.gif)"
            break;                        
    }
}
            

Encontramos dos funciones. La primera es la función que adjudica los eventos y que se ejecuta cuando la página haya completado su carga. Para iterar por los botones, hemos incluido estos dentro de un bloque <div id="botonera">. Así con var botones = document.getElementById("botonera") obtenemos una referencia. Luego podemos extraer un array para todos los elementos hijos de la botonera con var botonA = botones.getElementsByTagName("a") para los vínculos y otro para var botonImg = botones.getElementsByTagName("img"). Recuerde que cada botón se componía de un vínculo con imagen en su interior. Luego sólo resta recorrer sendos arrays y adjudicar los eventos oportunos, los cuales se adjudican a la función manejarBoton que enciende y apaga un botón.

La función que maneja los botones recibe dos argumentos de forma automática: this y event. El primero es una referencia al elemento que causó el evento. El segundo es el propio objeto evento que hay que pasar como un argumento con cualquier nombre. Le hemos dado el nombre eventoEntrante pero podría servir cualquiera.

Para que esto funcione con Explorer es necesario un paso intermedio con var evento = eventoEntrante || window.event que seleccione entre ese evento de entrada o la opción de Explorer de ofrecer el evento a través del objeto window. Luego podemos acceder al tipo de evento con evento.type. Según el tipo ejecutamos una u otra cosa, pues partiendo de que cada botón es un vínculo que contiene una imagen (<a><img .../></a>) y dado que el vínculo controla los eventos onfocus, onblur y la imagen controla onmouseover, onmouseout, sucederá lo siguiente:

• Si el tipo es onmouseover, onmouseout es que el ratón entró o salió de la imagen, con lo que aplicamos uno u otro fondo backgroundImage al elemento imagen usando la referencia this.
• Si el tipo es onfocus, onblur es que el vínculo obtuvo o perdió el foco, con lo cual dado que el id de una imagen la hemos conformado con id del vínculo añadiendo la cadena "img", entonces podemos acceder a la imagen para modificar también su fondo igual que antes.

Con esto el XHTML queda limpio de código script, el cual puede compararse con el del ejemplo citado sin usar esta técnica de ocultación de script.

<div id="botonera">

    <!--Primer botón-->
    <a id="bot1" href="pyramid.gif"><img class="bot" id="bot1img" width="32" height="32"
    src="pyramid.gif" alt="" title="Imagen 'pyramid.gif'" /></a>
    
    <!--Segundo botón-->
    <a id="bot2" href="tubo.gif"><img class="bot" id="bot2img" width="32" height="32"
    src="tubo.gif" alt="" title="Imagen 'tubo.gif'" /></a>
    
    <!--Tercer botón-->
    <a id="bot3" href="flecha.gif"><img class="bot" id="bot3img" width="32" height="32"
    src="flecha.gif" alt="" title="Imagen 'flecha.gif'" /></a>
    
</div>                
            

Ejemplo: Uso del evento onload. Aplicaciones con JavaScript: Calculadora

Quizás JavaScript no es el lenguaje más adecuado para aplicaciones ejecutables complejas. Sin embargo el hecho de que se ejecuten en navegadores puede ser una facilidad en el sentido de que no hay que distribuir las aplicaciones. Después de todo una aplicación en sentido general no es otra cosa que una interfaz de usuario y unos eventos que recogen las acciones del usuario y ejecutan algo. Usando controles de formularios en una página web podemos asegurar la interfaz con cualquier navegador, mientras que JavaScript proporcionará el mecanismo de ejecución con los eventos.

En este ejemplo proponemos una aplicación simple de una Calculadora. Su utilidad es más bien escasa, pero nos proporcionará la experiencia y nos dirá hasta donde podemos llegar con JavaScript. Para ello disponemos de una página con controles del tipo <input> para conformar los botones y la pantalla de nuestra calculadora. Estos controles no se incluirán en un elemento <form>, pues no se trata de ningún formulario que se haya de enviar.

Combinando las propiedades adecuadas de los elementos y el JavaScript, podemos configurar lo necesario para que esta calculadora funcione. Se trata de seguir básicamente lo que se expuso en un ejemplo anterior sobre la adjudicación de eventos de los elementos. Veáse el código de la página, estilo y JavaScript externos.

Ejemplo: Uso del evento onsubmit. Formas de acceder a un elemento formulario con JavaScript. Validación para el envío de formularios.

Una de las utilidades de los scripts es realizar un control sobre los datos que introduce el usuario en los controles de un formulario. Para ello es necesario acceder al formulario y a sus elementos. Con JavaScript podemos obtener estas referencias de varias maneras entre las cuales exponemos las siguientes:

• Con document.forms[i].elements[j]. El objeto documento dispone de un array con las referencias de todos los formularios que contiene. Cada formulario a su vez tiene otro array con todos sus elementos. Los índices como siempre con JavaScript comienzan desde cero. El único problema es que el array se rellena con el orden según aparición de cada formulario en la página o de cada control dentro de un formulario, por lo que si luego se cambian de orden también habrá que reubicar el código relacionado.
• Con document.nombre_formulario.nombre_elemento, donde nombre_formulario y nombre_elemento son los valores de los atributos name dados a un formulario y elemento respectivamente. De esta forma evitamos el problema anterior sobre el ordenamiento.
• Con document.getElementById("identificador"), donde identificador es el valor del atributo id del formulario o de un elemento.
• Se puede acceder a todos los elementos del mismo tipo de un formulario usando nombre_formulario.getElementsByTagName("tag") donde tag es uno de los tipos input, button, textarea etc.

Una vez que obtengamos una referencia a un elemento de formulario, podemos usar sus propiedades como:

• Saber con type el tipo de elemento. Por ejemplo, para un elemento <input> nos interesaría saber si es un text, password, checkbox, ....
• Obtener una referencia al formulario que lo contiene con form. Por ejemplo, para obtener la referencia a su formulario de un botón de una página con identificador determinado haríamos document.getElementById("identif").form
• Acceder a su valor con value para leerlo o modificarlo, que en definitiva es realizar el control sobre los datos que introduce el usuario.

En la exposición de otros eventos ya se han desarrollado algunos ejemplos relacionados con formularios, de los cuáles podemos destacar por su interés los siguientes:

1. Ejemplo para validar números en un cuadro de texto con el evento onkeypress.
2. Ejemplo para limitar número de caracteres en un cuadro de texto multilinea con el evento onkeypress.
3. Ejemplo para dirigir el foco a los controles de un formulario, con el uso del evento onfocus.
4. Ejemplo para controlar texto con el uso del evento onkeyup.

Pero los eventos propios que sólo se aplican a elementos de formulario son <E onsubmit>, <E onreset>, <E onselect> y <E onchange>. En algunos ejemplos señalados en el párrafo anterior se realizaban algunas comprobaciones sobre los datos de texto que introducía el usuario, de tal forma que se controlaba carácter a carácter la validez del campo. Esto será necesario cuando no queremos que se introduzcan ciertos caracteres o limitar el número de ellos mientras el usuario está rellenando los campos. Pero para una validación general de un formulario quizás es más práctico realizar una validación completa previa al envío. Este ejemplo a continuación tiene ese propósito.

Por un lado tenemos un formulario simple compuesto sólo por campos de texto de los cuáles cuatro deberán ser rellenados obligatoriamente por el usuario y cinco de ellos serán validados:

<form name="formvalidado" action="formval.php"  (o "formval.jsp" para JSP)
    method="post" onsubmit="return validaForm(this)">
    <label>Nombre (*):
        <input type="text" name="nombre" size="50" maxlength="50" 
        title="Valor requerido" />
    </label><br />
    <label>Domicilio:
        <input type="text" name="domicilio" size="100" maxlength="100"
        title="Valor opcional" />
    </label><br />
    <label>D.N.I.(*):
        <input type="text" name="dni" size="9" maxlength="9" 
        title="D.N.I. requerido" />
    </label><br />
    <label>Teléfono 1(*):
        <input type="text" name="telefono-1" size="9" maxlength="9" 
        title="Teléfono requerido" />
    </label><br />
    <label>Teléfono 2:
        <input type="text" name="telefono-2" size="9" maxlength="9" 
        title="Teléfono opcional" />
    </label><br />                  
    <label>E-mail (*):
        <input type="text" name="e-mail" size="100" maxlength="100" 
        title="E-mail requerido" />
    </label><br />
    <div id="pie" style="font: 0.8em 'Arial';">Los campos con (*) son requeridos</div>       
    <input type="submit" name="envio" value="Enviar" />
    <input type="reset" value="Borrar" />
</form>                  
            

La validación se producirá cuando la función validaForm(this) devuelva true o false. Con un valor true el formulario enviará los datos al servidor, mientras que esta acción será abortada si la función devuelve false.

Puede ver el código del HTML y javascript en codigos.html. El script tiene utilidad para cualquier formulario siempre que se observen las siguientes reglas:

• Todos los controles <input> de tipo text del formulario serán objeto de validación.
• El atributo name de ese control debe ser comprensivo de la descripción del campo, pues se usará para dar mensajes al usuario sobre que campo se ha detectado un error.
• Estos controles deben llevar obligatoriamente un atributo title para que el script pueda seleccionar el tipo de validación que realizará. El contenido de este título será de 2 palabras exactamente, siendo la segunda "requerido" u "opcional". La primera puede ser "Valor" o bien alguna de las siguientes:
  • "D.N.I."
  • "Teléfono"
  • "E-mail"

Los que contengan como primera palabra "Valor" no serán validados aunque serán requeridos si contiene la segunda palabra "Requerido". Los que no contengan "Valor" como primera palabra si se validará la corrección de sus datos siempre que sea "requerido" o que sea "opcional" y el campo tenga algún contenido.

Puede agregar más tipos de validaciones en el script en el lugar correspondiente (en el switch de la función validaTextoInput()). No se tiene en cuenta el uso de mayúsculas ni la codificación de caracteres, sólo que ha de tener exactamente 2 palabras separadas por un espacio. Es decir, se realizará una división de la cadena del título por el carácter espacio con la función split() de Javascript. Se debe observar que el título lo verá el usuario, por lo que la primera palabra en combinación con la segunda le indicará que requerimientos de datos ha de introducir en ese <input>. Veámos las posibles combinaciones del título:

• "Valor opcional" para un campo que no es requerido (puede estar vacío)
• "Valor requerido" para un campo que se requiere con contenido, aunque no se valida el mismo.
• "D.N.I. opcional" para un campo que puede estar vacío, pero si contiene algo se validará si es un D.N.I. correcto.
• "D.N.I. requerido" para un campo que es requerido y que se validará si contiene un D.N.I. correcto.
• Etcétera...

Si el formulario es correcto se desactiva el botón de envío para impedir envíos duplicados. Esto se puede producir por la lentitud de la conexión por ejemplo, por lo que durante la espera la página pudiera no mostrar signos de actividad y el usuario estuviera tentado de volver a pulsar el botón de envío, pudiendo duplicar el envío de datos. De hecho hemos añadido un alert(mensaje) para comprobar el efecto de una espera en el envío, pues usando un servidor local o una conexión rápida no habrá prácticamente tiempo de observar los efectos en pantalla cuando el resultado sea correcto. Este mensaje emergente no se incluiría en una versión definitiva del formulario.