Lataa esitys
Esittely latautuu. Ole hyvä ja odota
JulkaistuMaija-Leena Myllymäki Muutettu yli 9 vuotta sitten
1
JavaScript oliot © Reiska, 2014
2
DOM Oliot JavaScript sisältää paljon valmiita DOM olioita, on sisältänyt jo DOM level 0 (ns. Legacy DOM) alkaen WWW-ympäristössä asiakas on navigator-olio (eli selain) window-olio (ikkuna) document-olio (sivu ikkunassa). document-olio on hierarkinen puu linkkejä ja ankkureita, lomakkeita, kuvia, appletteja … joita kutakin dokumentissa voi olla useita (links[0] …). Näistä edelleen lomakkeet sisältävät elementtejä (elements[]), kuten text, radio, checbox, textarea, password, select+options, button, reset, submit. elementtien tekstisisältöjä ja attribuuttien arvoja voidaan lukea ja muokata JavaScriptillä.
4
images[0] images[1] links[0] forms[0] elements[1] elements[0] elements[2] ”Legacy DOM”, eli Document Object Model Level 0.
5
JavaScriptOliot2.html JavaScriptOliot4.html Dokumentin elementteihin voidaan viitata myös niiden nimillä (id ja name attribuutit)
6
Muut oliot Muista: Oliot ovat tietorakenteita, joilla on ominaisuuksia ja metodeja. Esimerkiksi auto -oliolla on ominaisuudet väri ja nopeus. jälkimmäisen arvoa voidaan muuta metodilla muuttaa. Olioita voidaan instantioida valmiista luokista tai niitä voidaan tehdä ”lennossa” (prototyping). JavaScriptissä on valmiita luokkia mm. Date, Number, String ja Array … Lisäksi lähes jokainen HTML elementti voidaan tulkita olioksi (DOM).
7
Olio on luokan instanssi var selaimenKello = new Date(); var pii = new Number(3.1415927); // pii = 3.1415927 var mj = new String(”Merkkien jono”); // mj = ”...” var a = new Array(3, 1, 4, 1, 5, 9); tai var b = [1, 2, 3, 4, 5]; var auto = { väri:’valkoinen’, // JSON. Ei tarvita luokkaa nopeus:100, muuta:function(x) { this.nopeus+=x; } }; Olion ominaisuuksia ja metodeja käytetään pistenotaatiolla, eli esim. auto.väri ; tai auto.muuta(-10);
8
Esimerkki
9
Oman luokan määrittely Esimerkki 1 Esimerkki 2
10
AJAX AJAX eli Asynchronous JavaScript And XML ”keksittiin” vuonna 2005, kun kehiteltiin ns. RIA-sovelluksia (rikkaita internet applikaatioita). Se on usean tunnetun teknologian yhdistelmä:Asynchronous JavaScript And XML HTML ja XHTML (ja muutkin merkkauskielet) CSS (tyylisivut) JavaScript (interaktiivisuus) DOM (Document Object Model) XML XSLT (transformaatiot, XML tyylit) XMLHttpRequest-olio XMLHttpRequest-olio keskustelee eli kommunikoi internetissä palvelinpuolen sovellusten kanssa. Olio mahdollistaa sekä synkro- nisen että asynkronisen kommunikoinnin. Protokolla on HTTP.
11
XMLHttpRequest-olio Olio luodaan eli instantioidaan nykyaikaisilla selaimille ”normaalisti”, eli var httpRequest = new XMLHttpRequest(). Vanhemmilla selaimilla tarvitaan ”temppuja”:
12
AJAX ja XML XMLHttpRequest-olion avulla voidaan WWW-sivulle hakea sisältöjä ilman, että koko sivua tarvitsee ladata uudelleen. Lisäaineisto haetaan usein XML-muodossa ( responseXML ) ja JavaScript-koodi sijoittaa tiedot selaimessa olevan sivun HTML- koodiin oikealle paikalleen. P.S. XMLHttpRequestin responseXML on XML DOM-tyyppiä, ei suoraan ”tavallinen” JavaScript-olio. ---------------------------------------------------- XML-muotoisen tiedon käsittelyssä E4X (EcmaScript for XML) on uusinta standardin mukaista tekniikkaa. Siitä seuraavalla kerralla.E4X XML-tyyppistä oliota käsitellään kuten mitä tahansa muutakin JavaScript oliota. Olion ominaisuudet luetaan suoraan XML-tagien nimien avulla pistenotaatiota käyttäen.
13
XMLHttpRequest-olio Ominaisuudet onreadystatechange=callback funktion nimi readyState (0=alustamaton, 1=avoin, 2=lähetetty, 3=vastaaotto kesken, 4=vastaanotettu (valmis)) status (HTTP statuskoodi) ja statusText (HTTP statusteksti) responseText (teksti), responseXML (olio) Metodit open (HTTP metodi, URL, async, user, password) setRequestHeader(nimi, arvo) send (sisältöparametrit, usein null tai ””) abort() getResponseHeader(nimi), getAllResponseHeaders()
14
EsimerkkiEsimerkki synkronisesta käytöstä
15
EsimerkkiEsimerkki asynkronisesta käytöstä
Samankaltaiset esitykset
© 2024 SlidePlayer.fi Inc.
All rights reserved.