[ Pobierz całość w formacie PDF ]
na słowo this. Pozwala ono tworzyć odwołania do elementu, w którym jest
umieszczone. Przykładowo w wierszu zaprezentowanego powyżej kodu instruk-
cja pobierająca wartość zapisaną w zmiennej the_url umieszczona jest w znacz-
niku . Oznacza, to że możecie zastąpić fragment identyfikujący ten znacznik
wyrazem this. Innymi słowy, omawiane polecenie można zapisać w tak:
this.the_url.value;">
Elementy identyfikujące formularz (window.document.the_form) zastąpiłem
słowem this, ponieważ opisywany fragment kodu znajduje się wewnątrz znacz-
nika . Czasami trudno zidentyfikować obiekt, do którego odnosi się wyraz
this, ale zwykle jest nim znacznik, w którym słowo to zostało wpisane.
Oto kolejny przykład. Załóżmy, że napisaliście funkcję o nazwie checkEmail().
Sprawdza ona poprawność wpisanego adresu poczty elektronicznej (zasadę jej
działania omówię w rozdziale 11.). Formularz i pole tekstowe służące do wpisy-
wania adresu generowane są przez następujący kod:
"checkEmail(window.document.the_form.email.value);"/>
Elementy window.document.the_form.email umieszczone wewnątrz uchwytu
zdarzenia onChange identyfikują pole tekstowe, którego część stanowi wspomniany
uchwyt. Pole tekstowe przesyła zapisaną w nim wartość do funkcji checkEmail(),
w związku z czym zdarzenie onChange można również zapisać tak:
onChange = "checkEmail(this.value);">
W tym przypadku słowo this zastępuje zapis window.document.the_form.
email, ponieważ jest ono umieszczone w znaczniku pola tekstowego.
Rozwijane menu jako narzędzia do nawigacji
Jesteście już gotowi, aby opracować własne narzędzie nawigacyjne oparte na roz-
wijanym menu, podobne do umieszczonego na stronie organizacji Lekarze bez
granic (patrz rysunek 7.2). Przykładowe narzędzie tego typu przedstawione zostało
na rysunku 7.13. Poniżej (listing 7.14) zamieszczony jest odpowiedni skrypt.
Przesyłanie i odbieranie informacji za pomocą formularzy 163
Rysunek 7.13. Proste narzędzie nawigacyjne
Listing 7.14. Rozwijane menu jako narzędzie do nawigacji
Nawigacja z użyciem rozwijanego menu
function visitSite(the_site)
{
window.location = the_site;
}
// od tego miejsca kod będzie z powrotem widoczny -->
Wybierz z menu stronę, którą chcesz wyświetlić
"visitSite(this.value);">
Wydawnictwo Helion
Gazeta New York Times
Serwis The Onion
Większa część widocznego powyżej (listing 7.14) skryptu powinna być dla Was
zrozumiała. Jedyny bardziej skomplikowany zapis to definicja zdarzenia onChange
w wierszu (należy pamiętać, że znaczniki obsługują ten typ uchwytu).
Kiedy następuje zdarzenie onChange, skrypt wywołuje funkcję visitSite() i prze-
kazuje jej jako argument wartość this.value.
164 Rozdział 7
Ostatnie udoskonalenia
Czasami chcemy jedynie sprawdzić, czy zaznaczony został dany przełącznik.
Jak już wiecie, efekt ten osiągnąć można za pomocą poniższej instrukcji:
if (window.document.radio_button_form.age[0].checked == true)
{
alert("Zaznaczony jest pierwszy z przełączników!");
}
Jest ona nieco rozwlekła. Można ją jednak skrócić, dodając atrybut id do
elementów formularza. Przykładowo:
od 0 do 1
od 1 do 3
od 3 do 7
Wartość tego atrybutu może być dowolna nie wolno jedynie zdefiniować
dwóch (lub więcej) takich samych id. Po przypisaniu każdemu z elementów
formularza osobnego id możemy zastosować te atrybuty jako parametry metody
getElementById():
var myElement = window.document.getElementById("age1");
if (myElement.checked == true) {
alert("Zaznaczony jest pierwszy przełącznik!");
}
lub skorzystać z bardziej zwięzłego zapisu:
if (document.getElementById("age1").checked == true) {
alert("Zaznaczony jest pierwszy przełącznik!");
}
Atrybut id umieścić można w dowolnym elemencie HTML, nie tylko w for-
mularzu. Jeśli znacznik zawiera ten atrybut, możemy tworzyć do niego
odwołania za pomocą tej samej metody getElementById(). Niektórzy wolą sto-
sować to rozwiązanie zamiast identyfikowania elementów według ich nazw
[ Pobierz całość w formacie PDF ]