En este tutorial, aprenderemos cómo agregar JavaScript a tu página web y cómo interactuar con el HTML.
1. Agregar JavaScript a tu HTML
Para agregar JavaScript a tu HTML, utilizamos la etiqueta <script>. Podemos colocarla en la sección <head> o antes del cierre de la etiqueta <body>. Aquí hay un ejemplo:
<script>
console.log('Hola, mundo!');
</script>
Este código simplemente imprime «Hola, mundo!» en la consola del navegador.
2. Interactuar con el DOM
El DOM (Document Object Model) es una representación de tu documento HTML que puedes manipular con JavaScript. Vamos a ver un ejemplo de cómo cambiar el contenido de un elemento HTML.
Primero, creamos un elemento HTML con un ID único:
<p id="mi-parrafo">Este es un párrafo.</p>
Luego, agregamos un botón que ejecutará una función JavaScript cuando se haga clic en él:
<button onclick="cambiarTexto()">Haz clic aquí</button>
Ahora, creamos la función cambiarTexto en JavaScript que cambiará el contenido del párrafo:
<script>
function cambiarTexto() {
document.getElementById('mi-parrafo').innerText = 'El texto ha cambiado!';
}
</script>
3. Eventos en JavaScript
Los eventos en JavaScript permiten que tu código responda a acciones del usuario, como hacer clic en un botón o mover el ratón. Aquí hay un ejemplo de cómo manejar un evento de clic:
<button id="mi-boton">Haz clic aquí</button>
<script>
document.getElementById('mi-boton').addEventListener('click', function() {
alert('¡Botón clicado!');
});
</script>
En este ejemplo, cuando el usuario hace clic en el botón, se muestra una alerta con el mensaje «¡Botón clicado!».
Conclusión
Este es un tutorial básico para comenzar con JavaScript en tu página web. Hemos cubierto cómo agregar JavaScript a tu HTML, interactuar con el DOM y manejar eventos. ¡Experimenta con estos ejemplos y sigue aprendiendo!
