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
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”
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.
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.
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.
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
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
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
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
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
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).
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
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)
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
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
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
windowposiada 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
documentpowinno 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" );ś ś
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
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ść
lengthpozwalającą na określenia liczby elementów danego typu w bieżącym dokumencie.
Każda z kolekcji posiada właściwość
lengthpozwalającą na określenia liczby
elementów danego typu w bieżącym dokumencie.
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
windowjest domyślny, można używać wersji skróconej :
Ile jest obiektów poszczególnych typów w bieżącym dokumencie:
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' ).lengthdocument.getElementsByTagName( 'p' ).length
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" )
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 );
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
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:
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 \/>";
}
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>
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
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
<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
<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
<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
<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
<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
<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
<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
<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:
<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:
<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:
<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:
<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:
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.
. . .
<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
. . .
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
<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.
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):
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
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;
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
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:
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;
}
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>
. . .
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.
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>