1.1. ¿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 lo siguiente:

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 que veremos en apartados posteriores de este capítulo.

1.2. ¿Para qué sirve JavaScript?

JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente/servidor. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario.

Veámos un ejemplo:

Cuando la página HTML es un formulario que permite acceder a una anuario telefónico, se puede insertar un script que verifique la validez de los parámetros proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita un acceso a la red.

Por otro lado, también se podrá utilizar JavaScript para efectuar varias opciones a la vez; por ejemplo, acompañar el acceso a un documento HTML de la visualización de un vídeo o la ejecución de un applet de Java...

1.3. Diferencias con Java.

La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de programación completo. Lo único que comparten es la misma sintaxis.

JavaScript es un lenguaje que se integra directamente en páginas HTML. Tiene como características principales las siguientes:

• Es interpretado (que no compilado) por el cliente, es decir, directamente del programa fuente se pasa a la ejecución de dicho programa, con lo que al contrario que los lenguajes compilados no se genera ni código objeto ni ejecutable para cada m´quina en el que se quiera ejecutar dicho programa.
• Está basado en objetos.  No es, como Java, un lenguaje de programación orientada a objetos (OOP). JavaScript no emplea clases ni herencia, ni otras técnicas típicas de la OOP.
• Su código se integra en las páginas HTML, incluido en las propias páginas.
• No es necesario declarar los tipos de variables que van a utilizarse ya que como se verá más adelante, JavaScript realiza una conversión automática de tipos.
• Las referencias a objetos se comprueban en tiempo de ejecución. Esto es consecuencia de que JavaScript no es un lenguaje compilado.
• No puede escribir automáticamente al disco duro. Por eso decimos que JavaScript es un lenguaje seguro para el entorno de internet en el que se aplicará

1.4. Utilización de JavaScript en un documento HTML.

La inserción de un documento HTML se realiza mediante la marca SCRIPT utilizando la sintaxis:

<SCRIPT>
Código del script
</SCRIPT>

Los atributos de esta marca son:

LANGUAGE="JavaScript"

Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC.

SRC=url

El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML.

Estos dos atributos pueden especificarse simultáneamente. Por ejemplo:

<SCRIPT LANGUAGE="lenguaje" SCR=url>
Código del script
</SCRIPT>

podrá especificarse para insertar en un documento un script de un lenguaje determinado y que cuyo código fuente se encuentra en un acrhivo especificado en un determinado url. A continuación enunciaremos algunos puntos a tener encuenta respecto a la introducción de JavaScript en un documento HTML:

• El script insertado mediante la marca SCRIPT es evaluado por el cliente tras la visualización de la página HTML. Las funciones definidas no se ejecutan inmediatamente, dependen de los eventos asociados a la página.
• La inserción del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera, es decir, en la zona definida por el HEAD. De este modo, el script está definido desde el principio del documento, lo que garantiza que éste se visible en todo el documento.
• Si se definen, además del script mediante el atributo SRC, scripts en el propio documento, el cliente evaluará en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento.
• Los URL correspondientes a un JavaScript poseen generalmente la extención .js.
• Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:

  <SCRIPT LANGUAGE="JavaScript">
  <-- Disimula el contenido del script para navegadores no compatibles
  Código del script
  //-->
  </SCRIPT>

• El lenguaje JavaScript no es case sensitive, es decir, no distinque mayúsculas de minúsculas salvo en las cadanas de caracteres literales.

Por último, comentar otra forma de introducir scripts en documentos HTML, y es incluir estos script como controladores de eventos de algunas marcas, como pueden ser la marcas de imágenes, anclas, links, botonoes, etc. Veamos a continuación un ejemplo:

<A HREF="index.htm" OnClick="alert('ir al índice')">
Ir al índice
</A>

Ir al índice

Como puede verse, dentro de la marca, como atributo de esta, se pone un controlador de eventos y después del signo igual y entre comillas se incluye el código de JavaScript. Ahora bien, también es posible llamar a una función del HEAD del documento. Se recomienda esta segunda opción ya que es una manera más limpia y clara de escribir páginas. Se conseguiría lo mismo que en el ejemplo anterior de esta forma:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<-- Disimula el contenido del script para navegadores incompatibles
function alerta() {
	alert(" Ir al índice");
}
//-->
</SCRIPT>
...
</HEAD>

<BODY>
<A HREF="index.htm" OnClick="alerta()">
	Ir al índice
</A>

...
</BODY>

1.5. Las versiones de JavaScript.

La versión 1.0 de JavaScript nació con el Netscape Navigator 2.0. Posteriormente, surgieron las versiones 1.1 y 1.2 de JavaScript con las versiones 3 y 4 del Netscape. También existe una versión 1.3, introducida en la versión 4.07 del Netscape Navigator. 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.

