JavaScript (c) Irja & Reino Aarinen, 2007

JavaScript (c) Irja & Reino Aarinen, 2007 JavaScript-kieltä voi kirjoittaa millä tahansa ASCII-tekstieditorilla tai HTML-editorilla. JavaScript-koodi kirjoitetaan aina ASCII-merkkeinä määritellyn syntaksin mukaisesti. JavaScript-koodi tulkataan WWW-selaimen sisään rakennetulla JavaScript-tulkilla. P.S. Muut merkistöt (kuten ISO-8859-1 tai UTF-8) toimivat, kunhan tiedosto talletetaan samalla merkistöllä kuin dokumentin charset- tai encoding määritys HTML-koodissa. JavaScript-ohjelmakoodi upotetaan <script>-elementtien avulla HTML-koodiin, joka sitten tallennetaan .html-tiedostoksi ja avataan selainohjelmalla (toisin sanoen selaimeen sisäänrakennettu JavaScript-tulkki suorittaa ohjelman).

Koodin sijoittaminen: JavaScript-koodi kirjoitetaan HTML-selaimessa script-lohkon sisään. <html> <head> <script language=”JavaScript” type=”text/javascript”> . . . JavaScript-koodi tähän! ... </script> </head> <body> … </body> </html> Funktiot ja itse määritellyt oliot sijoitetaan yleensä head-elementtiin, jotta ne ovat muistissa ennen dokumentin rungon lataamista. Vastaavasti JavaScript- pääohjelma upotetaan yleensä body-elementtiin, jossa se suoritetaan.

Ulkopuolisten tiedostojen käyttö JavaScript-ohjelmat voivat olla erillisissä tiedostoissa jolloin script-elementin src-parametriä käytetään liittämään JavaScript-koodi dokumenttiin. <script language=”JavaScript” src=”URL-osoite”> </script> Ulkopuolisten tiedostojen on päätyttävä tarkentimeen .js. Ne eivät saa sisältää muuta kuin JavaScript-koodia ja kommentteja.

Kommentit /* Useampirivinen kommentti */ // Yksirivinen kommentti.

Tiedonkäsittely JavaScriptissä JavaScript on periaatteessa tyypitön, mutta se tukee useita tietotyyppejä: numeroita, boolean-arvoja, merkkijonoja jne. JavaScriptissä tietoarvoja tallennetaan muuttujiin. Kuten muissakin ohjelmointikielissä, muuttujien voidaan ajatella olevan muistin nimettyjä sijaintipaikkoja, joita käytetään tiedon tallentamiseen. Java- Scriptissä paikallisia muuttujia luodaan var-lauseella. Kun muuttuja on luotu, sitä voidaan käyttää tiedon tallentamiseen ja noutamiseen. Muuttujien nimissä on tapana käyttää pieniä kirjaimia. JavaScriptin varattuja sanoja (keywords) ei voi käyttää muuttujien niminä. Varattuja sanoja ovat lauseissa ja ohjausrakenteissa (silmukat, ehtolauseet, määrittelyt) käytettävät sanat, kuten var, if, while tai for.

Esim. var laskuri = 10; Tässä laskuri on muuttuja ja luku 10 on muuttujaan sijoitettava arvo. Arvoa voi myöhemmin muuttaa. laskuri = laskuri + 1; Lisää muuttujan arvoa yhdellä laskuri++; Lisää muuttujan arvoa yhdellä laskuri--; Vähentää muuttujan arvoa yhdellä laskuri = laskuri – 1; Vähentää muuttujan arvoa yhdellä document.write (laskuri); Tulostetaan luku 10 Muuttujaan voidaan sijoittaa myös lainausmerkeissä olevaa tekstiä: var merkkijono = ”Laskurin arvo on: ”; Yhdistetään seuraavassa merkkijonot ja muuttujat: document.write(merkkijono + laskuri)

Lokaali ja globaali muuttuja Vaikka var-avainsanaa ei ole pakko käyttää, sen käyttö on erittäin suositeltavaa. Paikallinen muuttuja on muuttuja, jonka vaikutus kohdistuu vain ohjelmalohkoon, joka on rajattu aaltosulkeilla. Paikallinen muuttuja on voimassa/sitä voi käyttää ainoastaan siinä ohjelmalohkossa, jossa se esitellään var-avainsanalla. Globaali muuttuja esitellään ilman var-avainsanaa tai kaikkien funktioiden ulkopuolella, ja sen arvoa voidaan käyttää ja muuttaa sivulla kaikkialla.

Lausekkeet Lauseke voi olla pelkkä muuttuja tai operaattoreiden ja operandien muodostama kokonaisuus, esim. ”Tässä eräs lauseke” 2 + 3*4/5 ”luku1 ” + ”luku2” Muuttujaan summa sijoitetaan literaalilausekkeen 2 + 3 arvo: var summa = 2 + 3;

Operaattorit Operaattoreita on kahta pääluokkaa: Binääriset operaattorit yhdistävät kaksi operandia, jotka tulevat ennen ja jälkeen operaattorin. Esimerkiksi lausekkeessa 4 * 5 kertomerkki on binääri operaattori. Operandit ovat 4 ja 5. Unaariset operaattorit vaativat vain yhden operandin, johon muutos kohdistuu. Esimerkiksi ++ on unaarinen operaattori, joka kasvattaa edessä tai jäljessä olevan muuttujan arvoa yhdellä.

Sijoitusoperaattorit Sijoitusoperaattorit ovat yleisimpiä operaattoreita. Seuraava lauseke sijoittaa muuttujan numero arvoksi ykkösen. numero = 1; Seuraavassa lauseessa testataan, onko muuttujan totuusarvo true, ja jos on, sijoitetaan arvoksi false. if (totuus == true){ totuus = false; }

Vertailuoperaattorit Vertailuoperaattori vertailee operandejaan ja palauttaa vertailun tuloksena loogisen arvon (true tai false), joka perustuu vertailun tulokseen. Vaatii kaksi operandia, jotka voivat olla joko numeerisia tai merkkijonoja. Operaattori Palautusarvo = = true, jos operandit ovat yhtä suuria != true, jos operandit ovat erisuuria > true, jos vasen operandi on suurempi kuin oikea. >= true, jos vasen operandi on suurempi tai yhtä suuri kuin oikea. < true, jos vasen operandi on pienempi kuin oikea. <= true, jos vasen operandi on pienempi tai yhtä suuri kuin oikea. Esim. luku % 4 == 0 luku on neljällä jaollinen luku % 4 != 0 luku ei ole jaollinen neljällä luku < 4 luku on pienempi kuin neljä

Aritmeettiset binäärioperaattorit Lukujen väliset laskutoimitukset suoritetaan aritmeettisilla operaattoreilla. Moni- puolisemmat laskutoimitukset suoritetaan Math-luokan metodeilla. + Yhteenlasku. Yhdistää myös merkkijonot toisiinsa - Vähennyslasku. * Kertolasku. / Jakolasku % Jakojäännös Binäärinen operaattori Vastaava unaarinen operaattori summa = summa + i summa += i summa = summa – i summa -= i tulo = tulo * x tulo *= x jako = jako / x jako /= x

Loogiset operaattorit Loogisia operaattoreita käytetään erityisesti ehtolauseiden ja silmukoiden ehto-osissa. Looginen operaattori Selitys a && b AND – looginen JA. a && b palauttaa arvon true vain, jos molemmat operandit ovat tosi. a || b OR – looginen TAI. a || b palauttaa arvon true, jos vähintään toinen on true. !a NOT – looginen ei on unaarinen. !a palauttaa arvon true, jos a on false. Seuraava lauseke on tosi silloin, kun jompikumpi ehdoista täyttyy: ika < 10 || ika > 100

Lauserakenteet JavaScript sisältää seuraavat ehto- ja toistolauseet (silmukat): • if (ehtolause, jos) • switch (haarautuva ehtolause) • while (silmukat, niin kauan kuin) • do {...} while (ehto); • for (silmukat, erityisesti toistorakenteet)

if-lause Ehtolauseella testataan onko jokin ehto tosi vai epätosi if (ehto on tosi) { koodi, joka toteutetaan, jos ehto on tosi } if ... else –lause Ylimääräisiltä vertailuilta säästytään, jos käytetään if...else –lausetta, joka suoritetaan siinä tapauksessa, että ehto ei toteudu if (ehto on tosi) { koodi, joka toteutetaan, jos ehto on tosi } else { koodi, joka toteutetaan, jos ehto on epätosi }

