Objekt window

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 przez window.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.

Poprzedni
Następny
Scroll to Top