Saltar al contenido principal

Unidad 5

Pepito22/7/25Alrededor de 9 minAulaInicio3-Secundaria

JavaScript es un lenguaje de programación que se utiliza principalmente para dar interactividad y dinamismo a las páginas web. Mientras que HTML se encarga de la estructura y CSS del diseño, JavaScript permite que el sitio “cobre vida”, añadiendo funciones como menús desplegables, animaciones, validación de formularios, juegos o aplicaciones completas en línea. Es uno de los lenguajes más populares en el mundo, porque se ejecuta directamente en el navegador sin necesidad de instalar programas adicionales. Además, también se usa en servidores y aplicaciones modernas, lo que lo convierte en una herramienta fundamental para aprender programación y crear proyectos innovadores en el mundo digital.

3BS01: Entiendo el uso de variables en Javascript

Importante

Fecha: 11 al 15 de Agosto
Programa: Visual Studio Code
Tarea: Ver al final
Videos: Video
Recursos: Recursos

Las variables son contenedores que almacenan datos. En JavaScript, puedes crear variables para guardar diferentes tipos de información como números, texto, objetos, y más.

Declaración de Variables

JavaScript ofrece tres formas principales de declarar variables:

var

var nombre = "Juan";
var edad = 25;

let

let nombre = "María";
let edad = 30;

const

const PI = 3.14159;
const nombre = "Pedro";

Diferencias entre var, let y const

Característicavarletconst
Scope (Alcance)Función/GlobalBloqueBloque
RedeclaraciónPermitidaNo permitidaNo permitida
ReasignaciónPermitidaPermitidaNo permitida
HoistingSíSí (pero TDZ)Sí (pero TDZ)

Tipos de Datos

JavaScript es un lenguaje de tipado dinámico, lo que significa que no necesitas especificar el tipo de dato.

Tipos Primitivos

String (Cadena de texto)

let saludo = "Hola mundo";
let nombre = 'JavaScript';
let template = `Mi nombre es ${nombre}`;

Number (Número)

let entero = 42;
let decimal = 3.14;
let negativo = -10;

Boolean (Booleano)

let verdadero = true;
let falso = false;

Undefined

let sinDefinir;
console.log(sinDefinir); // undefined

Null

let vacio = null;

Symbol (ES6+)

let simbolo = Symbol('descripcion');

BigInt (ES2020)

let numeroGrande = 123456789012345678901234567890n;

Ejemplo

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        let name = "Pepito"; 
        let lastName = "Periquito"; 
        console.log(`Hola mi nombre es ${name} ${lastName}`); 
    </script>
</body>
</html>

Tarea

Declara las variables nombre, apellidos, edad y sexo. Además, crea un template que muestra, mediante la consola, el mensaje: Hola, soy Pepito Periquito, tengo 52 años y mi sexo es Masculino

3BS02: Hago uso de funciones para mi aplicación

Importante

Fecha: 18 al 22 de Agosto
Programa: Visual Studio Code
Tarea: Completa la ficha de la semana
Videos: Video
Recursos: Recursos

En JavaScript, las funciones son bloques de código que nos permiten agrupar instrucciones para reutilizarlas cuando las necesitemos. En lugar de escribir las mismas líneas de código varias veces, podemos crear una función, darle un nombre y luego “llamarla” cada vez que queramos que se ejecute. Esto hace que los programas sean más organizados, fáciles de entender y de mantener. Además, las funciones pueden recibir valores de entrada llamados parámetros y devolver un resultado, lo que las convierte en una herramienta esencial para resolver problemas y construir aplicaciones dinámicas en la web.

1. Función básica

// Definición de una función
function saludar() {
  console.log("¡Hola, bienvenido a JavaScript!");
}

// Llamada a la función
saludar();

2. Función con parámetros

function saludarPersona(nombre) {
  console.log("Hola " + nombre + ", ¿cómo estás?");
}

// Llamadas a la función
saludarPersona("Ana");
saludarPersona("Luis");

3. Función que devuelve un valor

function sumar(a, b) {
  return a + b;
}

// Usamos la función y guardamos el resultado
let resultado = sumar(5, 7);
console.log("La suma es: " + resultado);

4. Función flecha (más moderna)

// Forma corta de escribir funciones
const multiplicar = (x, y) => x * y;

console.log("El producto es: " + multiplicar(4, 6));

Ejemplo

index.html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Calculadora Fluent</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .calculator {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      text-align: center;
      width: 350px;
    }

    h1 {
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    input {
      width: 120px;
      padding: 10px;
      margin: 10px;
      border: none;
      border-radius: 10px;
      text-align: center;
      font-size: 16px;
      background: rgba(240, 240, 240, 0.9);
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
    }

    .buttons {
      margin-top: 15px;
    }

    button {
      padding: 12px 18px;
      margin: 8px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 500;
      background: #0078D7;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }

    button:hover {
      background: #005a9e;
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(0,0,0,0.25);
    }

    #resultado {
      margin-top: 25px;
      font-size: 20px;
      font-weight: bold;
      color: #1b1b1b;
      background: rgba(255, 255, 255, 0.5);
      padding: 12px;
      border-radius: 12px;
      box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h1>Calculadora</h1>
    
    <input type="number" id="num1" placeholder="Número 1">
    <input type="number" id="num2" placeholder="Número 2">
    <br>

    <div class="buttons">
      <button onclick="sumar(getVal('num1'), getVal('num2'))">+</button>
      <button onclick="restar(getVal('num1'), getVal('num2'))">-</button>
      <button onclick="multiplicar(getVal('num1'), getVal('num2'))">*</button>
      <button onclick="dividir(getVal('num1'), getVal('num2'))">/</button>
    </div>
    
    <div id="resultado">Resultado: </div>
  </div>

  <script>

   function getVal(id) {
      return parseFloat(document.getElementById(id).value) || 0;
    }

    function sumar(a, b) {
      document.getElementById("resultado").innerText = "Resultado: " + (a + b);
    }

    function restar(a, b) {
      document.getElementById("resultado").innerText = "Resultado: " + (a - b);
    }

    function multiplicar(a, b) {
      document.getElementById("resultado").innerText = "Resultado: " + (a * b);
    }

    function dividir(a, b) {
      if (b === 0) {
        document.getElementById("resultado").innerText = "Error: División entre 0";
      } else {
        document.getElementById("resultado").innerText = "Resultado: " + (a / b);
      }
    }

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

3BS03: Uso de condicionales para mejorar mi aplicación

Importante

Fecha: 18 al 22 de Agosto
Programa: Visual Studio Code
Tarea: Completa la ficha de la semana
Videos: Video
Recursos: Recursos

1. If / Else

En JavaScript, la estructura if...else se utiliza para que un programa tome decisiones dependiendo de si una condición es verdadera o falsa.
Es la forma más común de usar condicionales en la programación.

La estructura básica es:

if (condicion) {
  // Código que se ejecuta si la condición es verdadera
} else {
  // Código que se ejecuta si la condición es falsa
}

También se pueden agregar más condiciones con else if:

if (condicion1) {
  // Se ejecuta si la condición1 es verdadera
} else if (condicion2) {
  // Se ejecuta si la condición2 es verdadera
} else {
  // Se ejecuta si ninguna condición anterior fue verdadera
}

Ejemplo práctico

let numero = 5;

if (numero > 10) {
  console.log("El número es mayor que 10");
} else if (numero === 10) {
  console.log("El número es igual a 10");
} else {
  console.log("El número es menor que 10");
}

En este ejemplo:

  • Si numero es mayor que 10 → muestra El número es mayor que 10.
  • Si numero es igual a 10 → muestra El número es igual a 10.
  • Si no cumple ninguna de las anteriores → muestra El número es menor que 10.

2. Switch / Case

En JavaScript, el switch es una estructura de control que se utiliza cuando necesitamos tomar decisiones entre varias opciones posibles.
Funciona de manera similar a una serie de if...else if...else, pero su sintaxis es más ordenada y clara cuando hay muchos casos distintos a evaluar.

La estructura básica es:

switch (expresion) {
  case valor1:
    // Código si expresion === valor1
    break;
  case valor2:
    // Código si expresion === valor2
    break;
  case valor3:
    // Código si expresion === valor3
    break;
  default:
    // Código si ninguno de los casos anteriores coincide
}

Explicación:

  • expresion: es la variable o valor que queremos evaluar.
  • case valorX: representa cada posible opción.
  • break: detiene la ejecución del switch para que no se ejecuten los demás casos.
  • default: se ejecuta si ningún caso coincide (es como el else).
let dia = "lunes";
switch (dia) {
  case "lunes":
    console.log("Inicio de semana");
    break;
  case "viernes":
    console.log("Casi fin de semana");
    break;
  case "sábado":
  case "domingo":
    console.log("Es fin de semana");
    break;
  default:
    console.log("Es un día normal");
}

En este ejemplo:

  • Si dia es "lunes", mostrará Inicio de semana.
  • Si dia es "viernes", mostrará Casi fin de semana.
  • Si dia es "sábado" o "domingo", mostrará Es fin de semana.
  • Para cualquier otro valor, ejecutará el default.

Ejemplo

index.html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Calculadora con Switch</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .calculator {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      text-align: center;
      width: 350px;
    }

    h1 {
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    input, select {
      width: 120px;
      padding: 10px;
      margin: 10px;
      border: none;
      border-radius: 10px;
      text-align: center;
      font-size: 16px;
      background: rgba(240, 240, 240, 0.9);
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
    }

    .buttons {
      margin-top: 15px;
    }

    button {
      padding: 12px 18px;
      margin: 8px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 500;
      background: #0078D7;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }

    button:hover {
      background: #005a9e;
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(0,0,0,0.25);
    }

    #resultado {
      margin-top: 25px;
      font-size: 20px;
      font-weight: bold;
      color: #1b1b1b;
      background: rgba(255, 255, 255, 0.5);
      padding: 12px;
      border-radius: 12px;
      box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h1>Calculadora Switch</h1>
    
    <input type="number" id="num1" placeholder="Número 1">
    <input type="number" id="num2" placeholder="Número 2">
    <br>

    <select id="operacion">
      <option value="sumar">Sumar</option>
      <option value="restar">Restar</option>
      <option value="multiplicar">Multiplicar</option>
      <option value="dividir">Dividir</option>
    </select>

    <div class="buttons">
      <button onclick="calcular()">Calcular</button>
    </div>
    
    <div id="resultado">Resultado: </div>
  </div>

  <script>
    function getVal(id) {
      return parseFloat(document.getElementById(id).value) || 0;
    }

    function mostrarResultado(texto) {
      document.getElementById("resultado").innerText = texto;
    }

    function calcular() {
      let a = getVal('num1');
      let b = getVal('num2');
      let operacion = document.getElementById("operacion").value;

      switch (operacion) {
        case "sumar":
          if (a === b) {
            mostrarResultado("Son iguales. Resultado: " + (a + b));
          } else {
            mostrarResultado("Resultado: " + (a + b));
          }
          break;

        case "restar":
          if (a < b) {
            mostrarResultado("Advertencia: será negativo → " + (a - b));
          } else {
            mostrarResultado("Resultado: " + (a - b));
          }
          break;

        case "multiplicar":
          if (a === 0 || b === 0) {
            mostrarResultado("Multiplicar por 0 siempre da 0");
          } else {
            mostrarResultado("Resultado: " + (a * b));
          }
          break;

        case "dividir":
          if (b === 0) {
            mostrarResultado("Error: no se puede dividir entre 0");
          } else {
            mostrarResultado("Resultado: " + (a / b));
          }
          break;

        default:
          mostrarResultado("Operación no reconocida");
          break;
      }
    }
  </script>
</body>
</html>

3BS04: Entiendo los eventos del DOM

Importante

Fecha: 01 al 05 de Setiembre
Programa: Visual Studio Code
Tarea: Sin tarea
Videos: Video
Recursos: Recursos

En JavaScript, los eventos son acciones que ocurren en la página web y que el navegador puede detectar, como hacer clic, escribir, mover el ratón o cargar un elemento. El DOM (Document Object Model) es la representación estructurada del documento HTML en forma de nodos, lo que permite a JavaScript acceder y manipular contenido, atributos y estilos. Al manejar eventos sobre el DOM, logramos páginas dinámicas e interactivas.

Principales eventos en JavaScript

  1. click
    Se activa cuando el usuario hace clic sobre un elemento.
    Ejemplo: cambiar el color de un botón al pulsarlo.

  2. dblclick
    Se ejecuta cuando se hace doble clic en un elemento.

  3. mouseover / mouseout

    • mouseover: ocurre cuando el puntero entra en un elemento.
    • mouseout: ocurre cuando el puntero sale del elemento.

  4. keydown / keyup

    • keydown: cuando el usuario presiona una tecla.
    • keyup: cuando el usuario suelta una tecla.

  5. submit
    Se activa al enviar un formulario. Puede usarse para validar los datos antes de enviarlos al servidor.

  6. change
    Detecta cuando un valor cambia en un input, select o textarea.

  7. load
    Ocurre cuando una página o recurso (como una imagen) ha terminado de cargarse.

  8. focus / blur

    • focus: cuando un campo de formulario recibe el cursor.
    • blur: cuando el campo pierde el cursor.

Estructura básica del DOM

El DOM organiza un documento HTML como un árbol de nodos:

Ejemplo

index.html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Calculadora Fluent con Eventos</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .calculator {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      text-align: center;
      width: 350px;
    }

    h1 {
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    input {
      width: 120px;
      padding: 10px;
      margin: 10px;
      border: none;
      border-radius: 10px;
      text-align: center;
      font-size: 16px;
      background: rgba(240, 240, 240, 0.9);
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
    }

    .buttons {
      margin-top: 15px;
    }

    button {
      padding: 12px 18px;
      margin: 8px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 500;
      background: #0078D7;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }

    button:hover {
      background: #005a9e;
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(0,0,0,0.25);
    }

    #resultado {
      margin-top: 25px;
      font-size: 20px;
      font-weight: bold;
      color: #1b1b1b;
      background: rgba(255, 255, 255, 0.5);
      padding: 12px;
      border-radius: 12px;
      box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h1>Calculadora con Eventos</h1>
    
    <input type="number" id="num1" placeholder="Número 1">
    <input type="number" id="num2" placeholder="Número 2">
    <br>

    <div class="buttons">
      <button id="btnSumar">Sumar</button>
      <button id="btnRestar">Restar</button>
      <button id="btnMultiplicar">Multiplicar</button>
      <button id="btnDividir">Dividir</button>
    </div>
    
    <div id="resultado">Resultado: </div>
  </div>

  <script>
    // --- Funciones de apoyo getVal y mostrarResultado ---
    function getVal(id) {
      return parseFloat(document.getElementById(id).value) || 0;
    }

    function mostrarResultado(texto) {
      document.getElementById("resultado").innerText = texto;
    }

    // --- Funciones de operaciones ---
    function sumar() {
      let a = getVal("num1"), b = getVal("num2");
      mostrarResultado("Resultado: " + (a + b));
    }

    function restar() {
      let a = getVal("num1"), b = getVal("num2");
      mostrarResultado("Resultado: " + (a - b));
    }

    function multiplicar() {
      let a = getVal("num1"), b = getVal("num2");
      mostrarResultado("Resultado: " + (a * b));
    }

    function dividir() {
      let a = getVal("num1"), b = getVal("num2");
      if (b === 0) {
        mostrarResultado("Error: no se puede dividir entre 0");
      } else {
        mostrarResultado("Resultado: " + (a / b));
      }
    }

    // --- Uso de eventos y DOM ---
    document.getElementById("btnSumar").addEventListener("click", sumar);
    document.getElementById("btnRestar").addEventListener("click", restar);
    document.getElementById("btnMultiplicar").addEventListener("click", multiplicar);
    document.getElementById("btnDividir").addEventListener("click", dividir);
  </script>
</body>
</html>

3BS05: Practica Calificada - Revisión de Folder

Advertencia

Fecha Límite: Semana 6
Programa: Visual Studio Code

Prepara el glosario con las palabras y todas las funciones usadas en clase. En la semana 6 se te haran preguntas respecto a ese glosario.

Copyright © 2025 Pepito