Ohjelmoidaan kello:

DATE -OLIO

Tämän luvun aiheena on Date –olio, jonka metodeilla voidaan ohjelmoida kello. Kellonaika sijoitetaan tekstikenttään, jotta aikaa voidaan päivittää. Date –olio sisältyy JavaScript –kieleen ja oliolla on joukko metodeja, joiden avulla aikaa käsitellään. Kello näyttä ajan lisäksi päivämäärän, viikonpäivän ja vuoden.

Date –olion luominen

Aluksi luodaan uusi Date –olio new Date( ) määrityksellä. Olio sijoitetaan muuttujaan Kello, jota tarvitaan kaikissa metodi viittauksissa.

ESIMERKKI

Kello=new Date();

Date –olion metodit: aika

Date -olio sisältää useita metodeita, joilla voidaan käsitellä senhetkistä aikaa. Tunnit ja minuutit saadaan getHours ( ) ja getMinutes ( ) -metodeilla. Paluuarvona tunneilla on 0-23 ja minuuteilla 0-59. Sekunnit palautuvat arvolla 0-59 ja paluuarvo saadaan getSeconds ( ) -metodia käyttäen.

METODI	PALUUARVO
getHours()	Palauttaa Date –olion tunnit 0-23.
getMinutes()	Palauttaa Date –olion minuutit 0-59.
getSeconds()	Palauttaa Date –olion sekunnit 0-59.

Date –olion metodit: päivämäärä

Päivämäärään päästään käsiksi getDate( ) -metodilla, joka palauttaa päivämäärän arvona 1-31. Kuukausi saadaan getMonth( ) -metodilla ja sen paluuarvona saadaan kuukauden järjestysnumero väliltä 0-11. Kuukausissa nolla tarkoittaa tammikuuta, jonka takia kuukauden paluuarvoon on aina lisättävä yksi. Vuosiluku saadaan getYear ( ) -metodilla, joka palauttaa vuosiluvun. Viikonpäivä saadaan paluuarvona getDay( ) -metodilla. Metodi palauttaa viikonpäivän järjestysnumerona 0-6. Järjestysnumeroista nolla vastaa sunnuntaita ja kuusi lauantaita. Järjestysnumero voidaan kääntää ehtolauseella viikonpäivän nimeksi.

METODI	PALUUARVO
getDate()	Palauttaa Date –olion päivämäärän 1-31.
getMonth()	Palauttaa Date –olion kuukauden 0-11.
getYear()	Palauttaa Date –olion vuosiluvun.
getDay()	Palauttaa Date –olion viikonpäivän 0-6.

Metodien käyttäminen

Jokaisen metodin tulee viitata Date –olioon, joka on luotu new Date() –määrityksellä. Metodi palauttaa arvon, joka sijoitetaan muuttujaan. Näiden muuttujien avulla voidaan syöttää kellonaika tekstikenttään. Esimerkissä luodaan Kello niminen Date –olio. Muuttuja PaivaMaara saa arvokseen päivämäärän metodin Kello.getDate() paluuarvona.

ESIMERKKI

Kello=new Date();

PaivaMaara=Kello.getDate();

Kellonajan päivittäminen

Date –olio luodaan, kun dokumentti ladataan selainikkunaan. Niinpä tarvitaan päivityskomento, jolla aika saadaan juoksemaan koko ajan. Tämän takia luodaan funktio nimeltään OmaKello(), jota tullaan kutsumaan sekunnin välein window –olion setTimeout() –metodilla. SetTimeout() –metodille määritellään viiveaika millisekunteina ja viiveen jälkeinen toiminto, joka esimerkkitapauksessa on funktion OmaToiminto() kutsu. Näin sekunnit, minuutit ja tunnit saadaan juoksemaan oikeassa ajassa. Näiden lisäksi tarvitaan tapahtumankäsittelijää onLoad(), joka tulee kutsumaan funktiota OmaKello(), kun dokumentti on latautunut palvelinkoneelta. Tapahtumankäsittelijä onLoad() kirjoitetaan <BODY> -merkinnälle.

ESIMERKKI	SELITYS
onLoad()	Tapahtumankäsittelijä, joka kutsuu funktion OmaKello() heti dokumentin lataamisen jälkeen.
setTimeout("OmaKello()",1000)	Kutsuu funktiota nimeltään OmaKello() sekunnin välein. Aika on määritelty millisekunteina. Suoritettava lause tulee kirjoittaa lainausmerkkien sisään.

Kellonajan lisääminen tekstikenttään

Kellonaika lisätään tekstikenttään viittauksella, joka viittaa dokumenttiin (document), dokumentissa olevaan lomakkeeseen, jonka nimi on annettu FORM NAME="aika" määrityksellä (aika), ja joka sisältää tekstikentän nimeltään NAME="nyt" (nyt). Kentän ominaisuuteen eli sisältöön päästään käsiksi value –ominaisuudella. Tähän viittaukseen sijoitetaan ajan sisältävä muuttuja.

ESIMERKKI

document.aika.nyt.value=Aika;

Kello esimerkki

Esimerkissä on kerätty eri metodien paluuarvot muuttujiin. Dokumenttiin on luotu lomake nimeltään "aika", jossa on tekstikenttä nimeltään "nyt", johon aika sijoitetaan. Sijoitus tehdään viittauksella document.aika.nyt.value, joka saa arvokseen kellonajan ja kalenteritiedot, jotka on kerätty muuttujiin Aika ja Kalenteri. Esimerkki koodissa on kommentit (//) jotka helpottavat koodin lukemista.

ESIMERKKI KELLOSTA

<HTML>
<HEAD>
<TITLE>JavaScript kello</TITLE>
<SCRIPT LANGUAGE="javascript">

function OmaKello()
{
//luodaan uusi Date -olio
Kello=new Date();

//sijoitetaan metodien paluuarvot muuttujiin
Tunnit= Kello.getHours();
Minuutit= Kello.getMinutes();
Sekunnit= Kello.getSeconds();
Paiva= Kello.getDate();
Kk= Kello.getMonth()+1;
Vuosi= Kello.getYear();

//kootaan kellonaika yhteen muuttujaan
Aika=Tunnit+":"+Minuutit+":"+Sekunnit;
//kootaan kalenteritiedot yhteen muuttujaan
Kalenteri=Paiva+"."+Kk+"."+Vuosi;

//sijoitetaan muuttujat Kalenteri ja Aika lomakkeen tekstikenttään
document.aika.nyt.value=Kalenteri+" "+Aika;

//suoriteaan päivitys kutsumalla funktiota OmaKello sekunnin välein
luo=setTimeout("OmaKello()",1000);

}

</SCRIPT>
</HEAD>
<BODY onLoad="OmaKello()">
<FORM NAME="aika">
Kellonaika ja päivämäärä<BR>
<INPUT TYPE=TEXT SIZE=25 NAME="nyt">
</FORM>
</BODY>
</HTML>

HARJOITUS: KELLO.HTM

Date –olion metodi getDay() palauttaa viikonpäivän arvolla 0-6, jolloin 0 vastaa sunnuntaita ja 6 lauantaita. Sijoita muuttujaan VP Kello.getDay() -metodin paluuarvo ja muuta tämä lukuarvo viikonpäivän nimeksi if –lauseilla. Alusta muutosta varten muuttuja nimeltään P_Nimi, johon sijoitetaan viikonpäivän nimi if –lauseen perusteella. Lisää lopuksi muuttuja P-Nimi tekstikenttään tulostettavaan jonoon. Tallenna työsi tiedostoon kello.htm.

Tehtävän malli puoliohjelmana

VP=Kello.getDay();
Jos(VP==0) niin
P_Nimi="Sunnutai"
Jos(VP==1) niin
P_Nimi="Maanatai"
Jos(VP==2) niin
P_Nimi="Tiistai"
Jos(VP==3) niin
P_Nimi="Keskiviikko"
Jos(VP==4) niin
P_Nimi="Torstai"
Jos(VP==5) niin
P_Nimi="Perjantai"
Jos(VP==6) niin
P_Nimi="Lauantai"
Lisää P_Nimi tulostukseen