Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
JavaScript – DOM HTML objektit
Jouni Juntunen Oulun seudun ammattikorkeakoulu Liiketalouden yksikkö
2
DOM Document object model W3C-standardi
Standardi (ohjelmointi)rajapinta, jonka avulla voidaan käsitellä HTML-dokumentin elementtejä
3
DOM puu
4
Document HTML-dokumentissa olevia elementtejä käsitellään document-objektin kautta Esim. var eurot=document.getElementById(”txtEuro”).value; tai var eurot=document.forms[0].txtEuro.value;
5
Write Dokumenttiin voidaan kirjoittaa sisältöä write-funktiota kutsumalla Esimerkki: <html> <body> <script type="text/javascript"> document.write(“Tämä on tekstiä"); </script> </body> </html>
6
getElementById Dokumentissä olevien elementtien attribuuttien arvoja voidaan vaihtaa getElementById-funktioita kutsumalla Dokumentin ei tarvitse sisältää lomaketta tätä tapaa käytettäessä Syntaksi: getElementById[kentän id kentän arvo] Esimerkkejä: var eurot=document.getElementById(”txtEuro”).value; document.getElementById("test").style.background="#cc0000";
7
InnerHTML Komennon avulla voidaan asettaa sisältö html-elementtiin (esim. span ja div) Esimerkki: document.getElementById(”lblViesti”).innerHtml=”Syötä luku”; Esimerkki:
8
Style Elementin tyyli voidaan asettaa Javascriptissä
Tyylimäärittelyt CSS:n tapaan Esimerkki: document.getElementById("test").style.background="#cc0000";
9
Esimerkki: DHTML-valikko
10
Images Dokumentissa oleviin kuviin voidaan viitata images-kokoelman kautta
11
Forms Lomakkeen kenttien arvot voidaan lukea forms-kokoelman avulla
Syntaksi: document.forms[index/lomakkeen nimi] tai document.lomakkeennimi Arvo luetaan tai asetetaan value ominaisuuteen Esimerkki: var eurot=document.forms[0].txtEuro.value; document.forms[0].txtEuro.value=100;
12
Kohdistimen asettaminen lomakkeen kenttään
onload –dokumenttia ladattaessa Esimerkki: Kohdistin tiettyyn kenttään, kun dokumenttin tuodaan näkyviin
13
input type=”text” W3C:n tutoriaalissa
Esimerkki:
14
input type=”radio” W3C:n tutoriaalissa
Esimerkki 1: Esimerkki 2:
15
input type=”checbox” W3C:n tutoriaalissa
Esimerkki:
16
select W3C:n tutoriaalissa
Esimerkki 1: Esimerkki 2:
17
Lähteitä
Samankaltaiset esitykset
