[ Pobierz całość w formacie PDF ]
w momencie zajścia określonego zdarzenia na konkretnym elemencie należy wywołać wskazaną
funkcję. Każdy obiekt, niezależnie od tego, czy jest to całe okno przeglądarki, czy tylko niewielki ele-
ment strony (niekoniecznie pole formularza), może zgłosić zdarzenie. Najczęściej samodzielnie defi-
niuje się funkcję, która zostanie wywołana. Połączenie obiekt typ zdarzenia funkcja daje na-
prawdę sporo możliwości.
Aby móc podłączyć się pod zdarzenie wysyłania formularza, musimy najpierw uzyskać referen-
cję do formularza. Najprostszym rozwiązaniem okazuje się użycie metody getElementById()
obiektu document. Obiekt document dotyczy całego dokumentu HTML od znacznika otwierają-
cego html, poprzez znaczniki head i body. Obiekt document zawiera metodÄ™ getElementById(),
która jako argument przyjmuje nazwę identyfikatora, a w zamian zwraca referencję do elementu (o ile
istnieje). Uzyskaną wartość można przechować w zmiennej w celu pózniejszego użycia:
var loginForm = document.getElementById('loginForm');
W tym momencie, o ile tylko istnieje jeden element (dowolnego typu) o atrybucie id z warto-
ścią loginForm, zmienna loginForm będzie zawierała referencję do tego elementu. Rozdział 9.
znacznie dokładniej omawia obsługę DOM, ale metoda getElementById() jest tak ważna i prosta
w użyciu, że można ją wprowadzić już w rozdziale 2.
Po uzyskaniu referencji do formularza procedurę obsługi zdarzenia ustalimy w następujący
sposób:
element.onzdarzenie = funkcja;
W naszym przypadku będzie to:
loginForm.onsubmit = validateForm;
Ramka w dalszej części dokładniej przedstawia szczegóły techniczne składni. Wystarczy powie-
dzieć, że gdy element loginForm będzie zamierzał wysłać dane formularza do serwera, wcześniej
wywoła funkcję validateForm(). Zauważ, że po prawej stronie przypisania została użyta tylko i wy-
łącznie nazwa funkcji, bez nawiasów klamrowych lub cudzysłowów. %7ładna z poniższych składni
nie jest prawidłowa:
loginForm.onsubmit = 'validateForm'; // NIE!
loginForm.onsubmit = validateForm(); // NIE!
W teorii następny krok polegałby na zdefiniowaniu funkcji validateForm(), która przeprowa-
dziłaby sprawdzenie wartości elementów formularza. Niestety, konieczny jest jeszcze jeden krok.
Już wyjaśniam&
czymy kod 47
Kup ksi k Poleć ksi k
Gdy klient pobiera dokument z serwera, uzyskuje dane w odpowiedniej kolejności. W przypad-
ku strony HTML oznacza to, że przeglądarka dosłownie najpierw otrzyma DOCTYPE, następnie na-
wias otwierający html, znacznik head i treść nagłówka, a dopiero pózniej element body i jego zawartość,
i tak aż do samego końca dokumentu. Gdy przeglądarka znajdzie odnośnik do innych materiałów,
które muszą zostać pobrane plików CSS, obrazów, materiałów Flash, kodu JavaScript itp. je
również musi pobrać. W kwestii dostępu do dokumentu DOM proces ten jest niezwykle istotny,
ponieważ przeglądarka nie zna pełnej reprezentacji DOM, dopóki nie przetworzy całej zawartości
strony HTML (rysunek 2.9). Oznacza to, że w języku JavaScript nie można bezpiecznie użyć metody
document.getElementById() do momentu pełnego wczytania strony.
RYSUNEK 2.9. Przegl darka wczytuje dokument HTML i tworzy obiekt DOM
Tym, co pozwala upewnić się, że można bezpiecznie korzystać z elementów DOM, jest przede
wszystkim pojawienie się zdarzenia ukończenia wczytywania strony WWW. Ponieważ jest to zda-
rzenie, możemy dodać procedurę jego obsługi:
window.onload = init;
WSKAZÓWKA: Powodem, dla którego witryny wydaj si wczytywa szybciej, gdy kod JavaScript umie ci si
na ko cu dokumentu, jest to, e przegl darka nie musi zatrzymywa procesu renderowania strony w oczekiwa-
niu na pobranie i wykonanie kodu JavaScript.
UWAGA: Celowo upro ci em w opisie pewne szczegó y dotycz ce pobierania i wykonywania elementów
strony, by nie zaciemni ogólnej idei. Je li jeste zainteresowany tym tematem, z pewno ci znajdziesz
w internecie wiele materia ów uzupe niaj cych.
Kod informuje, że w momencie zakończenia wczytania strony HTML należy wywołać funkcję
init(). To w jej wnętrzu możemy dodać procedurę obsługi zdarzenia do formularza, bo operacje
na obiekcie DOM będą już bezpieczne:
function init() {
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = validateForm;
}
Rozdział 7. zawiera wszystkie niezbędne informacje związane z tworzeniem funkcji, ale pod-
[ Pobierz całość w formacie PDF ]