¡Bienvenido a la Guía de JAVASCRIPT!

JavaScript es un lenguaje de programación que permite crear contenido dinámico en las páginas web. 🌐 Con JavaScript, puedes hacer que tu sitio web sea interactivo, responder a eventos del usuario, manipular el DOM, y mucho más. 🚀 ¡Es una habilidad esencial para cualquier desarrollador web! 💻

Introducción a JavaScript

JavaScript es un lenguaje de programación que se utiliza principalmente para crear interactividad en las páginas web. Con JavaScript, puedes manipular el DOM, manejar eventos, hacer solicitudes HTTP, y mucho más. Aquí tienes un ejemplo básico:

Ejemplo de JavaScript

// Hola Mundo en JavaScript
console.log("¡Hola, Mundo!");

Variables y Tipos de Datos

En JavaScript, puedes declarar variables usando let, const o var. Los tipos de datos incluyen números, cadenas, booleanos, objetos, y más.

Ejemplo de Variables

let nombre = "Juan";
const edad = 25;
var esEstudiante = true;

console.log(nombre); // Juan
console.log(edad); // 25
console.log(esEstudiante); // true

Funciones en JavaScript

Las funciones son bloques de código que puedes reutilizar. Puedes definir funciones con la palabra clave function o usando arrow functions.

Ejemplo de Funciones

// Función tradicional
function saludar(nombre) {
  return "Hola, " + nombre;
}

// Arrow function
const despedir = (nombre) => {
  return "Adiós, " + nombre;
};

console.log(saludar("Juan")); // Hola, Juan
console.log(despedir("Juan")); // Adiós, Juan

Manipulación del DOM

JavaScript te permite seleccionar y manipular elementos del DOM para cambiar el contenido, estilo, o estructura de una página web.

Ejemplo de Manipulación del DOM

// Seleccionar un elemento por su ID
const titulo = document.getElementById("titulo");

// Cambiar el contenido del elemento
titulo.textContent = "¡Nuevo Título!";

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

Eventos en JavaScript

Los eventos permiten que tu página web responda a las acciones del usuario, como clics, cambios en los campos de entrada, etc.

Ejemplo de Eventos

// Seleccionar un botón
const boton = document.getElementById("miBoton");

// Agregar un evento de clic
boton.addEventListener("click", () => {
  alert("¡Botón clickeado!");
});

AJAX y Fetch API

Con Fetch API, puedes hacer solicitudes HTTP asíncronas para obtener datos de un servidor sin recargar la página.

Ejemplo de Fetch API

// Obtener datos de una API
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ejercicios Prácticos

Aquí tienes algunos ejercicios para practicar tus habilidades en JavaScript:

Ejercicio 1: Suma de dos números

Escribe una función que tome dos números como argumentos y devuelva su suma.

Ejercicio 2: Manipulación del DOM

Crea un botón que, al hacer clic, cambie el texto de un elemento en la página.

Ejercicio 3: Fetch API

Usa Fetch API para obtener datos de una API pública y muestra los resultados en la página.