¿Cómo insertar JavaScript al documento HTML?

Incorporar JavaScript en un documento HTML es fundamental para añadir interactividad y dinamismo a tu página web. ¿Cómo hacerlo? Este artículo te enseñará, con ejemplos prácticos, cómo agregar JavaScript de manera correcta, ya sea mediante la inclusión interna en el archivo HTML o a través de archivos externos. ¡Descubre cómo transformar tu sitio web!

como incluir JavaScript al documento HTML

Índice

1. ¿Qué significa incluir JavaScript al documento HTML?

«Incluir JavaScript en HTML» significa integrar el lenguaje de programación JavaScript dentro de un documento HTML para agregar interactividad y funcionalidades dinámicas a una página web.

El lenguaje HTML, por sí solo, se encarga de la estructura y el contenido estático de la página, mientras que JavaScript le da vida a través de scripts y funciones.

1.1. ¿Por qué incluir JavaScript?

Imagina una página web sin JavaScript: sería una colección de texto e imágenes estáticas, sin posibilidad de interactuar con el usuario ni responder a sus acciones. JavaScript te permite:

✅ Crear formularios interactivos: Valida la entrada de datos, envía formularios sin recargar la página y muestra mensajes de error o éxito.
✅ Implementar animaciones y efectos visuales: Atrae la atención del usuario, mejora la experiencia de navegación y añade dinamismo a la página.
✅ Desarrollar aplicaciones web interactivas: Crea juegos en línea, calculadoras, herramientas de conversión y mucho más.
✅ Mejorar la accesibilidad: Permite que las personas con discapacidades interactúen con la página de manera más efectiva.
✅ Cargar contenido dinámico: Actualiza partes de la página sin necesidad de recargarla completa, mejorando la experiencia del usuario y el rendimiento.

2. ¿Cómo incluir JavaScript al documento HTML?

Existen dos métodos principales para incluir JavaScript en HTML:

1️⃣ JavaScript en línea:

Se escribe directamente dentro del documento HTML utilizando la etiqueta <script>.
Útil para scripts cortos y sencillos.
Puede afectar el rendimiento de la página si se usa en exceso.

2️⃣ Archivo JavaScript externo:

El código JavaScript se escribe en un archivo independiente con extensión .js.
Se vincula al documento HTML utilizando la etiqueta <script> y el atributo src.
Mejora la organización y el mantenimiento del código.
Recomendado para proyectos más grandes y complejos.

A continuación ampliamos estos dos métodos:

2.1. JavaScript en línea:

Esto significa que el JavaScript se incorpora directamente en el documento HTML mediante el uso de la etiqueta HTML <script>.

Sintaxis básica para el uso de la etiqueta <script>:

<script>
  // Tu código JavaScript aquí
</script>Lenguaje del código: HTML, XML (xml)

2.1.1. ¿Cómo integrar esta etiqueta <script> en el documento HTML?

Una vez creado el contenido JavaScript dentro de esta etiqueta, puede ser colocada:

Dentro de la sección <head>.
Dentro del <body> del documento HTML.

Ejemplo dentro de la Sección <head>:

como agregar js a html ejempll head

Como se ve en la imagen, se introdujo el JavaScript usando la etiqueta <script> y colocándolo justo antes de la etiqueta de cierre de <head>.

Ejemplo dentro de la Sección <body>:

como introducir js al html ejemplo body

Como se ve en la imagen, se introdujo el JavaScript usando la etiqueta <script> y colocándolo justo antes de la etiqueta de cierre de <body>.

2.1.1. ¿Cuándo agregarlo en el <head> y cuando en el <body>?

La decisión de colocar la etiqueta <script> en el <head> o en el <body> de tu documento HTML depende de varios factores, principalmente del propósito del script y cómo afecta la página.

Consideraciones para usar en el `<head>`:

Ventajas:

Carga temprana de scripts: Permite que las funciones de JavaScript estén disponibles antes de que se cargue el contenido de la página, lo que puede ser útil para scripts que afectan el diseño general o la experiencia inicial del usuario.
Mejora el rendimiento percibido: Al cargar los scripts al principio, el navegador puede comenzar a procesarlos mientras se descarga el resto de la página, lo que puede hacer que la página se sienta más receptiva.

Desventajas:

Retrasa la representación del contenido: Si el script tarda mucho en cargarse, puede retrasar la visualización del contenido visible para el usuario.
Bloqueo de renderizado: En navegadores antiguos, los scripts cargados en el <head> podían bloquear la representación del contenido de la página hasta que se completaba su ejecución.