while-toistolause while -toistolause suorittaa ohjelmalohkoa niin kauan, että while-avainsanan jälkeen annettu lopetusehto toteutuu. do ... while -lause on while-silmukan kaltainen, mutta ehto testataan vasta silmukan lopussa. Siksi se suoritetaan aina vähintään kerran, kun taas while -lausetta ei välttämättä suoriteta yhtään kertaa. while (ehto on tosi) { koodi } Esim. var x = 1; var summa = 0; while (x <= 10) { // suoritetaan silmukkaa kunnes on x>10 summa += x; x++; document.write (”Summa on ” + summa + ” ja x on ” + x + ”<br /”>); } document.write(”<br />”);

Break-lause while- tai for-silmukan voi koska tahansa lopettaa break-lauseella. Tällöin ei suoriteta enää muita silmukan lauseita, vaan poistutaan välittömästi silmukasta. Continue-lause continue siirtää ohjelman suorituksen silmukan alkuun ja hyppää yli kaikki silmukan lopussa olevat lauseet. Tällöin voi jättää suorittamatta lauseita sellaisilla arvoilla, jotka aiheuttaisivat virhetilanteita.

for-toistolauseet for-lauseen tarkoituksena on käydä läpi jokin arvojoukko. for-lauseen syntaksi näyttää seuraavanlaiselta: for (alustus; testaus; muutos) { koodi } Esim.Tulos: 0: 0 var i = 0, summa = 0;1: 1 for (i = 0; i <= 10; i++)2: 3 {3: 6 summa += i;4: 10 document.write (i + ”: ” + summa + ”<br />”); 5: 15 }6: 21 7: 28 8: 36 9: 4510: 55

Funktiot Funktio on aliohjelma, joka nimellä ja mahdollisilla suluissa olevilla, pilkulla toisistaan erotetuilla parametreilla kutsuttuna tekee jotakin. Tekemisen määräävä koodi sijoitetaan aaltosulkuihin {}. Funktio voi palauttaa jonkin arvon, mutta ei voi muuttaa kutsuparametriensa arvoja suoraan. Esim. function summa(a,b) { // Kutsutaan esim. summa(2,3); c=a+b; // a tai b ovat ”dummy” muuttujia, paikanpitäjiä return c; // Palauttaa esim. 5 } Parametriton funktio on yksinkertaisin funktiotyyppi, jossa funktiolle ei viedä lainkaan parametreja. function funktionNimi () { … funktion suoritettava koodi; } Esim. function halytys () { // Käsittelijä onclick() tapahtumalle alert (”Virhe!”); }

Funktio, joka ottaa vastaan parametreja, mutta ei palauta mitään arvoa funktiosta: function funktionNimi (param1, param2) { koodi; // Ei return lausetta! } Esim. halytys () –funktioon voidaan tuoda tulostettava virheilmoitus (tai kokonainen tapahtumaolio) parametrina: function halytys (virheilmoitus) { alert (virheilmoitus); } Funktioita voi käyttää myös olioiden yhteydessä. Tällöin funktioita käytetään olioiden alustajina, metodeina tai tapahtumankäsittelijöinä. P.S. Lisäksi itse funktio on olio, joten sitä voidaan käsitellä metodeilla ja sille voidaan antaa ominaisuuksia.

OLIO-OHJELMOINTI Olio on kokoelma ominaisuuksia, jotka voivat olla yksinkertaisia muuttujia tai toisia olioita. Oliolla voi olla myös funktioita, joita kutsutaan olion metodeiksi. Luokasta olioksi Oliot voivat kuulua johonkin luokkaan, olla jotakin tyyppiä. Ennen olion luontia määritellään luokka (esim. Auto), josta sitten voidaan luoda yksittäisiä olioita (esim. munVolvo, munPolo), jotka asettavat luokan ominaisuuksille omat arvonsa. Oleellista on, että luokasta luotavilla olioilla on samanlaiset ominaisuudet ja metodit. Luokka (classes) ryhmittelee samankaltaiset oliot, eli määrittelee, mitä tietoa ja metodeja kaikki luokasta luotavat oliot sisältävät. Oliot ovat luokan ilmentymiä.

Ominaisuus on jokin oliota kuvaava tieto. Auton ominaisuuksia ovatesim. • väri • malli • paino Auton metodeita ovat esim. • käynnistä • sammuta • jarruta

Omat oliot JavaScriptissä voi määritellä omia olioita JSON (JavaScript Object Notation) tekniikalla. Esim. var munAuto = { merkki:’Polo’, väri:’Vihreä’, ääni: function() {document.write(’Hrrr’)}; }; ja käyttää niitä pistenotaatiolla (olio.ominaisuus, olio.metodi): ”Minun autoni on ”+munAuto.väri+” ”+munAuto.merkki+ ” ja se sanoo ”+munAuto.ääni;

Luokka ja olio Esim. Luodaan uusi luokka nimeltä Auto, jonka ominaisuuksia ovat nimi ja väri. Uuden olion luonti Auto-luokasta tapahtuu tämän jälkeen new operaatiolla. Aluksi luodaan luokka käyttäen alustajametodia: varAuto=function(merkki, väri) { // Luokan Auto ominaisuudet. Alustajametodi this.merkki = merkki; this.väri = väri; } Auto.prototype.ääni = function(){alert(’Hrrrr’);}; // Luokan Auto metodi. Kun alustajametodi on kirjoitettu, uusi olio luodaan new-lauseella seuraavasti: var munAuto = new Auto (”Polo”, ”Vihreä”); alert(”Autoni on ”+munAuto.väri+” ”+munAuto.merkki); munAuto.ääni();

Valmiit oliot JavaScript-kieli ja EcmaScript-standardikieli sisältävät seuraavat kielen sisään- rakennetut oliot: Sisäänrakennetut oliot on tarkoitettu päivämäärien, matemaattisten ja tilastollisten lausekkeiden sekä merkkijonojen käsittelyyn, esim. Date-, Math- ja String -oliot. HTML-oliot liittyvät www-sivujen elementteihin. Esimerkiksi jokainen linkki, lomake ja lomakkeen elementti ovat HTML-olioita. Oliot eivät sisälly JavaScript- tai EcmaScript- kieleen , vaan ne toteutetaan selaimeen liitettävissä asiakasohjelmissa. HTML:ssä on jokai- selle elementille määritelty myös oma API (Application Programming Interface). WWW-selainolioilla voi vaikuttaa itse selaimen toimintaan ja käyttäytymiseen. Näistä tärkein on window-olio, joka viittaa selainikkunaan.

Seuraavassa on joitakin JavaScriptin suosituimpia olioita ja kuvaus mihin niitä voidaan käyttää: Olio Kuvaus navigator Tämä olio viittaa itse selaimeen. Tätä oliota käyttäen voidaan määrä- tä käytettävän selaimen tyyppi. window Tämä olio viittaa selainikkunaan ja tarjoaa monia tehokkaita metodeja. document Olio edustaa Internet-sivun runkoa. Tämän olion avulla voidaan käsitellä Internet-sivun kaikkia elementtejä, kuten linkkejä, kuvia, ankkureita jne. history Tällä oliolla on muistissa se, millä sivuilla Internet-selain on käynyt ennen nykyisen sivun avaamista. Tämän olion metodeja käyttäen voidaan liikkua edestakaisin sivuhistorialistalla. location Tämä olio sisältää informaatiota Internet-sivun sijainnista, mm. sen URL:n, koneosoitteen, polun, palvelinportin jne.

Esimerkkejä metodeista: Metodi Kuvaus document.writeKirjoittaa Internet-sivun runkoon. document.writeln Kirjoittaa Internet-sivun rungon ja päättää tekstin rivinvaihtoon. history.go Saa selaimen navigoimaan tiettyyn sijaintiin selaimen sivuhistorialistalta. window.alert Saa selaimen näyttämään varoitus-valintaikkunan. window.open Saa selaimen avaamaan uuden selainikkunan; esittää mahdollisesti uuden dokumentin.

Ominaisuuksia joita käyttäen voidaan lukea ja muuttaa JavaScript-olioiden asetuksia. OminaisuusKuvaus document.bgcolor Sisältää Internet-sivun taustavärin. document.fgcolor Sisältää Internet-sivun edustan eli oletustekstin värin. document.lastmodified Sisältää sivun viimeisimmän muokkauspäivämäärän (vaikka monet dokumentit eivät tätä informaatiota tarjoa). document.title Sisältää Internet-sivun otsikon (joka esiintyy selaimen otsikkopalkissa). navigator.appName Sisältää selaimen varsinaisen nimen, jolla määritetään, mitä selainta käyttäjä käyttää.

String-olioiden käyttö JavaScriptissä JavaScript – kielessä jokainen merkkijono muuntuu automaattisesti String-olioksi, vaikka sitä ei new-avainsanalla erikseen luotaisikaan. String-olioilla on vain yksi omainaisuus, length, joka kertoo merkkijonon pituuden. String-oliolle on määritelty useita metodeita, joilla merkkijonoja voi muuttaa, esim. pilkkoa se osiin. Esimerkkejä: toUpperCase()muuttaa kaikki merkkijonon merkit isoiksi kirjaimiksi. toLowerCase() muuttaa kaikki merkkijonon merkit pieniksi kirjaimiksi. substringpalauttaa merkkijonosta sen osan, joka määritellään suluissa. var mj = ”abcdefkhijklmno”; document.write (mj.substring(3,6)); // tulostuu ”def” (indeksi alkaa nollasta) split() jakaa merkkijonon merkkijonotaulukoksi parametrina annettavan erotin- merkkijonon mukaan. var mj = ”Aku::Ankka::Ankkalinna”;Tulostuu: var taulu = mj.split (”::”); Aku for (i = 0; i < taulu.length; i ++) Ankka document.write(taulu[i] + ”<br />”); Ankkalinna

Array-olio String-olion jälkeen käytetyin sisäänrakennettu olio on taulukko (Array), johon voi tallentaa muuttujia peräkkäisiin indeksoituihin paikkoihin. Taulukon alkioihin viitataan tavallisesti indeksinumeroilla. Esimerkiksi taulukkoon taulu, jossa on kolme alkiota, viitataan seuraavasti: taulu[0], taulu[1], taulu[2]. Taulukko luodaan tekemällä uusi ilmentymä Array-oliosta käyttämällä new-avainsanaa. Esim. var pv_nimet = new Array(”Ma”, ”Ti”, ”Ke”, ”To”, ”Pe”, ”La”, ”Su”); var pituus = pv_nimet.length; for (i = 0; i < pituus; i++) document.writeln (i + ”: ” + pv_nimet[i] + ”<br />”); Tulostus: 0: Ma 1: Ti 2: Ke 3: To 4: Pe 5: La 6: Su

Tapahtumien käyttö JavaScriptissä Tapahtumien (events) avulla selain tiedottaa JavaScript-koodille, mitä tapahtuu. Kun käyttäjä esimerkiksi napsauttaa hiirellä Internet-sivua, tapahtuu mouseDown-tapahtuma. Tapahtumaan voidaan sitoa koodia, joka suoritetaan aina tapahtuman sattuessa. onMouseDown-attribuuttia käyttäen voi suorittaa JavaScript-koodin tuottamaan toiminnan, kuten muuttamaan Internet-sivun taustan vihreäksi. Tapahtumia on paljon. Seuraavassa taulukko esittää useimmin käytetyt tapahtumat. Näiden attribuuttien tuki vaihtelee selaimen ja HTML- elementin mukaan. Uusimmat selaimet tukevat käytännössä kaikkia tapahtuman- käsittelijöitä kaikissa elementeissä (myös tekstielementeissä, kuten p tai div).

Tapahtuma Kuvaus onBlur Aktiivinen syöttöelementti tulee ei-aktiiviseksi. Toteutuu onFocus- käsittelijän jälkeen. onChange Muutetaan jonkin elementin sisältöä. onClick Napsautetaan hiiren painikkeella jotain syöttö-elementtiä. onDblClick Kaksoisnapsautus jonkin syöttöelementin päällä. onError Sivun lataaminen päättyi virheeseen. onFocus Syöte kohdistuu elementtiin. Esimerkiksi kohdistimen vienti tekstikenttään aktivoi kentän, minkä jälkeen näppäimistösyöte siirtyy tekstikenttään. onKeyDown Näppäimistön näppäin painettiin pohjaan. onKeyPress Käyttäjä painoi jotain näppäimistön näppäintä. onKeyUp Näppäimistön näppäimen vapautus. onLoad Lataaminen suoritettu loppuun. onMouseDown Hiiren painike painetaan alas. onMouseMove Hiirtä liikutetaan.

Tapahtuma Kuvaus onMouseOut Hiiren kohdistin poistuu jonkin elementin päältä. onMouseOver Hiiren kohdistin on jonkin elementin päällä. onMouseUp Hiiren painike vapautetaan. onReset Lomakkeen kentät tyhjennetään. onResize Ikkunan kokoa muutetaan. onSelect Tapahtuu, kun käyttäjä tekee valinnan. onSubmit Lomake lähetetään eteenpäin. onUnload Dokumentista poistutaan. Toteutuu aina onLoad – käsittelijän jälkeen.

Yksinkertaiset valintaikkunat alert(), confirm() ja prompt() ovat kolme yleisesti käytettyä window- olion metodia. Nämä metodit avaavat yksintertaisia valintaikkunoita. alert() näyttää käyttäjälle viestin. confirm() pyytää käyttäjää napsauttamaan OK- tai Cancel-painiketta operaation vahvistamiseksi tai keskeyttämiseksi. prompt() pyytää käyttäjää syöttämään merkkijonon.

Uuden ikkunan avaaminen window.open(URL, name, specs, replace); specs=”lista” (erotin pilkku, ei välilyönti). Lista sisältää: height, width, left, top: pikseleinä. Muut ominaisuudet joko otetaan käyttöön ”yes” tai ei ”no”: toolbar Määrittää näytetäänkö työkaluvalikkoa menubar Määrittää näytetäänkö ”menubaria” scrollbars Vierintäpalkit resizable Voidaanko ikkunan kokoa säätää. location Osoitelaatikko directories Tiedostovalikko status Tilarivi

JavaScript (c) Irja & Reino Aarinen, 2007