JavaScript oliot © Reiska, 2014. 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ä.

Esitys aiheesta: "JavaScript oliot © Reiska, 2014. 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ä."— Esityksen transkriptio:

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

3

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