<script> HTML тег

Тег <script> використовується для вставки скриптів (сценаріїв) у html-документ.

Сам скрипт може розташовуватися як у html-документі (всередині тегів head або body), так і в зовнішньому файлі, такий підхід дозволяє використовувати одні і ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешуєтся при першому завантаженні і скрипт виконується швидше при наступних викликах.

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

Елемент <script> в собі містить скрипт, або, за допомогою атрибута src, вказує на зовнішній файл зі сценаріями.

автор: с3с

Порада

Також зверніть увагу на елемент <noscript> для користувачів, у яких скрипти підтримуються з обмеженими можливостями, або мають браузер, який не підтримує скрипти на стороні клієнта.

автор: с3с

Нотатка

Розміщення скрипта в зовнішньому файлі має перевагу в тому випадку, якщо до одного й того ж скрипта звертаються кілька html-документів. До того ж зовнішній файл кешуюється браузером, що в цілому прискорює загальну роботу сайту.

автор: с3с

Нотатка

Якщо атрибут "src" присутній, елемент <script> повинен бути порожнім.

автор: с3с

Нотатка

Скрипт виконується:

Якщо async="async": Сценарій виконується асинхронно з іншої частини сторінки (сценарій буде виконуватися, поки сторінка продовжує завантажуватись)
Якщо async="async" не вказано, але вказано defer="defer": Скрипт виконується, після повного завантаження сторінки.
Якщо async та defer не вказані: Сценарій витягується і виконується відразу, до того, як браузер повністю завантажить сторінку

автор: с3с

Нотатка

Тег <script> може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості.

автор: с3с

Синтаксис

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

Атрибут	Опис
async	Завантажує скрипт асинхронно.
charset	Задає кодування символів, які використовуються в зовнішньому файлі
defer	Відкладає виконання скрипта до тих пір, поки вся сторінка не буде завантажена повністю.
language	Встановлює мову програмування на якій написаний скрипт.
src	Адреса скрипта з зовнішнього файлу для імпорту в поточний документ.
type	Визначає тип вмісту тега <script>.
xml:space	Визначає, чи повинні бути збережені пробіли в коді

Атрибут	Опис
accesskey	Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.
class	Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).
draggable	Визначає чи можна перетягувати елемент.
contenteditable	Дозволяє редагувати текст в середні тегу.
dir	Вказує напрямок тексту.
dropzone	Вказує, що робити з перетягувати елементи.
hidden	Приховує вміст елемента від перегляду.
id	Задає унікальний ідентифікатор для елемента.
lang	Визначає основну мову вмісту елемента
spellcheck	Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.
style	Задає вбудований (inline) CSS стиль для елемента.
tabindex	Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.
title	Вказує додаткову текстову підказку
translate	Повідомляє браузеру переводити вказаний текст в елементі чи ні.
contextmenu	Контекстне меню для елемента

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1+	1+	1+	3.5+	12+	3+

Підтримка: мобільні переглядачі
Переглядач
	1+	1+	1+	1+

Приклади

+ запропонувати свій приклад у пісочниці

Найпростіший приклад використання HTML теґа <script>

See the Pen Script_css_in_ua by css.in.ua (@css_in_ua) on CodePen.

автор: с3с

Найпростіший приклад використання HTML теґа <script>

See the Pen Script1_css_in_ua by css.in.ua (@css_in_ua) on CodePen.

автор: с3с

Різниця між HTML 4.01 та HTML5

Атрибут "type" обов`язковий в HTML 4, але необов'язково в HTML5.

Атрибут "async" з`явився тільки в HTML5.

HTML 4.01 атрибут: "xml:space», не підтримується в HTML5.

Різниця між XHTML та HTML

У XHTML, вміст всередині скриптів оголошується як #PCDATA (замість CDATA), це означає, що об'єкти будуть оброблятися.

В XHTML, всі спеціальні символи повинні бути закодовані, або весь зміст має бути обгорнутий всередині секції CDATA:

<!--[CDATA[ var i = 10;
 if (i > 5) {
   // some code
 }
 ]]-->
 ```

CSS стиль без задання

script {


    display: none;


}

Коментарі

Коментарів ще немає — будьте першим!