Capítulo 1. Introducción
1.1. ¿Qué es JavaScript?JavaScript es un lenguaje de programación que se utiliza principalmente para crear
páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con
mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos. En otras palabras, los programas
escritos con JavaScript se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de
programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun
Microsystems, como se puede ver en http://www.sun.com/suntrademarks/.
1.2. Breve historia
A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo
hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a
desarrollarse las primeras aplicaciones web y por tanto, las páginas web comenzaban a
incluir formularios complejos.
Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan
lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el
navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un
formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a
mostrar el formulario indicando los errores existentes.
Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar
este problema adaptando otras tecnologías existentes (como ScriptEase) al navegador
Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su
lenguaje LiveScript.
Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del
nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió
cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue
exclusivamente por marketing, ya que Java era la palabra de moda en el mundo
informático y de Internet de la época.
La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya
incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft
lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al
que le cambiaron el nombre para evitar problemas legales.
Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar
el lenguaje JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al
organismo ECMA (European Computer Manufacturers Association).
ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de script
multiplataforma e independiente de cualquier empresa". El primer estándar que creó el
comité TC39 se denominó ECMA-262, en el que se definió por primera vez el lenguaje
ECMAScript.
Por este motivo, algunos programadores prefieren la denominación ECMAScript para
referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la implementación
que realizó la empresa Netscape del estándar ECMAScript.
La organización internacional para la estandarización (ISO) adoptó el estándar
ECMA-262 a través de su comisión IEC, dando lugar al estándar ISO/IEC-16262.
1.3. Especificaciones oficiales
ECMA ha publicado varios estándares relacionados con ECMAScript. En Junio de 1997 se
publicó la primera edición del estándar ECMA-262. Un año después, en Junio de 1998 se
realizaron pequeñas modificaciones para adaptarlo al estandar ISO/IEC-16262 y se creó
la segunda edición.
La tercera edición del estándar ECMA-262 (publicada en Diciembre de 1999) es la
versión que utilizan los navegadores actuales y se puede consultar gratuitamente en
http://www.ecma-international.org/publications/standards/Ecma-262.htm
Actualmente se encuentra en desarrollo la cuarta versión de ECMA-262, que podría
incluir novedades como paquetes, namespaces, definición explícita de clases, etc.
ECMA también ha definido varios estándares relacionados con ECMAScript, como el
estándar ECMA-357, que define una extensión conocida como E4X y que permite la
integración de JavaScript y XML.
1.4. Cómo incluir JavaScript en documentos XHTML
La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres
formas para incluir código JavaScript en las páginas web.
1.4.1. Incluir JavaScript en el mismo documento XHTML
El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte
del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona
de la página, se recomienda definir el código JavaScript dentro de la cabecera del
documento (dentro de la etiqueta <head>):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la
etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados
y para el caso de JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando se define un bloque pequeño de código o cuando se
quieren incluir instrucciones específicas en un determinado documento HTML que
completen las instrucciones y funciones que se incluyen por defecto en todos los
documentos del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en el bloque de
código, es necesario modificar todas las páginas que incluyen ese mismo bloque de
código JavaScript.
1.4.2. Definir JavaScript en un archivo externo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript
que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear
todos los archivos JavaScript que sean necesarios y cada documento XHTML puede
enlazar tantos archivos JavaScript como necesite.
Ejemplo:
Archivo codigo.js
alert("Un mensaje de prueba");
Documento XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Además del atributo type, este método requiere definir el atributo src, que es el que
indica la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta
<script> solamente puede enlazar un único archivo, pero en una misma página se
pueden incluir tantas etiquetas <script> como sean necesarias.
Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js,
que se pueden crear con cualquier editor de texto como Notepad, Wordpad, EmEditor,
UltraEdit, Vi, etc.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el
código XHTML de la página, que se puede reutilizar el mismo código JavaScript en todas
las páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript
se ve reflejada inmediatamente en todas las páginas XHTML que lo enlazan.
1.4.3. Incluir JavaScript en los elementos XHTML
Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript
dentro del código XHTML de la página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>
El mayor inconveniente de este método es que ensucia innecesariamente el código
XHTML de la página y complica el mantenimiento del código JavaScript. En general, este
método sólo se utiliza para definir algunos eventos y en algunos otros casos especiales,
como se verá más adelante.
1.5. Etiqueta noscript
Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores
permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente
el uso de JavaScript porque creen que así navegan de forma más segura.
En estos casos, es habitual que si la página web requiere JavaScript para su correcto
funcionamiento, se incluya un mensaje de aviso al usuario indicándole que debería
activar JavaScript para disfrutar completamente de la página. El siguiente ejemplo
muestra una página web basada en JavaScript cuando se accede con JavaScript activado
y cuando se accede con JavaScript completamente desactivado.
Figura 1.1. Imagen de www.Netvibes.com con JavaScript activado
Figura 1.2. Imagen de www.Netvibes.com con JavaScript desactivado
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario
cuando su navegador no puede ejecutar JavaScript. El siguiente código muestra un
ejemplo del uso de la etiqueta <noscript>:
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de
JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>
La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body>
(normalmente se incluye al principio de <body>). El mensaje que muestra <noscript>
puede incluir cualquier elemento o etiqueta XHTML.
1.6. Glosario básico
Script: cada uno de los programas, aplicaciones o trozos de código creados con el
lenguaje de programación JavaScript. Unas pocas líneas de código forman un script y un
archivo de miles de líneas de JavaScript también se considera un script. A veces se
traduce al español directamente como "guión", aunque script es una palabra más
adecuada y comúnmente aceptada.
Sentencia: cada una de las instrucciones que forman un script.
Palabras reservadas: son las palabras (en inglés) que se utilizan para construir las
sentencias de JavaScript y que por tanto no pueden ser utilizadas libremente. Las
palabras actualmente reservadas por JavaScript son: break, case, catch, continue,
default, delete, do, else, finally, for, function, if, in, instanceof, new, return,
switch, this, throw, try, typeof, var, void, while, with.
1.7. Sintaxis
La sintaxis de un lenguaje de programación se define como el conjunto de reglas que
deben seguirse al escribir el código fuente de los programas para considerarse como
correctos para ese lenguaje de programación.
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como
Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:
▪ No se tienen en cuenta los espacios en blanco y las nuevas líneas: como
sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco
sobrante, por lo que el código se puede ordenar de forma adecuada para
entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas
líneas, etc.)
▪ Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis
de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se
utilizan indistintamente mayúsculas y minúsculas, la página se visualiza
correctamente, siendo el único problema la no validación de la página. En cambio,
si en JavaScript se intercambian mayúsculas y minúsculas el script no funciona.
▪ No se define el tipo de las variables: al crear una variable, no es necesario
indicar el tipo de dato que almacenará. De esta forma, una misma variable puede
almacenar diferentes tipos de datos durante la ejecución del script.
No es necesario terminar cada sentencia con el carácter de punto y coma (;):
en la mayoría de lenguajes de programación, es obligatorio terminar cada
sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente
seguir la tradición de terminar cada sentencia con el carácter del punto y coma
(;).
▪ Se pueden incluir comentarios: los comentarios se utilizan para añadir
información en el código fuente del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se envía al navegador del usuario
junto con el resto del script, por lo que es necesario extremar las precauciones
sobre la información incluida en los comentarios.
JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan varias
líneas.
Ejemplo de comentario de una sola línea:
// a continuación se muestra un mensaje
alert("mensaje de prueba");
Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al
principio de la línea.
Ejemplo de comentario de varias líneas:
/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
alert("mensaje de prueba");
Los comentarios multilínea se definen encerrando el texto del comentario entre los
símbolos /* y */.
1.8. Posibilidades y limitaciones
Desde su aparición, JavaScript siempre fue utilizado de forma masiva por la mayoría de
sitios de Internet. La aparición de Flash disminuyó su popularidad, ya que Flash
permitía realizar algunas acciones imposibles de llevar a cabo mediante JavaScript.
Sin embargo, la aparición de las aplicaciones AJAX programadas con JavaScript le ha
devuelto una popularidad sin igual dentro de los lenguajes de programación web.
En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en un
entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los scripts.
De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no
pertenezcan al mismo dominio desde el que se descargó el script. Los scripts tampoco
pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas que se
crean no pueden ser demasiado pequeñas ni demasiado grandes ni colocarse fuera de la
vista del usuario (aunque los detalles concretos dependen de cada navegador).
Además, los scripts no pueden acceder a los archivos del ordenador del usuario (ni en
modo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferencias
del navegador.
Por último, si la ejecución de un script dura demasiado tiempo (por ejemplo por un
error de programación) el navegador informa al usuario de que un script está
consumiendo demasiados recursos y le da la posibilidad de detener su ejecución.
A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones
anteriores. La alternativa más utilizada y conocida consiste en firmar digitalmente el
script y solicitar al usuario el permiso para realizar esas acciones.
1.9. JavaScript y navegadores
Los navegadores más modernos disponibles actualmente incluyen soporte de JavaScript
hasta la versión correspondiente a la tercera edición del estándar ECMA-262.
La mayor diferencia reside en el dialecto utilizado, ya que mientras Internet Explorer
utiliza JScript, el resto de navegadores (Firefox, Opera, Safari, Konqueror) utilizan
JavaScript.
1.10. JavaScript en otros entornos
La inigualable popularidad de JavaScript como lenguaje de programación de
aplicaciones web se ha extendido a otras aplicaciones y otros entornos no relacionados
con la web.
Herramientas como Adobe Acrobat permiten incluir código JavaScript en archivos PDF.
Otras herramientas de Adobe como Flash y Flex utilizan ActionScript, un dialecto del
mismo estándar de JavaScript.
Photoshop permite realizar pequeños scripts mediante JavaScript y la versión 6 de Java
incluye un nuevo paquete (denominado javax.script) que permite integrar ambos
lenguajes.
Por último, aplicaciones como Yahoo Widgets (http://widgets.yahoo.com/) y el
Dashboard de Apple (http://www.apple.com/downloads/dashboard/) utilizan
Comentarios
Publicar un comentario