Saltar al contenido principal

Ejercicio de JavaScript 1

Explorando Básicos de JavaScript – alert, console.log, e innerHTML

Objetivo​

Familiarizarse con tres de los métodos básicos de salida en JavaScript: alert, console.log, e innerHTML. Aprenderás cómo mostrar mensajes emergentes, mensajes en la consola, y cómo cambiar el contenido de una página web.

Actividad​

  1. Crear un archivo HTML básico llamado index.html y añade la estructura principal de HTML.

  2. En el archivo HTML, agrega un botón y un elemento de texto vacío donde mostraremos un mensaje.

  3. Crear un archivo JavaScript llamado script.js y escribe el código para que, al hacer clic en el botón, el programa ejecute tres acciones:

  • Mostrar un mensaje emergente usando alert.
  • Imprimir un mensaje en la consola usando console.log.
  • Cambiar el texto del elemento en el HTML usando innerHTML.

Solución​

Paso 1: Crear el archivo index.html​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejercicio Básico con JavaScript</title>
  </head>
  <body>
    <h1>Ejercicio de Alert, Console y innerHTML</h1>

    <!-- Botón para activar el ejercicio -->
    <button id="miBoton">Haz clic aquí</button>

    <!-- Contenedor para mostrar el mensaje con innerHTML -->
    <p id="miMensaje"></p>

    <!-- Vincular el archivo JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

Paso 2: Escribir el código en script.js​

JavaScript
// Seleccionar el botón y el elemento donde pondremos el mensaje
const boton = document.getElementById("miBoton");
const mensaje = document.getElementById("miMensaje");

// Agregar un evento 'click' al botón para ejecutar las acciones
boton.addEventListener("click", () => {
  // 1. Mostrar un mensaje emergente usando alert
  alert("¡Hola! Este es un mensaje de alerta.");

  // 2. Mostrar un mensaje en la consola usando console.log
  console.log("Este es un mensaje en la consola.");

  // 3. Cambiar el contenido de HTML usando innerHTML
  mensaje.innerHTML = "Este es un mensaje que aparece en la página.";
});