Horario de atención: De Lunes a Sábado de 10:00 a.m. a 6:00 p.m. ✨🚀
Las etiquetas de guión en HTML son utilizadas para incluir scripts (generalmente de JavaScript) en una página web. Esto permite agregar interactividad, realizar validaciones, manipular elementos del DOM y más. La etiqueta principal es <script>. A continuación, te explico en detalle su uso y variantes con ejemplos:
Etiqueta <script>
La etiqueta <script> permite incrustar o vincular código JavaScript en un documento HTML. Puede colocarse tanto en el <head> como al final del <body>.
Incluir JavaScript interno
El código JavaScript se escribe directamente dentro de la etiqueta <script>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Interno</title>
</head>
<body data-rsssl=1>
<h1>¡Hola, mundo!</h1>
<button onclick="saludar()">Haz clic aquí</button>
<script>
function saludar() {
alert("¡Hola desde JavaScript!");
}
</script>
</body>
</html>
Incluir JavaScript externo
Permite vincular un archivo .js externo, facilitando la organización del código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Externo</title>
<script src="script.js"></script>
</head>
<body data-rsssl=1>
<h1>JavaScript desde archivo externo</h1>
<button onclick="mostrarMensaje()">Haz clic aquí</button>
</body>
</html>
Archivo script.js:
function mostrarMensaje() {
alert("Este mensaje viene desde un archivo externo.");
}
Cargar scripts de forma diferida (defer)
La propiedad defer asegura que el script se ejecute después de que todo el contenido HTML haya sido cargado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script con Defer</title>
<script src="script.js" defer></script>
</head>
<body data-rsssl=1>
<h1>Ejemplo con defer</h1>
<p>El script no interrumpe la carga del contenido HTML.</p>
</body>
</html>
Cargar scripts de forma asíncrona (async)
La propiedad async hace que el script se descargue y se ejecute de manera asíncrona, es decir, en paralelo con la carga del contenido HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script con Async</title>
<script src="script.js" async></script>
</head>
<body data-rsssl=1>
<h1>Ejemplo con async</h1>
<p>El script puede ejecutarse antes de que todo el HTML se cargue.</p>
</body>
</html>
Especificar el tipo de script
Aunque no es obligatorio en HTML5, puedes usar el atributo type para indicar que el script es JavaScript.
<script type="text/javascript">
console.log("Este es un script de JavaScript.");
</script>
Deshabilitar un script temporalmente
Puedes utilizar el atributo type="text/plain" para deshabilitar un script.
<script type="text/plain">
console.log("Este script no se ejecutará.");
</script>
Scripts que manipulan elementos del DOM
Es recomendable colocar los scripts al final del <body> o usar defer para evitar errores al manipular elementos que aún no han sido cargados.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulación del DOM</title>
</head>
<body data-rsssl=1>
<h1 id="titulo">Texto original</h1>
<button id="boton">Cambiar texto</button>
<script>
const boton = document.getElementById('boton');
boton.addEventListener('click', () => {
document.getElementById('titulo').innerText = "Texto cambiado con JavaScript";
});
</script>
</body>
</html>
Ejemplo avanzado: Usando APIs del navegador
Este ejemplo utiliza console.log para registrar información en la consola y fetch para interactuar con una API.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Fetch API</title>
</head>
<body data-rsssl=1>
<h1>Datos de una API</h1>
<div id="resultado"></div>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
document.getElementById('resultado').innerText = `Título: ${data.title}`;
})
.catch(error => console.error('Error al cargar los datos:', error));
</script>
</body>
</html>
La etiqueta <script> es una de las herramientas más poderosas en HTML, ya que habilita la interacción entre el usuario y la página web mediante JavaScript. Ya sea que estés incluyendo código interno, externo o controlando el momento de su ejecución con atributos como async o defer, dominar su uso te permitirá construir experiencias dinámicas y atractivas. ¡Con práctica, puedes aprovechar todo su potencial!
