馃搫 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