CAPITULO 13 (Introducción a JavaScript)

Hola. Este es mada menos que el capítulo 13 (12+1 si te preocupan esas tonterías) de este maravilloso curso de HTML.

Antes de continuar he de avisarte de un par de cosas sobre este capítulo:

1. A pesar del título, no voy a explicar nada de cómo programar en JavaScript.
2. A pesar del título, comentaremos otros lenguajes de script

Para empezar, vamos a ver qué demonios es un lenguaje de script (Cuidado, se avecina un peligroso párrafo de teoría, tomatelo con calma:

Un lenguaje de script no es más que un lenguaje de programación, escrito en un lenguaje próximo al humano (o sea, con palabras en lugar de con códigos binarios y otras cosas raras) que un programa de ordenador puede interpretar.

En otras palabras: Tú escribes una serie de ordenes en texto y, cuando llega el momento de ejecutar el script, el programa las vá leyendo y obedeciendo, actuando en consecuencia.

Ejemplos de lenguajes de script podrían ser el Batch del DOS (archivos *.bat), el Bash o el TCL de Linux/Unix o el AppleScript de los Mac.

Y, por supuesto, también son lenguajes de script el JavaScript, el Jscript y el VBscript.

HTML está preparado para poder incluir cualquier lenguaje de script inventado o por inventar. Lo malo es que tienen que reconocerlo los navegadores, Y hoy día solo reconocen (y de distinta forma) los tres últimos que he mencionado, y que paso a explicar un poco ahora mismo:

JavaScript:

Hace unos años, Netscape estaba preparando un lenguaje de script llamado "Natural Script" para incluirlo en su navegador, de modo que pudiera incluirse ciertas características de interactividad en las páginas web. Justo al mismo tiempo, SUN Microsystem publicó un lenguaje de programación llamado JAVA (del que hablaremos en otro capítulo). El éxito de JAVA fué tan grande, y se hizo tan popular, que Netscape compró los derechos del nombre "JAVA", y se lo añadió a su lenguaje de script, naciendo así JavaScript. Es importante que entiendas que JAVA y JavaScript son dos lenguajes completamente distintos, y que se usan de forma totalmente diferente.
JavaScript es hoy día el lenguaje de script para páginas web más popular y extendido, el que reconocen más navegadores distintos, y es en el que nos centraremos en este capítulo.

JScript

Microsoft no compró los derechos del nombre a SUN, por lo que no podían usarlo. De modo que, cuando crearon su propia versión de JavaScript, tuvieron que usar otro nombre, y este fué Jscript. Jscript es casi idéntico a JavaScript de modo que, generalmente, se usa "JavaScript" para referirse a ambos.

VBscript

Microsoft creó también un lenguaje de script independiente para su navegador, el Internet Explorer. La sintaxis de este lenguaje estaba basada en la de "Visual Basic", un lenguaje de programación de esta compañia, por lo que le pusieron el nombre de "Visual Basic Script" o, para acortar, VBscript o VBS. Este lenguaje es muy diferente de JavaScript, tanto en su sintaxis como en sus capacidades. Además, solo funciona en el Internet Explorer (y no en todas las versiones, claro) y no en otros navegadores. Es por ello que se utilice mucho menos que JavaScript (que funciona en muchos más navegadores distintos). Y es por eso mismo que no pienso tratarlo más en este capítulo.

Ahora, dejemonos de tantas tonterías, y vayamos a lo práctico:

HTML dispone de una etiqueta para incluir código de script en una página. Esa etiqueta puede situarse en la sección HEAD o el el BODY de tu página (eso depende de lo que vaya a hacer el script, luego veremos unos ejemplos) y es la siguiente:

<SCRIPT LANGUAGE="lenguaje-de-script" TYPE="tipo/mime">
<!--
...texto del script...
-->
</SCRIPT>

Humm... Parece un poco complicado ¿No? Vamos a ver si lo aclaramos un poco:

lenguaje-de-script es el nombre del lenguaje que vamos a usar en el script, para que el navegador se haga una idea. En caso de que usemos JavaScript (o Jscript), podremos JavaScript. Si vamos a usar VBscript, usaremos el nombre VBS.

TYPE="tipo/mime" es donde le indicamos al servidor cómo está codificado el script. en el caso de JavaScript este debe ser text/javascript y, en el caso de VBscript, debe ser text/vbscript.

...texto del script... es el programa de script en sí mismo. Su sintaxis dependerá del lenguaje en concreto que usemos.

Habrás notado que el script se introduce entre los signos de comentario <!-- y -->, esto se hace para que los navegadores antiguos (que no reconocen la etiqueta SCRIPT), no muestren el texto del script por pantalla.

También pensando en esos navegadores antiguos tenemos la siguiente etiqueta:

<NOSCRIPT>
Texto alternativo
</NOSCRIPT>

Que se puede situar debajo del script (debajo de </SCRIPT>), y donde podemos poner un texto, o una imagen, o lo que queramos, que solo se verá si el browser no reconoce la etiqueta SCRIPT (los navegadores que la reconozcan ocultarán el contenido de NOSCRIPT). Evidentemente, solo tiene sentido si se usa en BODY

Como ya va siendo hora de ver algún ejemplo, vamos con el primero. Usaremos JavaScript, y para ello vamos a emplear el siguiente código: "window.alert ('Esto es un ejemplo con JavaScript')", que hace que se habra una pequeña ventana con un texto. Veamoslo:

Vamos a fijarnos en unos detalles del ejemplo anterior:

Un detalle importante son las dos barras inclinadas (//) que hay justo delante del signo de fin de comentario. Es la marca de comentario de JavaScript, y está ahí para evitar que el intérprete de JavaScript (el sub-programa del navegador que interpreta el JavaScript) se haga un lío con la marca de fin de comentario de HTML.

Probablemente te hayas fijado en que la pá comienza a cargarse hasta que llega al JavaScipt, momento en el que se detiene, y no continúa hasta que pulsas el botón de "aceptar" de la pequeña ventana de alerta.

La verdad es que, aunque puede ser útil en muchos casos, esta no es la mejor forma de ejecutar un script. JavaScript en un lenguaje "orientado a eventos", esto quiere decir que está preparado para responder a acciones del navegante, cosas que ocurran en el navegador, etc. (a eso es a lo que se llama "eventos").

Eventos pueden ser, por ejemplo, un click de ratón en un lugar determinado, que se abra una ventana, etc. HTML tiene una serie de parámetros que se pueden incluir en las etiquetas para indicar cómo debe responder a los eventos. El primero de esos parámetros es el que le indica qué debe hacer cuando una página está cargada. se usa en el tag BODY y su nombre es ONLOAD.

Se usa del siguiente modo:

<BODY ONLOAD="acción">

Donde "acción" es una llamada a una función de script (cuya sintaxis depende del lenguaje que usemos) que esdtará contenida en una etiqueta SCRIPT. ¿Complicado? Veamoslo con otro ejemplo:

Como verás, el script ahora se ejecuta cuando la página se ha cargado totalmente, tal como le hemos dicho con el evento ONLOAD.

Otro evento parecido que podemos usar es ONUNLOAD, que se activará cuando se salga de la página para entrar a otra (por ejemplo, al pulsar un link). este evento también se usa en el tag BODY como hemos visto antes.

Pero existen muchos eventos admitidos por HTML que podemos usar en casi cualquier etiqueta:

ONCLICK: Se activa este evento al hacer click con el rató sobre el objeto al que asignemos este evento (un click es apretar el botón y soltarlo).

ONDBLCLICK: Este es igual que el anterior, pero al hacer doble click.

ONMOUSEDOWN: Casi igual que el evento ONCLICK, este se activa al apretar el botón (no hay que soltarlo).

ONMOUSEUP: Justo el complementario del anterior, este evento se activa al soltar el botón del ratón.

ONMOUSEOVER: Se activa al situar el puntero sobre el elemento.

ONMOUSEMOVE: Muy parecido al anterior, este se activa a mover el puntero sobre el elemento.

ONMOUSEOUT: El complementario de ONMOUSEOVER, se activa al quitar el puntero de un elemento.

ONKEYPRESS: Este se activa cuando, estando un elemento seleccionado (por ejemplo, con el puntero del ratón sobre él), pulsamos una tecla (apretar y soltar).

ONKEYDOWN: Igual que el anterior, pero solo al apretar la tecla.

ONKEYUP: Como el anterior, pero solo al soltar la tecla.

Todos estos eventos son, en principio, aplicables a casi todos los elementos de tus páginas web, ya sean párrafos, imágenes, negritas, etc. Lo malo es que no todos los navegadores los reconocen en todos ellos. El único al que suelen reconocerestos parámetros es a <A> (y eso solo los más modernos), de modo que es el que usaremos para nuestro ejemplo:

La verdad es que con estos eventos ya se pueden hacer algunas cosillas, pero HTML nos provee de otra familia de eventos más, estos orientados a trabajar con formularios:

ONFOCUS: Este evento se activa cuando el elemento recibe el foco (haciendo click con el ratón en él o pulsando la tecla TAB hasta que esté marcado. Se aplica también al elemento <A>.

ONBLUR: Este es el opuesto al anterior. Se activa al perder el foco.

ONSUBMIT: Solo sirve para el elemento <FORM>, y se activa al enviar el contenido de un formulario.

ONRESET: También para la etiqueta <FORM>, se activa al borrar todo el contenido del formulario con un botón tipo "RESET".

ONSELECT: Aplicable solo a las entradas de texto, se activa al seleccionar el texto de un campo.

ONCHANGE: Se activa al cambiar el contenido de un elemento (cuyo contenido pueda cambiar, claro). Solo se considera que el contenido ha cambiado una vez que este pierda el foco.

Evidentemente, los elementos de un formulario también pueden usar los eventos generales que vimos antes (¿qué sería de los botones sin el ONCLICK?).

Como hemos visto a lo largo de los ejemplos anteriores, el código JavaScript puede situarse tanto en la sección HEAD como en el BODY. Pero hay una forma más de colocar un programa JavaScript: En un archivo aparte.

Quizás recuerdes lo que hacíamos con las hojas de estilo: Las situabamos en un archivo aparte de la hoja, y así podíamos enlazarlas desde varias páginas distintas. Pues exactamente eso mismo podemos hacer con los scripts. Para ello tenemos la siguiente instrucción:

<SCRIPT LANGUAGE="lenguaje-de-script" TYPE="tipo/mime" SRC="archivo.js">
...texto alternativo...
</SCRIPT>

Creo que esto me suena ¿no es la misma etiqueta que vimos al principio?

Efectivamente. La sutil diferencia consiste en ese atributo SRC que le hemos añadido, y en el que le indicaremos la dirección y el nombre del archivo que contiene el script (la extensión que se usa con los JavaScrips es *.js)

Como le hemos indicado la URL del archivo, lo que haya entre las etiquetas <SCRIPT> y </SCRIPT> será ignorado, a menos que el navegador no soporte JavaScript.

Veamoslo con un ejemplo. Hemos creado un simple archivo de texto en el que hemos puesto el siguiente código:

Hemos guardado el archivo con el nombre "script.js", lo hemos guardado en el mismo directorio de la página que vamos a usar, y ahora ponemos esto en nuestra página:

Pulsa aquí para ver el ejemplo anterior.

Como puedes ver, no es nada dificil. La única complicación que puede tener es aprender a programar en JavaScript (y eso sí es dificil). Con esto creo que ya hemos terminado. Nos vemos en el siguiente capítulo de "Edición Extremadamente Simple de HTML".