DOM — Document Object Model

(1)

Podstawy programowania Podstawy programowania w j

w języku JavaScript ęzyku JavaScript

DOM — Document Object Model

Część trzecia

Roman Simiński

roman.siminski@us.edu.pl www.us.edu.pl/~siminski Autor

Kontakt

(2)

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 language-

neutral interface that allows programs and scripts to dynamically access

and update the content, structure, and style of a document”

(3)

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.

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.

(4)

DOM dzieli elementy dokumentu na cztery klasy 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.

(5)

Elementy DOM przyjmują postać drzewa 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.

(6)

Drzewo przykładowego dokumentu — struktura HTML Drzewo przykładowego dokumentu — struktura HTML

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

(7)

Drzewo przykładowego dokumentu — struktura HTML, zależności Drzewo przykładowego dokumentu — struktura HTML, zależności

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

Korzeń dokumentu Korzeń dokumentu

(8)

Drzewo przykładowego dokumentu — struktura HTML, zależności Drzewo przykładowego dokumentu — struktura HTML, zależności

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

Pierwszy potomek html

Pierwszy potomek html Drugi potomek html Drugi potomek html

(9)

Drzewo przykładowego dokumentu — struktura HTML, zależności Drzewo przykładowego dokumentu — struktura HTML, zależności

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

Rodzic head

Rodzic head Rodzic bodyRodzic body

(10)

Drzewo przykładowego dokumentu — struktura HTML, zależności Drzewo przykładowego dokumentu — struktura HTML, zależności

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

Rodzeństwo Rodzeństwo

(11)

Elementy drzewa hierarchii dokumentu 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).

(12)

Elementy dokumentu HTML Elementy dokumentu HTML

pp ElementElement

Document Object Model

Document Object Model Zawartość elementuZawartość elementu

(13)

Elementy dokumentu HTML a obiekty DOM Elementy dokumentu HTML a obiekty DOM

pp Węzeł elementu (element node)Węzeł elementu (element node)

Document Object Model

Document Object Model Węzeł tekstu (text node)Węzeł tekstu (text node)

(14)

Struktura dokumentu HTML a DOM Struktura dokumentu HTML a DOM

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

htmlhtml

headhead

title title

bodybody

h1h1 pp

DOM i JavaScript

DOM i JavaScript DOMDOM Document Object ModelDocument Object Model

węzeł elementu węzeł tekstu

(15)

Struktura dokumentu HTML a obiekty i właściwości DOM Struktura dokumentu HTML a obiekty i właściwości DOM

<a href=”Adres URL” title=”Tytuł”>Odsyłacz <strong>hipertekstowy</strong></a>

element: a element: a

attribute: href

attribute: href attribute: titleattribute: title

text: Adres URL

text: Adres URL text: Tytułtext: Tytuł

węzeł elementu węzeł tekstu

text: Odsyłacz text: Odsyłacz

węzeł atrubutu

element: strong element: strong

text: hipertekstowy text: hipertekstowy

(16)

Obiekty window i document 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:

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.alert( "alert to metod obiektu window" );

window.document.write( "document to wła ciwo ć obiektu window" );ś ś window.document.write( "document to wła ciwo ć obiektu window" );ś ś

(17)

Obiekt window i document — właściwości i metody 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

(18)

Obiekt document — kolekcje obiektów na stronie 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.

Każda z kolekcji posiada właściwość

length

pozwalającą na określenia liczby

elementów danego typu w bieżącym dokumencie.

(19)

Obiekt document — kolekcje obiektów na stronie Obiekt document — kolekcje obiektów na stronie

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 + "" );ą 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 + "" );ą

document.write( "Kotwice: " + document.anchors.length + " " );

document.write( "Obrazki: " + document.images.length + " " );

document.write( "Formularze: " + document.forms.length + "" );

document.write( "Ł cza: " + document.links.length + "" );ą document.write( "Kotwice: " + document.anchors.length + " " );

document.write( "Obrazki: " + document.images.length + " " );

document.write( "Formularze: " + document.forms.length + "" );

document.write( "Ł cza: " + document.links.length + "" );ą

Ponieważ obiekt

window

jest domyślny, można używać wersji skróconej :

