JavaScript Установка (Підключення)
"Ми тут, щоб зробити свій внесок у цей світ. А інакше навіщо ми тут?"
Стів Джобс
Як підключити JavaScript? Тег <script>
На HTML-сторінці JavaScript код має бути вставлений між тегами <script> та </script>.
Приклад
<script>
document.getElementById("demo").innerHTML = "Мій перший JavaScript";
</script>
Спробуйте самі »
Старі приклади JavaScript можуть використовувати атрибут type з таким написанням: <script type="text/javascript">.
Згідно зі специфікацією HTML5 для підключення JavaScript атрибут type - не обов’язковий. JavaScript є скриптовою мовою в HTML за умовчанням.
Функції та події JavaScript
JavaScript function - це блок коду JavaScript, який може бути виконано при "виклику".
Наприклад, функція може бути викликана, коли відбувається подія, наприклад, коли користувач натискає кнопку.
Ви дізнаєтеся набагато більше про функції та події у наступних розділах цього підручника на нашому сайті W3Schools українською.
JavaScript в <head> або <body>?
Ви можете розмістити будь-яку кількість скриптів в HTML-документі.
Скрипти можуть бути розміщені в розділах <body> або в <head> HTML сторінки, або в обох розділах одночасно.
JavaScript в <head>
В цьому прикладі JavaScript function розміщується в розділі <head> HTML сторінки.
Функція викликається при натисканні кнопки:
Приклад
<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Параграф змінено.";
}
</script>
</head>
<body>
<h1>Веб-сторінка</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Сппробуй це</button>
</body>
</html>
Спробуйте самі »
JavaScript в <body>
В цьому прикладі JavaScript function розміщується в розділі <body> HTML сторінки.
Функція викликається при натисканні кнопки:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1>Веб-сторінка</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Спробуйте це</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Параграф змінено.";
}
</script>
</body>
</html>
Спробуйте самі »
Розміщення скриптів у нижній частині елемента <body> покращує швидкість відображення, оскільки інтерпретація скриптів уповільнює відображення вебсторінки. По можливості намагайтеся розміщувати JavaScript-код саме наприкінці HTML-сторінки.
Зовнішній JavaScript
Скрипти також можуть бути розміщені у зовнішніх файлах:
Зовнішній файл: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Параграф змінено.";
}
Зовнішні скрипти зручні, коли той самий JavaScrip-код використовується на різних вебсторінках (за аналогією із зовнішніми файлами .css).
Файли JavaScript мають розширення .js.
Щоб використовувати зовнішній скрипт, вкажіть ім’я файла скрипту в атрибуті src (скорочено від source) тега <script>:
Можна розмістити зовнішнє посилання на скрипт в <head> або <body> - як вам подобається.
Скрипт буде поводити себе так, якби він був розташований саме там, де знаходиться тег <script>.
Зовнішні скрипти не можуть містити теги <script>. В них міститься безпосередньо сам JavaScript-код.
Переваги використання зовнішніх файлів JavaScript
Розміщення скриптів у зовнішніх файлах має ряд переваг:
- Розділяються HTML-код та JavaScript-код
- Це полегшує читання та підтримку окремо HTML та JavaScript
- Кешовані файли JavaScript можуть прискорити завантаження сторінок
Щоб додати кілька файлів скриптів на одну сторінку, використовуйте кілька тегів <script>:
Приклад
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Зовнішні посилання
На зовнішні скрипти можна посилатися за допомогою повної URL-адреси або шляху щодо поточної вебсторінки.
У цьому прикладі використовується повна URL-адреса для посилання на скрипт:
У цьому прикладі використовується скрипт, розташований у вказаній теці на поточному вебсайті:
Цей приклад посилається на скрипт, розташований у тій самій теці, що й поточна сторінка:
Ви можете прочитати більше про шляхи до файлів у розділі HTML Шляхи до файлів на нашому сайті W3Schools українською.
Для написання скриптів на мові JavaScript використовуються такі самі редактори коду, як і для написання звичайного HTML-коду. Про те, які можна використовувати редактори коду, ви можете прочитати у розділі HTML Редактори на нашому сайті W3Schools українською.
