¿Como funciona JavaScript?
Estructura general de una página web y cómo se integra JavaScript
El diseño básico de cualquier página web parte de un documento HTML, en el que se organizan todas las etiquetas que componen su contenido. A lo largo de este archivo, se pueden incluir enlaces a recursos externos, como hojas de estilo CSS o archivos JavaScript.
Cuando el navegador detecta un enlace a un archivo CSS dentro del HTML, lo descarga y aplica sus estilos para modificar la apariencia visual del sitio. De manera similar, si el HTML incluye una referencia a un archivo JavaScript, este se descarga y ejecuta, aplicando las instrucciones allí definidas.
Formas de incluir JavaScript en una página
En sus formas más simples, JavaScript puede escribirse directamente dentro del propio archivo HTML. Un ejemplo sería el siguiente:
htmlCopiarEditar<html>
<head>
<title>Mi página web</title>
<script>
console.log("¡Hola!");
</script>
</head>
<body>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Este enfoque se conoce como JavaScript embebido o inline, ya que el código se escribe directamente dentro de la etiqueta <script> del HTML. Aunque puede ser útil para ejemplos simples o pruebas rápidas, no es lo más recomendable para proyectos reales. Lo ideal es mantener el código JavaScript en archivos separados, para facilitar la organización y el mantenimiento del proyecto.
¿Dónde colocar la etiqueta <script>?
En el ejemplo anterior, el bloque de JavaScript se encuentra dentro del elemento <head>, lo que implica que el navegador cargará y procesará ese script antes de renderizar el contenido de la página (el <body>).
Sin embargo, existen varias ubicaciones posibles para la etiqueta <script> dentro del HTML, y cada una afecta de forma diferente la carga y el comportamiento del sitio:
Ubicación del <script> | ¿Cuándo se ejecuta el script? | Estado de carga de la página |
|---|---|---|
Dentro del <head> | Antes de que se empiece a dibujar la página | Página aún no visible |
En medio del <body> | Mientras se dibuja el contenido | Parcialmente cargada |
Justo antes del cierre </body> | Después de que todo el contenido esté cargado | Página completamente visible |
Si necesitas que el JavaScript se ejecute antes de que cualquier parte visual de la página sea visible, deberías colocarlo dentro del <head>. Por el contrario, si tu intención es que el script se ejecute una vez que todo el contenido se haya cargado, lo más recomendable es insertarlo al final del <body>.
Una alternativa moderna y muy utilizada es usar el atributo defer dentro del <script>, que permite que el archivo JavaScript se cargue en paralelo y se ejecute una vez que el documento HTML haya sido completamente procesado. Esta práctica mejora el rendimiento y es compatible con la mayoría de los navegadores actuales (aunque algunos muy antiguos como IE9 o anteriores no lo reconocen).