11 JavaScript Mikä JavaScript on?

Transkriptio

1 180 HTML-kieli on tehty tiedon esittämiseen, joten sillä ei voi ohjelmoida wwwsivuille toimintaa eikä vuorovaikutteisuutta. Vuorovaikutteisuus on vain hieno sana, joka tarkoittaa sitä, että dokumentti reagoi käyttäjän tekemiin valintoihin ja näyttää tai muuttaa sisältöään näiden perusteella. HTML-dokumenttien vuorovaikutteisuutta kutsutaan DHTML:ksi (dynamic html). Näitä vuorovaikutteisia toimintoja voivat olla esim. lomakkeen tietojen tarkistaminen, laskutoimitukset, valikkojen kuvien muuttaminen hiiren kohdistimen tullessa tietyn kohdan päälle jne. Toimintaa voi lisätä mm. Javasovelmien, ActiveX-ohjelmien, CGI-skriptien sekä JavaScript-kielen avulla. Java-sovelmat ym. eivät kuitenkaan usein lataudu kovin nopeasti, joten pienenkin toimenpiteen suorittamiseen voi kulua kohtuuttomasti aikaa. Myös CGI-skriptien suorituksessa on pieni viive, koska selain joutuu ottamaan yhteyden palvelimeen. Ainoastaan JavaScript mahdollistaa välittömän palautteen esim. napin painallukseen. Java-sovelmat sekä ActiveX-ohjelmat onkin tarkoitettu monipuolisempien ja laajempien sovellusten tekemiseen Mikä JavaScript on? JavaScript on tulkattava skriptikieli, joten se soveltuu hyvin lyhyiden, yksinkertaisten ja toistuvien ohjelmien tekoon. Tulkattavuus tarkoittaa sitä, että JavaScript-koodia ei käännetä ohjelman kirjoituksen jälkeen, kuten esim. c++ohjelma käännetään. JavaScript-ohjelmat, kuten muutkin skriptikielet tulkataan samalla kun ne suoritetaan. Tämä mahdollistaa nopean ohjelmien teon ja testauksen sekä helpottaa ylläpitoa. Lisäksi se vähentää tietoverkon ruuhkaa, koska käännetyt ohjelmat ovat kooltaan huomattavasti suurempia kuin pelkkä JavaScript-koodi. Oikeastaan on olemassa kaksi JavaScriptiä: asiakaspuolen JavaScript ja palvelinpuolen JavaScript. Tässä luvussa keskitytään ainoastaan asiakaspuolen JavaScriptiin. Sitä voidaan kirjoittaa suoraan HTML-dokumenttiin (tietystikin SCRIPT-elementin sisään) ja se suoritetaan asiakaskoneessa. Palvelinpuolen JavaScript taas puolestaan sijaitsee palvelimella. Sen tarkoitus on kilpailla jalansijasta CGI:n kanssa. Palvelinpuolen JavaScript käännetään suoritettavaksi tiedostoksi ja suoritetaan palvelimella. Lähes jokaisella kirjassa mainitulla elementillä on ollut joukko attribuutteja (kuten onclick ja ondblclick), joiden avulla voi reagoida käyttäjän toimiin. Näihin tapahtumiin voi JavaScriptillä ohjelmoida toimintaa eli

2 181 tapahtumankäsittelijöitä. Hyvä esimerkki tapahtumasta on lomakkeen painikkeen painaminen. Tällöin tapahtuu onclick-tapahtuma. Tapahtumat ja tapahtumankäsittely liittyy olennaisesti olio-ohjelmointiin ja JavaScript onkin olio-ohjelmointikieli. HTML-dokumenttia ja selaimen eri osia voidaan muokata eri olioiden avulla. Esim. document-olion avulla voidaan kirjoittaa HTML-dokumentiin sisältöä, window-olion avulla voidaan vaikuttaa selaimeen, history-olio sisältää tietoa käyttäjän edellisistä vierailukohteista jne. Oliosta kerrotaan lisää myöhemmin Esimerkki hätäisille Seuraava esimerkki tulostaa www-sivulle kaksi riviä. Kuten huomaat, JavaScript-koodi eli document-olion writeln-metodin kutsut on sijoitettu BODYelementin sisällä olevaan SCRIPT-elementtiin. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT type="text/javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln("tulostuksen eka rivi!<br>"); document.writeln("tulostuksen toinen rivi!<br>"); //lopetetaan piilotus--> JavaScript-esimerkki.

3 182 SCRIPT-elementin sisään sijoitettava JavaScript-koodi täytyy piilottaa JavaScriptiä tukemattomilta selaimilta. Koodi sijoitetaan normaalien HTML:n kommenttimerkintöjen väliin: <!-- tämä teksti on kommentti --> Jos JavaScript-koodia halutaan kommentoida, täytyy ne kommentit merkitä JavaScriptin kommenttimerkinnöillä seuraavasti: //Tämä on JavaScriptin kommentti Jos kommentteja ei merkitä näin, luulee JavaScript-tulkki tekstiä JavaScriptkoodiksi ja ilmoittaa virheestä. Sen lisäksi, että voit testata eri JavaScript-komentoja kirjoitamalla lyhyitä ohjelmia, voit myös testata JavaScript-komentoja nopeasti selaimesi avulla. Kirjoita Address-kenttään (Osoite) esim. seuraavalla tavalla: javascript:alert( morjens ); Tällöin selain suorittaa JavaScriptin alert-metodin, joka tulostaa ruudulle varoituksena saamansa parametrin (eli tässä tapauksessa morjens ) JavaScriptin perusteet Tässä kappaleessa käydään läpi JavaScriptin perusteet eli kielen syntaksi sekä JavaScriptin käyttö eli sen liittäminen HTML-sivulle SCRIPT-elementti HTML-sivulle liitettävä skripti (JavaScript, VBScript ym.) sijoitetaan SCRIPTelementin sisään. Elementti vaatii alku- ja lopputagit. Sijoitettava ohjelmakoodi voidaan sijoittaa joko elementin sisään tai erilliseen tiedostoon, jolloin siihen viitataan SCRIPT-elementin src-attribuutilla. SCRIPT-elementti sisältä yhden yleisen attribuutin: charset. Lisäksi SCRIPT-elementti sisältää seuraavat omat attribuutit: src= Kun koodia ei kirjoiteta suoraan SCRIPT-elementin sisään, vaan erilliseen tiedostoon, tämä elementti osoittaa kyseiseen tiedostoon.

4 183 type= Tämä attribuutti määrittää elementin sisällä olevan skriptikielen. Arvoja voivat olla esimerkiksi text/javascript jne. Tämän attribuutin käyttö on suositeltavampaa kuin language-attribuutin. language= Tämän attribuutin avulla määritetään SCRIPT-elementin sisällä oleva skriptikieli. Type-attribuutin käyttö on suositeltavampaa kuin tämän attribuutin. Jotta kummastakin tulisi hyvin esimerkkejä, on molempia attribuutteja käytetty myöhemmissä esimerkeissä. defer= Kun tämä boolean tyyppinen attribuutti asetetaan, tietää selain, ettei JavaScript-koodi tule muuttamaan sivun sisältöä. Toisin sanoen koodissa ei ole esim. document.writeln-komentoja. Tämä auttaa ja nopeuttaa selainta NOSCRIPT-elementti Kaikkien selaimet eivät pysty näyttämään JavaScriptiä ja heidätkin olisi tietysti hyvä huomioida sivuja tehtäessä. Kaikkein paras vaihtoehto olisi tietysti rakentaa korvaavat sivut niille käyttäjille, joiden selain ei tue JavaScript. Aina tämä ei ole mahdollista (teknisistä tai muista syistä), joten on ainakin hyvä ilmoittaa käyttäjälle, että tämän kannattaisi päivittää selain. NOSCRIPT-elementin sisältö näytetään selaimessa, mikäli selain ei pysty näyttämään SCRIPT-elementin sisältöä. Seuraava esimerkki havainnollistaa elementin käyttöä. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT type="text/javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln("tulostuksen eka rivi!<br>"); document.writeln("tulostuksen toinen rivi!<br>"); //lopetetaan piilotus--> <NOSCRIPT>Selaimesi ei tue JavaScriptiä</NOSCRIPT> Tapahtumankäsittely HTML 4.0:ssa on useita tapahtumia, jotka toimivat useimmilla elementeillä. Jokaisen elementin kohdalla on lueteltu yleiset attribuutit kohdassa mitä

5 184 tapahtumia elementillä on. Tapahtumankäsittelyllä voidaan reagoida käyttäjän toimenpiteisiin. Tapahtumat herätetään käyttäjän tehdessä jotain, esim. siirtäessä hiiren elementin päälle, painaessa hiiren painiketta Tapahtumat Tapahtumiin voidaan kirjoittaa suoraan koodia tai sitten niissä voidaan kutsua funktiota, joka hoitaa tarvittavat tehtävät. Yksinkertaisissa tapauksissa edellinen on ehkä sopivaa, mutta HTML-koodista tulee helposti sekava ja vaikeasti ymmärrettävä, jos koodia kirjoitetaan paljon. Tällöin onkin parasta käyttää funktiokutsuja. Tapahtumien nimet kuvaavat niitä melko hyvin, joten tapahtumat on selitetty hyvin lyhyesti. onabort= onblur= onchange= onclick= Herätetään, kun käyttäjä keskeyttää kuvan latauksen. Tapahtuma herätetään, kun aktiivisuus siirtyy pois elementistä joko hiirellä tai Tab-näppäimellä. Tapahtuma herätetään, kun elementin sisältö muuttuu. Tapahtuma herätetään, kun käyttäjä napauttaa hiiren painiketta elementin päällä. ondblclick= Tapahtuma herätetään, kun käyttäjä kaksoisnapauttaa hiiren painiketta elementin päällä. onfocus= onkeydown= Tapahtuma herätetään, kun käyttäjä kohdistaa aktiivisuuden elementtiin joko napauttamalla sitä hiirellä tai painamalla Tabnäppäintä. Tapahtuma herätetään, kun näppäin painetaan pohjaan elementin päällä. onkeypress= Tapahtuma herätetään, kun näppäintä painetaan ja näppäin vapautetaan elementin yläpuolella. onkeyup= onload= Tapahtuma herätetään, kun näppäin vapautetaan elementin päällä. Tapahtuma herätetään, kun ikkunan tai kehyksen lataus on päättynyt. onmousedown= Tapahtuma herätetään, kun käyttäjä painaa hiiren painikkeen pohjaan elementin päällä. onmousemove= Tapahtuma herätetään, kun käyttäjä liikuttaa hiiren osoitinta elementin päällä.

6 185 onmouseout= Tapahtuma herätetään, kun käyttäjä siirtää hiiren osoittimen pois elementin päältä. onmouseover= Tapahtuma herätetään, kun käyttäjä siirtää hiiren osoittimen elementin päälle. onmouseup= onreset= onselect= onsubmit= onunload= Tapahtuma herätetään, kun käyttäjä nostaa hiiren painikkeen elementin päällä. Tapahtuma herätetään, kun lomake tyhjätään. Tämä tapahtuma toimii ainoastaan FORM-elementillä. Tapahtuma herätetään, kun käyttäjä valitsee tekstiä elementistä. Tapahtuma herätetään, kun lomake jätetään eli lähetetään. Tämä tapahtuma toimii ainoastaan FORM-elementillä. Tapahtuma herätetään, kun sivulta poistutaan. Seuraava esimerkki havainnollistaa tapahtumien käyttöä. Siinä HTML-sivulle asetetaan INPUT-elementti, jonka tyypiksi on asetettu button. Kun sivulla olevaa nappia painetaan, herätetään onclick-tapahtuma joka sulkee selainikkunan. <INPUT type="button" value="sulje" onclick="self.close()"> Lomakkeen tietojen oikeellisuuden tarkistaminen Yksi yleisimmistä JavaScriptin käyttökohteista on lomakkeen tietojen oikeellisuuden tarkistaminen. Tämä on hyvä tehdä siksi, että käyttäjän tekemä virhe saadaan karsittua pois mahdollisimman aikaisessa vaiheessa. Jos käyttäjää pyydetään esimerkiksi syöttämään tekstikenttään oma ikänsä ja hän vahingossa syöttää ikänsä sijasta nimensä aiheutuu tietoa käsiteltäessä varmasti ongelmia (numero vs. teksti). Käyttömukavuuden lisääntymisen lisäksi tästä on myös se hyöty, että palvelimen kuormitus laskee. Syötetty tieto kannattaa tarkistaa ainakin seuraavissa kahdessa tapauksessa: 1. Kun käyttäjä on syöttänyt tiedon ja onchange-tapahtuma on herätetty. Jokainen kenttä kannattaa tarkistaa erikseen (eli jokaiselle kentälle olisi hyvä kirjoittaa oma onchange-tapahtumankäsittelijä). 2. Kun käyttäjä lähettää (Submit) lomakkeen. Tällöin herätetään onsubmittapahtuma ja sisällön tarkistuksen voi tehdä joko siinä tai sitten lähettävän painikkeen onclick-tapahtumassa.

7 186 Seuraavassa esimerkissä käyttäjää pyydetään syöttämään ikänsä. Jos käyttäjä syöttää luvun väliltä 0-120, ikä hyväksytään. Jos käyttäjä syöttää jonkin muun luvun tai esim. merkkijonon, häntä opastetaan oikeanlaisen syötteen kirjoittamisessa. Tekstikentän onchange-tapahtumassa ajetaan tarkistakentta-metodi, joka saa parametreinään kenttä-olion sekä minimi- ja maksimiarvot. Minimi- ja maksimiarvot välitetään parametreinä sen vuoksi, että tarkistusfunktiota voitaisiin käyttää muissakin numerosyötekentissä. Viimeisen kerran kentän tiedon oikeellisuus tarkistetaan, kun käyttäjä painaa painiketta lähettääkseen syöttämänsä tiedot eteenpäin. Tämä esimerkki ei lähetä tietoja mihinkään, se ainoastaan tarkistaa tiedot. <SCRIPT language="javascript1.2"> function tarkistakentta(kentta, min, max){ var palautus=false; if (isnan(kentta.value)) alert("syötä luku") else if (parseint(kentta.value) < min parseint(kentta.value) > max) alert("syötä luku väliltä "+min+"-"+max) else palautus=true; return palautus; Syötä kenttään ikäsi: <FORM> <INPUT type="text" name="teksti" onchange="tarkistakentta(this, 0, 120);"> <INPUT type="button" value="nappi" onclick="tarkistakentta(teksti, 0, 120);"> </FORM>

8 187 Tiedon oikeellisuuden tarkistavan esimerkin lomake Koodin sijoitus Kuten edellisessä kappaleessa mainittiin, voidaan ohjelmakoodi sijoittaa joko SCRIPT-elementin sisään tai erilliseen tiedostoon. Kappaleessa 11.2 näkyy, miten ohjelmakoodi sijoitetaan SCRIPT-elementin sisään. Kyseisen esimerkin tapauksessa SCRIPT-elementti on sijoitettu BODY-elementin sisään. Jos ohjelmakoodissa on funktioita, kannattaa SCRIPT-elementti sijoittaa HEADelementin sisään. HEAD-elementti ladataan sivulta ensimmäisenä ja tällöin myös funktiot ladataan muistiin heti ennen kuin käyttäjä ehtii tehdä sivulla mitään. Funktioita ei kuitenkaan suoriteta ennen kuin niitä kutsutaan. Seuraavassa esimerkissä käy ilmi, kuinka kappaleen 11.2 esimerkki toteutetaan sijoittamalla JavaScript-koodi omaan tiedostoonsa (.js). Tällöin ohjelmakoodi on helpommin ylläpidettävää ja selkeämpää. Hello.js-tiedoston sisältö: <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln("tulostuksen eka rivi!<br>"); document.writeln("tulostuksen toinen rivi!<br>"); //lopetetaan piilotus--> Esim.html-tiedoston sisältö näyttää seuraavalta: <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript" src="hello.js">

9 188 Kun ohjelmakoodi sijoitetaan eri tiedostoon, siihen viitataan src-attribuutin avulla Muuttujat Toisin kuin c++ tai Pascal, JavaScript on heikosti tyypitetty kieli. Tämän ansiosta tyypinmuunnokset ym. ovat helppoja toteuttaa. JavaScriptissä on sisäänrakennettuna seuraavat muuttujatyypit: Merkkijonot, kuten Lausahdus!. Merkkijonojen käsittelyä varten JavaScriptissä on string-olio, jonka avulla merkkijonoille voi helposti tehdä usein tarvittavia toimenpiteitä (esim. lukea merkkijono pituus). Numerot, jotka voivat olla kahden tyyppisiä, joko kokonaislukuja tai reaalilukuja. Loogiset muuttujat eli muuttujalla voi olla joko arvo true tai false. Null, mikä tarkoittaa, ettei muuttujalla ole vielä arvoa. Tällöin muuttujalla ei myöskään ole tyyppiä JavaScriptillä voi myös määritellä uusia tyyppejä mutta ne täytyy määritellä olioina. Niin muuttujien kuin vakioiden nimissä ei saa käyttää skandinaavisia merkkejä. Skandit ovat luonnollisesti sallittuja kommenteissa, merkkijonoissa (siis itse merkkijonoissa) ja HTML-sivun sisältönä. Seuraava esimerkki osoittaa muuttujien käytön. Kuten edellä mainittiin, JavaScript on heikosti tyypitetty kieli. Tämän ansiosta ei muuttujien tyyppiä tarvitse määrittää niitä varattaessa. Tyyppi määritetään sijoittamalla muuttujan arvoksi jotain. Esimerkissä varataan ensin kaksi muuttujaa (luku ja teksti), joihin seuraavaksi sijoitetaan kokonaisluku (luku) sekä merkkijono (teksti). Kun muuttujien arvot tulostetaan document-olion writeln-metodilla, ei tyypinmuunnoksista tarvitse huolehtia: tulkki huolehtii siitä. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var luku,teksti; luku=10; teksti="tulostetaan luku-muuttujan arvo, joka on "; document.writeln(teksti+luku+"<br>"); //lopetetaan piilotus-->

10 189 Muuttujien arvojen tulostaminen. Muuttujan alustuksessa ei ole pakko käyttää sanaa var, mutta sen käyttö on suositeltavaa. Kun muuttuja alustetaan var-sanalla globaaliksi muuttujaksi (eli muuttujaa ei alusteta funktion sisällä), voidaan jossain funktiossa alustaa samanniminen paikallinen muuttuja. Usein yksi tietyn tyyppinen muuttuja ei riitä, vaan tarvitaan useampia. Jos muuttujien sisältämä tieto on kuitenkin tyypiltään ja kontekstiltaan samanlaista, voi usean erinimisen muuttujan hallitseminen olla ikävää ja aikaa vievää. Silloin kannattaa käyttää vektoreita. Vektorit määritellään hyvin samalla tavalla kuin muuttujatkin. var vek=new Array(); Tämä ainoastaan määrittelee, että muuttuja vek on vektori, muttei kerro sen kokoa. Vektorin koko voidaan määrittää asettamalla sille arvo esim. seuraavasti: vek[5]= Klopi ; Toinen keino on asettaa vektorin koko jo sitä alustettaessa: var vek=new Array(5); Vektoreiden indeksointi alkaa nollasta, joten edelliset vektorit sisältävät kuusi alkiota. Seuraavassa esimerkissä luodaan vektori, jossa on neljä alkiota. Sitten vektoriin sijoitetaan arvoja ja ne tulostetaan näytölle. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var vek=new Array(3); vek[0]='mikko'; vek[1]='maija'; vek[2]='kimmo';

11 190 vek[3]='pekka'; teksti=vek[0]+' '+vek[1]+' '+vek[2]+' '+vek[3]; document.writeln(teksti+"<br>"); //lopetetaan piilotus--> Vektorin sisältö tulostettuna ruudulle Vakiot Kuten muissakin ohjelmointikielissä, JavaScriptissä voidaan esittää lukuja desimaali-, oktaali- tai heksadesimaalilukuina. Desimaaliluvut esitetään sellaisenaan: document.writeln(10+"<br>"); // desimaaliluku 10 Oktaaliluvun eteen laitetaan numero 0 (nolla): document.writeln(010+"<br>"); // desimaalilukuna 8 Heksadesimaaliluvun eteen kirjoitetaan 0X: document.writeln(0xa+"<br>"); // desimaalilukuna 10 Merkkijonot voidaan esittää joko yksinkertaisten tai kaksinkertaisten lainausmerkkien sisällä. Lisäksi käytössä ovat seuraavat muistakin ohjelmointikielistä tutut (esim. c++) erikoismerkit: \f sivun vaihto \b askelpalautin \n rivinvaihto \r rivin alkuun palautus \t sarkain eli tabulaattori

12 191 Seuraava esimerkki esittelee eri vakioiden käyttöä JavaScriptissä. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln("ensin hieman lukuja:"+"<br>"); document.writeln(10+"<br>"); document.writeln(010+"<br>"); document.writeln(0xa+"<br>"); document.writeln('merkkijono yksinkertaisissa lainausmerkeissä.'+"<br>"); document.writeln("ja merkkijono kaksinkertaisissa."+"<br>"); document.writeln("lainausmerkkijä voi käyttää myös 'sisäkkäin'."+"<br>"); //lopetetaan piilotus--> Vakioiden käyttö JavaScriptissä Operaattorit JavaScriptissä on kolmenlaisia operaattoreita: sijoitusoperaattoreita, vertailuoperaattoreita sekä loogisia operaatoreita.

13 Sijoitusoperaattorit Sijoitusoperaattorit on otettu JavaScriptiin C:n sukuisista kielistä ja siksi ne saattavat olla hieman outoja esim. henkilöille, joilla on kokemuksia vain Pascalin kaltaisten kielien kanssa. Yksinkertaisin sijoitusoperaattori on tavallinen sijoitus, jota käytetään seuraavasti: muuttuja=10; Tätä ei pidä sotkea Pascalin vertailuoperaattoriin. Hyvin yleinen virhe on sekoittaa JavaScriptin sijoitus ja vertailuoperaattorit = ja = = toisiinsa. Vertailu tapahtuu seuraavasti: if (muuttuja==10) teksti=oikein; Sijoitusoperaattorin lisäksi JavaScriptissä on myös seuraavat binääriset operaatiot (operaattori yhdistää kaksi operandia, esim. a+b): + yhteenlasku - erotus * kerto / jako % jakojäännös Lisäksi käytössä ovat seuraavat unaariset operaatiot (operaattori tarvitsee vain yhden operandin, esim. a++): ++ lisätään lukua yhdellä, esim. luku++ -- vähennetään lukua yhdellä Tavallisten sijoitusoperaattorien lisäksi JavaScriptissä on myös C:stä tutut lyhennetyt sijoitusoperaattorit: Lyhennetty: summa+=luku; erotus-=luku; tulo*=luku; jako/=luku; jakoj%=luku; Tavallinen: summa=summa + luku; erotus=erotus - luku; tulo=tulo * luku; jako=jako / luku; jakoj=jakoj % luku; Seuraava esimerkki havainnollistaa muutamien sijoitusoperaattoreiden käytön: <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript">

14 193 <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var luku,summa; luku=10;summa=5; document.writeln(luku+" "+summa+"<br>"); luku++;summa+=summa; document.writeln(luku+" "+summa+"<br>"); //lopetetaan piilotus--> Sijoitusoperaatoreiden käyttö Vertailuoperaattorit Vertailuoperaattoreilla voidaan nimensä mukaisesti vertailla kahta operandia eli muuttujaa. Vertailuoperaattori palauttaa loogisen arvon true tai false eli tosi tai epätosi. Niitä käytetään ehtolauseissa ja silmukoissa esim. seuraavasti: if (ika>18) document.writeln( Olet täysi-ikäinen + <BR>); Vertailuoperaattoreita ovat seuraavat operaattorit: == totta, jos vertailtavat ovat yhtäsuuria!= totta, jos vertailtavat ovat erisuuria > totta, jos vasen on suurempi kuin oikea >= totta, jos vasen on suurempi tai yhtäsuuri kuin oikea < totta, jos vasen on pienempi kuin oikea <= totta, jos vasen on pienempi tai yhtäsuuri kuin oikea Esimerkkejä vertailuoperaattoreista: 3>5 epätosi, koska 3 on pienempi kuin 5 5<10 tosi 5<5 epätosi 5<=5 tosi Seuraavassa esimerkissä on käytetty muutamaa vertailuoperaattoria:

15 194 <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta luku1=10; luku2=20; document.writeln("muuttujien luku1 ja luku2 vertailu:<br>"); document.writeln("luku1="+luku1+"<br>"); document.writeln("luku2="+luku2+"<br>"); document.writeln(luku1==luku2); document.writeln("(luku1==luku2)"+"<br>"); document.writeln(luku1!=luku2); document.writeln("(luku1!=luku2)"+"<br>"); document.writeln(luku1>=luku2); document.writeln("(luku1>=luku2)"+"<br>"); document.writeln(luku1<=luku2); document.writeln("(luku1<=luku2)"+"<br>"); //lopetetaan piilotus--> Vertailuoperaattoreita käytössä Loogiset operaattorit Vertailuoperaattorit palauttivat siis totuusarvon. Loogisia operaattoreita käytetään totuusarvojen vertailussa. Esimerkiksi eri ehtolauseissa tarvitaan usein useiden vertailujen vertailua. Esimerkki voisi olla vaikka seuraavanlainen:

16 195 If ((ika>18) && (ika<60)) document.writeln( Olet melko todennäköisesti työikäinen ); Loogisia operaattoreita ovat seuraavat:! NOT eli ei OR eli tai && AND eli ja Lisäksi JavaScriptissä on seuraavat bittitason loogiset operaattorit. Jokainen numero ja merkki koodataan tietokoneissa binääriluvuiksi joita keskusyksikkö sitten osaa käsitellä. Bittitason loogisilla operaattoreilla voidaan käsitellä muuttujia bittitasolla. Näitä operaattoreita ovat: & AND, ja OR, tai ^ XOR, joko tai ~ NOT, ei << siirto vasemmalle >> siirto oikealle Lausekkeet ja lauseet Lausekkeella tarkoitetaan esim. muuttujaa, jolla on arvo. Lausekkeita voivat olla vaikkapa seuraavat: luku1 luku1+luku2 Lausekkeita ei voi sijoittaa itsekseen JavaScript-koodiin, vaan niistä täytyy muodostaa lauseita. Lause on sitten sellainen yksikkö, jonka voi sijoittaa itsekseen ohjelmakoodiin. Luonnollisesti sen täytyy sopia sinne myös muuten kuin syntaksin mukaan. Lauseita ovat esimerkki: summa=luku1+luku2; if luku1==3 document.writeln( Onnistui. ); Ehtolause Kuten edellä on jo ehkä käynyt ilmikin, on if-lause eräs JavaScriptin ehtolause. Toinen on switch-lause. Ehtolause suorittaa ensin jonkin vertailun tai joukon vertailuja ja toimii sitten niiden mukaisesti. Perinteisesti if-lauseen syntaksi on kuvattu ohjelmointikielten kirjoissa pseudokielellä seuraavasti: if (ehto) {lause1 else {lause2

17 196 Jos ehto toteutuu eli vertailuoperaattorin (tai operaattoreiden) palauttama tulos on tosi (true), niin silloin suoritetaan lause1. Jos palautettu tulos onkin epätosi (false), niin silloin suoritetaan else-lohkossa oleva lause2. Seuraavasta esimerkistä käy ilmi yksinkertaisen if-lauseen syntaksi: if (luku==10) {Arvosana= Kymppi ; Seuraava esimerkki havainnollistaa if-lauseen käyttöä. Siinä on myös osoitettu, kuinka if-lauseita voi käyttää sisäkkäin. Esimerkissä alustetaan yksi muuttuja, jolle annetaan arvoksi kymmenen. Sen jälkeen if-lauseilla testataan muuttujan arvoa. Ohjelma tulostaa huomionsa siitä, onko muuttujan arvo alle kymmenen, kymmenen vai yli kymmenen. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta luku=10; if (luku<10) {document.writeln("luku on pienempi kuin kymmenen!<br>"); else if (luku==10) {document.writeln("luku on kymmenen!<br>"); else {document.writeln("luku on enemmän kuin kymmenen!<br>"); //lopetetaan piilotus--> If-lauseen käyttöä selventävä esimerkki. If-lauseelle on olemassa myös toinen, hieman kryptisempi vaihtoehto. Tässä vaihtoehdossa ehtolause sijoitetaan ensin sulkuihin, sen jälkeen tulee kysymysmerkki ja kysymysmerkin jälkeen lause (tai lohko) joka suoritetaan, jos ehto oli tosi. Jos ehto ei ollut tosi, suoritetaan kaksoispisteen jälkeen tuleva lohko.

18 197 (ehto)? {jos ehto on tosi : {muutoin Lauseen syntaksi on melko helppo ymmärtää, mutta ohjelmakoodista näiden lauseiden lukeminen voi olla erittäin työlästä. Lause on c:n ja c++:c peruja. Eritoten c:ssa ohjelmoijilla on tapana lyhentää koodia. Tämä taas aikaan sai sen, ettei koodia pystynyt ymmärtämään kunnolla muut, kuin sen tekijä. Jos hänkään. Lause on käyttökelpoinen, jos sen avulla voidaan lyhentää koodia merkittävästi. Jos sama ehto mahtuu yhdelle riville if-lauseella, kannattaa ennemmin käytää sitä. Switch-lauseen avulla voidaan yhtä muuttujaa verrata moneen arvoon. Switchlauseen syntaksi pseudokielellä on seuraavanlainen: Switch (lauseke) { Case arvo1: lause1; break; Case arvo2: lause2; Break; Default: lause3; Jos lausekkeen arvo on yhtä kuin jonkin arvoista (esimerkissä arvo1 ja arvo2), niin kyseinen lause suoritetaan. Suoritettavia lauseita voi olla useita. Break on sijoitettu jokaisen case-lohkon loppuun siksi, että suoritus pysähtyisi siihen. Jos edellä olevassa esimerkissä ei olisi break-lauseita ja lausekkeen arvo olisi arvo1, suoritettaisiin myös lause2. Eli breakin avulla switch-lauseesta on saatu hyvinkin ilmaisuvoimainen lause. Seuraava esimerkki kuvaa switch-lauseen käyttöä. Poistamalla esimerkistä break-lauseet näet lauseen toiminnan parhaiten. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta luku=10; switch (luku) { case 9: document.writeln("luku on yhdeksän!<br>"); break; case 10: document.writeln("luku on kymmenen!<br>"); break; case 11: document.writeln("luku on yksitoista!<br>"); //lopetetaan piilotus-->

19 198 Switch-lause käytössä Silmukat Tässä käsitellään seuraavat JavaScriptin silmukat: while, do while sekä for. Näistä while-silmukat suorittavat sisältämäänsä ohjelmakoodia niin pitkään kuin ehto on tosi. Hyvä esimerkki while-silmukan käytöstä voisi olla vaikka tiedoston lukeminen (pseudokoodina): while (kun tiedostossa on merkkejä) {lue merkki; While on niin sanottu alkuehtoinen silmukka, kun taas vastaavasti do while on loppuehtoinen. Yksi tärkeä ero näiden lauseiden välillä on, että do whilesilmukka suoritetaan aina vähintään kerran, kun while-silmukkaa ei välttämättä suoriteta kertaakaan. Seuraava esimerkki esittää kertoman laskun while-silmukan avulla. Kertoma luvulle 4 merkitään 4! ja lasketaan seuraavasti: 1*2*3*4=24 Samasta esimerkistä on muunnettu myös do while- ja for-silmukoiden esimerkit. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var luku=4; var kertoma=1; var laskuri=1; while (laskuri<=luku){ kertoma*=laskuri; laskuri++;

20 199 document.writeln("kertoman tulos on "+kertoma+"<br>"); //lopetetaan piilotus--> Kertoman laskeminen while-silmukan avulla. Kuten varmasti huomasit, ei while-silmukka oikein sopinut tämän kaltaiseen tehtävään, koska avuksi jouduttiin ottamaan laskuri-muuttuja. Kertoman laskemisen tyyppisiin tehtäviin sopii paremmin for-silmukka, jota suoritetaan tietty määrä. Ennen for-silmukkaan tutustumista muunnetaan while-silmukan esimerkki vielä do while-esimerkiksi. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var luku=4; var kertoma=1; var laskuri=1; do { kertoma*=laskuri; laskuri++; while (laskuri<=luku) document.writeln("kertoman tulos on "+kertoma+"<br>"); //lopetetaan piilotus--> For-silmukka on monipuolisempi ja syntaksiltaan joidenkin mielestä vaikeampi kuin while- ja do while-silmukat. For-silmukan syntaksi on pseudokielellä seuraavanlainen: for (alustus;ehto;päivitys) { lauseita;

21 200 Silmukka siis koostuu neljästä osasta: alustus, ehto, päivitys ja lauseet. Alustusosassa alustetaan silmukan tarvitsema tai tarvitsemat muuttujat. Yleensä tässä kohdassa alustetaan muuttuja, joka toimii silmukassa laskurina. Ehto-osassa verrataan yleensä alustuksessa alustettua muuttujaa johonkin toiseen muuttujaan tai vakioon. Ehto voi olla myös monipuolisempi useasta vertailusta koostuva ehto. Päivitysosassa päivitetään alustusosassa alustettua muuttujaa esim. kasvattamalla tai pienentämällä sitä (tilanteen mukaan). Seuraava esimerkki osoittaa hyvin for-silmukan käytön. Esimerkin aiheena on sama kertoman laskeminen. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta var luku=4; var kertoma=1; for (laskuri=1;(laskuri<=luku);laskuri++) { kertoma*=laskuri; document.writeln("kertoman tulos on "+kertoma+"<br>"); //lopetetaan piilotus--> For- ja do while-silmukoiden esimerkeistä ei ole kuvia, koska ne näyttävät tismalleen samoilta kuin while-silmukan kohdalla ollut kuva. For-silmukassa on huomattava, että alustusosassa alustettavaa (tai alustettavia) muuttujia ei kannata käyttää for-silmukan jälkeen, koska niiden sisältämät arvot eivät enää pidä paikkaansa. Esim. yllä olevan esimerkin tapauksessa on laskurimuuttujan arvo 5 for-silmukan jälkeen. Lisäksi kannattaa varoa, ettei vahingossa kirjoita puolipistettä sulkujen jälkeen seuraavalla tavalla: for (laskuri=1;(laskuri<=luku);laskuri++); { kertoma*=laskuri; Tällöin kaarisulkeiden sisällä oleva lohko ei kuulu for-silmukkaan, koska forsilmukka loppuun ennen kaarisulkeita olevaan puolipisteeseen. For-silmukassa voi olla myös useampia muuttujia. Seuraavassa esimerkissä alustetaan kaksi muuttujaa ja päivitetään niiden arvoja.

22 201 <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta for (a=0,b=10;a<5;a++,b--) { document.writeln(a+" "+b+"<br>"); //lopetetaan piilotus--> For-silmukassa voi olla myös useita lauseita Funktiot Kuten aiemmin mainittiin, kannattaa JavaScript-koodi sijoittaa HEAD-elementtien sisään, jos koodissa on funktiota. Tämä siksi että HEAD-elementti ladataan sivulta ensimmäisenä ja tällöin myös funktiot ladataan muistiin heti ennen kuin käyttäjä ehtii tehdä sivulla mitään. On kannattavaa jakaa luonnollisia tehtävä kokonaisuuksia omiksi aliohjelmikseen eli funktioiksi. Näin samaa koodia voi käyttää ohjelmassa uudelleen kirjoittamatta sitä toista kertaa. Jotta funktiota voisi kutsua, sillä täytyy olla nimi. Funktiot kannattaa nimetä niin, että niiden nimestä käy ilmi se, mitä ne tekevät. Funktiot voivat saada parametrejä, mutta muutokset eivät näy kutsuvaan osaan. Funktio voi palauttaa yhden arvon return-lauseella kutsuvalle ohjelmalle.

23 202 Esimerkiksi kertoma-funktio voisi ottaa parametrinään luvun ja palauttaa sen kertoman. Seuraavassa esimerkissä on for-silmukka, jonka muuttujien arvot tulostetaan erillisellä funktiolla. Nyt tehtyä funktiota voidaan käyttää muulloinkin kun tarvitaan tulostaa kaksi lukua peräkkäin samalle riville. Funktio.html-tiedosto: <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript" src="funktio.js"> Tämä sivu esittelee funktioden käyttöä.<br> <SCRIPT> <!--//Piilotus suorita();--> <INPUT type="button" value="sulje" onclick="self.close()"> Funktio.js-tiedosto: <!--//Piilotetaan koodi JavaScriptiä tukemattomilta selaimilta function tulosta(eka,toka){ document.writeln(eka+" "+toka+"<br>"); function suorita() { for (a=0,b=10;a<5;a++,b--) { tulosta(a,b); --> For-silmukka esimerkki, jossa lukujen tulostus on hoidettu funktiolla.

24 Valmiit funktiot JavaScriptissä on myös joukko sisäänrakennettuja funktioita. Niiden avulla voi mm. arvioida merkkijonon arvoa, tutkia argumentin äärellisyyttä sekä muuntaa merkkijonoja kokonaisluvuiksi tai reaaliluvuiksi eval eval-funktion avulla voidaan arvioida merkkijonon arvo. Merkkijonon arvo voisi esimerkiksi olla 1+1, jolloin sen matemaattinen arvo on laskettavissa. evalfunktion käyttö käy ilmi seuraavasta esimerkistä. <SCRIPT> a="1+1"; document.writeln(eval(a)+"<br>"); isfinite isfinite-funktion avulla voidaan arvioida, onko funktiolle parametrinä välitetty arvo äärellinen luku. Jos parametrin arvo ei ole numero tai jos se on positiivinen tai negatiivinen ääretön, funktio palauttaa arvon false. Muussa tapauksessa se palauttaa arvon true. Seuraavassa esimerkissä testataan merkkiä k. isfinitefunktio palauttaa arvon false eli epätosi, koska k ei ole äärellinen luku. <SCRIPT> a="k"; document.writeln(isfinite(a)+"<br>"); isnan isnan-funktio tarkistaa, onko sen parametrinä saama arvo luku vai ei. Jos parametri on numero funktio palauttaa arvon false eli epätosi. Jos parametri taas ei ole numero, funktio palauttaa arvon true eli tosi. Seuraavassa esimerkissä funktio palauttaa arvon true (tosi), koska k ei ole numero.

25 204 <SCRIPT> a="k"; document.writeln(isnan(a)+"<br>"); parseint parseint-funktio yrittää palauttaa parametrinä saamansa merkkijonon kokonaislukuna. Jos merkkijonoa ei voi palauttaa kokonaislukuna, funktio palauttaa NaN eli not a number. Seuraavassa esimerkissä muutetaan merkkijonona oleva 2 kokonaisluvuksi 2. <SCRIPT> a="2"; document.writeln(parseint(a)+"<br>"); parsefloat parsefloat-funktio yrittää palauttaa parametrinä saamansa merkkijonon reaalilukuna. Jos merkkijonoa ei voi palauttaa reaalilukuna, funktio palauttaa NaN eli not a number. Seuraavassa esimerkissä muutetaan merkkijonona oleva 2.5 reaaliluvuksi 2.5. <SCRIPT> a="2.5"; document.writeln(parsefloat(a)+"<br>"); Number Number-funktion avulla voidaan muuntaa jokin olio (esim. merkkijono) numeroksi. Seuraava esimerkki havainnollistaa funktion käyttöä:

26 205 <SCRIPT> a="100"; document.writeln(number(a)+"<br>"); String String-funktion avulla voidaan muuntaa jokin muu olio merkkijonoksi. Seuraavassa esimerkissä muunnetaan Date-oliossa oleva päiväys merkkijonoksi. <SCRIPT> tanaan=new Date(); document.writeln(string(tanaan)+"<br>"); String-funktiolla voidaan muuntaa jokin muu olio merkkijonoksi JavaScript ja oliot Johdatusta JavaScript on olio-ohjelmointikieli. Sillä pystyy luomaan uusia olioita (esim. uusia tyyppejä), mutta yleisesti oliot käsitetään JavaScriptissä www-sivun osina: otsikoina, kappaleina jne. Näihin osiin voidaan viitata eri olioilla. Myös itse selaimen toimintaan voidaan vaikuttaa.

27 206 Window-oliolla ja sen ominaisuuksilla voidaan viitata koko auki olevaan ikkunaan. Document-oliolla voidaan viitata dokumentin sisältöön (kuten edellä olleet writeln-metodit osoittivat). History-olio pitää sisällään tietoa osoitteista, joissa käyttäjä on ollut. Käskyllä history.go(-1) on sama vaikutus kuin yhdellä Backpainikkeen (Takaisin) painalluksella. Math-olion avulla voi suorittaa matemaattisia laskutoimituksia sekä String-oliolla voi muokata merkkijonoa Olion luonti Uusi olio luodaan komennolla new. Aikaisemmissa esimerkeissä ei uusia olioita ole luotu, vaan oliot eli muuttujat ovat luoneet itse itsensä samalla kun ne on varattu. Seuraava esimerkki osoittaa kuinka luodaan String-tyyppinen olio. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> jono=new String; jono='morjens!'; document.writeln(jono); Siinä luodaan String-olio, jonka arvoksi asetetaan merkkijono. Tämä on monimutkainen tapa, koska tässä tapauksessa olisi riittänyt pelkästään: <SCRIPT> jono='morjens!'; document.writeln(jono); Olion luonti new-komennolla on kuitenkin hyvä osata, koska sitä tarvitaan, jos oliolle annetaan parametrejä Olion määrittely Kuten aiemmin on sanottukin, on JavaScript olio-ohjelmointikieli, ja niinpä sillä voi myös määritellä itse olioita. Seuraavassa esimerkissä luodaan Koira-olio, joka saa parametreinään kaksi arvoa: rodun ja iän. Parametrien arvot asetetaan olion muuttujien arvoksi this-osoitinrakenteen avulla. This viittaa käsiteltävään olioon.

28 207 <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> function Koira(rotu,ika){ this.rotu=rotu; this.ika =ika; Aku=new Koira('Kultainen noutaja',9); document.writeln(aku.rotu+" "+Aku.ika); Kun Koira-funktio on kerran tehty, voidaan sen avulla luoda kuinka paljon Koira-olioita tahansa. Olion muuttujaan voidaan viitata pistenotaatiolla eli kirjoittamalla olion nimen jälkeen piste ja haluttu muuttuja: rotu=aku.rotu; Olion metodit Oliolle voidaan lisätä metodeja niin kuin muissakin olio-ohjelmointikielissä. Olion määrittely koostuu kahdesta vaiheesta: itse funktion kirjoittamisesta ja funktion esittelystä luokassa. Jatketaan esimerkkejä edellisessä kappaleessa ollutta Koira-oliomäärittelyä kehittäen. Lisätään siihen metodi, jolla koira haukkuu käskettäessä. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> function kovasana(){ document.writeln("woh"); function Koira(rotu,ika,huuto){ this.rotu =rotu; this.ika =ika; this.huuto=huuto this.kovasana=kovasana; Aku=new Koira('Kultainen noutaja',9); document.writeln(aku.rotu+" "+Aku.ika+"<BR>"); Aku.kovasana();

29 208 Metodin lisäys olioon tapahtuu siis niin, että this-osoitinrakenteen avulla viitataan olemassa olevaan funktioon. Äskeinen esimerkki näyttää selaimella seuraavanlaiselta: Koira-olio vauhdissa Window-olio HTML-dokumentti koostuu oliomallinsa mukaisesti olioista. Kaikki sivun oliot on periytetty Window-oliosta. Se on niiden kaikkien isä. Window-oliolla on joukko muuttujia ja vielä suurempi joukko metodeita. Toisin kuin muilla olioilla, voi Window-olion metodeja kutsua ilman olion nimeä (poikkeuksena tapaukset, joissa on sekaantumisen vaara). Window-oliolla on seuraavat muuttujat: status defaultstatus Sisältää status-kentän eli selaimen alareunassa olevan viestikentän sisällön. status-kentän avulla on mahdollista opastaa käyttäjää toimimaan haluamallaan tavalla. Sisältää status-kentän oletusarvon. Tämä teksti näkyy siis silloin, kun mitään ihmeellistä ei tapahdu. Seuraava esimerkki esittelee status-muuttujan käyttöä. Siinä status-kentän arvo muuttuu, kun käyttäjä vie kursorin painonapin päälle ja kun käyttäjä painaa painiketta. Huomaa, että onmouseout-tapahtuma ei toimi, ellei tapahtuman koodissa palauteta totuusarvoa true. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta

30 209 function alku(){ window.status="vies kursori napin päälle!"; function paalla(){ window.status="kursori on napin päällä"; function paino(){ window.status="nappia painettu"; //lopetetaan piilotus--> <BODY onload="alku();"> Vie kursori alla olevan napin päälle, paina sitä ja seuraa samalla status-kentän tekstejä.<br> <INPUT type="button" value="paina" onclick="paino();" onmouseover="paalla();return true" onmouseout="alku();return true"> Window-oliolla on myös seuraavat metodit: alert(mjono) Tämä metodi tulostaa ruudulle erillisen ikkunan, jossa käyttäjää voidaan varoittaa jostain. Käyttäjä voi esim. olla tekemässä jotain kyseenalaista toimenpidettä tai käyttäjän syöttämä tieto ei kenties ole oikeanlaista. Alert-metodin tulostama varoitusikkuna. close() confirm(mjono) Sulkee aktiivisena olevan ikkunan. Tulostaa ruudulle Kyllä/Ei-valintaikkunan ja palauttaa arvon true, jos käyttäjä painaa OK-painiketta. Alla on esimerkki siitä, kuinka confirm-metodia voi käyttää esim. if-lauseessa. function paino(){ window.status="nappia painettu"; if (confirm("oletko varma?")) {alert("hyvä"); else {alert("eikö");;

31 210 Confirm-metodin tulostama kysymysikkuna. open( osoite, nimi,[par]) Avaa uuden ikkunan, jonka ominaisuudet määritetään metodin parametreissä. Ensimmäinen parametri kertoo avattavan sivun osoitteen, toinen parametri ikkunan nimen ja kolmas ikkunan ominaisuudet eli tuleeko ikkunaan selainpainikkeita, valikko, jne. Alla olevassa esimerkissä kysytään avattavan sivun osoitetta ja sitten avataan sivu uuteen ikkunaan. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> function ikkuna(){ ikkuna=window.open(osoite.value,"funktio","toolbar=1"); Tämä sivu esittelee window-olion open-metodin käyttöä.<br> <INPUT type="text" name="osoite" SIZE="50" MAXLENGHTH="50"> <INPUT type="button" value="go" onclick="ikkuna();"> Esimerkki window-olion open-metodin käyttöstä.

32 211 Open-metodin parametreille voi antaa seuraavia arvoja: copyhistory, directories, location, menubar, resizable, scrollbars, status ja toolbar. Näiden näkyminen avattavassa ikkunassa voidaan määrittää joko yes/novalinnalla tai 1/0-valinnalla seuraavasti: toolbar=yes //toolbar=1 eli toolbar näkyy Lisäksi parametreinä voidaan antaa width ja height eli leveys ja korkeus, joiden arvot syötetään pikseleinä. prompt(mjono, oletus) Avaa uuden ikkunan, jossa on viesti sekä tekstikenttä, johon käyttäjä voi syöttää vastauksen. Viestiksi tulee mjonoparametrin arvo ja tekstikentän oletusarvoksi tulee oletus-parametrin arvo. Seuraavassa esimerkissä havainnollistetaan prompt-metodin käyttöä. function p(){ teksti=prompt("anna nimesi","nimi"); alert("terve "+teksti); Prompt-metodin tulostama ikkuna Document-olio Jokaisella HTML-sivulla on yksi document-olio. Se luodaan automaattisesti siinä vaiheessa kun sivu ladataan ja sen avulla voidaan osoittaa kaikkiin sivulla oleviin elementteihin. Document-olion muuttujat: anchors Sisältää taulukon, jonka avulla voidaan osoittaa kaikkiin dokumentin ankkureihin. Ensimmäinen ankkuri on anchors[0].

33 212 bgcolor cookie fgcolor forms lastmodified links location referrer title Tämän muuttujan avulla voidaan muuttaa sivun taustaväriä ts. sama, kuin BODY-elementin bgcolorattribuutti. Sisältää piparin (cookie) sisällön merkkijonona. Tällä muuttujalla voidaan vaikuttaa BODY-elementin fgcolor-attribuutin arvoon. Sisältää indeksoidun taulukon kaikista dokumentin eli HTML-sivun FORM-elementeistä. Tämän muuttujan avulla lomakkeisiin voidaan osoittaa. Sisältää merkkijonona viimeisen muutoshetken. Tämän muuttujan avulla voi helposti tulostaa sivun alareunaan päiväyksen, jolloin sivua on viimeksi päivitetty. Tämä auttaa lukijaa hahmottamaan paremmin kuinka ajankohtaista tietoa sivun antama informaatio on. Sisältää indeksoidun taulukon dokumentin linkeistä. Sisältää sivun täydellisen URL-osoitteen. Sisältää sen dokumentin URL-osoitteeen, josta käyttäjä tuli nykyiselle sivulle. Sisältää dokumentin otsikon eli sama kuin TITLEelementin sisältämän teksti. Lisäksi document-oliolla on seuraavat metodit: clear() close() open([mime-tyyppi]) Tyhjentää käsiteltävänä olevan ikkunan. Sulkee open-metodilla avatun tietovirran ja tulostaa siinä mahdollisesti kirjoitetun tekstin tms. ruudulle. Jotta HTML-documenttiin voitaisiin tulostaa tekstiä, se täytyy ensin avataan vastaanottavaan tilaan. Openmetodi avaa dokumentin tietovirran. MIME-tyyppi kertoo, mitä dokumentille aiotaan tulostaa. Mahdollisia arvoja ovat esim. text/html (oletus), text/plain, image/jpeg jne. Jos dokumentissa on ennestään tekstiä tms. open-metodi tyhjentää sen ensin. write(mjono) Tulostaa dokumenttiin parametrinä annetun merkkijonon tai muuttujan.

34 213 writeln(mjono) Tämä metodi toimii samalla tavalla kuin write, mutta tämä lisää merkkijonon tai muuttujan jälkeen rivinvaihdon. Rivinvaihto ei vaikuta, ellei writelnmetodia käytetä PRE-elementin sisällä. Seuraava esimerkissä käytetään document-olion open- ja close-metodeja. Käyttäjälle esitetään kaksi painiketta, Ei ja Kyllä. Käyttäjän painaessa jompaakumpaa painiketta luodaan JavaScript-koodilla uusi HTML-sivu riippuen siitä, kumpaa painiketta käyttäjä painoi. Luotavan sivun loppuun tulostetaan vielä lastmodified-muuttuja, joka kertoo sivun viimeisen muutoshetken. <SCRIPT> function ei(){ document.open(); document.write("tämä on JavaScriptissä luotu HTML-sivu<BR>"); document.write("painoit Ei-painiketta<BR>"); document.write("<hr>"); document.write(document.lastmodified+"<br>"); document.close(); function joo(){ document.open(); document.write("tämä on JavaScriptissä luotu HTML-sivu<BR>"); document.write("painoit Kyllä-painiketta<BR>"); document.write("<hr>"); document.write(document.lastmodified+"<br>"); document.close(); <FORM> <INPUT type="button" value="ei" onclick="ei();"> <INPUT type="button" value="kyllä" onclick="joo();"> </FORM> Esimerkki open- ja close-metodin käytöstä.

35 214 Esimerkin tulostama HTML-sivu, kun käyttäjä painoi Ei-painiketta History-olio History-olio sisältää tietoa siitä, missä käyttäjä on ollut ennen sivulle tuloa. History-olion avulla käyttäjä voidaan mm. lähettää takaisin sinne mistä tulikin. History-oliolla on seuraavat muuttujat: current length Sisältää nykyisen HTML-sivun URL-osoitteen. Kertoo URL-osoitteiden lukumäärän historialistassa. Lisäksi history-oliolla on seuraavat metodit: back() forward() go(luku mjono) Lataa historialistassa edellisenä olleen sivun. Juuri tämän metodin avulla käyttäjä voidaan lähettää takaisin sinne mistä tulikin. Metodi go(-1) vastaisi samaa asiaa. Lataa historialistassa olleen seuraavan sivun. Vastaa metodia go(1). Jos parametrinä annetaan luku, niin metodi lataa sen sivun, joka on historialistassa luvun osoittaman määrän päässä (negatiivinen taaksepäin ja positiivinen eteenpäin). Jos parametrinä annetaan merkkijono, metodi lataa sen sivun, jonka otsikkoon tai URLosoitteeseen merkkijono täsmää. Merkkijonon ei tarvitse täsmätä täydellisesti, myös osittainen täsmääminen riittää.

36 215 Seuraavassa esimerkissä esitetään go-metodin käyttöä. Se on yksi yleisimmistä toiminnoista, joita JavaScriptillä tehdään. <FORM> <INPUT type="button" value="takaisin" onclick="history.go(-1);"> </FORM> Navigator-olio Navigator-olion avulla voidaan selvittää käyttäjän käyttämän selaimen tiedot. Sillä on neljä muuttujaa eikä lainkaan metodeja. appcodename appname appversion useragent Tämä muuttuja sisältää käytetyn selaimen koodinimen. Tämä muuttuja sisältää käytetyn selaimen nimen. Tämä muuttuja sisältää tietoa käytetyn selaimen versiosta. Www-palvelin tunnistaa selaimen eli asiakkaan tietyn header-tiedoston avulla. UserAgent-muuttuja sisältää tämän tiedoston. Seuraavassa esimerkistä käy ilmi muuttujien käyttö: <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln(navigator.appcodename+"<br>"); document.writeln(navigator.appname+"<br>"); document.writeln(navigator.appversion+"<br>"); document.writeln(navigator.useragent+"<br>"); //lopetetaan piilotus-->

37 216 Navigator-olion muuttujat Location-olio Location-olio sisältää tietoa nykyisestä sivusta. Hieman harhaanjohtavasta nimestä huolimatta sitä ei voi käyttää siirtyäkseen sivulta toiselle. Locationoliolla on seuraavat muuttujat: host hostname href pathname port protocol Tämä muuttuja sisältää palvelimen URL-osoitteen sekä tämän portin kaksoispisteellä erotettuna. Tämä muuttuja sisältää palvelimen URL-osoitteen. Tämä muuttuja sisältää dokumentin koko URLosoitteen eli saman URL-osoitteen, mikä näkyy selaimen Address-kentässä. Tämä muuttuja sisältää URL-osoitteen polkuosan. Jos URL on esim. index.html, niin polku on ~mkontio/opetus/ index.html. Tämä muuttuja sisältää palvelimen käyttämän portin numeron. Jos porttia ei ilmoiteta, muuttuja arvo on tyhjä. Tämä muuttuja sisältää URL-osoitteen protokollaosan. Esim. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript">

38 217 <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta document.writeln(location.host+"<br>"); document.writeln(location.hostname+"<br>"); document.writeln(location.href+"<br>"); document.writeln(location.pathname+"<br>"); document.writeln(location.port+"<br>"); document.writeln(location.protocol+"<br>"); //lopetetaan piilotus--> Seuraavasta kuvasta näkyvät location-olion muuttujine arvot. Portti ei ole käytössä, joten sen vuoksi port-muuttujan arvo on tyhjä. Location-olion muuttujat Math-olio Math-olio on sisäänrakennettu olio, jonka muuttujilla ja metodeilla voidaan ratkaista erilaisia matemaattisia ongelmia. Math-olion tarjoamat palvelut ovat oikeastaan melko monipuolisia ja siksi JavaScriptillä pystytään suorittamaan melko monimutkaisiakin laskutoimituksia. Math-olion muuttujat sisältävät tiettyjä arvoja, joita voi käyttää laskutoimituksissa. Muuttujia ovat: Math.E e eli Neeperin luku eli n. 2,7182. Math.LN10 Math.LN2 Luvun 10 luonnollinen logaritmi. Luvun 2 luonnollinen logaritmi.

39 218 Math.PI Piin arvo eli n. 3,14. Math.SQRT1_2 Neliöjuuri luvusta ½. Math.SQRT2 Neliöjuuri luvusta 2. Math-oliolla on myös joukko metodeja, joiden avulla voi suorittaa matematiikan perusrutiineja. Metodit ottavat yleensä yhden tai kaksi parametriä, joilla laskutoimitus suoritetaan. Metodeja ovat: Math.abs(parametri) Math.acos(parametri) Math.asin(parametri) Math.atan(parametri) Palauttaa parametrin itseisarvon. Palauttaa parametrin arcus cosinin. Palauttaa parametrin arcus sinin. Palauttaa parametrin arcus tangentin. Math.ceil(parametri) Palauttaa parametrin pyöristettynä lähimpään suurempaa kokonaislukuun. Math.cos(parametri) Math.exp(parametri) Palauttaa parametrin cosinin. Palauttaa e potenssiin parametrin. Math.floor(parametri) Pyöristää parametrin lähimpään pienempään kokonaislukuun. Math.log(parametri) Palauttaa parametrin luonnollisen logaritmin. Math.max(param1, param2) Palauttaa suuremman annetusta kahdesta parametristä. Math.min(param1, param2) Palauttaa pienemmän annetusta kahdesta parametristä. Math.pow(param1, param2) Palauttaa parametrin1 korotettuna potenssiin parametrin2. Math.random Palauttaa satunnaisluvun väliltä 0-1. Math.round(parametri) Pyöristää normaalin pyöristyssäännön mukaisesti eli x.5:stä ylöspäin ja x.4:stä alaspäin Math.sin(parametri) Palauttaa parametrin sinin.

40 219 Math.sqrt(parametri) Math.tan(parametri) Palauttaa parametrin neliöjuuren. Palauttaa parametrin tangentin. Seuraava esimerkki havainnollistaa Math-olion käyttöä sekä peruslaskutoimitusten suorittamista JavaScript-kielessä. Esimerkissä on käytetty lomakkeita tiedon keruuseen. Ylempään kenttään on tarkoitus syöttää jokin luku kuten myös alempaan. Pudotusvalikosta valitaan lukuihin kohdistettava toimenpide. Jos toimenpide on sin, niin silloin toimenpide kohdistuu vain ylemmässä kentässä olevaan lukuun. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> function laske(eka,o,toka){ if (o=="+") apu=eval(eka+'+'+toka); if (o=="-") apu=eval(eka+'-'+toka); if (o=="*") apu=eval(eka+'*'+toka); if (o=="/") apu=eval(eka+'/'+toka); if (o=="pot") apu=math.pow(eka,toka); if (o=="sin") apu=math.sin(eka); if (o=="sin") apu=math.sin(eka); alert(apu); <FORM> <INPUT type="text" name="eka" size="10" maxlenght="10"><br> <SELECT name="op"> <OPTION value="+">+ <OPTION value="-">- <OPTION value="*">* <OPTION value="/">/ <OPTION value="pot">potenssiin <OPTION value="sin">sini <OPTION value="sqrt">sqrt </SELECT><BR> <INPUT type="text" name="toka" size="10" maxlenght="10"><br> <INPUT type="button" name="nappi" value="laske" onclick="laske(eka.value,op.value,toka.value);"><br> </FORM> Selaimessa esimerkki näyttää seuraavanlaiselta:

41 220 JavaScriptin matemaattisia ominaisuuksia esittelevä esimerkki. Esimerkki antaa vastauksen huomautusikkunassa String-olio String-olion avulla käsitellään merkkijonoja. Aina kun muuttujan arvoksi sijoitetaan merkkijono, siitä tulee String-tyyppinen olio. Edellä on ollut runsaasti esimerkkejä, joissa on käytetty String-oliota ja yksinkertaisena esimerkkinä riittäköön: var mjono= Hyvää päivää ihmiset! ; String-oliolla on yksi muuttuja, joka on length. Se kertoo olion sisältämän merkkijonon pituuden. Edellä määritellyn mjono-olion merkkijonon pituuden saa siis selville käskemällä: pituus=mjono.length(); String-oliolla on joukko hyödyllisiä metodeja, jotka kuvataan seuraavassa. Kuvausten jälkeen on esitelty lyhyt ohjelma, jossa metodeja on käytetty. mjono.anchor(parametri) Parametristä tehdään ankkuri siten, että merkkijonon sisältämä teksti asetetaan ankkurin

42 221 otsikoksi ja parametri osoitteeksi. <a name= parametri >merkkijono</a>. mjono.big(parametri) Palauttaa parametrin vahvennettuna tekstinä merkkijonon arvoksi. Vahvennettu näyttää paljon samanlaiselta kuin lihavoitu. mjono.blink(parametri) Palauttaa parametrinä olevan merkkijonon vilkkuvana tekstinä. mjono.bold(parametri) mjono.charat(indeksi) mjono.fixed() mjono.fontcolor(väri) mjono.fontsize(parametri) mjono.indexof(p1,[p2]) Palauttaa parametrinä olevan tekstin lihavoituna. Palauttaa merkkijonosta sen merkin, joka on indeksin osoittamassa kohdassa. Huomaa, että indeksointi alkaa nollasta. Palauttaa merkkijonon fixed-fontilla. Tämän metodin avulla voi asettaa merkkijonon värin. Värin arvo syötetään joko heksadesimaalilukuna (esim. # joka on musta) tai sitten suoraan englanniksi. Palauttaa merkkijonon parametrin osoittaman kokoisella fontilla. Parametrin arvon täytyy olla väliltä 1-7. Palauttaa tietyn merkin sijainnin merkkijonossa. Etsittävä merkki annetaan p1:n arvona ja etsintä aloitetaan kohdasta p2. Jos etsintä aloitetaan alusta, voidaan p2 jättää kokonaan pois. Huomaa, että indeksointi aloitetaan nollasta. mjono.italics() Palauttaa merkkijonon italics-fontilla eli kursivoituna. mjono.lastindexof(p1,[p2]) Sama kuin indexof-metodi, mutta etsintä aloitetaan merkkijonon lopusta. mjono.link(parametri) mjono.small() Tekee merkkijonosta linkin niin, että olion sisältämästä tekstistä tulee linkin teksti ja parametristä linkin osoite. Palauttaa merkkijonon pienellä fontilla.

43 222 mjono.strike() mjono.sub() mjono.substring(a,b) mjono.sup() mjono.tolowercase() mjono.touppercase Palauttaa merkkijonon yliviivattuna eli tekstin läpi kulkee viiva. Palauttaa merkkijonon alaindeksinä. Tämä on kätevä tapa esittää kaavoja. Palauttaa merkkijonon alkaen indeksikohdasta a ja loppuen ennen kohtaa b. Jos b on suurempi kuin a, niin silloin palautettava merkkijono alkaa b:stä ja loppuu ennen a:ta. Palauttaa merkkijonon yläindeksinä. Palauttaa merkkijonon, niin, että kaikki merkit ovat pieniä kirjaimia. Palauttaa merkkijonon niin, että kaikki merkit ovat isoja kirjaimia. Seuraavassa esimerkissä on käytetty kaikkia edellä esiteltyjä metodeita. Huomaa erityisesti, kuinka sub- ja sup-metodien kohdissa metodeita on käytetty suoraan merkkijonoon seuraavasti: Hello.sup(); Esimerkki: <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT language="javascript"> <!--// piilotetaan koodi JavaScriptiä tukemattomilta selaimilta mjono="terve"; document.writeln(mjono.anchor("osoite")+"<br>"); document.writeln(mjono.big(mjono)+"<br>"); document.writeln(mjono.blink(mjono)+"<br>"); document.writeln(mjono.bold(mjono)+"<br>"); document.writeln(mjono.charat(1)+"<br>"); document.writeln(mjono.fontcolor("yellow")+"<br>"); document.writeln(mjono.fontsize(7)+"<br>"); document.writeln(mjono.indexof("r")+"<br>"); document.writeln(mjono.italics()+"<br>"); document.writeln(mjono.link("terve")+"<br>"); document.writeln("h"+"2".sub()+"o"+"<br>"); document.writeln(mjono.substring(1,3)+"<br>"); document.writeln("e=mc"+"2".sup()+"<br>"); mjono="terve"; document.writeln(mjono.tolowercase()+"<br>"); //lopetetaan piilotus-->

44 223 String-olion metodeita esittelevä esimerkki Date-olio Date-olion avulla voidaan JavaScriptissä hallita päivämääriä ja kellonaikoja. Oliolla iso joukko metodeja päivämäärän asettamista, lukemista ja muokkausta varten. Päivämäärää käsitellään JavaScriptissä samalla tavalla kuin Javassa. Molemmat tallentavat päivämäärän millisekuntien määränä, joka on kulunut klo 0.00 jälkeen. Date-olio pystyy käsittelemään päivämääriä päivää ennen ja jälkeen Date-olio alustetaan seuraavasti: paivays=new Date([parametrit]); Jos parametreinä ei anneta mitään, tallentuu olion päiväykseksi nykyinen päivä. Haluttu päiväys voidaan antaa parametreinä kahdella tapaa: 1. Merkkijonona tyyliin Date( Kuukausi päivä,vuosi tunnit:minuutit:sekunnit ). Esim. paivays= new Date( September 20, :15:00 );

45 Joukkona kokonaislukuja tyyliin Date(vuosi, kuukausi, päivä) tai Date(vuosi, kuukausi, päivä, tunnit, minuutit, sekunnit). Date-oliolla on metodit on helpointa luetella ryhmittäin. Oliolla on seuraavanlaisia metodeja: set-metodit, joilla voidaan asettaa päiväys ja kellonaika Date-olioon get-metodeja, joilla hakea päiväys tai kellonaika Date-oliosta to-metodeja, joilla voidaan palauttaa Date-olion arvoja merkkijonoina Set- ja get-metodeilla voidaan kysyä ja asettaa vuosi, kuukausi, päivä, tunnit, minuutit ja sekunnit. On olemassa getday-metodi, joka palauttaa viikonpäivän. Vastaavaa setday-metodia ei ole, koska viikonpäivä lasketaan automaattisesti. Seuraavassa esimerkissä on käytetty muutamia metodeista. <SCRIPT> tanaan=new Date(); document.writeln(string(tanaan)+"<br>"); document.writeln(tanaan.getyear()+"<br>"); document.writeln(tanaan.getmonth()+"<br>"); document.writeln(tanaan.getdate()+"<br>"); document.writeln(tanaan.gethours()+":"+tanaan.getminutes()+":" +tanaan.getseconds()); Esimerkki Date-olion metodien käytöstä.

46 11.5 Kuvien käyttö 225 Tässä kappaleessa käsitellään kuvien käyttöä JavaScript-ohjelmoinnissa. Ensin käydään läpi mahdollisuudet sekä rajoitukset. Seuraavaksi käydään läpi, kuinka HTML-sivulla oleviin kuviin voi viitata ja lopuksi esitellään esimerkki, jossa valikon kuvat vaihdetaan toiseksi hiiren osoittimen kulkiessa kuvan yli Kuvat ja JavaScript Tällä hetkellä kovin vaativat kuvankäsittelytoimenpiteet eivät onnistu JavaScriptillä. Ilmeisesti useimmin käytetty JavaScript-toiminto on kuvan vaihto toiseksi hiiren kursorin tullessa kuvan päälle. Näin esimerkiksi valikon valinnat saadaan näkymään paremmin. JavaScriptillä voi myös tehdä yksinkertaisia ja lyhyitä animaatioita. Käytännössä se tarkoittaa sitä, että dokumentissa oleva kuva vaihdetaan tarpeeksi usein. Kuvien koko ei kuitenkaan voi olla kovin suuri, koska muutoin suuret kuvat hidastavat animaatiota sekä antavat sivuista hitaan ja kömpelön vaikutelman. Tulevaisuudessa selaimet tulevat todennäköisesti tukemaan myös kuvan koon muutosta. Vaikka JavaScriptin ei tarjoa kovinkaan monipuolisia kuvankäsittelyominaisuuksia, on kuvanvaihdolla toteuttavat valikot sekä pienet animaatiot syytä opetella Images-kuvataulukko JavaScript käsittelee dokumentilla olevia elementtejä olioina. Se näkee kaikki kuvat yhtenä taulukkona olioita, kuvataulukkona. Tämän taulukon nimi on images. Images-kuvataulukon avulla pystytään viittamaan jokaiseen dokumentissa olevaan kuvaa. Kuva voidaan yksilöidä joko name-attribuutin arvon (alla olevassa esimerkissä nappi) tai esiintymisjärjestyksen perusteella. Seuraavasta käy ilmi kolme tapaa viitata dokumentissa ensimmäisenä olevan kuvan src-attribuuttiin: document.images.nappi.src document.images[0].src document.images[ nappi ]src

47 Kuvan vaihto hiiren tullessa kuvan päälle Tässä kappaleessa käydään läpi kuvan vaihto hiiren kohdistin siirtyessä kuvan päälle (ja päinvastoin). Kuten edellä on jo mainittukin, tätä toimintoa voidaan käyttää elävöittämään muuten ehkä tylsän/tavallisen näköisiä valikoita. Esimerkkiä varten tarvitaan kaksi kuvaa: Esimerkin kuvat. Alla on HTML-dokumentti, johon on sijoitettu yllä olevista kuvista vasemmanpuoleinen (nappi1.bmp). Kun hiiren kohdistin menee kuvan ylle, herätetään onmouseover-tapahtuma. Tässä tapahtumassa kutsutaan vaihdafunktiota ja funktiolle annetaan parametrinä uusi kuva. Vastaavasti tehdään kohdistimen siirtyessä pois kuvan päältä. Tässä on huomattavaa, että onmouseouttapahtuma vaatii palauttamaan arvon true, jotta se toimisi. Siksi funktiokutsun jälkeen on kirjoitettu return true. Kuvia varten tehdään dokumentin latautuessa omat olionsa, kuva1 ja kuva2, ja kuvat asetetaan niiden arvoksi. Tämä tehdään siksi, koska tällöin selain lataa kuvat dokumentin latauksen yhteydessä ja näin kuvien vaihto sujuu nopeammin, kun uutta kuvaa ei tarvitse ruveta lataamaan kesken kaiken. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> kuva1= new Image(); kuva2= new Image(); kuva1.src='nappi1.bmp'; kuva2.src='nappi2.bmp'; function vaihda(kuva){ document.images['nappi'].src=kuva.src; <IMG name="nappi" src="nappi1.bmp" onmouseover="vaihda(kuva2);" onmouseout="vaihda(kuva1);return true;">

48 227 Kuva on vaihtunut hiiren ollessa kuvan päällä LiveConnect LiveConnect mahdollistaa Java ja JavaScriptin yhdistämisen. Sen avulla voidaan JavaScriptistä kutsua suoraan Javan muuttujia, metodeita, luokkia ja paketteja; hallita Java-sovelmia sekä kutsua Javasta JavaScriptin muuttujia sekä metodeja Yleistä LiveConnectista LiveConnect toimii kaikilta osiltaan ainoastaan Netscapen selaimissa. Vaikka tässä kirjassa onkin pyritty pitämään kaikki mahdollisimman selainriippumattomana, on LiveConnect kuitenkin katsottu sen verran merkittäväksi, että se on käsitelty. Microsoftin Internet Explorer tukee LiveConnectia, mutta kaikki esimerkit eivät toimi Explorerissa. Explorerin valikoista täytyy käydä asettamassa päälle Java-konsoli tuki ja tämän jälkeen tietokone täytyy käynnistää uudestaan. Jos pelkän valinnan käy tekemässä, muttei käynnistä konetta uudestaan, eivät Java-konsoli esimerkit toimi Explorerissa. Eikä välttämättä vielä sittenkään. Jotta selaimesi tukisi LiveConnectia huolehdi, että Enable Java ja Enable JavaScript on kytketty päälle. Jos jompikumpi valinnoista on kytketty pois päältä, LiveConnect ei toimi. Seuraavasta esimerkistä saa nopeasti kuvan yksinkertaisesta LiveConnectin käytöstä. Siinä varataan ensin omastring-muuttujan arvoksi Javan String-luokan instanssi, jonka arvoksi asetetaan Hello world. Sitten pituus-muuttujan arvoksi asetetaan omastring-muuttujan pituus. Lopuksi pituus tulostetaan näytölle. <TITLE>JavaScript-esimerkki</TITLE> <SCRIPT> var omastring= new java.lang.string("hello world");

49 228 pituus=omastring.length(); document.writeln(pituus); Paketeissa java, sun ja netscape oleviin luokkiin voidaan viitata suoraan eli seuraavasti: var omastring= new java.lang.string("hello world"); Jos viitattava luokka on jossain muussa paketissa (esim. Keho), täytyy paketissa oleviin luokkiin viitata Packages-olion avulla. Jos Keho-paketissa on esim Jalkaluokka, luodaan sen instanssi seuraavasti: var omajalka= new Packages.Keho.Jalka(); Myös java-, sun- ja netscape-pakettien luokkiin voi viitata Packages-olion avulla. Lyhennys on tehty lähinnä siksi, ettei usein käytettävien luokkien yhteydessä tarvitsisi kirjoittaa ylimääräistä Java-sovelman hallinta JavaScriptistä Kuten edellä mainittiin, voidaan JavaScriptillä hallita Java-sovelmaa. Tässä ja seuraavassa kappaleessa oletetaan, että lukija tietää Java-ohjelmoinnin perusteet. Siksi Java-ohjelmakoodi on selitetty hyvin yleisellä tasolla. import java.applet.applet; import java.awt.graphics; public class Hello extends Applet { String mjono; public void init(){ mjono = new String("Hei! Olen sovelma, jonka suoritusta tullaan häiritsemään"); public void paint(graphics g){ g.drawstring(mjono,10,15); public void asetamjono(string m){ mjono=m; repaint(); Hello-sovelmassa on määritetty kolme metodia: init, paint ja asetamjono, joista init ja paint ovat sovelman toiminnan kannalta pakollisia. Sovelma piirtää ruudulle mjono-muuttujan arvon. asetamjono-metodi muuttaa mjono-muuttujan

50 229 arvoa ja piirtää sovelman uudelleen. Alla olevassa HTML-tiedostossa kutsutaan juuri tätä asetamjono-metodia. <TITLE>Java-sovelma</TITLE> <APPLET name="hello" code="hello.class" width=300 height=25> </APPLET> <FORM name="lomake"> <INPUT type="text" name="teksti" size="30"> <INPUT type="button" value="vaihda" onclick="document.hello.asetamjono(document.lomake.teksti.value)"> </FORM> Java-sovelma, jonka metodia ollaan kutsumassa JavaScriptistä. Napin painalluksen jälkeen tekstikentässä oleva teksti näkyy yläpuolella olevassa sovelmassa. Vaikka esimerkki on suhteellisen yksinkertainen ja melko kaukana mahdollisista hyödyllisistä käytännön sovelluksista, se kuitenkin antaa eväät Java-sovelman hallintaan JavaScriptistä. Seuraavassa kappaleessa käydään läpi, kuinka Javasovelma voi kutsua JavaScriptin funktiota JavaScriptin hallinta Javasta Jotta Java-sovelma voisi muodostaa yhteyden JavaScriptiin, täytyy sovelmaan tuoda netscape.javascript-paketti. Kyseinen paketti tulee vain Netscapen selaimien mukana, mutta paketin sisältävän tiedoston sijainti täytyy kertoa Javakääntäjälle. Esimerkiksi Netscapen Navigator 4.0:ssa paketti on tiedostossa nimeltä java40.jar Tämän voi tehdä joko asettamalla CLASSPATH-

51 230 ympäristömuuttujaan tiedoston sijainti tai sitten kertomalla sijainti kääntäjällä käännettäessä classpath-parametrillä. Seuraavaksi täytyy ottaa kädensija (handle) avoinna olevaan selainikkunaan. Tämä tapahtuu netscape.javascript-paketin JSObject-luokan getwindowmetodilla seuraavasti: JSObject win=jsobject.getwindow(this); Nyt win-olio viittaa avoinna olevaan selainikkunaan. Tämän olion avulla voidaan kutsua JavaScriptin funktioita kahdella tapaa, joko call- tai eval-funktioilla. Seuraava Java-koodi osoittaa eval-funktion käytön: import java.applet.applet; import java.awt.graphics; import netscape.javascript; public class Java extends Applet { String mjono; public void init(){ mjono = new String("Hei! Olen sovelma..."); public void paint(graphics g){ g.drawstring(mjono,10,15); JSObject win=jsobject.getwindow(this); win.eval("alert('sovelmaa maalataan...')"); Saman esimerkin paint-metodi näyttäisi call-funktion tapauksessa seuraavalta: public void paint(graphics g){ g.drawstring(mjono,10,15); JSObject win=jsobject.getwindow(this); String parametri[]= { Sovelmaa maalataan... ; win.call( alert,parametrit); Esimerkin sovelma kutsuu JavaScriptin alert-funktiota aina, kun sovelma maalaa itsensä Java-konsolin käyttö Java-konsoli on selainikkuna, joka näyttää Javan antamia viestejä. Netscapen selaimissa ikkuna löytyy Communicator-valikosta. Jos esimerkiksi käytät java.lang.system-paketin out- tai err-luokkia viestien tulostukseen, viestit tulostuvat Java-konsoliin.

52 231 Koodia kirjoitettaessa yleensä koodaaja haluaa nähdä muuttujan tai muuttujien arvoja. Alert-funktio käy hyvin yksinkertaiseen debuggaukseen,mutta jos halutaan tarkkailla muuttujan arvo esimerkiksi jossakin silmukassa, saattaa alert-ikkunoiden sulkemiseen kyllästyä hyvinkin pian. Juuri tällaisessa käytössä Java-konsoli on mitä mainioin apuväline. Toki sitä voidaan myös käyttää viestien tai ohjeiden tulostamiseksi käyttäjälle. Seuraava esimerkki näyttää, kuinka Java-konsolille tulostetaan tekstiä. <TITLE>JavaScript-esimerkki</TITLE> <FORM> <INPUT type="button" value="tulostaa 'Moikka'" onclick="java.lang.system.out.println('moikka')"> </FORM> Jos ei halua joka kerta kirjoittaa println-metodin pitkää runkoa, voi määritellä oman tulostusfunktion, kuten seuraavassa esimerkissä on tehty. <SCRIPT> var omaprintln = java.lang.system.out.println; <FORM><INPUT type="button" value="tulostaa 'moikka'" onclick="omaprintln('moikka')"> </FORM> Java-konsoli, johon on tulostettu moikka.