Introducción
Para poder seguir este curso necesitas un navegador capaz de
ejecutar Javascript. Esto es: Netscape 2 o superior y Explorer 3 o
superior. Sin embargo, según se avanza en el curso es posible que
algunas cosas no funcionen en navegadores antiguos, aún cuando
soporten Javascript.
Para poder teclear los ejemplos no hace falta más que un editor
como el bloc de notas de Windows o similares. Así que, si cumples
todos los requisitos, ¡valor y al toro!
¿Qué es Javascript?
JavaScript, al igual que Java o VRML, es una de las múltiples
maneras que han surgido para extender las capacidades del lenguaje
HTML. Al ser la más sencilla, es por el momento la más extendida.
Antes que nada conviene aclarar un par de cosas:
- JavaScript no es un lenguaje de programación propiamente
dicho. Es un lenguaje script u orientado a documento, como
pueden ser los lenguajes de macros que tienen muchos procesadores
de texto. Nunca podrás hacer un programa con JavaScript, tan sólo
podrás mejorar tu página Web con algunas cosas sencillas (revisión
de formularios, efectos en la barra de estado, etc...) y, ahora,
no tan sencillas (animaciones usando HTML dinámico, por ejemplo).
- JavaScript y Java son dos cosas distintas. Principalmente
porque Java sí que es un lenguaje de programación completo. Lo
único que comparten es la misma sintaxis.
Este documento tiene como objetivo mostrar una parte de las
potencialidades del JavaScript. No pretendo hacer aquí una guía
completa, sino sólo una pequeña introducción. Para tener una guía de
referencia es mejor acudir a la que ofrece Netscape
que, al fin y al cabo, son los creadores del invento. Si, como suele
ocurrir, pagas a Timofónica por leer este curso, es mejor que te lo
lleves a casa en 
formato ZIP si no
quieres caer en la más absoluta de las ruinas.
Existen tres versiones de JavaScript. Casi todo lo que hay en
este curso funciona con la versión 1.0, que nació con el Netscape
Navigator 2.0. No nos detendremos en la compatibilidad demasiado, ya
que en el mundo hispano no existen demasiadas copias de Netscape con
versiones inferiores a la 4.
También existe una versión 1.3, introducida en la versión 4.06
(si no recuerdo mal). Esta versión es una pequeña revisión de la 1.2
creada para ajustarse al estándar internacional ECMA que regula el
lenguaje Javascript, y por su poca importancia no será cubierto
aquí.
El Microsoft Explorer soporta el JavaScript, sólo que cambiandole
el nombre. La versión 3.0 interpreta el JScript, que es similar al
JavaScript 1.0 pero con algunas diferencias para provocar ciertas
incompatibilidades (majetes que son los de Microsoft). El Explorer 4
parece que sí que admite JavaScript 1.1 con cierta fiabilidad, y
muchas cosas del 1.2. La siguiente tabla ofrece un pequeño resumen
del jaleo de las versiones.
| Versión |
Navegador |
Versión |
Navegador |
| Javascript 1.0 |
Netscape 2.0 |
JScript 1.0 |
Explorer 3.0 |
| Javascript 1.1 |
Netscape 3.0 |
JScript 3.0 |
Explorer 4.0 |
| Javascript 1.2 |
Netscape 4.0-4.05 |
JScript 5.0 |
Explorer 5.0 |
| Javascript 1.3 |
Netscape 4.06-4.71 |
|
|
A partir de ahora asumo que quien esté leyendo esto conoce el
HTML. Si no tienes ni idea del mismo, visita primero el curso
de HTML. También servirá de ayuda que estés familiarizado con la
sintaxis de C, C++ o Java, aunque en los próximos capítulos
explicaremos la misma.
Primeros pasos
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos
surgir una ventana que nos muestre el ya famoso mensaje "hola,
mundo". Así podremos ver los elementos principales del lenguaje. El
siguiente código es una página Web completa con un botón que, al
pulsarlo, muestra el mensaje.
HolaMundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaMundo() {
alert("¡Hola, mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
Y aquí está nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los
elementos extraños que tiene la página anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos será donde se puedan poner funciones en
JavaScript. Puedes poner cuantos quieras a lo largo del documento y
en el lugar que más te guste. Yo he elegido la cabecera para hacer
más legible la parte HTML de la página. Si un navegador no acepta
JavaScript no leerá lo que hay entre medias de estos elementos. Así
que si programamos algo que sólo funcione con la versión 1.1
pondríamos LANGUAGE= "JavaScript1.1" para que los
navegadores antiguos pasen olímpicamente del código y no se hagan un
lío.
function HolaMundo() {
alert("¡Hola, mundo!");
}
Esta es nuestra primera función en JavaScript. Aunque JavaScript
esté orientado a objetos no es de ningún modo tan estricto como
Java, donde nada está fuera de un objeto. Para las cosas que se van
a hacer en este tutorial, no vamos a crear ninguno, pero usaremos
los que vienen en la descripción del lenguaje. En el código de la
función vemos una llamada al método alert (que pertenece al
objeto window) que es la que se encarga de mostrar el
mensaje en pantalla. Por un fallo del Netscape no se pueden poner
las etiquetas HTML de caracteres especiales en una función: no los
reconoce. Así que pondremos directamente "¡" arriesgándonos a que
salga de otra manera en ordenadores con un juego de caracteres
distinto al del nuestro.
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botón vemos una
cosa nueva: onClick. Es un controlador de evento. Cuando el
usuario pulsa el botón, el evento click se dispara y ejecuta el
código que tenga entre comillas el controlador de evento
onClick, en este caso la llamada a la función
HolaMundo(), que tendremos que haber definido con
anterioridad. Existen muchos más eventos que iremos descubriendo
según avancemos en el tutorial. En el cuarto cápitulo hay un resumen
de todos ellos.
En realidad, podríamos haber escrito lo siguiente:
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('¡Hola,Mundo!')">
</FORM>
y nos habríamos ahorrado el tener que escribir la función y todo
lo que le acompaña, además de conseguir que nos reconozca el
caracter especial ¡. Sin embargo me pareció conveniente
hacerlo de esa otra manera para mostrar más elementos del lenguaje
en el ejemplo.
