Crear un bloque JavaScript es muy sencillo. Para ello se utilizan dos etiquetas entre las cuales se escriben las funciones JavaScript.
<script language=»JavaScript»>
instrucciones y funciones JavaScript
……..
</script>
Estas etiquetas y el código que contienen puede ser ubicado casi en cualquier lugar del documento HTML a excepción del título (las etiquetas <title> y </title>), incluso puede ser incluido fuera de las etiquetas <html>.
Muchas veces es recomendado que se incluyan las etiquetas de comentario HTML para el caso en que el browse no soporte el JavaScript, así, será pasado por alto al momento de ser leído.
Así, el bloque de JavaScript quedaría de la siguiente forma:
<script language=»JavaScript»>
<!–
instrucciones y funciones JavaScript
……..
//–>
</script>
Todo lo escrito entre <!– y //–> es un comentario HTML, pero será entendido por el intérprete de JavaScript.
Formas de incluir un código JavaScript
-
Fuera del HTML
Esta forma la encuentro muy apropiada, ya que así el código JavaScript es el que primero será leído por el Browser, pudiéndose utilizar las funciones en cualquier momento.
Ejemplo:
<SCRIPT LANGUAGE=JavaScript>
<!– escondemos el codigo>
function HolaMundo()
{
document.alert(«Hola Mundo»);
};
// fin de esconder –>
</SCRIPT>
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!– escondemos el codigo>
HolaMundo();
// fin de esconder –>
</SCRIPT>
</BODY>
</HTML>
-
Al Final, Fuera del HTML
Esta forma no la recomiendo mucho, pues no se pueden usar las funciones hasta que el documento se haya cargado completamente. Principalmente cuando el código JavaScript se debe ejecutar cuando debe responder a una acción del usuario.
Ejemplo:
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<a href=»» onMouseOver=»HolaMundo();»>Pasa el mouse por aquí</a>
</BODY>
</HTML>
<SCRIPT LANGUAGE=JavaScript>
<!– escondemos el codigo>
function HolaMundo()
{
window.alert(«Que bien, veo que ya pasaste el Mouse sobre el link.»);
};
// fin de esconder –>
</SCRIPT>
-
Como una reacción a un evento
Similar a los ejemplos anteriores, pero con la salvedad de que se pueden incluir sentencias dentro de la misma etiqueta del evento. Se pueden incluir varias líneas de código separadas por un punto y coma «;«, pero no lo recomiendo porque se produce un código muy desordenado y difícil de seguir.
Ejemplo:
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<a href=»» onMouseOver=»window.alert(‘Que bien, veo que ya pasaste el Mouse sobre el link.’); window.alert(‘Este es el ejemplo 3’);»>Pasa el mouse por aquí</a>
</BODY>
</HTML>
-
Incluirlo en un archivo aparte
Lo recomiendo mucho para mantener un buen orden en la programación de una página HTML.
Ejemplo:
En un archivo llamado ej4.js
<!–
function MueveMouse()
{
window.alert(‘Que bien, veo que ya pasaste el Mouse sobre el link.’);
window.alert(‘Este es el ejemplo 4’);
};
//–>
En la página HTML llamada ej4.html
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<SCRIPT SRC=»ej4.js» LANGUAGE=»JavaScript»>
</SCRIPT>
<a href=»» onMouseOver=»MueveMouse();»>Pasa el mouse por aquí, este ejemplo muestra un código incluido en archivo aparte</a>
</BODY>
</HTML>
-
En el cuerpo de la página
Se puede incluir también el código en el cuerpo de la página HTML, dentro de las etiquetas <BODY> y </BODY>
Ejemplo:
<HTML>
<HEAD><TITLE>Titulo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE=»JavaScript»>
<!–
function MueveMouse()
{
window.alert(‘Que bien, veo que ya pasaste el Mouse sobre el link.’);
window.alert(‘Este es el ejemplo 5’);
};
//–>
</SCRIPT>
<a href=»» onMouseOver=»MueveMouse();»>Pasa el mouse por aquí.</a>
</BODY>
</HTML>
-
En el encabezado de la página
Muchos incluyen sus códigos en este lugar, luego de la etiqueta de título </TITLE>, que en la actualidad es la forma más usada de incluir código JavaScript en páginas HTML.
Ejemplo:
<HTML>
<HEAD><TITLE>Titulo</TITLE>
<SCRIPT LANGUAGE=»JavaScript»>
<!–
function MueveMouse()
{
window.alert(‘Que bien, veo que ya pasaste el Mouse sobre el link.’);
window.alert(‘Este es el ejemplo 6’);
};
//–>
</SCRIPT>
</HEAD>
<BODY>
<a href=»» onMouseOver=»MueveMouse();»>Pasa el mouse por aquí.</a>
</BODY>
</HTML>
Bueno, ya hemos revisado varias formas de incluir tu código JavaScript en un documento HTML, ve tú cual es la que prefieres.
Todos los ejemplos puestos en este tutorial están anexados como archivos independientes para que puedas realizar las pruebas que te sean necesarias para entender su funcionamiento.
