HTML Básico

Inicio / Tema / HTML Básico / Integración de HTML con JavaScript

Integración de HTML con JavaScript

Añadiendo JavaScript a HTML

JavaScript es un lenguaje de programación que permite añadir interactividad a las páginas web. Puedes insertar JavaScript directamente en el HTML mediante la etiqueta <script>. Esta etiqueta puede colocarse dentro de <head> o <body>, según el momento en el que quieras que el script se ejecute.

html

"Este script JavaScript muestra un mensaje de bienvenida al usuario usando la función alert. La etiqueta script permite incluir código JavaScript en la página."

Ubicación del Script: `<head>` vs `<body>`

La ubicación de <script> en el documento afecta cuándo se ejecuta el código JavaScript. Colocar el script en <head> ejecuta el código antes de que la página se cargue, mientras que ponerlo al final de <body> permite que el código JavaScript se ejecute después de que todo el HTML esté cargado.

html

"Aquí hay dos scripts, uno en el head y otro al final del body. El primero se ejecuta al inicio, mientras que el segundo lo hace después de cargar el contenido de la página."

Scripts Inline, Internos y Externos

JavaScript puede añadirse directamente en línea con eventos HTML, internamente dentro de etiquetas <script>, o externamente mediante archivos .js vinculados. La separación de JavaScript en archivos externos es ideal para mantener el código organizado.

html

"Este ejemplo muestra tres formas de añadir JavaScript. Un script inline, que está directamente en el HTML, un script interno en la etiqueta script, y un archivo de script externo enlazado con src."

Elementos del DOM y Selectores

El DOM (Document Object Model) representa la estructura HTML como un árbol de nodos, permitiendo a JavaScript interactuar y modificar la página. Los selectores permiten acceder a los elementos del DOM de manera fácil. Puedes usar métodos como getElementById o querySelector.

html

"Aquí, seleccionamos un div por su id usando getElementById. Luego, cambiamos su contenido de texto con textContent, haciendo que el JavaScript modifique la página."

Cierre del Capítulo

Has aprendido a integrar JavaScript en tus páginas HTML, controlando cuándo y dónde se ejecuta. En el próximo capítulo, usaremos estos conocimientos para construir un proyecto práctico de un sitio web completo con HTML.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea