16,738 lecturas

Inserte JavaScript en HTML usando la etiqueta de secuencia de comandos

por Manik5m2021/04/10

Demasiado Largo; Para Leer

La etiqueta de secuencia de comandos tiene seis atributos que la mayoría de los desarrolladores de JavaScript suelen subutilizar y malinterpretar. Veremos todas las formas de usar la etiqueta de secuencia de comandos y la importancia y el uso de cada uno de los seis atributos. JavaScript en línea es la forma más fácil de insertar JavaScript en una página HTML, pero no es la forma óptima de hacerlo. El atributo de tipo indica el tipo de contenido, también conocido como tipo MIME, del lenguaje de secuencias de comandos utilizado en el archivo externo que incluye en su HTML. Así es como incluiría un atributo de tipo en su etiqueta de secuencia de comandos.

Company Mentioned

featured image - Inserte JavaScript en HTML usando la etiqueta de secuencia de comandos

La etiqueta de secuencia de comandos es el método principal para insertar JavaScript en la página HTML. La etiqueta de secuencia de comandos tiene seis atributos que la mayoría de los desarrolladores de JavaScript suelen subutilizar y malinterpretar. Veremos todas las formas de usar la etiqueta script y la importancia y el uso de cada uno de los atributos. Si es un desarrollador de JavaScript con experiencia y solo está interesado en conocer los atributos de la etiqueta del script, no dude en pasar a la sección correspondiente.

Uso de la etiqueta de secuencia de comandos en HTML

La etiqueta de secuencia de comandos es el método principal para insertar JavaScript en HTML. La etiqueta de secuencia de comandos fue creada por Netscape y se implementó por primera vez en Netscape Navigator 2, en lo que respecta a la historia de JavaScript . Hay dos formas de usar la etiqueta de secuencia de comandos para insertar JavaScript en HTML.

JavaScript en línea

Puede insertar JavaScript directamente en un archivo HTML. Aquí hay un ejemplo de cómo lo haría usando la etiqueta de secuencia de comandos.

 < script > function helloWorld ( ) { console .log( 'Hello World' ); }; helloWord(); </ script >

Continuaré y comenzaré con la etiqueta del script. Entre la etiqueta del script, crearé un

 helloWorld

función que imprime el texto “Hello World” en la consola. En la siguiente línea, continuaré e invocaré la función. Esta es la forma más sencilla de incluir JavaScript en su página HTML, pero no la forma óptima de hacerlo. Este enfoque es bueno para secuencias de comandos breves o secuencias de comandos que son específicas de una página. Una cosa más que debe recordar acerca de JavaScript en línea es que no se puede cargar de forma asíncrona o diferida. JavaScript en línea es, por lo tanto, un bloqueo de procesamiento; esto significa que el navegador analizará y ejecutará JavaScript en línea de arriba a abajo antes de pasar a la siguiente línea de código. Por lo tanto, siempre es mejor incluir los JavaScripts en línea (si los hay) en el pie de página de la página una vez que su HTML y CSS se hayan cargado.

Archivo JavaScript externo

Otra forma de insertar JavaScript en sus archivos HTML es mediante el uso de un archivo externo. Este es el método más utilizado para insertar archivos JavaScript en HTML. Echemos un vistazo a un ejemplo. Suponiendo que así es como se organizan los archivos en mi proyecto, donde tengo el archivo index.html y el archivo main.js, todos en la misma carpeta del proyecto.

 ./ ├── main.js ├── index.html

Así es como podemos insertar el archivo main.js en el archivo index.html. Primero, declararé la etiqueta del script y luego, en la etiqueta del script, incluiremos un atributo llamado

src

. El atributo src apunta al archivo JavaScript que queremos incluir. Es tan simple como eso; el archivo main.js ahora está incluido en nuestro HTML.

 < script src = "main.js" > </ script >

Atributos de etiqueta de secuencia de comandos

A menudo hay mucha confusión entre los atributos de la etiqueta del script. La confusión se centra especialmente en torno a dos atributos,

 defer

 async

. Pero veamos todos los atributos de la etiqueta del script uno por uno y entendamos cómo afectan la forma en que el navegador trata el archivo JavaScript externo.

tipo (opcional)

El atributo de tipo indica el tipo de contenido, también conocido como tipo MIME, del lenguaje de secuencias de comandos utilizado en el archivo externo que incluye en su HTML. Así es como incluiría un atributo de tipo en su etiqueta de secuencia de comandos.

 <script src = "main.js" type = "text/javascript" > </ script > <script src = "main.js" type = "application/javascript" > </ script > <script src = "main.js" type = "application/ecmascript" > </ script >

Tradicionalmente, el tipo predeterminado siempre ha sido

 "text/javascript"

aunque esto ha quedado obsoleto ahora, pero muchos desarrolladores todavía lo usan. el valor predeterminado actual es

 "application/javascript"

 "application/ecmascript"

