Podstawy programowania w języku JavaScript Część trzecia DOM Document Object Model Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.
Co to takiego DOM? DOM Document Object Model to specyfikacja określająca anatomię dokumentu wizualizowanego przez przeglądarkę oraz metody dostępu i modyfikowania elementów takiego dokumentu. DOM jest niezależny od języka JavaScript, dostęp i manipulowanie elementami strony (dokumentu) wizualizowanej w przeglądarce może być realizowany z wykorzystaniem innych języków programowania (np. VBScript firmy Microsoft). O ile Microsoft oraz twórcy innych przeglądarek zwykle dbają o zgodność własnych implementacji ECMAScript (czyli własnych JavaScriptów) ze standardem, o tyle DOM nie w każdej przeglądarce jest taki sam. Standard DOM został określony i jest wspierany przez konsorcjum W3C: The W3C Document Object Model (DOM) is a platform and languageneutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document Copyright Roman Simiński Strona : 2
Co DOM standaryzuje? DOM jest podzielony na 3 poziomy: Core DOM standard dla każdego dokumentu z określoną strukturą, XML DOM - standard dla dokumentów XML, HTML DOM standard dla dokumentów HTML. HTML DOM definiuje obiekty występujące w dokumencie HTML, ich właściwości oraz metody dostępu do tych obiektów i właściwości. HTML DOM to standard określający jak pobierać, zmieniać, dodawać i usuwać elementy dokumentu HTML. Copyright Roman Simiński Strona : 3
DOM dzieli elementy dokumentu na cztery klasy Obiekty (ang. objects) pojemniki reprezentujące określone elementy strony, zawierające właściwości oraz metody. Właściwości (ang. properties) za ich pośrednictwem których można odczytywać i (choć nie zawsze) modyfikować określone cechy obiektów. Modyfikacja właściwości zwykle prowadzi do natychmiastowej zmiany zawartości ekranu przeglądarki. Metody (ang. methods) przeznaczone są do wykonywania akcji dla obiektów te metody posiadających. Metody oga mieć charakter funkcyjny i udostępniać rezultat. Zdarzenia (ang. events) wiążą akcję wykonywaną na danym obiekcie przez użytkownika lub samą przeglądarkę, z wykonaniem określonego fragmentu kodu programu. Copyright Roman Simiński Strona : 4
Elementy DOM przyjmują postać drzewa Dokument HTML jest reprezentowany w postaci drzewa. Elementy dokumentu HTML stanowią węzły (ang. nodes) tego drzewa, zależności pomiędzy elementami są reprezentowane poprzez połączenia pomiędzy węzłami drzewa. Elementy dokumentu HTML są reprezentowane w postaci drzewa. Drzewo dokumentu HTML posiada swój korzeń, oraz liście, czyli elementy na najniższym poziomie hierarchii, nie posiadające podelementów. Copyright Roman Simiński Strona : 5
Drzewo przykładowego dokumentu struktura HTML <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html head body title h1 p Copyright Roman Simiński Strona : 6
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html Korzeń dokumentu head body title h1 p Liście Copyright Roman Simiński Strona : 7
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> Pierwszy potomek html html Drugi potomek html head body title h1 p Copyright Roman Simiński Strona : 8
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> Rodzic head html Rodzic body head body title h1 p Copyright Roman Simiński Strona : 9
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html head Rodzeństwo body title h1 p Copyright Roman Simiński Strona : 10
Elementy drzewa hierarchii dokumentu Dziecko (ang. child) element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu. Potomek (ang. descendant) element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu. Rodzic (ang. parent) element o jeden szczebel wyżej w drzewie w stosunku do danego elementu. Przodek (ang. ancestor) element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu. Brat (ang. sibling) element mający tego samego rodzica, co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (ang. adjacent sibling). Copyright Roman Simiński Strona : 11
Elementy dokumentu HTML <p>document Object Model</p> p Element Document Object Model Zawartość elementu Copyright Roman Simiński Strona : 12
Elementy dokumentu HTML a obiekty DOM <p>document Object Model</p> p Węzeł elementu (element node) Document Object Model Węzeł tekstu (text node) Copyright Roman Simiński Strona : 13
Struktura dokumentu HTML a DOM <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html węzeł elementu węzeł tekstu head body title h1 p DOM i JavaScript DOM Document Object Model Copyright Roman Simiński Strona : 14
Struktura dokumentu HTML a obiekty i właściwości DOM <a href= Adres URL title= Tytuł >Odsyłacz <strong>hipertekstowy</strong></a> węzeł elementu element: a węzeł tekstu węzeł atrubutu attribute: href attribute: title text: Adres URL text: Tytuł text: Odsyłacz element: strong text: hipertekstowy Copyright Roman Simiński Strona : 15
Obiekty window i document Obiekt window bazowy obiekt w DOM, reprezentuje okno przeglądarki, posiada właściwości i metody. Funkcje alert(), setinterval(), clearinterval(), confirm(), open() to tak naprawę metody obiektu window. Formalnie np. wywołanie funkcji alert() powinno wyglądać tak: window.alert( "alert to metod obiektu window" ); Obiekt window posiada właściwość document jest to obiekt reprezentujący dokument HTML wyświetlany przez przeglądarkę. Obiekt document zawiera informacje o aktualnym dokumencie HTML i pozwala na dostęp do wszystkicj elementów strony. Formalnie, odwołanie do obiektu document powinno wyglądać tak: window.document.write( "document to wła ś ciwo ś ć obiektu window" ); Copyright Roman Simiński Strona : 16
Obiekt window i document właściwości i metody Obiekt window dokładny opis właściwości i metod dostępny np.: http://www.w3schools.com/htmldom/dom_obj_window.asp Obiekt document dokładny opis właściwości i metod dostępny np.: http://www.w3schools.com/htmldom/dom_obj_document.asp Copyright Roman Simiński Strona : 17
Obiekt document kolekcje obiektów na stronie Kolekcja anchors[] referencja do tablicy obiektów reprezentujących elementy ze znacznikiem a name i a id występujące na stronie. Kolekcja forms[] referencja do tablicy obiektów reprezentujących formularze występujące na stronie. Kolekcja images[] referencja do tablicy obiektów reprezentujących obrazy występujące na stronie (img). Kolekcja links[] referencja do tablicy obiektów reprezentujących łączniki i hiperłącza występujące na stronie (a href). Każda z kolekcji posiada właściwość length pozwalającą na określenia liczby elementów danego typu w bieżącym dokumencie. Copyright Roman Simiński Strona : 18
Obiekt document kolekcje obiektów na stronie Ile jest obiektów poszczególnych typów w bieżącym dokumencie: window.document.write( "Kotwice: " + window.document.anchors.length + " " ); window.document.write( "Obrazki: " + window.document.images.length + " " ); window.document.write( "Formularze: " + window.document.forms.length + "" ); window.document.write( "Ł ą cza: " + window.document.links.length + "" ); Ponieważ obiekt window jest domyślny, można używać wersji skróconej: document.write( "Kotwice: " + document.anchors.length + " " ); document.write( "Obrazki: " + document.images.length + " " ); document.write( "Formularze: " + document.forms.length + "" ); document.write( "Ł ą cza: " + document.links.length + "" ); Copyright Roman Simiński Strona : 19
Jak odwoływać się do elementów drzewa getelementsbytagname Odwołanie wg nazwy znacznika getelementsbytagname <body> <p>paragraf pierwszy</p> <p>paragraf drugi</p> <p>paragraf trzeci</p> </body> document.getelementsbytagname( 'p' )[ 0 ] document.getelementsbytagname( 'p' )[ 1 ] document.getelementsbytagname( 'p' )[ 2 ] liczba elementów danego znacznika w dokumencie length document.getelementsbytagname( 'p' ).length Copyright Roman Simiński Strona : 20
Jak odwoływać się do elementów drzewa getelementbyid Odwołanie wg nazwy znacznika getelementbyid <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> document.getelementbyid( "pierwszy" ) document.getelementbyid( "drugi" ) document.getelementbyid( "trzeci" ) Copyright Roman Simiński Strona : 21
Jak odwołać się do tekstu znacznika innerhtml Właściwość innerhtml ta właściwość nie występuje w standardzie W3C ale działa. <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> var tekst = document.getelementbyid( "pierwszy" ).innerhtml; alert( "Paragraf 1: " + tekst ); tekst = document.getelementbyid( "drugi" ).innerhtml; alert( "Paragraf 2: " + tekst ); tekst = document.getelementbyid( "trzeci" ).innerhtml; alert( "Paragraf 3: " + tekst ); Copyright Roman Simiński Strona : 22
Jak odwołać się do tekstu znacznika nodevalue Właściwość nodevalue ta właściwość określa wartość wierzchołka. <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> element: p text: Paragraf pierwszy var tekst = document.getelementbyid( "pierwszy" ).firstchild.nodevalue; alert( "Paragraf 1: " + tekst ); tekst = document.getelementbyid( "drugi" ).firstchild.nodevalue; alert( "Paragraf 2: " + tekst ); tekst = document.getelementbyid( "trzeci" ).firstchild.nodevalue; alert( "Paragraf 3: " + tekst ); Copyright Roman Simiński Strona : 23
Po elementach danego typu można iterować <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> Niespecjalnie optymalna iteracja: for( var i = 0; i < document.getelementsbytagname( 'p' ).length; i++ ) var tekst = window.document.getelementsbytagname( 'p' )[ i ].innerhtml; window.alert( "Paragraf " + ( i + 1 ) + ": " + tekst ); Lepsza wersja iteracji: var nodes = window.document.getelementsbytagname( 'p' ); for( var i = 0; i < nodes.length; i++ ) var tekst = nodes[ i ].innerhtml; window.alert( "Paragraf " + ( i + 1 ) + ": " + tekst ); Copyright Roman Simiński Strona : 24
Iteracja po hiperłączach dokumentu <body> <h2>moje ulubione strony</h2> <a href="http://www.cplusplus.com/">o j ę zyku C++</a><br /> <a href="http://gcc.gnu.org/">o kompilatorze GCC</a><br /> <a href="http://www.codeblocks.org/">o ś rodowisku Code::Blocks</a><br /> <input type="button" value="poka ż ich adresy" onclick="pokazurl()"> <p id="w"></p> </body> function pokazurl() var w = document.getelementbyid( "w" ); w.innerhtml = ""; for( i = 0; i < document.links.length; ++i ) w.innerhtml += document.links[ i ].innerhtml + ": "; w.innerhtml += document.links[ i ].href + "<br \/>"; Copyright Roman Simiński Strona : 25
Pobieranie informacji z elementów typu input <body> <input type="text" id="t1" value="warto ś ć pola" /> <input type="button" id="b1" value="warto ś ć przycisku" /> <p id="p1"></p> <script type="text/javascript"> var s1 = "Pole tekstowe: " + document.getelementbyid( "t1" ).value; var s2 = "Przycisk: " + document.getelementbyid( "b1" ).value; document.getelementbyid( "p1" ).innerhtml = s1 + "<br\/>" + s2; </script> </body> Copyright Roman Simiński Strona : 26
Pobieranie informacji z elementów typu input przykład Zadaniem skryptu na stronie WWW jest obliczanie, ile średnio litrów paliwa spala pojazd na trasie 100 km. Wartość ta zwana dalej średnim spalaniem obliczana jest na podstawie ilości zużytego przez pojazd paliwa oraz liczby przejechanych kilometrów. przejechany dystans [km] ilość paliwa [litry] 100 [km] x [litry] spalanie = ( 100 * ilość paliwa ) / przejechany dystans Copyright Roman Simiński Strona : 27
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Elementy typu input, z których będą pobrane dane <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 28
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Paragraf przewidziany dla wyniku, na starcie pusty <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 29
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem przycisku Oblicz <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 30
Pobieranie informacji z elementów typu input przykład Akcja: Pobranie <html> wartości z pól wejściowych <head> próba (!) zamiany na liczby <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( "p" ).value ); var d = Number( document.getelementbyid( "d" ).value ); var out = document.getelementbyid( "w" ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> </head> <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 31
Pobieranie informacji z elementów typu input przykład Akcja: Pobranie <html> referencji do paragrafu <head> prezentacji wyników <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( "p" ).value ); var d = Number( document.getelementbyid( "d" ).value ); var out = document.getelementbyid( "w" ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> </head> <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 32
Pobieranie informacji z elementów typu input przykład Akcja: Zabezpieczenie przed dzieleniem <html> przez zero, obliczenia, wstawienie <head> wyniku do par. wyjściowego <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( "p" ).value ); var d = Number( document.getelementbyid( "d" ).value ); var out = document.getelementbyid( "w" ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> </head> <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Copyright Roman Simiński Strona : 33
Pobieranie informacji z elementów typu input przykład Weryfikacja danych: Pobierz dane jako łańcuchy znaków <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> Copyright Roman Simiński Strona : 34
Pobieranie informacji z elementów typu input przykład Weryfikacja danych: Sprawdź czy dane są liczbami <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> Copyright Roman Simiński Strona : 35
Pobieranie informacji z elementów typu input przykład Wynik z wieloma miejscami po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> Copyright Roman Simiński Strona : 36
Pobieranie informacji z elementów typu input przykład Ustalenie liczby miejsc po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( p * 100 ) / d; out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> Copyright Roman Simiński Strona : 37
Pobieranie informacji z elementów typu input przykład Ustalenie liczby miejsc po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; else out.innerhtml = "Dystans nie mo ż e być zerowy!"; </script> Copyright Roman Simiński Strona : 38
Manipulowanie zawartością elementów <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczy ś ć" onclick="czyszczenie()"/> <p id="w"></p> </body> Czyszczenie elementów dokumentu dodatkowy przycisk: Copyright Roman Simiński Strona : 39
Manipulowanie zawartością elementów <script type="text/javascript">... function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; </script> Czyszczenie elementów dokumentu funkcja obsługi zdarzenia: Copyright Roman Simiński Strona : 40
Manipulowanie zawartością elementów function czyszczenie() document.getelementbyid( "p" ).value = ""; Czyszczenie z ustawieniem focusa i zaznaczenia na edytorze paliwa: document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; function czyszczenie() var pedit = document.getelementbyid( "p" ); pedit.value = ""; pedit.focus(); document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; Metody focus() i blur() odpowiednio ustawiają i usuwają zogniskowanie na elemencie. Metod select() pozwala na ustawienie zaznaczenia tekstu w polu edycyjnym, jednocześnie ustawiane jest zogniskowanie. Copyright Roman Simiński Strona : 41
Manipulowanie zawartością elementów Ustawianie zogniskowania na po załadowaniu treści strony:... <body onload='document.getelementbyid( "p" ).focus()'>... <h2>obliczanie ś redniego spalania na 100 km</h2>... lub... <body onload="document.getelementbyid( 'p' ).focus()">... <h2>obliczanie ś redniego spalania na 100 km</h2>... Copyright Roman Simiński Strona : 42
Rozwojowy element koszt przejechania jednego kilometra Na razie totalny badziew szacowanie w oparciu o stałą cenę paliwa :-/... Żeby to miało sens, ta cena powinna if( isnan( p ) isnan( d ) ) dotyczyć odpowiedniego paliwa i być aktualna out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( 2 ); out.innerhtml = "Spalanie: " + wynik + " l/100km<\/br>"; out.innerhtml += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!";... Copyright Roman Simiński Strona : 43
Rozwojowy element koszt przejechania jednego kilometra Wprowadzamy wybór rodzaju paliwa (olej napędowy, benzyna, gaz) <body> <h2>obliczanie ś redniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <p> <input type="radio" id="r_on" name="paliwo" value="on" />olej nap ę dowy <input type="radio" id="r_et" name="paliwo" value="et" checked="checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="lpg" />gaz </p> <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczy ś ć" onclick="czyszczenie()"/> <p id="w"></p> </body Ten przycisk będzie domyślnie zaznaczony. Uwaga, są kontrowersje związane z wartością przypisywaną do atrybutu checked, przedstawione rozwiązanie jest zgodne z W3C. W ramach grupy przycisków o tej samej wartości atrybutu name tylko jeden przycisk może być zaznaczony. Pozwala to na stosowanie wielu różnych grup przycisków radiowych. Copyright Roman Simiński Strona : 44
Rozwojowy element koszt przejechania jednego kilometra function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; Poprawka funkcji czyszczenia pól wprowadzania danych document.getelementbyid( "r_on" ).checked = false; document.getelementbyid( "r_et" ).checked = true; document.getelementbyid( "r_lpg" ).checked = false; Dla elementów wejściowych typu radio i checkbox DOM przewiduje możliwość manipulowania właściwością checked, traktowaną jako wartość bool. Inne właściwości obiektu typu przycisk radiowy (wg W3C): Copyright Roman Simiński Strona : 45
Rozwojowy element koszt przejechania jednego kilometra Poprawka funkcji obliczania średniego spalania:... Wywołanie funkcji odpowiedzialnej za if( isnan( p ) isnan( d ) ) wyznaczenie ceny właściwej dla danego paliwa out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); var kilometr = ( wynik / 100 ) * ustalcene() ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( 2 ); out.innerhtml = "Spalanie: " + wynik + " l/100km<\/br>"; out.innerhtml += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!";... Copyright Roman Simiński Strona : 46
Rozwojowy element koszt przejechania jednego kilometra Funkcja wyznaczania ceny, badziewiarskie wersje w amatorskiej odsłonie: function ustalcene() if( document.getelementbyid( "r_on" ).checked ) return 4.50; if( document.getelementbyid( "r_et" ).checked ) return 4.60; if( document.getelementbyid( "r_lpg" ).checked ) return 2.50; function ustalcene() var on = document.getelementbyid( "r_on" ); var et = document.getelementbyid( "r_et" ); var lpg = document.getelementbyid( "r_lpg" ); if( on.checked ) return 4.50; if( et.checked ) return 4.60; if( lpg.checked ) return 2.50; Copyright Roman Simiński Strona : 47
Rozwojowy element koszt przejechania jednego kilometra Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych:... <h2>obliczanie ś redniego spalania na 100 km</h2> Formularz o nazwie wybieraczpaliwa <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <form name="wybieraczpaliwa"> <input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz </form> <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczy ś ć" onclick="czyszczenie()"/> <p id="w"></p> Cena... jako wartość zapisane w obiekcie przycisku radiowego Copyright Roman Simiński Strona : 48
Rozwojowy element koszt przejechania jednego kilometra Funkcja wyznaczania ceny, dalej badziew, ale w nieamatorskiej odsłonie: function ustalcene() for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) if( document.wybieraczpaliwa.paliwo[ i ].checked ) return Number( document.wybieraczpaliwa.paliwo[ i ].value ); Dla elementów formularza o tych samych nazwa tworzona jest tablica odpowiadających im obiektów: document.wybieraczpaliwa.paliwo // Dla formularza o nazwie wybieraczpaliwa Liczba elementów w takiej tablicy: document.wybieraczpaliwa.paliwo.length Dostęp do i-tego elementu tablicy: document.wybieraczpaliwa.paliwo[ i ] Copyright Roman Simiński Strona : 49
Rozwojowy element koszt przejechania jednego kilometra Czasem inikatowa identyfikacja elementów nie jest konieczna: function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; document.getelementbyid( "r_on" ).checked = false; document.getelementbyid( "r_et" ).checked = true; document.getelementbyid( "r_lpg" ).checked = false; function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) document.wybieraczpaliwa.paliwo[ i ].checked = false; document.wybieraczpaliwa.paliwo[ 1 ].checked = true; Copyright Roman Simiński Strona : 50
Rozwojowy element koszt przejechania jednego kilometra Wtedy można zrezygnować z stosowania id:... <form name="wybieraczpaliwa"> <input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz </form>...... <form name="wybieraczpaliwa"> <input type="radio" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz </form>... Copyright Roman Simiński Strona : 51
Rozwojowy element koszt przejechania jednego kilometra Dlaczego ta funkcja jest dalej badziewiasta? function ustalcene() for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) if( document.wybieraczpaliwa.paliwo[ i ].checked ) return Number( document.wybieraczpaliwa.paliwo[ i ].value ); Dlatego, że ceny paliw są i tak na stałe wpisane w kod:... <form name="wybieraczpaliwa"> <input type="radio" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz </form>... Ceny paliw powinny być uzyskiwane samoczynnie od odpowiedniej usługi sieciowej, oferującej aktualne ceny paliw. Copyright Roman Simiński Strona : 52
Odwołania tablicowe działają nie tylko dla przycisków radiowych Załóżmy obsługę wyboru nierozłącznych preferencji przed wysłaniem: Być może całkiem sporo pół znacznikowych <body> <h2>zaznacz swoje hobby</h2> <form name="wybieraczhobby"> <input type="checkbox" name="hobby" value="narty" />Narty <input type="checkbox" name="hobby" value="rower" />Rower<br /> <input type="checkbox" name="hobby" value="rolki" />Rolki <input type="checkbox" name="hobby" value="tenis" />Tenis<br /> <input type="button" value="wyczy ś ć" onclick=" wyczysc()"/> <input type="button" value="wszystko" onclick="wszystko()"/> <input type="button" value="potwierd ź " onclick=" potwierdzenie()"/> </form> <p id="wybor"></p> </body> Obsługa przed wysłaniem Copyright Roman Simiński Strona : 53
Odwołania tablicowe działają nie tylko dla przycisków radiowych Taka sobie prymitywna wersja: function potwierdzenie() var napis = "Zazaczone hobby: "; for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) if( document.wybieraczhobby.hobby[ i ].checked ) napis += document.wybieraczhobby.hobby[ i ].value + ' '; document.getelementbyid( "wybor" ).innerhtml = napis; function wyczysc() for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) document.wybieraczhobby.hobby[ i ].checked = false; document.getelementbyid( "wybor" ).innerhtml = ""; function wszystko() for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) document.wybieraczhobby.hobby[ i ].checked = true; document.getelementbyid( "wybor" ).innerhtml = ""; Copyright Roman Simiński Strona : 54
Odwołania tablicowe działają nie tylko dla przycisków radiowych Wersja reagująca na zaznaczenie każdego pola znacznikowego: <body> <h2>zaznacz swoje hobby</h2> <form name="wybieraczhobby"> <input type="checkbox" name="hobby" value="narty" onclick="ustawwybor()" />Narty <input type="checkbox" name="hobby" value="rower" onclick="ustawwybor()"/>rower<br /> <input type="checkbox" name="hobby" value="rolki" onclick="ustawwybor()"/>rolki <input type="checkbox" name="hobby" value="tenis" onclick="ustawwybor()"/>tenis<br /> <input type="button" value="wyczy ś ć" onclick=" ustaw( false )"/> <input type="button" value="wszystko" onclick="ustaw( true )"/> <input type="button" value="potwierd ź " onclick=" potwierdzenie()"/> </form> <p id="wybor"></p> </body> Copyright Roman Simiński Strona : 55
Odwołania tablicowe działają nie tylko dla przycisków radiowych Wersja reagująca na zaznaczenie każdego pola znacznikowego: function potwierdzenie() var komunikat = document.getelementbyid( "wybor" ).innerhtml; if( komunikat == "" ) komunikat = "Nie lubisz ż adnych z tych rzeczy..." ; alert( komunikat ); function ustawwybor() var napis = ""; for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) if( document.wybieraczhobby.hobby[ i ].checked ) napis += document.wybieraczhobby.hobby[ i ].value + ' '; if( napis!= "" ) napis = "Zazaczone hobby: " + napis; document.getelementbyid( "wybor" ).innerhtml = napis; function ustaw( natak ) for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) document.wybieraczhobby.hobby[ i ].checked = natak; ustawwybor(); Copyright Roman Simiński Strona : 56