Ile jest obiektów poszczególnych typów w bieżącym dokumencie:

(20)

Jak odwoływać się do elementów drzewa — getElementsByTagName 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>

<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 ] document.getElementsByTagName( 'p' )[ 0 ] document.getElementsByTagName( 'p' )[ 1 ] document.getElementsByTagName( 'p' )[ 2 ]

liczba elementów danego znacznika w dokumencie —

length document.getElementsByTagName( 'p' ).length

document.getElementsByTagName( 'p' ).length

(21)

Jak odwoływać się do elementów drzewa — getElementById 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>

<body>

</body>

document.getElementById( "pierwszy" ) document.getElementById( "drugi" ) document.getElementById( "trzeci" ) document.getElementById( "pierwszy" ) document.getElementById( "drugi" ) document.getElementById( "trzeci" )

(22)

Jak odwołać się do tekstu znacznika — innerHTML 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>

</body>

<body>

</body>

var tekst = document.getElementById( "pierwszy" ).innerHTML;

alert( "Paragraf 1: " + tekst );

tekst = document.getElementById( "drugi" ).innerHTML;

tekst = document.getElementById( "trzeci" ).innerHTML;

var tekst = document.getElementById( "pierwszy" ).innerHTML;

tekst = document.getElementById( "drugi" ).innerHTML;

tekst = document.getElementById( "trzeci" ).innerHTML;

(23)

Jak odwołać się do tekstu znacznika — nodeValue Jak odwołać się do tekstu znacznika — nodeValue

Właściwość

nodeValue

— ta właściwość określa wartość wierzchołka.

<body>

</body>

<body>

</body>

var tekst = document.getElementById( "pierwszy" ).firstChild.nodeValue;

tekst = document.getElementById( "drugi" ).firstChild.nodeValue;

tekst = document.getElementById( "trzeci" ).firstChild.nodeValue;

var tekst = document.getElementById( "pierwszy" ).firstChild.nodeValue;

tekst = document.getElementById( "drugi" ).firstChild.nodeValue;

tekst = document.getElementById( "trzeci" ).firstChild.nodeValue;

element: p element: p

text: Paragraf pierwszy text: Paragraf pierwszy

(24)

Po elementach danego typu można iterować Po elementach danego typu można iterować

<body>

</body>

<body>

</body>

for( var i = 0; i < document.getElementsByTagName( 'p' ).length; i++ ) {

var tekst = window.document.getElementsByTagName( 'p' )[ i ].innerHTML;

window.alert( "Paragraf " + ( i + 1 ) + ": " + tekst );

}

for( var i = 0; i < document.getElementsByTagName( 'p' ).length; i++ ) {

var tekst = window.document.getElementsByTagName( 'p' )[ i ].innerHTML;

}

Niespecjalnie optymalna iteracja:

var nodes = window.document.getElementsByTagName( 'p' );

for( var i = 0; i < nodes.length; i++ ) {

var tekst = nodes[ i ].innerHTML;

}

var nodes = window.document.getElementsByTagName( 'p' );

for( var i = 0; i < nodes.length; i++ ) {

var tekst = nodes[ i ].innerHTML;

}

Lepsza wersja iteracji:

(25)

Iteracja po hiperłączach dokumentu 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()">

</body>

<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()">

</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 \/>";

}

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 \/>";

}

(26)

Pobieranie informacji z elementów typu input Pobieranie informacji z elementów typu input

<body>

var s1 = "Pole tekstowe: " + document.getElementById( "t1" ).value;

var s2 = "Przycisk: " + document.getElementById( "b1" ).value;

document.getElementById( "p1" ).innerHTML = s1 + "<br\/>" + s2;

</script>

</body>

<body>

var s1 = "Pole tekstowe: " + document.getElementById( "t1" ).value;

var s2 = "Przycisk: " + document.getElementById( "b1" ).value;

document.getElementById( "p1" ).innerHTML = s1 + "<br\/>" + s2;

</script>

</body>

(27)

Pobieranie informacji z elementów typu input — przykład 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

(28)

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

<html>

<head>

</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>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

Komunikacja:

Elementy typu input, z których będą pobrane dane

Elementy typu input,

z których będą pobrane dane

(29)

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Komunikacja:

Paragraf przewidziany dla wyniku, na starcie pusty

Paragraf przewidziany dla wyniku,

na starcie pusty

(30)

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Komunikacja:

Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem

przycisku Oblicz

Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem

przycisku Oblicz

(31)

<html>

<head>

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>

<html>

<head>

if( d != 0 )

else

</script>

</head>

<body>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Akcja:

Pobranie wartości z pól wejściowych próba (!) zamiany na liczby

Pobranie wartości z pól wejściowych

próba (!) zamiany na liczby

(32)

<html>

<head>

if( d != 0 )

else

</script>

</head>

<body>

</body>

</html>

<html>

<head>

if( d != 0 )

else

</script>

</head>

<body>

</body>

</html>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Akcja:

Pobranie referencji do paragrafu prezentacji wyników

Pobranie referencji do paragrafu

prezentacji wyników

(33)

<html>

<head>

if( d != 0 )

else

</script>

</head>

<body>

<html>

<head>

if( d != 0 )

else

</script>

</head>

<body>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Akcja:

Zabezpieczenie przed dzieleniem przez zero, obliczenia, wstawienie

wyniku do par. wyjściowego Zabezpieczenie przed dzieleniem przez zero, obliczenia, wstawienie

wyniku do par. wyjściowego

(34)

var p = document.getElementById( "p" ).value;

var d = document.getElementById( "d" ).value;

if( isNaN( p ) || isNaN( d ) )

out.innerHTML = "Dystans i ilo ć paliwa musz być liczbami!";ś ą else

{

if( d != 0 )

else

}

</script>

{

if( d != 0 )

else

}

</script>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Weryfikacja danych:

Pobierz dane jako łańcuchy znaków

(35)

{

if( d != 0 )

else

}

</script>

{

if( d != 0 )

else

}

</script>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Weryfikacja danych:

Sprawdź czy dane są liczbami

(36)

{

if( d != 0 )

else

}

</script>

{

if( d != 0 )

else

}

</script>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Wynik z wieloma miejscami po przecinku:

(37)

{

if( d != 0 ) {

var wynik = ( p * 100 ) / d;

out.innerHTML = "Spalanie: " + wynik.toFixed( 2 ) + " l/100km";

} else

}

</script>

{

if( d != 0 ) {

var wynik = ( p * 100 ) / d;

} else

}

</script>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Ustalenie liczby miejsc po przecinku:

(38)

{

if( d != 0 ) {

var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );

} else

out.innerHTML = "Dystans nie mo e być zerowy!";ż }

}

</script>

{

if( d != 0 ) {

} else

out.innerHTML = "Dystans nie mo e być zerowy!";ż }

}

</script>

Pobieranie informacji z elementów typu input — przykład Pobieranie informacji z elementów typu input — przykład

Ustalenie liczby miejsc po przecinku:

(39)

<body>

</body>

<body>

</body>

Manipulowanie zawartością elementów Manipulowanie zawartością elementów

„Czyszczenie” elementów dokumentu — dodatkowy przycisk:

(40)

. . .

function czyszczenie() {

document.getElementById( "p" ).value = "";

document.getElementById( "d" ).value = "";

document.getElementById( "w" ).innerHTML = "";

}

</script>

. . .

}

</script>

Manipulowanie zawartością elementów Manipulowanie zawartością elementów

„Czyszczenie” elementów dokumentu — funkcja obsługi zdarzenia:

(41)

}

Manipulowanie zawartością elementów Manipulowanie zawartością elementów

„Czyszczenie” z ustawieniem focusa i zaznaczenia na edytorze paliwa:

var pEdit = document.getElementById( "p" );

pEdit.value = "";

pEdit.focus();

}

var pEdit = document.getElementById( "p" );

pEdit.value = "";

pEdit.focus();

}

Metody focus() i blur() odpowiednio ustawiają i usuwają zogniskowanie na

elemencie.

(42)

. . .

. . .

<h2>Obliczanie redniego spalania na 100 km</h2>ś . . .

. . .

. . .

Manipulowanie zawartością elementów Manipulowanie zawartością elementów

Ustawianie zogniskowania na po załadowaniu treści strony:

. . .

. . .

. . .

lub

(43)

. . .

