Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Aikaa on 6.1. saakka.

Opasarkisto: JavaScript-perusopas: Osa 11 - Käytännön sovelluksia

  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.

Tässä opassarjan viimeisessä osassa ohjelmoidaan muutama käytännönläheinen sovellus www-sivulle. Esimerkeissä hyödynnetään aiemmissa oppaissa läpikäytyjä asioita, mutta tulossa on myös monta uutta asiaa JavaScriptistä, muun muassa ajastin, Date-olio ja kuvataulukoiden käyttö.

Kellonaika ja päivämäärä

JavaScript käsittelee päivämääriä Date-olion kautta. Date-oliolla on lukuisia metodeja, joista käydään läpi muutama hyödyllisin. Näiden avulla saadaan tulostettua www-sivulle meneillään oleva päivämäärä ja kellonaika. JavaScript mittaa aikaa millisekunteina alkaen hetkestä 1.1.1970 00:00:00. Päivämäärän ja kellonajan selvittämiseksi luodaan uusi Date-olio.

var aika = new Date();

Tämän jälkeen voimme poimia muuttujiin päivän, kuukauden, vuoden sekä tunnit, minuutit ja sekunnit Date-olion metodeilla:

<script type = "text/javascript">

var aika = new Date();

var paiva = aika.getDate();
var kuukausi = aika.getMonth() + 1;
var vuosi = aika.getFullYear();
var tunnit = aika.getHours();
var minuutit = aika.getMinutes();
var sekunnit = aika.getSeconds();

document.write("Nyt on " + paiva + "." + kuukausi + "." + vuosi + " ja kello on " + tunnit + ":" + minuutit + ":" + sekunnit + ".");

</script>

getMonth-metodi palauttaa kuukauden numeron väliltä 0...11, joten arvoon on lisättävä luku yksi, jotta selaimeen tulostuu oikean kuukauden numero. Samoin viikonpäivän kertova getDay-metodi palauttaa luvun 0...6 (0 on sunnuntai, 6 on lauantai). Numeroarvon saa tulostumaan viikonpäivän nimenä taulukon avulla:

var aika = new Date();

var vko_paiva = aika.getDay();
var vko_paiva_nimi = new Array("sunnuntai", "maanantai", "tiistai", "keskiviikko", "torstai", "perjantai", "lauantai");

document.write("Tänään on " + vko_paiva_nimi[vko_paiva]);

Viikonpäivien nimien tulostamista varten määritellään taulukko vko_paiva_nimi, johon sijoitetaan viikonpäivät sunnuntaista lauantaihin. Näin esimerkiksi sunnuntaihin viitataan indeksillä 0. getDay-metodilta saatava arvo käy siis suoraan taulukon indeksiksi. Seuraavassa taulukossa on lueteltu muutama muu Date-olion metodi.

METODIKUVAUS
getTime()palauttaa aikavälin hetkestä 1.1.1970 00:00:00 nykyhetkeen millisekunteina
setDate(parametri)asettaa parametrin päiväksi
setMonth(parametri)asettaa parametrin kuukaudeksi
setYear(parametri)asettaa parametrin vuodeksi
setHours(parametri)asettaa parametrin tunneiksi
setMinutes(parametri)asettaa parametrin minuuteiksi
setSeconds(parametri)asettaa parametrin sekunneiksi

Seuraavaksi ohjelmoidaan skripti, joka näyttää sekunnin välein päivittyvän päivämäärän ja kellonajan. Eli aika juoksee kuin oikeassa sekuntikellossa. Tähän käytämme JavaScriptin ajastinfunktiota setTimeout.

<html>

<head>

<title>Kello JavaScriptillä</title>

<script type = "text/javascript">

function Kello()
{
	var aika = new Date();

	var paiva = aika.getDate();
	var kuukausi = aika.getMonth() + 1;
	var vuosi = aika.getFullYear();
	var vko_paiva = aika.getDay();
	var tunnit = aika.getHours();
	var minuutit = aika.getMinutes();
	var sekunnit = aika.getSeconds();

	var vko_paiva_nimi = new Array("sunnuntai", "maanantai", "tiistai", "keskiviikko", "torstai", "perjantai", "lauantai");

	var tama_hetki = vko_paiva_nimi[vko_paiva] + " " + paiva + "." + kuukausi + "." + vuosi + " " + tunnit + ":" + minuutit + ":" + sekunnit;

	document.kello.aika.value = tama_hetki;

	setTimeout("Kello()", 1000);
}

</script>

</head>

<body onload = "Kello()">

	<form name = "kello">

		<input type = "text" name = "aika" size = "30" style = "border: 0px;">

	</form>

</body>

</html>

Kello-funktiossa luodaan ensin uusi ilmentymä Date-oliolle ja haetaan eri ajan osat omiin muuttujiinsa Date-olion metodeiden avulla. Tämä on tuttua edellisistä esimerkeistä.

Eri ajan osat ja välimerkit kootaan tama_hetki-muuttujaan +-operaattorin avulla. Lopuksi muuttujan sisältö tulostetaan lomakkeen "kello" tekstikenttään "aika". setTimeout-funktio kutsuu ensimmäisenä parametrina annettavaa funktiota, kun toisena parametrina annettu aika on kulunut. Aika annetaan millisekunteina, tässä tapauksessa 1000 millisekuntia eli yksi sekunti. setTimeout-funktio kutsuu siis samaa Kello-funktiota sekunnin välein, jolloin syntyy loputtomasti kiertävä silmukka.

setTimeout-funktion syntaksi:

setTimeout(KutsuttavaFunktio, viive_ms);

Kello-funktiota kutsutaan heti sivun latautuessa body-tagiin sijoitetun onload-tapahtumankäsittelijän kautta. Tästä eteenpäin edellä mainittu setTimeout-funktio huolehtii Kello-funktion uudelleen kutsusta. Lomakkeen tekstikentästä poistetaan reunukset CSS-tyylisääntöjen avulla style = "border: 0px;". Näin se ei erotu sivulla lomake-elementiksi. CSS-tyylisääntöjen avulla on myös mahdollista muun muassa vaihtaa tekstikentän taustaväriä, jolloin sen saa sulautumaan vaikkapa siniseen taustaan.

Jos ajat skriptin, huomaat varmasti, että mikäli sekunnit tai minuutit ovat alle kymmenen, ei niiden eteen tulostu nollaa. Muoto 14:3:8 ei näytä kovin hyvältä, joten pieni lisäys skriptiin on paikallaan.

if(sekunnit < 10) { sekunnit = "0" + sekunnit; }
if(minuutit < 10) { minuutit = "0" + minuutit; }

// Nyt muoto on 14:03:08

Eli mikäli sekunnit ilmaiseva luku on pienempi kuin 10, lisätään sen eteen nolla, muutoin ei. Sama tehdään minuuteille. Jokainen saa itse pähkäillä, mihin kohtaan koodia edelliset lisäykset on sijoitettava.

Animaatio ja diaesitys

JavaScriptin ajastinfunktiota edelleen hyväksi käyttäen ohjelmoimme seuraavaksi pienen mainosanimaation, jossa kuva vaihtuu seuraavaan kolmen sekunnin välein. Vastaavalla tavalla voi tehdä myös esimerkiksi diaesityksiä. Jos haluaa tehdä oikean liikkuvaa kuvaa esittävän animaation, vaatii se huomattavasti enemmän yksittäisiä kuvia ja reippaasti lyhyemmän viiveen (esimerkiksi 80 ms), jotta liikkeen vaikutelma syntyy. Tällaisista animaatioista tulee äkkiä raskaita ladata, joten kannattaa harkita niiden käyttöä.

<html>

<head><title>Animaatio</title>

<script type = "text/javascript">

var kuvat = new Array("kuva1.gif", "kuva2.gif", "kuva3.gif", "kuva4.gif");
var kuvataulukko = new Array(kuvat.length);

	for(var j = 0; j < kuvat.length; j++)
	{
		kuvataulukko[j] = new Image();
		kuvataulukko[j].src = kuvat[j];
	}

var ind = 0;
var silmukka = 0;

function Aloita()
{
    document.images["mainos"].src = kuvataulukko[ind].src;

    ind = ++ind % kuvat.length;

    silmukka = setTimeout("Aloita()", 3000);
}

function Lopeta()
{
    clearTimeout(silmukka);
}
</script>

</head>

<body>

<img src = "kuva1.gif" name = "mainos">

<form>

    <input type = "button" value = "Aloita" onclick = "Aloita()">
    <input type = "button" value = "Lopeta" onclick = "Lopeta()">

</form>

</body>

</html>

Skriptissä tulee vastaan muutama uusi asia. Aloitetaan skriptin läpikäyminen body-osiosta. Sivulle lisätään kuva normaalilla img-tagilla. Kuvalle annetaan nimi "mainos" name-attribuutilla. Tämän nimen avulla kuvaan voidaan viitata JavaScriptistä käsin. Sivulla on myös painikkeet animaation aloittamiseksi ja pysäyttämiseksi. Niissä kutsutaan onclick-tapahtumankäsittelijän kautta animaation aloittavaa funktiota Aloita ja lopettavaa funktiota Lopeta.

Varsinaisessa skriptissä törmätään uuteen kuvien yhteydessä käytettävään Image-olioon. Mainosanimaatio koostuu neljästä kuvasta, joten jokaista kuvaa varten luodaan oma olio lauseella kuvataulukko[j] = new Image();. kuvataulukko on taulukko, johon sijoitetaan for-silmukassa kaikkien kuvien oliot, kukin omaan soluunsa. Jokaisella kuvalla on siis oma Image-olio, joka pitää sisällään kyseisen kuvan tiedot.

src-ominaisuuden avulla sijoitamme olioon kuvatiedoston nimen kuvataulukko[j].src = kuvat[j]. Kuvien tiedostonimet on sijoitettu kuvat-taulukkoon, josta ne haetaan indeksin perusteella ja sijoitetaan olion src-ominaisuuden arvoksi. Mikäli kuva ei sijaitse samassa kansiossa skriptitiedoston kanssa, on annettava myös polku, esimerkiksi "Kuvat/kuva1.gif". Kuten muistat edellisestä oppaasta, olion ominaisuuksiin päästiin käsiksi syntaksilla olio.ominaisuus = arvo;, esimerkiksi Seija.ika = 41;. Sama juttu pätee kuvienkin tapauksessa.

Näin neljä kuvaa sijoitetaan omiin olioihinsa jo sivun latautuessa. Tämä tarkoittaa myös sitä, että kuvat ovat välittömästi käytössä, kun niitä kutsutaan. Niitä ei siis tarvitse lähteä lataamaan verkosta, mikä aiheuttaisi kuvien käyttöön ikävän viiveen.

Aloita-funktiossa viitataan ensimmäisenä sivulla olevaan kuvaan. Tähän on JavaScriptissä useampi tapa, jotka esitellään hieman myöhemmin. Tässä on käytetty syntaksia document.images["kuvan_nimi"].src. JavaScript lataa kaikki sivun kuvat images-taulukkoon, jolloin niihin voidaan viitata indeksillä. Indeksi on kuvan nimi, tässä tapauksessa "mainos". src-ominaisuuden arvoa muuttamalla saadaan kuva vaihtumaan toiseksi. Uusi arvo sijoitetaan sijoitusoperaattorilla =.

Arvo on käytännössä esimerkiksi kuvataulukko[0].src. Eli taulukon ensimmäisessä solussa sijaitsevan olion ominaisuuden src arvo "kuva1.gif". Aloita-funktion ensimmäisellä kutsukerralla ind on 0, jolloin viitataan ensimmäiseen kuvaan (kuva1.src). Toisella kutsukerralla viitataan toiseen kuvaan (kuva2.src) ja kolmannella kutsukerralla kolmanteen kuvaan (kuva3.src).

Muuttujan ind arvoa lisätään jokaisella funktion kutsukerralla. Näin se osoittaa joka kerta eri kuvaan. ind on määritelty globaaliksi muuttujaksi, koska paikallisena muuttujana se nollautuisi aina funktion alussa. Lause ind = ++ind % kuvat.length; lisää muuttujan ind arvoa joka kutsukerralla yhdellä, ja muuttujan saavutettua taulukon koon, sen arvoksi tulee jälleen nolla.

setTimeout-funktio toimii kuten kelloesimerkissä, mutta tällä kertaa otetaan talteen sen palauttama tunniste, jonka perusteella ajastin voidaan pysäyttää. Tähän käytetään clearTimeout-funktiota, joka saa parametrinaan setTimeout-funktion palauttaman tunnisteen. clearTimeout-funktio suoritetaan, kun käyttäjä napsauttaa Lopeta-painiketta.

Seuraavassa vielä eri tavat viitata sivulla oleviin kuviin:

document.images.kuvan_nimi.src
document.images["kuvan_nimi"].src
document.images[kuvan_indeksi].src

Sivun ensimmäisellä kuvalla indeksi on 0, toisella kuvalla 1 jne.

Hiireen reagoivat painikkeet

Jokainen on nähnyt varmasti Internet-sivuilla linkkipainikkeita, joiden ulkoasu muuttuu, kun hiiri viedään painikkeen päälle. Seuraavaksi katsotaan, kuinka sellainen tehdään. Tarvitset kaksi kuvaa, joista toinen edustaa linkkipainiketta normaalitilassa (esimerkissä nimellä painike_off) ja toinen hiiren ollessa sen päällä (painike_on).

<html>

<head>

<title>Hiireen reagoiva painike</title>

<script type = "text/javascript">

painike_on = new Image();
painike_on.src = "Kuvat/painike_on.gif";
painike_off = new Image();
painike_off.src = "Kuvat/painike_off.gif";

function Nappi(napin_nimi)
{
	document.images["linkki"].src = eval(napin_nimi + ".src");
}

</script>

</head>

<body>

<a href = "sivu.html" onmouseover = "Nappi('painike_on');" onmouseout = "Nappi('painike_off')"><img src = "Kuvat/painike_off.gif" name = "linkki" style = "border: 0px"></a>

</body>

</html>

Jos linkkipainikkeita on useampia kuin yksi, voidaan samaa funktiota käyttää kaikkien painikkeiden yhteydessä. Tällöin koodia on muutettava hieman ja vietävä Nappi-funktiolle toisena parametrina kuvan nimi. Näin funktio tietää, minkä sivulla olevan painikkeen kuvaa täytyy muuttaa.

<html>

<head>

<title>Hiireen reagoiva painike</title>

<script type = "text/javascript">

painike1_on = new Image();
painike1_on.src = "Kuvat/painike1_on.gif";
painike1_off = new Image();
painike1_off.src = "Kuvat/painike1_off.gif";

painike2_on = new Image();
painike2_on.src = "Kuvat/painike2_on.gif";
painike2_off = new Image();
painike2_off.src = "Kuvat/painike2_off.gif";

function Nappi(napin_nimi, kuvan_nimi)
{
	document.images[kuvan_nimi].src = eval(napin_nimi + ".src");
}

</script>

</head>

<body>

<a href = "sivu.html" onmouseover = "Nappi('painike1_on', 'linkki1')" onmouseout = "Nappi('painike1_off', 'linkki1')"><img src = "Kuvat/painike1_off.gif" name = "linkki1" style = "border: 0px"></a>

<a href = "sivu2.html" onmouseover = "Nappi('painike2_on', 'linkki2')" onmouseout = "Nappi('painike2_off', 'linkki2')"><img src = "Kuvat/painike2_off.gif" name = "linkki2" style = "border: 0px"></a>
</body>

</html>

Kahdessa edellisessä esimerkkiskriptissä ei pitäisi olla epäselvää, koska niissä on hyödynnetty jo aiemmin opittuja asioita. Hiireen reagoivien painikkeiden tapauksessa on erityisen tärkeää, että kuvat ladataan tietokoneen muistiin samalla, kun sivu aukeaa selaimeen. Muuten painikkeen kuvaa jouduttaisiin lähtemään hakemaan verkosta siinä vaiheessa, kun hiiri on painikkeen päällä, mikä taas näkyisi viiveenä painikkeen ulkoasun muuttumisessa.

Yhteenveto

Yksitoista opasta JavaScript-ohjelmointia on nyt takana. Toivottavasti näistä oppaista on ollut hyötyä tutustuessasi kieleen tai mahdollisesti kartuttaessasi aiemmin opittuja taitoja. Koetin käydä oppaissa läpi asioita, joita soveltamalla www-sivuille pystyy ohjelmoimaan hyödyllisiä toimintoja. On kuitenkin muistettava, että sivut tulisi suunnitella toimimaan myös kokonaan ilman JavaScriptiä.

