html теґ <script>
Тег <script>
використовується для вставки скриптів (сценаріїв) у html-документ.
Сам скрипт може розташовуватися як у html-документі (всередині тегів head
або body
), так і в зовнішньому файлі, такий підхід дозволяє використовувати одні і ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешуєтся при першому завантаженні і скрипт виконується швидше при наступних викликах.
Скрипти, які повинні виконуватися в першу чергу, звичайно поміщають в заголовок документа.
Елемент <script>
в собі містить скрипт, або, за допомогою атрибута src
, вказує на зовнішній файл зі сценаріями.
Нотатка: | Якщо атрибут "src" присутній, елемент |
Порада: | Також зверніть увагу на елемент |
Нотатка: | Скрипт виконується:
|
Нотатка: | Тег |
Нотатка: | Розміщення скрипта в зовнішньому файлі має перевагу в тому випадку, якщо до одного й того ж скрипта звертаються кілька 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;
}