. La opción más segura es utilizar estas opciones predeterminadas; de lo contrario, el uso de un tipo MIME diferente que no es compatible con el navegador termina en la secuencia de comandos siendo completamente ignorada por el navegador.

origen cruzado (opcional)

Las páginas web a menudo realizan solicitudes para cargar recursos en otros servidores. Aquí es donde interviene el Intercambio de recursos de origen cruzado, a menudo abreviado como CORS. Se solicita una solicitud de origen cruzado para un recurso (por ejemplo, hojas de estilo, iframes, imágenes, fuentes o scripts) de otro dominio. CORS se utiliza para administrar solicitudes de origen cruzado. Define una forma de cómo un navegador y un servidor pueden interactuar para determinar si es seguro permitir la solicitud de origen cruzado. CORS permite a los servidores especificar quién puede acceder a los activos en el servidor, entre muchas otras cosas. Aquí hay un ejemplo de cómo puede usar el atributo crossorigin.

 <script src = "main.js" crossorigin = "anonymous" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" > </ script > <script src = "main.js" crossorigin = "use-credentials" > </ script >

Entonces, hay dos opciones posibles para el atributo crossorigin. La primera es la opción "anónima". En este caso, se realiza una solicitud de origen cruzado y no se envían credenciales. Esto se usa a menudo con el atributo de integridad , que envía un hash y el servidor receptor verifica la solicitud. Veremos esto en detalle como el siguiente atributo.

El siguiente valor posible para el atributo crossorigin es "use-credentials". En este caso, se realiza una solicitud de origen cruzado y las credenciales se pueden enviar junto con la solicitud. Las credenciales pueden ser una cookie, un certificado, una autenticación básica HTTP, etc. La mayoría de las veces, usaría la opción "anónima", pero siempre es bueno saber que también existe una opción para enviar las credenciales.

integridad (opcional)

El atributo de integridad permite que un navegador verifique el script obtenido para asegurarse de que el código nunca se cargue si la fuente ha sido manipulada. Extraeré un ejemplo del código CDN de Bootstrap que usamos a menudo para insertarlo en nuestro HTML.

 <!-- Latest compiled and minified JavaScript --> < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous" > </ script >

Si observa este código de cerca, utiliza un

 crossorigin

 "anonymous"

y luego está este atributo de integridad, que tiene algo conocido como hash SRI, donde SRI significa Integridad de subrecursos . La integridad de los subrecursos (SRI) es una especificación del W3C que permite a los desarrolladores web asegurarse de que los recursos alojados en servidores de terceros no hayan sido alterados. Esto significa que el JavaScript de Bootstrap que se muestra en su página es tal como lo cargó el equipo de Bootstrap y no ha sido alterado. Se recomienda encarecidamente el uso de SRI siempre que utilice CORS.

asíncrono (opcional)

Para usar el atributo asíncrono, todo lo que necesita hacer es incluir el atributo en la etiqueta del script. Tenga en cuenta que el atributo asíncrono solo funciona para archivos JavaScript externos y no para JavaScript en línea.

 < script src = "main.js" async > </ script >

El atributo asíncrono indica al navegador que la secuencia de comandos debe comenzar a descargarse de inmediato y no debe bloquear el resto de la representación de la página. El JavaScript, sin embargo, se ejecuta de forma asíncrona con el resto de la página. El método asíncrono no espera a que el resto del DOM complete la carga antes de ejecutarlo. Esta es una forma de bloqueo sin procesamiento de cargar su JavaScript.

diferir (opcional)

Usar el atributo defer es tan simple como usar el atributo async. Todo lo que necesita hacer es incluir el atributo diferido en su etiqueta de secuencia de comandos.

 < script src = "main.js" defer > </ script >

Cuando se utiliza el atributo aplazar, la ejecución del script se aplaza hasta que todo el contenido del documento se haya cargado por completo. Sin embargo, el script comienza a descargarse inmediatamente, pero no se ejecuta hasta que todo el contenido se haya cargado y esté listo.

Qué sucede si no incluye async ni defer

En caso de que no incluya el atributo asíncrono o diferido en su secuencia de comandos, su secuencia de comandos se convierte en un bloqueo de procesamiento. Esto significa que el navegador primero analizará y ejecutará el script antes de pasar a las siguientes líneas de código en su HTML. Esto afecta la velocidad de carga de su página web.

Gracias por leer, y espero que esto haya sido útil.

He creado una extensa hoja de trucos de JavaScript . Ha sido de una manera en la que le resulta fácil referirse a cada propiedad y método para varios objetos de JavaScript. Es absolutamente gratis para descargar desde el enlace de arriba ☺.

Publicado anteriormente en https://cloudaffle.com/post/insert-javascript-in-html