Пошук уроків, статей та іншого контенту
Розглянете об’єкти window і document та навчитеся взаємодіяти з поточною вкладкою браузера.
windowУ браузері JavaScript виконується всередині поточної вкладки. Цю вкладку представляє глобальний об’єкт window.
Через window можна:
отримувати інформацію про вікно браузера;
працювати з адресою поточної сторінки;
показувати діалогові вікна;
запускати код із затримкою або через певні інтервали;
звертатися до документа HTML.
Наприклад:
console.log(window);У консолі браузера буде показано об’єкт із властивостями та методами поточної вкладки.
windowЗмінні, оголошені через var у глобальній області видимості, стають властивостями window:
var userName = "Олена";
console.log(window.userName); // "Олена"Змінні, оголошені через let і const, не стають властивостями window:
let age = 25;
const city = "Львів";
console.log(window.age); // undefined
console.log(window.city); // undefinedУ сучасному JavaScript рекомендується використовувати let і const, а не створювати глобальні змінні без потреби.
window.innerWidth та window.innerHeightЦі властивості повертають розміри видимої частини вкладки в пікселях:
console.log(window.innerWidth);
console.log(window.innerHeight);Це може бути корисно, наприклад, для адаптивної поведінки інтерфейсу.
Метод alert() показує повідомлення:
window.alert("Ласкаво просимо!");Оскільки window є глобальним об’єктом, його назву часто можна не писати:
alert("Ласкаво просимо!");Метод confirm() показує повідомлення з кнопками підтвердження та скасування. Він повертає true або false:
const shouldContinue = confirm("Продовжити виконання?");
if (shouldContinue) {
console.log("Користувач погодився");
} else {
console.log("Користувач скасував дію");
}Метод prompt() просить користувача ввести значення:
const userName = prompt("Як вас звати?");
if (userName) {
console.log(`Привіт, ${userName}!`);
}Методи alert(), confirm() і prompt() блокують взаємодію зі сторінкою до моменту закриття діалогового вікна, тому в сучасних інтерфейсах їх використовують обмежено.
setTimeout() запускає функцію один раз після вказаної затримки в мілісекундах:
setTimeout(() => {
console.log("Це повідомлення з’явилося через 2 секунди");
}, 2000);setInterval() повторює виконання функції через заданий інтервал:
let seconds = 0;
const timerId = setInterval(() => {
seconds += 1;
console.log(`Минуло секунд: ${seconds}`);
if (seconds === 3) {
clearInterval(timerId);
}
}, 1000);Для зупинки інтервалу використовується clearInterval(). Для скасування таймера, створеного через setTimeout(), використовується clearTimeout().
const timeoutId = setTimeout(() => {
console.log("Цей код не виконається");
}, 3000);
clearTimeout(timeoutId);documentОб’єкт document представляє HTML-документ, відкритий у поточній вкладці.
document є властивістю об’єкта window:
console.log(window.document);
console.log(document);У більшості випадків використовують короткий запис document.
HTML-документ браузер перетворює на DOM — структуру об’єктів, що відповідають HTML-елементам. JavaScript може знаходити ці елементи, змінювати їх і реагувати на дії користувача.
Наприклад, HTML:
<h1>Заголовок</h1>
<p>Текст сторінки</p>перетворюється браузером на DOM-дерево, з яким можна працювати через document.
Метод getElementById() знаходить елемент за атрибутом id:
<h1 id="page-title">Стара назва</h1>
<script>
const title = document.getElementById("page-title");
console.log(title);
</script>Якщо елемент із таким ідентифікатором не знайдено, метод повертає null.
const element = document.getElementById("unknown-element");
console.log(element); // nullМетод querySelector() знаходить перший елемент, який відповідає CSS-селектору:
const title = document.querySelector("h1");
const button = document.querySelector(".main-button");
const input = document.querySelector("#user-name");Приклади селекторів:
"h1" — перший елемент h1;
".main-button" — перший елемент із класом main-button;
"#user-name" — елемент з ідентифікатором user-name;
"article p" — перший абзац усередині article.
Метод querySelectorAll() знаходить усі відповідні елементи:
const paragraphs = document.querySelectorAll("p");
console.log(paragraphs);Результатом є колекція NodeList, яку можна перебрати:
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach((paragraph) => {
console.log(paragraph.textContent);
});textContenttextContent читає або змінює текст усередині елемента:
<p id="message">Початкове повідомлення</p>
<script>
const message = document.getElementById("message");
console.log(message.textContent);
message.textContent = "Нове повідомлення";
</script>Якщо значення встановлюється через textContent, воно сприймається як звичайний текст:
message.textContent = "<strong>Важливо!</strong>";На сторінці буде показано саме текст <strong>Важливо!</strong>, а не жирний напис. Це безпечніший спосіб вставляти дані користувача.
innerHTMLinnerHTML дозволяє прочитати або змінити HTML усередині елемента:
const message = document.getElementById("message");
message.innerHTML = "<strong>Важливо!</strong>";У результаті текст буде відображено жирним шрифтом.
Не слід вставляти через innerHTML неперевірені дані, отримані від користувача. Це може створити вразливість міжсайтового скриптингу. Для звичайного тексту краще використовувати textContent.
HTML-елементи мають атрибути: id, class, src, href, alt та інші.
getAttribute() і setAttribute()<img id="avatar" src="old-avatar.png" alt="Старий аватар">
<script>
const avatar = document.getElementById("avatar");
console.log(avatar.getAttribute("src"));
avatar.setAttribute("src", "new-avatar.png");
avatar.setAttribute("alt", "Новий аватар");
</script>Щоб видалити атрибут, використовують removeAttribute():
avatar.removeAttribute("alt");Для деяких стандартних властивостей можна використовувати коротший запис:
const link = document.querySelector("a");
link.href = "https://example.com";
link.title = "Відкрити сторінку";Властивість classList допомагає додавати, видаляти та перевіряти класи елемента.
<p id="status">Статус</p>
<script>
const status = document.getElementById("status");
status.classList.add("success");
status.classList.remove("hidden");
status.classList.toggle("active");
console.log(status.classList.contains("success")); // true
</script>Основні методи:
add() — додати клас;
remove() — видалити клас;
toggle() — додати клас, якщо його немає, або видалити, якщо він є;
contains() — перевірити наявність класу.
Через властивість style можна змінювати вбудовані стилі елемента:
const title = document.querySelector("h1");
title.style.color = "darkblue";
title.style.fontSize = "32px";
title.style.backgroundColor = "lightgray";У JavaScript назви CSS-властивостей із дефісом записуються в стилі camelCase:
element.style.backgroundColor = "yellow";
element.style.marginTop = "20px";Для складних стилів зазвичай зручніше змінювати CSS-клас, а не встановлювати багато властивостей через style.
Подія — це сигнал про дію користувача або зміну стану сторінки. Приклади подій:
click — натискання;
input — зміна значення поля;
submit — надсилання форми;
keydown — натискання клавіші;
DOMContentLoaded — завантаження HTML-документа.
Для обробки подій використовують addEventListener().
<button id="hello-button">Привітатися</button>
<p id="result"></p>
<script>
const button = document.getElementById("hello-button");
const result = document.getElementById("result");
button.addEventListener("click", () => {
result.textContent = "Привіт! Кнопку натиснуто.";
});
</script>Перший аргумент addEventListener() — назва події, другий — функція, яку потрібно виконати.
document.bodydocument.body посилається на елемент body поточного документа:
console.log(document.body);Через нього можна змінити, наприклад, колір тла сторінки:
document.body.style.backgroundColor = "beige";Також існує document.head, який посилається на елемент head.
Властивість document.title містить заголовок вкладки браузера:
console.log(document.title);
document.title = "Нова назва сторінки";Це змінює текст, який відображається на вкладці браузера.
Об’єкт window.location містить інформацію про поточну адресу:
console.log(window.location.href);
console.log(window.location.hostname);
console.log(window.location.pathname);Поширена властивість href містить повну URL-адресу сторінки.
Перейти на іншу адресу можна так:
window.location.href = "https://example.com";Також доступний короткий запис:
location.href = "https://example.com";Метод location.reload() перезавантажує поточну сторінку:
location.reload();Нижче наведена невелика сторінка, яка:
знаходить елементи через document;
читає значення з поля;
реагує на натискання кнопки;
змінює текст і CSS-клас;
показує ширину вікна браузера.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Взаємодія з window і document</title>
<style>
body {
font-family: sans-serif;
padding: 24px;
}
.message {
margin-top: 16px;
color: #555;
}
.message.success {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="page-title">Привітання</h1>
<label for="name-input">Ваше ім’я:</label>
<input id="name-input" type="text">
<button id="greet-button" type="button">Привітатися</button>
<p id="message" class="message">Введіть ім’я та натисніть кнопку.</p>
<p id="window-size"></p>
<script>
const nameInput = document.getElementById("name-input");
const greetButton = document.getElementById("greet-button");
const message = document.getElementById("message");
const windowSize = document.getElementById("window-size");
function updateWindowSize() {
windowSize.textContent =
`Ширина вікна: ${window.innerWidth}px, висота: ${window.innerHeight}px`;
}
greetButton.addEventListener("click", () => {
const name = nameInput.value.trim();
if (name === "") {
message.textContent = "Будь ласка, введіть ім’я.";
message.classList.remove("success");
return;
}
message.textContent = `Привіт, ${name}!`;
message.classList.add("success");
document.title = `Вітаємо, ${name}!`;
});
window.addEventListener("resize", updateWindowSize);
updateWindowSize();
</script>
</body>
</html>Метод trim() видаляє пробіли на початку та в кінці рядка. Це допомагає перевірити, чи ввів користувач справжнє значення, а не лише пробіли.
Якщо скрипт розташований перед HTML-елементами, ці елементи ще можуть не існувати в DOM на момент виконання скрипту:
<script>
const title = document.getElementById("title");
console.log(title); // null
</script>
<h1 id="title">Заголовок</h1>Один зі способів виправити це — розташувати script перед закривальним тегом body:
<body>
<h1 id="title">Заголовок</h1>
<script src="script.js"></script>
</body>Інший спосіб — дочекатися події DOMContentLoaded:
document.addEventListener("DOMContentLoaded", () => {
const title = document.getElementById("title");
console.log(title);
});Подія DOMContentLoaded виникає після того, як браузер завантажив і побудував DOM-дерево.
Якщо селектор неправильний, результатом буде null:
const button = document.querySelector("#wrong-button");
button.addEventListener("click", () => {
console.log("Натиснуто");
});Такий код спричинить помилку, оскільки в null немає методу addEventListener().
Перевіряйте результат пошуку:
const button = document.querySelector("#wrong-button");
if (button) {
button.addEventListener("click", () => {
console.log("Натиснуто");
});
}textContent та innerHTMLtextContent вставляє текст, а innerHTML інтерпретує рядок як HTML:
element.textContent = "<b>Текст</b>"; // відобразиться як звичайний текст
element.innerHTML = "<b>Текст</b>"; // відобразиться жирнимДля даних, які ввів користувач, переважно використовуйте textContent.
querySelector() та querySelectorAll()querySelector() повертає один перший елемент:
const firstParagraph = document.querySelector("p");querySelectorAll() повертає всі знайдені елементи:
const allParagraphs = document.querySelectorAll("p");Щоб обробити всі елементи, використовуйте цикл або forEach().
Якщо скрипт виконується до побудови DOM, потрібні елементи можуть бути недоступними. Розміщуйте скрипт наприкінці body або використовуйте DOMContentLoaded.
Глобальні змінні можуть конфліктувати з кодом інших частин програми. Оголошуйте змінні всередині функцій або використовуйте модулі, коли це можливо.
window представляє поточну вкладку браузера.
document представляє HTML-документ і його DOM-структуру.
document.querySelector() знаходить перший елемент за CSS-селектором.
document.querySelectorAll() знаходить усі відповідні елементи.
textContent змінює текст, а innerHTML — HTML-вміст.
classList допомагає працювати з CSS-класами.
addEventListener() додає реакцію на події.
window.location містить інформацію про адресу сторінки.
window.innerWidth і window.innerHeight повертають розміри видимої області вкладки.
Скрипт має виконуватися після побудови DOM або чекати на подію DOMContentLoaded.