Consideraciones para usar en el `<body>`:

Ventajas:

No retrasa la representación inicial: El contenido de la página se mostrará al usuario lo antes posible, independientemente de la carga del script.
Ejecución específica: Útil para scripts que interactúan con elementos o funcionalidades específicas de la página que solo se cargan una vez que el contenido principal ha terminado de cargarse.

Desventajas:

Funciones no disponibles al inicio: Las funciones de JavaScript definidas en el <body> no estarán disponibles hasta que se cargue la parte correspondiente del documento.
Dependencia de la carga del contenido: El script no podrá funcionar hasta que los elementos con los que interactúa estén disponibles en el DOM.

RECOMENDACION: En la mayoría de los casos, colocar los scripts al final del <body> es una práctica recomendada para garantizar que el contenido de la página se cargue rápidamente y que el JavaScript tenga acceso completo al DOM.

2.2. Archivo JavaScript externo:

Escribir tu código JavaScript en un archivo separado y enlazarlo a tu archivo HTML es una práctica recomendada por varias razones.

2.2.1. ¿Cómo crear y vincular el archivo JavaScript externo? Paso a paso:

Recomendamos seguir el siguiente artículo sobre como descargar y usar Visual Studio Code (herramienta para crear y editar páginas web) en su punto 5, donde explicamos como crear el archivo con la script.js, así como también los archivos index.html y style.css. Necesarios para crear y editar tus páginas web.

Ahora si, vamos con estos pasos:

PASO 1: Crear un archivo JavaScript

Crear el archivo:
- Crea un archivo con la extensión .js. Por ejemplo, script.js.
Escribir el código JavaScript:
- Añade tu código JavaScript en este archivo. Aquí tienes un ejemplo simple:

PASO 2: Enlazar el archivo JavaScript en tu HTML:

Usar la etiqueta <script> con el Atributo src:
- En tu archivo HTML, utiliza la etiqueta <script> para enlazar el archivo JavaScript. Coloca esta etiqueta al final del cuerpo (<body>) para asegurar que el DOM esté completamente cargado antes de ejecutar el script.
Sintaxis para vincular la etiqueta <script> con el atributo src:
- <script src="ruta/al/archivo.js"></script>

PASO 3: Atributos `defer` y `async`:

También puedes usar estos atributos según el comportamiento que desees:
- defer: Descarga el archivo JavaScript mientras se analiza el HTML y lo ejecuta después de que el documento ha sido completamente analizado. Mantiene el orden de ejecución de los scripts.
- async: Descarga el archivo JavaScript mientras se analiza el HTML y lo ejecuta tan pronto como se descarga, sin garantizar el orden de ejecución.
- Ejemplo con defer: <script defer src="script.js"></script>

2.2.2. Ventajas de incluir JavaScript externamente:

Mantenibilidad:
- Código más limpio y organizado: Separar el JavaScript del HTML hace que ambos archivos sean más fáciles de leer y mantener.
- Reutilización: Puedes reutilizar el mismo archivo JavaScript en múltiples páginas HTML, evitando la duplicación de código.
Desempeño:
- Mejora del rendimiento: Los navegadores pueden almacenar en caché los archivos JavaScript externos, reduciendo el tiempo de carga en visitas posteriores.
- Carga asincrónica: Puedes cargar el JavaScript de manera asincrónica para no bloquear el renderizado de la página.
Colaboración:
- Trabajo en equipo: Los archivos separados permiten que diferentes miembros del equipo trabajen en el HTML y el JavaScript de forma independiente.

2.2.3. Recomendaciones al vincular archivos JavaScript externos en el html:

Colocar los archivos JavaScript al final del cuerpo (<body>):
- Esto asegura que todo el contenido HTML se haya cargado antes de que se ejecute el JavaScript, mejorando la velocidad de renderizado inicial de la página.
Uso de defer en <head>:
- Si necesitas colocar el script en el <head>, usa el atributo defer para asegurarte de que el script se ejecute después de que el documento HTML haya sido completamente analizado.
Uso de async y defer:
- defer: El script se descarga en paralelo con el HTML y se ejecuta después de que el documento haya sido completamente analizado. Mantiene el orden de los scripts.
- async: El script se descarga en paralelo con el HTML y se ejecuta tan pronto como se descarga, sin garantizar el orden de ejecución de los scripts.
Separación de código:
- Modularidad: Divide tu código JavaScript en múltiples archivos modulares según su funcionalidad. Esto hace que el código sea más fácil de mantener y depurar.

