Tutorial de Javascript
La etiqueta <script>
La etiqueta <script> es una etiqueta HTML utilizada para incluir código JavaScript en una página web.
La etiqueta <script> se puede incluir en el encabezado (head) o en el cuerpo (body) del documento HTML. Si se coloca en la sección del encabezado, el código JavaScript se carga antes de que se renderice el contenido de la página, lo que puede mejorar el tiempo de carga inicial. Si se coloca en el cuerpo, el código JavaScript se carga después del contenido de la página, lo que permite que el contenido se cargue primero y se pueda ver más rápidamente.
La etiqueta <script> también permite especificar el atributo "async" o "defer", que indican si el código JavaScript debe ejecutarse de forma asíncrona (sin bloquear la carga del resto de la página) o de forma diferida (al final de la carga de la página), respectivamente.
Ejemplo de uso de la etiqueta <script>:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>Funciones y eventos de JavaScript
Una función es un bloque de código que realiza una tarea específica y se puede reutilizar en distintas partes del código. En JavaScript, las funciones se definen utilizando la palabra clave function seguida de un nombre y un conjunto de paréntesis que pueden contener argumentos. El cuerpo de la función se encierra entre llaves {} y puede contener instrucciones que se ejecutan cuando se llama a la función. Las funciones pueden devolver un valor utilizando la palabra clave return.
Ejemplo de definición y uso de una función en JavaScript:
function sumar(a, b) {
return a + b;
}
var resultado = sumar(2, 3);
console.log(resultado); // muestra 5 en la consola del navegadorLos eventos, por otro lado, son acciones que ocurren en el navegador, como hacer clic en un botón o mover el mouse, y que pueden ser detectados por JavaScript para realizar acciones específicas. En JavaScript, se pueden definir manejadores de eventos que se ejecutan cuando un evento específico ocurre. Para esto, se utiliza la propiedad on del objeto que representa el elemento HTML y se le asigna una función que se ejecutará cuando se produzca el evento.
Ejemplo de definición y uso de un manejador de evento en JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<script>
function saludar() {
alert("Hola, mundo!");
}
</script>
</head>
<body>
<h1>Hola, mundo!</h1>
<button onclick="saludar()">Saludar</button>
</body>
</html>
JavaScript en <head> o <body>
JavaScript puede ser incluido en la sección <head> o en el cuerpo <body> de un documento HTML.
JavaScript en <head>
En este ejemplo, se coloca una function JavaScript en la <head> sección de una página HTML.
La función se invoca (llama) cuando se hace clic en un botón:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>JavaScript en <body>
En este ejemplo, se coloca una function JavaScript en la <body> sección de una página HTML.
La función se invoca (llama) cuando se hace clic en un botón:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>JavaScript externo
Los scripts también se pueden colocar en archivos externos:
Archivo externo: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}Los scripts externos son prácticos cuando se usa el mismo código en muchas páginas web diferentes.
Los archivos JavaScript tienen la extensión de archivo .js .
Para usar una secuencia de comandos externa, coloque el nombre del archivo de secuencia de comandos en el src atributo (fuente) de una etiqueta <script> :
<script src="myScript.js"></script>Puede colocar una referencia de secuencia de comandos externa en <head> o <body> como desee.
El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.
Ventajas de JavaScript externo
Existen varias ventajas de utilizar JavaScript externo en lugar de incluir el código JavaScript directamente en el archivo HTML:
- Separación de responsabilidades: Al separar el código JavaScript del archivo HTML, se puede mantener una separación clara entre el contenido y la funcionalidad de la página. Esto hace que el código sea más fácil de mantener y de entender, especialmente en proyectos más grandes.
- Reutilización del código: Al colocar el código JavaScript en un archivo separado, se puede reutilizar fácilmente en diferentes páginas web. Esto puede ahorrar tiempo y esfuerzo en el desarrollo, ya que no es necesario escribir el mismo código JavaScript varias veces.
- Cacheo: Si se utiliza una referencia a un archivo JavaScript externo en varias páginas, el navegador puede almacenar en caché el archivo en la primera solicitud y reutilizarlo en las siguientes solicitudes. Esto puede reducir el tiempo de carga de la página, ya que el archivo JavaScript no tiene que ser descargado cada vez que se accede a una página.
- Facilidad de mantenimiento: Al tener el código JavaScript en un archivo externo, es más fácil de actualizar y mantener. Se puede cambiar el archivo externo en un solo lugar y todas las páginas que hacen referencia a ese archivo verán los cambios.
- Eficiencia en la carga de la página: Al incluir el código JavaScript en un archivo externo, se puede reducir el tamaño del archivo HTML, lo que significa que la página se cargará más rápidamente. Esto es especialmente importante para los usuarios móviles que pueden tener conexiones más lentas.
Para agregar varios archivos de script a una página, use varias etiquetas de script:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
