HTML y JavaScript: crea tu primera página web interactiva
Desarrollo web desde cero
HTML y JavaScript: tu primera web interactiva
Descubre cómo se combinan la estructura de HTML y la lógica de JavaScript para transformar una página estática en una experiencia que responde al usuario.
Una página web necesita un esqueleto y un cerebro. HTML organiza el contenido; JavaScript le permite tomar decisiones, reaccionar y cambiar.
Dos lenguajes, un equipo
¿Qué hace cada uno?
Aunque trabajan juntos en el navegador, HTML y JavaScript cumplen funciones diferentes y complementarias.
La estructura
Define títulos, párrafos, imágenes, enlaces, formularios y botones. También da significado al contenido para navegadores y lectores de pantalla.
El comportamiento
Escucha acciones del usuario, valida datos, realiza cálculos y modifica la página sin necesidad de volver a cargarla.
Manos al código
Un botón que cambia el mensaje
Este pequeño ejemplo contiene una página funcional. Al pulsar el botón, JavaScript localiza el párrafo y sustituye su texto.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera web</title>
</head>
<body>
<h1>¡Hola, web!</h1>
<p id="mensaje">Pulsa el botón.</p>
<button id="boton">Cambiar mensaje</button>
<script>
const boton = document.querySelector("#boton");
const mensaje = document.querySelector("#mensaje");
boton.addEventListener("click", () => {
mensaje.textContent = "¡JavaScript está funcionando!";
});
</script>
</body>
</html>Cómo funciona
Tres ideas fundamentales
Seleccionar
querySelector() busca un elemento del documento mediante un selector CSS.
Escuchar
addEventListener() espera un evento; en este caso, un clic sobre el botón.
Modificar
textContent actualiza el texto del párrafo de forma inmediata y segura.
Tu siguiente reto
Experimenta: ahí empieza el aprendizaje
Cambia los textos, añade un segundo botón o modifica el color de fondo al hacer clic. Cada pequeña prueba te ayudará a comprender cómo se conectan el documento HTML y la lógica de JavaScript.
Más información
Comentarios
Publicar un comentario
Hola amigos/as dejad vuestros comentarios, gracias 🙂