JavaScript - "Päivää, näkyykö kello ?"

PÄIVÄMÄÄRÄ, KALENTERI JA AIKA

JS kykenee esittämään päivämäärän merkkijonona seuraavasti:

Mon Feb 05 2018 14:24:46 GMT+0200 (Eastern Europe Standard Time)

tai esittämään saman 1.1.1970 klo 00:00:00 alkaen millisekunteina:

1517833486703

Date() metodi

Käyttökelpoisuutta www-sivuilla lisää erilaisten metodit ja niiden soveltaminen. Yllä olevan esimerkin voi toteuttaa JS-scriptillä seuraavalla tavalla:


   <p id="aika1"></p>

   <script>
    document.getElementById("aika1").innerHTML = Date();
   </script>
  

Tulos www-sivulla:


Huomaa, esimerkki (yllä)näyttää sen hetken kun www-sivu oli avattu selaimeen.


new Date() metodi

Metodi new Date() edellisen esimerkin tavoin sijoittaa paiva-muuttujaan tiedon avattaessa www-sivu.
Muuttujaan paiva2 sijoitetaan metodilla päivämäärä ja kellonaika merkkijonona.
Huomaa, kuukautta ei voi asettaa muulla kielellä kuin englanniksi, sekä merkkijonona näyttäminen eli toString().


  <p id="aika1A"></p>

  <script>
   var paiva = new Date();
   var paiva2 = new Date("October 13, 2014 11:13:00");
   document.getElementById("aika1A").innerHTML = 
    paiva + "<br>" +
    paiva2  + "<br>" +
    paiva2.toString();
  </script>	
  

Tulos www-sivulla:


Metodiin new Date() voidaan antaa myös muillakin tavoin päivämäärä ja aikatieto:

Metodi - asetukset Selite
new Date(100000000000) jolloin tieto millisekuntteina
new Date(99,5,24,11,33,30,0) tieto vuosiluku, kuukausi, päivämäärä tunnit, minuutit, sekunnit ja aikavyöhyke
new Date(99,5,24) tietona vuosiluku, kuukausi päivämäärä
Esittäminen www-sivulle toString() metodilla ja eri asetuksin:
paiva.toDateString() näyttää viikonpäivän, kuun pvm ja vuoden esim Mon Feb 05 2018
paiva.toUTCString() UTC-merkkijono standimuotona esim Mon, 05 Feb 2018 12:52:50 GMT
Päivämäärän esitysmuotoja:
ISO "2017-05-21" kansainvälinen standardi
Lyhyt muoto "05/21/2017"
Pitkä muoto "May 21 2017" tai "21 May 2017"
Kokonaisena "Wednesday May 21 2017"

Esimerkki päivämäärä asetuksista:

 
  <p id="aikaA"></p>

  <script>
   document.getElementById("aikaA").innerHTML =
    new Date("2015-03-25") + "<br>" +
    new Date("2015-03") + "ISO standardi <br>" +
    new Date("2015") + "ISO standardi tämäkin";
  </script>
  

Tulos www-sivulla:


PÄIVIIN ja KALENTERIIN liittyvät metodit:

Metodi Selite
getDate() Palauttaa kuukauden päivän 1 - 31
getDay() Palauttaa viikon päivän numerona 0 - 6 (su-la)
getFullYear() Palauttaa vuoden neljällä numerolla ilmaistuna
getHours() Palauttaa tunnin 0 - 23
getMilliseconds() Palauttaa millisekunnit 0 - 999
getMinutes() Palauttaa minuutit 0 - 59
getMonth() Palauttaa kuukauden 0 - 11
getSeconds() Palauttaa sekunnit 0 - 59
getTime() Palauttaa ajan millisekunteina alkaen 1.1.1970 klo 00.00.00

Esimerkeissä new Date() metodilla otetaan aluksi laitteen kellosta aika millisekunteina muuttujaan.
Kalenteripäivä esimerkki:


  <p id="aikaB"></p>

  <script>
   var kalenteri = new Date();
    document.getElementById("aikaB").innerHTML = "Esimerkki kalenterista:<br>"+
     kalenteri.getDate() + ". päivä<br>" +
     kalenteri.getMonth() +". kuukausi<br>" +
     kalenteri.getFullYear() +" vuosi<br>" +
     kalenteri.getDay() + " viikonpäivä numerona";
  </script>  
  

Tulos www-sivulla:


Kello esimerkki:


  <p id="aikaC"></p>

  <script>
   var millisek = new Date();
   document.getElementById("aikaC").innerHTML = "Esimerkki, kellon aika ja ajanotto:<br>"+
    millisek.getTime() + " millisekunnit 1.1.1970 alkaen<br>" +
    millisek.getHours() + " tunnit (vrk)<br>" +
    millisek.getMinutes() + " minuutit alkaneesta tunnista<br>" +
    millisek.getSeconds() + " sekunnit alkaneesta minuutista<br>" +
    millisek.getMilliseconds() + " alkaneen sekunnin millisekunnit";
  </script>    
  

Tulos www-sivulla:


Seuraavassa esimerkissä näytetään viikonpäivä kun tämä www-sivu avattiin selaimessa:


  <p id="aikaD"></p>

  <script>
   var aika = new Date();
   var paiva = ["sunnuntai","maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai"];
   document.getElementById("aikaD").innerHTML = paiva[aika.getDay()];
  </script>    
  

Tulos www-sivulla:

Esimerkissä paiva-taulukkoon on sijoitettu merkkijonona viikonpäivät. Viikonpäivän numero eli sijainti taulukosta saadaan aika.getDay()-metodirakenteella.


TEHTÄVÄ 1 Tehtävä on kaksiosainen, tehtävä 2 liittyy tässä olevaan tehtävään.

Kopioi yllä oleva esimerkki ja testaa sen toiminta.
Lisää esimerkkiin myös kuukauden näyttäminen ja lisää esimerkkiin kuukausi- ja kk-muuttujat.
Sijoita kuukausi-muuttujaan suomenkieliset kuukaudet ja käytä
kk-muuttujaa esimerkin mukaisesti kuukauden näyttämiseen www-sivulle.

Näkymä www-sivulle esimerkiksi seuraavasti:

Helmikuu maanantai




PÄIVÄN sekä AJAN ASETTAMISEEN metodit

Päivän ja ajan asettamiseen liittyvät metodit esitellään taulukossa:

Metodi Selite
setDate() Asettaa päivämäärän 1 - 31
setFullYear() Asettaa vuoden (asetettavissa myös kuukausi ja päivä)
setHours() Asettaa tunnin 0 - 23
setMilliseconds() Asettaa millisekunnit 0 - 999
setMinutes() Asettaa minuutit 0 - 59
setMonth() Asettaa kuukauden 0 - 11
setSeconds() Asettaa sekunnit 0 - 59
setTime() Asettaa ajan millisekunteina alkaen 1.1.1970 klo 00.00.00

Esimerkissä asetetaan päivämääräksi 15.2.2027, (kellonaika näyttää tietokoneen kellonaikaa).
Huomaa, helmikuu on kuukausi numero 1. Tammikuu = 0, Helmikuu = 1, Maaliskuu = 2 jne.


  <p id="aikaE"></p>

  <script>
   var pvm = new Date();
   pvm.setFullYear(2020, 1, 14);
   document.getElementById("aikaE").innerHTML = pvm;
  </script>	
  

Tulos www-sivulla:


Edellistä esimerkkiä soveltaen voidaan asettaa päivä ja päivien määrä:


  <p id="aikaF"></p>

  <script>
   var pvm = new Date();
   var pvm1 = new Date();
   pvm.setDate(15);
   pvm1.setDate(pvm1.getDate() + 50);
   document.getElementById("aikaF").innerHTML = 
    pvm + "  - asetettu 15.päivä<br>" + 
    pvm1 + "  - asetettu pvm 50 päivän päähän<br>";
  </script>	
  

Tulos www-sivulla:


TEHTÄVÄ 2 Tehtävä 1 jatko-osa.

Lisää aiemmin tekemääsi Tehtävä 1 myös kuukauden päivän sekä kellonajan näyttäminen.

Näkymä www-sivula esimerkiksi seuraavasti tyyppisenä:

24. Helmikuu 2019 maanantai klo 13:15











Kello-esimerkki 1.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <style>
   .kellotaulu {
    background-color: #F0F8FF;
    width: 10%;
    border: 1px solid darkred;
    padding: 10px;
    margin: 10px;
	font-size: 110%;
    color: tomato;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
   }
  </style>
 </head>
 <body  onload="aloitaKello()">

 <div class="kellotaulu" id="txt"> </div>
 <script>
  function aloitaKello() {
   var aika = new Date();
   var h = aika.getHours();
   var m = aika.getMinutes();
   var s = aika.getSeconds();
   m = otaAika(m);
   s = otaAika(s);
   document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
   var t = setTimeout(aloitaKello, 500);
  }
  function otaAika(i) {
   if (i < 10) {i = "0" + i};  // lisää nollan eteen jos numero < 10
   return i;
  }
 </script>
 </body>
</html>
 

Tulos www-sivulla:


TEHTÄVÄ 3 Kello www-sivulle.

Lisää yllä oleva esimerkki 1 kello JavaScript-harjoitusten palautussivustollesi.

Sijoita kello header-osaan, oikeaan reunaan.

Muokkaa kellon CSS-muotoiluja erilaiseksi.










Kello-esimerkki 2, aikaväli 2 sekunttia.

Tämä kello tulee esille kahdessa sekunnissa www-sivun avautuessa selaimeen ja sekunnit vaihtuvat 2 väliajoin.


<b><p id="seiko" style="color:green"></p></b>

<script>
 var omaSek = setInterval(omaAika, 2000);

 function omaAika() {
  var aika = new Date();
  document.getElementById("seiko").innerHTML = aika.toLocaleTimeString();
 }
</script>
 


TEHTÄVÄ 4 3 sekunnin tekstilaatikko.

Muokkaa kello-esimerkistä 2 versio joka,
a) avaa www-sivulle "tekstilaatikon" kolmen sekunnin kuluttua
siitä kun www-sivu on päivitetty.

b) muokkaa tekstilaatikko avautumaan painikkeen klikkauksesta 3 sekunnin kuluttua.

c) tee painikkeelle sekä tekstilaatikolle CSS-muotoiluohjeet.