• Nenhum resultado encontrado

DOM — Document Object Model

N/A
N/A
Protected

Academic year: 2023

Share "DOM — Document Object Model"

Copied!
56
0
0

Texto

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

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?

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>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

<p>Document Object Model</p>

<p>Document Object Model</p>

pp ElementElement

Document Object Model

Document Object Model Zawartość elementuZawartość elementu

(13)

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

<p>Document Object Model</p>

<p>Document Object Model</p>

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>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

</body>

</html>

<html>

<head>

<title>DOM i JavaScript</title>

</head>

<body>

<h1>DOM</h1>

<p>Document Object Model</p>

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

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

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

<p id="pierwszy">Paragraf pierwszy</p>

<p id="drugi">Paragraf drugi</p>

<p id="trzeci">Paragraf trzeci</p>

</body>

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

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

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

<p id="pierwszy">Paragraf pierwszy</p>

<p id="drugi">Paragraf drugi</p>

<p id="trzeci">Paragraf trzeci</p>

</body>

<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" ).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 );

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

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>

<p id="pierwszy">Paragraf pierwszy</p>

<p id="drugi">Paragraf drugi</p>

<p id="trzeci">Paragraf trzeci</p>

</body>

<body>

<p id="pierwszy">Paragraf pierwszy</p>

<p id="drugi">Paragraf drugi</p>

<p id="trzeci">Paragraf trzeci</p>

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

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

}

Niespecjalnie optymalna iteracja:

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

}

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

}

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

<p id="w"></p>

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

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

}

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>

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

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

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

<input type="button" value="Oblicz" onclick="spalanie()" />

<p id="w"></p>

</body>

</html>

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

<input type="button" value="Oblicz" onclick="spalanie()" />

<p id="w"></p>

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

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

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

<input type="button" value="Oblicz" onclick="spalanie()" />

<p id="w"></p>

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

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

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

<input type="button" value="Oblicz" onclick="spalanie()" />

<p id="w"></p>

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

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

<html>

<head>

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

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>

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

<html>

<head>

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

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>

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

<html>

<head>

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

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)

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

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

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

Pobierz dane jako łańcuchy znaków

(35)

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

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

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

Sprawdź czy dane są liczbami

(36)

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

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

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)

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

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

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

Ustalenie liczby miejsc po przecinku:

(38)

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

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

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>

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

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

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

„Czyszczenie” elementów dokumentu — dodatkowy przycisk:

(40)

<script type="text/javascript">

. . .

function czyszczenie() {

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

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

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

}

</script>

<script type="text/javascript">

. . .

function czyszczenie() {

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

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

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

}

</script>

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

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

(41)

function czyszczenie() {

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

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

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

}

function czyszczenie() {

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

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

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

}

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

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

function czyszczenie() {

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

pEdit.value = "";

pEdit.focus();

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.

(42)

. . .

<body onLoad='document.getElementById( "p" ).focus()'>

. . .

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

. . .

<body onLoad='document.getElementById( "p" ).focus()'>

. . .

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

. . .

<body onLoad="document.getElementById( 'p' ).focus()">

. . .

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

. . .

<body onLoad="document.getElementById( 'p' ).focus()">

. . .

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

lub

(43)

. . .

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

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

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

}

. . .

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>

<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

<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

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)

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

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

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

}

. . . . . .

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

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

}

. . .

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;

}

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;

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;

(48)

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

Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych:

. . .

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

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

. . . . . .

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

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

. . .

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:

function ustalCene() {

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

return Number( document.wybieraczPaliwa.paliwo[ i ].value );

}

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

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;

}

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;

}

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

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

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

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

}

(51)

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

. . . . . .

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

. . .

(52)

Dlaczego ta funkcja jest dalej badziewiasta?

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

function ustalCene() {

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

return Number( document.wybieraczPaliwa.paliwo[ i ].value );

}

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>

. . . . . .

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

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>

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

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

Być może całkiem sporo pół znacznikowych Być może całkiem sporo pół znacznikowych

Obsługa przed wysłaniem

Obsługa przed wysłaniem

Referências

Documentos relacionados

Reunião para estabelecimento de novo convênio com a University of Wyoming e desenvolvimento de atividades no âmbito dos “Partners of the Americas”. Dorly

Segundo Broch, a condição de decadência dos valores não é considerada uma situação vivenciada pelo mundo inteiro, mas é um estado possível em qualquer lugar, na medida em que o sistema