HTML/CSS

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

Несколько примеров как подключить JS скрипты к web страницам и некоторые тонкости.
1

JS в отдельных файлах

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

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

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

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

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

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

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

Атрибут 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>
2

JS в коде страницы

<script type="text/javascript">
...
</script>

<script>
...
</script>
3

Мета-тег Content-Script-Type

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

Noscript

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

<noscript>
...
</noscript>
5

Экранирование JS кода

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

<script type="text/javascript">
<!--
...
//-->
</script>
03 апреля 2018