Introducción a Javascript
- AGR
- Web , Programación
- 15 Feb, 2025
Código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Introducción a JavaScript</title>
<style>
/* Estilos básicos para la página */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>¡Bienvenidos a JavaScript!</h1>
<p>Haz clic en el botón para cambiar el color de fondo de la página.</p>
<button id="changeColorBtn">Cambiar Color</button>
<script>
// 1. Seleccionamos el botón usando su ID
const button = document.getElementById('changeColorBtn');
// 2. Función que genera un color aleatorio en formato hexadecimal
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
// El bucle se ejecuta 6 veces para formar un código hexadecimal (# + 6 dígitos)
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 3. Agregamos un "escuchador de eventos" para que cuando se haga clic en el botón se ejecute una función
button.addEventListener('click', function() {
// Genera un color aleatorio
const newColor = getRandomColor();
// Cambia el color de fondo de la página
document.body.style.backgroundColor = newColor;
// Muestra en la consola el nuevo color para ver el resultado
console.log('El nuevo color de fondo es: ' + newColor);
});
</script>
</body>
</html>
Explicación Paso a Paso
Estructura HTML
<!DOCTYPE html>: Indica al navegador que el documento es HTML5.
<html lang="es"> y <head>: Define el idioma del documento y la sección de metadatos.
<meta charset="UTF-8">: Asegura que los caracteres se muestren correctamente.
<title>: Establece el título de la página, que se muestra en la pestaña del navegador.
<style>: Contiene estilos CSS básicos para mejorar la apariencia de la página (tipografía, márgenes y estilos del botón).
Contenido del <body>
<h1> y <p>: Se muestran un título y un párrafo con instrucciones.
<button id="changeColorBtn">: Un botón que el usuario puede presionar para cambiar el color de fondo. Se le asigna el atributo id para poder referenciarlo en JavaScript.
JavaScript (dentro de <script>)
Selección del elemento:
const button = document.getElementById('changeColorBtn');
Se obtiene el elemento del botón por su id para poder trabajar con él.
Función getRandomColor
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
Esta función crea un código de color hexadecimal de forma aleatoria:
- Se define una cadena letters que contiene todos los dígitos y letras posibles en un color hexadecimal.
- Se inicia la variable color con el símbolo #.
- El bucle for se ejecuta 6 veces para agregar 6 caracteres aleatorios a la cadena.
- La función retorna el color generado.
Evento click del botón:
button.addEventListener('click', function() {
const newColor = getRandomColor();
document.body.style.backgroundColor = newColor;
console.log('El nuevo color de fondo es: ' + newColor);
});
Se añade un evento para detectar cuando el usuario hace clic en el botón:
- Se llama a la función getRandomColor para generar un nuevo color.
- Se asigna este nuevo color a la propiedad backgroundColor del elemento body, cambiando así el color de fondo.
- Se imprime en la consola el nuevo color, lo que ayuda a ver el resultado en la herramienta de desarrollo del navegador.
