15.4.2014 Aulikki Hyrskykari JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
o Edellinen luento Asemoinnista Mukautuva suunnittelu responsiivinen suunnittelu Sommitteluruudukkojen käyttö layout grids Lomakkeet - lomakkeen määrittely - lähetys käsiteltäväksi Esiprosessoitavat tyylipohjakielet (Sass) CSS kehykset (Foundation) o Tällä kertaa: JavaScript Taustaa Perusteita Tulkattava kieli työkalut selaimessa Operaattorit Tietotyypit perustietotyypit (primitive datatypes) Lauseet JWT 2014 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
o Paljon kirjoja tarjolla, itse voin suositella seuraavaa: Stoyan Stefanov, Kumar Sharmar: Object Oriented Javascript. Packt Publications, July 2013 hyvä, kompaktisti kirjoitettu kirja myös ohjelmointia osaamattomille, vaikka todennäköisesti aika haastava heille sopii paremmin niille, jotkaosaavat jo ohjelmoida, mutta JavaScript täysin uusi tuttavuus
o JavaScript kehittynyt vakavasti otettavaksi ja ilmaisuvoimaiseksi ohjelmointikieleksi sen avulla voi - tehdä verkkosivuista dynaamisempia - tulostaa verkkosivulle sisältöä ohjelmallisesti - muokata verkkosivulla olevaa sisältöä - HTML5:n uudet ohjelmaliittymät (APIs) aukaisevat uusia mahdollisuuksia ohjelmallisten toimintojen toteuttamiseen verkkosivuilla http://www.htmlgoodies.com/html5/javascript/a-5-minute-overview-of-all-new-javascript-apis-in-html5.html#fbid=uub21x6trjc o Alunperin Netscapen kehittämä Netscape selaimessa 1995 nimellä LivesScript vaihtoi nimeksi JavaScript o Sittemmin JavaScriptin menestyksen taustalla on ollut ECMA otti vastuun kielen standardisoinnista - JavaScript 1.8.5 (perustuu EcmaScript standardiin ECMA 262) - JScript on Microsoftin toteutus ECMAScripistä - ActionScript Adobe Flash
o JavaScript koodi suoritetaan selaimessa (client side) sivuun voi tehdä paikallisia muutoksia lataamatta koko sivua uudelleen palvelimelta "dynaaminen HTML o JavaScriptiin löytyy palvelinohjelmoinnin mahdollistavia laajennusmoduuleja olioita, joiden kautta voi esimerkiksi käsitellä palvelimella sijaitsevia tietokantoja tai tiedostoja
o JavaScript on kevyt, selaimessa tulkattava ohjelmontikieli perustuu löyhästi C kieleen, syntaksi muistuttaa siten myös Javaa dynaamisesti tyypitetty kieli (muuttujien tyyppiä ei tarvitse kiinnittää) oliopohjainen, tai itse asiassa prototyyppipohjainen ohjelmointikieli (halutessasi ks. tarkemmin Details of the object model - JavaScript MDN)
o Tulkki ohittaa ylimääräiset tyhjätilamerkit ohjelmakoodin sisennys normaaliin tapaan suositeltavaa o JavaScript kirjastoissa koodi usein pitkänä rivinä sisentämättömässä muodossa isoissa kirjastoissa koodin minimoinnilla merkitystä (tulkkauksen tehostaminen) o Koodin minimointi työkaluja koodin minimointiin - Google Closure Compiler: https://developers.google.com/closure/compiler/ - GCC online versio: http://closure-compiler.appspot.com/home - YUI Compressor: http://yui.github.io/yuicompressor/ - YUI online versio: http://refresh-sf.com/yui/ minimointia ei normaalisti tehdä itse kirjoitetuille koodipaloille (ylläpidon ja muokkauksen kannalta ei järkevää )
o Upotus sivulle (HTML dokumenttiin) analogisesti CSSsääntöjen kanssa voidaan kirjoittaa omaksi (*.js) tiedostokseen ja liittää se sivulle <script>elementin avulla (suositeltava tapa) <script type="text/javasript" src="nimi.js"></script> se voidaan kuitenkin tuoda myös omana elementtinään johonkin kohtaan HTML dokumenttia ei kovin tyylikästä, vaikka näin tehdäänkin näissä alun yksinkertaisissa esimerkeissä <script>... javascript koodi </script>
Mihin kohtaan ohjelmaa skripti lisätään? voi sijoittaa sivulle minne tahansa yleensäkin elementin seuraavanlaisessa tilanteessa (tietystikin) kohdan määrää se, mihin skriptin halutaan tuottavan sisältöä <!DOCTYPE html> <head> <title>ensimmäinen javascript ohjelma</title> </head> <body> <p> Seuraavaa tekstiä ei olekaan tuotettu normaalisti HTML dokumentista, vaan sen on tuottanut JavaScript ohjelmapätkä: </p> </body> </html> <script> document.write("opetellaan Javascriptiä!") </script> Vaikka tätä tapaa käytetäänkin näissä ensimmäisissä JavaScript esimerkeissä ei ole normaalisti käytetty tapa lisätä JavaScriptiä sivuille selain noutaa (erilliset tiedostot), tulkitsee ja suorittaa skriptit siinä järjestyksessä kun ne HTML dokumentissa tulevat vastaan
o Normaalimpi käyttötilanne skriptit kirjoitetaan funktioiksi - ulkoiseen (*.js) tiedostoon funktioita kutsutaan käyttäen HTML:n tapahtumankäsittelijöiden avulla, tai - koodi kirjoitetaan funktioiksi <script> elementin sisään selain noutaa (erilliset tiedostot), tulkitsee ja suorittaa skriptit siinä järjestyksessä kun ne HTML dokumentissa tulevat vastaan blocking effect: sinä aikana kun skriptitiedostoa tulkataan, sivulle ei tuoteta mitään <script> elementin jäljessä määriteltyä sivun sisältöä sijoita JavaScript aina dokumentin loppuun, jos mahdollista
o Kuten C:ssä, C++:ssa, Javassa lauseet päätetään normaalisti puolipisteeseen JavaScriptissä puolipisteen voi jättää pois, silloin kun lause on kirjoitettu omalle rivilleen hyvä tapa kuitenkin kirjoittaa ne aina <script language="javascript" type="text/javascript"> var alku = 1; var loppu = 2; var muuttuja1 = 10; var muuttuja2 = 20; </script>
o JavaSript on case sensitiivinen kieli, Esimerkiksi luku, Luku ja LUKU ovat kaikki eri tunnuksia o Nimeämiskäytännöt varsinaisia pakottavia sääntöjä ei ole, vakiintuneita käytäntöjä kyllä "camelcase" käytäntö under_score käytännön sijasta muuttujien nimet pienellä alkukirjaimella, oliotyyppien nimet isolla nimeämiskäytännöistä tärkeintä kuitenkin on - käyttää ohjelmissa hyvin kuvaavia nimiä ja - säilyttää omaksumansa nimeämiskäytäntö samana ks. Jeff Wayn kokoama lista: 9 Confusing Naming Conventions for Beginners var tyontekija = new Object(); var auto = new Array( Lada", Skoda", Nissan"); var day = new Date(2013,04,25);
document.write("seuraavat rivit eivät näy sivulla") // yhden rivin kommentti /* javascript tulkki ohittaa kaikki merkit oli se sitten mitä tahansa kunnes löydetään kommentin lopettavat merkit */ document.write("tämä taas näkyy")
o Kielessä ei natiivia I/O virtaa o Yksinkertaiset ratkaisut aluksi JavaScriptin valmiit viestiruutufunktiot: alert, confirm ja prompt kehittäjätyökalujen console o Normaalisti syötteet ja tulosteet HTMLelementtien välityksellä alert("asiakkaan etunimi on: " + etunimi) if (confirm("haluatko jatkaa?")==true) alert("okei, jatketaan!) else alert("hyvä on, lopetaan."); var nimi = prompt("kirjoita tähän nimesi:", "Matti Malliesimerkki") alert("hyvää päivää " + nimi);
o Muuttujien nimet voivat sisältää kirjaimia, numeroita, alaviivamerkin (muuttujannimi, tama_myos) ei saa alkaa numerolla (99_EiSallittu, onsallittu_99) o Kielen varattuja sanoja ei voi käyttää muuttujan niminä (debugger) Seuraavat 59 sanaa varattuja JavaScriptissä
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
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 b = 12; // paikallinen muuttuja, 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 Tätä tulee kuitenkin välttää (!) esittele muuttujat aina function alussa
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 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 = 0.34544; var luku4 = 12.3e 2; // = 0.123 Var luku5 = 2E3; // = 2000
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 1.7976932348623157e+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) // muuttujan toobig arvo on true var n4 = 3 / 0; // nollalla jako tuottaa arvon infinity var n5 = n3 / 100; // mikä tahansa laskuoperaatio jossa yksi // operandeista infinity, tuottaa arvon infinity var n6 = 10 * "12"; // n6 saa arvokseen 120 var n7 = "10" * "12"; // n7 saa arvokseen 120 var n8 = 10 * "ff"; // n8 saa arvokseen NaN (not a number) typeof n8; // tyyppi on "number"
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\", 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
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 + "."; // ="Tässä on alku, ja tässä loppu." var sostunnus = "120289 123C"; var vuosi = sostunnus.substr(4, 2); // vuosi on "89" var svuosi = "19" + vuosi; // merkkijono "1989" var vuosi2 = vuosi + 1; // merkkijono "891" var vuosi3 = parseint(vuosi) + 1; // luku 90 var vuosi4 = Number(vuosi)+1; // luku 90 var luku = 12; // luku 12 var luku = 12 + "" // merkkijono "12"
o Totuusarvoisen tietotyypin madolliset true ja false arvoja ei suljeta heittomerkkeihin var aviossa = true; if (aviossa) {... } var b = (luku == 1000) var eitotuusarvomja = "false"; // tämä on merkkijonomuuttuja
o Mikä sellaisen muuttujan tietotyyppi, jolla ei ole arvoa? muuttujan tietotyyppi määräytyy sen arvon perusteella o undefined vain yhden arvon (arvon undefined) sisältävä tietotyyppi o Muuttujan arvo jos sille ei ole annettu arvoa o jos sitä yritetään käyttää, vaikka sitä ei ole määritelty o null muuttuja voidaan myös alustaa tyhjäksi muuttuja, jonka arvon ei haluta olevan määrittelemätön, mutta sille ei myöskään haluta antaa arvoa null arvon automaattiset munnokset muuntavat sen tyhjäksi merkkijonoksi, nollaksi tai arvoksi false (riippuen tilanteesta)
if (ehtolauseke) lause [lelse 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; [lause;]* break; case arvo2: lause; [lause;]* break;... case arvon: lause; [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.") }
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)
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.