El Lenguaje JavaScript

JavaScript es un lenguaje compacto, y basado en objetos, diseñado para el desarrollo de aplicaciones cliente-servidor a través de Internet. Netscape Navigator 2.0 es capaz de interpretar sentencias JavaScript embedidas en programas CGI (Script del lado de servidor).

En una aplicación cliente para un browser, las sentencias JavaScript embedidas en un documento HTML pueden reconocer y responder a eventos generados por el usuario, como clicks del mouse, información en formularios y navegación de documento a documento.

Por ejemplo, se puede escrubir una función JavaScript que verifique que la información ingresada por el usuario sea correcta. Sin que haya transmisión de datos por la red.
Un documento HTML con JavaScript embedido es capaz de interpretar la información ingresada por el usuario, verificar que sea correcta y alertar al usuario en caso que no lo sea. Se puede también ejecutar archivos de audio, applet's o comunicar con una extensión de Netscape (plug-in's) en respuesta a la apertura o cierre de una página.

JavaScript y Java

El lenguaje JavaScript imita a Java, pero sin verificación estática de tipos ni restricciones fuertes en tiempo de ejecución. JavaScript soporta la mayoría de las expresiones y sintaxis válidas en Java, así como las sentencias de control de flujo de Java. En contraste con el sistema de clases definidas en tiempo de compilación en Java, Javascript trabaja en base a un simple sistema en tiempo de ejecución, el cual permite el uso de tipos de datos básicos como enteros, números de punto flotante, booleanos y strings. JavaScript soporta un sistema simple de objetos basado en instancias (no en clases), que provee capacidades significativas.

Además, JavaScript soporta funciones, pero de nuevo sin ningún requerimiento especial al declararlas. Estas funciones pueden ser propiedades de objetos (aunque el usuario no puede definir clases), y se ejecutan como métodos bastante flexibles debido a que no se verifican los tipos.

JavaScript complementa a Java al exponer muchas características de las applets en Java a los autores de HTML. JavaScript puede además obtener y establecer propiedades de las applets, esto es, sólo aquellas que alteran el estado de la applet o plug-in.

Java es un lenguaje de extensión diseñado, en particular, para ejecución rápida y seguridad de tipos, lo que se ve reflejado en la imposibilidad de transformar un entero en una referencia, por ejemplo.

Los programas en Java consisten exclusívamente de clases y sus métodos, lo que, junto a los requerimientos de declaraciones de clases, métodos y tipos hacen que la programación sea más compleja que en JavaScript. Otro punto imortante es que la herencia que provee Java crea jerarquías muy acopladas de objetos.

En contraste, JavaScript posee el espíritu de un lenguaje pequeño y verificado dinámicamente. Estos lenguajes ofrecen herramientas de programación a una audiencia mayor, ya que son más fáciles de utilizar, y proveen de una interface más especializada. Como consecuecia, necesitan sólo de un mínimo de requerimientos para creación de objetos.

La siguiente tabla compara y contrasta JavaScript con Java:

JavaScript Java
  • Interpretado en el Cliente.
  • Compilado en el Servidor antes de ejecución en el Cliente.
  • Basado en Objetos. El código usa objetos incorporados del sistema, pero no provee creación de clases o herencia.
  • Orientado a Objetos. El código consiste de clases con herencia, permitiendo crear objetos y crear jerarquías.
  • Código embedido en HTML.
  • Applets referenciadas desde HTML.
  • Variables y tipos de datos no se declaran.
  • Variables y tipos de datos se declaran.
  • Enlazado dinámico. Referencias a objetos se validan en tiempo de ejecución.
  • Enlazado estático. Referencias a objetos se validan en tiempo de compilación.
Ninguno puede escribir a archivos en disco.

Usando JavaScript en HTML

JavaScript puede ser embedido en un documento HTML de dos maneras:

El Elemento < SCRIPT >

Una script embedida en HTML usando este elemento usa el formato: 

<SCRIPT LANGUAGE="JavaScript">
   sentencias;
   ...
</SCRIPT>

El atributo opcional LANGUAGE especifica el lenguaje de la script. Nota: JavaScript diferencia entre mayúsculas y minúsculas.

Ejemplo 1: Una Script Sencilla

<HTML><HEAD>
</HEAD><BODY>
<SCRIPT LANGUAGE="JavaScript">
        document.write("Hola mundo!!");
</SCRIPT>
</BODY></HTML>

Escondiendo el Código JavaScript

Cuando un usuario utiliza un browser que no entiente scripts, éste despliega todo el texto que aparece entre los elementos < SCRIPT > y < /SCRIPT >. Para evitar lo anterior se debe ocultar el códico JavaScript de la siguiente manera: 

<SCRIPT LANGUAGE="JavaScript"><!--
   sentencias;
   ...
// --></SCRIPT>

Definiendo y Llamando Funciones

Scripts que se ubican entre los elementos < SCRIPT > y < /SCRIPT > se ejecutan inmediátamente luego de cargar la página, en cambio las funciones no se ejecutan hasta que sean llamadas.

Es importante entender la diferencia entre definir y llamar una función: Definirla sólo especifica un nombre para ella y qué hace cuando es llamada; Llamarla implica ejecutarla utilizando los parámetros que le son pasados por la sentencia JavaScript que la llama.

Ejemplo 2: Una Script con Función (Escondida) 

<script language="JavaScript">

function cuadrado(i)
{  document.write("Se pasó el valor: ",i,"<br>");
   return i * i;
}

document.write("La función retornó: "
       + cuadrado(5));

</script>

El Elemento < HEAD >

Generalmente se deben definir las funciones para una página en el encabezado del documento, esto es, dentro del elemento < HEAD >. Debido a que el encabezado es cargado primero, esta práctica asegura que las funciones sean cargadas antes que el usuario tenga oportunidad de hacer lago que provoque una llamada a función.

Ejemplo 3: Una Script con Dos Funciones 

<HTML><HEAD>
<SCRIPT><!--

function barra()
{
  document.write("<HR ALIGN='left' WIDTH=25%>")
}

function texto(titulo,nivel,text)
{
  document.write("<H" + nivel + ">" + titulo
       + "</H" + nivel + ">");
  document.write(text);
}

// --></SCRIPT>
</HEAD><BODY>
<SCRIPT><!--

texto("Hazme Grande",3,"Hazme común");
barra();
texto("Hazme Grande",4,"Hazme común");

// -->
</SCRIPT>
</BODY></HTML>

Uso de las Comillas

Se deben usar comillas simples (') para delimitar literales, de manera que el browser pueda distinguir entre las comillas dobles que envuelven los valores de los atributos de elementos HTML y los literales en JavaScript dentro de estos valores.

Ejemplo 4: JavaScript en Atributos de Elementos HTML 

<FORM>
<INPUT TYPE="button" VALUE="Aprétame";
      onClick="alert('Un mensaje cualquiera')">
</FORM>

Diseño de JavaScript con HTML

Para usar JavaScript de manera adecuada, es importante entender de manera general cómo se hace es despliege del documento HTML, esto es, cómo se transforma un documento HTML (que es sólo texto) a un documento gráfico.

El despliege es generalmente secuencial, esto es, el browser comienza el despliegue leyendo el documento HTML desde el principio, calculando cómo desplegar el texto, imágenes y otros a medida que avanza hacia el final. Así, comienza con el encabezado del documento (elemento <HEAD>) para luego desplegar el cuerpo (elemento <BODY>).

Debido a este comportamiento, JavaScript sólo refleja los objetos del documento que ya han sido desplegados. Por ejemplo, si se define un formulario con un par de elementos de texto: 

<FORM NAME="ff">
<input type="text" name="nombre" size=20>
<input type="text" name="edad" size=3>
</FORM>

Entonces se puede referenciar los elementos del formulario a través de los objetos document.ff.nombre y document.ff.edad, pero estas referencias sólo se pueden haces después que el formulario esté definido. Así, no se pueden usar estos objetos antes que se defina el formulario. Por ejemplo, la script: 

<SCRIPT>
document.write(document.ff.nombre.value);
document.write(document.ff.edad.value);
</SCRIPT>

puede aparecer después de la definición del formulario, pero nunca antes.

De la misma manera, después de completado el despliegue, establecer el valor de una propiedad no afecta su apariencia en pantalla. Por ejemplo, si se define el título del documento como: 

<TITLE>Mi Página JavaScript</TITLE>

no se puede modificar su valor usando: 

document.title="Un Nuevo Título";

no cambiará el título desplegado ni generará ningún error.

Scripts y Manejo de Eventos

Las aplicaciones JavaScript son manejadas por eventos. Los eventos son acciones que ocurren usualmente como resultado de algo que hace el usuario. Por ejemplo, cuando el usuario hace click sobre un objeto se genera un evento.

Existe un conjunto específico de eventos que es capaz de manejar JavaScript, los cuales son proveidos por el browser. Se pueden definir manejadores de eventos, que son scripts que se llaman automáticamente cuando ocurre un evento en particular.

Los manejadores de eventos están embedidos como atributos en los documentos HTML, a los cuales se les asigna el código de script a ejecutar. la sintaxis general es: 

<ELEMENTO manejadorDeEvento="Código_JavaScript">

donde ELEMENTO es un elemento HTML y manejadorDeEvento es el nombre de un evento.

Por ejemplo, supongamos que creamos una función en JavaScript llamada computar(). Podemos hacer que hel browser ejecute esta función cuando el usuario presione un botón. Esto se hace asignando la función al evento onClick del botón: 

<INPUT TYPE="button" VALUE="Calcular"
      onClick="computar()">

Es posible utilizar cualquier sentencia JavaScript dentro de las comillas asignadas a onClick, las cuales serán ejecutadas cuando el usuario haga click en el botón. Si se desea incluir más de una sentencia, se deben separar con punto y coma (";").

En general, es buena idea definir funciones para manejar eventos, ya que:

Eventos y Elementos HTML

Los eventos posibles y los elementos en los que se pueden usar son:

Muchos objetos poseen además métodos para simular eventos, Por ejemplo, los botones poseen un método click() que imita el evento de hacer click sobre el botón. Note: La emulación de eventos no ejecuta a los manejadores de eventos. Aún así, siempre es posible llamar directamente un manejador de evento de manera explícita.

Evento Ocurre cuando... Manejador
load Se carga la página en el browser. onLoad
unload Se descarga la Página del browser. onUnload
click El usuario hace click sobre un elemento. onClick
mouseover El usuario mueve el mouse por sobre una referencia. onMouseOver
mouseout El usuario mueve el mouse fuera de una referencia. onMouseOut
focus El usuario enta a un campo de un formulario. onFocus
blur El usuario sale de un campo de un formulario. onBlur
change El usuario cambia el valos de un campo de texto, área de texto o selección. onChange
select El usuario selecciona un elementp de un campo de selección onSelect
submit El usuario envía un formulario. onSubmit

Ejemplo 1: Una Script como Manejador de Evento 

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

function computar(f)
{
  if( confirm("Seguro?") )
    f.result.value = eval(f.expr.value)
  else
    alert("Vuelve otra vez.")
}

</SCRIPT>
</HEAD><BODY>
<FORM>
Ingrese una expresión:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calcular" ONCLICK="computar(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY></HTML>

Ideas y Técnicas

Esta sección describe varias técnica útiles para programar en JavaScript.

Actualizando Páginas

JavaScript genera los resultados visibles desde arriba hacia abajo en una página, de manera que luego de desplegar algo, no se puede modificar más. La única manera de hacerlo es volver a cargar la página completa. Sin embargo, si se puede modificar otro frame desde un documento.

Otra manera de modificar un documento sin cargarlo es el cambiar una imágen desplegada por otra diferente, produciéndose un cambio inmediato en el despliegue.

Imprimiendo

No se puede imprimir la salida generada por una sentencia JavaScript. Por ejemplo, si se tiene lo siguiente en una página, no se imprime nada: 

<SCRIPT>
  document.write("Texto generado con JavaScript")
</SCRIPT>

Usando las Comillas

Asegúrese de alternar comillas simples con comillas dobles, ya que como los manejadores de eventos en HTML deben encerrarse en comillas dobles, se deben delimitar los argumentos literales con comillas simples. Por ejemplo: 

<FORM NAME="ff">
<INPUT TYPE="button" NAME="Boton1" VALUE="Abrete!"
    onClick="window.open('stmtsov.html','ventana',
                         'toolbar=no,directories=no')">
</FORM>

Si se tienen problemas con las comillas se pede usar \' ó \".

Definiendo Funciones

Siempre es buena idea definir todas las funciones en el encabezado (< HEAD >) del documento HTML. De esta manera se previene que el usuario genera algún evento que provoque una llamada a una función que aún no ha sido definida, lo cual produciría un error.

Creando Arreglos

Un arreglo es una lista ordenada de valores que se pueden referenciar a través del nombre del arreglo y un índice de posición. Por ejemplo, si se tiene un arreglo de empleados que contiene sus nombres, entonces emp[1] sería el nombre del primer empleado, emp[2] el del segundo, etc.

JavaScript no posee arreglos, pero debido al parecido entre arreglos y objetos, es fácil crear arreglos en JavaScript. Para crear un arreglo se deben utilizar la funciones:

Inicialización con Valores Iniciales: 

function initArrayValues()
{ this.length = initArrayValues.arguments.length;
  for( var i=0; i<this.length; i++ )
    this[i+1] = initArrayValues.arguments[i];
}

Inicialización con Número de Elementos: 

function initArrayCount(count,initValue)
{ this.length = count;
  for( var i=0; i<this.length; i++ )
    this[i+1] = initValue;
}

Estas funciones definen un arrego de manera que el primer elemento, indexado por un cero, contiene el largo del arreglo. Los demás elementos contienen los valores pasados a la primera función o el valor inicial pasado a la segunda.

Se puede crear un arreglo arbitrario de la siguiente manera: 

arrA = new initArrayValues( "Uno", 2, "Tres", 4.44 );
arrB = new initArrayCount ( 10, "Hola" );

Página preparada por José Manuel Rodríguez R. como material de apoyo en la asignatura de Tercero de Informática de Gestión de la Universidad de Valladolid.

Ultima Actualización a 15 de Noviembre de 1998