2.5.2013 Aulikki Hyrskykari Javascript DOM jquery Oliot ovat kokoelmia piirteitä; piirteet voivat olla joko o ominaisuuksia (properties, perustietotyyppejä tai edelleen olioita) tai o metodeja (methods, funktioita) Olion ominaisuuksiin ja metodeihin viitataan pistenotaatiolla: olio.ominaisuus
Olio, voidaan luoda o alustajalla (initializer) var kirja1={aihe:"jquery", tekija:"david Sawyer McFarland"}; <!DOCTYPE HTML> <head> <title>itse määritelty olio</title> </head> <body> <h1>opetellaan JavaScriptiä 2</h1> <script type="text/javascript"> // Luodaan ja ja alustetaan kirja olio, jolla jolla kaksi kaksi ominaisuutta ominaisuutta var kirja = {aihe:"jquery", tekija:"david Sawyer Sawyer McFarland"}; // kutsutaan seuraavassa luotua oliota document.write("kirjan nimi: " " + kirja.aihe + + "<br>"); + document.write("kirjoittaja: " " + kirja.tekija + + "<br>"); + "<br>"); </body> </html> Olio, voidaan luoda o new operaattorin ja Object() konstruktorin avulla var kirja1 new Object(); o antamalla sen jälkeen oliolle ominaisuudet sijoituslausein <!DOCTYPE HTML> <html> <head> <meta charset="utf 8"> <title>oma olio</title> </head> <body> <h1>opetellaan JavaScriptiä 3</h1> <script type="text/javascript"> var kirja = = new new Object(); // Luodaan // Luodaan olio olio kirja.aihe = "jquery"; = // ja // asetetaan ja asetetaan oliolle ominaisuudet oliolle ominaisuudet kirja.tekija = "David = "David Sawyer Sawyer McFarland"; McFarland"; // kutsutaan seuraavassa otsikko osassa luotua oliota luotua oliota document.write("kirjan nimi: nimi: " + kirja.aihe " + kirja.aihe + "<br>"); + "<br>"); document.write("kirjoittaja: " + kirja.tekija " + kirja.tekija + "<br>"); + "<br>"); </body> </html>
Konstruktori funktion avulla <!DOCTYPE HTML> <head> <meta charset="utf 8"> <title>konstruktorilla määritelty olio</title> <script <script type="text/javascript"> type="text/javascript"> //kostruktori: funktio funktio Kirja tyyppisen Kirja tyyppisen olion luomiseksi olion luomiseksi function Kirja(mj1, mj2){ mj2){ this.aihe = mj1; = mj1; this.tekija = mj2; = mj2; } </head> <body> <h1>opetellaan JavaScriptiä 4</h1> <script type="text/javascript"> var kirja1 = new = new Kirja("jQuery","David Sawyer McFarland"); Sawyer McFarland"); document.write("<p class='tausta'>kirjan nimi: " nimi: + kirja1.aihe " + kirja1.aihe + "<br>"); + "<br>"); document.write("kirjoittaja: " + kirja1.tekija " + kirja1.tekija + "<br>"); + "<br>"); </body> </html> Olioiden metodien määritys tapahtuu samaan tapaan o nyt metodille vaan annetaan arvoksi funktio. o olion metodit ovat sellaisia olion ominaisuuksia, jolle ei annetakaan arvoksi perustietotyyppiä, vaan funktio <!DOCTYPE html> <head> <meta charset="utf 8"> <title>metodin itse tehdylle oliolle</title> <script type="text/javascript"> function Asiakas(mj1, mj2, luku) { <script type="text/javascript"> this.etunimi = mj1; function Asiakas(mj1, mj2, luku) { this.sukunimi this.etunimi = mj1; = mj2; this.ika this.sukunimi = luku; = mj2; // this.ika liitetään = luku; olioon metodi this.syntynyt // liitetään olioon = Syntymavuosi; metodi this.syntynyt = Syntymavuosi; } } function Syntymavuosi(vuosiNyt) { { var var svuosi = vuosinyt this.ika; return svuosi; } } </head> <body> <h1>opetellaan JavaScriptiä 5</h1> <script <script type="text/javascript"> type="text/javascript"> var var asiakas_001 asiakas_001 = = new new Asiakas("Kalle", "Kuluttaja", 28); 28); document.write("asiakkaan 001 nimi on: "" + + asiakas_001.etunimi + + "" "" + + asiakas_001.sukunimi + + "" (" (" + + asiakas_001.ika + + "v)" "v)" + + ", ", hän hän on on siis siis syntynyt syntynyt vuonna: vuonna: "" + + asiakas_001.syntynyt(2013)); asiakas_001.syntynyt(2013)); </p> </body> </html>
Joskus muuttujaa on tarpeen käsitellä oliona o esimerkiksi halutaan määritellä sille sen metodeja o voi esitellä perustietotyypin number sijasta olioksi Number. var luku = new Number(15); Muita Number oliolle määriteltyjä ominaisuuksia ja metodeja o MAX_VALUE suurin esitettävissä oleva luku o MIN_VALUE suurin esitettävissä oleva luku o NaN arvo, joka tarkoittaa, että muuttujan arvo ei ole luku (esim. 0/0) o toexponential(luku), palauttaa luvun eksponenttinotaation merkkijonona o tofixed(luku), palauttaa luvun desimaalipiste esitymuotoisena merkkijonona o tostring(luku), palauttaa luvun merkkijonona Number-oliolle on määriteltyjen metodien avulla olio voidaan esimerkiksi pakottaa tulostumaan eksponenttimuodossa tai muuttaa merkkijonoksi tai perustietotyypiksi number. Tarkemmin Number-olion ominaisuuksista ja metodeista: var mja = new Boolean(totuusarvo); o jos oliolle ei anneta alkuarvoa, tai o annettu alkuarvo on 0, 0. null, "", undefined, NaN tai o ehto, jonka arvo on epätosi saa muuttuja arvokseen epätosi o kaikissa muissa tilanteissa (huom. myös tilanteessa mja= new Boolean(false)) saa luotu muuttuja arvokseen tosi Muita Boolean oliolle määriteltyjä metodeja o tostring(), palauttaa totuusarvon merkkijonona true tai false o valueof(), palauttaa Boolean olion primitiiviarvon var b1 = new Boolean(1); var mja1 = b1.tostring(); // merkkijono true var b2 = new Boolean(0); var mja2 = b2.valueof(); // primitiiviarvo false
Number-oliolle on määriteltyjen metodien avulla olio voidaan esimerkiksi pakottaa tulostumaan eksponenttimuodossa tai muuttaa merkkijonoksi tai perustietotyypiksi number. Tarkemmin Number-olion ominaisuuksista ja metodeista: var str = new String("Tämä on merkkijono olio"); String ominaisuus o length palauttaa merkkijonon pituuden String oliolle määriteltyjä metodeja mm. o charat() palauttaa merkkijon merkin halutulla indeksillä o match() etsii säännöllisen lausekkeen avulla määriteltyä osamerkkijonoa o lastindexof() palauttaa viimeisen indeksin, jossa määrätty merkki sijaitsee o substr() muodostaa määrätyn osamerkkijonon o split() muodostaa listan osamerkkijonoja (taulukkoon) o replace() etsii ja korvaa osamerkkijonon o tolowercase() muuntaa merkkijonon merkit pieniksi kirjaimiksi o touppercase() muuntaa merkkijonon merkit isoiksi kirjaimiksi o valueof() palauttaa String olion primitiiviarvon string Number-oliolle on määriteltyjen metodien avulla olio voidaan esimerkiksi pakottaa tulostumaan eksponenttimuodossa tai muuttaa merkkijonoksi tai perustietotyypiksi number. Tarkemmin Number-olion ominaisuuksista ja metodeista: Taulukko on JavaScriptissä toteutettu oliona o järjestetty joukko arvoja, joihin voi viitata joko nimellä tai indeksillä o voidaan luoda usealla eri tavalla var taulu = new Array(alkio0, alkio1,..., alkion); var taulu = Array(alkio0, alkio1,..., alkion); var taulu = [alkio0, alkio1,..., alkion]; o Jos taulukko luodaan antamatta sille sisältöä, sille voi antaa pituuden taulukon luonnissa var taulu = new Array(3); var taulu = Array(3), var taulu = []; taulu3.length = 3; taulu[0]=alkio1; taulu[1]=alkio2; taulu[2]=alkio3;
Luodaan sisäkkäisten taukoiden avulla (solu edelleen taulukko) var imax = 5; var i, j; // silmukkamuuttujat var matriisi = new Array(iMax + 1); // taulukon pituudeksi imax+1, //(indeksointi lähtee nollasta) */ for (i = 1; i <= imax; i++) { // kullekin taulukon riville matriisi[i] = new Array(iMax + 1); // Luo taulukon sarakkeet for (j = 1; j <= imax; j++) { // täytetään taulukko matriisi[i][j] = i * j; } } document.write(matriisi[3][4] + <br /> ); document.write(matriisi[5][2] + <br /> ); document.write(matriisi[1][4] + <br /> ); Tulostuisi: 12 10 4 Array ominaisuus o length palauttaa taulukon pituuden Array oliolle määriteltyjä metodeja mm. o indexof() etsii taulukon alkion ja palauttaa sen indeksin o pop() palauttaa viimeisen alkion ja poistaa sen taulukosta o push() lisää uuden alkion taulukon loppuun ja palauttaa taulukon uuden pituuden o reverse() kääntää taulukon alkiot päinvastaiseen järjestykseen o shift() palauttaa ensimmäisen alkion ja poistaa sen taulukosta o unshift() lisää elementin taulukon alkuun ja palauttaa taulukon uuden pituuden o tostring() muuntaa taulukon sisällön merkkijonoksi
Date muuttujaan voi tallentaa päiväyksen ja ajan Ajan voi ilmaista oliomuuttujaa luodessaan antamalla konstruktorille o kokonaisluku: millisekunteja tulkitaan samoin kuin gettime() metodin antama kokonaisluku, millisekunteina lähtien ajankohdasta 1.1.1970 00:00:00 o merkkijono: esimerkiksi "April 27, 2013 16:02:00" o kolme kokonaislukua pilkulla toisistaan erotettuna: esim. 2013, 04, 26 luo päiväyksen vuosi, kuukausi, päivä o kuusi kokonaislukua pilkulla tosistaan eroteltuna: 2013, 04, 26, 16, 02, 00, edellisen lisäksi määritellään myös tunnit, minuutit ja sekunnit var luotu = new Date(2013, 04, 27, 16, 02, 00); var nyt = new Date(); Date oliolle määriteltyjä metodeja mm. o getdate() palauttaa päiväyksen kuukauden päivän (1 31) o getday() palauttaa päiväyksen viikonpäivän (0 6) o getfullyear() palauttaa päiväyksen vuoden o getminutes() palauttaa päiväyksen minuutit o getmonth() palauttaa päiväyksen kuukauden (0 11) o gettime palauttaa lukuarvon millisekunteina ajankohdasta 1.1.1970 o parse() jäsentää merkkijonosta päiväyksen ja palauttaa lukuarvon millisekunteina o tostring() muuntaa päiväyksen merkkijonoksi Myös get metodeja vastaavat set metodit
Math olioille on määriteltynä ominaisuuksia ja metodeita, jotka helpottavat matemaattisten operaatioiden tekemistä. o esimerkiksi tallennettu piin (Π) arvo ominaisuudeksi o Math.PI ja trigonometriset funktiot metodeiksi. Math prototyypistä ei normaalisti ole tarvetta luoda oliota, vaan sen ominaisuuksia ja metodeita voi käyttää suoraan prototyypistä. var pii = Math.pii; var rad = Math.sin(x); // x kokonaisluku, palauttaa arvon sin(x) radiaaneissa for...in silmukan avulla käydään läpi olion kaikki ominaisuudet <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>for...in esimerkki</title> </head> <body> <h1>opetellaan JavaScriptiä 6 </h1> <p> Käydään läpi asiakastiedot ja muodostetaan niistä merkkijono. </p> <p> Tuloksena on: <span id="tiedot tahan">ei tietoja. </p> <script> <script> var tieto; var asiakastiedot tieto; = ""; var asiakastiedot = ""; var asiakas= var asiakas= {etunimi:"aarne", {etunimi:"aarne", sukunimi:"asiakas",ika:30}; for (tieto in in asiakas) asiakastiedot = asiakastiedot = + + asiakas[tieto] + " "; document.getelementbyid( asiakas[tieto] + " "; "tiedot tahan").innerhtml == asiakastiedot; document.getelementbyid("tiedottahan").innerhtml = asiakastiedot; </body> </html> getelementbyid( tunnus ) document olion metodi, noutaa elementin jonka id= tunnus innerhtml() DOM solmun ominaisuus, jäsentää merkkijonon ja korvaa solmun sisällön jäsennetyllä sisällöllä.
Sekvenssi lauseita voidaan sulkea funktioksi o lauseiden suoritetus mistä tahansa kohdasta funktion kutsulla o funktioon voidaan syöttää kutsukohdasta arvoja parametrien avulla - parametrit annetaan sulkeissa (sulkeet kirjoitetaan, vaikka funktiolla ei olisikaan parametreja) <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>asiakastietojen käsittely</title> <script type="text/javascript"> function asiakas(mj1, mj2, luku) { this.etunimi = mj1; this.sukunimi = mj2; this.ika = luku; // vie metodi ominaisuudeksi } function muodostaasiakastiedot(tamaasiakas) { var tieto; var asiakastiedot = ""; for (tieto in tamaasiakas) asiakastiedot = asiakastiedot + tamaasiakas[tieto] + " "; return asiakastiedot; } </head> <body> <h1>opetellaan JavaScriptiä 7 </h1> <p> Käydään läpi asiakastiedot ja muodostetaan niistä merkkijono. </p> <p> Tuloksena on: <span id="korvaa tama">ei tietoja.</span> </p> <script type="text/javascript"> var asiakas1 = = new asiakas("kalle", "Kuluttaja", 28); var str1 = = muodostaasiakastiedot(asiakas1); document.getelementbyid("korvaa tama").innerhtml = = str1; </body> </html> JavaScriptissä on toteutettu kolme valitaikkunatyyppiä o alert, confirm ja promt o modaalisia ikkunoita, aukeavat pop up tyyppisesti selainikkunan päälle o selaimen käyttämisen jatkaminen vaatiokäyttäjältä toimintaa (hiiren napsauttamista tai syötteen antamista) alert ikkuna on tarkoitettu viestien ja (virhe)ilmoitusten antamiseen alert("asiakas.etunimi on nyt: " + asiakas.etunimi)
confirm ikkunan avulla käyttäjälle voi esittää kysymyksen o vastaus joko ok tai cancel o "ok funktio palauttaa arvonaan kutsukohtaan totuusarvon true o jos "cancel" funktion arvona palautuu false if (confirm("haluatko jatkaa?")==true) alert("okei, jatketaan!) else alert("hyvä on, lopetaan."); prompt ikkunan avulla käyttäjältä voidaan pyytää syötettä tekstikenttään o Myös ok ja cancel painikkeet o jos käyttäjä painaa ok, funktio palauttaa syötetyn arvon, jos cancel, palautetaan null var nimi = prompt("kirjoita tähän nimesi:","matti Malliesimerkki") alert("hyvää päivää " + nimi + " nimi");
Edellä skriptipalat suoritettu dokumentin latautuessa selaimeen, ts. ne oli kirjoitettu sivulle ns. inline skripteinä JavaScriptin olennainen periaate o tapahtumat (event) ja niihin JavaScript funktioina itse kirjoitetut o tapahtumankäsittelijät (event handler) o tapahtumankäsittelijöiden tulee jollain tavalla saada tieto tapahtumista o kun käyttäja tekee jotain sivulla, selain rekisteröi sen tapahtumana o yksinkertaisin tällainen tapahtuma voisi olla esimerkiksi hiiren napsautus - tapahtuma onclick - jos hiiren napsautus tapahtuisi esimerkiksi kuvan päällä tapahtumankäsittelijä voitaisiin yhdistää <img> elementtiin seuraavasti: <img href="kuvan osoite" onclick="kasittelijafunktio(parametrit)">
Selain paitsi tuottaa HTML dokumentista www sivun, samalla tallentaa sivun DOM puuksi Puuhun tallentuvat tiedot sivun: o elementeistä o niiden attribuuteista ja o sisällöstä DOM puun kautta JavaScript "pääsee kiinni" sivun sisältöön o tarjoaa mahdollisuuden sivun dynaamiseen, vuorovaikutteiseen, muokkaukseen tai täysin uudenkin sisällön tuomiseen sivulle Puu koostuu solmu olioista (Node objects), erilaisia solmutyyppejä, esimerkiksi o document solmu: puun juurisolmu o elementti solmu: html elementti sivulla o attribuutti solmu: html elementin attribuutti o teksti solmu: tekstisisältö sivulla DOM puun kaikki solmu olioilla on kolme yhteistä ominaisuutta: onodetype, kertoo solmun tyypin kokonaisluku väliltä 1 12, esim 1=elementtisolmu, 2=attribuuttisolmu, 3=tekstisolmu, 9=kommenttisolmu ja 10=dokumenttisolmu onodename, solmun nimi merkkijonona DOM spesifikaatiossa kaikille elementeille annettu vakionimet, jotka on kirjoitettu kapitaalikirjaimin, esimerkiksi <p> elementille solmun nodename olisi P. onodevalue, solmun arvo Tekstisolmujen (nodetype=3) arvo on teksti itse ja attribuuttisolmujen (nodetype=2) arvo on attribuutin arvo, mutta elementtisolmuille (nodetype=1) arvo on null.
<!DOCTYPE HTML> <html> <head> <meta charset="utf 8"> <title>dom esimerkkipohja</title> </head> <body> <h1 class="palkki">my: Meidän Yritys</h1> <p>tervetuloa Meidän Yritykseen!</p> <p>my tuotteet:</p> <ul> <li id="eka"><a href="tuote1.html">päätuote</a></li> <li id="toka"><a href="tuote2.html">kakkostuote</a></li> <li id="kolmas"><a href="tuote3.html">kolmostuote</a></li> </ul> <form method="post" action="osoite"> <div> <label for="tuote nimi">minkä tuotteen haluat tilata:</label> <input type="text" name="tuote nimi" id="tuote nimi" /> <input type="submit" name="osta" value="osta" /> </div> </form> </body> </html> helpoin tapa on käyttää elementin id attribuuttia: o getelementbyid("id tunnus") o palautuva arvo on tyypiltään joku solmu, tyypin voi tarkastaa tulostamalla haetun arvon merkkijononona: var e = document.getelementbyid("eka"); alert("e: " + e + "\ntyyppi:" + e.nodetype + " nimi: " + e.nodename + " arvo: " + e.nodevalue);
Toinen tapa on käyttää html elementtinimeä: getelementsbytagname"("elementti") Funktio palauttaa yhden solmun (Node olion) sijasta listan solmu olioita (NodeList), sen oliotyyppi on HTMLCollection oviittaus listan yksittäisiin solmuihin indeksoinnilla [0], [1], oon tarpeen tietää listan pituus, ts. solmujen lukumäärä otallennettu solmulistan ominaisuuteen length osolmulistan elem ensimmäinen ja viimeinen alkio: elem[0] elem[elem.length 1] var es = document.getelementsbytagname("p"); alert("es: " + es + "\nsolmulistan ensimmäisen elementin + "\ntyyppi:" + es[0].nodetype + " nimi: " + es[0].nodename + " arvo: " + es[0].nodevalue); Muita document liittymän metodeja: http://www.w3.org/tr/dom Level 3 Core/core.html#i Document Kun on olemassa viittaus johonkin DOM puun elementeistä, pääsee sen kautta kiinni mihin tahansa sivun muista elementeistä. Kaikilla solmuilla on seuraavat ominaisuudet: childnodes, lapsisolmujen lista firstchild, ensimmäinen solmu lapsisolmujen listassa =childnodes(element)[0] lastchild, viimeinen solmu lapsisolmujen listassa =childnodes(element)[listanpituus 1] nextsiebling, seuraava sisarussolmu previoussibling, edellinen sisarussolmu parentnode, solmun äiti var e = document.getelementbyid("toka"); alert(e.firstchild.firstchild.nodevalue); Tuottaisi valintaikkunaan tekstin: Kakkostuote
Vaikka elementtien noutaminen DOM puun kautta on mahdollista, se ei ole kovin intuitiivista ja helppoa. Tyhjätilamerkkien ongelmallisuus o DOM puuhun tallennetaan muutakin kuin vain esitellyt elementit o sivun sisällön (tekstit, kuvat, jne.) ottaminen mukaan DOM puuhun on siemen ongelmille o rakentaessaan DOM puuta selaimet tulkitsevat tyhjätilamerkit eri tavoin o jotkut selaimet ohittavat ne, toiset tekevät niistä oman DOM solmunsa. Selainten tulkinta DOM puun rakentamisesta toivottavasti tarkentuu ajan myötä o toistaiseksi turvallisen JavaScript koodin kirjoittaminen vaatii aikaa tarkastaa miten pääselaimet joissain erikoistilanteissa rakentavat oman DOM puunsa Viittaminen sivun kohteisiin vaikuttaa monimutkaiselta o kun otetaan huomioon, että CSS:ään on jo toteutettu selkeät ja yksikäsitteiset valitsimet. Ratkaisuna näihin ongelmiin: o JavaScript kirjastot o jos käytämme Javasciptiä jonkun yleisesti hyvälaatuiseksi todetun javascript kirjaston kautta, nämä perustason ongelmat on niissä valmiiksi ratkaistu jquery dokumentit: http://jquery.com/ tutoriaali esim: http://www.w3schools.com/jquery/default.asp Jotta jquery funktioita voi käyttää kirjasto tulee tuoda omaan ohjelmaan (kuten mikä tahansa muukin JavaScriptfunktiotiedosto) funktiokirjaston kopioida itselleen jqueryn kotisivuilta (http://jquery.com/) mutta kirjaston voi kuitenkin tuoda myös suoraan muutamasta paikasta: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js http://ajax.microsoft.com/ajax/jquery/jquery 1.4.2.min.js siis esim: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery 1.4.2.min.js">
jquery on räätälöity helpottamaan HTML elementtien valintaa ja niiden käsittelyä o syntaksi: $(selector).action() o $ = lyhenne sanalle jquery kertoo, että skripti löytyy jquery kirjastosta o (selector) kysely (tai etsi)" HTML elementti o action() toiminta, joka näille elementeille suoritetaan Esimerkki: elementin piilota tämä Esimerkki: piilota / näytä elementti, jonka id = #panel, silloin kun napsautetaan elementtiä, jonka id = #flip slide/toggle: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle animate: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </head> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidetoggle("slow"); }); });