Kirjautuminen

Haku

Tehtävät

Opasarkisto: JavaScript-perusopas: Osa 3 - Tapahtumankäsittelijät ja informaatioikkunat

  1. Osa 1 - Perusteet
  2. Osa 2 - Muuttujat ja taulukot
  3. Osa 3 - Tapahtumankäsittelijät ja informaatioikkunat
  4. Osa 4 - Komentorakenteet
  5. Osa 5 - Funktiot
  6. Osa 6 - Lomakkeiden käsittely
  7. Osa 7 - Merkkijonojen käsittely
  8. Osa 8 - Ominaisuudet
  9. Osa 9 - Matemaattiset laskutoimitukset
  10. Osa 10 - Olio-ohjelmointi
  11. Osa 11 - Käytännön sovelluksia

Kirjoittaja: MikaBug. Vuosi: 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.

Tapahtumankäsittelijät

Seuraavassa on lueteltu eri tapahtumankäsittelijät ja mikä tapahtuma ne aktivoi.

TAPAHTUMANKÄSITTELIJÄTAPAHTUMA
onloadSivun latautuminen selaimeen
onunloadSivulta poistuminen
onabortKuvan latautumisen keskeyttäminen
onblurKursorin poistuminen lomakekentästä
onchangeMuutos lomakkeen kentässä
onfocusLomakkeen kentän valinta
onselectTekstin valitseminen (maalaaminen) kentässä
onsubmitLomakkeen tietojen lähettäminen
onresetLomakkeen tyhjentäminen
onkeydownNäppäin alhaalla
onkeypressNäppäimen painaminen
onkeyupNäppäimen vapauttaminen
onclickHiiren klikkaus elementin päällä
ondblclickHiiren kaksoisklikkaus elementin päällä
onmousedownHiiren painike alhaalla
onmousemoveHiiri liikkuu elementin päällä
onmouseoutHiiren siirtyminen pois elementin päältä
onmouseoverHiiren siirtyminen elementin päälle
onmouseupHiiren 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ä.

Viesti-ikkuna

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.

Kysymysikkuna

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

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.

Yhteenveto

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.


Kommentit

Olli [12.08.2007 12:35:53]

Lainaa #

<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.

MikaBug [12.08.2007 12:41:19]

Lainaa #

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.

Merri [13.08.2007 10:51:11]

Lainaa #

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';
		};
	}
};

Väpä [15.08.2007 21:00:55]

Lainaa #

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!’)" />

Merri [16.08.2007 18:16:55]

Lainaa #

= merkkien ympärillä ei pitäisi olla välilyöntejä.

T.M. [18.08.2007 11:09:54]

Lainaa #

Ei se noista välilyönneistä johdu, vaan ’ merkeistä, jotka pitäisi olla ' merkkejä.

MikaBug [18.08.2007 14:53:35]

Lainaa #

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.

Merri [20.08.2007 13:25:59]

Lainaa #

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.

tumik [24.04.2008 00:20:21]

Lainaa #

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.

Roni L [28.05.2008 19:57:58]

Lainaa #

Miten saisin tuossa tapahtumakäsittelijä esimerkissä kuvan muutettua tekstiksi ja kun hiiren vie päälle ei tulisi alerttia vaan teksti vaihtuisi johonkin muuhun.

Metabolix [23.04.2009 10:54:54]

Lainaa #

<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.

ErroR++ [18.04.2011 15:10:25]

Lainaa #

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

Kirjoita kommentti

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.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta