Semana 4

Página web con JavaScript

Temas Aprendidos

Esta semana aprendí sobre los motores de JavaScript y cómo usar variables, operadores y distintos tipos de datos como números, strings, objetos y booleanos. También vimos estructuras de control, bucles y varios tipos de funciones, como las flecha y las auto invocadas. Me pareció interesante cómo se puede modificar elementos, estilos y crear animaciones con canvas usando solo JavaScript.

Ejercicios y Resultados

Variables, Operadores y Funciones JavaScript

Código del ejercicio:

// Variables y tipos de datos
let nombre = "JavaScript";
const edad = 28;
let esActivo = true;
let usuario = {
    nombre: "Juan",
    email: "juan@email.com",
    saludar: () => `Hola, soy ${usuario.nombre}`
};

// Función tradicional
function calcular(a, b, operacion) {
    switch(operacion) {
        case '+': return a + b;
        case '-': return a - b;
        case '*': return a * b;
        case '/': return b !== 0 ? a / b : 'Error: División por cero';
        default: return 'Operación no válida';
    }
}

// Función flecha y closure
const crearContador = () => {
    let count = 0;
    return {
        incrementar: () => ++count,
        decrementar: () => --count,
        obtener: () => count
    };
};

// Función auto-invocada (IIFE)
(function() {
    console.log("Función ejecutada inmediatamente");
})();

Resultado:

Calculadora JavaScript

Resultado: 15

Contador con Closure

Manipulación del DOM y Gráficos Canvas

Código del ejercicio:

// Manipulación de elementos y estilos
function cambiarEstilos() {
    const elemento = document.getElementById('elementoDinamico');
    elemento.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
    elemento.style.transform = `rotate(${Math.random() * 360}deg) scale(${0.8 + Math.random() * 0.4})`;
    elemento.textContent = `Transformado ${Math.floor(Math.random() * 100)}`;
}

// Canvas y animaciones
function dibujarEnCanvas() {
    const canvas = document.getElementById('animationCanvas');
    const ctx = canvas.getContext('2d');
    
    // Limpiar canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Dibujar círculos animados
    const tiempo = Date.now() * 0.002;
    for(let i = 0; i < 5; i++) {
        const x = 150 + Math.sin(tiempo + i) * 80;
        const y = 75 + Math.cos(tiempo + i * 0.5) * 30;
        const radio = 10 + Math.sin(tiempo * 2 + i) * 5;
        
        ctx.fillStyle = `hsl(${(tiempo * 50 + i * 60) % 360}, 70%, 60%)`;
        ctx.beginPath();
        ctx.arc(x, y, radio, 0, Math.PI * 2);
        ctx.fill();
    }
    
    requestAnimationFrame(dibujarEnCanvas);
}

Resultado Interactivo:

Manipulación de Estilos

Elemento Dinámico

Animación Canvas

Animaciones Avanzadas y Efectos Interactivos

Código del ejercicio:

// Sistema de partículas
function crearParticula(x, y) {
    const particula = document.createElement('div');
    particula.className = 'particle';
    particula.style.left = x + 'px';
    particula.style.top = y + 'px';
    particula.style.width = Math.random() * 8 + 4 + 'px';
    particula.style.height = particula.style.width;
    
    document.getElementById('areaParticulas').appendChild(particula);
    
    setTimeout(() => {
        if (particula.parentNode) {
            particula.parentNode.removeChild(particula);
        }
    }, 3000);
}

// Animación de texto dinámico
function animarTexto() {
    const texto = "¡JavaScript es increíble!";
    const contenedor = document.getElementById('textoAnimado');
    contenedor.innerHTML = '';
    
    [...texto].forEach((letra, i) => {
        const span = document.createElement('span');
        span.textContent = letra === ' ' ? '\u00A0' : letra;
        span.style.animationDelay = i * 100 + 'ms';
        span.classList.add('letra-animada');
        contenedor.appendChild(span);
    });
}

// Efecto de ondas
function crearOnda(evento) {
    const boton = evento.target;
    const rect = boton.getBoundingClientRect();
    const x = evento.clientX - rect.left;
    const y = evento.clientY - rect.top;
    
    const onda = document.createElement('span');
    onda.style.cssText = `
        position: absolute; left: ${x}px; top: ${y}px;
        width: 0; height: 0; border-radius: 50%;
        background: rgba(255,255,255,0.5);
        transform: translate(-50%, -50%);
        animation: onda 0.6s ease-out;
    `;
    
    boton.style.position = 'relative';
    boton.appendChild(onda);
    
    setTimeout(() => onda.remove(), 600);
}

Resultado Interactivo:

Sistema de Partículas

Haz clic para crear partículas

Texto Animado

¡JavaScript es increíble!

Botón con Efecto Onda

Reflexión Final

Durante esta semana, me di cuenta de lo importante que es comprender la lógica detrás del código para poder aplicarlo de forma creativa. Al practicar con funciones y estructuras de control, entendí mejor cómo resolver problemas paso a paso. Esto me motivó a seguir explorando JavaScript y a fortalecer mi pensamiento lógico.

¿Qué aprendí?

Aprendí sobre variables, operadores, funciones y estructuras de control en JavaScript.

¿Cómo aprendí?

Aprendí practicando con ejercicios y revisando documentación de JS.