Obiekty przeglądarki

 

Obiekty DOM

DOM (ang. Document Object Model) to sposób reprezentacji złożonych dokumentów XML i HTML w postaci modelu obiektowego.

Gdy kod strony jest wczytywany do przeglądarki, przeglądarka zamienia ciąg znaków na stronę internetową. Informacje na temat interpretacji kodu HTML przeglądarka przechowuje w elementach będących obiektami (są to np. informacje o tym, które elementy przedstawić w postaci nagłówków, paragrafów itp.). Obiekty te tworzą obiektowy model dokumentu.

DOM opisuje hierarchię obiektów na stronie oraz udostępnia metody i właściwości, które umożliwiają manipulowanie nimi. W tej hierarchii na samej górze znajduje się okno przeglądarki, czyli obiekt window. Zawiera on wszystkie inne obiekty, funkcje i właściwości strony. W oknie znajduje się obiekt document, czyli otwarta strona internetowa. W obiekcie document znajdują się obiekty strony. W skryptach definiujemy różne działania związane z istniejącymi obiektami, czyli manipulujemy przez skrypty obiektami strony internetowej. Dzięki skryptom można wczytać nową stronę do przeglądarki, zmienić elementy dokumentu, otwierać okna lub modyfikować tekst na stronie. Dzięki DOM język JavaScript staje się narzędziem tworzenia dynamicznych stron internetowych.


Hierarchia obiektów DOM

Odwołując się do obiektu, należy używać nazw obiektów nadrzędnych oddzielonych kropkami, po których następuje nazwa wybranego obiektu.

window.document.link1

Wycinek hierarchii DOM z najważniejszymi obiektami strony internetowej jest pokazany poniżej

 

Obiekty przeglądarki

 

Obiekt window

Obiektem nadrzędnym dla wszystkich obiektów jest obiekt window, który zawiera okno przeglądarki. W danej chwili może istnieć wiele obiektów window. Każdy z nich reprezentuje otwarte okno przeglądarki. Odwołanie do jego właściwości lub metod nie wymaga podania nazwy obiektu. Tworzony jest automatycznie podczas otwierania okna przeglądarki.

