MITÄ JAVASCRIPT ON?...3

Transkriptio

1 JavaScript

2 MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3 VÄLILYÖNTI- JA TABULAATTORI-MERKIT...3 RIVINVAIHTO...3 ESIMERKKI...4 JAVASCRIPTIN KIRJOITTAMINEN...4 JAVASCRIPTIN EDITOINTI...4 JAVASCRIPTIN RAKENNE...5 VIRHEILMOITUKSET...5 VIRHEILMOITUS...6 VIRHEIDEN KORJAUS...6 VIRHEELLINEN RIVI...6 MITÄ SEURAAVAKSI?...7 USEAT VIRHEET...7 2/7 Juha-Pekka Ruuska

3 Mitä JavaScript on? Olet varmaan kuullut puhuttavan Javasta, joka on SUNin kehittämä ohjelmointikieli. JavaScriptin on puolestaan kehittänyt Netscape. JavaScript ei ole yhtä kuin Java vaikka molemmat ovat objektioriontuneita ohjelmointikieliä. Tämä tarkoittaa sitä, että ohjelmat koostuvat pienistä osista (objekteistä), jotka toimivat yhdessä. Suurin ero Javan ja JavaScriptin välillä on, että Javalla voidaan ohjelmoida täysin itsenäisiä ohjelmia, kun taas JavaScript tarvitsee selaimen toimiakseen. Javalla voidaan tehdä ns. Appletteja, jotka toimivat selaimessa, mutta itse asiassa nekin ovat täysin itsenäisiä ohjelmia. Lisäksi Java-ohjelmat pitää kääntää konekielelle ennen kuin ne toimivat. JavaScript on kuitenkin melko samanlaista kuin Java. Yleistä JavaScriptin syntaksista Käskysanat ja muut varatut sanat kirjoitetaan aina pienellä. Käskysanoja ovat esimerkiksi for ja while. Muita varattuja sanoja esimerkiksi this ja new. Muuttujien, funktioiden ja luokkien nimissä sallittuja kirjaimia ovat pienet kirjaimet (a-z), suuret kirjaimet (A-Z), numerot (0-9), alaviiva (_) ja dollarinmerkki ($). Nimet eivät saa alkaa numerolla eivätkä ne saa sisältää skandinaavisia kirjaimia (åäöåäö). Isot ja pienet kirjaimet tulkitaan eri merkeiksi. HTML-tageihin viittaavissa metodinimissä kuten image.src (tai image.src) ei ole suurilla ja pienillä kirjaimilla eroa, kuten ei htmlkielessäkään. Välilyönti- ja tabulaattori-merkit jätetään huomiotta ohjelmaa suoritettaessa. Niillä on merkitystä ainoastaan muuttujien, käskysanojen ja numeroiden erottimena. Rivinvaihto toimii pääasiassa käskyjen erottimena. Rivinvaihdon tilalla voidaan erottimena käyttää myös puolipistettä. Joissakin käskyissä, kuten if-käskyssä rivinvaihtomerkin voi sijoittaa myös keskelle käskyä ilman, että se tulkitaan käskyn lopetusmerkiksi. Tämä seikka aiheuttaa sen, että jos halutaan esimerkiksi määritellä while-lause, joka sisältää ainoastaan ehdon ja itse runko on tyhjä, on käskyn perässä käytettävä puolipistettä, jotta seuraavaa käskyä ei tulkittaisi luupin rungoksi. 3/7 Juha-Pekka Ruuska

