Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik HTML (lub XML) Przeglądarka Ekran Pliki CSS i JS Obiekty BOM Obiekty DOM Skrypty JavaScript używają właściwości przeglądarki, a przeglądarka może zmieniać zawartość plików HTML (XML), CSS i JS. Dostępne do wykorzystania właściwości przeglądarki są opisywane jako modeli BOM (Browser Object Model) i DOM (Document Object Model). Środki skoncentrowane w modelu BOM sterują oknem przeglądarki, a środki modelu DOM dokumentem. Przypomnijmy, że obiektem w tej tematyce nazywa się nieuporządkowany zbiór właściwości, z których każda może być wartością prymitywną, innym obiektem lub funkcją (nazywanej też metodą) (patrz standard ECMA-262 języka Java- Script). Właściwości obiektów mają implementacji. Model BOM (Browser Object Model) porządkuje komponenty przeglądarki, które odpowiadają za dostęp do okna wyświetlanym na ekranie i manipulowanie tym oknem. Standard opisujący model BOM nie istnieje, ale w każdej przeglądarce można wydzielić komponenty modelu BOM. Skrypty JavaScript mają dostęp do obiektów BOM i przez nich manipulują oknem przeglądarki. Bazowym obiektem modelu BOM jest obiekt window. Obiekt window Manipulowanie oknem przeglądarki Obiekt window ma metody do manipulowania oknem przeglądarki:
pionie, moveby(dx, dy) przemieszcza okno o dx pikseli w poziomie i o dy pikseli w moveto(x, y) ustawia lewy górny róg okna w punkcie (x, y), gdzie x i y są liczone w pikselach, resizeby(dw, dh) zmienia rozmiar okna o dw pikseli w poziomie i o dh pikseli w pionie, resizeto(w, h) ustawia rozmiar okna na szerokość w i wysokość h, gdzie w i h są liczone w pikselach. Internet Explorer ma dodatkowe właściwości do definiowania pozycji okna: screenleft pozycja okna w poziomie (pikseli), screentop pozycja okna w pionie (pikseli). Otwieranie i zamykanie okien Metody obiektu window do otwierania i zamykania okien: open( _adres_url, _nazwa_okna, _atrybuty_przez_przecinek ) - otwieranie okna, close() - zamykanie okna. Przykład: window.open( http://www.ap.siedlce.pl, winap, width=400,height=250,top=50, left=50,resizeable=yes ) Jeżeli skrypt dotyczy głównego okna, to można nie wskazywać na obiekt window : open( http://www.ap.siedlce.pl, winap, width=400,height=250,top=50, left=50,resizeable=yes ) Atrybuty okna do stosowania w trzecim argumencie: left=n, top=n, width=n, height=n współrzędna od lewej, od góry oraz szerokość i wysokość okna (N to liczba), resizable=yes/no możliwość zmiany rozmiaru okna przez przeciągnięcie ramki (wartość no jest domyślna), scrollable=yes/no możliwość przewijania okna (wartość no jest domyślna),
location=yes/no zmuszenie do wprowadzenia pasku adresu (wartość no jest domyślna), toolbar=yes/no zmuszenie do wprowadzenia pasku narzędzi (wartość no jest domyślna), status=yes/no zmuszenie do wprowadzenia pasku stanu (wartość no jest domyślna). Uwaga. W ciągu argumentów nie można stosować spacje. Otwieranie systemowych okien dialogowych Obiekt window zawiera trzy metody do otwierania systemowych modalnych okien dialogowych: alert(_informujący_ciąg_znaków) tworzy modalne okno dialogowe z przyciskiem OK i wyświetla tekst _Informujący_ciąg_znaków, confirm(_ciag_znaków_zapytania) tworzy modalne okno dialogowe z dwoma przyciskami OK i Anuluj oraz wyświetla tekst _Ciąg_znaków_zapytania. Funkcja zwraca wartość true, jeśli było naciśnięte OK, prompt(_ciąg_znaków_zapytania, _Odpowiedź_domyślna) tworzy modalne okno dialogowe z polem edycyjnym i dwoma przyciskami OK i Anuluj oraz wyświetla tekst _Ciag_znaków_zapytania. Funkcja zwraca wartość pola edycyjnego, jeśli było naciśnięte OK. W przypadku naciśnięcia przycisku Anuluj funkcja zwraca wartość null. Pasek stanu Do definiowania zawartości pasku stanu obiekt window ma dwie właściwości: strony. Pasek stanu znajduje się w dolnej części okna. status = _tekst_na_krótko tekst jest wyświetlany na chwile, defaultstatus = _tekst_na_stałe tekst jest wyświetlany na czas oglądania Przykład: <input type="button" name="button1" value="start" onmouseover= window.status= Start wyszukiwania ; onclick=... />
Czasomierz okna Obiekt window ma metodę settimeout do odliczenia odstępów czasowych. Metoda settimeout ma dwa argumenty, z których pierwszy jest skryptowym odwołaniem do funkcji, która będzie wywołana po upływie czasu, a drugi argument jest odstępem czasowym w milisekundach. Przykład: <html> <head> <script type="text/javascript">function funk(){alert("czas");}</script> </head> <body> <script type="text/javascript">settimeout(funk,4000);</script> </body> </html> Do rezygnacji z odliczenia odstępów czasowych służy metoda cleartimeout(_identyfikator_zwrócony_metodą_settimeout). Dwie metody setinterval i clearinterval podobne do metod settimeout i clear- Timeout służą do nieskończonego powtórzenia odstępów czasowych. Obiekty obiektu window Obiekt window zawiera następujące obiekty i kolekcji obiektów: document - obiekt zawierający właściwości dokumentu, frames kolekcja ramek okna, z których każda jest obiektem window, history - lista stron, które odwiedzał użytkownik, location obiekt reprezentujący adres URL (Uniform Resource Locator), navigator obiekt zawierający informację o przeglądarce, screen obiekt zawierający informację o monitorze. Obiekty frames Obiekty frames są kolekcja ramek okna, z których każda jest obiektem window. ramki. Ilość obiektów można otrzymać przez właściwość length : var ilo=windows.frames.length Aby odwołać się do jednego z obiektów frames należy zastosować indeks
Obiekt history Obiekt history są lista stron, które wcześniej odwiedził użytkownik. Obiekt history ma metody: back() do przejścia wstecz, forward() do przejścia do przodu, go(_ilość) do przejścia wstecz lub do przodu na odległość wskazaną w argumencie _ilość. w liście. Właściwość length daje możliwość sprawdzić, ile adresów URL znajduje się Obiekt history nie udostępnia adresy URL. Obiekt location Obiekt location reprezentuje adres URL załadowanej strony. Obiekt location ma właściwości: href pełny adres URL, host nazwa serwera, hostname nazwa serwera bez prefiksu www, protocol nazwa protokołu, która znajduje się w adresie URL przed znakami //, pathname wszystko, co następuje w adresie URL po nazwie serwera, search ciąg zapytania, który może znajdować się w adresie URL po znaku?, hash wszystko, co następuje w adresie URL po znaku #, port numer portu, który może znajdować się w adresie URL. Właściwość href umożliwia ustawienie adresu URL: location.href= http://www.ap.siedlce.pl/ Metody obiektu location : assign(_adres_url) do ustawienia adresu URL, replace(_adres_url) do ustawienia adresu URL oraz usuwania aktualnego adresu z listy historii, reload(_znacznik_źródła) ładuje ponownie aktualną stronę z serwera, jeśli _znacznik_źródła jest równy true, lub z bufora, jeśli _znacznik_źródła jest równy false, tostring() zwraca pełny adres URL.
Obiekt navigator Obiekt navigator zawiera informację o przeglądarce. Ilość właściwości obiektu różni się w zależności od przeglądarki. Dlatego na bazie zbioru właściwości można ustalić typ przeglądarki. Obiekt navigator przeglądarki Internet Explorer ma właściwości: appcodename nazwa kodowa przeglądarki, appname nazwa oficjalna przeglądarki, appversion wersja przeglądarki, appminorversion dodatkowa informacja o wersji przeglądarki, browserlanguage język przeglądarki, systemlanguage język systemu operacyjnego, userlanguage język użytkownika przeglądarki, cpuclass klasa procesora, platform platforma komputera, plugins lista bibliotek-wtyczek komputera, cookieenabled znacznik włączenia obsługi cookies, online znacznik podłączenia do Internetu, useragent nagłówek User-Agent, userprofile profil użytkownika przeglądarki. Obiekt navigator przeglądarki Internet Explorer ma metody: javaenabled() zwraca znacznik włączenia obsługi Javy, taintenabled() zwraca znacznik zezwolenia na przekazywanie zabezpieczonych danych. Obiekt screen Obiekt screen zawiera informację o ekranie i ma następujące właściwości: height, width wysokość i szerokość ekranu w pikselach, availheight, availwidth dostępne dla okien wysokość i szerokość ekranu w pikselach, colordepth ilość bitów palety kolorów, zwykle 4*8=32.
Obiekt document Obiekt document występuje w obydwóch modelach: BOM i DOM. Każda z tych modeli dołącza do obiektu swój podzbiór właściwości i metod. W modelu BOM obiekt document składa się z szeregu kolekcji: anchors kolekcja kotwic dokumentu (konstrukcje typu <a name= _nazwa_kotwicy"></a>) applets kolekcja apletów dokumentu, embeds kolekcja obiektów osadzonych w dokumencie, forms kolekcja formularzy na stronie, images kolekcja obrazów dokumentu, links _adres_url"></a>). kolekcja łącz (odnośników) (konstrukcje typu <a href= przykład: Ilość obiektów każdej kolekcji można otrzymać przez właściwość length, na var ilo=windows.images.length Aby odwołać się do jednego z obiektów należy zastosować indeks obiektu, na przykład: var img=windows.document.images[0] lub krócej var img=document.images[0] przykład: Można też odwołać się do jednego z obiektów poprzez nazwy obiektu, na var img=windows.document.images[ _nazwa_obrazu ] lub krócej var img=document.images[ _nazwa_obrazu ] Właściwości obiektu document w modelu BOM: alinkcolor kolor aktywnych łącz (odnośników) zdefiniowanych poprzez konstrukcję <body alink= _kolor >,
linkcolor kolor łącz (odnośników) zdefiniowanych poprzez konstrukcję <body link= _kolor >, vlinkcolor kolor odwiedzonych łącz (odnośników) zdefiniowanych poprzez konstrukcję <body vlink= _kolor >, bgcolor kolor tła, fgcolor kolor znaków, lastmodified data ostatniej modyfikacji strony, referrer adres URL o jedną pozycję wcześniej w historii przeglądarki, URL bieżący adres URL, title tytuł wyświetlony poprzez konstrukcję <title>. Metody obiektu document w modelu BOM: open() otwarcie dokumentu w celu zapisu do niego, close() zamkniecie dokumentu otwartego metodą open(), co powoduje wyświetlenie dokumentu, write( _tekst_w_języku_html ) wyświetlenie argumentu w miejscu wywołania metody, writeln( _tekst_w_języku_html ) wyświetlenie argumentu w miejscu wywołania metody oraz przejście na nowy wersz,