¿Qué es JavaScript?

JavaScript es el lenguaje de programación que da vida a las páginas web. Mientras que Python maneja la lógica del servidor (backend), JavaScript se ejecuta en el navegador (frontend) para crear interactividad y dinamismo en tus aplicaciones web.

⚡ Características de JavaScript

📝 Sintaxis Básica

// Variables (similar a Python)
let nombre = "Ana";
const edad = 25;
var activo = true;

// Funciones
function saludar(nombre) {
    return `¡Hola, ${nombre}!`;
}

// Función flecha (equivalente a lambda en Python)
const sumar = (a, b) => a + b;

// Arrays (como listas en Python)
let frutas = ["manzana", "banana", "naranja"];

// Objetos (como diccionarios en Python)
let persona = {
    nombre: "Luis",
    edad: 30,
    saludar: function() {
        return `Hola, soy ${this.nombre}`;
    }
};

🎯 Manipulación del DOM

El DOM (Document Object Model) permite modificar elementos HTML desde JavaScript: 

// Seleccionar elementos
const titulo = document.getElementById("mi-titulo");
const botones = document.querySelectorAll(".btn");

// Modificar contenido
titulo.textContent = "Nuevo título";
titulo.style.color = "blue";

// Agregar eventos
document.getElementById("mi-boton").addEventListener("click", function() {
    alert("¡Botón clickeado!");
});

// Crear elementos dinámicamente
const nuevoDiv = document.createElement("div");
nuevoDiv.innerHTML = "<h3>Contenido dinámico</h3>";
document.body.appendChild(nuevoDiv);

🔄 Comparación Python vs JavaScript

🐍 Python
# Listas
frutas = ["manzana", "banana"]
frutas.append("naranja")

# Diccionarios  
persona = {
    "nombre": "Ana",
    "edad": 25
}

# Bucles
for fruta in frutas:
    print(fruta)
🟨 JavaScript
// Arrays
let frutas = ["manzana", "banana"];
frutas.push("naranja");

// Objetos
let persona = {
    nombre: "Ana",
    edad: 25
};

// Bucles
frutas.forEach(fruta => {
    console.log(fruta);
});

📡 AJAX y Fetch API

JavaScript puede comunicarse con tu backend de Python usando AJAX: 

// Enviar datos a una API de Flask/Django
async function enviarDatos() {
    try {
        const respuesta = await fetch('/api/datos', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                nombre: 'Ana',
                edad: 25
            })
        });
        
        const datos = await respuesta.json();
        console.log('Respuesta del servidor:', datos);
    } catch (error) {
        console.error('Error:', error);
    }
}

🔗 Integración con Flask

# Backend Python (Flask)
from flask import Flask, jsonify, request

@app.route('/api/datos', methods=['POST'])
def procesar_datos():
    datos = request.get_json()
    nombre = datos.get('nombre')
    edad = datos.get('edad')
    
    # Procesar datos...
    resultado = {
        'mensaje': f'Hola {nombre}, tienes {edad} años',
        'status': 'success'
    }
    
    return jsonify(resultado)

💡 Ejercicio Práctico

Práctica: Calculadora Interactiva

Crea una calculadora simple que:

  • Tenga botones para números y operaciones
  • Muestre el resultado en tiempo real
  • Use JavaScript para manejar los cálculos
  • Aplique estilos CSS atractivos

🚀 Frameworks JavaScript Populares

🔧 Herramientas de Desarrollo

📚 Recursos Adicionales