12. JavaScript.

12.1. Introducción. Conceptos básicos. Referencias.

12.2. Inclusión de código JavaScript en las páginas Web.

12.1. Introducción. Conceptos básicos. Referencias.

Las páginas Web las podemos clasificar en estáticas y dinámicas. La diferencia esencial es que las páginas estáticas muestran información que no va a cambiar, por el contrarío en las páginas dinámicas, éstas se crean a partir de la solicitud de los clientes.

Cuando hablamos de páginas dinámicas necesitamos algún mecanismo que nos permita gestionar las peticiones de los clientes, navegadores, para ofrecer las páginas solicitadas. Este mecanismo o procesamiento lo podemos ubicar en el lado del servidor; disponiendo así de lenguajes tipo PHP, ASP, JSP, etc. o bien en el cliente con lo que nos encontramos con JavaScript o Visual Basic Script.

JavaScript es un lenguaje de programación interpretado en el cliente que permite crear páginas Web dinámicas.

Cuando comentamos que es un lenguaje interpretado has de saber que podemos clasificar los lenguajes de programación en dos grandes categorías:

* Los compilados, aquellos que para su ejecución es necesario la previa compilación del programa fuente.

* Los interpretados, en los cuales se encarga un intérprete de su traducción instrucción a instrucción en tiempo de ejecución. Tradicionalmente son más lentos, pequeños pero más portables.

Para profundizar en la creación de páginas Web dinámicas en el lado del servidor dirígete a los capítulos dedicados a PHP y Java.

Lo que todos conocemos como JavaScript es en verdad el estándar ECMAScript y podemos encontrar las especificaciones oficiales en la siguiente página Web:

http://www.ecma-international.org /en la sección Standars.

A parte de esta dirección, si deseas profundizar, queremos recomendarte las siguientes:

http://www.w3schools.com/JS/default.asp

http://www.mundojavascript.com/

http://www.webestilo.com/javascript/

http://docs.sun.com/source/816-6409-10/contents.htm

12.2. Inclusión de código JavaScript en las páginas Web.

Para incluir código JavaScript en nuestras páginas Web disponemos de tres métodos:

1. Mediante la etiqueta <script>:

<html>

<head><title> Guía del perfecto Webmaster</title>

<script type="text/Javascript">

alert("Código JavaScript");

</script></head>

<body>

Ejemplo JavaScript

</body>

</html>

Indicando mediante el atributo type que se trata de un código JavaScript.

Aunque podemos insertar la etiqueta en cualquier parte del documento, es conveniente insertarlo al principio, en la cabecera para una mejor compresión del código fuente.

En el ejemplo mostramos una ventana de diálogo al cargar la página.

2. Utilizando un archivo externo en la propia etiqueta <script>:

<html>

<head><title> Guía del perfecto Webmaster</title>

<script type="text/Javascript" src="Scripts/mensajes.js">

</script></head>

<body>

Ejemplo JavaScript

</body>

</html>

En este método indicamos un archivo externo, mediante el parámetro src.

<script type="text/Javascript" src="Scripts/mensajes.js">

El archivo que contiene el código JavaScript ha de tener la extensión “js”, lo podemos realizar con cualquier editor de textos y ha de estar ubicado en algún directorio de nuestro servidor Web con permisos de acceso.

3. El tercer método es indicarlo en las propias etiquetas de HTML/XHTML.

<html>

<head><title> Guía del perfecto Webmaster</title></head>

<body>

<p onclick="alert('Código JavaScript');">

Ejemplo JavaScript

</p>

</body>

</html>

Observa el ejemplo, en este caso sólo nos mostrará el mensaje de alerta cuando pulsemos sobre el texto ya que hemos capturado el evento pulsar.

En el epígrafe dedicado a los eventos aprenderemos a gestionarlos de manera más adecuada.

Para el correcto funcionamiento de JavaScript es necesario habilitar esta característica en los navegadores. Una buena práctica es avisar al usuario de que la página dispone de código JavaScript y añadir contenido alternativo cuando dicho código no pueda ser ejecutado mediante la etiqueta <noscript>.

12.3. Aprendiendo el lenguaje.

En el epígrafe anterior hemos tenido nuestro primer contacto con JavaScript, pero como hemos mencionado anteriormente JavaScript es un lenguaje de programación interpretado, orientado a objetos y bastante complejo. A continuación te indicamos unas líneas maestras sobre el lenguaje:

