- Script en línea (inline script)
- Scripts externos
- Orden de ejecución
- REPL
- Características de JavaScript en el navegador
En esta lección aprenderemos sobre <script>. Es una etiqueta que nos permite vincular JavaScript con las páginas web de dos formas:
- Script en línea
- Script externo
Script en línea (inline script)
La palabra "inline" significa que colocamos JavaScript directamente dentro del HTML. Este método es adecuado para escenarios básicos con una pequeña cantidad de código:
<html>
<head>
</head>
<body>
<!-- JavaScript dentro de la etiqueta script -->
<script>
const greeting = '¡hola, mundo!';
// Muestra el saludo en una ventana modal del navegador
alert(greeting);
</script>
<script>
// Puede haber cualquier cantidad de estas etiquetas en la página
</script>
</body>
</html>
En el ejemplo se utiliza la función alert(). Muestra una ventana modal en la pantalla con el texto especificado. En el código real, alert() se utiliza muy poco, pero a veces se utiliza para fines educativos. Haz clic para ver el resultado de ejecutar esta función.
Este método se utiliza principalmente para conectar scripts de servicios externos, como Google Analytics. Se ve así:
// El código está minificado para ocupar el menor espacio posible
// Esto acelera la carga
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
Si abres el código fuente de esta página, verás muchas etiquetas <script> con inserciones similares dentro del HTML. La mayoría de estas inserciones se encuentran cerca del comienzo del HTML, ya que es importante cargarlas lo antes posible para rastrear las acciones del usuario.
Scripts externos
En las aplicaciones frontend, no se utiliza el script en línea. Todo el código se carga a través de archivos externos. Los scripts externos se cargan de la siguiente manera:
<html>
<head>
<script src="/assets/application.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
</head>
<body>
</body>
</html>
Normalmente, este código JavaScript se procesa previamente por sistemas de construcción como Webpack. Optimizan el código para los navegadores, lo hacen más pequeño, eliminan lo innecesario y lo dividen en archivos para acelerar la carga. Puedes obtener más información en nuestro guía.
Orden de ejecución
Por defecto, la etiqueta <script> se ejecuta en el orden en que aparece en el HTML. Esto funciona de la misma manera tanto para archivos externos como para scripts en línea. Por lo tanto, la ubicación es importante. Cuanto más lejos coloquemos el script, más rápido el usuario verá la página en la pantalla. Idealmente, todos los scripts deben estar justo antes de </body>.
El orden de carga se puede controlar utilizando los atributos defer y async. Puedes leer más sobre esto aquí (inglés).
REPL
Existe una tercera forma de ejecutar código JavaScript en una página, ideal para depuración y experimentación.
En el navegador existe un equivalente al REPL llamado consola. Para usarla, busca las Herramientas de desarrollo en el menú del navegador y ábrelas (en la mayoría de los navegadores, también puedes presionar F12). En la parte inferior de la pantalla aparecerá una sección con la pestaña Consola. En esta pestaña puedes ejecutar cualquier código JavaScript, similar a un REPL en el servidor.
Pero eso no es todo. La consola está vinculada a la página en la que se encuentra. En otras palabras, desde aquí podemos controlar el contenido de la pantalla. Asegúrate de consultarla de vez en cuando. Será útil para experimentos en futuras lecciones.
Además, puedes escribir y ejecutar código en el navegador utilizando el sistema de fragmentos . Para hacerlo, ve a la pestaña "Fuentes" o Sources en las Herramientas de desarrollo, selecciona "Fragmentos" o Snippets y crea uno nuevo. Los fragmentos te permiten escribir código en un formato más conveniente, muy similar a trabajar con JavaScript en un editor de código.
Características de JavaScript en el navegador
El JavaScript utilizado en el navegador y en el servidor es el mismo lenguaje, pero se ejecuta en diferentes entornos. Estos entornos incluyen, por ejemplo, Node.js y el navegador. Cada entorno de hospedaje tiene sus propias peculiaridades que es importante conocer.
Seguramente sabes que JavaScript no tiene un método alert(), el cual está disponible en el navegador. Si intentamos ejecutar código que use 1alert() en Node.js, obtendremos un error. De manera similar, en JavaScript no existe el objeto console por sí mismo, pero es proporcionado por el entorno de hospedaje. Esto también se aplica a métodos como setTimeout(), setInterval(), module, window e incluso EventLoop. Esto significa que el comportamiento de console, setTimeout() y EventLoop() puede variar dependiendo del entorno de hospedaje en el que se ejecute JavaScript. Puedes verificar por ti mismo qué ocurre si ejecutas el siguiente código en el navegador y en Node.js:
setTimeout(() => this, 0);
Además, si ejecutamos nuestro JavaScript dentro de otro entorno de hospedaje, como d8, es posible que no encontremos el objeto console allí. En su lugar, para imprimir en pantalla, podría estar disponible el método print().
Objetos del entorno de hospedaje
La especificación ECMAScript describe JavaScript como un lenguaje de secuencias de comandos cuyas capacidades son complementadas por las entornos de hospedaje. Por ejemplo, JavaScript no tiene capacidades de entrada y salida (I/O), por lo tanto, todos los objetos para interactuar con el entorno externo (como alert() en el navegador, console en el navegador y en Node.js, fs en Node.js, entre otros) son proporcionados por el propio entorno de hospedaje. Aunque los objetos proporcionados por el navegador y Node.js pueden tener el mismo nombre, difieren en su implementación. De hecho, son objetos distintos que a veces intentan ser similares entre sí. En caso de que el objeto que necesitamos no esté disponible en un entorno de hospedaje específico, podemos sustituirlo por una biblioteca.
Versiones
La versión de JavaScript en el servidor es determinada por el programador que instala una versión específica de Node.js.
En el desarrollo frontend, no podemos controlar la versión de JavaScript porque no sabemos a través de qué navegador cargarán la página con nuestro código. ¿Qué pasa si es el navegador integrado en un televisor o un automóvil?
Por eso no debemos utilizar las características más nuevas de JavaScript en el frontend. Estas características pueden no ser compatibles con todos los navegadores, por lo que algunos usuarios podrían ver errores en lugar de la página. Cómo resolver este problema lo aprenderemos en las próximas lecciones.
Navegador y contenido
JavaScript en el navegador debe ser capaz de interactuar con el propio navegador y la estructura de la página. De lo contrario, no podríamos hacer las cosas que hacen las aplicaciones web modernas.
Para esto, el navegador incorpora objetos en JavaScript que podemos utilizar para manipular lo que sucede en la pantalla. Gran parte de este curso se dedicará a aprender sobre estos objetos.
Trabajo independiente
- Abre la consola en tu navegador.
- Intenta ejecutar código en ella, por ejemplo, operaciones aritméticas simples.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
