Hello World cobra vida: Introducción a JavaScript
En las lecciones anteriores creamos una página simple con la frase "Hello World!" y la mejoramos utilizando CSS. ¡Ahora es momento de agregar un poco de interactividad con JavaScript! En esta lección aprenderemos a cambiar el fondo de la página utilizando un botón. Vamos a ver, paso a paso, cómo lograrlo.
1. HTML: Estructura de la página
Comenzaremos creando la estructura de la página, que incluirá un título y un botón para cambiar el fondo. Así es como se verá nuestro código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="animated-title">Hello World!</h1>
<button id="changeColorButton">Change background color</button>
<script src="script.js"></script>
</body>
</html>Aquí:
- Hemos agregado un botón con ID `changeColorButton`, el cual cambiará el fondo de la página.
- El título h1 contiene la frase "Hello World!" y tiene una clase para animación.
2. CSS: Estilización de la página
Ahora agreguemos estilos a la página para que se vea bonita. En esta sección crearemos un fondo gradiente, estilizaremos el título y el botón, y también añadiremos animación al texto y efecto de clic al botón.
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
font-family: 'Arial', sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
h1 {
font-size: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: pulse 2s infinite;
}
button {
background-color: #5d439e;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 20px;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s ease;
}
button:hover {
background-color: #4a3380;
transform: translateY(-2px);
}
button:active {
background-color: #3e8e41;
transform: translateY(2px);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}Acá:
- Fondo con degradado: Utilizamos un degradado lineal para crear una transición suave entre colores, desde rosa hasta naranja.
- Animación para el título: Agregamos una animación de "pulsación" para que el título luzca dinámico y llame la atención.
- Botón: Hicimos que el botón sea atractivo con un efecto al pasar el cursor y al hacer clic.
3. JavaScript: Añadiendo interactividad
Ahora es momento de añadir JavaScript. Vamos a utilizar el botón para cambiar el fondo de la página. Cada vez que el usuario presione el botón, el fondo cambiará de color a un degradado aleatorio.
document.getElementById("changeColorButton").addEventListener("click", function() {
document.body.style.background = `linear-gradient(45deg, #${Math.floor(Math.random()*16777215).toString(16)}, #${Math.floor(Math.random()*16777215).toString(16)})`;
});En este código:
- Estamos adjuntando un manejador de eventos al botón con ID changeColorButton.
- Cada vez que se haga clic en el botón, el fondo de la página cambiará su color a un gradiente aleatorio.
Resultado
Ahora su página no solo se ve hermosa, sino que también es interactiva. El título "¡Hola, mundo!" pulsa, y cada vez que se hace clic en el botón, el fondo de la página cambiará a un gradiente aleatorio.
Conclusión
¡Felicitaciones! Acaba de agregar interactividad a su proyecto con JavaScript. En las próximas lecciones continuaremos trabajando con JavaScript para crear páginas web aún más interesantes y dinámicas.
Únase a nosotros en la próxima lección, donde exploraremos el trabajo con formularios y cómo procesar los datos del usuario con JavaScript.
🚀 ¡No olvide practicar y experimentar con el código!