* JavaScript es Case-sensitive, es decir, se distingue entre mayúsculas y minúsculas.

* A la hora de utilizar variables no es necesario definir el tipo de éstas ni inicializarlas aunque por supuesto realizarlo es una buena práctica de programación.

* Para indicar los comentarios disponemos de dos opciones. Las dos barras inclinadas para comentarios de una sola línea // y la pareja /* y */ para comentarios más extensos.

* Las instrucciones no tienen por que acabar con el punto y coma “;” aunque te recomendamos encarecidamente que las utilices.

* A la hora de interpretarlo no se tienen en cuenta los espacios en blanco y las nuevas líneas. Nosotros te recomendamos que ordenes el código para mejorar la legibilidad y mantenibilidad, para ello un buen consejo es utilizar las tabulaciones.

12.3.1. Variables y operadores.

Empecemos definiendo lo que es una variable, para nosotros es un valor que es susceptible de ser cambiado a lo largo de la ejecución de un programa, script. Así por ejemplo si estamos realizando un script que sume el valor de dos números introducidos por el teclado, podemos disponer de las variables: valor primero, valor segundo y resultado.

Una variable es un elemento que se emplea para almacenar algún valor.

Para declarar una variable utilizaremos la palabra var y no podemos utilizar como primer carácter del nombre de la variable un número.

En JavaScript se puede trabajar con los siguientes tipos de variables:

* Numéricas. Representación de los números naturales, enteros y decimales. Ejemplo: var numero = 6;

* Cadenas de texto. Representan caracteres o cadenas de caracteres. Ejemplo var frase=“Hola Mundo”;

* Lógicos. Boolean, tipo de dato que sólo puede tener dos valores: verdadero o falso.

Ejemplo var respuesta=false;

* Matrices.Tipo de dato compuesto formado por la agrupación de algún tipo de dato simple, por ejemplo un vector de 5 enteros es un tipo de dato que registra cinco valores enteros. Nótese que es necesario disponer de un índice, clave, para acceder a los distintos elementos del vector.

Ejemplo var Notas=[3,6,8,8,9];

Veamos un ejemplo de los tipos de variables:

<html>

<head><title> Guía del perfecto Webmaster</title></head>

<script type="text/Javascript">

/*ejemplo de variables*/

//Variables númericas:

var n1 = 5;

var n2 = 23;

var suma = n1 + n2;

alert(suma);

//Cadenas de texto

var cadena = "Guia del perfecto Webmaster";

alert(cadena);

//Booleanos

var opcion = true;

alert(opcion);

//Matrices

var notas = [3,5,6,7,2];

alert(notas[3]);

</script>

<body>

Ejemplo JavaScript [Variables]

</body>

</html>

Esta página irá mostrando mensajes con los cálculos realizados, mostrará los siguientes mensajes:

* 28.

* Guía del perfecto Webmaster.

* true.

* 7.

Dos aclaraciones:

Respecto a las cadenas de caracteres has de saber:

* Si deseas incluir comillas dobles has de utilizar el carácter \”

* Para incluir comillas simples has de utilizar el carácter \’

* Para añadir una nueva línea \n

* Para el tabulador \t

Las matrices empiezan por el 0 luego notas [3] es 7 y no 6.

Veamos ahora los operadores de que disponemos:

* Operador de asignación, “=”. Este operador lo utilizamos para asignar valores a las variables.

* Operadores de autoincremento y autodecremento, “++” y “--“. Utilizados en muchos lenguajes, incrementan o decrementan el valor de una variable automáticamente.

* Operadores lógicos. Normalmente utilizados en las condiciones para manejar el flujo de ejecución de los scripts. Tenemos los siguientes:

+ Negación “!”. Obtenemos la negación del operando. Si el operando es true la negación será false.

+ Producto lógico “AND”, “&&”. Efectuamos el producto lógico de dos variables. Esta operación será verdad, true, cuando ambos parámetros sean verdad.

+ Suma lógica “OR”, “||”. La suma lógica será verdad cuando alguno de sus parámetros sea verdad y será falso sólo cuando ambos parámetros sean falsos.

* Operadores matemáticos, a saber, suma “ +”, resta “-“, multiplicación “*”, división “/” y modulo “%”. El módulo devuelve el resto de dividir dos números, por ejemplo 7 % 2 da como resultado 1;

* Operadores relacionales: mayor “>”, menor “<”, mayor o igual “>=”, menor o igual “ <=”, igual “==”, y distinto “!=”.

12.3.2. Estructuras de control.

Como cualquier lenguaje de programación JavaScript dispone de herramientas para modificar el flujo de ejecución de sus scripts. Estas son las denominadas estructuras de control.

La sintaxis de la estructura de condición simple es la siguiente:

if (condición)

{

instrucciones;

}

Donde se evalúa la condición y en caso de ser cierta se ejecutan las instrucciones contenidas entre las llaves. Podemos utilizar estructuras condicionales dobles, en este caso la sintaxis es:

if(condición)

{

instrucciones_1;

}else

{

instrucciones_2;

}

Evaluamos la condición y en caso de ser cierta ejecutamos el conjunto de instrucciones “ instrucciones_1”, en caso contrario realizaríamos el conjunto de instrucciones segundo. Recuerda que podemos anidar y concatenar las instrucciones condicionales simples consiguiendo así realizar programas más complejos.

Otra estructura de control condicional es la instrucción switch. Su sintaxis es la siguiente:

switch (variable) {

case valor1:

instrucciones;

break;

case valor2:

instrucciones;

break;

……

default:

instrucciones;

}

Se evalúa la variable utilizada y según el valor que tenga se ejecutarán una serie de instrucciones que finalizan con la sentencia break. Si no se encuentra un valor se realizarán las instrucciones de la sección default.

Muchas veces se nos hace necesario procesar un conjunto de instrucciones un número de veces, para realizar estas tareas disponemos de las estructuras de control repetitivas o comúnmente llamadas bucles.

var iteraciones=1;

var c= 10;

while (iteraciones<=c)

{

alert(“Una iteración”);

iteraciones++;

}

Quizás la más utilizada sea while que ejecuta las instrucciones que están dentro de su cuerpo mientras la condición que evalúa sea cierta.

¿Qué crees que realiza el ejemplo que te estamos mostrando?

Se ejecuta lo que este dentro del primer while hasta que iteraciones sea mayor o igual que la variable c; observa también que dentro del propio bucle incrementamos el valor de iteraciones con el operador de autoincremento: iteraciones++.

Es sumamente importante verificar que los bucles que crees finalicen, asegurándote que la condición se volverá falsa alguna vez. Evitando así bucles infinitos que nunca terminan de ejecutarse.

En el ejemplo expuesto utilizamos la instrucción:

iteraciones++;

El bucle while se denomina comúnmente como bucle repite mientras, otro bucle similar es el bucle repite hasta o do while. Veamos cómo funciona:

iteraciones=1;

{

alert(“una iteración”);

iteraciones++;

}while (iteraciones<=c);

La diferencia entre ambos bucles es que en el bucle do while o repite hasta, por lo menos se ejecutan una vez las instrucciones del cuerpo del bucle; mientras que el del bucle repite mientras o while, puede darse el caso que no se ejecuten nunca las instrucciones contenidas dentro del cuerpo.

Otra estructura de control repetitiva es el bucle for,su sintaxis es la siguiente:

for ( inicialización; condición; [incremento / decremento])

Consta de tres partes separadas por el carácter “;”, la inicialización del bucle, donde incluiremos las variables que estimemos oportunas, la condición a evaluar cada vez que se complete un ciclo del bucle y el incremento o decremento que nos asegura la finalización del bucle evitando así los bucles infinitos.

for (var iteraciones=1; iteraciones<=c; iteraciones++)

{

alert(“Una iteración”);

}

Otras estructuras de control repetitivas son los bucles for…in y with utilizadas en la programación orientada a objetos. La sintaxis de for … in es la siguiente:

for (variable in objeto)

{

instrucciones;

}

Este bucle itera la variable especificada sobre todas las propiedades de un objeto y ejecutas las instrucciones asociadas. Es muy útil para las matrices, observa el ejemplo:

/*ejemplo de bucles*/

var notas = [3,5,6,7,2];

for (i in notas)

{

alert(notas[i]);

}

La estructura del bucle with es la siguiente:

with (objeto)

{

instrucciones;

}

Nos permite establecer por defecto los valores del objeto.

12.3.3. Funciones, funciones y más funciones.

