Conozcamos de qué maneras podemos integrar Javascript en nuestros documentos de HTML.
HTML nos proporciona tres maneras de implementar código Javascript en sus documentos (en línea, embebido y desde un documento externo):
En línea
Se trata de incluir fragmentos de código Javascript directamente dentro de elementos HTML.
Si bien hay alguna ocasión en la que nos puede ser útil este procedimiento, en general no es recomendable y se utiliza cada vez menos ya que «ensuciamos» el código haciéndolo más largo y complejo. Además al igual que con CSS se hacen más difíciles de actualizar o corregir las líneas Javascript al estar diseminadas por todo el código de las diferentes páginas.
De todas formas más adelante en otro capítulo veremos cómo añadir código en línea.
Embebido
Se trata de incluir el código dentro del par de etiquetas <script> </script> tal y como hemos venido haciendo a lo largo de este tutorial. Estas etiquetas con su código pueden ser ubicadas en cualquier parte del documento HTML, tanto en el <head> como en el <body>.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <script> // Código Javascript </script> </head> <body> </body> </html>
Si bien nos podemos encontrar con diferentes opiniones al respecto, yo acostumbro a colocar el código Javascript al final del “body” para facilitar la carga de la página, ya que mientras el navegador interpreta el código puede disminuir el rendimiento. De cualquier forma lo que si recomiendo es que nos acostumbremos a colocarlo siempre en el mismo lugar, por una cuestión de orden y de facilitar su búsqueda.
Nota:
Para la etiqueta <script> existe el atributo «type» con el que se puede especificar el tipo de script que va a contener.
<script type="text/javascript"> </script>
Pero actualmente no es necesario utilizarlo, ya que para HTML5 el lenguaje de script por defecto es Javascript.
Archivo externo
También existe la posibilidad de colocar nuestro código Javascript en un archivo externo con extensión «js», al cual llamaremos desde nuestro archivo HTML con la etiqueta <script> y el atributo «src».
<head> <script src="archivo-con-codigo.js"> </script> </head>
Con este método siempre hay que posicionar la etiqueta dentro del head.
El colocar el código en un archivo aparte cuando es extenso tiene varias ventajas:
Podemos reutilizar el código en varias páginas simplemente vinculando el archivo sin tener que reescribirlo. Además es una buena forma de mantener el orden y de no hacer tan largos nuestros archivos HTML.
Por otro lado los usuarios se beneficiarán al reducirse así los tiempos de descarga y acceso a las páginas.
Esto es todo sobre cómo implementar Javascript en documentos HTML, en el próximo capítulo de este tutorial de Javascript trataremos las funciones y veremos cómo nos facilitan el trabajo.
Ir a Javascript para novatos 11ª parte
Dejar una opinión