1. La etiqueta <script>
Antes de sumergirnos en el estudio detallado de HTML, me gustaría que conocieras algo más genial: el lenguaje JavaScript.
JavaScript es un lenguaje de programación potente que se utiliza para crear páginas web dinámicas e interactivas. Permite reaccionar a las acciones del usuario, cambiar el contenido de las páginas web, interactuar con servidores y muchas otras cosas que mejoran la experiencia del usuario al interactuar con el sitio.
Ahora no vamos a estudiar JavaScript en detalle, pero a veces lo agregaré en ejemplos, así que déjame contarte cómo se integra JavaScript en un documento HTML.
La etiqueta <script> se utiliza para integrar código JavaScript en un documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducción a JavaScript</title>
</head>
<body>
<h1>¡Bienvenido a mi sitio!</h1>
<script>
// Tu código JavaScript aquí alert('¡Hola, mundo!');
</script>
</body>
</html>
En este ejemplo se utiliza la etiqueta <script> para incorporar un sencillo código JavaScript que muestra una ventana emergente con el mensaje "¡Hola, mundo!".
2. Conectar un script
A veces es mejor almacenar el código JavaScript en un archivo separado. Esto mejora la organización del código y su reutilización. Para conectar un archivo JavaScript también se utiliza la etiqueta <script>, y utilizando el atributo src puedes especificar el nombre del archivo JavaScript.
Conexión de un archivo JavaScript externo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducción a JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>¡Bienvenido a mi sitio!</h1>
</body>
</html>
Este archivo HTML le dice al navegador que conecte un archivo JavaScript llamado script.js, y puede contener el mismo código que en el ejemplo anterior:
//script.js:
// Tu código JavaScript aquí
alert('¡Hola, mundo!');
El atributo defer se utiliza para indicarle al navegador que ejecute el script después de que todo el documento HTML haya sido completamente cargado y mostrado.
3. Código Inline
¿Recuerdas cómo escribíamos estilos CSS directamente dentro del atributo style de un elemento?
<p style="color:red"> Rojo</p>
De la misma manera, puedes escribir código JavaScript.
Supongamos que queremos que un elemento cambie de color a azul al hacer clic en él. Entonces, necesitamos escribir este código:
<p style="color:red" onclick="this.style.color = 'blue';">Rojo</p>
El código JavaScript está resaltado en verde, y se ejecutará si el usuario hace clic en el elemento <p>. Simple, ¿cierto?
-
onclick: Atributo HTML que indica la función que se ejecuta al hacer clic en el elemento. this: Referencia al elemento en el que se hizo clic.-
style.color: Propiedad CSS que cambia el color del texto del elemento.
GO TO FULL VERSION