Podstawy programowania w JavaScript - Programowanie

Transkrypt

Podstawy programowania
w języku
języku JavaScript
Część trzecia
DOM — Document Object Model
Autor
Roman Simiński
Kontakt
[email protected]
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.
Podstawy programowania w JavaScript
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
HTML DOM
DOM definiuje
definiuje obiekty
obiekty występujące
występujące w
w dokumencie
dokumencie HTML,
HTML, ich
ich
właściwości
właściwości oraz
oraz metody
metody dostępu
dostępu do
do tych
tych obiektów
obiektów ii właściwości.
właściwości.
HTML
HTML DOM
DOM to
to standard
standard określający
określający jak
jak pobierać,
pobierać, zmieniać,
zmieniać, dodawać
dodawać ii usuwać
usuwać
elementy
elementy dokumentu
dokumentu HTML.
HTML.
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.
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.
Strona : 5
Drzewo przykładowego dokumentu — struktura HTML
<html>
<html>
<head>
<head>
<title>DOM
<title>DOM ii JavaScript</title>
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
html
head
head
title
body
h1
p
Strona : 6
Drzewo przykładowego dokumentu — struktura HTML, zależności
<html>
<html>
<head>
<head>
<title>DOM
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
html
Korzeń
Korzeń dokumentu
dokumentu
head
head
body
title
h1
p
Liście
Liście
Strona : 7
<html>
<html>
<head>
<head>
<title>DOM
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
Pierwszy
Pierwszy potomek
potomek html
html
html
Drugi
Drugi potomek
potomek html
html
head
head
title
body
h1
p
Strona : 8
<html>
<html>
<head>
<head>
<title>DOM
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
Rodzic
Rodzic head
head
html
Rodzic
Rodzic body
body
head
head
title
body
h1
p
Strona : 9
<html>
<html>
<head>
<head>
<title>DOM
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
html
head
head
title
Rodzeństwo
Rodzeństwo
body
h1
p
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).
Strona : 11
Elementy dokumentu HTML
<p>Document
<p>Document Object
Object Model</p>
Model</p>
p
Element
Element
Document Object Model
Zawartość
Zawartość elementu
elementu
Strona : 12
Elementy dokumentu HTML a obiekty DOM
<p>Document
<p>Document Object
Object Model</p>
Model</p>
p
Węzeł
Węzeł elementu
elementu (element
(element node)
node)
Węzeł
Węzeł tekstu
tekstu (text
(text node)
node)
Strona : 13
Struktura dokumentu HTML a DOM
<html>
<html>
<head>
<head>
<title>DOM
JavaScript</title>
</head>
</head>
<body>
<body>
<h1>DOM</h1>
<h1>DOM</h1>
<p>Document
<p>Document Object
Object Model</p>
Model</p>
</body>
</body>
</html>
</html>
html
węzeł elementu
węzeł tekstu
head
head
body
title
h1
p
DOM
DOM i JavaScript
DOM
DOM
Strona : 14
Struktura dokumentu HTML a obiekty i właściwości DOM
<a
<a href=”Adres
href=”Adres URL”
URL” title=”Tytuł”>Odsyłacz
title=”Tytuł”>Odsyłacz <strong>hipertekstowy</strong></a>
<strong>hipertekstowy</strong></a>
węzeł elementu
element:
element: a
węzeł tekstu
węzeł atrubutu
attribute: href
attribute:
attribute: title
text: Adres
Adres URL
text:
text: Tytuł
text:
text: Odsyłacz
Odsyłacz
element:
element: strong
text: hipertekstowy
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(
window.alert( "alert
"alert to
to metod
metod obiektu
obiektu window"
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(
window.document.write( "document
"document to
to wła
właśściwo
ciwośśćć obiektu
obiektu window"
window" );
);
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
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
Każda zz kolekcji
kolekcji posiada
posiada właściwość
właściwość length
length pozwalającą
pozwalającą na
na określenia
określenia liczby
liczby
elementów
elementów danego
danego typu
typu w
w bieżącym
bieżącym dokumencie.
dokumencie.
Strona : 18
Obiekt document — kolekcje obiektów na stronie
Ile jest obiektów poszczególnych typów w bieżącym dokumencie:
"Kotwice:
++ window.document.anchors.length
"Kotwice: ""
window.document.anchors.length ++ "" "" );
);
"Obrazki:
"
+
window.document.images.length
+
"
"
);
"Obrazki: "
+ window.document.images.length + " " );
"Formularze:
"Formularze: "" ++ window.document.forms.length
window.document.forms.length ++ ""
"" );
);
"Ł
++ window.document.links.length
"Łąącza:
cza: ""
window.document.links.length ++ ""
"" );
);
Ponieważ obiekt window jest domyślny, można używać wersji skróconej:
document.write(
document.write(
document.write(
document.write(
document.write(
document.write(
document.write(
document.write(
"Kotwice:
++ document.anchors.length
"Kotwice: ""
document.anchors.length ++ "" "" );
);
"Obrazki:
++ document.images.length
"Obrazki: ""
document.images.length ++ "" "" );
);
"Formularze:
"
+
document.forms.length
+
""
);
"Formularze: " + document.forms.length + "" );
"Ł
++ document.links.length
"Łąącza:
cza: ""
document.links.length ++ ""
"" );
);
Strona : 19
Jak odwoływać się do elementów drzewa — getElementsByTagName
Odwołanie wg nazwy znacznika — getElementsByTagName
<body>
<body>
<p>Paragraf
<p>Paragraf pierwszy</p>
pierwszy</p>
<p>Paragraf
<p>Paragraf drugi</p>
drugi</p>
<p>Paragraf
<p>Paragraf trzeci</p>
trzeci</p>
</body>
</body>
document.getElementsByTagName(
document.getElementsByTagName( 'p'
'p' )[
)[ 00 ]]
'p' )[
)[ 11 ]]
'p' )[
)[ 22 ]]
liczba elementów danego znacznika w dokumencie — length
'p' ).length
).length
Strona : 20
Jak odwoływać się do elementów drzewa — getElementById
Odwołanie wg nazwy znacznika — getElementById
<body>
<body>
<p
<p id="pierwszy">Paragraf
id="pierwszy">Paragraf pierwszy</p>
pierwszy</p>
<p
<p id="drugi">Paragraf
id="drugi">Paragraf drugi</p>
drugi</p>
<p
<p id="trzeci">Paragraf
id="trzeci">Paragraf trzeci</p>
trzeci</p>
</body>
</body>
document.getElementById(
document.getElementById( "pierwszy"
"pierwszy" ))
document.getElementById( "drugi"
"drugi" ))
document.getElementById( "trzeci"
"trzeci" ))
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>
<body>
<p
pierwszy</p>
<p
drugi</p>
<p
trzeci</p>
</body>
</body>
var
var tekst
tekst == document.getElementById(
"pierwszy" ).innerHTML;
).innerHTML;
alert(
alert( "Paragraf
"Paragraf 1:
1: "" ++ tekst
tekst );
);
tekst
"drugi" ).innerHTML;
).innerHTML;
alert(
alert( "Paragraf
"Paragraf 2:
2: "" ++ tekst
tekst );
);
tekst
"trzeci" ).innerHTML;
).innerHTML;
alert(
alert( "Paragraf
"Paragraf 3:
3: "" ++ tekst
tekst );
);
Strona : 22
Jak odwołać się do tekstu znacznika — nodeValue
Właściwość nodeValue — ta właściwość określa wartość wierzchołka.
<body>
<body>
<p
pierwszy</p>
<p
drugi</p>
<p
trzeci</p>
</body>
</body>
element:
element: p
text: Paragraf pierwszy
var
var tekst
"pierwszy" ).firstChild.nodeValue;
).firstChild.nodeValue;
alert(
alert( "Paragraf
"Paragraf 1:
1: "" ++ tekst
tekst );
);
tekst
"drugi" ).firstChild.nodeValue;
alert(
alert( "Paragraf
"Paragraf 2:
2: "" ++ tekst
tekst );
);
tekst
"trzeci" ).firstChild.nodeValue;
alert(
alert( "Paragraf
"Paragraf 3:
3: "" ++ tekst
tekst );
);
Strona : 23
Po elementach danego typu można iterować
<body>
<body>
<p
pierwszy</p>
<p
drugi</p>
<p
id="trzeci">Paragraf
<p id="trzeci">Paragraf trzeci</p>
trzeci</p>
</body>
</body>
Niespecjalnie optymalna iteracja:
for(
for( var
var ii == 0;
0; ii << document.getElementsByTagName(
'p' ).length;
).length; i++
i++ ))
{{
var
var tekst
tekst == window.document.getElementsByTagName(
window.document.getElementsByTagName( 'p'
'p' )[
)[ ii ].innerHTML;
].innerHTML;
window.alert(
window.alert( "Paragraf
"Paragraf "" ++ (( ii ++ 11 )) ++ ":
": "" ++ tekst
tekst );
);
}}
Lepsza wersja iteracji:
var
var nodes
nodes == window.document.getElementsByTagName(
window.document.getElementsByTagName( 'p'
'p'
for(
for( var
var ii == 0;
0; ii << nodes.length;
nodes.length; i++
i++ ))
{{
var
var tekst
tekst == nodes[
nodes[ ii ].innerHTML;
].innerHTML;
window.alert(
window.alert( "Paragraf
"Paragraf "" ++ (( ii ++ 11 )) ++ ":
": "" ++ tekst
tekst
}}
);
);
);
);
Strona : 24
Iteracja po hiperłączach dokumentu
<body>
<body>
<h2>Moje
<h2>Moje ulubione
ulubione strony</h2>
strony</h2>
<a
<a
<a
<a
<a
<a
href="http://www.cplusplus.com/">O
href="http://www.cplusplus.com/">O jjęęzyku
zyku C++</a><br
C++</a><br />
/>
href="http://gcc.gnu.org/">O
kompilatorze
GCC</a><br
/>
href="http://gcc.gnu.org/">O kompilatorze GCC</a><br />
href="http://www.codeblocks.org/">O
href="http://www.codeblocks.org/">O śśrodowisku
rodowisku Code::Blocks</a><br
Code::Blocks</a><br />
/>
<input
<input type="button"
type="button" value="Poka
value="Pokażż ich
ich adresy"
adresy" onclick="pokazURL()">
onclick="pokazURL()">
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
function
function pokazURL()
pokazURL()
{{
var
var ww == document.getElementById(
document.getElementById( "w"
"w" );
);
w.innerHTML
w.innerHTML == "";
"";
}}
for(
for( ii == 0;
0; ii
{{
w.innerHTML
w.innerHTML
w.innerHTML
w.innerHTML
}}
<< document.links.length;
document.links.length; ++i
++i
))
+=
+= document.links[
document.links[ ii ].innerHTML
].innerHTML ++ ":
": ";
";
+=
+= document.links[
document.links[ ii ].href
].href ++ "<br
"<br \/>";
\/>";
Strona : 25
Pobieranie informacji z elementów typu input
<body>
<body>
<input
id="t1"
<input type="text"
type="text"
id="t1" value="Warto
value="Wartośśćć pola"
pola" />
/>
<input
type="button" id="b1"
id="b1" value="Warto
value="Wartośśćć przycisku"
przycisku"
<p
id="p1"></p>
<p id="p1"></p>
/>
/>
<script
<script type="text/javascript">
type="text/javascript">
var
var s1
s1 == "Pole
"Pole tekstowe:
tekstowe: "" ++ document.getElementById(
document.getElementById( "t1"
"t1" ).value;
).value;
var
var s2
s2 == "Przycisk:
"Przycisk: "" ++ document.getElementById(
document.getElementById( "b1"
"b1" ).value;
).value;
document.getElementById( "p1"
"p1" ).innerHTML
).innerHTML == s1
s1 ++ "<br\/>"
"<br\/>" ++ s2;
s2;
</script>
</script>
</body>
</body>
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
Strona : 27
Komunikacja:
<html>
<html>
<head>
<head>
</head>
</head>
Elementy
Elementy typu
typu input,
input,
zz których
których będą
będą pobrane
pobrane dane
dane
<body>
<body>
<h2>Obliczanie
<h2>Obliczanie śśredniego
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
type="button" value="Oblicz"
value="Oblicz" onclick="spalanie()"
onclick="spalanie()" />
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 28
Komunikacja:
<html>
<html>
<head>
<head>
</head>
</head>
Paragraf
Paragraf przewidziany
przewidziany dla
dla wyniku,
wyniku,
na
na starcie
starcie pusty
pusty
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 29
Komunikacja:
<html>
<html>
<head>
<head>
</head>
</head>
Funkcja
Funkcja obliczająca
obliczająca średnie
średnie
spalanie,
spalanie, aktywowana
aktywowana naciśnięciem
naciśnięciem
przycisku
przycisku Oblicz
Oblicz
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 30
Akcja:
<html>
<html>
<head>
<head>
<script
function
function spalanie()
spalanie()
{{
var
var pp == Number(
Number( document.getElementById(
document.getElementById( "p"
"p"
var
d
=
Number(
"d"
var d = Number( document.getElementById( "d"
var
var out
out == document.getElementById(
"w" );
);
Pobranie
Pobranie wartości
wartości zz pól
pól wejściowych
wejściowych
próba
próba (!)
(!) zamiany
zamiany na
na liczby
liczby
).value
).value
).value
).value
);
);
);
);
if(
if( dd !=
!= 00 ))
out.innerHTML
out.innerHTML == "Spalanie:
"Spalanie: "" ++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
else
else
out.innerHTML
out.innerHTML == "Dystans
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
</head>
</head>
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
type="button"
value="Oblicz"
onclick="spalanie()"
<input type="button" value="Oblicz" onclick="spalanie()" />
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 31
Akcja:
<html>
<html>
<head>
<head>
<script
function
function spalanie()
spalanie()
{{
var
var pp == Number(
"p"
var
d
=
Number(
"d"
var
var out
"w" );
);
Pobranie
Pobranie referencji
referencji do
do paragrafu
paragrafu
prezentacji
prezentacji wyników
wyników
).value
).value
).value
).value
);
);
);
);
if(
if( dd !=
!= 00 ))
out.innerHTML
"Spalanie: "" ++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
else
else
out.innerHTML
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
</head>
</head>
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
type="button"
value="Oblicz"
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 32
Akcja:
<html>
<html>
<head>
<head>
<script
function
function spalanie()
spalanie()
{{
var
var pp == Number(
"p"
var
d
=
Number(
"d"
var
var out
"w" );
);
Zabezpieczenie
Zabezpieczenie przed
przed dzieleniem
dzieleniem
przez
przez zero,
zero, obliczenia,
obliczenia, wstawienie
wstawienie
wyniku
wyniku do
do par.
par. wyjściowego
wyjściowego
).value
).value
).value
).value
);
);
);
);
if(
if( dd !=
!= 00 ))
out.innerHTML
"Spalanie: "" ++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
else
else
out.innerHTML
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
</head>
</head>
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
type="button"
value="Oblicz"
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
Strona : 33
Weryfikacja danych:
Pobierz
Pobierz dane
dane jako
jako łańcuchy
łańcuchy znaków
znaków
<script
function
function spalanie()
spalanie()
{{
var
var pp == document.getElementById(
"p" ).value;
).value;
var
var dd == document.getElementById(
document.getElementById( "d"
"d" ).value;
).value;
var
var out
"w" );
);
if(
if( isNaN(
isNaN( pp )) ||
||
out.innerHTML
out.innerHTML ==
else
else
{{
if(
if( dd !=
!= 00 ))
out.innerHTML
out.innerHTML
else
else
out.innerHTML
out.innerHTML
}}
isNaN(
isNaN( dd )) ))
"Dystans
"Dystans ii ilo
ilośśćć paliwa
paliwa musz
musząą być
być liczbami!";
liczbami!";
== "Spalanie:
"Spalanie: ""
++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
== "Dystans
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
Strona : 34
Weryfikacja danych:
Sprawdź
Sprawdź czy
czy dane
dane są
są liczbami
liczbami
<script
function
function spalanie()
spalanie()
{{
var
"p" ).value;
).value;
var
"d" ).value;
).value;
var
var out
"w" );
);
if(
if( isNaN(
isNaN( pp )) ||
||
out.innerHTML
out.innerHTML ==
else
else
{{
if(
if( dd !=
!= 00 ))
out.innerHTML
out.innerHTML
else
else
out.innerHTML
out.innerHTML
}}
isNaN(
isNaN( dd )) ))
"Dystans
"Dystans ii ilo
ilośśćć paliwa
paliwa musz
musząą być
być liczbami!";
liczbami!";
== "Spalanie:
"Spalanie: ""
++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
== "Dystans
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
Strona : 35
Wynik z wieloma miejscami po przecinku:
<script
function
function spalanie()
spalanie()
{{
var
"p" ).value;
).value;
var
"d" ).value;
).value;
var
var out
"w" );
);
if(
if( isNaN(
isNaN( pp )) ||
||
out.innerHTML
out.innerHTML ==
else
else
{{
if(
if( dd !=
!= 00 ))
out.innerHTML
out.innerHTML
else
else
out.innerHTML
out.innerHTML
}}
isNaN(
isNaN( dd )) ))
"Dystans
"Dystans ii ilo
ilośśćć paliwa
paliwa musz
musząą być
być liczbami!";
liczbami!";
== "Spalanie:
"Spalanie: ""
++ (( pp ** 100
100 )) // dd ++ "" l/100km";
l/100km";
== "Dystans
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
Strona : 36
Ustalenie liczby miejsc po przecinku:
<script
function
function spalanie()
spalanie()
{{
var
"p" ).value;
).value;
var
"d" ).value;
).value;
var
var out
"w" );
);
if(
if( isNaN(
isNaN( pp )) ||
||
out.innerHTML
out.innerHTML ==
else
else
{{
if(
if( dd !=
!= 00 ))
{{
var
var wynik
wynik == ((
out.innerHTML
out.innerHTML
}}
else
else
out.innerHTML
out.innerHTML
}}
isNaN(
isNaN( dd )) ))
"Dystans
"Dystans ii ilo
ilośśćć paliwa
paliwa musz
musząą być
być liczbami!";
liczbami!";
pp ** 100
100 )) // d;
d;
== "Spalanie:
"Spalanie: ""
++ wynik.toFixed(
wynik.toFixed( 22 )) ++ "" l/100km";
l/100km";
== "Dystans
"Dystans musi
musi być
być liczba
liczba dodatni
dodatniąą!";
!";
}}
</script>
</script>
Strona : 37
Ustalenie liczby miejsc po przecinku:
<script
function
function spalanie()
spalanie()
{{
var
"p" ).value;
).value;
var
"d" ).value;
).value;
var
var out
"w" );
);
if(
if( isNaN(
isNaN( pp )) ||
||
out.innerHTML
out.innerHTML ==
else
else
{{
if(
if( dd !=
!= 00 ))
{{
var
var wynik
wynik == ((
out.innerHTML
out.innerHTML
}}
else
else
out.innerHTML
out.innerHTML
}}
isNaN(
isNaN( dd )) ))
"Dystans
"Dystans ii ilo
ilośśćć paliwa
paliwa musz
musząą być
być liczbami!";
liczbami!";
Math.abs(
Math.abs( pp )) ** 100
100 )) // Math.abs(
Math.abs( dd );
);
== "Spalanie:
"Spalanie: "" ++ wynik.toFixed(
wynik.toFixed( 22 )) ++ "" l/100km";
l/100km";
== "Dystans
"Dystans nie
nie mo
możżee być
być zerowy!";
zerowy!";
}}
</script>
</script>
Strona : 38
Manipulowanie zawartością elementów
„Czyszczenie” elementów dokumentu — dodatkowy przycisk:
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
value="Oblicz" onclick="spalanie()"/>
onclick="spalanie()"/>
<input
type="button" value="Wyczy
value="Wyczyśść"
ć" onclick="czyszczenie()"/>
onclick="czyszczenie()"/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
Strona : 39
„Czyszczenie” elementów dokumentu — funkcja obsługi zdarzenia:
<script
.. .. ..
function
function czyszczenie()
czyszczenie()
{{
}}
"p"
"p"
"d"
"d"
"w"
"w"
).value
).value == "";
"";
).value
).value == "";
"";
).innerHTML
).innerHTML == "";
"";
</script>
</script>
Strona : 40
„Czyszczenie” z ustawieniem focusa i zaznaczenia na edytorze paliwa:
function
czyszczenie()
{{
"p" ).value
).value == "";
"";
}}
"d"
"d"
"w"
"w"
).value
).value == "";
"";
).innerHTML
).innerHTML == "";
"";
function
czyszczenie()
{{
var
var pEdit
pEdit == document.getElementById(
"p" );
);
pEdit.value
pEdit.value == "";
"";
pEdit.focus();
pEdit.focus();
}}
"d"
"d"
"w"
"w"
).value
).value == "";
"";
).innerHTML
).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.
Strona : 41
Ustawianie zogniskowania na po załadowaniu treści strony:
.. .. ..
<body
<body onLoad='document.getElementById(
onLoad='document.getElementById(
.. .. ..
<h2>Obliczanie
redniego spalania
spalania na
na
.. .. ..
"p"
"p" ).focus()'>
).focus()'>
100
100 km</h2>
km</h2>
lub
.. .. ..
<body
<body onLoad="document.getElementById(
onLoad="document.getElementById(
.. .. ..
<h2>Obliczanie
redniego spalania
spalania na
na
.. .. ..
'p'
'p' ).focus()">
).focus()">
100
100 km</h2>
km</h2>
Strona : 42
Rozwojowy element — koszt przejechania jednego kilometra
Na razie totalny badziew — szacowanie w oparciu o stałą cenę paliwa :-/
.. .. ..
Żeby
Żeby to
to miało
miało sens,
sens, ta
ta cena
cena powinna
powinna
if(
if( isNaN(
isNaN( pp )) ||
|| isNaN(
isNaN( dd )) ))
dotyczyć
dotyczyć odpowiedniego
odpowiedniego paliwa
paliwa ii być
być aktualna
aktualna
out.innerHTML
=
"Dystans
i
ilo
ś
ć
paliwa
musz
ą
być
liczbami!";
out.innerHTML = "Dystans i ilość paliwa muszą być liczbami!";
else
else
{{
if(
if( dd !=
!= 00 ))
{{
var
var wynik
wynik == (( Math.abs(
100 )) // Math.abs(
Math.abs( dd );
);
var
var kilometr
kilometr == (( wynik
wynik // 100
100 )) ** 5.03
5.03 ;;
wynik
wynik == wynik.toFixed(
wynik.toFixed( 22 );
);
kilometr
=
kilometr.toFixed(
kilometr = kilometr.toFixed( 22 );
);
out.innerHTML
"Spalanie: "" ++ wynik
wynik ++ "" l/100km<\/br>";
l/100km<\/br>";
out.innerHTML
+=
"Szacunkowy
koszt
przejazdu
out.innerHTML += "Szacunkowy koszt przejazdu 1km
1km to:
to: "" ++ kilometr
kilometr ++ "zł";
"zł";
}}
else
else
out.innerHTML
"Dystans nie
nie moze
moze byc
byc zerowy!";
zerowy!";
}}
.. .. ..
Strona : 43
Wprowadzamy wybór rodzaju paliwa (olej napędowy, benzyna, gaz)
<body>
<body>
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
:
<input
type="text"
id="p"
/>
<p>Paliwo : <input type="text" id="p" /> [litry]</p>
[litry]</p>
<p>Dystans:
<input
type="text"
id="d"
/>
[kilometry]</p>
<p>Dystans: <input type="text" id="d" /> [kilometry]</p>
<p>
<p>
<input
<input
<input
<input
<input
<input
</p>
</p>
type="radio"
type="radio"
type="radio"
type="radio"
type="radio"
type="radio"
id="r_on"
id="r_on"
id="r_et"
id="r_et"
id="r_lpg"
id="r_lpg"
<input
type="button"
<input
type="button"
<p
<p id="w"></p>
id="w"></p>
</body
</body
name="paliwo"
name="paliwo"
name="paliwo"
name="paliwo"
name="paliwo"
name="paliwo"
value="on"
value="on" />olej
/>olej nap
napęędowy
dowy
value="et"
value="et" checked="checked"
checked="checked" />benzyna
/>benzyna
value="lpg"
value="lpg" />gaz
/>gaz
value="Oblicz"
value="Wyczy
ś
ć"
value="Wyczyść" onclick="czyszczenie()"/>
Ten
Ten przycisk
przycisk będzie
będzie domyślnie
domyślnie zaznaczony.
zaznaczony.
Uwaga,
Uwaga, są
są kontrowersje
kontrowersje związane
związane zz wartością
wartością przypisywaną
przypisywaną do
do atrybutu
atrybutu checked,
checked, przedstawione
przedstawione
rozwiązanie
rozwiązanie jest
jest zgodne
zgodne zz W3C.
W3C.
W
W ramach
ramach grupy
grupy przycisków
przycisków oo tej
tej samej
samej wartości
wartości atrybutu
atrybutu name
name tylko
tylko jeden
jeden przycisk
przycisk może
może
być
być zaznaczony.
zaznaczony. Pozwala
Pozwala to
to na
na stosowanie
stosowanie wielu
wielu różnych
różnych grup
grup przycisków
przycisków radiowych.
radiowych.
Strona : 44
Poprawka funkcji czyszczenia pól wprowadzania danych
function
czyszczenie()
{{
}}
"p"
"p"
"d"
"d"
"w"
"w"
).value
).value == "";
"";
).value
=
"";
).value = "";
).innerHTML
).innerHTML == "";
"";
"r_on"
"r_on"
"r_et"
"r_et"
"r_lpg"
"r_lpg"
).checked
).checked
).checked
).checked
).checked
).checked
==
==
==
false;
false;
true;
true;
false;
false;
Dla
Dla elementów
elementów wejściowych
wejściowych typu
typu radio
radio ii checkbox
checkbox DOM
DOM przewiduje
przewiduje
możliwość
możliwość manipulowania
manipulowania właściwością
właściwością checked,
checked, traktowaną
traktowaną jako
jako wartość
wartość bool.
bool.
Inne właściwości obiektu typu przycisk radiowy (wg W3C):
Strona : 45
Poprawka funkcji obliczania średniego spalania:
.. .. ..
Wywołanie
Wywołanie funkcji
funkcji odpowiedzialnej
odpowiedzialnej za
za
if(
if( isNaN(
isNaN( pp )) ||
|| isNaN(
isNaN( dd )) ))
wyznaczenie
wyznaczenie ceny
ceny właściwej
właściwej dla
dla danego
danego paliwa
paliwa
out.innerHTML
=
"Dystans
i
ilo
ś
ć
paliwa
musz
ą
być
liczbami!";
out.innerHTML = "Dystans i ilość paliwa muszą być liczbami!";
else
else
{{
if(
if( dd !=
!= 00 ))
{{
var
var wynik
wynik == (( Math.abs(
100 )) // Math.abs(
Math.abs( dd );
);
var
var kilometr
kilometr == (( wynik
wynik // 100
100 )) ** ustalCene()
ustalCene() ;;
wynik
wynik == wynik.toFixed(
wynik.toFixed( 22 );
);
kilometr
=
kilometr.toFixed(
kilometr = kilometr.toFixed( 22 );
);
out.innerHTML
"Spalanie: "" ++ wynik
wynik ++ "" l/100km<\/br>";
l/100km<\/br>";
out.innerHTML
+=
"Szacunkowy
koszt
przejazdu
out.innerHTML += "Szacunkowy koszt przejazdu 1km
1km to:
to: "" ++ kilometr
kilometr ++ "zł";
"zł";
}}
else
else
out.innerHTML
"Dystans nie
nie moze
moze byc
byc zerowy!";
zerowy!";
}}
.. .. ..
Strona : 46
Funkcja wyznaczania ceny, badziewiarskie wersje w amatorskiej odsłonie:
function
function ustalCene()
ustalCene()
{{
if(
if( document.getElementById(
return
return 4.50;
4.50;
if(
return
return 4.60;
4.60;
if(
return
return 2.50;
2.50;
}}
"r_on"
"r_on" ).checked
).checked ))
"r_et"
"r_et" ).checked
).checked ))
"r_lpg"
"r_lpg" ).checked
).checked ))
function
ustalCene()
{{
var
var on
on == document.getElementById(
var
var et
et == document.getElementById(
var
lpg
=
var lpg = document.getElementById(
}}
"r_on"
"r_on" );
);
"r_et"
"r_et" );
);
"r_lpg"
"r_lpg" );
);
if(
if( on.checked
on.checked ))
return
return 4.50;
4.50;
if(
if( et.checked
et.checked ))
return
return 4.60;
4.60;
if(
if( lpg.checked
lpg.checked ))
return
return 2.50;
2.50;
Strona : 47
Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych:
.. .. ..
<h2>Obliczanie
redniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo :: <input
<input type="text"
type="text" id="p"
id="p" />
/> [litry]</p>
[litry]</p>
Formularz
Formularz oo nazwie
nazwie wybieraczPaliwa
wybieraczPaliwa
<p>Dystans:
<p>Dystans: <input
<input type="text"
type="text" id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<form
<form name="wybieraczPaliwa">
name="wybieraczPaliwa">
<input
<input type="radio"
type="radio" id="r_on"
id="r_on" name="paliwo"
name="paliwo" value="4.50"
value="4.50" />olej
/>olej nap
napęędowy
dowy
<input
<input type="radio"
type="radio" id="r_et"
id="r_et" name="paliwo"
value="4.60" checked
checked == "checked"
"checked" />benzyna
/>benzyna
<input
<input type="radio"
type="radio" id="r_lpg"
id="r_lpg" name="paliwo"
value="2.50" />gaz
/>gaz
</form>
</form>
<input
<input
type="button" value="Wyczy
value="Wyczyśść"
ć" onclick="czyszczenie()"/>
<p
<p id="w"></p>
id="w"></p>
.. .. ..
Cena
Cena jako
jako wartość
wartość zapisane
zapisane w
w obiekcie
obiekcie
przycisku
przycisku radiowego
radiowego
Strona : 48
Funkcja wyznaczania ceny, dalej badziew, ale w nieamatorskiej odsłonie:
function
ustalCene()
{{
for(
for( ii == 0;
0; ii << document.wybieraczPaliwa.paliwo.length;
document.wybieraczPaliwa.paliwo.length; ++i
++i ))
if(
if( document.wybieraczPaliwa.paliwo[
document.wybieraczPaliwa.paliwo[ ii ].checked
].checked ))
return
return Number(
Number( document.wybieraczPaliwa.paliwo[
document.wybieraczPaliwa.paliwo[ ii ].value
].value );
);
}}
Dla elementów formularza o tych samych nazwa tworzona jest tablica
odpowiadających im obiektów:
document.wybieraczPaliwa.paliwo
document.wybieraczPaliwa.paliwo
//
// Dla
Dla formularza
formularza oo nazwie
nazwie wybieraczPaliwa
wybieraczPaliwa
Liczba elementów w takiej tablicy:
document.wybieraczPaliwa.paliwo.length
document.wybieraczPaliwa.paliwo.length
Dostęp do i-tego elementu tablicy:
document.wybieraczPaliwa.paliwo[
document.wybieraczPaliwa.paliwo[ ii ]]
Strona : 49
Czasem inikatowa identyfikacja elementów nie jest konieczna:
function
czyszczenie()
{{
}}
"p"
"p"
"d"
"d"
"w"
"w"
"r_on"
"r_on"
"r_et"
"r_et"
"r_lpg"
"r_lpg"
function
czyszczenie()
{{
}}
).value
).value == "";
"";
).value
).value == "";
"";
).innerHTML
).innerHTML == "";
"";
"p"
"p"
"d"
"d"
"w"
"w"
).checked
).checked
).checked
).checked
).checked
).checked
==
==
==
false;
false;
true;
true;
false;
false;
).value
).value == "";
"";
).value
).value == "";
"";
).innerHTML
).innerHTML == "";
"";
for(
for( ii == 0;
++i
i
].checked
=
false;
document.wybieraczPaliwa.paliwo[ i ].checked = false;
document.wybieraczPaliwa.paliwo[ 11 ].checked
].checked == true;
true;
))
Strona : 50
Wtedy można zrezygnować z stosowania id:
.. .. ..
<form
<input
<input type="radio"
type="radio" id="r_on"
id="r_on" name="paliwo"
value="4.50" />olej
/>olej nap
napęędowy
dowy
<input
<input type="radio"
type="radio" id="r_et"
id="r_et" name="paliwo"
"checked" />benzyna
/>benzyna
<input
<input type="radio"
type="radio" id="r_lpg"
id="r_lpg" name="paliwo"
value="2.50" />gaz
/>gaz
</form>
</form>
.. .. ..
.. .. ..
<form
<input
<input type="radio"
type="radio" name="paliwo"
value="4.50" />olej
/>olej nap
napęędowy
dowy
<input
<input type="radio"
"checked" />benzyna
/>benzyna
<input
<input type="radio"
value="2.50" />gaz
/>gaz
</form>
</form>
.. .. ..
Strona : 51
Dlaczego ta funkcja jest dalej badziewiasta?
function
ustalCene()
{{
for(
for( ii == 0;
++i ))
if(
if( document.wybieraczPaliwa.paliwo[
document.wybieraczPaliwa.paliwo[ ii ].checked
].checked ))
return
return Number(
Number( document.wybieraczPaliwa.paliwo[
document.wybieraczPaliwa.paliwo[ ii ].value
].value );
);
}}
Dlatego, że ceny paliw są i tak na stałe wpisane w kod:
.. .. ..
<form
<input
<input type="radio"
value="4.50" />olej
/>olej nap
napęędowy
dowy
<input
<input type="radio"
"checked" />benzyna
/>benzyna
<input
<input type="radio"
value="2.50" />gaz
/>gaz
</form>
</form>
.. .. ..
Ceny
Ceny paliw
paliw powinny
powinny być
być uzyskiwane
uzyskiwane samoczynnie
samoczynnie od
od odpowiedniej
odpowiedniej usługi
usługi
sieciowej,
sieciowej, oferującej
oferującej aktualne
aktualne ceny
ceny paliw.
paliw.
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ć
Być może
może całkiem
całkiem sporo
sporo pół
pół znacznikowych
znacznikowych
<body>
<body>
<h2>Zaznacz
<h2>Zaznacz swoje
swoje hobby</h2>
hobby</h2>
<form
<form name="wybieraczHobby">
name="wybieraczHobby">
<input
<input type="checkbox"
type="checkbox" name="hobby"
name="hobby"
<input
name="hobby"
<input
name="hobby"
<input
type="checkbox"
name="hobby"
<input type="checkbox" name="hobby"
<input
type="button"
<input
type="button"
<input
type="button"
</form>
</form>
<p
<p id="wybor"></p>
id="wybor"></p>
</body>
</body>
value="narty"
value="narty"
value="rower"
value="rower"
value="rolki"
value="rolki"
value="tenis"
value="tenis"
value="Wyczy
value="Wyczyśść"
ć"
value="Wszystko"
value="Wszystko"
value="Potwierd
value="Potwierdźź""
/>Narty
/>Narty
/>Rower<br
/>Rower<br />
/>
/>Rolki
/>Rolki
/>Tenis<br
/>Tenis<br />
/>
onclick="
onclick="wyczysc()"/>
wyczysc()"/>
onclick="wszystko()"/>
onclick="wszystko()"/>
onclick="
onclick="potwierdzenie()"/>
potwierdzenie()"/>
Obsługa
Obsługa przed
przed wysłaniem
wysłaniem
Strona : 53
Taka sobie prymitywna wersja:
function
function potwierdzenie()
potwierdzenie()
{{
var
var napis
napis == "Zazaczone
"Zazaczone hobby:
hobby: ";
";
for(
for( ii == 0;
0; ii << document.wybieraczHobby.hobby.length;
document.wybieraczHobby.hobby.length;
if(
if( document.wybieraczHobby.hobby[
document.wybieraczHobby.hobby[ ii ].checked
].checked ))
napis
napis +=
+= document.wybieraczHobby.hobby[
document.wybieraczHobby.hobby[ ii ].value
].value
}}
++i
++i
))
++ '' ';
';
document.getElementById( "wybor"
"wybor" ).innerHTML
).innerHTML == napis;
napis;
function
function wyczysc()
wyczysc()
{{
for(
for( ii == 0;
document.wybieraczHobby.hobby.length; ++i
++i
document.wybieraczHobby.hobby[
i
].checked
=
false;
document.wybieraczHobby.hobby[ i ].checked = false;
"wybor" ).innerHTML
).innerHTML == "";
"";
}}
function
function wszystko()
wszystko()
{{
for(
for( ii == 0;
++i
document.wybieraczHobby.hobby[ ii ].checked
].checked == true;
true;
"wybor"
).innerHTML
=
"";
document.getElementById( "wybor" ).innerHTML = "";
}}
))
))
Strona : 54
Wersja reagująca na zaznaczenie każdego pola znacznikowego:
<body>
<body>
<h2>Zaznacz
<h2>Zaznacz swoje
swoje hobby</h2>
hobby</h2>
<form
<form name="wybieraczHobby">
name="wybieraczHobby">
<input
name="hobby" value="narty"
value="narty" onclick="ustawWybor()"
onclick="ustawWybor()" />Narty
/>Narty
<input
type="checkbox"
name="hobby"
value="rower"
onclick="ustawWybor()"/>Rower<br
<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="rolki" onclick="ustawWybor()"/>Rolki
<input
name="hobby" value="tenis"
value="tenis" onclick="ustawWybor()"/>Tenis<br
onclick="ustawWybor()"/>Tenis<br />
/>
<input
value="Wyczy
onclick="
type="button"
value="Wyczyśść"
ć"
onclick="ustaw(
ustaw( false
false )"/>
)"/>
<input
type="button"
value="Wszystko"
onclick="ustaw(
true
)"/>
value="Wszystko" onclick="ustaw( true )"/>
<input
type="button"
value="Potwierd
value="Potwierdźź"" onclick="
onclick="potwierdzenie()"/>
potwierdzenie()"/>
</form>
</form>
<p
<p id="wybor"></p>
id="wybor"></p>
</body>
</body>
Strona : 55
Wersja reagująca na zaznaczenie każdego pola znacznikowego:
function
function potwierdzenie()
potwierdzenie()
{{
var
var komunikat
komunikat == document.getElementById(
"wybor" ).innerHTML;
).innerHTML;
if(
komunikat
==
""
)
if( komunikat == "" )
komunikat
komunikat == "Nie
"Nie lubisz
lubisz żżadnych
adnych zz tych
tych rzeczy..."
rzeczy...";;
alert(
alert( komunikat
komunikat );
);
}}
function
function ustawWybor()
ustawWybor()
{{
var
var napis
napis == "";
"";
for(
for( ii == 0;
++i ))
if(
i
].checked
)
if( document.wybieraczHobby.hobby[ i ].checked )
napis
napis +=
+= document.wybieraczHobby.hobby[
document.wybieraczHobby.hobby[ ii ].value
].value ++ '' ';
';
}}
if(
if( napis
napis !=
!= ""
"" ))
napis
napis == "Zazaczone
"Zazaczone hobby:
hobby: "" ++ napis;
napis;
"wybor" ).innerHTML
).innerHTML == napis;
napis;
function
function ustaw(
ustaw( naTak
naTak ))
{{
for(
for( ii == 0;
++i ))
i
].checked
=
naTak;
document.wybieraczHobby.hobby[ i ].checked = naTak;
ustawWybor();
ustawWybor();
}}
Strona : 56

Podstawy programowania w JavaScript - Programowanie

Transkrypt

Podobne dokumenty

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

Podstawy języka JavaScript 1. CEL ĆWICZENIA Celem ćwiczenia