JavaScript-ohjelmointi

Mikä ihmeen JavaScript?

JavaScript on Netscape Communicationsin kehittämä ohjelmointikieli, jota käytetään pääasiassa www-sivuilla. JavaScriptillä voidaan tehdä www-sivuja, jotka reagoivat käyttäjän toimenpiteisiin, kuten hiiren klikkauksiin tai näppäimistön syötteeseen. JavaScriptillä voidaan siis ohjelmoida erilaisia toimintoja, jotka nettiselain suorittaa, kuten tämänhetkisen päivämäärän näyttäminen sivulla tai lomakkeen kentän arvon tarkastamisen.

Kokeile esimerkiksi MVnetin hakukenttää sivun oikeassa laidassa. Älä täytä hakukenttään mitään, vaan paina haku-painiketta, jolloin selain ilmoittaa, että hakukenttään pitää kirjoittaa jotain, jotta haku voidaan suorittaa. Tämä on tehty JavaScriptillä.

JavaScript-ohjelmointikieli perustuu melko löyhästi C-ohjelmointikieleen. Toisin kuin joskus luullaan, JavaScriptillä ei ole juuri mitään tekemistä Java-ohjelmointikielen kanssa, vaikka niiden syntaksi näyttääkin hieman samalta. Jotta osaisit kirjoittaa JavaScript-koodia, täytyy sinulla olla jonkinlainen perusosaaminen ohjelmointikielistä.

Ohjelmointikielenä JavaScript on kuitenkin suhteellisen yksinkertainen eikä sen kanssa työskentelyyn tarvita mitään erikoista sovellusta. Tavallinen tekstieditori riittää. Suositeltavaa on kuitenkin, että tekstieditori olisi sellainen, joka osaa värjätä koodin. Windowsin muistiota ei kannata ohjelmointiin käyttää, vaan esim. Notepad++ ajaa asian paljon paremmin. JavaScript-koodit joko kirjoitetaan suoraan HTML-dokumenttiin tai sitten erilliseen tiedostoon, joka linkitetään HTML-dokumenttiin.

Jotkut käyttävät JavaScriptiä ehkä tietämättään ärsyttävien efektien tekoon, jotka saattavat vaikuttaa aluksi hienoilta. Tällaisia ärsyttäviä efektejä ovat mm. ponnahdusikkunat ja selaimen otsikkopalkissa vierivä teksti. JavaScript-koodia ei kannata käyttää, jos sille ei ole todellista syytä. Hyvä syy on esimerkiksi lomakkeen kenttien tarkastaminen.

Koska JavaScript-koodit ajetaan nettisivua selaavan käyttäjän selaimessa, koituu tästä ongelmia. Nettiselaimesta kun voi laittaa päälle ominaisuuden, että JavaScriptiä ei suoriteta ollenkaan. Siksi esimerkiksi navigaatiomenua ei voi tehdä pelkästään JavaScriptillä, koska silloin ne kävijät, jotka ovat poistaneet JavaScriptin käytöstä, eivät voisi käyttää navigaatiomenua lainkaan.

JavaScript-ohjelmoinnista ei tässä artikkelissa tämän enempää kerrota, koska netissä on valmiita hyviä oppaita JavaScriptin opetteluun. Tässä oppaassa keskitytään seuraavaksi antamaan esimerkkejä, mihin JavaScript-ohjelmointikieltä voi käyttää. Netti on myös pullollaan muita enemmän tai vähemmän hyödyllisiä JavaScript-esimerkkejä. Kaikkea ei kannata sivuille tunkea, mutta joistain voi olla hyötyäkin.

Paljon lisätietoa JavaScriptistä löytyy mm. seuraavista linkeistä. Osa on suomenkielistä materiaalia ja osa englanninkielistä.

• Jukka Korpelan Web-julkaisemisen opas (suomeksi)
• Ohjelmoinnin perusteet JavaScriptillä (suomeksi)
• 2Kmediat.com JavaScript opas (suomeksi)
• W3 Schools JavaScript Tutorial (englanniksi)
• W3Schools JavaScript Reference (englanniksi)
• Tizag.com JavaScript Tutorial (englanniksi)

Palautelomakkeen kenttien tarkistus

Yleensä nettisivulla on jonkinlainen palautelomake, jonka kautta voi sivun ylläpitoon ottaa yhteyttä. Lomake lähettää yleensä automaattisesti palauteviestin ylläpitäjän sähköpostiin. Kun käyttää palautelomakkeen kenttien tarkistusta, välttyy siltä, ettei joku lähetä kiusausmielessä tyhjiä lomakkeita sinulle ja näin täytä tyhjillä viesteillä koko sähköpostilaatikkoasi. Lomakkeen tarkistuksella vältytään myös siltä, ettei kukaan vahingossa tyhjennä jo täyttämiään tietoja. Käyttämällä JavaScriptiä lomakkeiden kenttien tarkistus on suhteellisen helppoa.

Huomaa kuitenkin, että lomakkeen kenttien tarkistus ei toimi, jos lomakkeen lähettäjä on ottanut selaimestaan JavaScript-koodin suorittamisen pois päältä. Tällöin lomakkeen tarkistamiseen kannattaa käyttää esim. PHP-koodia, jos mahdollista. Parasta olisi käyttää niin JavaScript-koodia kuin PHP-koodia lomakkeen kenttien tarkistamiseen.

Huom! Helpointa ottaa käyttöön palautelomakkeessa kenttien tarkistus on käyttää MVnetin tarjoamaa palautelomaketta, joka tarkistaa palautelomakkeen kentät niin PHP:n kuin JavaScriptin avulla.

Usein on myös hyvä rajoittaa palautelomakkeen kautta lähetettävän palautetekstin pituutta. Joku voi ilkeyttään lähettää palautelomakkeen kautta niin paljon tekstiä, että palautelomakkeen lähettämä palauteviesti tukkii ylläpitäjän sähköpostin. Yksirivisten kenttien maksimipituuden voi helposti määrätä maxlength-määreellä. Seuraavassa on yksirivinen palautelomakkeen kenttä nimeltä Testikentta. Kentän pituus on 20 merkkiä ja siihen voi kirjoittaa maksimissaan 30 merkkiä tekstiä.

Kenttä luodaan koodilla: <input name="Testikentta" size="20" maxlength="30" >

Ja edellä mainittu koodi näyttää selaimessa tältä:

Yleensä palautelomakkeessa on kuitenkin myös vähintään yksi monirivinen tekstikenttä, johon kirjoitetaan varsinainen palaute. Monirivisen tekstikentän maksimipituuden määrittäminen ei olekaan yhtä helppoa kuin yksirivisen tapauksessa. Se ei onnistu maxlength-määreellä. Monirivisen tekstikentän merkkien määrä kannattaakin tarkastaa JavaScriptin avulla sekä myös PHP-koodin avulla, jos mahdollista.

Mutta PHP-koodin käytössä on se huono puoli, että tekstikentän merkkien määrä tarkistetaan vasta palvelimella, kun lomake on jo lähetetty. Jos joku kirjoittaa pitkän ja asiallisen palautteen, jonka merkkimäärä ylittääkin palautelomakkeen tekstikentälle määritellyn maksimipituuden, ilmoittaa nettiselain vasta lomakkeen lähettämisen jälkeen, että palauteteksti on liian pitkä ja pyytää lähettäjää lyhentämään palautetta. Lomakkeen täyttäjä joutuisi nyt palaamaan selaimellaan takaisin sille sivulle, jossa lomaketta täytti ja lyhentämään palautettaan.

Moni ei kuitenkaan viitsi alkaa lyhennellä palautettaan tai lähettämään sitä useammassa osassa ja näin jättää koko palautteen lopulta lähettämättä. Jotkut nettiselaimet ovat jopa niin typeriä, että kun käyttäjä painaa takaisin-nappulaa, ovatkin lomakkeen tekstikentät tyhjentyneet. Tästä lomakkeen täyttäjä ei varmasti riemastu, kun äsken kirjoitettu palaute onkin pyyhkiytynyt pois. Siksi olisikin aina tärkeää ilmoittaa palautelomakkeessa, jos tekstikentän merkkimäärää on rajoitettu ja mikä on tämä rajoitus.

Mutta mistä lomakkeen täyttäjä tietää, montako merkkiä on kirjoittanut? Eipä juuri mistään. Palautelomakkeen teksti pitäisi ensin liittää esim. johonkin tekstinkäsittely-ohjelmaan ja katsoa sieltä montako merkkiä tekstissä on. Ei kovin käytännöllistä. Siksi olisikin hyvä, että lomakkeen täyttäjä näkisi lomaketta täyttäessään koko ajan, montako merkkiä hän voi vielä palautteeseen kirjoittaa. Näin hän osaa myös helposti säännellä palautteensa pituutta. Eli hänen ei tarvitse jälkeenpäin alkaa lyhentää palautettaan, koska tietää koko ajan, kuinka monta merkkiä palautelomakkeen kenttään voi vielä kirjoittaa. Tämä jäljellä olevien merkkien määrän näyttäminen reaaliajassa onnistuu helposti JavaScriptillä.

Monirivinen tekstikenttähän luodaan seuraavanlaisella koodipätkällä:
<textarea name="Teksti" cols="50" rows="5"></textarea>

Joka näyttää selaimessa tältä:

Jotta palautelomakkeessa näkyisi, montako merkkiä moniriviseen tekstikenttään (jonka merkkimäärää on siis rajoitettu) voi vielä kirjoittaa, pitää tekstikentän koodia hieman muuttaa. Tekstikentän ensimmäiseen textarea-tagiin lisätään neljä määrettä (onFocus, onKeyDown, onKeyUp ja onBlur). Muuta siis tekstikentän koodi alla olevaksi. Lisätyt kohdan on paksunnettu.

<textarea name="Teksti" cols="50" rows="5" onFocus="return Tarkistamerkit(this.form)" onKeyDown="return Tarkistamerkit(this.form)" onKeyUp="return Tarkistamerkit(this.form)" onBlur="return Tarkistamerkit(this.form)"></textarea>

Nyt siis nettiselain suorittaa aina Tarkistamerkit-nimisen JavaScript-funktion aina kun tekstikenttää klikataan hiirellä tai sen sisältöä muutetaan. Tämä Tarkistamerkit-funktio huolehtii jäljellä olevien merkkien näyttämisestä lomakkeen täyttäjälle. Jäljellä olevat merkitä näytetään lomakkeen täyttäjälle tätä varten luodussa yksirivisessä lomakkeen kentässä, jonka oletusarvona on monirivisen tekstikentän maksimimerkkimäärä. Tarkistamerkit-funktio päivittää tämän yksirivisen tekstikentän arvoa vastaamaan jäljellä olevien merkkien määrää.

Tekstikentän koodin muuttamisen lisäksi täytyy tehdä varsinainen lomakkeen kenttien tarkistus-skripti JavaScriptillä. Alla olevassa taulukoidussa lomakkeen tarkistus-skriptissä (harmahtavalla pohjalla) oranssilla tekstillä olevat skriptin-pätkät ovat kommentteja, jotka eivät sinällään vaikuta skriptin toimintaan vaan ne parantavat vain koodin hahmottamista. Ne voi ottaa pois, jos ei mielestään niitä tarvitse. Vihreällä olevat tekstit ovat lomakkeen kenttien nimiä, vertaa esimerkiksi seuraava lomakkeen yksirivinen kenttä, jonka nimi on siis "Etunimi":

<input name="Etunimi" size="20" maxlength="30">

Jos kenttien nimet ovat erilaisia omassa lomakkeessasi kuin tässä esimerkissä, muuta tarkistus-koodista kaikki samannimiset vihreät tekstit haluamasi nimisiksi. Nimet eivät saa sisältä ä-,ö-,ü- tai å-kirjaimia, eikä myöskään mitään erikoismerkkejä, kuten pistettä. Muista huomioida myös isot ja pienet kirjaimet.

Harmaalla kirjoitetut tekstit ovat ilmoituksia, jotka tulevat ruutuun, jos joku yrittää lähettää lomaketta täyttämättä kyseistä kenttää tai kentän merkkimäärä on liian suuri. Lomakkeen tarkistus-skripti jakautuu oikeastaan kolmeen osaan, joista jokainen osa alkaa sanalla function. Ensimmäinen osa tarkistaa lomakkeen kenttien tyhjennyksen ja toinen sen, mitä kenttiä lomakkeesta ei ole täytetty. Kolmas osa huolehtii monirivisen tekstikentän "Merkkejä jäljellä" määrän näyttämisestä lomakkeen täyttäjälle.

Jotta lomakkeen tarkistus-skripti toimisi, sinun täytyy laittaa lomakkeesi <form> -tagiin tietyt koodi-pätkät (katso alla olevat paksunnetut tekstit), jonka jälkeen lomakkeesi alun lähdekoodi pitäisi näyttää suunnilleen seuraavalta:

<form method="post" action="http://www.--laitaosoite--.com" onSubmit="return Laheta(this)" onReset="return Tyhjennys(this)" >

Voit liittää alla olevan lomakkeen tarkistus-skriptin (harmahtavalla pohjalla) suoraan samaan html-tiedostoon kuin johon aiot palautelomakkeen tehdä. Tällöin sinun täytyy laittaa lomakkeen tarkistus-skripti <script type="text/javascript"> ja </script> -tagien väliin ja sijoittaa tämä taas html-dokumentin <head> ja </head> -tagien väliin. Voit myös tehdä erillisen JavaScript-tiedoston. Tällöin luo ensin uusi tyhjä tekstitiedosto (.txt-päätteinen) ja laita sen nimeksi scriptit.txt. Sitten liitä alla oleva tarkistus-skripti luomaasi tekstitiedostoon ja tallenna se. Sitten nimeä tekstitiedoston .txt -pääte .js -päätteeksi. Lopuksi laita html-tiedostosi <head>-tagien väliin seuraava koodipätkä:

<script type="text/javascript" src="scriptit.js"></script>

Huomaa, että luomasi tekstitiedosto (joka nyt on .js-päätteinen) pitää olla samassa kansiossa kuin html-tiedosto, johon liitit yllä olevan paksunnetun tekstin. Alla siis lomakkeen tarkistus-skripti selityksineen:

Voit kopioida yllä esitetyn lomakkeen tarkistus-skriptin kokonaisuudessaan alla olevasta tekstikentästä:

/*Tyhjennä lomake-tarkistus*/ function Tyhjennys(form) { var tyhj=form.value; if (!confirm("Haluatko varmasti tyhjentää kaikki kentät?")) { return false } } /*Lomakkeen kenttien varsinainen tarkistus*/ function Laheta(form) { var Etunimi=form.Etunimi.value; if(Etunimi.length<2) { alert("Et antanut etunimeäsi!"); form.Etunimi.focus(); return false; } var Sukunimi=form.Sukunimi.value; if(Sukunimi.length<3) { alert("Et antanut sukunimeäsi!"); form.Sukunimi.focus(); return false; } if(form.Email.value.indexOf('@', 0) == -1) { alert("Et antanut sähköpostiosoitettasi tai se on virheellinen!"); form.Email.focus(); return false; } var Teksti=form.Teksti.value; if(Teksti.length<10) { alert("Et kirjoittanut palautteeseesi mitään tekstiä! (min. 10 merkkiä)"); form.Teksti.focus(); return false; } if(Teksti.length>1000) { alert("Palaute-tekstin pituus on rajattu 1000 merkkiin!"); form.Teksti.focus(); return false; } /*Radio-painikkeiden tarkistus*/ var intVastaus=-1; for (var i=0; i < form.Vastaus.length;i++) { if (form.Vastaus[i].checked==true) { intVastaus=i; } } /*Huomautus, jos radio-painikkeita ei ole valittu*/ if(intVastaus==-1){ alert("Et valinnut vastataanko palautteeseesi!"); return false; } /*Varmistus-koodin tarkistus*/ var koodi=form.koodi.value; if(koodi!="292KBX47J6") { alert("Et kirjoittanut tarkistus-koodia oikein!"); form.koodi.focus(); return false; } } /*Tekstikentän pituuden tarkistaminen ja näyttäminen*/ function Tarkistamerkit(form) { var maxpituus=1000; var Teksti=form.Teksti.value; var Merkkejayhteensa=Teksti.length; form.Merkkejajaljella.value = maxpituus - Merkkejayhteensa; }

Alla on esitetty esimerkki siitä, miten lomakkeen tarkistus hoituu käytännössä yllä esitetyn ohjeen mukaisesti (älä kiinnitä huomiota lomakkeen taustaväriin - se on määritelty CSS:llä, joka ei ole oleellinen tämän asian kannalta) Huom! Lomaketta ei tässä esimerkissä lähetetä mihinkään oikeaan osoitteeseen (selain valittaa, että virheellinen sivu tms.). Tämän lomakkeen on tarkoitus toimia vain esimerkkinä. Katso tämän sivun lähdekoodia, jos haluat tietää tarkemmin, millaista koodia palautelomakkeen teossa on käytetty. Voit kopioida lomakkeen lähdekoodin itsellesi ja muokata sitä omaan käyttöösi. Jos kiinnostaa, niin kannattanee katsoa myös MVnetin Palaute-sivun lomakkeen lähdekoodia - siitä voi oppia jotain.

Etunimesi:
Sukunimesi:
Sähköpostiosoitteesi:
Kirjoita palautteesi:	Huom! Palautetekstin pituus on rajattu maksimissaan 1000 merkkiin. Merkkejä jäljellä palautteessasi:
Valitse näistä toinen:	Haluan, että palautteeseeni vastataan. Halua, että palautteeseeni EI vastata.
Kirjoita oikealla oleva tarkistus-koodi tähän:

Seuraava sivu (PHP-ohjelmointi) >> << Edellinen sivu (Ilmaiset palvelut)