Ver la forma de agregar un Script en HTML, utilizando JavaScript, un lenguaje de programación utilizado en el desarrollo web.
¿Qué hace JavaScript ?
JavaScript, también abreviado como JS, es uno de los lenguajes centrales de código tecnológicos de la web, junto con HTML y CSS. Con JavaScript las páginas se muestran interactiva, gracias a las aplicaciones web.
Cuando se trabaja con archivos para la web, JavaScript debe cargarse y ejecutarse junto con el marcado HTML. Esto se puede hacer en línea dentro de un documento HTML o en un archivo separado que el navegador descarga junto con el documento HTML.
Agregar un Script en HTML
Puede agregar código JavaScript en un documento HTML empleando la etiqueta HTML <script> que envuelve el código JavaScript. La etiqueta <script> se puede colocar en la sección <head> del documento HTML o en la sección de la etiqueta <body>, dependiendo de cuándo se desea que se cargue el JavaScript.
Generalmente, el código JavaScript se inserta dentro de la etiqueta <head> para mantenerlo fuera del contenido principal de su documento HTML.
Sin embargo, si el script necesita ejecutarse en un punto determinado dentro del diseño de una página, como cuando se usa document.write para generar contenido, debe insertarse en el punto donde se va a llamar, generalmente dentro de la etiqueta <body>.
Consideremos el siguiente documento HTML en blanco con un título de navegador Hoy es el día:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoy es el día</title>
</head>
<body>
</body>
</html>En este momento, este archivo solo contiene marcado HTML. Digamos que nos gustaría agregar el siguiente código JavaScript al documento:
let d = new Date();
alert("Hoy es el día " + d);Esto permitirá que la página web muestre una alerta con la fecha actual, independientemente de cuándo el usuario cargue el sitio.
Para lograr esto, agregaremos una etiqueta <script> </script>, junto con el código JavaScript escrito en el archivo HTML.
Para empezar, agregaremos el código JavaScript entre las etiquetas <head> </head>, indicando al navegador que ejecute el script JavaScript antes de cargar el resto de la página. Podemos agregar JavaScript debajo de las etiquetas <title> </title>, por ejemplo, como se muestra a continuación:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoy es el día</title>
<script>
let d = new Date();
alert("Hoy es el día " + d);
</script>
</head>
<body>
</body>
</html>Una vez que se cargue la página web, recibirá una alerta.
Puede comprobar el resultado del script en la siguiente demostración.
Las secuencias de comandos que son pequeñas o que se ejecutan solamente en una página web pueden funcionar bien dentro de un archivo HTML, pero para secuencias de comandos más grandes, o secuencias de comandos que se usarán en muchas páginas, no es una solución muy efectiva.
Crear un archivo JavaScript separado
Para acomodar secuencias de comandos más grandes o secuencias de comandos que se usarán en varias páginas, el código JavaScript generalmente se inserta en un archivo con extensión .js, de manera similar a como se insertan los recursos externos CSS.
Los beneficios de usar JavaScript separado incluyen:
- Separar el marcado HTML, y el código JavaScript, para que ambos sean más sencillos de codificar.
- Los archivos separados facilitan el mantenimiento
- Cuando los archivos de JavaScript se almacenan en caché, las páginas web se cargan más rápido
Para demostrar la forma de conectar un documento JavaScript en un documento HTML, crearemos un pequeño proyecto web. El archivo se llamará script.js y estará dentro del directorio (o carpeta), js/. El archivo style.css estará dentro del directorio (o carpeta) css/. Por último añadiremos el archivo principal index.html dentro del directorio principal (o carpeta) proyecto/
proyecto/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.htmlPara llamar al archivo JavaScript escribiremos el siguiente código dentro de las etiquetas <body> </body>
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoy es el día</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>En este artículo han aprendido a incorporar JavaScript en sus archivos web, tanto en línea en un documento HTML como en un archivo con extensión .js separado.
Pueden ver otro ejemplo de JavaScript aquí.