Java Script 2

[Indice]

¿Cómo se escribe el JavaScript?

El elemento <SCRIPT>

Los scripts de JavaScript se escriben de forma similar a los de VBScript, pero su sintaxis es mucho más estricta, y esta es una de las causas más habituales de error. En JavaScript, a diferencia de VBScript, no se pueden escribir mayúsculas alegremente. No es lo mismo MiFuncion() que mifuncion(), y si escribimos, por ejemplo, Document.Write() no funcionará. Todo el código deberá ir escrito entre <SCRIPT> y </SCRIPT>. Puesto que este elemento HTML es el mismo que se emplea con otros lenguajes, como VBScript, es preciso indicar al navegador el lenguaje que se va a utilizar al definir el script. Sea por ejemplo:


<SCRIPT LANGUAGE=JavaScript>
     <!--
       document.write("Esto ha sido escrito por JavaScript")
     // -->
</SCRIPT>

Fíjate en que dentro de la etiqueta HTML <SCRIPT> y antes del código JavaScript propiamente dicho, aparece el símbolo del comentario HTML . Estas barras son el indicativo de que lo que viene a continuación es un comentario también, pero del propio JavaScript en este caso, y hay que ponerlas para evitar que el intérprete JavaScript tome el cierre del comentario html como una instrucción y produzca un error de sintaxis. Esto es válido siempre que el comentario vaya a tener una sola línea. Si va a tener más se utilizarán /* ... */. Así:

/*
Comentario 1
Comentario 2
*/

JavaScript entiende que una instrucción ha terminado cuando encuentra un retorno de línea, pero si se desea escribir más de una instrucción en la misma línea hay que separarlas con ; al final de cada instrucción, excepto la última que no lo necesita, aunque no ocurre nada si se escribe.

Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la página. Por claridad a la hora de revisar el código, es preferible escribir todas las declaraciones y sentencias al principio de la página, en la <HEAD>, aunque esto dependerá de las necesidades del programa, claro. También, si ello es necesario, puede escribirse el código en los dos sitios a la vez. Por ejemplo, si escribimos


<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
     <!--
       document.write("Esto ha sido escrito por JavaScript desde HEAD <BR>")
     // -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
     <!--
       document.write("Esto ha sido escrito por JavaScript desde BODY")
     // -->
</SCRIPT>
<P>
Esto ha sido escrito por HTML.

</BODY>
</HTML>

Se obtiene:

Esto ha sido escrito por JavaScript desde HEAD
Esto ha sido escrito por JavaScript desde BODY

Esto ha sido escrito por HTML.

Otra particularidad de la sintaxis de JavaScript son las llaves: { }. Estas llaves hay que utilizarlas siempre que el bloque de declaraciones vaya a tener más de una línea, y son obligatorias al definir funciones. Pueden anidarse si el programa va a tener varios bloques, y siempre deben ser pares. Por ejemplo, en la siguiente función:


<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
  <!--
     function mensaje() {
        alert("Esto es un mensaje de JavaScript")
       }
   // -->
</SCRIPT>

</HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()">
</FORM>

</BODY>
</HTML>

Fíjate en que la función es invocada al pulsar el botón del formulario, capturando un evento: onClick, pero también es posible escribir directamente la instrucción en el punto de captura en lugar de utilizar el elemento <SCRIPT>. Por ejemplo:


<HTML>
<HEAD><TITLE>Capturar evento de boton</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick=javascript:alert("Mi mensaje")>
</FORM>

</BODY>
</HTML>

Esta forma es aceptable si, como en el ejemplo, la función es muy simple.

Al igual que se puede hacer con las hojas de estilo en cascada (CSS), JavaScript permite que todo el código (o parte de él) esté en un fichero independiente de la página html, lo que permite modificar y mantener más rápidamente la programación, sin necesidad de editar muchos ficheros diferentes. El fichero que contiene el código JavaScript, normalmente tiene la extensión .js
Sea el ejemplo anterior:


<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT>
</HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()">
</FORM>

</BODY>
</HTML>

Donde el contenido de fichero.js es:


function mensaje() {
    alert("Esto es un mensaje de JavaScript")
}

Como puedes ver, en este fichero no hay que incluir el elemento <SCRIPT>, sino solamente instrucciones JavaScript. Para mayor claridad de los ejemplos, se empleará este sistema siempre que sea posible. Los programas JavaScript, como todos los programas, se comienzan definiendo las variables, después las funciones, y a continuación la estructura del programa propiamente dicha, si la hay. Recuerda que este es un lenguaje interpretado, es decir, que las instrucciones se van cargando en memoria a medida que se leen, y por tanto es necesario tener cuidado con el orden en que se escriben las variable y las funciones que serán invocadas desde el núcleo del programa. Por ejemplo, si una instrucción que llama a una función se escribe antes que la función llamada, se producirá un error, ya que en ese momento la función todavía no existe.

Variables

Las variables son espacios de memoria que contienen algun tipo de dato, al que se accede mediante el nombre que se le asigne a la variable. En JavaScript no hay constantes como en VBScript. Los nombres de las variables tienen que comenzar siempre por una letra o el signo del subrayado ( _ ) y no pueden contener espacios en blanco ni caracteres que no sean letras o números, lo que excluye letras acentuadas, eñes, cedillas, etc. Al escribirlos, si se utilizan mayúsculas, recordar que no es lo mismo MiVariable que mivariable. Por supuesto, no puedes crear una variable con ninguna palabra reservada del lenguaje, como return, if, case, etc.

Para crear una variable, simplemente se escribe su nombre, y si se desea, en ese mismo momento, se le asigna un valor. Dependiendo del ámbito de actuación de la variable, habrá que utilizar, o no, la instrucción var en el momento de crearla. Por ejemplo:

var MiVariable = 2004

También es posible definir varias variables en una misma línea:

var Variable1, Variable2, Variable3

Como puedes ver, la instrucción var es similar a la instrucción Dim de VBScript. Cuando una variable es definida con la instrucción var en un bloque acotado por llaves { } (ámbito), solamente estará disponible en ese bloque, y se la denomina variable de ámbito local. Si se declara sin la instrucción var, es una variable de ámbito global, no importando dónde ha sido declarada, y estará disponible en cualquier lugar de la página (a partir de donde ha sido declarada, pero no antes). Si se declaran dos variables con el mismo nombre, pero una global y la otra local, la global será accesible desde toda la página, excepto en el área donde "reina" la local, que impondrá su valor allí. No es buena idea declarar variables duplicadas, salvo que sea estrictamente necesario, claro.

Las variables pueden contener cualquier tipo de dato, como cadenas, números, valores booleanos, o incluso objetos. Se pueden cambiar los tipos de datos que contienen en cualquier momento sin necesidad de redefinir la variable.

A los valores contenidos en las variables se les denomina literales. El literal es un concepto a veces confuso. Si, por ejemplo, decimos que variable1 = "A" y variable2 = "B" podemos acceder a "A" o a "B" bien invocando el nombre de las variables correspondientes, o invocando sus literales, es decir, directamente sus valores. La suma (o concatenado en este caso) de variable1 + variable2 es lo mismo que la suma de sus literales: "A" + "B" = "AB"

Variables de cadena

Construir una variable conteniendo un string o cadena no tiene ninguna dificultad. Como ya sabrás, un string o cadena es cualquier contenido acotado por comillas, simples ' o dobles ".

mivariable = "Hola"

También es posible concatenar dos o más cadenas usando el signo + :

mivariable = "Prueba de " + "concatenado"

Y este sería el resultado:

Prueba de concatenado

Si dentro de una cadena acotada por comillas, tanto simples como dobles, se incluye otra subcadena acotada por las otras comillas, no se considera un concatenado. Por ejemplo, son válidas las cadenas:

"Comillas dobles con 'simples' en el interior"
'Comillas simples con "dobles" en el interior'

Puesto que las cadenas se pueden definir tanto con comillas simples como dobles, puede ocurrir que dentro de la cadena haya que poner uno de estos signos, o los dos, lo que provocaría un error de sintaxis. Para resolver este problema se utilizan los "escapes", es decir, el mismo caracter que se quiere escribir precedido de \ Esto evita que sea interpretado, no como el cierre de las comillas, sino como un carácter normal. Así:

mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\''

Y este sería el resultado:

Prueba de "concatenado" 'doble'

Esto mismo también es posible hacerlo usando el código hexadecimal del carácter deseado. Normalmente se utiliza la codificación hexadecimal sólo con los caracteres que no admiten el "escapado" (que son casi todos). Aplicándolo a las comillas sería así:

mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 '

Además de las comillas y el código hexadecimal ya vistos, se puede "escapar" la misma barra inclinada: \\, la \t para insertar un tabulador horizontal, y la \n para forzar una nueva línea. Fíjate que en el caso de estos dos últimos, el escape funciona al revés que en las comillas o la barra inclinada: En efecto, mientras que con las comillas el escape pretende que no se interprete su cualidad para abrir o cerrar cadenas, con t o n lo que se hace es darles las cualidades que no tienen para producir un tabulador o un salto de línea. Recuerda también que tanto el tabulador como la nueva línea no tienen efectos visibles en los navegadores, por lo que su utilidad se limita al formateo de texto dentro del entorno JavaScript exclusivamente. Al ser la barra inclinada \ el controlador de escapes, si en una cadena hay que escribirla, deberá hacerse escpándose a sí misma. Por ejemplo, si se escribe la típica ruta del directorio temp en el disco C:

document.write("C:\temp") se obtiene C: emp Como puedes ver, en este caso el error es doble, ya que la barra no puede aparecer sin escape como tal carácter, y además, al estar junto a la t, se ha interpretado como indicador de tabulación. La sintaxis correcta es: document.write("C:\\temp") para obtener C:\temp

No hay que confundir los caracteres con escape con una de las pocas funciones intrínsecas de JavaScript: escape() y su inversa: unescape(). La función escape() devuelve el código ASCII decimal de los caracteres especiales, es decir cualquier caracter que no sea una letra (mayúsculas o minúsculas), un número, o el punto, el guión, el subrayado o la arroba (Az 1-9 _ . @). Todos los demás serán codificados. Por ejemplo, si se escribe:

document.write(escape("$ % & @"))

Se obtiene:

%24%20%26%20%25%20@

Como puedes ver, se codifica incluso el espacio en blanco (%20). Y con su inversa:

document.write(unescape("%24%20%26%20%25%20@"))

Se obtiene:

$ % & @