Etiquetas de Programación y Scripts
Introducción
En el desarrollo web, etiquetas como <script>, <noscript> y <template> permiten añadir dinamismo, control y flexibilidad al contenido. La etiqueta <script> facilita la incorporación de JavaScript para hacer la página interactiva; <noscript> ofrece contenido alternativo cuando JavaScript no está disponible; y <template> define fragmentos de código HTML reutilizables que no se renderizan hasta ser activados mediante scripts. Estas herramientas amplían las posibilidades del HTML, creando experiencias más ricas y adaptables.
Elemento <script>
La etiqueta <script> se utiliza para incrustar o enlazar scripts escritos normalmente en JavaScript dentro de un documento HTML. Estos scripts pueden servir para añadir interactividad, manipular el DOM, realizar validaciones, cargar datos dinámicos, entre muchas otras funciones.
Definición y Uso <script>
La etiqueta <script> se utiliza para incrustar un script del lado del cliente JavaScript.
El elemento <script> contiene sentencias de script o apunta a un archivo de script externo mediante el atributo src.
Los usos más comunes de JavaScript son la manipulación de imágenes, la validación de formularios y los cambios dinámicos de contenido.
Sintaxis Básica
Incrustar el código directamente:
<script>
console.log('Hola mundo');
</script>
Enlazar un archivo externo:
<script src="app.js"></script>
Donde app.js es el archivo que contiene el código JavaScript.
Atributos Principales
-
src: Permite especificar la URL de un archivo JavaScript externo. Si se usa src, el contenido dentro de<script>es ignorado. -
type: Indica el tipo de script. Por defecto es text/javascript, por lo que normalmente puede omitirse. -
async: Hace que el script se descargue de forma asíncrona y se ejecute tan pronto como esté listo, sin esperar a que se cargue el resto. -
defer: Hace que el script se descargue en segundo plano y se ejecute solo después de que el documento HTML haya sido completamente analizado. -
nomodule: Evita que el script se ejecute en navegadores que soportan módulos ES6 (usado para compatibilidad). -
crossorigin: Define cómo deben gestionarse las solicitudes de recursos cruzados. -
integrity: Se usa para comprobar que el script externo no ha sido modificado, mediante una firma hash. -
referrerpolicy: Controla qué información de referencia se envía cuando se solicita el script.
Diferencias entre sin atributos, async y defer
-
Sin atributos: El HTML se detiene, descarga y ejecuta el script, luego continúa. -
async: Descarga en paralelo, ejecuta inmediatamente cuando está listo (puede interrumpir el HTML). -
defer: Descarga en paralelo, espera a que termine el HTML para ejecutarse.
Ubicación en el Documento
En la Cabecera <head>
<head>
<script src="script.js"></script>
</head>
Se ejecuta antes de que se cargue el contenido del body.
Antes del Cierre de </body>
<body>
<!-- contenido HTML -->
<script src="script.js"></script>
</body>
Es más habitual ubicarla justo antes de cerrar el </body> para mejorar el rendimiento, evitando que el script bloquee el renderizado del contenido de la página.
Inline (en Línea)
<button onclick="alert('¡Hola!')">Hacer clic</button>
Consideraciones Importantes
- Seguridad:
- Nunca incluir scripts de fuentes no confiables.
- Usar el atributo
integritypara scripts de CDN. - Validar y limpiar cualquier dato que envía el usuario.
- Rendimiento:
- Colocar los scripts no críticos antes del cierre de
</body>. - Usa
asyncpara scripts independientes. - Usa
deferpara scripts que dependen del DOM. - Minificar y comprimir los archivos JavaScript.
- Colocar los scripts no críticos antes del cierre de
- Compatibilidad:
- La etiqueta
<script>es compatible con todos los navegadores. - Los atributos modernos como
asyncydeferrequieren navegadores más recientes.
- La etiqueta
Elemento <noscript>
Definición y Uso <noscript>
- La etiqueta
<noscript>define un contenido alternativo que se mostrará a los usuarios que tengan desactivados los scripts en su navegador o que tengan un navegador que no admita scripts. - El elemento
<noscript>puede utilizarse tanto en<head>como en<body>. Cuando se utiliza dentro de<head>, el elemento<noscript>sólo puede contener elementos<link>,<style>y<meta>.
Funcionamiento Básico de <noscript>
El navegador evalúa la presencia de la etiqueta <noscript> de esta manera:
- Si JavaScript está habilitado y es compatible: el contenido dentro de
<noscript>se ignora completamente, no se procesa ni se muestra. - Si JavaScript está deshabilitado o no es compatible: el contenido dentro de
<noscript>se interpreta y se muestra como parte del HTML.
Ejemplo Básico de <noscript>
<script>
// Algún script de funcionalidad
console.log('JavaScript está habilitado');
</script>
<noscript>
<p>Lo sentimos, esta página requiere JavaScript para funcionar correctamente.</p>
</noscript>
En este ejemplo:
- Si el navegador tiene JavaScript, el mensaje del
<noscript>nunca se ve. - Si el navegador no tiene JavaScript, el usuario verá el mensaje que advierte que se necesita JavaScript.
Características importantes de <noscript>
- Solo contenido HTML: Dentro de
<noscript>se puede colocar texto plano, imágenes, enlaces o cualquier otro elemento HTML que sirva de contenido alternativo. No es correcto poner scripts dentro de<noscript>ya que no se ejecutarían. - Se puede usar varias veces: Se pueden incluir varias etiquetas
<noscript>en diferentes partes del documento para dar mensajes específicos según la sección que depende de JavaScript. - Compatibilidad: Funciona correctamente en todos los navegadores modernos y también en navegadores antiguos que no soportan JavaScript.
Ubicación Recomendada de <noscript>
Aunque técnicamente puede ir en cualquier parte del documento HTML, es más habitual colocar <noscript>:
- Justo después de
<head>o al principio de<body>, para mostrar un aviso global. - Junto a scripts concretos que afectan solo a una parte del sitio.
Consideraciones de Accesibilidad
La etiqueta <noscript> es importante para la accesibilidad web porque garantiza que todos los usuarios puedan acceder al contenido básico, independientemente de sus configuraciones técnicas o limitaciones del navegador.
Limitaciones y Consideraciones
- No es una solución completa: No debe ser la única estrategia para manejar la ausencia de JavaScript.
- Detección limitada: Solo detecta si JavaScript está completamente deshabilitado, no errores en scripts específicos.
- Mantenimiento: Requiere mantener dos versiones del contenido, lo que puede complicar el desarrollo.
Elemento <template>
La etiqueta <template> en HTML es un contenedor para contenido que no se renderiza directamente cuando se carga la página. Su objetivo principal es almacenar fragmentos de HTML que se desean preparar, clonar o insertar más adelante en el DOM (Document Object Model) mediante JavaScript.
¿Qué Es <template>?
Es un elemento contenedor que permite definir contenido HTML que permanece inactivo mientras no sea llamado explícitamente.
El navegador ignora este contenido al construir la interfaz de usuario inicial: no lo muestra ni lo procesa hasta que el desarrollador decide insertarlo dinámicamente.
Características clave de <template>
- Contenido seguro: El navegador ni interpreta scripts ni ejecuta recursos que estén dentro hasta que se clonen o se inserten en el DOM.
- DocumentFragment: Internamente, el contenido del
<template>se guarda en un objeto especial llamadoDocumentFragment, que es una colección de nodos que todavía no forman parte del DOM principal.
<div class="container">
<h1>Ejemplo de Template con Botón</h1>
<p>Haz clic en el botón para agregar contenido usando la plantilla:</p>
<!-- Template - No se renderiza hasta ser usado -->
<template id="mi-plantilla">
<div class="tarjeta">
<h3>🎉 Contenido Generado</h3>
<p>Este contenido fue creado dinámicamente usando la plantilla HTML. Cada vez que presionas el botón, se
clona este template.</p>
<button onclick="this.parentElement.remove()">❌ Eliminar esta tarjeta</button>
</div>
</template>
<!-- Botones de control -->
<button id="agregar-contenido">➕ Agregar Contenido</button>
<button id="limpiar-todo" class="limpiar">🗑️ Limpiar Todo</button>
<!-- Contador -->
<div class="contador">
Tarjetas creadas: <span id="contador">0</span>
</div>
<!-- Contenedor donde se agregará el contenido clonado -->
<div id="contenedor-dinamico"></div>
</div>
<script>
let contador = 0;
// Función original convertida en función de botón
function agregarContenido() {
const plantilla = document.querySelector("#mi-plantilla");
const clon = plantilla.content.cloneNode(true);
// En lugar de agregar al body, lo agregamos a un contenedor específico
const contenedor = document.getElementById('contenedor-dinamico');
contenedor.appendChild(clon);
// Actualizar contador
contador++;
document.getElementById('contador').textContent = contador;
}
// Función para limpiar todo el contenido
function limpiarTodo() {
const contenedor = document.getElementById('contenedor-dinamico');
contenedor.innerHTML = '';
contador = 0;
document.getElementById('contador').textContent = contador;
}
// Asignar eventos a los botones
document.getElementById('agregar-contenido').addEventListener('click', agregarContenido);
document.getElementById('limpiar-todo').addEventListener('click', limpiarTodo);
// También puedes usar onclick directamente en HTML (como se muestra en el botón de agregar)
//
</script>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 24px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.tarjeta {
border: 2px solid #28a745;
border-radius: 8px;
padding: 20px;
margin: 15px 0;
background-color: #f8f9fa;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tarjeta h3 {
color: #28a745;
margin-top: 0;
}
.tarjeta p {
color: #666;
line-height: 1.5;
}
.tarjeta button {
background-color: #28a745;
font-size: 14px;
padding: 8px 16px;
}
.tarjeta button:hover {
background-color: #218838;
}
.contador {
background-color: #e9ecef;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
text-align: center;
font-weight: bold;
}
.limpiar {
background-color: #dc3545;
}
.limpiar:hover {
background-color: #c82333;
}
Explicación del código:
- Contenido inerte (No se renderiza directamente): Todo lo que esté dentro de
<template>no aparece en la página hasta que se use.<template id="mi-plantilla"> <div class="tarjeta"> <h3>Contenido Generado</h3> <p>Este contenido fue creado dinámicamente...</p> </div> </template> - Propiedad
content: Para acceder al contenido de la plantila<template>se usa la propiedadcontent:const plantilla = document.querySelector("#mi-plantilla"); const clon = plantilla.content.cloneNode(true); - Clonación con
cloneNode(true):-
cloneNode(true)crea una copia completa del contenido del template. - El parámetro
trueindica que debe clonar todos los elementos hijos. - Cada clonación es independiente de las demás.
-
Flujo de Funcionamiento del Código
- Definición: El template está definido pero invisible.
- Activación: Al hacer clic en "Agregar Contenido" se activa.
- Clonación:
plantilla.content.cloneNode(true)crea una copia. - Inserción:
contenedor.appendChild(clon)la añade al DOM. - Resultado: Aparece una nueva tarjeta en la página.
Ventajas del <template>:
- Rendimiento: El contenido no se procesa hasta que lo necesitas.
- Reutilización: Puedes crear múltiples instancias del mismo contenido.
- Limpieza: Mantiene el HTML organizado y separado de la lógica.
- Flexibilidad: Puedes modificar el contenido clonado antes de insertarlo.