javaScript
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.
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.
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.
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.
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.
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.
Programación básica
Antes de comenzar a desarrollar programas y utilidades con JavaScript, es necesario conocer los elementos básicos con los que se construyen las aplicaciones. Si ya sabes programar en algún lenguaje de programación, este capítulo te servirá para conocer la sintaxis específica de JavaScript.
Si nunca has programado, este capítulo explica en detalle y comenzando desde cero los conocimientos básicos necesarios para poder entender posteriormente la programación avanzada, que es la que se utiliza para crear las aplicaciones reales.
- .1. Variables
- .2. Tipos de variables
- .3. Operadores
- 4. Estructuras de control de flujo
- .5. Funciones y propiedades básicas de JavaScript
Programación avanzada
Las estructuras de control, los operadores y todas las utilidades propias de JavaScript que se han visto en los capítulos anteriores, permiten crear scripts sencillos y de mediana complejidad.
Sin embargo, para las aplicaciones más complejas son necesarios otros elementos como las funciones y otras estructuras de control más avanzadas, que se describen en este capítulo.
- .1. Funciones
- .2. Ámbito de las variables
- .3. Sentencias break y continue
- .4. Otras estructuras de control
Ejercicios resueltos
Ejercicio 1
- Página HTML:
<!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>Ejercicio 1 - Archivo externo y varios mensajes</title> <script type="text/javascript" src="codigo.js"></script> </head> <body> <noscript>Esta página <strong>requiere</strong> el uso de JavaScript y parece que está desactivado</noscript> <p>Esta página muestra 2 mensajes</p> </body> </html>
Archivocodigo.js
// Al cargarse el archivo JavaScript, se muestra un mensaje alert("Hola Mundo!"); // Despues del primer mensaje, se muestra otro mensaje seguido alert("Soy el primer script");
- .2. Ejercicio 2
- .3. Ejercicio 3
- .4. Ejercicio 4
- 5. Ejercicio 5
- .6. Ejercicio 6
- 7. Ejercicio 7
- 8. Ejercicio 8
- 9. Ejercicio 9
- 10. Ejercicio 10
- 11. Ejercicio 11
- 12. Ejercicio 12
- 13. Ejercicio 13
- .14. Ejercicio 14
- .15. Ejercicio 15
- 16. Ejercicio 16
- .17. Ejercicio 17
- 18. Ejercicio 18
- .19. Ejercicio 19
No hay comentarios:
Publicar un comentario