Тег script — это основной метод вставки JavaScript на HTML-страницу. Тег script имеет шесть атрибутов, которые часто недостаточно используются и неправильно понимаются большинством разработчиков JavaScript. Мы рассмотрим все способы использования тега script, а также важность и использование каждого из атрибутов. Если вы опытный разработчик JavaScript и просто хотите узнать об атрибутах тега script, смело переходите к соответствующему разделу.
Использование тега Script в HTML
Тег script — это основной метод вставки JavaScript в HTML. Тег script был создан Netscape и впервые реализован в Netscape Navigator 2, насколько это касается истории JavaScript. Существует два способа использования тега script для вставки JavaScript в HTML.
Встроенный JavaScript
Вы можете вставить JavaScript прямо в файл HTML. Вот пример того, как это можно сделать с помощью тега script.
Я продолжу и начну с тега script. Между тегом script я создам функцию helloWorld, которая выводит на консоль текст «Hello World». В следующей строке я продолжу и вызову функцию. Это самый простой способ включить JavaScript в вашу HTML-страницу, но не оптимальный. Этот подход хорош для коротких скриптов или скриптов, специфичных для страницы. Еще одна вещь, которую вы должны помнить о встроенном JavaScript, заключается в том, что он не может быть загружен асинхронно или отложенно. Следовательно, встроенный JavaScript блокирует рендеринг; это означает, что браузер будет анализировать и выполнять встроенный JavaScript сверху вниз, прежде чем перейти к следующей строке кода. Следовательно, всегда лучше включать встроенные сценарии JavaScript (если они есть) в нижний колонтитул страницы после загрузки HTML и CSS.
Внешний файл JavaScript
Другой способ вставить JavaScript в ваши HTML-файлы — использовать внешний файл. Это наиболее часто используемый метод для вставки файлов JavaScript в HTML. Давайте посмотрим на пример. Предполагая, что именно так файлы организованы в моем проекте, где у меня есть файл index.html и файл main.js, все в одной папке проекта.
Вот как мы можем вставить файл main.js в файл index.html. Сначала я объявлю тег скрипта, а затем в тег скрипта мы включим атрибут с именем src. Атрибут src указывает на файл JavaScript, который мы хотим включить. Это так просто; файл main.js теперь включен в наш HTML.
Атрибуты тега скрипта
Часто возникает путаница между атрибутами тега сценария. Путаница особенно связана с двумя атрибутами, defer и async. Но давайте рассмотрим все атрибуты тега script один за другим и поймем, как они влияют на то, как браузер обрабатывает внешний файл JavaScript.
тип (необязательно)
Атрибут type указывает тип содержимого, также известный как тип MIME, языка сценариев, используемого во внешнем файле, который вы включаете в свой HTML. Вот как вы могли бы включить атрибут типа в свой тег скрипта.
Традиционно типом по умолчанию всегда был "text/javascript", хотя сейчас он устарел, но все еще используется многими разработчиками. текущее значение по умолчанию — "application/javascript" или "application/ecmascript". Самый безопасный вариант — использовать эти параметры по умолчанию; в противном случае использование другого типа MIME, который не поддерживается браузером, приводит к тому, что сценарий полностью игнорируется браузером.
кросс-происхождение (необязательно)
Веб-страницы часто запрашивают загрузку ресурсов на других серверах. Вот тут-то и появляется общий доступ к ресурсам из разных источников, часто сокращенно CORS. Запрос из разных источников запрашивается для ресурса (например, таблиц стилей, фреймов, изображений, шрифтов или скриптов) из другого домена. CORS используется для управления запросами между источниками. Он определяет способ взаимодействия браузера и сервера, чтобы определить, безопасно ли разрешать запрос между источниками. CORS позволяет серверам указывать, кто может получить доступ к ресурсам на сервере, среди прочего. Вот пример того, как вы можете использовать атрибут crossorigin.
Таким образом, есть два возможных варианта атрибута crossorigin. Первым из них является вариант "anonymous". В этом случае выполняется запрос между источниками, и никакие учетные данные не отправляются. Это часто используется с атрибутом integrity, который отправляет хэш, а принимающий сервер проверяет запрос. Мы рассмотрим это подробно в качестве следующего атрибута.
Следующее возможное значение атрибута crossorigin — "use-credentials". В этом случае выполняется перекрестный запрос, и учетные данные могут быть отправлены вместе с запросом. Учетные данные могут быть файлом cookie, сертификатом, базовой HTTP-аутентификацией и т. д. В большинстве случаев вы будете использовать параметр "anonymous", но всегда полезно знать, что также существует возможность отправки учетных данных.
целостность (необязательно)
Атрибут integrity позволяет браузеру проверять извлеченный скрипт, чтобы убедиться, что код никогда не будет загружен, если исходный код был изменен. Я приведу пример кода Bootstrap CDN, который мы часто используем для вставки в наш HTML.
Если вы внимательно посмотрите на этот код, то увидите, что он использует crossorigin из "anonymous", а затем есть атрибут integrity, который имеет что-то, известное как хэш SRI, где SRI означает целостность подресурса. Subresource Integrity (SRI) — это спецификация W3C, которая позволяет веб-разработчикам гарантировать, что ресурсы, размещенные на сторонних серверах, не были изменены. Таким образом, это означает, что JavaScript Bootstrap, обслуживаемый на вашей странице, является таким, каким он был загружен командой Bootstrap и не был изменен. Использование SRI настоятельно рекомендуется всякий раз, когда вы используете CORS.
асинхронный (необязательно)
Чтобы использовать асинхронный атрибут, все, что вам нужно сделать, это включить атрибут в тег скрипта. Обратите внимание, что атрибут async работает только для внешних файлов JavaScript, а не для встроенного JavaScript.
Атрибут async указывает браузеру, что скрипт должен начать загрузку немедленно и не должен блокировать отрисовку остальной части страницы. Однако JavaScript выполняется асинхронно с остальной частью страницы. Асинхронный метод не ждет завершения загрузки остальной части DOM перед его выполнением. Это способ загрузки JavaScript без блокировки рендеринга.
отложить (необязательно)
Использовать атрибут defer так же просто, как использовать атрибут async. Все, что вам нужно сделать, это включить атрибут defer в тег скрипта.
При использовании атрибута defer выполнение сценария откладывается до тех пор, пока все содержимое документа не будет полностью загружено. Однако скрипт начинает загрузку немедленно, но не выполняется до тех пор, пока все содержимое не будет загружено и не будет готово.
Что произойдет, если вы не включите async и не отложите
Если вы не включаете атрибут async или defer в свой сценарий, ваш сценарий становится блокирующим рендеринг. Это означает, что браузер сначала проанализирует и выполнит сценарий, прежде чем перейти к следующим строкам кода в вашем HTML. Это влияет на скорость загрузки вашей веб-страницы.
Получите доступ к большему количеству таких историй на Cloudaffle
Спасибо за чтение, и, надеюсь, это было полезно!
Я создал обширную шпаргалку по JavaScript. Это было сделано таким образом, чтобы вам было легко обращаться к каждому свойству и методу для различных объектов JavaScript. Его можно абсолютно бесплатно скачать по ссылке выше ☺.
