Obiekt window w JavaScript reprezentuje okno przeglądarki i zawiera mnóstwo metod i właściwości, które umożliwiają interakcję z otoczeniem przeglądarki. Jest to globalny obiekt, co oznacza, że większość funkcji, zmiennych oraz obiektów JavaScript są w nim zawarte jako jego właściwości lub metody. W tej lekcji przyjrzymy się niektórym z najbardziej przydatnych metod obiektu window oraz pokażemy, jak mogą być wykorzystane w różnych przypadkach.
Przykład kompletnego pliku HTML z JavaScript
Poniżej znajduje się przykład, który ilustruje użycie różnych metod obiektu window:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład metody obiektu window</title>
</head>
<body>
<h3>Przykłady użycia obiektu window w JavaScript</h3>
<button id="alertBtn">Pokaż alert</button>
<button id="confirmBtn">Pokaż confirm</button>
<button id="promptBtn">Pokaż prompt</button>
<script>
// Przycisk pokazujący alert
document.getElementById('alertBtn').addEventListener('click', function() {
window.alert('To jest alert!');
});
// Przycisk pokazujący okno confirm
document.getElementById('confirmBtn').addEventListener('click', function() {
const isConfirmed = window.confirm('Czy na pewno chcesz to zrobić?');
console.log(isConfirmed); // Wyświetla true lub false w konsoli
});
// Przycisk pokazujący prompt
document.getElementById('promptBtn').addEventListener('click', function() {
const userInput = window.prompt('Jak masz na imię?');
console.log(userInput); // Wyświetla wprowadzony tekst w konsoli
});
// Przykład użycia setTimeout
window.setTimeout(() => {
console.log('Wiadomość wyświetlona po 5 sekundach');
}, 5000);
// Przykład użycia setInterval
let counter = 0;
const intervalId = window.setInterval(() => {
console.log(`Licznik: ${++counter}`);
if(counter >= 5) {
window.clearInterval(intervalId);
}
}, 1000);
</script>
</body>
</html>
W tym przykładzie przedstawione są różne metody obiektu window, w tym:
window.alert()wyświetla okno dialogowe z informacją dla użytkownika.window.confirm()wyświetla okno dialogowe z pytaniem, na które użytkownik może odpowiedzieć tak lub nie. Zwraca wartość boolean.window.prompt()wyświetla okno dialogowe z polem tekstowym i zwraca wprowadzony przez użytkownika tekst.window.setTimeout()pozwala na wykonanie kodu po określonym czasie.window.setInterval()wykonuje kod w regularnych odstępach czasu, aż do odwołania przezwindow.clearInterval().
Podsumowanie
Obiekt window dostarcza wiele przydatnych metod, które umożliwiają interakcję z użytkownikiem oraz kontrolę nad zachowaniem przeglądarki. Znajomość tych metod jest kluczowa dla tworzenia interaktywnych i dynamicznych aplikacji webowych. W tej lekcji omówiliśmy tylko kilka z dostępnych metod, ale obiekt window oferuje znacznie więcej możliwości, które warto odkrywać.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.