Osa 2 – Nyt alkaa tapahtumaan

2.1 Tapahtumat

Kun klikkaat hiirellä tietokoneen näyttöä tai painat tietokoneen näppäimiä, saat aikaan tapahtuman. JavaScript-koodilla määritellään, mitä klikkauksesta tai näppäimen painamisesta tapahtuu.

2.2 Tapahtuma: Klikkaus

Jotta tiedetään, missä klikkaus tapahtuu, on HTML-elementit merkittävä id-tunnisteella. Luodaan siis tekstielementti ja annetaan sille id-tunnisteeksi teksti: <p id=teksti>Klikkaa minua.</p>. Id-tunniste määritetään tagien sisällä käyttämällä määrettä id= ja yhtäsuuruusmerkin oikealla puolella on tunniste, joka elementille asetetaan.

JavaScript-koodissa luodaan kuuntelija, joka odottaa, milloin id-tunnistettua elementtiä klikataan eli milloin tapahtuma tapahtuu. Kuuntelija luodaan määrittämällä skriptielementin sisällä tapahtumakäsittelijä:

<p id=teksti>
    Klikkaa minua.
</p>
<script>
    teksti.onclick = () => {
    }
</script>

Tapahtumakäsittelijä määritetään id-tunnistetulle elementille kirjoittamalla piste elementin id-tunnisteen jälkeen ja pisteen jälkeen kirjoitetaan avainsana onclick. Tällä avainsanalla saamme tietää, milloin id-tunnistettua elementtiä klikataan. Avainsanan jälkeen määritetään hieman kummallisen näköinen funktiokutsun = () => { }. Funktioihin tutustutaan lisään osassa 6, mutta ohitetaan ne nyt ja käytetään rakennetta osana tapahtumakäsittelijää. Tärkein osa tästä osasta on viimeiset aaltosulkeet { }. Niiden sisälle kirjoitetaan se koodi, joka suoritetaan, kun id-tunnistettua elementtiä klikataan. Esimerkiksi jos tekstin klikkaamisen jälkeen halutaan tulostaa käyttäjälle lause "Onnittelut, klikkasit oikeaa paikkaa.", kirjoitetaan se aaltosulkeiden sisälle:

<p id=teksti>
    Klikkaa minua.
</p>
<script>
    teksti.onclick = () => {
        alert("Onnittelut, klikkasit oikeaa paikkaa.")
    }
</script>

HTML-elementin tekstin vaihtaminen

Id-tunnistetun tekstielementin sisältö eli sitä, mitä tekstielementissä lukee vaihdetaan käyttämällä id-tunnistetun tekstielementin komentoa textContent.

Painike

Painike on HTML-elementti, jota usein on tarkoitus klikata. Painikkeen määrittelävä tagi on <button>. Ilman JavaScript-koodia painikkeen klikkaamisesta ei tapahdu mitään. Painikkeen klikkausta kuunnellaan samalla tavalla, kuin muidenkin HTML-elementtien klikkausta. Tämä tarkoittaa sitä, että painikkeelle annetaan id-tunniste ja tämän jälkeen tunnistetulle painikkeelle tehdään tapahtumakäsittelijä skriptielementtiin.

<button id=painike>
    Painike
</button>
<script>
    painike.onclick = () => {
        alert("Klikkasit painiketta.")
    }
</script>

2.3 Tapahtuma: Näppäin

Näppäimen painallusta kuunnellaan eri tavalla, kuin klikkaamista. Tämä johtuu siitä, että klikkaaminen kohdistuu tavallisesti johonkin elementtiin, mutta näppäimen painaminen ei yleensä liity mihinkään yksittäiseen elementtiin.

Luodaan ensin tekstielementti ja asetetaan sille id-tunniste, jolla tekstiä voidaan muuttaa, kun näppäintä painetaan.

<p id=teksti>
</p>

Lisätään skriptielementti ja kirjoitetaan sinne koko sivua kuunteleva tapahtumakäsittelijä:

<p id=teksti>
</p>
<script>
    document.onkeydown = event => {
    }
</script>

Tämä tapahtumakäsittelijä odottaa koko sivulla näppäimen painallusta, joten pisteen jälkeen tulee avainsana onkeydown. Tämän jälkeen teemme samantapaisen funktiokutsun, kuin klikkauksenkin tapauksessa, mutta lisäämme koodiin avainsanan event. Lopuksi aaltosulkeiden sisälle määritetään, mitä näppäimen painalluksessa tapahtuu. Määritetään, että näppäimen painalluksesta tekstielementin sisältöä muutetaan käyttämällä komentoa textContent.

<p id=teksti>
</p>
<script>
    document.onkeydown = event => {
        teksti.textContent = "Näppäintä painettiin."
    }
</script>

Tällä hetkellä mikä tahansa painike saa aikaan tapahtuman. Seuraavassa osassa opimme, miten voimme selvittää ehtojen avulla, mitä painiketta käyttäjä painoi.

Opitut komennot