Dónde poner JavaScript en un documento HTML?
JavaScript en la etiqueta
Cada vez que se abre una página HTML, es la primera etiqueta de contenido que se carga, lo que significa que todos los datos dentro de esto se cargan antes de la etiqueta. Si JavaScript se agrega a la etiqueta de cabeza, no esperará la carga completa de la página web y se cargará en la memoria del navegador. Para demostrar esto, cree una página HTML básica que solicite al usuario tan pronto como se cargue en la memoria del navegador.
Tome el siguiente archivo HTML:
Documento
Como puede ver, el script se agrega en el etiqueta. Sin embargo, en la etiqueta del cuerpo, se está cargando una imagen de 8k en la página web, que tomará unos momentos para cargar. Cargue la página HTML y la salida:
De esta salida, está claro que poner el script en la causa que se carga incluso antes de que el DOM esté listo.
JavaScript en la etiqueta
Como se mencionó anteriormente, uno puede colocar el JavaScript dentro del etiqueta. Esto permitirá que el DOM se cargue completamente y luego cargue el JavaScript de acuerdo con su posición en la etiqueta.
Para demostrar esto, vamos a crear un botón en la página HTML con las siguientes líneas y en la funcionalidad a ese botón con las siguientes líneas:
Documento
En el fragmento de código anterior, se agrega un oyente de eventos en el botón que alerta al botón de usuario sobre presione todo con el script dentro del . Ejecute este archivo HTML y observe la siguiente salida:
De la salida anterior está claro que el script funciona bien en la etiqueta
JavaScript en etiqueta o etiqueta
Para responder a esta pregunta, tome el último ejemplo y simplemente mueva la etiqueta de script para alertar al botón Usuario sobre Presione dentro de la etiqueta como:
Documento
Tras la ejecución de este programa, la diferencia no es visible ya que la salida se parece a la siguiente:
Sin embargo, abrir la consola del navegador muestra la diferencia, porque en la consola hay este error:
Este error es causado por JavaScript que intenta obtener la referencia de un elemento de la etiqueta del cuerpo, que aún no ha sido inicializado por DOM porque el JavaScript en la etiqueta de la cabeza se ejecutó incluso antes de que el DOM se cargara completamente.
Entonces, en conclusión, colocar el script en la etiqueta de la cabeza o la etiqueta del cuerpo se reduce al funcionamiento de la página web.
Envolver
JavaScript se puede colocar en dos lugares diferentes dentro de un archivo de documento HTML en el etiqueta o en etiqueta. Colocar el JavaScript en la etiqueta de la cabeza hace que el navegador cargue el script antes de que el DOM esté completamente listo. Mientras que incluye el JavaScript dentro del Carga el script después de que el DOM esté listo. Debido a esto, no hay un lugar óptimo para incluir JavaScript en su documento HTML, y depende de la tarea que uno quiere realizar.