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   . Hay dos formas de usar la etiqueta de secuencia de comandos para insertar JavaScript en HTML. historia de JavaScript   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  {   .log(   ); }; helloWord();    (  ) function helloWorld console 'Hello World' </   > script  Continuaré y comenzaré con la etiqueta del script. Entre la etiqueta del script, crearé un  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.   helloWorld   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  . 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.    src     <     =   > 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,  y  . 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.   defer   async   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 =   type =   >   <script src =   type =   >   <script src =   type =   >  "main.js" "text/javascript" </   > script "main.js" "application/javascript" </   > script "main.js" "application/ecmascript" </   > script  Tradicionalmente, el tipo predeterminado siempre ha sido  aunque esto ha quedado obsoleto ahora, pero muchos desarrolladores todavía lo usan. el valor predeterminado actual es  o  . 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.   "text/javascript"   "application/javascript"   "application/ecmascript"   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 =   crossorigin =   integrity=   >   <script src =   crossorigin =   >  "main.js" "anonymous" "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" </   > script "main.js" "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   , que envía un hash y el servidor receptor verifica la solicitud. Veremos esto en detalle como el siguiente atributo. integridad  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.        <     =     =     =   > 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  de  y luego está este atributo de integridad, que tiene algo conocido como hash SRI, donde SRI significa   . 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.   crossorigin   "anonymous" Integridad de subrecursos   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   . 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 ☺. hoja de trucos de JavaScript     Publicado anteriormente en https://cloudaffle.com/post/insert-javascript-in-html

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - DEVELOPER.

2020 - Hacker Noon Contributor of the Year in DEVELOPER

Download My JavaScript CheatSheet

Read My Stories

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

Inserte JavaScript en HTML usando la etiqueta de secuencia de comandos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps