Resumen: en este tutorial aprenderas cómo incrustar código JavaScript en una página HTML.
Para insertar código JavaScript en una página HTML, utiliza el elemento <script>. Hay dos formas de usar el elemento <script> en una página HTML:
- Incrustar el código JavaScript directamente en la página HTML.
- Hacer referencia a un archivo de código JavaScript externo.
Agregar código JavaScript en una página HTML
No se recomienda colocar el código JavaScript dentro del elemento <script> directamente en el HTML y debe usarse solo como prueba de concepto o con fines de prueba.
El código JavaScript en el elemento <script> se interpreta de arriba abajo, es decir, se interpreta linealmente. Por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example – Estrada Web Group</title>
<script>
alert('Hello, World Estrada Web Group!');
</script>
</head>
<body>
</body>
</html>
En el elemento <script>, usamos la función alert() para mostrar el mensaje: Hello, World Estrada Web Group!.
¿Cómo enlazar un archivo JS en HTML?
Incluir un archivo JavaScript externo, para incluir código JavaScript desde un archivo externo debes hacer lo siguiente:
- Primero, debes crear un archivo cuya extensión sea
.js, por ejemplo,app.js, y colocarlo en la subcarpetajs. Te en cuenta que no es necesario colocar el archivo JavaScript en la carpetajs; sin embargo, es una buena práctica. - Luego, usa la URL del archivo JavasScript en el atributo
srcdel elemento<script>.
A continuación se muestra el contenido del archivo app.js:
alert('Hello, World Estrada Web Group!');
A continuación, se muestra el archivo helloworld.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Hello World Example – Estrada Web Group </title>
<script src="js/app.js"></script>
</head>
<body>
</body>
</html>
Si abres el archivo helloworld.html en el navegador web, verás una alerta que muestra el mensaje Hello, World Estrada Web Group!.
Ten en cuenta que puedes cargar un archivo JavaScript desde un servidor remoto. Esto te permite distribuir el JavaScript desde varios dominios, por ejemplo, red de distribución de contenido (CDN) para acelerar la página.
Cuando tienes varios archivos JavaScript en una página, el motor JavaScript interpreta los archivos en el orden en que aparecen. Por ejemplo:
<script src="js/service.js"></script>
<script src="js/app.js"></script>
En este ejemplo, el motor de JavaScript interpretará los archivos service.js y app.js en secuencia. Primero completa la interpretación del archivo service.js antes de interpretar el archivo app.js.
Para la página que incluye muchos archivos JavaScript externos, la página en blanco se muestra durante la fase de representación de la página.
Para evitar esto, incluya el archivo JavaScript justo antes de la etiqueta </body> como se muestra en este ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
</head>
<body>
<!-- end of page content here-->
<script src="js/service.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Los atributos async y defer
Para cambiar la forma en que el navegador carga y ejecuta archivos JavaScript, utiliza uno de los dos atributos del elemento <script> async y defer.
Estos atributos solo surten efecto en los archivos de script externos. El atributo asíncrono (async) indica al navegador web que ejecute el archivo JavaScript de forma asíncrona. El atributo asíncrono no garantiza que los archivos de script se ejecuten en el orden en que aparecen. Por ejemplo:
<script async src="service.js"></script>
<script async src="app.js"></script>
El archivo app.js podría ejecutarse antes que el archivo service.js. Por lo tanto, debe asegurarse de que no exista dependencia entre ellos.
El atributo defer solicita al navegador web que ejecute el archivo de secuencia de comandos después de que se haya analizado el documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript defer demonstration</title>
<script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>
Aunque coloquemos el elemento <script> en la sección <head>, el script esperará a que el navegador reciba la etiqueta de cierre <html> para comenzar a ejecutarse.
Resumen:
- Utiliza el elemento
<script>para incluir un archivo JavaScript en una página HTML. - El atributo
asyncdel elemento<script>le indica al navegador web que obtenga el archivo JavaScript en paralelo y luego lo analice y ejecute tan pronto como el archivo JavaScript esté disponible. - El atributo
deferdel elemento<script>permite que el navegador web ejecute el archivo JavaScript después de que se haya analizado el documento HTML.
