JavaScript-opas

Date-olio ja päivämäärien käsittely

Date-olion avulla käsitellään aikaa ja päivämääriä. Aika mitataan millisekunteina Epoch-ajasta (1.1.1970 00:00:00) alkaen. Date-tyyppinen olio luodaan syntaksilla:

new Date(argumentit); 

Mikäli olion luomisen yhteydessä sille ei välitetä argumentteja, luo se nykyisen päivämäärän ja kellon ajan. Esimerkiksi:

document.write("Tänään on ",new Date()); 

Tarvittaessa voimme kuitenkin määritellä oliolle parametreina halutun päivämäärän:

jouluaatto = new Date(2001,11,24); 

Luonnollisesti voimme hakea päivämäärään arvoja myös lomakkeista tai muista muuttujista:

tanaan = new Date()
joulu = new Date(tanaan.getYear()-1,11,24); 
document.write("Viime vuonna joulu alkoi ",joulu);

Date-oliolla ei ole yhtään muuttujaa, ainoastaan metodeja. Näistä kaikkein tärkeimpiä ovat:

Date.getDate()	//palauttaa kuukauden päivän (1-31)
Date.getDay()	// palauttaa viikon päivän (0=sunnuntai)
Date.getHours()	// palauttaa tunnit(0-23)
Date.getMinutes()	// palauttaa minuutit (0-59)
Date.getMonth()	// palauttaa kuukaudet (0-11; 0 = tamikuu)
Date.getSeconds()	// palauttaa sekunnit (0-59)
Date.getTime()	// palauttaa ajanvälin Epoch aika- nykyisyys (ms:na)
Date.getYear	// palauttaa vuoden
Date.getTimezoneOffset()// palauttaa aikaeroon minuutteina GMT:n verrattuna
Date.parse(String)	// palauttaa argumenttina annetun merkkijonon ms:na Date.setDate(arg)	// asettaa argumentin Date-olion kuukauden päiväksi
Date.setHour(arg)	// asettaa argumentin Date-olion tunnin arvoksi
Date.setMinutes(arg)	// asettaa argumentin Date-olion minuuttien arvoksi
Date.setMonth(arg)	// asettaa argumentin Date-olion kuukaudeksi
Date.setSeconds(arg)	// asettaa argumentin Date-olion sekuntien arvoksi
Date.setTime(arg)	// asettaa (ms:na annetun) argumentin Date-olioon
Date.setYear(arg)	// asettaa argumentin Date-olion vuodeksi
Date.toGMTString()	// muuntaa Date-olioon asetetun ajan GMT-ajaksi 
Date.toLocaleString	// palauttaa Date-olion paikallisessa formaatissa 

Tällöin voimme esimerkiksi kirjoittaa yllä olevan joulunajan koodin vähemmän kryptisesti :

tanaan = new Date()
vappu = new Date(tanaan.getYear()-1,11,24); 
document.write("Viime vuonna joulu alkoi ",vappu.toLocaleString());
// Viime vuonna joulu alkoi 24. joulukuuta 2001 0:00:00

Esimerkki

Seuraavassa olevassa esimerkissä laadimme kellon, joka päivittää kellonajan reaaliaikaisesti sivulla olevaan elementtiin. Ensimmäinen askelhan tässä on noutaa tarvittavat päivämäärätiedot. Niitä varten luomme Kello-olion:

function Kello() {
	var tanaan, paiva, kuukausi,vuosi,tunnit,minuutit,sekunnit,aika
	tanaan = new Date(); 
	
	paiva = tanaan.getDate();
	kuukausi=tanaan.getMonth();
	vuosi=tanaan.getYear();
	tunnit = tanaan.getHours();
	minuutit = tanaan.getMinutes();
	sekunnit = tanaan.getSeconds();

	aika = paiva + "." + kuukausi + "." + vuosi + " klo: " + tunnit + ":" + minuutit + ":" + sekunnit + " ";
}

Nykyisellään kello hakee ajan aina kun sitä kutsutaan (eli aina sivun latautuessa). Haluamme kellon kuitenkin päivittyvän sekunnin välein ja tätä varten joudumme käyttämään funktiota setTimeOut(). Se ottaa parametreikseen suoritettavan komentosarjan(joka on sijoitettava hipsujen sisään, muuten se suoritetaan välittömästi) ja viiveen:

setTimeout('kello()',1000);

Viimeinen tehtävämme on tulostaa aika sivulle. Mikäli yrität käyttää document.write-metodia, kohtaat virhetilanteen. Tällöin selaimesta riippuen aika tulostuu peräkkäin sekunnin välein tai saat virheilmoituksen. Oikea ratkaisu on siis sijoittaa aika olemassa olevan elementin sisään ylikirjoittamalla alkuperäinen arvo. Tähän on olemassa useampikin tapa.

Ensimmäinen tehtävämme on viitata elementtiin. Tämä tapahtuu document-olion getElementById()-metodilla. Sijoitamme kellonajan elementtiin, jolle annamme yksilöllisen id-arvon "kello". Tällöin pääsemme siihen käsiksi :

document.getElementById('kello');

Arvon muuttaminen lennosta on hieman vaikeampaa, mutta siihenkin JavaScript tarjoaa pari tapaa. Helpoin ratkaisumalli olisi käyttää elementin innerHTML ominaisuutta. Tämä ratkaisu ei kuitenkaan ole DOM-standardin mukainen ja toimii kuitenkin ainoastaan Microsoftin Internet Explorerissa ja Netscapen 6.x-sarjassa:

document.getElementById('kello').innerHTML=aika;

DOM-standardin mukainen tapa olisi huomattavasti mutkikkaampi ja työläämpi.

function vaihda(EID,sisalto){
	if (document.getElementById){
		alue = document.createRange();
		elementti = document.getElementById(EID);
		alue.setStartBefore(elementti);
		htmlFrag = alue.createContextualFragment(sisalto);
		while (elementti.hasChildNodes()) {
			elementti.removeChild(elementti.lastChild);
			elementti.appendChild(htmlFrag);
		}	
	}
}

Onneksi on kuitenkin olemassa kolmas "välimuoto", joka on aivan yhtä standardin mukainen ja toimii lähes kaikilla selaimilla versiosta riippumatta (ainakin mikäli vaihdat document.getElementById.value:n muotoon document.name.name.value). Siinä sijoitamme muuttujan aika id-arvolla kello nimettyyn HTML:n lomake-elementtiin, jonka arvoon pääsemme käsiksi ominaisuudella value:

document.getElementById('kello').value=aika;

Kun vielä siistimme lomake-elementin ulkoasua tyylimäärittelyillä, ei lopputulosta pysty päällepäin erottamaan muilla tavoin toteutetuista ratkaisuista. Siispä lopullinen koodimme olisi:

...
<script type="text/javascript">
<!--

function kello(){

	var tanaan, paiva, kuukausi,vuosi, tunnit,minuutit,sekunnit,aika
	tanaan = new Date(); 
	
	paiva = tanaan.getDate();
	kuukausi = tanaan.getMonth();
	vuosi= tanaan.getYear();
	tunnit = tanaan.getHours();
	minuutit = tanaan.getMinutes();
	sekunnit = tanaan.getSeconds();

	aika = paiva + "." + kuukausi + "." + vuosi + " klo: " + tunnit + ":" + minuutit + ":" + sekunnit + " ";
	document.getElementById('kello').value=aika;

	setTimeout('kello()',1000);
}


//-->
</script>


</head>

<body onLoad="kello()">

<input id="kello" style="border:0px solid;"></input>
...