Javascript / tag script

Bienvenidos sean a este post, hoy veremos nuevamente este tema.

Cuando iniciamos nuestro curso, uno de los temas que cubrimos fue el tag script para ejecutar nuestros codigos en una pagina HTML. En ese post hable muy basicamente con solo algunas opciones disponibles pero con las modificaciones agregadas a ES6 tambien se agregaron mas opciones. Algunas muy interesantes para la carga de nuestros scripts remotamente mediante src.

Sabemos que su forma mas basica para implementarlo es de la siguiente manera:

<script>
	... instrucciones ...
</script>

Esta sintaxis se usa desde que VBscript desaparecio junto al Internet Explorer. Como es el lenguaje existente en todos los navegadores, se toma de manera predeterminada. Con esto comentado, veamos las opciones que podemos agregar.

src

Este atributo nos permite especificar la ubicacion de un archivo con codigo Javascript para ser utilizado en nuestra pagina. Veamos como aplicarlo en el tag:

http://archivo.js

async

Especifica que el script se descarga en paralelo al analisis de la pagina y se ejecuta tan pronto como esta disponible. Todo esto antes de que se complete el análisis, y esto solo aplica para scripts externos. Veamos como se utiliza en el tag:

http://archivo.js

Se pasa unicamente la palabra para poder trabajar de esta manera con el archivo especificado en el src.

defer

Especifica que el script se descarga en paralelo al analisis de la pagina y se ejecuta despues de que la pagina haya terminado de analizarse, esto es solo para scripts externos. Veamos como se aplica:

http://archivo.js

Al igual que el caso de async solamente se agrega la palabra para poder utilizarlo.

crossorigin

Este parametro establece el modo de solicitud del HTTP CORS Request. Esta pensado para paginas web que a menudo realizan solicitudes para cargar recursos desde otros servidores. Algunos ejemplos de recursos que podemos solicitar son: plantilla de estilos, imagenes, fonts, scripts, etc.

CORS es el acronimo para Cross Origins Request Sharing. Este mecanismo permite que recursos de un dominio puedan ser solicitados desde otro dominio, encargandose de establecer la mejor interaccion entre el servidor y el navegador. A su vez, nos permite establecer como acceder a esta informacion. Tenemos dos posibilidades:

• anonymous: se conecta de manera anonima.
• con-credenciales: se debe especificar una credencial para conectarse. Puede ser un certificado, una cookie, o una autenticacion basica

Veamos como se puede utilizar:

http://archivo.js

En este caso, estamos usandolo de manera anonima. Si necesitan especificar otra manera de autenticarlo simplemente cambian el valor por el correspondiente.

integrity

Este parametro nos permite saber si un archivo de script fue cargado correctamente. Simplemente se le pasa un valor Hash SRI. Veamos un ejemplo de como aplicarlo:

http://archivo.js

Este archivo es solo de ejemplo, asi como tambien es el codigo Hash. Ya que es solo a modo de ilustracion.

nomodule

Este parametro es para establecer si no se debe ejecutar el script en navegadores que soportan modulos de ES2015. El valor a pasar es de tipo booleano, siendo true para habilitar esto y false para no. Veamos como aplicarlo:

http://archivo.js

type

Este especifica el tipo MIME del script, y se usa para identificar el contenido en el tag script. Veamos como se aplica:

http://archivo.js

Este podemos considerarlo como el unico tipo valido porque todos los disponibles son ignorados si lo usamos en este parametro.

referrerpolicy

Este es para especificar la informacion de referencia que sera enviada cuando se ejecuta el script. Veamos algunos de los valores disponibles:

• no-referrer: no se envia ninguna informacion de referencia
• no-referrer-when-downgrade: envia informacion de referencia solo si se mantiene el mismo nivel de seguridad HTTPS. En caso contrario, no se envia. (predeterminado)
• origin: envia el origen (esquema, host y puerto) del documento.
• origin-when-cross-origin: este envia los datos anteriores para el crossorigin antes comentado
• same-origin: este anula a crossorigin porque solo envia informacion en el mismo dominio
• strict-origin-when-cross-origin: envia la informacion de origen solo si ambas conexiones mantienen el mismo nivel de seguridad
• unsafe-url: este envia el origen, path y query string sin importar la seguridad. Debe usarse con mucho cuidado!

Veamos un ejemplo de como aplicarlo:

http://archivo.js

Se pasa a la politica de referencia, en este caso la de origen cuando haya cross-origin, y luego especificamos al crossorigin. Como pueden ver tenemos muchas opciones interesantes para aplicar a nuestro tag dependiendo de la necesidad de cada uno de nuestros codigos.

En resumen, hoy hemos traido una actualizacion del tag script para nuestras paginas, asi como algunos parametros que ya conociamos y otros nuevos que fueron agregados luego de las modificaciones realizadas con los distintos ECMAScript. Les dejo algunas de mis redes sociales para seguirme o recibir una notificacion cada vez que subo un nuevo post: