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;
}