Kirjoittaja: MikaBug (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ö.
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.
| METODI | KUVAUS |
|---|---|
| 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:08Eli 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.
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.
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.
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
Hyvä opas-sarja. Opin vihdoin javascript ohjelmoinnin.
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.
Jee tällasta mä oon kaivannu!!!!!
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!
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.
Kieltämäti epäselvän näköstä.
style="border: 0px;" lienee sama kuin border="0".
Tuo on myös vähän selvempi.
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"
Hyvä opassarjahan tämä on :)
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...
Jess myt mä osaan koodia, =.O
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ä! :)
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/).
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.