Тег <script> в HTML — підключення JavaScript
Тег <script> використовується для вставки скриптів (сценаріїв) у html-документ.
Сам скрипт може розташовуватися як у html-документі (всередині тегів head або body), так і в зовнішньому файлі, такий підхід дозволяє використовувати одні і ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешуєтся при першому завантаженні і скрипт виконується швидше при наступних викликах.
Скрипти, які повинні виконуватися в першу чергу, звичайно поміщають в заголовок документа.
Елемент <script> в собі містить скрипт, або, за допомогою атрибута src, вказує на зовнішній файл зі сценаріями.
Загальний опис
автор: NagarD
- Порада
-
Також зверніть увагу на елемент
автор: с3с<noscript>для користувачів, у яких скрипти підтримуються з обмеженими можливостями, або мають браузер, який не підтримує скрипти на стороні клієнта. - Нотатка
-
Розміщення скрипта в зовнішньому файлі має перевагу в тому випадку, якщо до одного й того ж скрипта звертаються кілька html-документів. До того ж зовнішній файл кешуюється браузером, що в цілому прискорює загальну роботу сайту.
автор: с3с - Нотатка
-
Якщо атрибут "src" присутній, елемент
автор: с3с<script>повинен бути порожнім. - Нотатка
-
Скрипт виконується:
- Якщо async="async": Сценарій виконується асинхронно з іншої частини сторінки (сценарій буде виконуватися, поки сторінка продовжує завантажуватись)
- Якщо async="async" не вказано, але вказано defer="defer": Скрипт виконується, після повного завантаження сторінки.
- Якщо async та defer не вказані: Сценарій витягується і виконується відразу, до того, як браузер повністю завантажить сторінку
- Нотатка
-
Тег
автор: с3с<script>може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості.
Синтаксис
<script type="...">...</script>| Атрибут | Опис |
|---|---|
| async | Завантажує скрипт асинхронно. |
| charset | Задає кодування символів, які використовуються в зовнішньому файлі |
| defer | Відкладає виконання скрипта до тих пір, поки вся сторінка не буде завантажена повністю. |
| language | Встановлює мову програмування на якій написаний скрипт. |
| type | Визначає тип вмісту тега <script>. |
| xml:space | Визначає, чи повинні бути збережені пробіли в коді |
| src | Адреса скрипта з зовнішнього файлу для імпорту в поточний документ. |
| Атрибут | Опис |
|---|---|
| accesskey | Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш. |
| class | Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS). |
| draggable | Визначає чи можна перетягувати елемент. |
| contenteditable | Дозволяє редагувати текст в середні тегу. |
| dir | Вказує напрямок тексту. |
| dropzone | Вказує, що робити з перетягувати елементи. |
| hidden | Приховує вміст елемента від перегляду. |
| id | Задає унікальний ідентифікатор для елемента. |
| lang | Визначає основну мову вмісту елемента |
| spellcheck | Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента. |
| style | Задає вбудований (inline) CSS стиль для елемента. |
| tabindex | Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші Tab. |
| title | Вказує додаткову текстову підказку |
| translate | Повідомляє браузеру переводити вказаний текст в елементі чи ні. |
| contextmenu | Контекстне меню для елемента |
<script> не підтримує жодних атрибутів подій.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | ≤12.1 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML теґа <script>
<p>Приклад використання тегу script, що створює таблицю:</p>
<script type="text/javascript">
document.write ('<table width="50%" border="1">');
for (i=1; i<5; i++) {
document.writeln("<tr>");
for (j=1; j<5; j++) document.write("<td>" + i + j + "<\/td>");
document.writeln("<\/tr>");
}
document.write ("<\/table> ");
</script>Найпростіший приклад використання HTML теґа <script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SCRIPT</title>
<script>
function f() {
document.getElementById('well').innerHTML = 'Використання тегу script!';
}
</script>
</head>
<body onload="f()">
<div id="well"></div>Різниця між 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;
}Коментарі
Коментарів ще немає — будьте першим!