HTML Tag
The tag is used to embed a client-side script (JavaScript).
The element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Tips and Notes
Tip: If you want to learn more about JavaScript, visit our JavaScript Tutorial.
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| async | async | Specifies that the script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) (only for external scripts) |
| crossorigin | anonymous use-credentials | Sets the mode of the request to an HTTP CORS Request |
| defer | defer | Specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing (only for external scripts) |
| integrity | filehash | Allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated |
| nomodule | True False | Specifies that the script should not be executed in browsers supporting ES2015 modules |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url | Specifies which referrer information to send when fetching a script |
| src | URL | Specifies the URL of an external script file |
| type | scripttype | Specifies the media type of the script |
Differences Between HTML and XHTML
In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
Тег script type text javascript
Тег (от англ. script — скрипт, сценарий) предназначен для описания скриптов, может содержать ссылку на программу или её текст на определённом языке.
Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т. к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Синтаксис¶
script> . script> script src="адрес">script> Закрывающий тег обязателен.
Атрибуты¶
async Загружает скрипт асинхронно. defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. src Адрес скрипта из внешнего файла для импорта в текущий документ. type Определяет тип содержимого .
async¶
При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.
Если задано сразу два атрибута — async и defer , то атрибут async игнорируется.
Значение по умолчанию
По умолчанию этот атрибут выключен.
defer¶
Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Работает только при наличии атрибута src .
Значение по умолчанию
По умолчанию этот атрибут выключен.
src¶
Загружает файл со скриптом из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение js и могут размещаться в любом доступном месте.
Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.
В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.
Значение по умолчанию
type¶
Указывает MIME-тип для определённого языка.
Атрибут type не чувствителен к регистру и обычно принимает следующие значения:
- text/javascript — Для языка программирования JavaScript.
- text/vbscript — Для языка VBScript.
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>SCRIPTtitle> head> body> script type="text/javascript"> document.write('') for (i = 1; i 6; i++) document.writeln('') for (j = 1; j 6; j++) document.write('' + i + j + '') document.writeln('') > document.write(' ') script> body> html> Привет, мир!
В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .
Перед скриптом.
. После скрипта.
Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.
Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Современная разметка
Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:
Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.
Атрибут language : language=…>
Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.
Обёртывание скрипта в HTML-комментарии.
В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
Файл скрипта можно подключить к HTML с помощью атрибута src :
Здесь /path/to/script.js – это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.
Можно указать и полный URL-адрес. Например:
Для подключения нескольких скриптов используйте несколько тегов:
Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы.
Польза отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в кеше.
Другие страницы, которые подключают тот же скрипт, смогут брать его из кеша вместо повторной загрузки из сети. И таким образом файл будет загружаться с сервера только один раз.
Это сокращает расход трафика и ускоряет загрузку страниц.
В одном теге нельзя использовать одновременно атрибут src и код внутри.
Нижеприведённый пример не работает:
Нужно выбрать: либо внешний скрипт , либо обычный код внутри тега .
Вышеприведённый пример можно разделить на два скрипта:
Итого
- Для добавления кода JavaScript на страницу используется тег
- Атрибуты type и language необязательны.
- Скрипт во внешнем файле можно вставить с помощью .
Нам ещё многое предстоит изучить про браузерные скрипты и их взаимодействие со страницей. Но, как уже было сказано, эта часть учебника посвящена именно языку JavaScript, поэтому здесь мы постараемся не отвлекаться на детали реализации в браузере. Мы воспользуемся браузером для запуска JavaScript, это удобно для онлайн-демонстраций, но это только одна из платформ, на которых работает этот язык.
Задачи
Вызвать alert
Создайте страницу, которая отобразит сообщение «Я JavaScript!».
Выполните это задание в песочнице, либо на вашем жёстком диске, где – неважно, главное – проверьте, что она работает.