{

if( d != 0 ) {

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!";

}

. . . . . .

{

if( d != 0 ) {

var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.toFixed( 2 );

} else

}

. . .

Rozwojowy element — koszt przejechania jednego kilometra 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

dotyczyć odpowiedniego paliwa i być aktualna Żeby to miało sens, ta cena powinna

dotyczyć odpowiedniego paliwa i być aktualna

(44)

<body>

<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>

</body

<body>

<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>

</body

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Wprowadzamy wybór rodzaju paliwa (olej napędowy, benzyna, gaz)

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.

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.

(45)

document.getElementById( "r_on" ).checked = false;

document.getElementById( "r_et" ).checked = true;

document.getElementById( "r_lpg" ).checked = false;

}

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Poprawka funkcji czyszczenia pól wprowadzania danych

Dla elementów wejściowych typu radio i checkbox DOM przewiduje

możliwość manipulowania właściwością checked, traktowaną jako wartość bool.

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):

(46)

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Poprawka funkcji obliczania średniego spalania:

. . .

{

if( d != 0 ) {

var kilometr = ( wynik / 100 ) * ustalCene() ; wynik = wynik.toFixed( 2 );

} else

}

. . . . . .

{

if( d != 0 ) {

var kilometr = ( wynik / 100 ) * ustalCene() ; wynik = wynik.toFixed( 2 );

} else

}

. . .

Wywołanie funkcji odpowiedzialnej za

wyznaczenie ceny właściwej dla danego paliwa Wywołanie funkcji odpowiedzialnej za

wyznaczenie ceny właściwej dla danego paliwa

(47)

Rozwojowy element — koszt przejechania jednego kilometra 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;

}

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;

}

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;

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;

(48)

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych:

. . .

<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="Wyczy ć" onclick="czyszczenie()"/>ś

. . . . . .

</form>

<input type="button" value="Wyczy ć" onclick="czyszczenie()"/>ś

. . .

Formularz o nazwie wybieraczPaliwa Formularz o nazwie wybieraczPaliwa

Cena jako wartość zapisane w obiekcie przycisku radiowego

Cena jako wartość zapisane w obiekcie

przycisku radiowego

(49)

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Funkcja wyznaczania ceny, dalej badziew, ale w nieamatorskiej odsłonie:

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 document.wybieraczPaliwa.paliwo // Dla formularza o nazwie wybieraczPaliwa

Liczba elementów w takiej tablicy:

document.wybieraczPaliwa.paliwo.length document.wybieraczPaliwa.paliwo.length

Liczba elementów w takiej tablicy:

document.wybieraczPaliwa.paliwo.length document.wybieraczPaliwa.paliwo.length

Dostęp do i-tego elementu tablicy:

(50)

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Czasem inikatowa identyfikacja elementów nie jest konieczna:

for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) document.wybieraczPaliwa.paliwo[ i ].checked = false;

document.wybieraczPaliwa.paliwo[ 1 ].checked = true;

}

for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) document.wybieraczPaliwa.paliwo[ i ].checked = false;

document.wybieraczPaliwa.paliwo[ 1 ].checked = true;

}

(51)

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

Wtedy można zrezygnować z stosowania id:

. . .

</form>

. . . . . .

</form>

. . .

<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>

. . . . . .

</form>

. . .

(52)

Dlaczego ta funkcja jest dalej badziewiasta?

Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra

}

Dlatego, że ceny paliw są i tak na stałe wpisane w kod:

. . .

</form>

. . . . . .

</form>

. . .

Ceny paliw powinny być uzyskiwane samoczynnie od odpowiedniej usługi sieciowej, oferującej aktualne ceny paliw.

Ceny paliw powinny być uzyskiwane samoczynnie od odpowiedniej usługi

sieciowej, oferującej aktualne ceny paliw.

(53)

Załóżmy obsługę wyboru nierozłącznych preferencji przed wysłaniem:

Odwołania tablicowe działają nie tylko dla przycisków radiowych Odwołania tablicowe działają nie tylko dla przycisków radiowych

<body>

<h2>Zaznacz swoje hobby</h2>

<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 />

</form>

</body>

<body>

<h2>Zaznacz swoje hobby</h2>

<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 />

</form>

</body>