Что произойдет если в теге script задана ссылка на внешний файл скрипта

Обновлено: 04.07.2024

Тег <script> (от англ. script — скрипт, сценарий) предназначен для описания скриптов, может содержать ссылку на программу или её текст на определённом языке.

Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т. к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

async Загружает скрипт асинхронно. defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. src Адрес скрипта из внешнего файла для импорта в текущий документ. type Определяет тип содержимого <script> .

async¶

При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.

Если задано сразу два атрибута — async и defer , то атрибут async игнорируется.

Синтаксис

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

defer¶

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Работает только при наличии атрибута src .

Синтаксис

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

Загружает файл со скриптом из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение js и могут размещаться в любом доступном месте.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию

Указывает MIME-тип для определённого языка.

Синтаксис

Значения

Атрибут type не чувствителен к регистру и обычно принимает следующие значения:

Осваивайте профессию, начните зарабатывать, а платите через год!


Курсы Python Ак­ция! Бес­плат­но!


Станьте хакером на Python за 3 дня


Веб-вёрстка. CSS, HTML и JavaScript



Курс Bootstrap 4


Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент <script> .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами <script> ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script> . Теги <script> часто помещают в элемент <head> , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head> , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег <script> , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script> .

Обратите внимание: мы указали атрибут language тега <script> , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел <head> HTML-документа. Вот пример HTML-элемента <button> с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега <script> . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами <script> и </script> .

По аналогии с элементом <img> атрибуту src элемента <script> можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент <script> с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами <script> и </script> , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы <script> интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента <script> , затем браузер приступает ко второму элементу <script> и т. д.

Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов <script> и </script> .

Расположение тегов <script>

Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега <script> . Встретив тег <script> , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

Если на странице используется много скриптов JavaScript, то могут возникнуть длительные задержки при загрузке, в течение которых пользователь видит пустое окно браузера. Поэтому считается хорошей практикой все ссылки нa javaScript-cцeнapии указывать после контента страницы перед закрывающим тегом <body> :

Такое расположение сценариев позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Для пользователей это предпочтительнее, потому что страница полностью визуализируется в браузере до обработки JavaScript-кoдa.

Отложенные и асинхронные сценарии

Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент <script> расположен где-то в середине страницы:

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.

А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?

Кардинально решить проблему загрузки скриптов помогут атрибуты async и defer элемента <script> .

Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».

При обнаружении тега <script async src="https://wm-school.ru/js/"> браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.

Для сценариев с атрибутом async не гарантируется вы­полнение скриптов в порядке их добавления, например:

В примере второй скрипт может быть выполнен перед первым, поэтому важно, что­бы между этими сценариями не было зависимостей.

Примечание: Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

Атрибут defer

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.

Как и при асинхронной загрузке скриптов — JS-файл может быть загружен, в то время как HTML-документ ещё грузится. Однако, даже если скрипт будет полностью загружен ещё до того, как браузер закончит обработку страницы, он не будет выполнен до тех пор, пока HTML-документ не обработается до конца.

Несмотря на то, что в приведенном примере теги <script defer src="https://wm-school.ru/js/"> включены в элемент <head> HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрыва­ющего тега </html> .

Кроме того, в отличие от async , относительный порядок выполнения скриптов с атрибутом defer будет сохранён.

Применение атрибута defer бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.

Примечание: Атрибуты async и defer поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута src .

