Manual de JavaScript

Sintaxis del JavaScript
El código JavaScript del que hablaremos en este manual va embebido en un documento HTML, y no tendremos en cuenta la reciente aparición de los scripts de servidor que pueden ir también codificados en JavaScript. Normalmente se escribe el código entre las etiquetas <SCRIPT> y </SCRIPT> de la página Web. Se recomienda que dicho código vaya incluido en la cabecera del documento, es decir, entre las etiquetas <HEAD> y </HEAD>. De esta manera, haremos que se cargue el script antes de ser llamado por el manejador de eventos en el cuerpo del documento, <BODY></BODY>, ya que si fuera al revés el manejador de eventos no tendría nada a qué referirse.
Volvamos sobre el ejemplo de variables globales y locales para incluirlo ya en una página HTML capaz de ser visualizada por un browser. Las modificaciones aparecen en el siguiente ejemplo.

<HTML>
<HEAD>
<TITLE>PRUEBA 1 </TITLE>
<SCRIPT>
var globalvar1=5;
Function multiplica()
{
var localvar1=2 * globalvar1;
alert("Dos por cinco son= " + localvar1);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" onLoad=multiplica()>
<CENTER><H1> Esto es un ejemplo</H1></CENTER>
</BODY>
</HTML>

Pulsa aquí para ver cómo se vería esta página.

Como se puede observar, hemos incluido, como se mencionó previamente, el código de script en sus etiquetas correspondientes y dentro de la cabecera del documento. Una vez dentro del cuerpo del documento, se ha incluido un manejador de eventos onLoad, que llama al script definido en la carga de la página, ejecutándolo. El script es una función que contiene un método, alert(), que despliega una ventana con el texto definido como argumento del método.

A la hora de diseñar nuestras páginas y scripts se debe pensar también en los usuarios que no disponen de browsers capaces de tratar nuestros diseños. Por ello existe una etiqueta específica para estos últimos: <NOSCRIPT></NOSCRIPT>. El contenido de estas etiquetas es tratado por los browsers que no admiten scripts, mientras que no se interpreta por los que sí lo hacen.

Para usar correctamente el JavaScript en un browser, es importante saber cómo funciona éste último a la hora de visualizar el diseño y la composición del texto plano modificado con códigos HTML. Esta composición a partir del diseño especificado se realiza siempre secuencialmente, es decir, el browser comienza desde la primera línea de la página y continua descendiendo hasta el final de la misma. Por ello el JavaScript sólo refleja código que ya se haya encontrado. Por ejemplo, definamos en un formulario dos entradas de texto:

<FORM NAME="formula">
<input type="text" name="usuario" size=20 >
<input type="text" name="edad" size=3 >
</FORM>

A partir de su definición ambos elementos se pueden reflejar en JavaScript como los objetos document.formula.usuario y document.formula.edad respectivamente.Sin embargo no se pueden usar si no están previamente definidos.Por ejemplo, podemos visualizar sus valores mediante un script incluido después de la definición del formulario:

<SCRIPT>
document.write(document.formula.usuario.value)
document.write(document.formula.edad.value)
</SCRIPT>

Sin embargo si lo ponemos antes no funcionará y aparecerá un error por no estar definido. Otro ejemplo: si hemos definido el título del documento como:

<TITLE> PRUEBA DE JAVASCRIPT</TITLE>

el browser visualiza en la barra de su ventana dicho título. Si intentamos ahora cambiar el valor del título:

Document.title ="UNA NUEVA PRUEBA DE JAVASCRIPT"

éste no cambiará, ni siquiera generará un error.

Antes de centrarnos en partes internas de un documento, vamos a recordar cómo insertar scripts. Hay dos maneras distintas:

Como sentencias de control y funciones usando las etiquetas <SCRIPT></SCRIPT>.
Como manejadores de eventos usando las demás etiquetas de HTML.

Recordemos la opción <SCRIPT LANGUAGE="JavaScript> de especificación de lenguaje de código, y digamos que dentro de estas etiquetas puede ir un número indeterminado de instrucciones. Asimismo, ha de resaltarse que JavaScript es "case sensitive", es decir, hace distinción entre letras mayúsculas y letras minúsculas. Es importante entender la diferencia entre definir una función e invocar una función. Definirla le da nombre y especifica qué instrucciones ejecuta al ser llamada e invocarla hace que realmente ejecute las instrucciones.

Caso Práctico

Para terminar este apartado vamos a estudiar un ejemplo que resume todo lo anteriormente explicado. Se trata de un script en un formulario con una llamada de manejador de eventos. El código lo podemos ver a continuación:

<HTML>
<HEAD>
<TITLE>FORMULARIO 1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calcula(form){
if (confirm("¿Está seguro?"))
form.resultado.value=eval(form.expr.value);
else
alert("Vuelva a intentarlo.");
}
</SCRIPT>
<NOSCRIPT>
<META HTTP-EQUIV=REFRESH CONTENT=0;URL=pru1.htm>
</NOSCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF">
<CENTER><H1>Calculadora</H1>
<BR><FORM>
Introduzca expresión:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calcular" onClick="calcula(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME "resultado" SIZE=15>
<BR>
</FORM></CENTER>
</BODY>
</HTML>

Lo primero que nos encontramos es la definición en la cabecera de documento de la función calcula(form) que tiene como argumento el propio formulario. Las instrucciones que contiene se rigen por un bloque if - else que valora un método no visto hasta ahora confirm("cadena"):

function calcula(form) {
if (confirm("¿Está seguro?"))
form.resultado.value=eval(form.expr.value);
else
alert("Vuelve a intentarlo."")
}

Lo que hace es sacar una ventana, como la que aparecía con el método alert("cadena") con la única diferencia que ofrece dos botones: uno de cancelación y otro de confirmación.La elección del usuario es lo que impone la condición del bloque if. En la línea

if (confirm("¿Está seguro?"))

se controla si el usuario ha elegido Aceptar. En este caso el valor del cuadro de texto "resultado" del formulario definido en el cuerpo del fichero, toma el valor del resultado, valga la redundancia, de la expresión que haya sido introducida en el cuadro de texto "expr". Si el usuario elige el botón de cancelar, entramos en el else del bloque, haciendo que aparezca una ventana con el método alert(), diciendo "Vuelva a intentarlo".
Observamos también una función nueva hasta ahora:eval("cadena").Lo que hace esta función es transformar a valor numérico la expresión matemática introducida en la cadena. En nuestro caso la cadena viene dada por el contenido del cuadro de texto "expr". Hay que señalar que este script no valida la entrada de datos, por lo que si no introducimos una expresión susceptible de evaluación matemática, obtendremos un error.