JS y la Vida de tu Tarjeta

{ } </>

CLASE 4 · JAVASCRIPT

JS y la Vida de tu Tarjeta

Clase 4: Electricidad, Sensores y Vida

⚡ JavaScript

¿Qué es JavaScript?

El cerebro dinámico

Es el lenguaje de programación que nos permite crear contenido dinámico, controlar multimedia, animar imágenes y hacer que la web responda a las acciones del usuario.

La analogía de la casa:

Si HTML son los planos y ladrillos, y CSS es la pintura y decoración... ¡JS es la red eléctrica, el agua corriente y los sensores de movimiento!

🏗️ HTML: Estructura (Esqueleto plano)

🎨 CSS: Estilo y Presentación (Color y diseño)

⚡ JavaScript: Comportamiento e Interacción (Vida)

console.log: Hablar con el navegador

Hablar en voz alta 🗣️

El método console.log() le indica al navegador que imprima un mensaje específico en la consola de desarrollo. Es nuestra principal herramienta para testear.

¿Cómo lo vemos?:

Haciendo click derecho en el navegador, seleccionando Inspeccionar (F12) y yendo a la pestaña Console.

// Enviamos un mensaje al diario de JS
console.log("¡Hola desde JS!");

💡 Ideal para verificar que nuestro script está conectado y funcionando correctamente.

Variables: Cajas de Almacenamiento

Guardar para después 📦

Una variable es un contenedor (una "caja") donde guardamos un dato para usarlo o cambiarlo más adelante.

📦 let: Caja abierta. El contenido puede cambiar (ej. contador de clics).
🔒 const: Caja sellada con cinta. El valor es constante y no cambia nunca.

// Caja que puede cambiar de valor
let clicks = 0;
clicks = clicks + 1; /* Ahora vale 1 */

// Caja constante e inmutable
const canal = "@imyisusdev";

El DOM: tu HTML es un árbol 🌳

Cuando el navegador lee tu HTML, arma un árbol genealógico de etiquetas — cada una anidada dentro de otra es su "hija".

💡 Este es literalmente el árbol de tu propia Bio Card. Cuando querySelector "busca", camina por este árbol hasta encontrar la rama que le pediste.

querySelector: Encontrar Elementos

Conectar HTML y JS 🎯

Para que JS modifique un elemento HTML, primero debe encontrarlo. Usamos document.querySelector() con selectores CSS.

¿Qué selectores usa?:

¡Los mismos selectores que aprendiste en CSS!
• Por Clase: .card
• Por ID: #btn-saludo
• Por Etiqueta: h1

<button id="btn-saludo">🔍

<h1>

const boton = document.querySelector("#btn-saludo");

textContent: Cambiar el Contenido

Modificar texto al vuelo ✏️

La propiedad textContent nos permite leer o modificar el texto visible de un elemento HTML que ya seleccionamos.

La analogía:

Es como cambiar físicamente el cartelito con tu nombre que tienes colgado en la puerta de tu habitación.

const titulo = document.querySelector("h1");
// Cambiamos el texto del título
titulo.textContent = "¡JS está vivo!";

👉 Al asignarle un nuevo valor, el navegador actualiza la pantalla inmediatamente.

¿Qué es una función?

Una receta en papel 📖

Una función es un paquete de instrucciones con nombre. Escribirla no la ejecuta — es como anotar una receta: hasta que alguien decide cocinarla, es solo papel.

¿Cómo se escribe hoy?

() => { ... } es la forma corta (función flecha). Todo lo que va entre { } se ejecuta solo cuando alguien "llama" a la función por su nombre. (En frameworks como React verás onClick={fn} — misma idea, otra forma.)

📄

Definida

⚡

Ejecutada

👉 Nada pasa hasta que alguien la llama por su nombre

// 1. Definimos la receta (no se ejecuta aún)
const saludar = () => {
alert("👋 ¡Hola!");
};

// 2. La llamamos: recién ahí se "cocina"
saludar();

addEventListener: Escuchar Acciones

Reaccionar a eventos ⚡

Un Event Listener "escucha" las interacciones del usuario (como clics, teclas presionadas o scroll) y ejecuta una porción de código cuando eso ocurre.

La analogía:

Como un sensor de luz en el pasillo: detecta que pasas (el evento "click") y prende el foco (ejecuta la función que ya conoces).

boton.addEventListener("click", () => {
alert("👋 ¡Hola!");
});

💡 Enlazamos el click de un botón HTML con una alerta interactiva de JS.

classList.toggle: El Interruptor

Quitar y poner clases 🔌

El método classList.toggle() busca una clase CSS en una etiqueta. Si la tiene, la remueve; si no la tiene, la agrega.

¿Para qué sirve?:

Es la herramienta perfecta para encender/apagar estilos de manera interactiva, como el modo oscuro de nuestra Bio Card.

☀️

.light-mode

🌙

.dark-mode

🔁 classList.toggle() alterna entre ambas

// Al hacer click, prende/apaga dark-mode
btnTheme.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});

🔄 ¿Tu tarjeta ya es oscura? La clase se llama light-mode y la lógica se invierte (demos Cyber Neon / Minimal Glass).

prompt(): Preguntar al Usuario

Pedir un dato 🙋

La función prompt() abre una ventana emergente que le hace una pregunta a quien visita la página, y guarda lo que responda.

¿Cómo uno los textos?

Con el signo + puedes pegar dos textos como piezas de un rompecabezas: "Hola, " + nombre arma un solo mensaje.

// Preguntamos y guardamos la respuesta
const nombre = prompt("¿Cómo te llamas?");

// Unimos textos con el signo +
const mensaje = "¡Hola, " + nombre + "!";

💡 Lo que devuelve prompt() es siempre texto, por eso lo puedes concatenar directo con otro texto usando +.

if / else: Tomar Decisiones

Preguntar y decidir 🤔

Un condicional if ejecuta un bloque de código solo si una condición es verdadera. El bloque else se ejecuta cuando no lo es.

¿Cómo lo usamos hoy?

Con classList.contains() preguntamos si el body ya tiene la clase dark-mode, y decidimos qué ícono mostrar en el botón de tema.

¿classList.contains("dark-mode")?

if (true)

☀️

else

🌙

if (...contains("dark-mode")) { ☀️ } else { 🌙 }

Antes de Programar: HTML y CSS

1. Agrega tus botones 🔘

Tu Bio Card de la clase 3 todavía no tiene botones reales. Pega esto justo antes de tu <footer>:

<div class="actions">
<button id="btn-saludo">👋 ¡Saludar!</button>
<button id="btn-theme">🌙</button>
</div>
<p id="saludo"></p>

2. Prepara el modo oscuro 🌙

El JS de hoy va a agregar la clase dark-mode al body — pero el estilo de esa clase lo escribes tú en tu CSS:

body.dark-mode {
background: #121212;
color: #f6f5f0;
}

Repite el patrón para .card, los textos, los botones y el footer.

Práctica en Vivo: Dando Vida

script.js

⚡ Instrucción en CodePen: con tu HTML y CSS ya listos (diapositiva anterior), copia este JS en el panel correspondiente para darle vida a tu tarjeta.

CodePen te está ocultando algo 👀

3 paneles = 3 archivos 🗂️

Los tres paneles que usas en CodePen no son tres cajas mágicas: son tres archivos separados que viven en una carpeta.

¿Quién los conecta?

CodePen escribe por ti las dos líneas que unen el HTML con el CSS y con el JS. Por eso todo funciona sin que hagas nada.

Panel HTML → index.html

Panel CSS → styles.css

Panel JS → script.js

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

📌 Hoy no hace falta memorizarlas. En la clase 6, con VS Code, las vas a escribir tú.

Demos y Variantes de Referencia

Haz clic en cualquier demo para ver el JS resuelto

Con Texto (Vertical)

Solo Iconos (Horizontal)

💡 Ideas Extra para tu Bio Card

Pequeños desafíos de JS para que experimentes por tu cuenta

📈 Contador de Clics:
Cuenta cuántas veces saludan tu tarjeta usando variables (`let`).

⏰ Reloj del Sistema:
Muestra la hora real en tu tarjeta y actualízala por segundo.

🎨 Color Random:
Cambia el fondo de la pantalla aleatoriamente usando `Math.random()`.

👁️ Esconder Biografía:
Agrega un botón para mostrar u ocultar la sección de tu bio.

⚔️

Desafío Final

Dale energía y sensores de movimiento a tu propia tarjeta en CodePen.

Botones con btn-saludo / btn-theme + párrafo saludo.

Reglas CSS de .dark-mode.

prompt + textContent + classList.toggle + if/else.

¡Compártelo! Usa Share de CodePen.