A medida que utilicemos JavaScript y creemos programas más complejos se nos hace necesaria la organización de éstos. Las funciones nos permiten agrupar partes de código que vayamos a utilizar más veces, tienen un nombre y son independientes. Típicamente realizan una tarea específica y nos posibilitan crear un código más organizado, estructurado y que es más fácil de mantener y reutilizar. La sintaxis de una función es la siguiente:

function nombre_función(parámetro1, parámetro2,….)

{

Instrucciones;

}

Normalmente las funciones se escriben al principio del Script, para una mejor comprensión; posteriormente cuando necesitemos hacer uso de éstas las invocaremos de la siguiente forma: nombre_función (parámetros).

En el caso de que nos interese que la función devuelva algún valor tendremos que indicárselo dentro de la función con la instrucción return valor; y posteriormente en la llamada guardar el valor devuelto en alguna variable de la forma var retorno=nombre_función (parámetros);

Veamos un ejemplo en el que mostramos el mayor de tres números:

Fíjate que los parámetros en la declaración de las funciones los separamos mediante comas y la llamada a la función es como una instrucción normal que termina con el punto y coma.

<html>

<head><title> Guía del perfecto Webmaster</title></head>

<script type="text/Javascript">

/*ejemplo de Funciones*/

/*Declaración de la función*/

//*******************************************************

function Mayor_3 (N1,N2,N3)

{

var mayor= N3;

if ((N1>=N2) && (N1>=N3))

{

mayor=N1;

}else if (N2>=N3)

{

mayor=N2;

}

return mayor;

}

//*******************************************************

//Distintas llamadas a la función

var numero=Mayor_3 (11,20,3);

alert(numero);

var parametro1, parametro2, parametro3, resultado;

parametro1=2;

parametro2=2;

parametro3=4;

resultado=Mayor_3 (parametro1,parametro2,parametro3);

alert(resultado);

</script>

<body>

Ejemplo JavaScript [Funciones]

</body>

</html>

Para utilizar variables globales, que se puedan utilizar dentro de las funciones hemos de declarar las variables fuera de toda función. Al principio del Script.

Por el contrario, si deseamos que una variable de una función sea accesible desde fuera de ésta la declararemos sin la palabra reservada var.

Existen una serie de funciones que podemos utilizar directamente desde nuestros Scripts. A continuación te mostramos un cuadro resumen con las más utilizadas:

Nombre	Descripción	Ejemplo de llamada
Cadenas de texto
+	Concatena dos ó más cadenas de texto. Se puede utilizar también la función: concat(cadena).	var parte1 =”Hola”; var parte2 = “Software libre” var total = parte1 + parte2; var total = parte1.concat(parte2);
charAt (posición)	Obtiene el carácter que se encuentra en la posición indicada.	var caracter=parte2.charAt(5); //caracter=’a’
indexOf (carácter)	Devuelve la posición del carácter en la cadena.	var posicion=parte2.indexOf(‘w’); //posicion=4
length	Devuelve la longitud de la cadena.	var tamaño=parte2.length; //tamaño=13
LastIndexOf(carácter)	Devuelve la última posición del carácter en la cadena.	var posicion=parte2.LastIndexOf(‘e’); //posicion=13
replace (cadena, nueva)	Reemplaza cadena por la nueva.	var NewCadena=parte2.replace (“Software”,”Sw”); //NewCadena=”Sw Libre”
substring (inicio, final)	Extrae una cadena de texto.	var parte=parte2.substring(9,13); //parte=”libre”
split(separador, cadena)	Convierte una cadena en una Matriz de cadenas.	var parte=parte2.split(“ “); //parte= [“Software”,” Libre”]
toLowerCase	Transforma una cadena en minúsculas.	var parte=parte1.toLowerCase(); //parte=”hola”
toUpperCase	Convierte una cadena en mayúsculas.	var parte=parte1.toUpperCase(); //parte=”HOLA”
Números
toFixed(decimales)	Muestra el número con los decimales especificados.	var N1=34.56; N1.toFixed(1); //N1=34.5
Matrices
concat()	Funciona igual que con cadenas de caracteres.
join(separador)	Es la inversa de la función split(), convierte una matriz en cadena.	var notas=[1,6,10]; var cadena=notas.join(); //cadena=”1,6,10”;
length	Funciona igual que con cadenas de caracteres.
pop()	Extrae el último elemento de la matriz.	notas.pop(); //notas=[1,6];
push(elemento)	Introduce un elemento al final en la matriz.	notas.push(5); //notas=[1,6,10,5]
reverse()	Invierte una matriz.	notas.reverse(); //notas=[10,6,1];
shift()	Extrae el primer elemento de la matriz.	notas.shift(); //notas=[6,10]
sort	Ordena una matriz.	notas.sort() //notas=[1,6,10];
unshift(elemento)	Introduce un elemento al principio de la matriz.	notas.unshift(5); //notas=[5,1,6,10]

Al igual que con CSS disponemos de chuletas que nos serán de gran utilidad, en ellas encontramos información rápida, clara y concisa de las distintas funciones y herramientas de JavaScript. En las siguientes direcciones puedes consultar nuestras favoritas.

http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

http://www.desarrolloweb.com/articulos/hojas-referencia-javascript.html

http://www.visibone.com/

12.3.4. Controla todo lo que ves y no ves. El modelo DOM

El modelo DOM, modelo de objetos de un documento, permite acceder a los distintos elementos de una página Web. DOM básicamente es una estructura que genera el navegador con el que vemos las páginas una vez se han cargado éstas.

<html>

<head>

<title>Modelo DOM</title>

</head>

<body>

<p>

Guía del perfecto WebMaster

</p>

</body>

</html>

Para cada elemento de la página: un párrafo, una tabla, un texto, etc. DOM lo representa mediante un nodo de tal manera que cada página Web la podemos definir como un árbol de nodos. Mediante DOM podemos acceder a cada nodo y modificar lo que precisemos e incluso crear nuevos nodos.

DOM es la representación en memoria de un Documento. Aunque se intenta homogeneizar y unificar criterios, actualmente disponemos de variaciones en los modelos DOM que crean cada navegador, los dos predominantes son el estándar del W3C y el de Microsoft.

DOM define los siguientes tipos de nodos:

Nodo	Descripción:
Document	Raíz. Todo el documento.
DocumentFragment	Tipo especial de documento.
DocumentType	Identificación del tipo de documento.
EntityReference	Referencia de la entidad.
Element	Elemento propio del documento, por ejemplo <p>.
Attr	Atributo de un elemento.
ProcessingInstruction	Utilizado en el modelo vista controlador, devuelve los datos de un nodo.
Comment	Comentarios del documento.
Text	Objeto creado por cada campo de texto (input type="text") en un formulario.
CDATASection	Implementación de Text.
Entity	Entidad.
Notation	Notación en la definición de nodos.

Cada nodo dispone de un conjunto de propiedades, para poder recorrer el árbol, a continuación te mostramos los más usuales:

* firstChild: primer hijo.

* lastChild: último hijo.

* childNodes: matriz de los hijos del nodo.

* parentNode: nodo padre.

* nextSibling: siguiente hijo.

* previousSibling: hijo anterior.

Y los siguientes métodos para poder manipular el árbol.

* insertBefore(elementoAInsertar, elemento); insertamos el elemento elementoAInsertarantes del nodo hijo elemento.

* replaceChild(nuevoHijo, hijoAntiguo); reemplazamos el hijo hijoAntiguo del nodo por el nodo nuevoHijo.

* removeChild(hijo); elimina el nodo hijo hijo.

* appendChild(hijo);añadimos como hijo del nodo sobre el que se llama el método el nodo hijo.

Veamos un ejemplo, si queremos hacer referencia al nodo cuyo contenido es “Modelo DOM” lo indicaremos de la siguiente manera:

Document.firstChild.firstChild.firstChild.

Esta manera de acceder a los distintos nodos de la página es un poco engorrosa. Disponemos de otra forma de acceso a los nodos de una manera directa mediante las siguientes funciones:

Función	Descripción
getElementsByTagName(tagABuscar)	Devuelve los elementos de la página cuya etiqueta sea igual a tagABuscar.
Ejemplo: var titulos = document.getElementsByTagName(“title”); El resultado de esta función es una Matriz de elementos DOM que cumplen la condición de búsqueda.
getElementsByName(nombre)	Es similar a getElementsByTagName pero el criterio de búsqueda lo modificamos para buscar por el atributo nombre de la etiqueta.
Ejemplo: var titulos = document.getElementsByName(“Titulo”); El resultado de esta función es una Matriz de elementos DOM que cumplen la condición de búsqueda.
getElementsByID(identificador)	Devuelve una referencia al primer objeto con el identificador especificado.