/mi-proyecto
├── index.html
└── js
    ├── script1.js
    ├── script2.js
    └── script3.js

Seguridad:
- Evita eval(): No uses la función eval(), ya que puede ejecutar código arbitrario y es una fuente común de vulnerabilidades.
- Validación de Entradas: Valida y sanitiza todas las entradas del usuario para prevenir ataques de inyección de código.
- Content Security Policy (CSP): Considera implementar CSP en tu aplicación web para restringir las fuentes de contenido que el navegador puede cargar.
Rendimiento:
- Minificación: Usa herramientas como UglifyJS o Terser para minificar tus archivos JavaScript y reducir su tamaño, lo que mejora los tiempos de carga.
- Carga Diferida: Usa técnicas de carga diferida para scripts no críticos para mejorar el rendimiento de carga de la página.
- Uso de CDNs: Para librerías populares como jQuery, considera usar un CDN (Content Delivery Network) que puede mejorar la velocidad de carga y ofrecer redundancia.
Depuración y mantenimiento:
- Comentarios: Usa comentarios para explicar partes complejas del código y facilitar la colaboración.
- Consola del Navegador: Aprovecha las herramientas de desarrollo del navegador (como la consola) para depurar y probar tu código JavaScript.
- Linting: Usa herramientas de linting como ESLint para mantener un código limpio y consistente según las mejores prácticas y convenciones.

3. Diferencias entre añadir JavaScript externamente y en línea.

A continuación especificamos la principal diferencia:

Inclusión en línea del JavaScript:
- Significa escribir el TOTAL del código JavaScript directamente dentro de un elemento <script> en el mismo archivo HTML.
Inclusión externa del JavaScript:
- Significa escribir el código JavaScript en un archivo SEPARADO con la extensión .js y luego enlazarlo en el archivo HTML usando un elemento <script> con el atributo src.

Aquí dejamos un cuadro con la comparativa:

Característica	Interno	Externo
Ubicación del código	Dentro de un elemento `<script>` en el HTML	En un archivo .js separado
Conveniencia	Fácil para scripts pequeños y rápidos	Mejor para proyectos más grandes y organizados
Mantenimiento	Difícil para scripts grandes	Más fácil de mantener y depurar
Reutilización	Difícil de reutilizar en múltiples páginas	Fácilmente reutilizable en múltiples páginas
Cache	No cacheable por el navegador	Cacheable por el navegador
Colaboración	Menos ideal para equipos	Ideal para colaboración en equipos

4. Los atributos async y defer al introducir JavaScript en el HTML.

Los atributos async y defer son atributos HTML que se pueden usar dentro la etiqueta <script> al agregar el archivo con la extensión js. en el documento HTML.

El comportamiento de estos atributos es el siguiente:

4.1. El atributo `async`:

Descarga el script en paralelo al HTML.
Ejecuta el script tan pronto como esté disponible (no espera a que el HTML esté completamente analizado).
Útil para scripts independientes que no dependen del DOM completo.
Ejemplo:

<script src="script.js" async></script>Lenguaje del código: HTML, XML (xml)

El atributo async se utiliza en elementos <script> en HTML para controlar cómo y cuándo se descargan y ejecutan los scripts en relación con el procesamiento del documento HTML. A continuación, te detallo cuándo y cómo usar el atributo async.

4.1.1. ¿Cuándo Usar el atributo `async`?

El atributo async es útil cuando:

El Script No Depende del DOM Completo: Si tu script no necesita esperar a que todo el DOM esté completamente cargado y analizado para ejecutarse, async es una buena opción. Esto es común para scripts que solo realizan tareas de análisis o publicidad.
El Script No Tiene Dependencias: Si el script no depende de otros scripts para funcionar correctamente, puede ser cargado de forma asíncrona sin problemas. Es decir, puede ejecutarse en cualquier momento sin importar el orden.
Rendimiento: async puede mejorar el rendimiento de carga de la página, ya que permite que el navegador descargue y ejecute el script en paralelo con la descarga y el análisis del HTML. Esto puede hacer que la página se cargue más rápidamente.

4.2. El atributo `defer`:

Descarga el script en paralelo al HTML.
Ejecuta el script después de que el documento HTML haya sido completamente analizado.
Útil para scripts que dependen del DOM.
Ejemplo:

<script src="script.js" defer></script>Lenguaje del código: HTML, XML (xml)

4.1.2. ¿Cuándo Usar el atributo `defer`?:

El atributo defer es útil en los siguientes casos:

El Script Manipula el DOM: Si tu script necesita acceder o manipular el DOM, es crucial que se ejecute solo después de que el documento HTML esté completamente cargado. Usar defer asegura que el script se ejecute en el momento adecuado.
El Script Tiene Dependencias: Si tienes múltiples scripts que dependen unos de otros o que deben ejecutarse en un orden específico, defer garantiza que se ejecuten en el orden en que aparecen en el documento HTML.
Mejora del Rendimiento: defer permite que el navegador descargue el script en paralelo con el HTML, pero sin bloquear el procesamiento del documento. Esto puede hacer que la página se cargue más rápidamente y mejorar la experiencia del usuario.

5. Recomendaciones al introducir JavaScript al documento HTML.

Aquí te dejamos algunas recomendaciones detalladas sobre cómo incluir JavaScript en HTML de manera correcta, cubriendo diferentes escenarios y buenas prácticas.

5.1. Lo más recomendable es incluir JavaScript externo:

La forma más común y recomendada de incluir JavaScript en HTML es mediante archivos externos. Esto facilita la organización del código y la reutilización en múltiples páginas.

Como dijimos, este archivo externo se puede agregar dentro del <head> o dentro del <body>, según cual usemos también existen algunas recomendaciones al respecto:

Si lo incluimos en el <head> hacerlo con defer:
- Usar el atributo defer asegura que el script se descargue en paralelo con el HTML, pero se ejecute solo después de que el documento haya sido completamente analizado.
Si lo incluimos en el <body> hacerlo al final:
- Colocar el script al final del <body> es otra práctica común. Asegura que todo el DOM esté cargado antes de ejecutar el script.

5.2. Si incluimos JavaScript Inline, hacerlo así:

Aunque no es la práctica más recomendada para scripts largos, incluir JavaScript directamente en el HTML puede ser útil para pequeños scripts o configuraciones rápidas.

Si lo incluimos inline y dentro del <head>, comúnmente se incluye con el atributo defer.
Si se incluye en el <body>, es recomendable hacerlo al final, justo antes de la etiqueta de cierre del <body>.

5.3. Mejorar el Rendimiento:

Minimizar y Combinar Archivos:
- Minifica los archivos JavaScript para reducir el tamaño.
- Combina múltiples archivos JavaScript en uno solo para reducir las solicitudes HTTP.
Uso de CDN:
- Usa Content Delivery Networks (CDN) para cargar bibliotecas populares como jQuery, React, etc. Esto puede mejorar la velocidad de carga si los usuarios ya tienen estas bibliotecas en caché.

6. Preguntas frecuentes y resumen sobre como insertar JS en el documento HTML

JavaScript se puede insertar en HTML de tres formas: dentro de una etiqueta <script> en el mismo archivo HTML, en un archivo externo vinculado con <script src="archivo.js"></script>, o en eventos inline como onclick="funcion()".

Puedes insertar JavaScript dentro de tu archivo HTML usando la etiqueta <script> dentro del <head> o <body>. Ejemplo: <script> alert('Hola Mundo'); </script>.

Para enlazar un archivo externo, usa <script src="archivo.js"></script>. Se recomienda colocarlo antes de </body> para optimizar el rendimiento.

Lo ideal es colocarlo antes del </body> para evitar bloquear la carga del HTML. También puedes usar defer o async en la etiqueta <script> si está en el <head>.

Si lo insertas en el <head>, el código se ejecuta antes de cargar el DOM, lo que puede causar errores. En <body>, el código se ejecuta después de que el HTML esté cargado.

Usa window.onload o el evento DOMContentLoaded. Ejemplo: document.addEventListener("DOMContentLoaded", function() { console.log("HTML cargado"); });

Simplemente usa múltiples etiquetas <script src="archivo.js"></script>. Se ejecutarán en el orden en que fueron declarados.

El atributo defer carga el script sin bloquear el HTML y lo ejecuta después del DOM. async lo carga en paralelo, pero se ejecuta en cuanto está disponible.

Puedes usar document.getElementById("miElemento").innerHTML = "Texto"; o addEventListener para manejar eventos y cambiar contenido.

ARTÍCULOS RELACIONADOS

Deja un comentario Cancelar respuesta