Tapahtumaksi voidaan kutsua JavaSrciptillä toteutettuja:
<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:
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.
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:
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ä:
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).
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ä:
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"!';
Ja hän valitsi 'Jokerin'!
Hän ei valinnut "Tuplausta"!
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:
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 |
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
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: