JavaScript: BOM API

0:00W tej lekcji poruszymy tzw.

0:02Browser Object Model API, czyli BOM

0:05i tutaj będę chciał Ci pokazać kilka obiektów, które są dostępne na obiekcie

0:09window, które można powiedzieć, że realizują pewne zadania związane ściśle z

0:13przeglądarką internetową, natomiast nie z samym dokumentem.

0:17Czyli to, co mamy tutaj to jest DOM, a

0:19więc nie DOM API i też nie z samym językiem JavaScript,

0:23który można powiedzieć, że jest taką osobną

0:24specyfikacją. Więc te rzeczy, które Ci pokażę są związane z platformą, czy z

0:28przeglądarką, gdzie ten kod jest uruchamiany.

0:31I teraz pierwszym z obiektów, który będę chciał Ci pokazać jest Navigator i on jest

0:34dostępny pod właśnie taką globalną zmienną navigator.

0:38Natomiast ja w swoim kodzie zawsze lubię się do tego odwoływać poprzez window.navigator,

0:42bo to mi znowu sugeruje, że ja na pewno sięgam po odpowiedni obiekt, a

0:46nie po jakąś zmienną, którą ktoś w zasadzie gdzieś w kodzie

0:49przez pomyłkę mógł tak samo nazwać.

0:51Bo jeżeli byśmy sobie tutaj coś utworzyli i napisali navigator, coś tutaj przypisali,

0:55a ja gdzieś w kodzie będę się do tego odwoływał, to oczywiście jest szansa, że

0:59się odwołam do takiej przesłoniętej zmiennej.

1:01Więc ja lubię sięgać sobie po te właśnie obiekty globalne z użyciem tego przedrostka

1:06window, skoro one są na tym window zapisane.

1:08Jeżeli jednak w konsoli przeglądarki z czymś eksperymentuję, to wpisuję

1:11bezpośrednio navigator zamiast window.navigator.

1:15I to już będzie zależeć od Twoich preferencji.

1:17Jeżeli wciśniemy Enter, znowu będziemy

1:19mogli sobie podejrzeć w konsoli, że sporo rzeczy tutaj się znajduje

1:22na tym navigator i to będą i właściwości takie jak np.

1:25appCodeName

1:26i będą to jakieś metody.

1:28Zauważ jakiś bluetooth, clipboart itd.

1:30One będą zależne od tego, czy dana

1:32przeglądarka wspiera jakieś nowe rzeczy, takie związane z bluetooth

1:36powiedzmy, że będą działać we wszystkich najnowszych przeglądarkach, ale czasem

1:40może być dodana jakaś nowość, która jeszcze nie wszędzie jest.

1:43Niemniej jednak właśnie przez Navigator do

1:45takich rzeczy się będzie można odwoływać, co pozwoli nam tworzyć aplikacje

1:49internetowe, które mogą jak widzisz korzystać np.

1:52w jakiś sposób z Bluetootha.

1:54To musielibyśmy poczytać oczywiście specyfikacje czy dokumentację,

1:58do czego to służy, jak to działa,

2:00więc znowu nie czuj się tutaj jakby przytłoczony tym, że tego jest dużo,

2:04ale zapamiętaj, że obiekt Navigator udostępnia nam

2:07jeżeli chodzi o informacje to informacje o platformie.

2:11I mamy tam np. coś takiego jak appName, appVersion

2:14czy przede wszystkim coś, co jest bardzo, bardzo popularne czyli ciąg userAgent.

2:18To jest taki ciąg, który z każdym

2:20zapytaniami, jeżeli byśmy przeszli do panelu network i odświeżyli

2:23to to zapytanie, które do serwera zostało wysłane, zobacz w nagłówkach zapytania

2:30wysyła sobie coś takiego jak,

2:34o to będzie tutaj Request Headers,

2:36jak User-Agent gdzieś to tutaj powinniśmy znaleźć. I serwer na tej podstawie może

2:41jakby odczytać sobie z jakiej przeglądarki przyszło zapytanie.

2:45Więc to może odczytać serwer, ale również

2:47my z poziomu języka JavaScript na navigator.userAgent możemy to odczytać

2:53i jest to do naszego kodu zwracane jako string

2:55taki JavaScript oczywiście no i z tego można pewne informacje sobie

2:59wyciągnąć, szczególnie z użyciem wyrażeń regularnych.

3:02To jest coś, z czego też korzysta bardzo

3:04wiele bibliotek, które śledzą nasze ruchy na stronach internetowych takich jak np.

3:08Google Analytics.

3:11Na navigatorze jeszcze możemy sobie zobaczyć więcej innych ciekawych rzeczy.

3:14Na przykład będziemy mieli taką właściwość jak online, która pozwoli Ci w kodzie

3:18JavaScript sprawdzić, czy przeglądarka aktualnie jest w trybie online, czyli po

3:22prostu czy ktoś ma połączenie z internetem.

3:25Jak widzisz, to z kolei zwraca true. Czyli my się posługujemy językiem JavaScript,

3:29ale samo to navigator i wszystkie te rzeczy, one nie są częścią języka JavaScript.

3:33To jest tylko API, gdzie my za pomocą

3:35języka JavaScript możemy sobie pewne rzeczy odczytywać.

3:38Czyli w kodzie byśmy to po prostu odczytali, np.

3:41w instrukcji if(window.navigator.onLine) i to nam zwraca true lub false i

3:47możemy tutaj wykonać jakiś kod czy przeglądarka jest w trybie online czy nie.

3:51Tak więc sporo tutaj rzeczy można znaleźć.

3:53Można znaleźć też informację czy ktoś ma włączone ciasteczka,

3:56gdzieś tutaj coś takiego powinno być cookieEnabled true itd.

4:01Kolejnym ciekawym obiektem dostępnym globalnie jest obiekt screen i znowu można

4:04się do niego odwołać przez window.screen albo samo screen.

4:08To jest coś co jest super często

4:09wykorzystywane przez właśnie skrypty śledzące nas w internecie do robienia

4:13statystyk, czyli z jakich urządzeń korzystamy.

4:16Zauważ, że tu z kolei można odczytać

4:18właściwości takie jak wysokość ekranu czy dostępna szerokość.

4:23Innymi słowy rozdzielczość ekranu

4:24po prostu. Mamy tutaj również dostęp do

4:27jak widzisz kolejnego obiektu wewnątrz, czyli orientation

4:31i to oczywiście troszkę może się różnić w zależności od przeglądarek,

4:34czy one wspierają jakieś rzeczy, które tutaj są czy nie.

4:37Te rzeczy, które tutaj są będą działać we wszystkich nowych przeglądarkach,

4:40ale tak jak mówię, czasami jest tak, że

4:42coś tutaj znajdziesz, co działa w przeglądarce chrome, a na przykład jeszcze tego

4:45nie ma w Firefoksie, jeżeli to będą jakoś super nowe rzeczy.

4:48Ale zauważ, że właśnie przez obiekt Screen można się odwołać do takich rzeczy jak np.

4:52height.

4:52Więc znowu w naszym kodzie możemy powiedzieć screen.height i zostanie nam

4:56zwrócony number, czyli wartość po prostu JavaScript, bo robimy to z poziomu

5:00języka JavaScript i możemy z tą wartością sobie coś zrobić.

5:04I jeszcze kolejnym bardzo przydatnym

5:06obiektem, chociaż ich jest więcej jest obiekt location.

5:08Znowu samo location albo window.location

5:12i tutaj sobie możemy odczytać, może go wyświetlmy informacje na temat

5:16można powiedzieć w dużym uproszczeniu paska adresu, ale nie tylko.

5:20Mamy tutaj takie rzeczy jak np.

5:21protocol http.

5:23Możemy sobie to odczytać to nam zwróci taki

5:25string i sprawdzi czy ktoś jest na bezpiecznym połączeniu czy nie,

5:28mamy port, pathname, origin, href to będzie cały adres itd.

5:33I co ciekawe jeżeli byśmy chcieli

5:35przekierować na inną stronę to możemy powiedzieć location href, w dowolnym

5:38miejscu w kodzie możesz zrobić coś takiego i powiedzieć np.

5:41https://google.pl

5:45i z poziomu języka JavaScript możemy przeładować stronę przechodząc na

5:50google.pl.

5:50Więc jeżeli w Twoim skrypcie będziesz miał gdzieś coś takiego, po kliknięciu np.

5:54w jakiś przycisk wykonamy taką akcję

5:56i jak widzisz przekieruje nas do google.pl.

5:59Kolejną rzeczą, która jest ciekawa na tym

6:01obiekcie location jest metoda reload dostępna tutaj.

6:05Więc znowu możemy mieć na stronie przycisk, do

6:06którego przypiszemy zdarzenie kliknięcia o tych zdarzeniach jeszcze w dalszej części

6:10kursu i wywołamy funkcję, w której będziemy mieli taki zapis location.reload.

6:15To sprawi, że po prostu przeładujemy stronę internetową.

6:18W wielu sytuacjach może się to okazać przydatne.

6:20Możesz wyświetlać jakąś informację, że np.

6:23promocja się skończyła, przeładuj stronę.

6:25Ja niedawno robiłem coś takiego, że

6:27był licznik, który odliczał cenę promocyjną przy produkcie,

6:31no i oczywiście mógł być taki przypadek, że ktoś wejdzie kiedy np.

6:34będzie minuta do końca promocji.

6:36Co zrobić w sytuacji kiedy ktoś ma tą

6:38kartę otwartą w przeglądarce i dojdziemy z licznikiem do zera?

6:42Zrobiliśmy tak, że wyświetlaliśmy po prostu

6:44komunikat, że widoczna przez Ciebie cena już nie obowiązuje,

6:48odśwież stronę, żeby zobaczyć aktualną cenę.

6:50No i właśnie ten link odśwież stronę

6:53miał przypisane zdarzenie, w którym robię location.reload, żeby ktoś mógł od razu

6:57kliknąć i sobie przeładować stronę, a nie musiał klikać tutaj w przeglądarce.

7:01Tak więc do wielu rzeczy może się to okazać bardzo przydatne.

7:04Warto wiedzieć, że coś takiego jest.

7:06To zatem tyle jeśli chodzi o te trzy takie najbardziej popularne obiekty, czyli

7:10location, czyli obiekt, screen, a także navigator.

7:13W trakcie tego, jak będziesz poznawał tworzenie stron internetowych od tej

7:17strony właśnie JavaScript, to na pewno natkniesz się też na inne tego typu obiekty.

7:22Nie musisz ich wszystkich znać, nie musisz o wszystkich wiedzieć.

7:24Pamiętaj, że mamy globalny obiekt window, a pod nim są jeszcze inne obiekty, na

7:28których znajdują się specyficzne dla przeglądarki akcje lub też informacje

7:34i je właśnie nazywamy Browser Object Model.

7:37Natomiast te, które będą specyficzne

7:39wyłącznie dla tego drzewa DOM, gdzie będziemy już w kolejnych lekcjach

7:42przeszukiwać te elementy, dodawać je, zmieniać ich atrybuty takie jak np.

7:46class to to będzie DOM, czyli Document Object Model.

7:49A jeszcze oprócz tego wszystkiego jest sam ten silnik wykonujący język JavaScript.