Introducción al JavaScript

¿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 o orientado a documento, como el HTML o el formato de WordPerfect. 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...).
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.

Sobre este tutorial

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 directamente a la que ofrece Netscape .

A partir de ahora asumo que quien esté leyendo esto conoce el HTML. Si no tienes ni idea del mismo, ve primero a la página de Nino, donde encontrarás una pequeña introducción a dicho lenguaje. También asumo que estás familiarizado con la sintaxis de C, C++ o Java.

Hola, mundo

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.

<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Se usan los comentarios para esconder el código a navegadores sin 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.

  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 esta 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 evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el código que tenga entre comillas, 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 último 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. Sin embargo me pareció conveniente hacerlo del otro modo para mostrar más elementos del lenguaje en el ejemplo.