Где в документе может располагаться тэг script по стандарту html

Подключение скриптов. Тег

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

      
Мой первый скрипт
 
Привет! Посмотрите, какой скрипт я написал
    

Тег может блокировать отображение страницы до тех пор, пока скрипт полностью не загрузится и не выполнится. Это замедляет загрузку страницы, особенно если скрипты расположены в начале документа. Также на некоторых сайтах скрипты могут ограничиваться по соображениям безопасности.

Атрибуты тега :

• async — указывает, что скрипт асинхронный, выполнение скрипта не останавливает загрузку страницы.
• defer — указывает, что скрипт отложенный, выполнение скрипта происходит после загрузки страницы.
• src — путь к файлу скрипта, который нужно загрузить.
• type — тип скрипта.
• nomodule — предотвращает выполнение скрипта в браузерах, поддерживающих модульные скрипты.
• crossorigin — способ обработки сквозных запросов.
• integrity — метаданные для проверки целостности субресурсов [SRI].
• referrerpolicy — правила использования ссылок для поиска.
• blocking — позволяет потенциально блокировать рендеринг.
• fetchpriority — приоритет для запущенных элементом запросов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Подключение JavaScript к HTML

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

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

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

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

Курс Bootstrap 4

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

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

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

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

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

JavaScript в элементе script

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

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

Выполнить код » Скрыть результаты

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

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

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

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

Выполнить код » Скрыть результаты

Внешний JavaScript

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

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

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

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

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

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

Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

Выполнить код » Скрыть результаты

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

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

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

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

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

Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

Внешние скрипты, порядок исполнения

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.

Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).

Браузер сам скачает скрипт и выполнит.

Можно указать и полный URL, например:

Вы также можете использовать путь относительно текущей страницы. Например, src="https://learn.javascript.ru/lodash.js" обозначает файл из текущей директории.

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

На заметку:

Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.

Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.

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

Если указан атрибут src , то содержимое тега игнорируется.

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не сработает:

Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:

Асинхронные скрипты: defer/async

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

Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Например, в примере ниже – пока все кролики не будут посчитаны – нижний

не будет показан:

    
Начинаем считать:
  
Кролики посчитаны!
  

Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.

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

То есть, в таком документе, пока не загрузится и не выполнится big.js , содержимое будет скрыто:

  Этот текст не будет показан, пока браузер не выполнит big.js. 

И здесь вопрос – действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?

Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.

Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся – оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функциональность.

А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!

Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):

Важная информация не покажется, пока не загрузится скрипт.
  
. Важная информация!

Можно поставить все подобные скрипты в конец страницы – это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит – получается, другие два его будут ждать – тоже нехорошо.

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

Поэтому «расположить скрипты внизу» – не лучший выход.

Кардинально решить эту проблему помогут атрибуты async или defer :

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

Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async .

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

То есть, в таком коде (с async ) первым сработает тот скрипт, который раньше загрузится:

А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать.

Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js , к примеру – использует что-то, описанное первым скриптом.

Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.

Например, если документ достаточно большой…

 Много много много букв

…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.

Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.

async вместе с defer

При одновременном указании async и defer в современных браузерах будет использован только async , в IE9- – только defer (не понимает async ).

Атрибуты async/defer – только для внешних скриптов

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .

При попытке назначить их на обычные скрипты , они будут проигнорированы.

Тот же пример с async :

Важная информация теперь не ждёт, пока загрузится скрипт.
  
. Важная информация!

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

Эти атрибуты давно «в ходу»

Большинство современных систем рекламы и счётчиков знают про эти атрибуты и используют их.

Перед вставкой внешнего тега понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.

Забегая вперёд

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

Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство script.async = false .

Выглядит это примерно так:

function addScript(src) < var script = document.createElement('script'); script.src = src; script.async = false; // чтобы гарантировать порядок document.head.appendChild(script); >addScript('1.js'); // загружаться эти скрипты начнут сразу addScript('2.js'); // выполнятся, как только загрузятся addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3

Более подробно работу со страницей мы разберём во второй части учебника.

Итого

• Скрипты вставляются на страницу как текст в теге , либо как внешний файл через
• Специальные атрибуты async и defer используются для того, чтобы пока грузится внешний скрипт – браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.
• Разница между async и defer : атрибут defer сохраняет относительную последовательность скриптов, а async – нет. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async – нет.

Очень важно не только читать учебник, но делать что-то самостоятельно.

Решите задачки, чтобы удостовериться, что вы всё правильно поняли.

Задачи

Какой скрипт выполнится первым?

важность: 4

В примере ниже подключены два скрипта small.js и big.js .

Если предположить, что small.js загружается гораздо быстрее, чем big.js – какой выполнится первым?

Long1ee / test.md

1 час 30 минут на весь тест. Это около 1.5 минуты на вопрос.

PHP, Linux, MySQL

Какие в POSIX системе права на файл test.txt установит следующий PHP-код: chmod('test.txt', 777)? (2)

• Для всех на чтение, запись и выполнение

Чем отличаются функции mysql_connect и mysql_pconnect? (2)

• mysql_pconnect создает постоянное соединение с БД

Какие теги не могут использоватся для оформления PHP кода?(2)

Какие данные пользователя сайта можно считать на 100% достоверными?(2)

• IP-адрес пользователя
• Поле User-Agent (данные о браузере)

Чем интеграл отличается от производной? (3)

• процесс вычисления производной - обратный процесс интегрирования

С помощью какой команды Linux можно найти все вложенные поддиректории директории? (3)

• find ./ -type d

Какое из выражений соответствует умножению переменной $a на 4? (2)

• Ни одно из указанных

Каким будет результат выполнения кода? (2)

• Warning
• Сообщение об ошибке

Какой из модулей PHP позволяет увеличить производительность выполнения php скриптов? (3)

• eAccelerator

Какой тип данных возвращает функция array_unique() ? (2)

С помощью какой команды Linux можно создать ссылку на файл? (2)

Кто был первым программистом? (3)

• Ада Лавлейс

Каково будет значение переменной $b после выполнения нижеприведенного кода? (2)

• Ни один из приведенных вариантов

Какой оператор необходимо использовать в запросе, что бы получить результат? (2)

Какой прототип функции autoload корректный? (3)

function __autoload ($className)

function __autoload ($className, $fileName)

В чем отличие методов POST и GET? (2)

• В GET данные передаются в заголовке запроса, а в POST – в теле
• В GET данные передаются в адресной строке, а в POST – через шифрованный тоннель

Каким будет результат выполнения кода? (2)

Какой паттерн проектирования необходимо использовать для реализации класса, который должен иметь только одну сущность во время выполнения скрипта? (2)

• Singleton

С помощью какой команды можно выполнить backup баз данных MySQL? (3)

• mysqldump

Какую функцию следует использовать для вывода типа и значения переменной? (2)

• var_dump

Каким будет результат выполнения кода? (2)

Каким будет результат выполнения кода? (2)

• Ничего не выведет

Что удаляет функция delete в PHP? (3)

• Не существует такой функции

функции unlink() или unset()

С помощью какой команды можно посмотреть план выполнения запроса в MySQL? (3)

Каким будет результат выполнения кода? (2)

Для высоконагруженного проекта с множеством backend серверов где эффективнее всего хранить сессионные данные? (2)

• в файлах
• в cookie

Какой оператор необходимо использовать в запросе, что бы получить результат? (3)

//Хотя я думаю, что это INNER JOIN

В чем отличие записей Class::method() и $Class->method() ? (2)

• Вызов статического и динамического метода, соответственно
• Вторую запись можно использовать, только если $Class – объект

Каким будет результат выполнения кода? (2)

Каким будет результат выполнения кода? (3)

• Сообщение об ошибке, класс не может перекрывать контанты интерфейса.

Каким будет результат выполнения кода? (2)

Какие из функций позволяют получить целиком содержимое файла? (2)

• file_get_contents

Каким будет результат выполнения кода из файла main.php? (4)

Какие из этих вызовов корректно бросят исключение ? (2)

• throw new Error("Ошибка")

Как правильно вывести приветствие через 5 секунд после запуска скрипта? (2)

• sleep(5000); alert("Привет!");
• setTimeout('alert("Привет!")', 5000);
• setTimeout(function() , 5000); `

break me;

• Выходит из текущего блока цикла или switch на метку "me"

В каком случае из перечисленных событие не попадет на обработку javascript? (2)

• Если страничка просматривается локально, т.е offline
• Только если javascript отключен

Сколько параметров можно передать функции ? (2)

• Любое количество

Можно ли в скрипте перевести посетителя на другую страницу сайта? (2)

• Да, куда угодно

Какие варианты правильно объявляют переменную для f, возвращающей сумму двух аргументов ? (2)

• var f = function(a,b)

Что из этого - не событие мыши ? (2)

• onmousescroll
• onmousewheel

Где в документе может располагаться тэг script по стандарту HTML ? (2)

• В HEAD или в BODY

Какое событие не вызывается кликом мыши ? (3)

Есть ли какая-нибудь разница между этими двумя определениями функции ? (2)

function f(a,b)  return a+b > var f = function(a,b)  return a+b >

• Да, есть

Какие конструкции для циклов есть в javascript? (2)

• Три: for, while и do. while.

Можно ли через javascript подключить внешний js-файл, отсутствующий на странице? (4)

• Да, сколько угодно файлов когда угодно

Какие из этих вариантов задают массив из элементов "a", "b" ? (2)

• var a = [ "a", "b" ]
• var a = "a,b".split(',')

Какой элемент является необязательным и его можно опустить (два варианта)? (2)

Как установить кодировку документа? (2)

Какие два элемента являются обязательными для любого кода HTML? (2)

Какой элемент внутри секции является обязательным? (2)

Какая строка содержит ошибку? (2)

Что такое стиль? (2)

• Технология, представляющая собой разные приемы для верстки HTML-кода.
• Способ сокращения HTML-кода за счет переноса части данных в другой файл.
• Метод преобразований текстовых документов в HTML.

В какой строке содержится корректный синтаксис? (2)

Какой размер написан с ошибкой? (2)

Какое выражение написано корректно? (2)

• width: "auto" `

Какая строка написана правильно? (2)

Какой атрибут используется для определения внутреннего стиля? (2)