1. Тег <script>
Перед тим, як ми поринемо у детальне вивчення HTML, хотілося б вас познайомити ще з однією крутою штукою — мовою JavaScript.
JavaScript — це потужна мова програмування, яка використовується для створення динамічних і інтерактивних веб-сторінок. Вона дозволяє реагувати на дії користувача, змінювати вміст веб-сторінок, взаємодіяти з серверами та багатьма іншими способами покращувати задоволення користувача від взаємодії з сайтом.
Зараз ми не будемо детально вивчати JavaScript, але іноді в прикладах я все-таки його буду додавати, тому давайте розкажу, як JavaScript вбудовується в HTML-документ.
Тег <script> використовується для вбудовування JavaScript-коду в HTML-документ.
<!DOCTYPE html>
<html lang="en">
<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-коду, який показує спливаюче вікно з повідомленням "Привіт, світ!".
2. Підключаємо скрипт
Інколи краще зберігати JavaScript-код в окремому файлі. Це покращує організацію коду і його повторне використання. Для підключення JavaScript-файлу також використовується тег <script>, а за допомогою атрибута src можна задати назву JavaScript-файлу.
Підключення зовнішнього файлу JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знайомство з JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Ласкаво просимо на мій сайт!</h1>
</body>
</html>
Цей HTML-файл просить браузер підключити до нього JavaScript-файл, який називається script.js, і може містити той самий код, що й у прикладі вище:
//script.js:
// Ваш JavaScript-код тут
alert('Привіт, світ!');
Атрибут defer використовується для того, щоб вказати браузеру виконувати скрипт після того, як увесь HTML-документ буде повністю завантажений та відображений.
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: CSS-властивість, що змінює колір тексту елемента.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