Подключение и выполнение JavaScript на странице

Несколько примеров как подключить JS скрипты к web страницам и некоторые тонкости.
1
<script src="/script.js" type="text/javascript"></script>
HTML

Также можно указать кодировку файла атрибутом charset:

<script src="/script.js" type="text/javascript" charset="utf-8"></script>
HTML

Атрибут async загрузит скрипт асинхронно т.е. не будет блокировать дальнейшую загрузку страницы.

<script src="/script.js" type="text/javascript" async></script>
HTML

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

<script src="/script.js" type="text/javascript" defer></script>
HTML

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

Могут быть значения:

anonymous При загрузке не передаются cookie, сертификат X.509, логин/пароль для аутентификации по HTTP
use-credentials Выполняется кросс-доменный запрос Origin
<script src="/script.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="/script.js" type="text/javascript" crossorigin="use-credentials"></script>
HTML
2
<script type="text/javascript">
...
</script>

<script>
...
</script>
HTML
3
Указывает используемый язык в тегах <script>...​</script>. По умолчанию используются значение text/javascript.
<meta http-equiv="content-script-type" content="text/javascript">
HTML
4

Браузер покажет содержание тега <noscript> если JS не поддерживается или отключен.

<noscript>
...
</noscript>
HTML
5

В старых браузерах где был отключён JS содержание тега выводилось на странице, поэтому JS код экранировали:

<script type="text/javascript">
<!--
...
//-->
</script>
HTML
03.04.2018, обновлено 15.10.2019
9364

Комментарии

, чтобы добавить комментарий.

Другие публикации

Добавление CSS стилей на страницу
Несколько примеров как добавить CSS-свойства к HTML странице.
4924
+2
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
298746
+39
Массив $_SERVER
Описание значений глобального массива $_SERVER с примерами.
58697
+4
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
30720
+4
HTTP коды
Список основных кодов состояния HTTP, без WebDAV.
12390
+1
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
75109
+2