JavaScript es el lenguaje que permite que tus páginas reaccionen a las acciones del usuario. En esta guía aprenderás desde los fundamentos hasta técnicas prácticas que puedes aplicar inmediatamente en tus proyectos.
Fundamentos de JavaScript: variables, funciones y eventos
JavaScript es el lenguaje que permite que tus páginas reaccionen a las acciones del usuario. Aquí los conceptos clave:
- Variables: almacenan datos (ej:
let nombre = "Juan";) - Funciones: bloques de código reutilizables (ej:
function saludar() { ... }) - Eventos: acciones del usuario (ej: clic, submit, tecla)
Usa let y const en lugar de var.
Son más predecibles y te ayudan a evitar errores comunes de scope.
Manipulación del DOM: cambia tu página en tiempo real
El DOM (Document Object Model) es la representación de tu página en JavaScript. Puedes modificarla así:
// Cambiar el contenido de un elemento
document.getElementById("titulo").innerHTML = "¡Nuevo título!";
// Cambiar el estilo
document.getElementById("boton").style.backgroundColor = "blue";
// Añadir evento click
document.getElementById("boton").addEventListener("click", function() {
alert("¡Botón presionado!");
});Validación de formularios con JavaScript
Evita envíos incorrectos con validación en el cliente:
function validarFormulario() {
let email = document.getElementById("email").value;
if (email.trim() === "") {
alert("El correo es obligatorio");
return false;
}
// Validar formato de email
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Ingresa un correo válido");
return false;
}
return true;
}Y en el formulario:
<form onsubmit="return validarFormulario()">
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
</form>La validación en JavaScript es para experiencia de usuario, no para seguridad. Siempre valida también en el backend (PHP, Node.js, etc.) para proteger tu aplicación.
Introducción a jQuery: menos código, más resultado
jQuery simplifica tareas comunes de JavaScript. Primero inclúyelo en tu HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>🔹 Esperar a que la página cargue
$(document).ready(function() {
// Tu código aquí se ejecuta cuando el DOM está listo
console.log("Página cargada");
});🔹 Seleccionar y modificar elementos
// Cambiar contenido
$("#titulo").html("¡Listo!");
// Añadir clase CSS
$("#boton").addClass("activo");
// Ocultar elemento
$(".mensaje").hide();🔹 Manejar eventos
$("#formulario").submit(function(e) {
e.preventDefault(); // Evitar envío tradicional
console.log("Formulario enviado");
});Uso de SweetAlert para alertas interactivas
Reemplaza el alert() tradicional con alertas modernas y personalizables:
swal({
title: "¡Éxito!",
text: "Tu formulario se envió correctamente",
icon: "success",
button: "Entendido"
});Resultado: Una alerta moderna con icono, animación y botones personalizados.
Primero incluye SweetAlert en tu HTML:
<!-- En el <head> o antes de cerrar </body> -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>Depuración con console.log()
Usa console.log() para ver valores en la consola del navegador (presiona F12):
// Ver valor de una variable
console.log("Valor de email:", email);
// Ver objeto completo
console.log("Datos del usuario:", usuario);
// Agrupar logs relacionados
console.group("Validación de formulario");
console.log("Email:", email);
console.log("Contraseña:", password);
console.groupEnd();
Usa console.table() para ver arrays y objetos de forma más legible,
y debugger; para pausar la ejecución en un punto específico.
📚 ¿Quieres la versión completa del libro?
Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye ejercicios resueltos, códigos listos y explicaciones profundas.
Comprar en Amazon →¿Tienes dudas sobre JavaScript, jQuery o SweetAlert? ¡Déjalas en los comentarios! 👇