Итоги

  • JavaScript можно добавить в HTML-документ с помощью элемента <script> двумя способами:
    • Определить встроенный сценарий, который располагается непосредственно между парой тегов <script> и </script> .
    • Подключить внешний файл с JavaScript-кодом через <script src="https://wm-school.ru/js/%D0%BF%D1%83%D1%82%D1%8C"></script> .

    Задачи

    Всплывающее окно

    Перед вами простой HTML-документ. Разместите в теле НТМL-страницы сценарий, выводящий всплывающее окно с надписью: "Привет, javascript!"

    Тег <script> используется для подключения скриптов к HTML документу.

    С помощью HTML тега <script> выполняется подключение клиентских (client-side) скриптов. Обычно тегом <script> подключают JavaScript.

    Код скрипта может располагаться между открывающим и закрывающим тегами <script> , либо во внешнем файле. Во втором случае в атрибуте src тега <script> указывается URL файла скрипта (см. примеры ниже).

    Тег <script> Можно использовать как в head , так и в body частях HTML документа.

    Один HTML документ может содержать неограниченное количество элементов <script> .

    Синтаксис

    Пример использования <script> в HTML коде

    Атрибуты async и defer - способы выполнения скрипта

    С помощью атрибутов async и defer можно задать способ выполнения скрипта.

    Возможны 3 варианта использования async и defer атрибутов тега <script> :

    • Не используется ни async ни defer. HTML документ загружается, дойдя до скрипта извлекается и выполняется сценарий. После этого загрузка продолжается.
    • Используется атрибут async. По возможности, скрипт выполняется асинхронно - при этом продолжается загрузка страницы.
    • Используется атрибут defer. Скрипт выполняется после полной загрузки страницы.

    Поддержка браузерами

    Тег
    <script> Да Да Да Да Да

    Атрибуты тега <script>

    Указывает, что скрипт должен выполняться асинхронно. Логический атрибут.

    Атрибут применим только для внешних скриптов.

    Указывает кодировку внешнего файла скрипта.

    Указывает, что скрипт должен быть выполнен только после полной загрузки страницы. Логический атрибут.

    Атрибут применим только для внешних скриптов.

    Содержит адрес файла внешнего скрипта.

    Указывает тип содержимого скрипта. Атрибут обязателен при использовании в HTML 4.01 и не обязателен в HTML5.

    Элемент «script» формируется парным тегом <script> (от англ. script – скрипт) и служит для встраивания и подключения программных скриптов (в основном JavaScript ) к html -документам. В то время, как элемент «style» используется в качестве контейнера для внутренних таблиц стилей CSS , а «link» ссылается на внешние таблицы, элемент «script» может служить и в качестве контейнера для хранения различных скриптов внутри html -кода, и в качестве ссылки на внешние файлы с кодом требуемого языка. Кроме того, элемент «script» разрешается применять практически в любом месте документа по мере необходимости. Однако скрипты, которые должны выполняться в первую очередь, обычно размещаются выше, поскольку все скрипты в html -документе по умолчанию выполняются последовательно согласно их появлению в коде.

    Атрибут type тега <script>

    Скрипты могут писаться не только на языке JavaScript . Компанией Microsoft , например, был разработан свой скриптовый язык VBScript . Поэтому, чтобы браузер знал, как правильно интерпретировать программный код, применяется атрибут type , который указывает MIME -тип данных скрипта. По умолчанию применяется type="text/javascript" , поэтому его можно не указывать. Но, если потребуется вставить скрипт на языке VBScript , нужно будет указать значение type="text/vbscript" .

    Подключение внешних скриптов
    при помощи атрибута src тега <script>

    В большинстве случаев скрипты располагаются во внешних файлах. Это дает ряд преимуществ:

    Для подключения к странице внешнего файла со скриптами применяется атрибут src (от англ. source), который в качестве значения принимает абсолютный или относительный путь к файлу, который обычно имеет расширение .js . Когда данный атрибут присутствует, между открывающим и закрывающим тегом элемента «script» код не пишется, хотя сами теги указываются (см. пример №1 ).

    Пример №1. Использование элемента «script»

    Атрибут async тега <script>

    Иногда бывают случаи, когда требуется, чтобы скрипт загружался и выполнялся одновременно (параллельно) с загрузкой страницы не оказывая влияния на ход загрузки и не тормозя отображение содержимого страницы в окне браузера (например, при использовании на сайте сторонних скриптов со счетчиками посещений или рекламных скриптов, которые могут задерживать загрузку основного содержимого страницы). Для этих целей применяется атрибут async (от англ. asynchronously), который сообщает браузеру о том, что данный скрипт нужно выполнять одновременно (параллельно) с загрузкой страницы и выполнением других скриптов. Атрибут употребляется без значений и по умолчанию выключен.

    Атрибут defer тега <script>

    Если необходимо, чтобы требуемые скрипты загружались и выполнялись одновременно (параллельно) с загрузкой страницы, но при этом порядок выполнения данных скриптов сохранился, т.е. чтобы скрипты выполнялись в порядке появления соответствующих элементов «script» в коде документа, то нужно указывать атрибут defer , который также не имеет значений и по умолчанию выключен. Это может понадобиться, например, в том случае, когда второй скрипт, который идет в исходном коде ниже, зависит от первого скрипта, который идет в исходном коде выше. Подробнее от этих атрибутах мы поговорим уже в курсе изучения языка JavaScript .

    Атрибуты defer и async работают только, если указан атрибут src . Кроме того, если указаны оба атрибута, то предпочтение отдается атрибуту defer , соответственно, async игнорируется.

    В конце лишь добавим, что активно пользоваться элементами «script» мы начнем в процессе изучения языка программирования JavaScript . Пока же нужно просто иметь общее представление о предназначении данного элемента.

    Читайте также: