Kurs obiektowego JavaScript (28)

Autor: Damian Chodorek • Opublikowany: 19 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Dokładniejsze omówienie modelu BOM. Obiekt window.

Obiekt window

Jak pamiętasz z poprzednich lekcji – każdy host w JS dostarcza obiekt globalny. Jeśli chodzi o przeglądarki, tym obiektem jest window. Wszystkie zmienne globalne, stają się polami tego obiektu.

Jak wspomniałem w poprzedniej części, pomiędzy przeglądarkami mogą występować różnice w implementacji poszczególnych obiektów. Na potrzeby tego kursu przyjrzymy się wyłącznie tym obiektom i ich własnościom, które są w miarę jednolite.

window.navigator

Jest to pole, które posiada szereg informacji na temat przeglądarki i jej możliwości. Szczególnie przydatnym jest window.navigator.userAgent – to tekst identyfikujący przeglądarkę. Jeśli chcesz pisać profesjonalny kod, nie polegaj na tym sposobie odnajdywania rodzaju i wersji przeglądarki, kiedy potrzebujesz sprawdzić jej możliwości. Zamiast tego skorzystaj ze sposobu zwanego feature sniffing (to samo co capabilities detection). Przykład poniżej.

/*jeśli nie jesteśmy pewni czy dana funkcjonalność jest w danej przeglądarce, robimy tak:*/
if( typeof window.addEventListener==='function' ){
  //kod jeśli funkcjonalność JEST wspierana
}else{
  //kod jeśli funkcjonalność NIE jest wspierana
}

Całkiem łatwe prawda? Daną funkcjonalność sprawdzamy przy pomocy typeof oraz if.

window.location

Ten obiekt zawiera informacje dotyczące URL danej strony. Przykładowo window.location.href przechowuje pełny adres, a window.location.hostname wyłącznie domenę. Poniżej lista kilku przydatnych metod.

  • window.location.reload() – odświeża stronę,
  • window.location.assign() – przechodzi na podany adres,
  • window.location.replace() – przechodzi na podany adres i nie tworzy nowego wpisu w historii przeglądania.

window.history

To obiekt, który dostarcza pewnych informacji na temat przeglądanych wcześniej stron. Przykładowo możesz sprawdzić ile stron odwiedził użytkownik zanim wszedł na Twoją, przy pomocy window.history.length. Ze względów bezpieczeństwa nie da się jednak pobrać ich adresów.

Możesz spowodować przejście do poprzedniej lub następnej strony, którą odwiedził użytkownik. Działa to jak przyciski w przód i w tył w przeglądarce. Odpowiadają za to metody: window.history.forward() oraz window.history.back().

Metoda window.history.go() pozwala przejść o kilka stron do przodu lub do tyłu naraz.

window.history.go(-2); //przejdzie dwie strony wstecz
window.history.go(0); //odświeży aktualną stronę

window.screen

Do bardzo ciekawy obiekt, który dostarcza informacji o pulpicie użytkownika. Przykładowo window.screen.colorDepth odpowiada za głębię kolorów.

Poniżej lista pól opisujących wysokość i szerokość ekranu:

  • window.screen.width – szerokość ekranu,
  • window.screen.height – wysokość ekranu,
  • window.screen.availWidth – tylko dostępna szerokość ekranu, to znaczy odejmuje wszelkie systemowe paski menu,
  • window.screen.availHeight – analogicznie jak wyżej,

window.open()

To metoda, która pozwala na otworzenie nowego okna. Jej parametrami są:

  • URL – adres strony, która ma zostać załadowana w nowym oknie,
  • name – określa sposób otwarcia nowego okna,
  • specs – lista wartości rozdzielonych przecinkami, które dotyczą takich właściwości okna jak możliwość zmiany rozmiaru, wysokość, szerokość, …,
  • replace – parametr, który mówi czy nowe okno ma dodać nowy wpis do historii przeglądarki czy zastąpić aktualny.

Metoda open() zwraca referencję do obiektu otwartego okna. Zawsze warto sprawdzić co kryje się pod tą zmienną. Czasem operacja otwarcia może być zablokowana. Zależy to np. o ustawień przeglądarki.

window.close()

Oczywiście służy do zamknięcia aktualnego okna.

window.moveTo(), window.moveBy(), window.resizeTo()

Pierwsze dwie metody służą do zmiany położenia okna przeglądarki na pulpicie. Przyjmują parametry określające pozycję w poziomie i pionie.

Trzecia metoda zmienia rozmiar okna przeglądarki. Przyjmuje nową szerokość i wysokość.

Ogólnie nie powinno się korzystać z tych metod, ponieważ istnieje duża szansa, że zdenerwują użytkownika. Używaj ich tylko jeśli masz naprawdę dobry powód.

window.alert(), window.prompt(), window.confirm()

Metody te służą do wyświetlania określonych okien dialogowych. window.alert() pokaże jedynie okienko z komunikatem. window.prompt() umożliwi wpisanie użytkownikowi jakiegoś tekstu, a window.confirm() umożliwi wybranie jednej z dwóch opcji: OK lub CANCEL.

var answer=confirm("Co wybierasz?");
console.log(answer);

Wykonanie którejś z powyższych metod wiąże się z zatrzymaniem wykonywania kodu JS. Do momentu, aż użytkownik nie kliknie przycisku, nie wykona się ani jedna instrukcja więcej.

window.setTimeout(), window.setInterval()

Metody służą do wykonywania danej funkcji w pewnych odstępach czasu. Pierwsza z nich wykonuje podaną funkcję jeden raz, po upływie określonej liczby milisekund. Druga wykonuje funkcję co określoną liczbę milisekund, wiele razy.

function dot(){ console.log('.'); }
setTimeout(dot,2000); //po 2 sekundach na konsoli pojawi się kropka
/*setTimeout() zwraca identyfikator funkcji, który może posłużyć do odwołania działania*/
function dot(){ console.log('.'); }
var funId=setTimeout(dot,2000);
clearTimeout(funId); //zanim upłynie 2 s, odwołujemy funkcję,
var id=setInterval(dot, 2000); //po upływie każdych 2 s, wykona się funkcja
clearInterval(id); //od tego momentu funkcja przestanie się wykonywać

Ewentualne parametry funkcji, którą chcemy wywołać po jakimś czasie, należy przekazać po liczbie milisekund.

window.document

Ten obiekt odnosi się do aktualnie załadowanego dokumentu czyli strony WWW. Wszystkie jego pola i metody są związane z modelem DOM. Zostaną omówione w kolejnej lekcji.

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (29)

Zobacz również
Kurs obiektowego JavaScript (26)Dostęp do klasy nadrzędnej. Więcej sposobów dziedziczenia.
Kurs obiektowego JavaScript (27)Jak dołączyć kod JS do strony HTML? Poznaj modele BOM i DOM.
Kurs obiektowego JavaScript (29)Model DOM. Sposoby nawigowania po węzłach drzewa.
Kurs obiektowego JavaScript (30)Funkcje skrótowe. Edycja elementów DOM.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.