12.3.4.1. Un ejemplo más complejo un visor de imágenes.

Una vez visto el modelo de objetos DOM es el momento de mostrar algo más difícil. Realicemos un visor de imágenes, observa el código fuente:

<html>

<head>

<title>Ejemplo de un Visor de imágenes con JavaScript</title>

<script type="text/javascript">

//variables globales

var contador = 0; //variable auxiliar

var Imagenes = []; // Matriz de imágenes

******************************************************************

Función que elimina todas las imágenes del documento y las agrega en la matriz Imagenes

*******************************************************************/

function Inicializa()

{

var contenedor = document.getElementById("Imagenes");

//Variable que contiene una referencia al primer objeto con id "Imagenes"

while (contenedor.childNodes.length > 0)

{

/*Mientras tenga hijos ve eliminando elementos e insertándolo en la matriz Imágenes */

if (contenedor.getElementsByTagName("img")[0] == contenedor.firstChild)

{

Imagenes[Imagenes.length]

= contenedor.removeChild(contenedor.firstChild);

}

else

{

contenedor.removeChild(contenedor.firstChild);

}

/*******************************************************************/

function mover(direccion)

{

if (direccion==2) //Hacia adelante

{

contador++;

if (contador >= Imagenes.length)

{

contador = 0;

}

else //Hacia atrás

{

contador--;

if (contador < 0 )

{

contador = Imagenes.length - 1;

}

MuestraImagen();

}

/*******************************************************************/

function MuestraImagen()

/* Si no tenemos imágenes en el documento insertamos una, en caso contrario, reemplazamos la que apunta contador de la matriz Imagenes por la primera*/

{

var contenedor = document.getElementById("Imagenes");

if (contenedor.childNodes.length==0)

{

contenedor.appendChild(Imagenes[contador]);

}

else

{

contenedor.replaceChild(Imagenes[contador], contenedor.childNodes[0]);

}

/*******************************************************************/

</script>

</head>

<body>

<a href="javascript: mover(1);">Atrás</a>

<span id="Imagenes">

<img src="imagenes/Img1.jpg" alt="Imagen 1" height="400" width="300">

<img src="imagenes/Img2.jpg" alt="Imagen 2" height="400" width="400">

<img src="imagenes/Img3.jpg" alt="Imagen 3" height="400" width="400">

</span>

<a href="javascript: mover(2);">Adelante</a>

</body>

<script type="text/javascript">

Inicializa();

MuestraImagen();

</script>

</html>

Analicemos en detalle:

* Empezando por el final, la página que carga el usuario al principio a partir de de la cual se forma el modelo DOM en memoria principal. Costa de la estructura normal de una página con dos referencias, <a>, hacia la función en JavaScript mover y una etiqueta <span> que agrupa a tres imágenes <img>.

* Dentro de la página encontramos dos scripts, el primero donde realizamos o implementamos todas las funciones y el segundo que inicializa la página llamando a las funciones Inicializa() y MuestraImagen().

* Las funciones implementadas en el Script son: Inicializa(),MuestraImagen() y mover(direccion).

* Inicializa()se encarga de una vez creado el DOM en la memoria principal del navegador del usuario, inicializar la matriz Imagenes con las imágenes del documento.

* La función MuestraImagen() añade una imagen si no disponemos de ninguna o reemplaza la que estamos visualizando en un momento dado en función de la elección del usuario (Adelante, Atrás).

* La función mover(direccion). Nos permite ir cargando las imágenes según el comportamiento del usuario, para ello actualiza contador y llama a la función MuestraImagen(). Observa que recibe como parámetro la dirección, un entero que en caso de ser distinto a dos nos moverá hacia atrás en la matriz de imágenes.

*Existen dos variables globales, contadore imágenes, la primera nos sirve para saber dónde estamos dentro de la matriz de imágenes y la segunda contiene la matriz con las imágenes.

* En las siguientes ilustraciones te mostramos el resultado del Script.

12.3.5. Eventos: gestionando las acciones de los usuarios.

En conjunción con el modelo DOM, JavaScript permite gestionar los eventos de los usuarios. La combinación de estas dos técnicas nos proporciona una flexibilidad total para realizar páginas Web profesionales.

Un evento es una acción del usuario sobre una página Web, como puede ser pulsar una tecla, seleccionar una imagen, pasar con el ratón encima de un dibujo, cargar la pagina, recibir el foco de atención en un cuadro de texto, etc.

En la programación orientada a eventos el flujo de ejecución de los programas varía según las acciones, sucesos, que realice el usuario.

JavaScript permite capturar estos eventos y asignarles Scripts según deseemos. Los modelos de eventos varían de un navegador a otro y en ocasiones podemos encontrarnos con eventos que no son compatibles en un navegador particular. A continuación te mostramos los eventos más utilizados según el estándar de modelo básico que soportan todos los navegadores.

Evento	Descripción	Etiquetas para las que está definida
onblur	Perdida de foco.	Elementos: button, input, label, select, textarea y body.
onchange	Cambio de elementos.	Elementos: input, select y textarea.
onclick	Pulsar un elemento.	Todos.
ondbclick	Doble clic sobre el elemento.	Todos.
onfocus	Recepción del foco.	Elementos: button, input, label, select, textarea y body.
onkeypress	Pulsar una tecla.	Elementos contenidos en el formulario y body.
onload	Cargar una página.	body.
onmousemove	Mover el ratón sobre el elemento.	Todos.
onreset	Recargar el elemento.	Formularios.
onselect	Seleccionar el elemento.	Elementos: input y textarea.
onsubmit	Enviar el elemento.	Formularios.

A continuación te mostramos un ejemplo de control de eventos en un formulario:

<html>

<head>

<title>Eventos con JavaScript</title>

<script type="text/javascript">

/******************************************************************/

function Mensaje()

{

document.formulario1.txt1.value="Guía del perfecto Webmaster";

}

/******************************************************************/

function Cambia_color_foco()

{

document.formulario1.txt2.style.backgroundColor="red";

}

/******************************************************************/

</script>

</head>

<body>

<form name="formulario1">

<table width="75%" align="center" border="1">

<tr>

<td><input name="boton1" type="button" value="Pulsa para rellenar" onClick="Mensaje();"></td>

<td><input name="txt1" type="text" size="25"></td>

</tr><tr>

<td><input name="boton2" type="button" value="Si pulsas, saludo" onClick="alert('hola');"></td>

</tr>

<tr>

<td><input name="txt2" type="text" size="25" onblur="this.style.backgroundColor='#ffffff'" onfocus="Cambia_color_foco();"></td>

</tr>

</table>

</body>

</html>

Analicemos el ejemplo:

* Líneas [5-10]. Definimos la función Mensaje() que rellenará el inputbox “txt1” de nuestro formulario, “formulario1” con el mensaje “Guía del perfecto Webmaster” cada vez que sea llamada.

* Líneas [10-15]. Las siguiente función “Cambia_color_foco()” modifica el color de fondo del inputbox “txt” a rojo. Fíjate que para ambas funciones hemos utilizado el modelo DOM.

* Líneas [20-21]. Creamos un botón “ boton1” al que le hemos capturado el evento onClick para ejecutar la función “Mensaje()” sobre el “txt1”.

* Líneas [24-25]. Aquí exponemos otra forma de utilizar los eventos, no muy aconsejable, que es definir directamente las instrucciones JavaScript sobre las etiquetas HTML/XHTML. Concretamente capturamos el evento onClick para mostrar un mensaje.

* Por último en las líneas [27-28] capturamos varios eventos, onblur y onfocus para colorear el fondo del inputbox cuando éste pierda o reciba el foco. Un detalle a tener en cuenta es la utilización de la palabra reservada this que hace referencia al objeto en el que nos encontramos.

12.3.5.1. Manejadores de Eventos.

Para controlar los eventos por parte del usuario puedes utilizar uno de los siguientes procedimientos:

* Dentro del propio atributo HTML/XHTML. Ponemos el código JavaScript completo dentro del atributo. No es recomendable pero es cómodo.

* Mediante funciones externas. Llamamos a una función JavaScript en el atributo HTML/XHTML

* Mediante manejadores semánticos. Utilizamos funciones externas mediante las propiedades de DOM.

Este último procedimiento merece una aclaración. En los dos primeros procedimientos estamos ensuciando el código HTML/XHTML, ya que es difícil separar el código JavaScript del HTML/XHTML. Para solucionarlo se propone:

1º.- Crear un identificador al propio atributo HTML/XHTML mediante “id”.

2º.- Definir la función JavaScript que gestione el evento.

3º.- Asignar la función al elemento HTML/XHTML mediante DOM.

De esta manera nuestro ejemplo:

<input name="boton1" type="button" value="Pulsa para rellenar" onClick="Mensaje();">

Quedaría de la siguiente manera:

<input id=”pulsa” name="boton1" type="button" value="Pulsa para rellenar">

Y la parte en JavaScript:

function Mensaje()

{

document.formulario1.txt1.value="Guía del perfecto Webmaster";

}

var Mievento = document.getElementById(“pulsa”);

Mievento = addEventListener(“click”, Mensaje, false);

Las funciones de los manejadores de eventos son diferentes en Internet Explorer y el estándar. Así el estándar utiliza las funciones:

addEventListener, para asociar un evento.

removeEventListener, para eliminar un evento (desasociar).

Y en Microsoft:

attachEvent, para asociar un evento.

deachEvent, para eliminar un evento (desasociar).

Concretamente para navegadores Microsoft la instrucción última quedaría:

Mievento.attachEvent(“onclick”,Mensaje);

Veamos pues un ejemplo más completo, para empezar vamos a separar el código JavaScript de la página HTML, obsérvese como invocamos al fichero con extensión .js que contendrá el código JavaScript: <script type="text/javascript" src="javascriptexterno.js">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Eventos con JavaScript</title>

</head>

<body>

<tbody>

<tr>

<td>

</tr>

</tbody>

</table>

</form>

</body>

</html>

Veamos ahora el código JavaScript del fichero javascriptexterno.js. Para entenderlo mejor empieza leyendo los comentarios de abajo a arriba, empezando por window.onload, siguiendo por Inicializar y finalizando con Mensaje.

// La función Mensaje cambia el valor de texto del campo de entrada con nombre txt1

function Mensaje() {

document.formulario1.txt1.value="Guía del perfecto Webmaster";

}

/* La función Inicializa asocia el evento onclic a la función Mensaje para el botón con identificador pulsa */

function Inicializar() {

var Mievento = document.getElementById("pulsa");

Mievento.attachEvent("onclick",Mensaje);

}

/*Esta línea indica que cuando la ventana termine de cargarse se llame al método Inicializar*/

window.onload=Inicializar;

Finalmente conseguimos que cuando el usuario haga clic sobre el botón mostremos en el cuadro de texto Guía del perfecto Webmaster. No sólo no hacemos gran cosa sino que además solo funciona para Internet Explorer. Sin embargo, hemos conseguido un código mucho más organizado y estructurado donde existe una clara separación entre el código HTML centrado en la presentación y el código JavaScript.

12.3.6. Una batería infinita de Scripts: Formularios, fechas, imágenes, etc.

Cuando necesites algo en JavaScript seguramente alguien lo habrá realizado ya, o puedas utilizar algún script similar al que añadas o modifiques algo según tus necesidades. Existen infinitud de scripts en la red, basta con que pongas en tu buscador favorito “Ejemplos JavaScript“, “scripts JavaScript”, etc. y ponerte a investigar.

La mejor manera de aprender es ver, estudiar y modificar los códigos realizados, de esta manera estarás siempre al día y serás más productivo. Puedes por ejemplo visitar una página que te gusta y observar los scripts que se han descargado en tu navegador.

Recuerda que con el plugin Firebug para Firefox puedes revisar e inspeccionar todo el código JavaScript de las páginas en las que estas navegando. Si deseas instalarlo dirígete al epígrafe “Firebug y chuletas CSS. Recursos esenciales para el WebMaster” del capítulo 11 “Una Web con estilo CSS”.

Desde aquí te vamos a proponer un conjunto de direcciones donde podrás encontrar multitud de ejemplos, organizados por categorías:

http://www.blogohblog.com/top-10-javascripts-for-image-manipulation/

Los 10 mejores Scripts para la manipulación de imágenes.

http://www.elcodigo.com/taller/javascript/indices.html

Multitud de Scripts organizados por categorías, a saber: banners, barras de estado, contadores de visitas, cookies,..etc.

http://www.htmlpoint.com/jscript/

Ejemplos prácticos de uso común.

http://www.losrecursosgratis.com/javascript/seccionjava/tiempo.html

Ejemplos con demostraciones prácticas.

http://www.gamarod.com.ar/

Otra buena colección de ejemplos.