4 Esimerkki Tämän ensimmäisen kappaleen tarkoitus on, pienen esimerkin avulla, näyttää mistä JavaScriptissä on kysymys. Tämä pieni scripti tuottaa punaista tekstiä www-sivuille. Tässä on ensimmäinen scriptisi: Scripti: document.write("<font COLOR='RED'>Tässä on punaista tekstiä.</font>") Scriptin vaikutus: Tässä on punaista tekstiä. JavaScriptin kirjoittaminen Ensinnäkin JavaScripti ei ole HTML:ää. JavaScriptin kirjoittamisen säännöt ovat kuitenkin samankaltaisia kuin HTML:ssä. JavaScripti kirjoitetaan HTML-dokumenttiin HTML-tagien sekaan. Suurin ero HTML:n ja JavaScriptin välillä on se, että HTML antaa virheet helposti anteeksi. HTML-dokumentti toimii vaikka siinä olisi joitakin virheitä, JavaScript ei. ESIM: Ensimmäinen esimerkki näytti tältä, kun se oli oikein kirjoitettu: document.write("<font COLOR='RED'>Tässä on punaista tekstiä.</font>") Jos sen kirjoittaa vahingossa näin, niin siinä on virhe eikä scripti toimi: document.write("<font COLOR='RED'>Tässä on punaista tekstiä.</font> ") JavaScriptin editointi Kun editoit tai kirjoitat JavaScriptiä, pitää sinun huolehtia siitä, että marginaalit tai sisennykset eivät ole tiellä. Itse käytän NotePadia tai vastaavaa tekstieditoria, jossa ei ole marginaaleja ollenkaan. Eräs erittäin tärkeä asia, joka täytyy pitää mielessä JavaScriptiä kirjoittaessa, on että JavaScriptissä pienet ja isot kirjaimet eivät ole sama asia.document. write on eri asia kuin Ducument.Write 4/7 Juha-Pekka Ruuska

5 JavaScriptin rakenne Aloitetaan ensimmäisen esimerkin ensimmäisestä rivistä. Se näytti tältä: Se on HTML-tagi, joka kertoo selaimelle, että tästä alkaa JavaScripti, Yksinkertaista. Kaikki JavaScriptit alkavat tällä komennolla. LANGUAGE="javascript" kertoo selaimelle, että kyseessä on juuri JavaScripti, eikä esim VBScripti. Hypätään suoraan kolmanteen riviin, joka näytti tältä: Tämä päättää jokaisen JavaScriptin. Eli näiden kahden yllä olevien rivien väliin tulee varsinainen JavaScript-koodi. Paina tämä mieleesi, sillä tämän jälkeen tätä ei enää selitetä. Keskimmäinen rivi näytti tältä: document.write("<font COLOR='RED'>Tässä on punaista tekstiä.</font>") Tämä scripti on niin yksinkertainen, että varmaan arvaat mitä siinä oleva teksti tarkoittaa. Käydään se kuitenkin läpi. Aluksi scriptissä ilmoitetaan DOCUMENT (tarkoittaa HTML-dokumenttiä). Tämän jälkeen dokumenttia muutetaan kirjoittamalla (WRITE) siihen jotakin. Se mitä dokumenttiin kirjoitetaan laitetetaan sulkumerkkien sisään. TERMIT: yllä olevassa scriptissä DOCUMENT on objekti. Sitä seuraava WRITE, joka erotetaan objektista pisteellä, on metodi. Tavallaan siis scripti kertoo, että otetaan objekti ja kirjoitetaan siihen jotakin. Teksti sulkeiden sisällä on metodin instanssi eli se mitä tehdään, kun metodi vaikuttaa objektissa. Huomaa, että se teksti mikä on sulkumerkkien sisällä on eristetty lainausmerkein. HTML:ssä niitä ei tarvita mutta tässä tarvitaan. Teksti lainausmerkkien sisällä on tavallista HTML:ää. FONT-tagi muuttaa tekstin punaiseksi. Huomaa myös, että sana RED on ympäröity heittomerkein. SIIS: Lainausmerkkien sisällä... käytä heittomerkkiä. Virheilmoitukset HUOM! Internet Explorerin tai Netscapen uusimmat versiot eivät välttämättä ilmoita virheistä. Explorer kertoo virheestä pienellä merkillä vasemmassa alanurkassa. Merkki on pieni kolmio, jota klikkaamalla varsinainen virheilmoitus ilmestyy. Explorerin asetuksia muuttamalla klikkausta ei tarvita vaan virheilmoitus näkyy heti. Netscapessa saat ohjeet tilarivillä. Jos JavaScriptissä on virhe, sinua pyydetään kirjoittamaan osoitekenttään "javascript". Näin tehtyäsi saat virheilmoituksen. 5/7 Juha-Pekka Ruuska

6 Virheilmoitus On olemassa kahdenlaisia virheitä: syntaksivirheet (syntax error) ja ajonaikaiset virheet (runtime error). Syntaksivirhe tarkoittaa, että olet todennäköisesti tehnyt kirjoitusvirheen. Ajonaikainen virhe tarkoittaa, että olet käyttänyt vääränlaista komentoa. Molemmat virheet tarkoittavat, että ohjelmassa on jokin vialla ja viat pitää korjata, jotta ohjelma toimisi oikein. On olemassa ohjelmia, jotka auttavat virheiden korjaamisessa mutta suosittelen, että teet virheiden korjauksen ilman apuohjelmia, ainakin aluksi. Virheiden korjaus Sanotaan, että paras tapa korjata virheitä on olla tekemättä niitä. Helpommin sanottu kuin tehty. Toiseksi kirjoita jokainen komento omalle rivilleen. Pitkiä rivejä ei kannata katkaista useiksi riveiksi. Rivin katkaisu saa todennäköisesti aikaan virheilmoituksen. Nyt virheiden korjaukseen. Virheilmoituksissa on yksi loistava piirre: pieni ikkuna, joka ilmestyy virheilmoituksen yhteydessä kertoo missä virhe sijaitsee ja mikä virhe on. Virheilmoitus kertoo, että esim. virhe on syntaksivirhe ja se sijaitsee rivillä 23. Virheellinen rivi Kun virheilmoitus ilmoittaa virheellisen rivin, niin rivin numero lasketaan aivan HTMLdokumentin ensimmäisestä rivistä alkaen. Alla olevassa esimerkissä on virhe rivillä 9. Se on syntaksivirhe, koska instanssin päättävä sulkumerkki on väärällä rivillä. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> document.write("text for the page" ) </BODY> </HTML> Mutta miten virhe voi olla rivillä 9? Siksi, että sinun pitää laskea HTML-dokumentin ensimmäisestä rivistä alkaen ja laskea myös tyhjät rivit mukaan. Alla on sama dokumentti vielä uudestaan. Rivit on laskettu puolestasi. (line 1) (line 2) (line 3) (line 4) (line 5) (line 6) (line 7) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> 6/7 Juha-Pekka Ruuska

7 (line 8) (line 9) document.write("text for the page" (line 10) ) (line 11) (line 12) (line 13) (line 14) </BODY> (line 15) </HTML> Mitä seuraavaksi? Kun olet siirtynyt riville, jossa virhe on, pitää sinun päättää mitä pitäisi tehdä virheen korjaamiseksi. Yleensä virhe on syntaksivirhe eli olet tehnyt kirjoitusvirheen tai tehnyt kielletyn rivinvaihdon jne. Syntaksi virheen korjaus on yleensä melko helppoa, korjaat vain kirjoitus virheen (esim. muutat pienen kirjaimen isoksi). Jos kyseessä on ajonaikainen virhe, niin virheilmoituksen osoittama virheellinen rivi on rivi, joka ei loogisesti seuraa järjestystä. Esim. kutsut painiketta vaikka komento itse asiassa kutsuisi tekstilaatikkoa. Useat virheet Joskus saat useita virheilmoituksia peräjälkeen siten, että sinulla on esim. 18 virheilmoitusikkunaa päällekkäin. Älä hätäänny, usein on niin, että scriptissä ei ole kuin yksi virhe ja se aiheuttaa muut virheet. Virheilmoitusikkunat ilmestyvät siten, että viimeinen virheilmoitus on päällimmäisenä. Aloita virheen korjaus alimmaisesta eli ensimmäisestä virheikkunasta. Korjaa yksi virhe kerrallaan ja aja scripti tämän jälkeen uudestaan. Voi olla, että sinun ei tarvitse korjata kuin yksi tai kaksi virhettä ja kaikki 18 virheilmoitusta häviävät. 7/7 Juha-Pekka Ruuska