📄 The <script> Tag
✨ El elemento HTML <script> es fundamental para insertar o referenciar código JavaScript en tus documentos web. Veamos cómo funciona con un ejemplo sencillo. 🌐
Ejemplo Visual: Cambiar texto al hacer click
Este ejemplo muestra cómo puedes ejecutar código JavaScript directamente dentro de las etiquetas <script> para cambiar el contenido de un elemento HTML cuando haces clic en un botón.
Haz click en el botón para ver el efecto
<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-bottom: 10px;">
<p id="mensajeClick">Haz click en el botón para ver el efecto</p>
<button class="btn btn-primary mt-2" onclick="cambiarTexto()">Haz Click</button>
</div>
<script>
function cambiarTexto() {
document.getElementById("mensajeClick").textContent = "Esta es la frase después de hacer click en el botón";
}
</script>
📌 En este ejemplo, al hacer clic en el botón, se ejecuta la función cambiarTexto(), que modifica el contenido del elemento con ID mensajeClick usando textContent.
¿Y si queremos usar un archivo externo? Podemos usar el atributo src así:
<script src="miarchivo.js"></script>
Atributos comunes del tag <script>:
src: Especifica la URL del script externo.type: (opcional) Tipo MIME, por defecto estext/javascript.async: Ejecuta el script de forma asíncrona.defer: Ejecuta el script cuando el HTML ya está completamente analizado.
🚀 En resumen: El tag <script> es esencial para dar vida a las páginas web, permitiendo añadir lógica dinámica, interactividad y mucho más.
⚙️ JavaScript Functions and Events
🧠 En JavaScript, las **funciones** son bloques de código reutilizables diseñados para realizar una tarea específica. Piensa en ellas como mini-programas dentro de tu programa principal. Puedes definir una función una vez y luego llamarla (ejecutarla) cuantas veces necesites, potencialmente con diferentes datos cada vez. Esto ayuda a organizar tu código, hacerlo más legible y evitar la repetición.
Características importantes de las funciones:
- **Definición:** Se definen utilizando la palabra clave
function, seguida de un nombre (opcional si es una función anónima), paréntesis que pueden contener parámetros (entradas), y un bloque de código entre llaves{}que contiene las instrucciones a ejecutar. - **Llamada o Invocación:** Para ejecutar el código dentro de una función, necesitas "llamarla" o "invocarla" utilizando su nombre seguido de paréntesis
(). - **Parámetros y Argumentos:** Las funciones pueden recibir valores a través de parámetros definidos en su declaración. Cuando llamas a la función, los valores que pasas se conocen como argumentos.
- **Retorno de Valores:** Las funciones pueden devolver un valor utilizando la palabra clave
return. Este valor puede ser utilizado en la parte del código donde se llamó a la función.
⚡️ Por otro lado, los **eventos** son acciones o sucesos que ocurren en el navegador web, a menudo como resultado de la interacción del usuario con la página. Ejemplos comunes de eventos incluyen hacer clic en un botón, mover el ratón sobre un elemento, cargar una página, enviar un formulario, o incluso errores que puedan ocurrir.
Características importantes de los eventos:
- **Ocurrencia:** Los eventos suceden de forma asíncrona, lo que significa que no siguen un flujo lineal de ejecución como el resto del código. Ocurren cuando el usuario o el navegador realiza una acción.
- **Objetivos:** Los eventos están asociados a elementos específicos del DOM (Document Object Model). Por ejemplo, un evento de clic ocurre en el elemento que fue clickeado.
- **Listeners o Manejadores:** Para reaccionar a un evento, necesitas adjuntar un "listener" o "manejador de eventos" a un elemento. Este listener es una función que se ejecutará cuando el evento específico ocurra en ese elemento.
- **Tipos de Eventos:** Existen muchos tipos de eventos diferentes, como
click,mouseover,mouseout,keydown,keyup,submit,load,error, y muchos más.
🤝 Las funciones y los eventos trabajan juntos para crear páginas web interactivas. Defines funciones para realizar acciones específicas, y luego utilizas eventos para determinar cuándo y cómo se deben ejecutar esas funciones en respuesta a las interacciones del usuario o a otros sucesos del navegador.
✨ Resumen: Las funciones son bloques de código reutilizables que realizan tareas, mientras que los eventos son acciones que ocurren en el navegador y a las que puedes responder con JavaScript utilizando funciones como manejadores de eventos. ¡Ambos conceptos son fundamentales para la programación web dinámica!
📍 JavaScript in <head> or <body>
🗺️ JavaScript se puede incluir en dos ubicaciones principales dentro de un documento HTML: en la sección <head> o justo antes de la etiqueta de cierre </body>.
JavaScript en la sección <head>:
Colocar scripts en el <head> significa que se cargarán y ejecutarán antes de que se renderice el contenido visible de la página. Esto puede ser útil para scripts que necesitan ejecutarse temprano, como bibliotecas o funciones de utilidad.
JavaScript justo antes de </body>:
La práctica recomendada generalmente es colocar los tags <script> justo antes de la etiqueta de cierre </body>. Esto asegura que todo el HTML de la página (incluidos todos los elementos del DOM) se haya cargado y esté disponible antes de que se ejecute el JavaScript. Esto evita errores que podrían ocurrir si tu script intenta manipular elementos que aún no se han cargado.
🔑 En resumen: Aunque puedes colocar JavaScript en el <head>, generalmente es mejor práctica colocarlo justo antes de </body> para asegurar que el DOM esté completamente cargado antes de que tu script intente interactuar con él, mejorando así el rendimiento y evitando errores.
🧠 JavaScript in <head>
Colocar JavaScript en la sección <head> permite que el script se cargue y se ejecute **antes** de que el navegador comience a renderizar el contenido visible de la página (el <body>).
¿Cómo incluir JavaScript en el <head>?
Simplemente coloca tus etiquetas <script> dentro de la sección <head> de tu documento HTML.
Ejemplo de 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 en el <head></title>
<script>
function saludar() {
alert("¡Hola desde el <head>!");
}
</script>
</head>
<body>
<button onclick="saludar()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Saludar</button>
</body>
</html>
Explicación del ejemplo:
- Hemos colocado la etiqueta
<script>dentro de la sección<head>. - Dentro de este script, hemos definido una función llamada
saludar()que muestra una alerta. - En el
<body>, tenemos un botón que, al hacer clic (eventoonclick), llama a la funciónsaludar()definida en el<head>.
Consideraciones al colocar scripts en el <head>:
Debido a que los scripts en el <head> se ejecutan antes de que se cargue el contenido del <body>, si tu script intenta manipular elementos del DOM que aún no existen, puede generar errores. Para evitar esto, es común:
- Utilizar el evento
DOMContentLoadedpara asegurar que el script se ejecute solo después de que el DOM esté completamente cargado. - Colocar la lógica que manipula el DOM en funciones que se llaman en respuesta a eventos iniciados por el usuario (como el clic de un botón, como en el ejemplo).
🔑 En resumen: Puedes incluir JavaScript en la sección <head>, lo que permite que se cargue temprano. Sin embargo, debes tener cuidado al manipular el DOM, ya que los elementos del <body> aún no estarán disponibles en el momento de la ejecución inicial del script. Usar eventos o esperar el DOMContentLoaded son estrategias clave para manejar esto.
⬇️ JavaScript in <body>
✅ Colocar JavaScript en la sección <body> asegura que el contenido de la página (HTML) se cargue y se renderice **primero**, lo que generalmente mejora la percepción de la velocidad de carga por parte del usuario.
¿Cómo incluir JavaScript en el <body>?
La convención más común y recomendada es colocar las etiquetas <script> justo **antes** de la etiqueta de cierre </body>.
Ejemplo de 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 en el <body></title>
</head>
<body>
<h1>¡Bienvenido a mi página!</h1>
<p id="mensajeBody">Este es el mensaje inicial.</p>
<script>
document.getElementById("mensajeBody").textContent = "¡Mensaje cambiado por JavaScript!";
</script>
</body>
</html>
Explicación del ejemplo:
- Hemos colocado la etiqueta
<script>justo antes de la etiqueta de cierre</body>. - Cuando el navegador llega a esta etiqueta
<script>, el DOM de la página (incluyendo el<h1>y el<p>con el id "mensajeBody") ya ha sido completamente cargado y está disponible. - El script entonces puede acceder al elemento con el id "mensajeBody" y modificar su contenido de texto. Este cambio será visible inmediatamente después de que el script se ejecute.
Ventajas de colocar scripts al final del <body>:
- Mejora del rendimiento percibido: El contenido visible de la página se carga primero, lo que hace que el usuario sienta que la página carga más rápido.
- Evita errores de manipulación del DOM: Tu script puede acceder y manipular todos los elementos del DOM sin tener que preocuparte por si ya se han cargado o no.
🔑 En resumen: Colocar los scripts justo antes de la etiqueta de cierre </body> es la práctica recomendada para la mayoría de los casos. Asegura una mejor experiencia de usuario al cargar el contenido primero y evita problemas al interactuar con los elementos del DOM.
🔗 External JavaScript
El uso de **JavaScript externo** consiste en cargar scripts desde archivos con la extensión .js. Esta práctica permite organizar mejor el código, separando la estructura HTML del comportamiento JavaScript, lo que facilita el mantenimiento y la reutilización del código en múltiples páginas.
¿Cómo enlazar un archivo JavaScript externo?
Para enlazar un archivo JavaScript externo a tu documento HTML, utilizas el atributo src dentro de la etiqueta <script>. La etiqueta <script> para un archivo externo no debe contener código JavaScript directamente entre sus etiquetas de apertura y cierre.
Ejemplo de código HTML:
<!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>
</head>
<body>
<h1>¡Bienvenido!</h1>
<button id="miBoton" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Haz clic aquí</button>
<script src="script.js"></script>
</body>
</html>
En este ejemplo, la línea <script src="script.js"></script> indica al navegador que debe cargar y ejecutar el archivo llamado script.js que se encuentra en la misma ubicación que el archivo HTML (o en la ruta especificada en el src).
Ejemplo de contenido del archivo script.js:
document.addEventListener('DOMContentLoaded', function() {
const miBoton = document.getElementById('miBoton');
if (miBoton) {
miBoton.addEventListener('click', function() {
alert('¡Has hecho clic desde un archivo externo!');
});
}
});
Este archivo script.js contiene el código JavaScript que se ejecutará cuando la página se cargue. En este caso, añade un event listener al botón con el id "miBoton" para mostrar una alerta al hacer clic.
Ventajas de usar archivos JavaScript externos:
- Organización: Separa el HTML del JavaScript, haciendo el código más limpio y fácil de entender.
- Reutilización: El mismo archivo
.jspuede ser enlazado a múltiples páginas web, evitando la duplicación de código. - Mantenimiento: Las modificaciones al código JavaScript solo necesitan hacerse en un lugar, lo que simplifica el mantenimiento.
- Caché del navegador: Los archivos externos pueden ser cacheados por el navegador, lo que puede mejorar la velocidad de carga en visitas posteriores a la misma página o a otras páginas que utilicen el mismo archivo.
🔑 En resumen: Utilizar archivos JavaScript externos es una práctica fundamental para construir sitios web bien estructurados y mantenibles. Se enlazan mediante el atributo src en la etiqueta <script> y ofrecen numerosas ventajas en términos de organización, reutilización y rendimiento.
👍 External JavaScript Advantages
🚀 Usar JavaScript externo tiene varias **ventajas significativas**, que contribuyen a un mejor desarrollo y rendimiento de las aplicaciones web:
-
Organización y Mantenimiento Limpio 🧹: Al separar el código JavaScript en archivos
.jsexternos, tu HTML se mantiene más limpio y enfocado en la estructura y el contenido. Esto facilita la lectura y el mantenimiento de ambos tipos de archivos por separado. - Reutilización de Código ♻️: Los archivos JavaScript externos pueden ser enlazados a múltiples páginas de tu sitio web. Esto permite reutilizar el mismo código en diferentes lugares, lo que ahorra tiempo de desarrollo y asegura la consistencia del comportamiento en todo el sitio.
-
Caché del Navegador 💾: Los navegadores pueden almacenar en caché los archivos JavaScript externos después de la primera visita. En visitas posteriores a la misma página o a otras páginas que utilizan el mismo archivo
.js, el navegador cargará el script desde la caché en lugar de descargarlo de nuevo, lo que resulta en tiempos de carga más rápidos y un menor consumo de ancho de banda. -
Mejora del Rendimiento Percibido ⏱️: Al colocar las etiquetas
<script src="...">justo antes de la etiqueta de cierre</body>, el navegador cargará y renderizará el HTML primero, dando al usuario una impresión de carga más rápida del contenido visible. El JavaScript se cargará y ejecutará después de que el contenido principal esté en pantalla. - Colaboración Facilitada 🤝: En equipos de desarrollo, la separación de HTML, CSS y JavaScript en archivos distintos facilita la colaboración entre diferentes roles (diseñadores, desarrolladores frontend, etc.) al evitar conflictos en un mismo archivo.
🔑 En resumen: Las ventajas de usar JavaScript externo son numerosas e impactan positivamente en la organización del código, la reutilización, el rendimiento del sitio web y la facilidad de mantenimiento. Es una práctica recomendada en el desarrollo web moderno.
🔗 External References
🔑 Para hacer referencia a un archivo JavaScript externo desde tu documento HTML, se utiliza el atributo src dentro de la etiqueta <script>. Este atributo especifica la **ruta** al archivo .js que deseas incluir.
Sintaxis básica:
<script src="ruta/al/archivo.js"></script>
La ruta/al/archivo.js puede ser de diferentes tipos:
-
Ruta Relativa (misma carpeta): Si tu archivo JavaScript (por ejemplo,
script.js) está en la misma carpeta que tu archivo HTML, simplemente usas el nombre del archivo:<script src="script.js"></script> -
Ruta Relativa (subcarpeta): Si tu archivo JavaScript está en una subcarpeta (por ejemplo,
js/funciones.js), incluyes la ruta a la subcarpeta:<script src="js/funciones.js"></script> -
Ruta Relativa (carpeta superior): Para referenciar un archivo en una carpeta superior, usas
../:<script src="../utils.js"></script> -
Ruta Absoluta (mismo dominio): Puedes especificar una ruta completa dentro de tu mismo dominio:
<script src="/js/libreria.js"></script> -
Ruta Absoluta (otro dominio - CDN): También puedes referenciar archivos JavaScript alojados en otros dominios, como una CDN (Content Delivery Network):
<script src="https://cdn.example.com/mi_script.min.js"></script>
📌 Es importante asegurarse de que la ruta especificada en el atributo src sea correcta para que el navegador pueda encontrar y cargar el archivo JavaScript externo.
✨ Recuerda que la etiqueta <script> para referencias externas no debe contener código JavaScript entre sus etiquetas.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias