Obiekt window i document w JavaScript

1. Wprowadzenie

W przeglądarce JavaScript ma dostęp do globalnych obiektów, które reprezentują okno przeglądarki i dokument HTML:

window – globalny obiekt przeglądarki
document – reprezentuje załadowany dokument HTML (część DOM)

Te obiekty stanowią interfejs między JavaScript a przeglądarką i pozwalają kontrolować wiele aspektów działania strony.

2. Obiekt `window`

window to główny obiekt globalny w przeglądarce. Wszystkie globalne zmienne i funkcje są automatycznie właściwościami obiektu window.

2.1 Właściwości `window`

Właściwość	Opis
`window.innerWidth`	Szerokość okna przeglądarki (px)
`window.innerHeight`	Wysokość okna przeglądarki (px)
`window.location`	Informacje o URL strony
`window.history`	Historia przeglądarki
`window.navigator`	Informacje o przeglądarce
`window.screen`	Informacje o ekranie użytkownika

Przykład:

2.2 Metody `window`

Okna dialogowe:

Metoda	Opis
`alert()`	Wyświetla komunikat
`confirm()`	Wyświetla okno z pytaniem (OK/Anuluj)
`prompt()`	Wyświetla okno z polem tekstowym

Timery:

Metoda	Opis
`setTimeout()`	Wykonuje funkcję po określonym czasie
`setInterval()`	Wykonuje funkcję co określony czas
`clearTimeout()`	Anuluje `setTimeout()`
`clearInterval()`	Anuluje `setInterval()`

Przewijanie strony:

2.3 `window.location`

Obiekt location zawiera informacje o bieżącym URL.

Właściwość	Opis	Przykład
`href`	Pełny URL	`https://example.com/page`
`protocol`	Protokół	`https:`
`host`	Domena i port	`example.com:80`
`hostname`	Sama domena	`example.com`
`pathname`	Ścieżka	`/page`
`search`	Query string	`?id=123`
`hash`	Fragment (kotwica)	`#section`

Metody:

2.4 `window.history`

Pozwala nawigować po historii przeglądarki.

2.5 `window.navigator`

Informacje o przeglądarce użytkownika.

2.6 `window.screen`

Informacje o ekranie użytkownika.

3. Obiekt `document`

document to obiekt reprezentujący dokument HTML załadowany w przeglądarce. Jest częścią DOM (Document Object Model).

3.1 Właściwości `document`

Właściwość	Opis
`document.title`	Tytuł strony (można modyfikować)
`document.URL`	URL dokumentu
`document.domain`	Domena strony
`document.body`	Element `<body>`
`document.head`	Element `<head>`
`document.documentElement`	Element `<html>`
`document.cookie`	Ciasteczka (cookies)

Przykład:

3.2 Metody `document`

Wybieranie elementów:

Tworzenie elementów:

Zdarzenia:

3.3 `document.cookie`

Zarządzanie ciasteczkami (cookies).

4. Różnice między `window` i `document`

Cecha	`window`	`document`
Reprezentuje	Okno przeglądarki	Dokument HTML (DOM)
Zakres	Globalny obiekt JavaScript	Część `window` (`window.document`)
Zastosowanie	Zarządzanie oknem, timerami, historią	Manipulacja DOM (elementy HTML)

Przykład relacji:

document jest właściwością window, ale najczęściej używamy skrótu document.

5. Przykłady praktyczne

Zmiana tytułu strony:

Przekierowanie po 3 sekundach:

Sprawdzenie połączenia z internetem:

Wyświetlenie rozmiaru okna:

6. Dobre praktyki

Unikaj nadużywania alert(), confirm(), prompt() – są inwazyjne dla użytkownika
Używaj addEventListener() zamiast atrybutów HTML (onclick, itp.)
Pamiętaj, że window jest globalny – unikaj zaśmiecania go zmiennymi
Cachuj referencje do elementów DOM zamiast wielokrotnie ich wyszukiwać

7. Podsumowanie

Obiekt	Odpowiedzialność	Przykłady użycia
`window`	Okno przeglądarki, timery, historia	`alert()`, `setTimeout()`, `location`
`document`	Dokument HTML (DOM)	`querySelector()`, `createElement()`

8. Wnioski

window to globalny obiekt przeglądarki, dający dostęp do wielu funkcji
document to interfejs do manipulacji strukturą HTML (DOM)
Znajomość tych obiektów jest kluczowa dla tworzenia interaktywnych stron
window i document współpracują – window zarządza oknem, document zarządza treścią

Podsumowanie praktyczne:

Używaj window do zarządzania oknem przeglądarki i timerami, a document do manipulacji strukturą HTML. To podstawa interaktywności w JavaScript.