12.1 Тег <script>
JavaScript — це потужна мова програмування, яка використовується для створення динамічних та інтерактивних веб-сторінок. Вона дозволяє реагувати на дії користувача, змінювати вміст веб-сторінок, взаємодіяти з серверами та багатьма іншими способами робити користування сайтом приємнішим.
Тег <script> використовується для вбудовування JavaScript-коду в HTML-документ. Він може містити або вбудований код, або посилання на зовнішній файл.
Вбудовування JavaScript-коду напряму в HTML-документ:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знайомство з JavaScript</title>
</head>
<body>
<h1>Ласкаво просимо на мій сайт!</h1>
<script>
// Ваш JavaScript-код тут
alert('Привіт, світ!');
</script>
</body>
</html>
У цьому прикладі використовується тег <script> для вбудовування простого JavaScript-коду, який показує спливаюче вікно з повідомленням "Привіт, світ!"
12.2 Підключаємо скрипт
Іноді краще зберігати JavaScript-код у окремому файлі. Це покращує організацію коду і його повторне використання.
Підключення зовнішнього файлу JavaScript:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знайомство з JavaScript</title>
</head>
<body>
<h1>Ласкаво просимо на мій сайт!</h1>
<script>
// Ваш JavaScript-код тут
alert('Привіт, світ!');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знайомство з JavaScript</title>
<script src="hello-world.js" defer></script>
</head>
<body>
<h1>Ласкаво просимо на мій сайт!</h1>
</body>
</html>
Цей html-файл просить браузер підключити до нього JavaScript-файл, який називається hello-world.js, і може містити той самий код, що і в прикладі вище:
//hello-world.js:
// Ваш JavaScript-код тут
alert('Привіт, світ!');
Атрибут defer використовується для того, щоб вказати браузеру виконувати скрипт після того, як весь HTML-документ буде повністю завантажений та розібраний.
12.3 Inline-код
Пам'ятаєте, як ми писали css-стилі прямо всередині атрибута style у елементі?
<p style="color:red;">Червоний</p>
Так само можна писати і JavaScript-код.
Припустимо, ми хочемо, щоб елемент при кліку на нього змінював колір на синій, тоді нам потрібно написати такий код:
<p style="color:red;" onclick="this.style.color = 'blue';">Дуже цікавий абзац!</p>
Червоним кольором виділений JavaScript-код, який виконається, якщо користувач натисне на елемент <p>. Просто, чи не так?
Пояснення:
onclick: атрибут HTML, який вказує обробник події клікуthis: посилання на поточний елемент, на який було натиснутоstyle.color: властивість, яка змінює колір тексту елемента
12.4 Пишемо у консоль
З допомогою JavaScript можна писати текст прямо в HTML-сторінку, відображати його у діалогових вікнах, а також писати у консоль.
Консоль розробника — це крутий інструмент для відлагодження та тестування JavaScript-коду. Команда console.log() дозволяє виводити інформацію у консоль браузера.
Приклад використання console.log():
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знайомство з JavaScript</title>
</head>
<body>
<h1>Ласкаво просимо на мій сайт!</h1>
<script>
console.log('Привіт, світ!');
console.log('Це повідомлення буде виведено в консоль браузера.');
</script>
</body>
</html>
Оскільки ми тут із вами Web-розробники, то очевидно, що консоль розробника у браузері призначена саме для нас. Давайте вивчимо її детальніше.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