Aulikki Hyrskykari

Transkriptio

1 Aulikki Hyrskykari Aulikki Hyrskykari

2 o Edellinen luento Taustaa Perusteita Tulkattava kieli työkalut selaimessa Operaattorit Tietotyypit perustietotyypit (primitive datatypes) o Tällä kertaa: JavaScript Perustietotyypit Lauseet Oliot Built in oliot Funktiot o Esittelyn ja arvon alustuksen voi tehdä erikseen tai yhdistää <script type="text/javascript"> var luku, nimi; // muuttujilla ei vielä tietotyyppiä luku = 0; // kokonaislukumuuttuja nimi = "Onni Ohjelmoija "; // merkkijonomuuttuja var luku2 = 12; //Number // uusi kokonaislukumuuttuja var nimi2 = "Outi Ohjelmoija"; // uusi merkkijonomuuttuja nimi = 123; // muuttui kokonaislukumuuttujaksi </script> o Muuttujan tyyppi määräytyy dynaamisesti siihen sijoitetun arvon perusteella o Voiko muuttujaa käyttää esittelemättä sitä ensin voi, silloin sen esittely tehdään automaattisesti siitä tehdään automaattisesti globaali muuttuja

3 o Viittausalue sidottu funktioihin (siis ei lohkoihin) funktiossa esitellyt muuttujat aina paikallisia omassa funktiossaan funktioiden ulkopuolella esitellyt globaaleja muuttujia o Huom: jos muuttuja otetaan käyttöön funktiossa, esittelemättä, siitä tulee globaali <script type="text/javascript"> var a = 5; var xsumma = 0; function TekeeJotain () { var a=10, b=12; // paikallisia muuttujia, olemassa vain funktion sisällä c=10; // globaali muuttuja, olemassa myös funktion ulkopuolella... </script> o Muuttujaa voi käyttää ennen sen esittelyä, variable hoisting <script type="text/javascript"> var mja = "globaali"; function f() { alert(mja); // näyttää arvon "globaali" ; </script> <script type="text/javascript"> var mja = 'globvalue'; function f() { alert(mja); // näyttää arvon "undefined" var mja = "lokaali"; ; </script> o Funktion alussa tapahtuu implisiittinen muuttujan esittely (var mja;) tätä tulee kuitenkin välttää (!) esittele muuttujat itse aina funktion alussa

4 o JavaScript on dynaamisesti tyypitetty kieli muuttujan tyyppi määräytyy sen arvon perusteella voi vaihtua ohjelman suorituksen aikana o Tietotyypit perustietotyypit (primitive data types): number, string, boolean, undefined oliot (objects) - olioita voi luoda itse - joukko valmiiksi määriteltyjä ydinolioita (built in objects): Array, Boolean, Date, Function, Math, Number, RegExp, ja String o lainausmerkkien tai heittomerkkien väliin kirjoitetuista merkeistä ja mahdollisesti erikoismerkeistä (escape characters) yleisimmät erikoismerkit: \n rivinvaihto \t sarkain \' heittomerkki \" lainausmerkki \\ kenoviiva var mjono1 = "Tämä on merkkijono"; var mjono2 = 'Tähän sisältyy "lainaus", siksi käytetty heittomerkkejä'; var mjono3 = "Tähän sisältyy \"lainaus\", ts. sen voi tehdä myös näin"; var mjono4 = "123"; // tämäkin on merkkijono, ei luku var mjono5 = "ensimmäinen rivi\ntoinen rivi"; // tulostuisi kahdelle riville

5 o Jos operaattori on plus (+), ja toinen operandi merkkijono yhteenlaskuoperaatio tulkitaan konkatenaatio operaatioksi yhdistää merkkijonoja toinenkin operandi muutetaan merkkijonoksi var alku = "Tässä on alku"; var loppu = "ja tässä loppu"; var mjono = alku + ", " + loppu + "."; var sostunnus = " C"; var vuosi = sostunnus.substr(4, 2); var svuosi = "19" + vuosi; var vuosi2 = vuosi + 1; var vuosi3 = parseint(vuosi) + 1; var vuosi4 = Number(vuosi)+1; var luku = 12; var luku = 12 + " "; // "Tässä on alku, ja tässä loppu." // vuosi on "89" // merkkijono "1989" // merkkijono "891" // luku 90 // luku 90 // luku 12 // merkkijono "12" o Luku voi olla kokonais tai desimaaliluku jos luvussa ei ole desimaaliosaa, sitä kohdellaan kokonaislukuna eksponenttiliteraalit (e tai E = kymmenen potenssi) var luku1 = 3535; var luku2 = 1000; var luku3 = ; var luku4 = 12.3e 2; // = var luku5 = 2E3; // = 2000

6 o Oktaaliluvut alkavat numerolla 0 o Heksadesimaaliluvut Luvun aloittavaa nollaa seuraa x var n1 = 0377; var n2 = 0xff; molemmat yllä olevista luvuista ovat lukuarvoltaan 255 o Infinity ja Infinity suurempi/pienempi kuin mitä kielessä voidaan esittää suurempi kuin e+308 (voi siis olla 308 nollaa) pienempi 5e324 o NaN arvo not a number aritmeettinen lauseke, jonka kaikkia operandeja ei voida tulkita numeroiksi (yhteenlaskuoperaatio on poikkeus) NaN kuitenkin tietotyypiltään number var n3 = 1e309; var toobig = (n3 == infinity) var n4 = 3 / 0; var n5 = n3 / 100; var n6 = 10 * "12"; var n7 = "10" * "12"; var n8 = 10 * "ff"; typeof n8; // muuttujan toobig arvo on true // nollalla jako tuottaa arvon infinity // mikä tahansa laskuoperaatio jossa yksi // operandeista infinity, tuottaa arvon infinity // automaattinen tyyppimuunnos, n6 = 120 // tyyppimuunnos, n7 = 120 // n8 saa arvokseen NaN (not a number) // tyyppi on "number"

7 o Totuusarvoisen perustietotyypin mahdolliset arvot: true ja false arvoja ei suljeta heittomerkkeihin automaattikonversiot boolean tyyppiin "", 0, null, undefined, NaN => false kaikki muut arvot => true, esim. lukuarvo 0 => true mitätahansapaitsityhjä => true mikä tahansa olio => true var aviossa = false; if (aviossa) {.. // ehto on epätosi var b = (luku === 1000); if (b) {.. // ehto on true, jos luku oli 1000 ilman tyyppikonversiota var s = "false"; // tämä on merkkijonomuuttuja if (s) {.. // joten ehto on tosi var n=0; mjono= "jokin merkkijono"; var b =!!(n); // = false var b =!!(mjono); // = true o Muuttujan tietotyyppi määräytyy sen arvon perusteella mikä on sellaisen muuttujan tietotyyppi, jolla ei ole arvoa? o undefined vain yhden arvon (arvon undefined) sisältävä tietotyyppi o Muuttujan tyyppi ja arvo on siis undefined jos sille ei ole annettu arvoa jos sitä yritetään käyttää, vaikka sitä ei ole määritelty kokeile: var mja1; alert("muuttujan mja1 tyyppi on " + typeof mja1); alert("muuttujan mja1 arvo on " + mja1); // alustamaton, joten // tyyppi undefined // arvo on myös undefined

8 o muuttuja voidaan alustaa myös tyhjäksi: null muuttuja, jonka arvon ei haluta olevan määrittelemätön, mutta sille ei myöskään haluta antaa arvoa kokeile var mja2= null; alert("muuttujan mja2 tyyppi on " + typeof mja2); alert("muuttujan mja2 arvo on " + mja2); // tyyppi object // arvo on null muuttuja voi saada arvon null vain jos siihen eksplisiittisesti sijoitetaan arvo null (siis ei koskaan automaattisesti taustalla) o Automaattiset muunnokset null arvosta eri tietotyyppeihin muuntavat sen tyhjäksi merkkijonoksi, nollaksi tai arvoksi false (riippuen tilanteesta) var mja= null; var mja2 = mja + 1; var mja3 = mja * 1; var mja4 = "Arvo on " + mja; var mja5 =!!(mja) // = 1 (0+1) // = 0 (0*1) //= Arvo on null // = false

9 if (ehtolauseke) lause [else lause] var ika;... if (ika<10) { document.write("lapsi"); //ehkä muitakin lauseita else if (ika <30) { document.write("nuori"); //ehkä muitakin lauseita else if (ika <65) { document.write("aikuinen"); //ehkä muitakin lauseita else document.write("seniori"); o break lause siirtää konrtollin pois lauseesta switch (lauseke) { case arvo1: [lause;]* break; case arvo2: [lause;]* break;... case arvon: [lause;]* break; default: statement(s) switch (luku) { case 10: alert("luku on 10"); break; case 20: alert("luku on 20"); break; default: alert("ei ollut luku 10 eikä 20, ei.");

10 o Silmukan lauseita suoritetaan niin kauan kuin ehto voimassa while (ehtolauseke) lause [;lause]* var i=10; while (i>0) { document.write(i+"\n"); i ; o Ehto tarkastetaan silmukan lauseiden jälkeen o Lauseet tulee suoritetuksi aina ainakin kerran do{ lause [;lause]* while (ehtolauseke) var i=10; do { document.write(i+"\n"); i ; while (i>0)

11 o Silmukan toiston täysi kontrollointi suoraan lauseen alussa for (aloituslause; lopetuslause; silmukkamuuttujan muutos){ lause [;lause]* for (var i=0; i<10; i++) document.write(taulu[i,j]) o break suoritus määrätään siirtymään ulos lauseesta break lauseen avulla voidaan tulla ulos mistä tahansa lauselohkosta o continue l käytetään silmukan sisällä määräämään, että suoritus siirtyy välittömästi testaamaan silmukkaehdon voimassaolemista mikäli se vielä täyttyy, silmukan lauseiden suoritusta jatketaan seuraavan kierroksen alusta.

12 okokoelmia piirteitä, jotka voivat olla ominaisuuksia (properties) - perustietotyyppejä tai edelleen olioita metodeja (methods) - funktioita o Olio voidaan luoda alustajalla (initializer) luetellaan aaltosulkeissa lista piirre:arvo pareja eräänlainen lyhennemerkintätapa var kirja1 = {aihe:"jquery", tekija:"david Sawyer McFarland"; Esim. // Luodaan ja alustetaan kirja olio, jolla kaksi ominaisuutta var kirja = {aihe:"jquery", tekija:"david Sawyer McFarland"; // kutsutaan edellä luotua oliota document.write("kirjan nimi: " + kirja.aihe + "<br>"); document.write("kirjoittaja: " + kirja.tekija + "<br>");

13 o Olio voidaan luoda new operaattoria käyttäen sen jälkeen annetaan oliolle ominaisuudet sijoituslausein olio = new Object(); var kirja = new Object(); // Luodaan olio kirja.aihe = "jquery"; // ja asetetaan oliolle ominaisuudet kirja.tekija = "David Sawyer McFarland"; // kutsutaan luotua oliota document.write("kirjan nimi: " + kirja.aihe + "<br>"); document.write("kirjoittaja: " + kirja.tekija + "<br>"); o Selkeämpää luoda konstruktorifunktiolla, tällöin kirja olio voidaan luoda konstruktoria käyttäen vain tarvittaessa samalla konstruktorilla voidaan luoda muitakin kirjaoliomuuttujia o Konstruktorissa varattu sana this käytetään funktion sisällä viittaa funktiota kutsuvaan olioon

14 <!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 olion luomiseksi luomiseksi function Kirja(mj1, mj2){ mj2){ this.aihe = mj1; this.tekija = = mj2; </script> </script> </head> <body> <h1>opetellaan JavaScriptiä 4</h1> <script type="text/javascript"> var kirja1 = new Kirja("jQuery","David Sawyer Sawyer McFarland"); McFarland"); document.write("<p class='tausta'>kirjan nimi: nimi: "+kirja1.aihe+"<br>"); document.write("kirjoittaja: "+kirja1.tekija+"<br>"); " + + "<br>"); </script> </body> </html> " " " " " " " " " " o" Olion ominaisuuteen voi viitata paitsi " pistenotaatiolla, " myös käyttäen hakasulkuja kirja1= new Kirja("Object Oriented JavaScript", "Stefanov"); kirjailija = kirja1.tekija; kirjailija = kirja1["tekija"]; // myös tämä mahdollinen tapa o Jos tekijä olisi edelleen olio, jolla ominaisuudet etunimi ja sukunimi kirja1.tekija.etunimi="stoyan"; kirja1["tekija"][ etunimi"]="stoyan"; o Hakasulkunotaation avulla voi uuden ominaisuuden luonti oliolle tapahtuisi siten seuraavasti kirja1["kustantaja"]="packt Publishing";

15 o Olion metodien määritys tapahtuu samaan tapaan kuin edellä ominaisuuksien määrittely o Metodille vain annetaankin arvoksi funktio olion metodit ovat sellaisia olion ominaisuuksia, jolle ei annetakaan arvoksi perustietotyyppiä, vaan funktio o Seuraavassa konstruktori oliolle Asiakas, oliolla kolme ominaisuutta: etunimi, sukunimi ja syntynyt neljäs oliolle osoitettu piirre: ika ika ei olekaan perustietotyyppi, vaan sille annetaan arvoksi funktion nimi (laskeika) o Metodin toteuttava funktio laskeika on määritelty erikseen

16 <!DOCTYPE html> <head> <meta charset="utf 8"> <title>metodin itse tehdylle oliolle</title> <script type="text/javascript"> function Asiakas(mj1, mj2, luku) { this.etunimi = mj1; this.sukunimi = mj2; this.syntynyt = luku; this.ika = laskeika; // liitetään myös metodi function laskeika(svuosi) { // laskee iän karkeasti ei ota </script> </head> // jatkuu var nyt = new Date(); var ika = nyt.getfullyear() this.syntynyt; return svuosi; // huomioon onko jo täyttänýt <body> <h1>opetellaan JavaScriptiä 5</h1> <script type="text/javascript"> var varasiakas_001 = = new newasiakas("kalle", "Kuluttaja", 1989); 28); document.write("asiakkaan nimi nimi on: on: " " + + asiakas_001.etunimi + " " + asiakas_001.sukunimi + " (" + asiakas_001.ika + "v)" + ", hän on siis syntynyt vuonna: " + asiakas_001.syntynyt(2013)); asiakas_001.syntynyt()); </script> </body> </html>

17 o Tiedonpaketoija oliot (data wrappers) perustietotyyppisen muuttujan voi määritellä "tiedonpaketoija olioksi jos tarpeen käsitellä muuttujaa oliona, esim. tarvitaan metodeja Object, Number, Boolean, String, Array ja Function o Apuväline oliot Math, Date ja RegExp tuovat mukanaan monia käyttökelpoisiin tietoihin ja toimintoihin o Virheoliot niiden avulla saadaan tietoa avuksi odottamattomista tilanteista selviytymiseen o Kaikkien JavaScript olioiden äiti var o1 = new Object(); var o2 = {; // o1 ja o2 samanlaisia olioita o Tyhjälläkin oliolla joukko metodeja, esim. o1.tostring() // palauttaa olion merkkijonoesitysmuodossa o1.valueof // palauttaa olion itsensä

18 o Jos luvulle esimerkiksi halutaan määritellä metodeja, se voidaan esitellä perustietotyypin number sijasta olioksi Number tofixed(), palauttaa luvun desimaalipiste esitymuotoisena merkkijonona toexponential(), palauttaa luvun eksponenttinotaation merkkijonona jos näille funktioille antaa parametrin, se määrittelee käytetyn tarkkuuden var n = new Number(15.565); var mja1 = n.tofixed(1); var mja2 = n.tofixed(); var mja3 = n.toexponential(3); // = 15.6 yksi desimaali // = 16 pyöristys kokonaisluvuksi // = "1.556e+1" o Number oliolla myös ominaisuuksia esim. MAX_VALUE suurin esitettävissä oleva luku MIN_VALUE pienin esitettävissä oleva NEGATIVE_INFINITY = Infinity POSIVITIVE_INFINITY = Infinity o Kutsutaan suoraan built in oliota käyttäen esim. var luku1 = Number.MAX_VALUE; var luku2 = Number.MIN_VALUE; var luku3 = Number.MIN_VALUE*1000; // e+308 // = 5e 324 // = 4.94e 321

19 var b = new Boolean(totuusarvo); o On tärkeätä muistaa, että konstruktori luo Boolean olion, ei perustietotyyppiä boolean: typeof b on siis object olion sisältämän boolean arvon voi kysyä valueof metodilla: typeof b.valueof() on boolean o Jos ei tyhjä olio konvertoidaan boolean arvoksi, sen arvo on aina tosi var b1 = new Boolean(true); var b2 = new Boolean(false); if (b1) lause1; else lause2; // suoritetaan lause1 if (b2) lause1; else lause2; // suoritetaan myös lause1 if (b1.valueof()) lause1; else lause2; // suoritetaan lause1 if (b2.valueof()) lause1; else lause2; // suoritetaan lause2 o Huomaa siis, että vaikka konstruktorille annetaan parametriksi false, Boolean olion arvo on true samoin käy vaikka parametrina annettaisiin mikä tahansa arvo joka konvertoituu totuusarvoksi false var b = new Boolean(totuusarvo); o On tärkeätä muistaa, että konstruktori luo Boolean olion, ei perustietotyyppiä boolean: typeof b on siis object olion sisältämän boolean arvon voi kysyä valueof metodilla: typeof b.valueof() on boolean o Jos ei tyhjä olio konvertoidaan boolean arvoksi, sen arvo on aina tosi var b1 = new Boolean(true); var b2 = new Boolean(false); if (b1) lause1; else lause2; if (b2) lause1; else lause2; if (b1.valueof()) lause1; else lause2; if (b2.valueof()) lause1; else lause2; // suoritetaan lause1 // suoritetaan lause1 (!) // suoritetaan lause1 // suoritetaan lause2

20 o Muista siis, että vaikka konstruktorille annetaan parametriksi false, Boolean olion arvo on true samoin käy vaikka parametrina annettaisiin mikä tahansa arvo joka konvertoituu totuusarvoksi false o Boolean olioilla ei paljon käyttöä, koska sillä ei ole omia metodeita, eikä ominaisuuksia (vain perityt) o Jos Boolean kostruktoria kutsuu ilman new operaattoria saa aikaan parametrin muutoksen boolean perustietotyypiksi var b1 = Boolean(true); var b2 = Boolean(false); var b3 = Boolean(10); var b4 = Boolean(0); var b5 = Boolean(null); var b6 = Boolean("false"); // b1 = true // b2 = false // b3 = true // b4 = false // b5 = false // b6 = true o Taulukko on JavaScriptissä toteutettu oliona järjestetty joukko arvoja, joihin voi viitata joko nimellä tai indeksillä voidaan luoda useammalle tavalla var taulu1 = new Array(alkio0, alkio1,..., alkion); var taulu2 = [alkio0, alkio1,..., alkion]; o Jos taulukko luodaan antamatta sille sisältöä pituuden kuitenkin määrittää taulukkoa jo luotaessa alkiot, joille ei annettuna arvoa, ovat luonnollisestikin arvoltaan ja tyypiltään undefined var taulu3 = new Array(3); // taulukko olio, sisältää kolme alkiota sisältävä var taulu4 = Array(3); // kolme alkiota sisältävä taulukko olio kuten // edellä, vaikka ei käytettykään operaattoria new var taulu5 = []; taulu5.length = 3; taulu5[0]=alkio1; taulu5[1]=alkio2; taulu5[2]=alkio3;

21 o Taulukon alkioilla ei ole kiinnitettyä tyyppiä taulukko voi sisältää eri tyyppisiä arvoja alkioiden tyypit voivat muuttua dynaamisesti o Myös taulukon koko on dynaaminen var tmp = new Array(1, "a", true); tmp.length = 10; // taulukon pituus kasvoi ja alkioiden // tmp[3].. tmp[9] arvo on undefined tmp[100] = false; // sijoitus kasvattaa taulukon 100 alkion // mittaiseksi, tmp[3].. tmp[98] arvoltaan undefined o Moniulotteiset taulukot luodaan sisäkkäisten taulukoiden avulla solu edelleen taulukko o Mitä seuraava koodinpätkä kirjoittaisi HTML dokumenttiin? 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 /> );

22 o Array ominaisuus length palauttaa taulukon pituuden o Array oliolle määriteltyjä metodeja, esim. indexof() etsii taulukon alkion ja palauttaa sen indeksin pop() palauttaa viimeisen alkion ja poistaa sen taulukosta push() lisää uuden alkion taulukon loppuun ja palauttaa taulukon uuden pituuden reverse() kääntää taulukon alkiot päinvastaiseen järjestykseen shift() palauttaa ensimmäisen alkion ja poistaa sen taulukosta sort() lajitteleen taulukon unshift() lisää elementin taulukon alkuun ja palauttaa taulukon uuden pituuden var hedelmat = new Array("omena", "appelsiini", "banaani", "mango"); var i = hedelmat.indexof("omena"); // i:n arvo 0 hedelmat.sort(); // hedelmät aakkosjärjestyksesä var j = hedelmat.indexof("omena"); // j:n arvo 3 var k = hedelmat.indexof( rypale ); // k:n arvo on 1 o Lisää taulukko olion metodeja: concat(), every(), filter(), foreach(), join(), lastindexof(), map(), slice(), some(), sort(), splice() o Date muuttujaan voi tallentaa päiväyksen ja ajan o Ajan voi ilmaista oliomuuttujaa luodessaan antamalla konstruktorille kokonaisluku: millisekunteja - tulkitaan samoin kuin metodin Date.now() antama kokonaisluku - millisekunteina lähtien ajankohdasta :00:00 merkkijono - esimerkiksi "April 27, :02:00 kolme kokonaislukua pilkulla toisistaan erotettuna: - esim. 2013, 04, 26 luo päiväyksen vuosi, kuukausi, päivä kuusi kokonaislukua pilkulla tosistaan eroteltuna: , 04, 26, 16, 02, 00, edellisen lisäksi määritellään myös tunnit, minuutit ja sekunnit

23 Jos parametreja ei anneta - new operaattorin avulla luotuun Date olioon alustetaan automaattisesti olion luontihetken aika var luotu = new Date(2013, 04, 27, 16, 02, 00); var nyt = new Date(); // kutsuhetken aika o Date oliolle määriteltyjä metodeja mm. getdate() palauttaa päiväyksen kuukauden päivän (1 31) getday() palauttaa päiväyksen viikonpäivän (0 6) getfullyear() palauttaa päiväyksen vuoden getminutes() palauttaa päiväyksen minuutit getmonth() palauttaa päiväyksen kuukauden (0 11) gettime palauttaa lukuarvon millisekunteina ajankohdasta parse() jäsentää merkkijonosta päiväyksen ja palauttaa lukuarvon millisekunteina tostring() muuntaa päiväyksen merkkijonoksi var nyt = new Date(); var paiva = nyt.getdate(); var kuukausi = nyt.getmonth(); var min = nyt.getminutes(); var sec = getseconds(); var nowinseconds = Date.now(); o Myös get metodeja vastaavat set metodit

24 o Math olioille on määriteltynä ominaisuuksia ja metodeita, jotka helpottavat matemaattisten operaatioiden tekemistä. esimerkiksi tallennettu piin (Π) arvo ominaisuudeksi Math.PI ja trigonometriset funktiot metodeiksi. o Math prototyypistä ei normaalisti ole tarvetta luoda oliota, vaan sen ominaisuuksia ja metodeita voi käyttää suoraan prototyypistä var pii = Math.PI; var rad = Math.sin(x); // x kokonaisluku, palauttaa arvon sin(x) radiaaneissa o Vakion π (PI) lisäksi oliolle on määriteltynä joukko muitakin matemaattisia vakioita Math prototyypin ominaisuuksina E, LN2, LN10, LOG2E, LOG10E, SQRT1_2, SQRT2 o Matemaattisia metodit ovat: abs, sin, cos, tan, acos, asin, atan, atan2, ceil, exp, floor, log, max, min, pow, random, round, sqrt o RegExp oliot ovat säännöllisiä lausekkeita, joiden avulla on mahdollista tehdä hahmontunnistusta (pattern matching) merkkijonoille käsitellä merkkijonoja (etsiä ja korvata tunnistettuja osamerkkijonoja) o Ei käsitellä tässä tarkemmin, mutta esimerkiksi mjono = "33100 ; var okpostinro = new RegExp("^\d{5$ ); // tai var okpostinro = /^\d{4$/; if (document.lomake.postinro.value.search== 1) // ei ole käypä postinumero alert( Anna oikea postinumero ); o y.o. esimerkin säännössä käytetyt merkit sovitetaan merkkijonoon seuraavasti: ^ sopii merkkijonon alkuun \d sopii mihin tahansa numeromerkkiin {n sopii juuri n lukumäärään edeltävää merkkiä $ sopii merkkijonon loppuun

25 o for...in silmukan avulla käydään läpi olion kaikki ominaisuudet o silmukkamuuttuja saa vuorollaan arvokseen kunkin olion ominaisuuden nimen for (var mja in olio) { [lause;]* o voidaan laittaa käymään läpi myös taulukon alkiot var indeksit = "", arvot = ""; var omalista = new Array("Chinese", "English", "French"); omalista.uusikentta = "jotain"; for (var indeksi in omalista) { indeksit += indeksi + " "; arvot += omalista[indeksi] + " "; // indeksit sisältää "0 1 2 uusikentta" // arvot sisältää "Chinese English French jotain" o for...in silmukan avulla käydään läpi olion kaikki ominaisuudet (esimerkki Olion ominaisuuksien läpikäynti ) <!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= msg">ei tietoja.</span> </p> <script> var tieto; var str = ""; var asiakas={etunimi:"aarne", sukunimi:"asiakas",ika:30; for (tieto in asiakas) str+=asiakas[tieto]+" "; document.getelementbyid("msg").innerhtml = str; </script> </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ä.

26 o Sekvenssi lauseita voidaan sulkea funktioksi lauseiden suoritus mistä tahansa kohdasta funktion kutsulla funktioon voidaan viedä kutsukohdasta arvoja parametrien avulla parametrit annetaan sulkeissa (sulkeet kirjoitetaan, vaikka parametreja ei olisikaan) <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>asiakastietojen käsittely</title> <script type="text/javascript"> function Asiakas(p1, p2, p3) { this.etunimi = p1; this.sukunimi = p2; this.ika = p3; function muodostaasiakastiedot(tamaasiakas) { var tieto; var asiakastiedot = ""; for (tieto in tamaasiakas) asiakastiedot = asiakastiedot + tamaasiakas[tieto] + " "; return asiakastiedot; </script> </head> <body> <h1>opetellaan JavaScriptiä 7 </h1> <p> Käydään läpi asiakastiedot ja muodostetaan niistä merkkijono. </p> <p> Tuloksena on: <span id= msg">ei tietoja.</span> </p> <script type="text/javascript"> var asiakas1 = new Asiakas("Kalle", "Kuluttaja", 28); var str1 = muodostaasiakastiedot(asiakas1); document.getelementbyid("msg").innerhtml=str1; </script> </body> </html> o Funktiossa esitelty muuttuja on paikallinen funktiolle var a=1; var b=2; var c=3; function f1() { var a=11; b=22; function f2(){ var b=222; c=333; alert("f2 a,b,c: "+a+", "+b+", "+c); f2(); alert("f1 a,b,c: "+a+", "+b+", "+c); f1(); alert("globaali a,b,c: "+a+", "+b+", "+c); o Lohkossa esitellyt muuttujat näkyvät sisemmille hierarkiatasoille (funktioihin) o Jos muuttujaa ei ole esitelty lainkaan, siitä tulee automaattisesti globaali

27 var luku, tulos; //globaaleja muuttujia function square(n) { var b = n * n; // b, n lokaaleja muuttujia return b; // palauta n * n; luku = 6; tulos = 2*square(luku); n funktion muodollinen parametri luku funktiolle välitetty, todellinen parametri Jos return lausetta ei ole käytetty, palautettu arvo on undefined o Funktion palauttamaa arvoa voi käyttää lausekkeessa function iseven(n) { return (n%2 ==0); // palauttaa boolean arvon var arvo = 6; if (iseven(val)) { // tee jotain o Jos if lauseen ehtolausekkeen arvo on määrittelemätön, tulkki lähettää virheen (throws an error) o try catch lauseella voidaan ottaa kiinni virheisiin

28 o Funktiolle välitettyjen parametrien lukumäärä ja tyyppi voi vaihdella eri kutsukerroilla o Paikallinen muuttuja (taulukko) "arguments automaattisesti käytettävissä kaikissa funktioissa o Parametreihin pääsee käsiksi sekä muodollisten parametrien, että arguments taulukon kautta add(1, 2, 3); // palauttaisi 6 add(1, 2, 3, 4, 5); // palauttaisi 19 o Miten näin toimiva funktio toteutettaisiin? function add () { var s = 0; for (var i = 0; i < arguments.length; i++) s += arguments[i]; return s; add(1, 2, 3, 4, 5); // palauttaisi 15 add(1, 2, "3", 4, 5); // entä tämä? o Funktio voi palauttaa eri tyyppisiä arvoja eri kutsukerroilla function teejotain (p1) { if (typeof(p1) == "number") return 0; // palauttaa luvun else if (typeof(p1) == "string") return nolla"; // palauttaa merkkijonon teejotain(1); // palautuu 0 teejotain("abc"); // palautuu "nolla" teejotain(); // palautuu undefined

29 o Voidaan luoda funktio ja antaa se arvoksi muuttujalle o Se voidaan edelleen antaa arvoksi toiselle muuttujalle var tieto, vastaus; tieto = function (a,b) { return a + b; var tieto2 = tieto; vastaus = tieto2(10,2); o Koska funktio on vain tietoa, se voidaan välittää toiselle funktiolle parametrina function summaa(a,b){ return a() + b(); function yy(){ return 1; function kaa(){ return 2; answer = summaa(yy, kaa);

30 o Kun funktio fa välitetään toiselle funktiolle fb parametrina, ja fb suoritta funktion fa, kutsutaan fa:ta callback funktioksi o Tämä antaa mahdollisuuden käyttää toisten kirjoittamia funktioita, jotka toteuttavat heidän määrittelemänsä toiminnan o Tätä käytetään tapahtumankäsittelijöiden toteutuksessa