Ottaisin mielelläni vastaan palautetta ja kommentteja opassarjasta. Oliko oppaat kirjoitettu riittävän helppotajuisesti, oliko niissä käyty läpi tärkeitä asioita? Vapaamuotoista palautetta voit lähettää osoitteeseen mika.mt.hakkarainen[at]gmail.com. Kehittämisehdotukset tulevia projekteja varten ovat myös aina tervetulleita.

Mika Hakkarainen, 1.10.2007


Kommentit

nörtti [03.10.2007 14:35:41]

Lainaa #

Hyvä opas-sarja. Opin vihdoin javascript ohjelmoinnin.

MikaBug [03.10.2007 19:12:07]

Lainaa #

Kiva että oppaista on ollut hyötyä kieleen tutustuessa. Eihän nämä yksitoistakaan opasta ole kuin melko pintaraapaisu JavaScriptiin, mutta antanee ihan hyvät lähtökohdat jatkaa omatoimista opiskelua syvemmälle kieleen.

Väpä [05.10.2007 15:12:20]

Lainaa #

Jee tällasta mä oon kaivannu!!!!!

gamehouse [06.10.2007 09:19:51]

Lainaa #

Olen jo kauan kaivannut JavaScript- opasta! Olen halunnut kotisivuilleni JavaScriptiä, mutta en ole onnistunut muuta kuin, tekemään nimen kysymisen! :D Tämä on juuri sopiva!

T.M. [14.10.2007 15:44:45]

Lainaa #

Minkä takia HTML koodissasi on jokainen = merkki välilyönneillä suojattuna? esim: <a href = "sivu"> kun sen pitäisi olla: <a href="sivu">
Hieman ärsyttää tuollainen koodi, kun eihän HTML:ää tuolla tavalla pitäisi kirjottaa.

tsuriga [22.10.2007 22:47:46]

Lainaa #

Kieltämäti epäselvän näköstä.

Ceox [17.11.2007 15:22:18]

Lainaa #

style="border: 0px;" lienee sama kuin border="0".
Tuo on myös vähän selvempi.

exAtuu [10.01.2008 05:51:53]

Lainaa #

Ceox kirjoitti:

style="border: 0px;" lienee sama kuin border="0".
Tuo on myös vähän selvempi.

HTML:n tehtävä ei ole määrittää sivuston ulkoasua - se vain kertoo, mitä elementtejä sivustolta löytyy. Ulkoasun määrittäminen on CSS:n heiniä, ja se voidaan sijoittaa joko omaan osioonsa tai elementin attribuutiksi (style="").

On kuitenkin totta, että inline-CSS on jokseenkin epäselvää, mutta parempi sekin on kuin HTML:n käyttö asiassa, johon sitä ei alunperinkään suunniteltu. Ja kuten sanoit, tuota voi toki siistiä: style="border:0"

Juhko [07.09.2008 13:40:42]

Lainaa #

Hyvä opassarjahan tämä on :)

Prinssi Rohkea [25.10.2008 10:37:56]

Lainaa #

Itse kävin oppaat läpi tässä parissa päivässä. Ihan kelpo oppaita, mielestäni. Yhtä asiaa jäin kuitenkin hiukan kaipaamaan. Olet selvästi asiassa edistynyt, joten olisin halunnut kuulla vinkkejä itseopiskelun jatkamiseen, hyviä linkkejä esim... No eniveis, kyllä niitä googlettamalla löytää ja yhden tuossa ohimennen mainitsitkin...

qeijo [18.06.2010 14:10:38]

Lainaa #

Jess myt mä osaan koodia, =.O

dartvaneri [09.08.2010 22:36:10]

Lainaa #

Hieno opas. Nostan kyllä hattua siitä että olet jaksanut tällaisen väsätä. Ainut on missä on ongelmia, oliot. Muuten todella hyvä opas. Kiitos tästä! :)

MikaBug [16.08.2010 14:57:24]

Lainaa #

Kiitos palautteesta! Hyvä jos oppaasta on ollut hyötyä. Hyvin perustasollahan noissa liikutaan, mutta perusteistahan sitä täytyy liikkeelle lähteäkin. Jos JavaScript kiinnostaa enemmän, kannattaa jossain vaiheessa tutustua myös jQuery-kirjastoon, joka helpottaa JS-koodaamista huomattavasti (http://jquery.com/).

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