cabecera javascript para novatos

Integrando JavaScript | JavaScript para novatos #10º

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):

Índice general del «Curso de JavaScript»:

  1. Introducción
  2. Las variables
  3. Tipos de datos
  4. Los operadores
  5. Declaraciones if y else
  6. Condiciones complejas y anidadas
  7. Estructuras Else, if y switch
  8. Bucles while y do while
  9. Bucle for
  10. Integrando JavaScript
  11. Las funciones
  12. Alcance de las variables
  13. Funciones predefinidas
  14. Programación orientada a objetos I
  15. Programación orientada a objetos II
  16. Herencia y prototipos
  17. Closure
  18. Los array I
  19. Los array II
  20. El DOM
  21. Acceso a los nodos del DOM
  22. Crear nuevos nodos en el DOM
  23. Eliminar nodos del DOM
  24. Modificar contenido de los nodos
  25. Modificar atributo style (DOM)
  26. Modificar atributo class (DOM)
  27. Programación basada en eventos I

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *