JavaScript - "jonkin jälkeen tapahtuu.."

TAPAHTUMAT, events

Tapahtumaksi voidaan kutsua JavaSrciptillä toteutettuja:



Esimerkissä on yksinkertainen painike jonka teksti "huokuttelee" painamaan painiketta.


   <button onclick="document.getElementById('koe1').innerHTML = Date()">
     Anteeksi, paljonko kello on ?
   </button>

   <p id="koe1"></p>
   
   <p>Painike jonka teksti vaihtuu:</p>
   
   <button onclick="this.innerHTML=Date()">Paljonko kello on ?</button>
  

Tulos www-sivulla:

Painike jonka teksti vaihtuu:



HTML-sivun perustapahtumia

Joitakin tavallisia HTML-sivun tapahtumia:

Tapahtuma (määrite) Selite
onchange HTML-elementti on muuttunut tai vaihtunut Esimerkki
onclick Käyttäjä valitsee www-sivulla HTML-elementin Esimerkki
onmouseover Käyttäjä siirtää hiiren HTML-elementin päälle Esimerkki
onmouseout Käyttäjä siirtää hiiren pois HTMLelementin päältä Esimerkki
onkeydown Käyttäjä painaa painiketta
onload Selain on saanut ladattua sivun selaimeen loppuun

Lista www-sivuilla käytettävissä olevista tapahtumista niiden käsittelyistä on huomattavasti pidempi.


Hiiren painikkeet

Linkin sivulla on koottuna hiiren käyttämiseen liittyviä tapahtumia ("metodeita"), tapahtumaan esimerkeissä on liitetty jokin suoritettava funktio.

Hiiren eri painikkeilla voidaan funktio-kutsun avulla käynnistää jokin toiminta.
Esimerkeissä esitellään hiiren painikkeiden käyttämistä:


   <div style="color:red" onmousedown="hiiriPainike(event)">
     Klikkaa tätä tekstiä hiiren painikkeilla.
   </div>

   <script>
    function hiiriPainike(event) {
     if(event.button==0)
     {
       alert("Painoit hiiren vasenta painiketta")
     }
     if(event.button==1)
     {
       alert("Painoit hiiren keskellä olevan rullan painiketta")
     }
     if(event.button==2)
     {
       alert("Painoit hiiren oikeaa painiketta")
     }
    }
   </script>
  

Kokeile esimerkkiä, punainen teksti alla:

Klikkaa tätä tekstiä hiiren painikkeilla.


Painikkeen numero-arvo tutkitaan event.which -metodilla:


   <div onmousedown="mikaPainike(event)">Klikkaa hiiren painikkeilla tekstiä.
    <p> 1 = vasen painike </p>
    <p> 2 = keskimmäinen painike </p>
    <p> 3 = oikea painike </p>
   </div>

   <p><strong>Huom!:</strong> Tämä ei toimi IE8 ja aikeisemmissa versioissa.</p>

   <script>
    function mikaPainike(event) {
      alert("Painoit hiiren: " + event.which + " painiketta.")
    }
   </script>
  

Kokeile esimerkkiä:

Klikkaa hiiren painikkeilla tekstiä.

1 = vasen painike

2 = keskimmäinen painike

3 = oikea painike



Huom! Tämä ei toimi IE8 ja vanhemmissa versioissa.


Painettaessa hiiren oikeaa painiketta avautuu selaimen oma valikko, kun halutaan estää tämän valikon avautuminen on JS-koodaukseen lisättävä (sopivaan kohtaan) seuraava metodi:

document.addEventListener('contextmenu', event => event.preventDefault());

Edellinen liittyy tehtävään 1 (alla).



TEHTÄVÄ 1 Sovelletaan molempia yllä olevia esimerkkejä.

Hiiren painikkeita (event.button) tutkitaan ylemmässä esimerkissä if-lauseen avulla ja näytetään painiketta vastaava alert-ilmoitus www-sivulla.

Alemmassa esimerkissä, hiiren painikkeiden painallukset tuottaa numero-arvon joka näytetään alert-ilmoituksessa. Esimerkiksi kun painetaan hiiren vasenta painiketta eli,
jos event.button yhtäsuuri kuin 0, näytetään teksti:

Painoit hiiren 3 painiketta.

TEHTÄVÄ
1. Toteuta JS-koodaus joka vaihtaa tekstiä hiiren vasemmalla, keskimmäisellä ja oikealla painikkeella käyttäen if-lauseita ja event.which tai event.button -metodia.

Estä selaimen valikon näkyminen tämän tehtävän yllä puolella mainitulla metodilla.
2. Kun osan 1 toteutus toimii, tee laatikko jonka sisällä on hiiren painikkeilla vaihtuva teksti.
3. Etsi ratkaisu jolla vaihdetaan myös laatikon taustaväri samalla kuin tekstiä vaihdetaan.



TEHTÄVÄ 2 Laskun tulosten näyttäminen div-laatikossa

Hiiren painikkeiden tapahtumien esimerkit on koottuna yläpuolella sinisestä tekstistä avautuvalle sivulle taulukkoon.

1. Aiemmin oppaassa on tehtävissä toteutettu kolmen vastuksen sarja ja rinnan laskutoimitukset.
2. Toteuta aluksi ns box model eli CSS-muotoiluilla laatikko.
3. Toteuta laskutoimitusten tulosten näyttäminen box model laatikossa:
a) Kun painetaan hiiren vasenta painiketta, näytetään sarjakytkennän tulos
b) Kun painetaan ALT-painiketta ja hiiren vasenta yhtäaikaa, näytetään rinnankytkennän tulos

Muotoile "laatikko" ja siinä näytettävät tekstit CSS-muotoiluilla !!



JavaScript:in "tapahtumakäsittelijät"

Tapahtumakäsittelijöitä voidaan käsitellä ja tarkistaa käyttäjän www-sivulle kirjoittamia syötteitä, käyttäjän toimintaa www-sivulla ja selaimen toimintoja, esimerkkejä:

Tapahtumien käsittelemiseen JavaScript:ssä käytetään erilaisia metodeita ("menetelmiä"), esimerkkejä:

MERKKIJONOT JA NIIDEN KÄSITTELY

JavaScrit:llä voidaan käsitellä www-sivuille esitettävää sekä sivuilta käsiteltäväksi tulevaa tekstiä (string).

Esimerkissä sijoitetaan muuttujiin tekstiä ja muuttujien sisältö näytetään www-sivulle rivinvaihdolla erotettuna


   <p id="koe2"></p>

   <script>
    var autoMerkki = "Volvo XC60";
    var teksti = ' on citymaasturi.';

    document.getElementById("koe2").innerHTML =
     autoMerkki + "<br>" + teksti;
   </script>
  

Tulos www-sivulla:


Jos haluat tulostaa www-sivulle muuttujaan talletetun sanan molemmin puolin lainaus- tai heittomerkit, toimi näin:


var teksti1 = "Ja hän valitsi 'Jokerin'!";
var teksti2 = 'Hän ei valinnut "Tuplausta"!';


Muuttujien sisällön näyttö www-sivulla:

Ja hän valitsi 'Jokerin'!
Hän ei valinnut "Tuplausta"!


Merkkijonon pituus

Esimerkissä tutkitaan muuttujiin talletetun tekstin pituutta length-metodilla:


  <p id="koe3A"></p>
  <p id="koe3B"></p>

  <script>
   var teksti = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   var tutki = "Tässä lukee jonkin teksti jonka mitta tutkitaan.";
   document.getElementById("koe3A").innerHTML = teksti.length;
   document.getElementById("koe3B").innerHTML = tutki.length;
  </script>
  

JavaScript-osan tulos www-sivulla:


Erikoismerkkien käyttäminen tekstissä

Esimerkissä käytetään muuttujiin tallenetuissa teksteissä heitto- ja lainausmerkkejä:

 
  <p id="koe4"></p>

  <script>
    var eka = 'Jos\'vaik heittomerkkiä käytän.';
    var toka = "Termi \"DOM\" on lyhenne seuraavasta Document Object Model.";

    document.getElementById("koe4").innerHTML = eka + "<br>" + toka; 
  </script>
  

Tulos www-sivulla:

Joitain tekstiin liitettäviä merkkejä sekä ohjausmerkkejä:

Tapahtuma (määrite) Selite
\' Heitto merkki '
\" Lainnausmerkki "
\\ Kenoviiva \
\b Backspace, kursoria askel taaksepäin
\f Sivun syöttö
\r Rivin vaihto
\t Horisontaalinen tabulaattori, kursoria vaakasuuntaan eteenpäin
\v Vertikaalinen tabulaattori, kursoria pystysuuntaan alaspäin
\ Sivulle tulostettavaa tekstin voi koodissa katkaista eri riville, ei näy www-sivulla


TEKSTI METODIT

indexOf() ja lastIndexOf() metodit

Tekstiin liittyvillä metodeilla voidaan esimerkiksi etsiä haluttu sana tekstistä.

Esimerkissä pysyä-sana etsitään indexOf()-metodilla ja sitä-sanan viimeinen esiintymiskohta lastIndexOf()-metodilla:

 
  <p id="koe5"></p>
  <p id="koe5B"></p>

  <script>
    var sananparsi = "Ainoa tapa pysyä terveenä on syödä sitä mitä ei halua, 
	 ja juoda sitä mistä ei pidä";
    var paikka1 = sananparsi.indexOf("pysyä");
    var paikka2 = sananparsi.lastIndexOf("sitä");
	
    document.getElementById("koe5A").innerHTML = paikka1;
    document.getElementById("koe5B").innerHTML = paikka2;
  </script>
  

Tulos www-sivulla:



indexOf() metodi

Esimerkissä tutkitaan löytyykö sanat-muuttujassa sana -teksti kohdasta 29 alkaen.
Huomaa kohta 29 lasketaan tekstin alusta alkaen laskien kirjaimia sekä välilöyntejä.

 
  <p id="koe6"></p>

  <script>
    var sanat = "Tässä joku sana mutta toinen sana tässä.";
    var sijainti = sanat.indexOf("sana",29);
    document.getElementById("koe6").innerHTML = sijainti;
  </script>
  

Tulos www-sivulla:


search() metodi

Metodilla search() etsitään sulkeissa mainittua sanaa, tuloksena sanan alkukohta numerona.
Huomaa. Etsittävä sana voi sijaita myös muuttujassa, joilloin search(muuttujannimi)

 
  <p id="koe7"></p>

  <script>
   var etsi = "Tekstissä mainitaan Jussi ja etsitään kaveri.";
   var paikka = etsi.search("Jussi");
   document.getElementById("koe7").innerHTML = paikka;
  </script>
  

Tulos www-sivulla:


slice() metodi

Metodilla slice() etsitään sulkeissa numerolla tai numeroin ilmaistusta rajoista merkit (kirjaimet).
Esimerkissä:
Tunnisteella (id) koe8A etsitään muuttujaan sijoitetun tekstin alusta 17. merkin kohdalta tekstin loppuun asti merkit.
Tunnisteella (id) koe8B etsitään muuttujaan sijoitetun tekstin alusta 17. merkin kohdalta 26. merkkiin asti merkit.

Eli slice()-metodilla voidaan etsiä muuttujaan talletetusta tiedosta halutusta kohtaa merkkejä tai tekstiä.

 
  <p id="koe8A"></p>
  <p id="koe8B"></p>
  
  <script>
   var tutki = "Ei arka miäs saa kaunista akkaa";
   var tulosA = tutki.slice(17);
   var tulosB = tutki.slice(17,26);
   document.getElementById("koe8A").innerHTML = tulosA; 
   document.getElementById("koe8B").innerHTML = tulosB; 
  </script>
  

Tulos www-sivulla:


HUOM ! Merkkejä voidaan etsiä myös lopusta alkaen käyttäen miinusmerkkiä numeron tai numeroiden edessä. Esimerkiksi,
tutki.slice(-7); tutkisi merkit tekstin lopusta alkuun alkaen 7.merkin kohdalta.
tutki.slice(-7,-16); tutkisi merkit tekstin lopusta alkuun alkaen 7.merkin kohdalta lopettaen 16. merkin kohdalle.

substring() metodi

Samankaltainen metodi on substring(); jolla voidaan myös etsiä merkkijonosta halutusta kohtaa merkkejä. HUOM ! Tämä ei toimi negatiivilla arvoilla kuten slice !

substr() metodi

Metodissa substr() sulkeissa olevilla numeroilla määritetään,
1. numerolla kohta josta tekstia aletaan tutkimaan (eli lukemaan muuttujaan)
2. numerolla kuinka monta merkkiä luetaan muuttujaan.

Jos ensimmäinen numero on negatiivinen, tutkiminen alkaa merkkijonon lopusta laskien numeron ilmaisemasta kohdasta, toinen numero osoittaa kuinka monta merkkiä tutkitaan.

 
  <p id="koe9"></p>

  <script>
    var tutkittava = "Nitoja, Rei'ittäjä, Kopiokone";
    var tulos = tutkittava.substr(8,7);
    document.getElementById("koe9").innerHTML = tulos;
  </script>
  

Tulos www-sivulla:


replace() metodi

Metodilla replace() voidaan esimerkiksi korvata joku sana tai teksti jollain toisella sanalla tai tekstillä, siis eräänlainen etsi-korvaa toiminto.

Katso lisää esimerkkejä w3schools-sivustolta.


  <button onclick="vaihdaTeksti()"> Vaihda teksti </button>
  
  <p id="koe10"> Kulta on arvometalli ! </p>

  <script>
   function vaihdaTeksti() {
     var muokkaa = document.getElementById("koe10").innerHTML; 
     var vaihdettu = muokkaa.replace("arvometalli","oma rakas");
     document.getElementById("koe10").innerHTML = vaihdettu;
   }
  </script>
  

Tulos www-sivulla:

Kulta on arvometalli !

toUpperCase() ja toLowerCase() metodit

Metodilla toUpperCase() voidaan muuttaa pienillä kirjaimilla kirjoitettu teksti suurin kirjaimin kirjoitetuksi ja toUpperCase()-metodilla suuret pieniksi kirjaimiksi.


  <p id="koe11A"> Näkyykö tämä ? </p>
  
  <button onclick="pienetISOKSI()"> Heikosti.. </button>
  <button onclick="ISOtpieniksi()"> Älä huuda.. </button>
  
  <script>
   function pienetISOKSI() {
     var muutettava1 = document.getElementById("koe11A").innerHTML;
     document.getElementById("koe11A").innerHTML = muutettava1.toUpperCase();
   
   function ISOtpieniksi() {
     var muutettava1 = document.getElementById("koe11A").innerHTML;
     document.getElementById("koe11A").innerHTML = muutettava1.toLowerCase();
   }
  </script>
  

Tulos www-sivulla:

Näkyykö tämä ?



concat() metodi

Metodilla concat() voidaan liittää kahdessa muuttujassa olevat tiedot keskenään ja sijoittaa tulos kolmanteen muuttujaan.


  <p id="koe12"></p>
  
  <script>
   var teksti_A = "Johan se ";
   var teksti_B = "myrskyn lykkäs !";
   var teksti_C = teksti_A.concat(" ",teksti_B);
   document.getElementById("koe12").innerHTML = teksti_C;
  </script>
  

Tulos www-sivulla:

charAt() metodi

Metodilla chatAt() voidaan esimerkiksi poimia merkkijonosta numerolla osoitettavasta kohdasta kirjain tai merkki näytettävksi www-sivulla tai poimia toistolauseen avulla merkkejä merkkijonosta.


  <p id="koe13"></p>
  
  <script>
   var str = "Kuinka sujuu ?";
   document.getElementById("koe13").innerHTML = 
    str.charAt(0) + " " + str.charAt(7);
  </script>
  

Tulos www-sivulla:


charCodeAt() metodi

Metodilla charCodeAt voidaan selvittää merkkijonosta tietystä kohtaa merkin Unicode (ascii-koodi?). Sijoittamalla metodi toistolauseeseen on mahdollista selvittää koko merkkijonon Unikoodit yhden tietyn sijaan.


  <p id="koe14A"></p>
  <p id="koe14B"></p>
  
  <script>
    var merkkijono = "Aurinkoista Aamua.";
    var merkki = merkkijono.charCodeAt(12);
    document.getElementById("koe14A").innerHTML = merkkijono.charCodeAt(0);
    document.getElementById("koe14B").innerHTML = merkki;
  </script>
  

Tulos www-sivulla:


split() metodi

Metodilla split voidaan määritellä merkki jonka jälkeen merkkijonosta numerolla osoitetusta paikasta poimitaan merkki. Esimerkissä merkkijono sisältää kirjaimia ja pilkkuja.



  <button onclick="poimiMerkki()"> Poimi kirjain </button>
  
  <p id="koe15A"></p>
  
  <script>
   function poimiMerkki() {
    var merkit = "P,i,l,v,i,s,t,ä";
    var pilkku = merkit.split(",");
    document.getElementById("koe15A").innerHTML = pilkku[3];
   }
  </script>
  

Tulos www-sivulla:


Esimerkissä merkkijonosta poimitaan tyhjät merkit ja tulostetaan merkkijono eri suuntaan.



  <p id="koe15B"></p>
  
  <script>
   var merkit = "PILVISTÄ";
   var vali = merkit.split("");
   var uusiteksti = "";
   var i;
   for (i = 0; i < vali.length; i++) {
     uusiteksti += vali[i] + "<br>"
   }
   document.getElementById("koe15B").innerHTML = uusiteksti;
  </script>
  

Tulos www-sivulla:




TEHTÄVÄT PUUTTUU Toteuta www-sivulle kaksi painiketta JavaScript:iä käyttäen:

Vaihda 1, josta vaihtuu painikkeen yläpuolella oleva teksti
Vaihda 2, josta vaihtuu painikkeen alapuolella oleva teksti