Kirjoittaja: MikaBug (2007).
⚠ Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi. ⚠
Tapahtumankäsittelijät ovat tärkeä ja keskeinen osa JavaScriptiä. Tapahtumankäsittelijöitä on useita erilaisia, esimerkiksi hiiren vieminen kuvan päälle tai painikkeen klikkaaminen saa aikaan tapahtuman. Tapahtuma voi olla vaikkapa funktion suorittaminen. Funktio puolestaan avaa uuden ikkunan, tarkistaa lomakkeen tiedot tai vaihtaa sivun taustaväriä. Funktio-käsite tulee tutuksi seuraavissa oppaissa.
HTML:ssä tapahtumankäsittelijöiden nimet kirjoitetaan yleensä siten, että tapahtuman ilmaiseva osa alkaa isolla kirjaimella: onClick. Sen sijaan XHTML-kielessä käytetään vain pieniä kirjaimia: onclick.
Seuraavassa on lueteltu eri tapahtumankäsittelijät ja mikä tapahtuma ne aktivoi.
| TAPAHTUMANKÄSITTELIJÄ | TAPAHTUMA |
|---|---|
| onload | Sivun latautuminen selaimeen |
| onunload | Sivulta poistuminen |
| onabort | Kuvan latautumisen keskeyttäminen |
| onblur | Kursorin poistuminen lomakekentästä |
| onchange | Muutos lomakkeen kentässä |
| onfocus | Lomakkeen kentän valinta |
| onselect | Tekstin valitseminen (maalaaminen) kentässä |
| onsubmit | Lomakkeen tietojen lähettäminen |
| onreset | Lomakkeen tyhjentäminen |
| onkeydown | Näppäin alhaalla |
| onkeypress | Näppäimen painaminen |
| onkeyup | Näppäimen vapauttaminen |
| onclick | Hiiren klikkaus elementin päällä |
| ondblclick | Hiiren kaksoisklikkaus elementin päällä |
| onmousedown | Hiiren painike alhaalla |
| onmousemove | Hiiri liikkuu elementin päällä |
| onmouseout | Hiiren siirtyminen pois elementin päältä |
| onmouseover | Hiiren siirtyminen elementin päälle |
| onmouseup | Hiiren painikkeen vapautuminen elementin päällä |
Alla on muutama esimerkki, kuinka tapahtumankäsittelijöitä käytännössä käytetään. Esimerkeissä on käytetty funktion kutsua, joka opetetaan opassarjan myöhemmissä osissa.
<body onload="Tervetuloa()">
<input type="button" value="Nappi" onclick="Tarkista()" />
<img src="kuva.jpg" onmouseover="alert('Hei!')" />Ensimmäisellä rivillä määritellään body-elementtiin onload-tapahtumankäsittelijä, joka aloittaa Tervetuloa-funktion suorittamisen, kun sivu latautuu selaimeen. Toisella rivillä on luotu lomakkeeseen tavallinen painike, johon lisätty onclick-tapahtumankäsittelijä kutsuu Tarkista-funktiota, kun nappia klikataan hiirellä.
Kolmannella rivillä on jälleen tavallinen HTML-tagi, jolla lisätään kuva sivulle. img-tagiin lisätty onmouseover-käsittelijä saa aikaan tapahtuman, kun hiiri viedään kuvan päälle. Tällä kertaa tapahtuma on pienen viesti-ikkunan ilmestyminen ruudulle, jossa lukee heittomerkeissä annettu teksti. Pieniä toimintoja varten ei siis tarvitse välttämättä tehdä omaa funktiota, mutta vähänkin pidemmät toimenpiteet kannattaa kirjoittaa omaan funktioon, jota kutsuu tarvittaessa tapahtumankäsittelijän kautta.
On huomattava, että tapahtumankäsittelijöitä voi kirjoittaa aivan tavallisen HTML-koodin sekaan. Ne eivät siis vaadi <script></script>-tageja ympärilleen. Jos haluat saman tapahtuman kutsuvan useampaa toimintoa yhtä aikaa, voit määritellä ne koodiin näin:
<img src="kuva.jpg" onmouseover="Tarkista()", onmouseover="alert('Tarkistetaan lomake')" />Eli kaksi onmouseover-tapahtumankäsittelijää erotetaan toisistaan pilkulla (,), jolloin ne suoritetaan yhtä aikaa.
Tapahtumankäsittelijät ja niiden käyttö tulevat kyllä tutuiksi opassarjan edetessä.
Edellä mainittu viesti-ikkuna on pieni ikkuna, joka voidaan näyttää käyttäjälle ja kertoa näin hänelle esimerkiksi puutteellisesti täytetystä lomakkeesta. Viesti-ikkunassa on vain OK-painike, joka sulkee ikkunan. Seuraava yksinkertainen esimerkkikoodi näyttää käyttäjälle viesti-ikkunassa huomautuksen.
<script type="text/javascript">
alert("Lomakkeen kaikki kentät on täytettävä!");
</script>Sulkuihin tulee ikkunaan tulostettava teksti lainaus- tai heittomerkeissä.
Ikkuna ponnahtaa näyttöön heti, kun sivun avaa selaimeen. Huomattavasti järkevämmän käyttötarkoituksen sille saa luomalla funktion, joka tarkistaa, onko lomakkeen kaikki kentät täytetty, ja näyttää käyttäjälle yllä olevan viestin, jos ei ole.
Kysymysikkunassa on tekstikenttä, johon käyttäjä voi kirjoittaa, sekä OK- ja Cancel (Peruuta)-painikkeet. Käyttäjän antamaa syötettä voidaan käyttää hyväksi myöhemmin skriptissä. Seuraavassa esimerkissä kysytään käyttäjän nimi ja tulostetaan se selaimeen.
<script type="text/javascript">
var nimi = prompt("Ole hyvä ja anna etunimesi", "Kirjoita nimesi tähän");
document.write("Tervetuloa sivuille " + nimi + "!");
</script>prompt-metodille annetaan kaksi parametria lainausmerkeissä. Ensimmäinen on teksti (kehote), joka näkyy ikkunan harmaalla taustalla ja pyytää käyttäjää kirjoittamaan tekstikenttään jotain. Toinen parametri on tekstikentässä oletuksena näkyvä teksti. Tämän voi jättää halutessa tyhjäksi kirjoittamalla toiseksi parametriksi "". Parametrit erotetaan toisistaan pilkulla (,).
Kun käyttäjä napsauttaa OK-painiketta, ikkuna sulkeutuu ja prompt-metodi palauttaa tekstikenttään kirjoitetun arvon skriptille. Tämä arvo sijoitetaan muuttujaan nimi. Lopuksi se tulostetaan sivulle lauseella document.write("Tervetuloa sivuille " + nimi + "!");.
Jos kysymysikkunassa napsautetaan Cancel (Peruuta)-painiketta, palautuu skriptille arvo null. Tämä tarkoittaa, ettei muuttujalla ole arvoa eikä siis myöskään tyyppiä. Myöhemmin opittavia asioita soveltaen voidaan tarkastaa, mikäli näin käy, ja tulostaa käyttäjälle toisenlainen teksti selaimeen.
Varmistusikkuna on kuin viesti-ikkuna, mutta siinä on OK-painikkeen lisäksi Cancel (Peruuta)-painike. Tässä ikkunassa käyttäjä voi siis tehdä valinnan, jonka mukaan koodin suoritus jatkuu. Seuraavassa esimerkissä on käytetty if-ehtolausetta, vaikka se esitellään tarkemmin vasta seuraavassa oppaassa.
<script type="text/javascript">
var valinta;
valinta = confirm("Haluatko jatkaa eteenpäin?");
if(valinta)
document.write("Päätit jatkaa");
else
document.write("Jäädään sitten tähän");
</script>Ensin määritellään uusi muuttuja valinta, johon sijoitetaan confirm-metodin paluuarvo. Jos käyttäjä napsauttaa OK-painiketta, on paluuarvo tosi (nollasta poikkeava arvo), ja mikäli käyttäjä klikkaa Cancel-painiketta, on paluuarvo epätosi (nolla). confirm-metodin parametri on ikkunaan tulostuva teksti lainausmerkeissä.
Lopuksi tulostetaan selaimeen sopiva teksti sen mukaan, onko paluuarvo tosi vai epätosi. Tämä tapahtuu if-lauseen muodostamalla vertailulla, johon palataan tarkemmin seuraavassa oppaassa.
Tapahtumankäsittelijät ovat tärkeä osa JavaScript-ohjelmointia, koska hyvin usein eri funktioita kutsutaan juuri näiden tapahtumankäsittelijöiden kautta. Kaikkia ei tarvitse oppia kerralla ulkoa, ja siksi onkin hyvä palata tähän oppaaseen myöhemmin, kun esimerkiksi haluaa ohjelmoida näppäimen painallukseen reagoivan funktion, mutta ei muista, millä tapahtumankäsittelijällä se onnistuikaan. Myös esimerkiksi viesti-ikkunalle keksii varmasti hyviä käyttökohteita, vaikkapa käyttäjän huomautus väärin täytetystä lomakkeesta. Viesti-ikkunaa on näppärä käyttää myös omien skriptien testaamiseen, siihen on kätevä tulostaa esimerkiksi funktion paluuarvo.
<script type = "text/javascript">
var valinta;
valinta = confirm("Haluatko jatkaa eteenpäin?");
if(valinta)
document.write("Päätit jatkaa");
else
document.write("Jäädään sitten tähän");
</script>Tietääkseni tässä pätkässä ei tarvitse alustaa muuttujaa valinta(?)
Eikö sen voisi tehdä
valinta = confirm('pöö');ilman että
valinta;
valinta = confirm('pöö');Saatan olla väärässäkin.
Voi toki tehdä näinkin, eli käytännössä rivi "var valinta;" on turha. Se on lähinnä makuasia, koska muuttujanhan voi alustaa (eli asettaa alkuarvon) samalla kun muuttuja luodaan. Jos "var valinta"-rivin jättää pois, kannattaa komento var kuitenkin laittaa confirm-riville:
var valinta = confirm("Haluatko jatkaa eteenpäin?");
Vaikka JavaScriptissä pystyy muuttujan määrittelemään ilman var-sanaakin, kannattaa se hyvien koodaustapojen mukaisesti olla mukana.
Nykyään suositaan tapaa lisätä tapahtumakäsittelijät erillisen skriptin kautta, koska se tekee sivun HTML:stä paljon siistimpää ja hallittavampaa, varsinkin useamman miehen projekteissa. Tämä onnistuu seuraavaan tyyliin:
HTML:
<div id="testi">Möh</div>
JavaScriptin liittäminen sivulle sivun alussa:
<script src="testi.js" type="text/javascript"></script>
testi.js tiedoston sisältö:
// laitetaan sivun onload-tapahtumaan oma funktio
window.onload = function(){
// koska sivu on nyt varmasti ladattu kokonaan,
// haetaan testi-elementti sivulta
var testi = document.getElementById('testi');
// varmistetaan että se löytyi
if(testi) {
// simppeli esimerkki:
// (normaalisti tämä pitäisi ehdottomasti tehdä CSS:llä!)
testi.onmouseover = function(){
this.style.color = 'red';
};
this.onmouseout = function(){
this.style.color = 'black';
};
}
};Mä en ainakaan oo saanu noita esimerkki skriptejä toimimaan en sitten millään. Kyllä mulla on javascript käytössä ja muilla nettisivuilla olevat javascriptit toimivat myös mutta ei vaan nuo... Jos html tiedoston tallentaa omalle koneelle ja avaa selaimessa ni tulee vaan ilmotus jotain tähän suuntaan että "tietosuojan edistämiseksi IE on estänyt ActiveX komponentin käytön". Siihen kun painaa että suorita ActiveX ni ei tapahu mitään.
Sitten jos lähettää sen tiedoston palvelimelle ni ei tuu activex höskää mut ei se scriptikää pelitä.. Esim tää ei toimi: <img src = "kuva.jpg" onmouseover = "alert(’Hei!’)" />
= merkkien ympärillä ei pitäisi olla välilyöntejä.
Ei se noista välilyönneistä johdu, vaan ’ merkeistä, jotka pitäisi olla ' merkkejä.
Eipä noilla väleilä pitäisi merkitystä olla. Monesti olen törmännyt skripteihin, joissa ei käytetä juuri lainkaan välejä. Itse tykkään kuitenkin huomattavasti enemmän väljemmästä koodista, joten kirjoitan esimerkiksi lauseen var luku=23; mieluummin var luku = 23;. Mutta tuossa edellä mainitussa skriptissä ongelmana ovat juuri nuo vääränlaiset lainausmerkit.
HTML:ssä ei saa olla välilyöntejä attribuuttien ja attribuuttien arvojen välillä. JavaScript on asia erikseen, siinä on järkevääkin olla ne välilyönnit.
Jos HTML:ssä on ne välit, mennään SGML-parserin virheenhallinnan kautta. Ja se voi antaa eri selaimilla mitä mielenkiintoisempia lopputuloksia.
okei ehkä turha tähän enään vastata, mutta jos jollakin sattuu olemaan sama ongelma niin voi johtua siitäkin että tuo img-tagi näyttää kuva.jpg nimisen kuvan, jota koneellasi ei luultavasti ole eli et näe mitään.
Miten saisin tuossa tapahtumakäsittelijä esimerkissä kuvan muutettua tekstiksi ja kun hiiren vie päälle ei tulisi alerttia vaan teksti vaihtuisi johonkin muuhun.
<img src="kuva.jpg" onmouseover="Tarkista()", onmouseover="alert('Tarkistetaan lomake')" />Tuollaista pilkkumerkintää ei ole olemassakaan. Ainakin Firefox3 ja IE6 suorittavat tuossa tilanteessa vain ensimmäisen funktion, jotkin toiset selaimet ehkä jälkimmäisen. Väitän, että mikään selain ei suorita molempia.
Oikea tapa usean toiminnon suorittamiseen on yhdistää ne jollain tavalla JS:n puolella. Esimerkiksi seuraava koodi toimisi:
<button onclick="alert('Klikkasit.'); alert('Oliko se sinusta hauskaa?')">Klikkaa!</button>Myöskään samanaikaista suoritusta ei JS:llä saa aikaan, vaan aina yksi asia suoritetaan ensin ja toinen vasta jälkeen.
Jaa-a,
<script type="text/javascript">
var luku = prompt("TESTI", "Anna luku:");
alert ("Annoit " + luku)
var valinta;
valinta = confirm("Haluatko jatkaa eteenpäin?");
if(valinta)
alert("ok");
document.write ("eikö hyppykäskyä ole olemassa?")
else
var luku = prompt("TESTI", "Anna luku:");
alert ("Annoit " + luku)
</script>kumma kun en ole missään vielä nähnyt hyppykäskyjä
enkä end ifffiä
oho yks äffä liikaa
Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.