Do otwierania nowego okna używamy metody open(). Jako parametry metody występują adres URL otwieranej strony oraz nazwa wewnętrzna okna (nie mylić z nazwą wyświetlaną przez przeglądarkę zdefiniowaną metatagiem title.

window.open('http://www.informatyka.orawskie.pl,'Strona');

Do określania rozmiaru okna mogą być używane właściwości:

• window.innerHeight — wysokość okna przeglądarki
• window.innerWidth — szerokość okna przeglądarki

Do zamknięcia okna używana jest metoda close().

 

Obiekt document

Obiekt document reprezentuje stronę internetową (dokument HTML). Jest on potomkiem obiektu window. Za pomocą polecenia window.document można odwołać się do bieżącego dokumentu. Można to zrobić również za pomocą polecenia document. Odwołanie nastąpi do bieżącego dokumentu w bieżącym oknie. Jeżeli zostało otwarte kilka okien, to aby określić, do którego dokumentu powinno nastąpić odwołanie, należy podać nazwę okna i nazwę dokumentu.

Informacje o bieżącym dokumencie otrzymamy, odwołując się do właściwości i metod obiektu document

• document.URL zwraca adres URL dokumentu jako ciąg tekstu
• document.title — zwraca tytuł strony zdefiniowany w znaczniku title
• document.lastModified — zwraca datę ostatniej modyfikacji strony
• document.bgColor — określa kolor tła dokumentu ustawianego atrybutem bgcolor znacznika body
• document.fgColor określa kolor pierwszego planu dokumentu ustawianego atrybutem text znacznika body
• document.linkColor — określa kolor łącza w dokumencie ustawianego atrybutem link
• document.alinkColor — określa kolor łącza w dokumencie ustawianego atrybutem alink
• document.vlinkColor — określa kolor łącza w dokumencie ustawianego atrybutem vlink
• document.cookie — ustawia lub odczytuje cookie dla dokumentu

Do odwołania się do elementu strony służą metod:

• getElementById( ) - używana jest, gdy element, do którego się odwołujemy, posiada atrybut id
• getElementByTagName( ) - wykorzystywana do pobrania kolekcji zawierającej elementy danego typu.

 

Przykładowo dla elementów:

Odwołanie w skrypcie może mieć postać:

• document.getElementByld ( "tekst1" ) — odwołanie do akapitu z atrybutem id="tekst1"
• document.getElementsByTagName(p) — odwołanie do kolekcji akapitów
• document.getElementsByTagName(p) [0] — odwołanie do pierwszego akapitu w kolekcji

Używając metody getElementByld(), należy pamiętać, że jest to metoda obiektu document, dlatego dostęp do niej jest możliwy tylko za pomocą tego obiektu. Odwołanie do elementu strony będzie możliwe tylko wtedy, gdy temu elementowi zostanie nadany atrybut id.

 

Właściwości innerHTML

Możliwość odwołania się do elementu strony jest wykorzystywana do zmiany jej zawartości. Zawartość elementu strony można odczytać i zmienić, używając właściwości innerHTML. Właściwość tę posiada każdy element strony internetowej. Określa ona wartość przypisaną elementowi. Właściwość innerHTML może być użyta tylko razem z metodą getElementById( ) i tylko dla elementów, dla których został zdefiniowany identyfikator id.

 

 

Obiekt history

Drugim obiektem potomnym w stosunku do obiektu window jest obiekt history. Zawiera on informację o odwiedzanych adresach URL. Posiada zdefiniowane metody, które pozwalają na przejście do wcześniej odwiedzanych stron.

• history.go() — otwiera określony adres URL z listy historii. W nawiasach należy podać liczbę dodatnią lub ujemną, określającą, o ile do przodu lub do tyłu należy przemieścić się, aby otworzyć określony adres, np. history.go(3)
• history.back() — otwiera poprzedni adres URL z listy historii
• history.forward() — otwiera następny adres URL z listy historii, jeżeli taki istnieje

 
Obiekt history posiada jedną właściwość history.length, która zawiera informację o długości listy historii.
Wykorzystując metody back() i forward(), można utworzyć skrypty, które wyświetlą na stronie przyciski Wstecz oraz Dalej, umożliwiające poruszanie się w przeglądarce po odwiedzanych stronach.

 

Obiekt location

Jest obiektem potomnym w stosunku do obiektu window. Zawiera on informację o bieżącym adresie dokumentu otwartego w oknie. Za pomocą właściwości tego obiektu można uzyskać pełną informację o adresie URL, można też uzyskać dostęp do jego fragmentów.

• location.href — zawiera cały adres URL
• location.protocol — zawiera protokół
• location.hostname — zawiera nazwę hosta
• location.port — zawiera numer portu
• location.pathname — zawiera nazwę pliku ze ścieżką
• location.search — zawiera zapytanie, jeżeli znajduje się ono w adresie
• location.hash — zawiera nazwę kotwicy, jeżeli kotwica występuje w adresie

 

Obiekt location posiada dwie metody:

• location.reload() — odświeża (ponownie wczytuje) bieżący dokument. Jeżeli dodany zostanie parametr true, odświeżanie odbędzie się niezależnie od tego, czy dokument uległ zmianie, czy nie
• location.replace() — zastępuje bieżący adres URL nowym.

Obiekt link

Obiektem potomnym w stosunku do obiektu document jest obiekt link. Zawiera on informację o łączu do określonego adresu. Obiekty link są zapisane w tablicy links. W dokumencie może wystąpić wiele obiektów link. Każdy z nich jest zapisany jako oddzielny element tablicy.
Właściwość tablicy document.links.length określa liczbę linków na stronie.
Każdy obiekt link zapisany w tablicy ma listę właściwości określających adres URL. Są to właściwości takie same jak dla obiektu location. Można się do nich odwoływać, podając numer w tablicy i nazwę właściwości.

link1 = links[0].href;

 

Obiekt form

Obiektem potomnym w stosunku do obiektu document jest również obiekt form. Zawiera on informacje dotyczące formularzy występujących w dokumencie HTML. Obiekty form są zapisane w tablicy forms. Ponieważ w dokumencie może wystąpić wiele formularzy, każdy z nich jest zapisany jako oddzielny element tablicy. Do wybranego formularza można odwoływać się przez indeks lub przez nazwę, wpisując w kodzie polecenie document.forms[0] lub document.forms['Form']. Lepszą metodą odwołania do formularza jest wykorzystanie metody getElementById(), np. document.getElementById('form1').

Jeżeli został zastosowany atrybut name, to do formularza można odwołać poprzez ten atrybut np: document.form1 gdzie form1 to wartość atrybutu name.

Każdy element formularza jest obiektem, więc posiada właściwości. Jedną z nich jest właściwość value, która przechowuje bieżącą wartość elementu.

 

Elementy formularza tworzą tablicę. Dostęp do nich jest możliwy przez odwołanie się do kolejnych elementów tej tablicy (elements[i]). Podobnie jak do całego formularza, do jego elementów można odwoływać się przez indeks lub przez nazwę:



lub za pomocą metody getElementById():

Zadania

 

1. Utwórz skrypt z przyciskami otwierającymi stronę www.onet.pl i www.informatyka.orawskie.pl.
2. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się rozmiar okna przeglądarki.
3. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się adres strony.
4. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się tytuł strony.
5. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się data ostatniej modyfikacji strony.
6. Napisz skrypt obliczający pole prostokąta. Boki prostokąta mają być podawane przez formularz, a wynik podany w bloku akapitu.
7. Napisz skrypt ciągle wyświetlający aktualny czas.
8. Utwórz stone HTML z przyciskami Wstecz i Dalej, które umożliwią przeglądanie odwiedzanych stron WWW.
9. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się nazwa hosta.
10. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się nazwa protokołu.
11. Utwórz skrypt z przyciskiem, po wciśnięciu którego wyświetli się numer portu.
12. Utwórz stronę WWW opartą o szablon jak poniżej. W stopce strony po prawej stronie umieść datę ostaniej modyfikacji. W stopce po lewej stronie umieść aktualną datę i czas. Czas powinien się automatycznie aktualizować.