Title: Actividad 5: JavaScript y addEventListener
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo
Practicar el uso de JavaScript en conjunto con el método addEventListener para capturar eventos de botones, trabajar con valores ingresados en inputs y mostrar resultados mediante alertas.

Instrucciones

1. Al inicio del archivo escribe en un comentario tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


2. Crea un archivo actividad5.html.
3. Todo el contenido debe estar dentro de <html>...</html>, dividido en <head> (con <title>Actividad 5 – JavaScript</title>) y <body>.
4. Dentro del <body> agrega lo siguiente:
  - Un título <h1>: Operaciones con JavaScript
  - Dos campos de entrada (inputs) para capturar números:

<input type="number" id="valor1" placeholder="Ingresa el primer número">
<input type="number" id="valor2" placeholder="Ingresa el segundo número">


  - Tres botones:

<button id="btnSuma">Sumar</button>
<button id="btnResta">Restar</button>
<button id="btnMultiplicar">Multiplicar</button>
<button id="btnReset">Resetear</button>


5. En la parte final del documento, antes de cerrar el </body>, agrega un bloque <script> donde implementarás la lógica de JavaScript:
Requisitos del script:
  - Seleccionar los inputs y botones con document.getElementById.
  - Usar addEventListener("click", ...) en cada botón.
  - Validar que ambos inputs tengan un valor antes de hacer la operación. Si falta alguno, mostrar:

"Debes llenar ambos campos antes de continuar"


  - Si los dos están llenos, realizar la operación correspondiente y mostrar el resultado en una alerta.
  - El botón "Resetear" debe limpiar los valores de los inputs.

Ejemplos:

const valor1 = document.getElementById("valor1");

const valor2 = document.getElementById("valor2");

const btnSuma = document.getElementById("btnSuma");

function validarEntradas() {

  if (valor1.value === "" || valor2.value === "") {

    alert("Debes llenar ambos campos antes de continuar");

    return false;

  }

  return true;

}

btnSuma.addEventListener("click", () => {

  if (validarEntradas()) {

    alert("Resultado: " + (parseFloat(valor1.value) + parseFloat(valor2.value)));

  }

});

Objetivo
Practicar el uso de JavaScript en conjunto con el método addEventListener para capturar eventos de botones, trabajar con valores ingresados en inputs y mostrar resultados mediante alertas.

Instrucciones

1. Al inicio del archivo escribe en un comentario tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


2. Crea un archivo actividad5.html.
3. Todo el contenido debe estar dentro de <html>...</html>, dividido en <head> (con <title>Actividad 5 – JavaScript</title>) y <body>.
4. Dentro del <body> agrega lo siguiente:
  - Un título <h1>: Operaciones con JavaScript
  - Dos campos de entrada (inputs) para capturar números:

<input type="number" id="valor1" placeholder="Ingresa el primer número">
<input type="number" id="valor2" placeholder="Ingresa el segundo número">


  - Tres botones:

<button id="btnSuma">Sumar</button>
<button id="btnResta">Restar</button>
<button id="btnMultiplicar">Multiplicar</button>
<button id="btnReset">Resetear</button>


5. En la parte final del documento, antes de cerrar el </body>, agrega un bloque <script> donde implementarás la lógica de JavaScript:
Requisitos del script:
  - Seleccionar los inputs y botones con document.getElementById.
  - Usar addEventListener("click", ...) en cada botón.
  - Validar que ambos inputs tengan un valor antes de hacer la operación. Si falta alguno, mostrar:

"Debes llenar ambos campos antes de continuar"


  - Si los dos están llenos, realizar la operación correspondiente y mostrar el resultado en una alerta.
  - El botón "Resetear" debe limpiar los valores de los inputs.

Ejemplos:

const valor1 = document.getElementById("valor1");

const valor2 = document.getElementById("valor2");

const btnSuma = document.getElementById("btnSuma");

function validarEntradas() {

  if (valor1.value === "" || valor2.value === "") {

    alert("Debes llenar ambos campos antes de continuar");

    return false;

  }

  return true;

}

btnSuma.addEventListener("click", () => {

  if (validarEntradas()) {

    alert("Resultado: " + (parseFloat(valor1.value) + parseFloat(valor2.value)));

  }

});