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.
Tutoriales