En cuanto a Microsoft Internet Explorer en su versión 3.0 interpreta JScript, que es muy similar a JavaScript 1.0 pero con algunas incompatibilidades. Pero ya su versión 4.0 soporta sin nigún problema, la versión 1.1 de JavaScript.

Para tener en cuenta la versiones colocar en el atributo LANGUAGE de la marca SCRIPT la versión con la que se pienza trabajar. Por ejemplo para la versión:

1.6. Los comentarios en JavaScript.

A continuación empezaremos ya en este capítulo a estudiar uno de los elementos más simples de los que se compone un lenguaje de programaciín, aunque no por ello son los menos importantes, estamos hablando de los comentarios.

Los comentarios en el código permiten insertar observaciones observaciones del autor del código para describir las distintas partes del programa. El interprete JavaScript los ignora y posee por ello una sintaxis particular.

Se distinguen los comentarios en una sola línea, precedidos por la barra oblicua doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */. Por ejemplo:

// esto es un comentario /* esto es un comentario de varias líneas con una longitud cualquiera */

1.7. Identificadores y palabras reservadas.

Conocer cual es la sintaxis de los identificadores y cuales son las palabras reservadas son aspectos de necesario conocimiento antes de empezar a escribir un programa en un lenguaje de programación determinado.

1.7.1. Identificadores en JavaScript.

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición.

Los identificadores deben seguir las siguientes reglas:

• El identificador debe empezar por una letra o por el caracter '_'.
• Los caracteres siguientes, además de letras o el caracter '_', pueden ser cifras.

Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:

Num_linea
aux1
_exit

1.7.2. Las palabras reservadas.

Primeramente decir que las palabras reservadas son palabras especiles que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.

A continuación veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript, estas palabras tiene o tendrán un significado especial dentro del lenguaje:

1.8. Algunos ejemplos sencillos.

Una vez que nos hemos empezado a introducir en el mundo de JavaScript es hora de empezar a ver al lenguaje "en acción" viendo una bateria de ejemplos muy sencillos que nos permitirán ir adentrándonos en la potencia de este lenguaje.

Ejemplo 1: Visualización de texto mediante una ventana.

Como primer ejemplo no hay nada mejor que el clásico programa ¡Hola mundo!. Éste mostrará una ventana conteniendo el famoso mensaje cuando se pulse sobre el botón ejemplo1. Para ello debemos generar el siguiente código fuente.

<CENTER>
<FORM>
	<INPUT Type="button" Value=" ejemplo1 " onClick="Alert(' ¡Hola mundo! ')">
</FORM>
</CENTER>

Ejemplo 2: Definición de una función.

Este ejemplo define una función que calcula el cuadrado de un número y visualiza el resultado en una ventana parecida a la anterior. Esto se llevará a cabo cuando se pulse sobre el bot´n ejemplo2.
Como sabemos la función se tendrá que definir entre las marcas (<SCRIPT>,</SCRIPT>) que se encuentran dentro de la cabecara (HEAD) del documento.

...
<HEAD>
...
<SCRIPT Laguage="JavaScript">
<!--
	function Cuadrado(numero) {
		return numero * numero;
	}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<CENTER><FORM>
	El cuadrado de 5 es:
	<INPUT Type="button" Value=" ejemplo2 " onClick="alert(Cuadrado(5))">
</FORM></CENTER>	

El cuadrado de 5 es:

Ejemplo 3: Interacción con un formulario.

Este ejemplo es refleja la interacción de un script con un formulario, esta es una de las aplicaciones en la que los programadores de páginas Web echan mano de JavaScript.
Concretemante en este ejemplo el usuario introducirá una expresión aritmética en un campo de texto del formulario y el script le pedirá al usuario que la confirme antes de pasar a evaluarla.
Más adelante ( capítulo 8 ), se comprobará si de verdad la expresión está bien o mal, es decir, no se limitará a preguntarle al usuario y a fiarse de su respuesta.

...
<HEAD>
...
<SCRIPT Laguage="JavaScript">
<!--
	function evalua(form) {
		if (confirm("¿Está seguro?"))
			form.result.value = eval (form.expr.value);
		else
			alert("Inténtelo de nuevo.");
	}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<CENTER><FORM>
	Introduzca la expresión:
	<INPUT Type="text" name="expr" Size=10>

	Resultado:
	<INPUT Type="text" name="result" Size=10>

	<INPUT Type="button" Value=" Evaluar " onClick="evalua(this.form)">
</FORM></CENTER>
	

Introduzca la expresión:

Resultado: