html теґ <script>

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

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

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

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

9888ac4e6e6b546e8902750b17a98b3e.png

Нотатка:

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

Порада:

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

Нотатка:

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

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

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

Нотатка:

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

Синтаксис

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

Вказує додаткову текстову підказку

translate

Повідомляє браузеру переводити вказаний текст в елементі чи ні.

contextmenu

Контекстне меню для елемента

accesskey

Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.

class

Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).

draggable

Визначає чи можна перетягувати елемент.

contenteditable

Дозволяє редагувати текст в середні тегу.

dir

Вказує напрямок тексту.

hidden

Приховує вміст елемента від перегляду.

id

Задає унікальний ідентифікатор для елемента.

lang

Визначає основну мову вмісту елемента

spellcheck

Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.

dropzone

Вказує, що робити з перетягувати елементи.

style

Задає вбудований (inline) CSS стиль для елемента.

tabindex

Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.

Більше інформації про загальні атрибути за посиланням Загальні атрибути в html.

Теґ <script> не підтримує жодних атрибутів подій.

Більше інформації про html події за посиланням Атрибути подій в html.

Переглядачі

Переглядач

1+

1+

1+

3.5+

3+

12+

Переглядач

1+

1+

1+

1+


Мобільних переглядачів ще не додано.

Приклади


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

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

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

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

Різниця між 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;


}

Додаткові посилання