JavaScript: Incrustar Scripts en HTML

Introducción

¡Bienvenido a tu primer laboratorio de JavaScript! JavaScript es un potente lenguaje de scripting que te permite crear contenido dinámico e interactivo en páginas web. Sin él, las páginas web serían estáticas y mucho menos atractivas.

En este laboratorio, aprenderás las dos formas fundamentales de incluir JavaScript en una página web:

JavaScript Interno: Escribir código directamente dentro de las etiquetas <script> en un archivo HTML.
JavaScript Externo: Colocar el código en un archivo .js separado y vincularlo al archivo HTML.

Comenzaremos con una página HTML básica y agregaremos progresivamente funcionalidad de JavaScript. Utilizarás el WebIDE integrado para editar tus archivos y previsualizar tus cambios en tiempo real utilizando la pestaña "Web 8080". ¡Empecemos!

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel intermedio con una tasa de finalización del 68%. Ha recibido una tasa de reseñas positivas del 98% por parte de los estudiantes.

Crear un archivo HTML con etiqueta script

En este paso, agregarás un bloque de JavaScript interno a tu archivo HTML. El proceso de configuración ya ha creado un archivo index.html para ti en el directorio ~/project. Ahora le agregaremos la etiqueta <script>, que es la forma estándar de declarar un bloque de código JavaScript.

Primero, localiza el archivo index.html en el explorador de archivos en el lado izquierdo del WebIDE y haz doble clic para abrirlo.

Ahora, agrega una etiqueta <script> vacía justo antes de la etiqueta de cierre </body>. Esta es la práctica recomendada, ya que asegura que el contenido HTML sea analizado y mostrado al usuario antes de que el navegador comience a ejecutar cualquier JavaScript, mejorando el tiempo de carga percibido de la página.

Tu archivo index.html debería verse así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Asegúrate de guardar el archivo después de realizar los cambios (puedes usar Ctrl+S o Cmd+S).

Escribir console.log para mostrar Hello World

Ahora que tienes un lugar donde escribir tu JavaScript, agreguemos tu primera línea de código. Usaremos la función console.log(). Esta es una herramienta fundamental para cualquier desarrollador de JavaScript, ya que te permite imprimir mensajes en la consola de desarrollador del navegador. Es increíblemente útil para depurar y entender cómo se está ejecutando tu código.

En tu archivo index.html, agrega console.log('Hello World'); dentro de las etiquetas <script> que creaste en el paso anterior.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

Después de guardar el archivo, veamos el resultado.

Haz clic en la pestaña Web 8080 en la parte superior de la interfaz de LabEx.
Verás el encabezado <h1>. Para ver la salida de la consola, haz clic derecho en cualquier lugar de la página y selecciona "Inspect" (Inspeccionar).
Se abrirá un nuevo panel. Haz clic en la pestaña "Console" (Consola) en este panel.
Deberías ver el mensaje Hello World impreso en la consola.

Vincular un archivo JavaScript externo usando el atributo src

Si bien los scripts internos están bien para tareas pequeñas, la mejor práctica es mantener tu JavaScript en archivos separados. Esto hace que tu código sea más limpio, fácil de administrar y reutilizable en diferentes páginas HTML.

En este paso, moveremos nuestro código a un archivo externo llamado script.js (que ya fue creado para ti) y lo vincularemos a index.html.

Primero, modifica tu archivo index.html. Elimina la línea console.log de entre las etiquetas <script> y agrega el atributo src a la etiqueta <script> de apertura para que apunte a tu archivo externo.

Tu index.html ahora debería verse así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

A continuación, abre el archivo script.js desde el explorador de archivos. Actualmente está vacío. Agrega la misma declaración console.log a este archivo.

Tu archivo script.js solo debería contener esta línea:

console.log("Hello World");

Guarda ambos archivos. Si vuelves a la pestaña Web 8080 y actualizas la página, verás exactamente el mismo resultado en la consola. El navegador ahora carga index.html, ve la etiqueta <script src="script.js"> y luego obtiene y ejecuta el contenido de script.js.

Agregar la función alert para mensajes emergentes

Además de registrar en la consola, JavaScript puede interactuar con el usuario de forma más directa. Una de las formas más sencillas de hacerlo es con la función alert(), que muestra un cuadro de mensaje emergente al usuario.

Agreguemos una alerta a nuestro script. Abre el archivo script.js y agrega una nueva línea de código para crear una alerta de bienvenida.

Tu archivo script.js ahora debería verse así:

console.log("Hello World");
alert("Welcome to JavaScript!");

La función alert() pausará la ejecución del script y la renderización de la página hasta que el usuario haga clic en "OK" en el cuadro emergente. Esto la convierte en una forma muy directa de comunicar información importante.

Guarda el archivo script.js. Veremos su efecto en el siguiente paso.

Refrescar el navegador para ejecutar el script

Ahora has agregado tanto un console.log como una alerta a tu archivo JavaScript externo. Es hora de ver el resultado final.

Navega de regreso a la pestaña Web 8080.

Para ver los cambios que realizaste en el archivo script.js, debes refrescar la pestaña del navegador. Esto le indica al navegador que vuelva a descargar el HTML y cualquier archivo vinculado, incluido tu script actualizado.

Al refrescar, deberías ver inmediatamente un cuadro emergente con el mensaje "Welcome to JavaScript!".

Después de hacer clic en "OK", el cuadro emergente desaparecerá y el resto de la página se cargará. Si vuelves a abrir la consola del desarrollador (clic derecho -> Inspeccionar -> Consola), todavía verás el mensaje "Hello World" registrado allí. Esto demuestra el orden de ejecución en tu script.

¡Felicitaciones, has incrustado con éxito JavaScript en una página web utilizando métodos internos y externos!

Resumen

En este laboratorio, diste tus primeros pasos en el mundo de la programación web con JavaScript. Has adquirido experiencia práctica con los conceptos centrales de la inclusión de JavaScript en un proyecto web.

Has aprendido:

Cómo agregar JavaScript directamente a un archivo HTML usando la etiqueta <script>.
Cómo usar console.log() para imprimir mensajes en la consola del desarrollador del navegador para depuración.
Los beneficios de separar tu código en archivos .js externos.
Cómo vincular un archivo JavaScript externo a tu HTML usando el atributo src de la etiqueta <script>.
Cómo crear un mensaje emergente visible para el usuario con la función alert().

Esta base es crucial para construir aplicaciones web más complejas e interactivas. ¡Sigue experimentando y construyendo sobre lo que has aprendido!

Introducción y Embebido de JavaScript