⚡ Nivel 11 - JavaScript Básico

📖 Introducción a JavaScript

⚡ ¿Qué es JavaScript?

JavaScript es el lenguaje de programación que hace que las páginas web sean interactivas. Con JS puedes: responder a clics, cambiar contenido, validar formularios, crear juegos y mucho más.

💡 HTML + CSS + JS

HTML = Estructura (esqueleto)

CSS = Estilo (ropa y maquillaje)

JavaScript = Comportamiento (movimiento y vida)

🧱 Conceptos básicos:

📦

Variables
let, const

🔢

Tipos de datos
string, number

⚙️

Funciones
function()

🎯

Eventos
onclick, etc.

📦 Variables (guardar datos):

// Crear variables
let nombre = "María";
let edad = 12;
const PI = 3.14159;

// Mostrar en consola
console.log(nombre);
console.log("Tengo " + edad + " años");

⚙️ Funciones (acciones):

// Crear una función
function saludar(nombre) {
    alert("¡Hola, " + nombre + "!");
}

// Llamar la función
saludar("Carlos");

🎯 Seleccionar elementos:

// Obtener elemento por ID
let titulo = document.getElementById("miTitulo");

// Cambiar contenido
titulo.textContent = "¡Nuevo título!";

// Cambiar estilo
titulo.style.color = "red";

💻 Editor JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primer JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 20px;
        }
        
        h1 {
            color: #92400e;
            transition: all 0.3s;
        }
        
        .contador {
            font-size: 4rem;
            font-weight: bold;
            color: #d97706;
            background: white;
            padding: 30px 50px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .botones {
            display: flex;
            gap: 15px;
        }
        
        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s;
        }
        
        button:hover { transform: scale(1.1); }
        
        .btn-sumar { background: #22c55e; color: white; }
        .btn-restar { background: #ef4444; color: white; }
        .btn-reset { background: #6366f1; color: white; }
        
        .mensaje {
            padding: 15px 30px;
            background: white;
            border-radius: 10px;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .input-nombre {
            padding: 15px;
            font-size: 1rem;
            border: 3px solid #d97706;
            border-radius: 10px;
            width: 250px;
        }
    </style>
</head>
<body>
    <h1 id="titulo">⚡ Mi Primer JavaScript</h1>
    
    <div class="contador" id="contador">0</div>
    
    <div class="botones">
        <button class="btn-sumar" onclick="sumar()">➕ Sumar</button>
        <button class="btn-restar" onclick="restar()">➖ Restar</button>
        <button class="btn-reset" onclick="resetear()">🔄 Reset</button>
    </div>
    
    <input type="text" class="input-nombre" id="nombreInput" placeholder="Escribe tu nombre...">
    <button onclick="saludar()">👋 Saludar</button>
    
    <div class="mensaje" id="mensaje">
        ¡Haz clic en los botones!
    </div>

👁️ Vista Previa

JavaScript - ¡Dale vida a tu web!

⚡ ¿Qué es JavaScript?

💡 HTML + CSS + JS

🧱 Conceptos básicos:

📦 Variables (guardar datos):

⚙️ Funciones (acciones):

🎯 Seleccionar elementos:

📝 Escribe código JavaScript:

📦 Variables

🔢 Matemáticas

❓ Condición

🔄 Bucle

1. ¿Qué palabra clave se usa para crear una variable?

2. ¿Cómo mostramos algo en la consola?

3. ¿Cómo obtenemos un elemento por su ID?