W poniższym kursie będę prezentował tematy, które przerabiam w ramach Specjalizacji z uczniami 3 klasy Technikum Elektrycznego w Słupsku. Kurs ma służyć zarówno uczniom w powtórce materiału, jak i wszytkim zainteresowanym programowaniem Aplikacji Internetowych

Tworzenie obiektu Date

Obiekt daty tworzymy na dwa sposoby, albo tworzymy obiekt z bierzącą datą (odczytywaną z zegara komutera na którym uruchomiony jest skrypt):

var dt = new Date();

albo tworzymy obiekt z ustaloną datą (i czasem):

var dt = new Date(2012,10,13);   //2012-11-13
var dt = new Date(2012,10,13,15,45,11);  //2012-11-13 15:45:11
var dt = new Date(2012,10,13,15,45,11,123);  //2012-11-13 15:45:11.123 (ostatni arkument to milisekundy)

Jak widać możemy podać konkretny dzień, miesiąc i rok przy tworzeniu obiektu daty.
Uwaga: W JavaScript miesiące numerujemy od 0, w powyższym kodzie nie ma błędu, liczba 10 oznacza listopad

Nauczyliśmy się więc tworzyć obiekt daty, teraz nauczymy się coś z niego "wyciągnąć";

Metody obiektu Date

var godzina = dt.getHours();     //godzina
var minuta = dt.getMinutes();    //minuta
var sekunda = dt.getSeconds();   //sekunda
var rok = dt.getFullYear();      //pełny czterocyfrowy rok
var miesiac = dt.getMonth();     //miesiac, 0-styczeń ... 11 -grudzień
var dzien = dt.getDate();        //dzień miesiąca 1-31
var dzientygodnia = dt.getDay(); //dzień tygodnia, 0-niedziela...6-sobota

dodatkowo ciekawa metoda często używana w porównywaniu dat:

var ilems = dt.getTime();    //ilość milisekund od 1 stycznia 1970

Skoro umiemy wyciągać konkretne informacje z obiektu Date, nauczymy się wyświetlać datę w zadanym formacie

Formatowanie dat

Stworzony obiekt reprezentujący datę możemy oczywiście wyświetlić w treści strony:

vat dt = new Date();
document.write(dt);

czego efektem będzie taki tekst:

Tue Nov 13 00:48:17 UTC+0100 2012

Jest to internetowy format daty, zawierajacy dzień tygodnia, datę, czas oraz informacje o strefie czasowej. Aby wyświelnić datę i czas w stosowanym w naszym kraju formacie YYYY-MM-DD HH:NN:SS nalezy napisać własną funkcję formatującą. Wykorzystamy do tego poznane wcześniej metody:

function formattime(dt) {
 var godzina = dt.getHours();
 var minuta = dt.getMinutes();
 var sekunda = dt.getSeconds();
 var rok = dt.getFullYear();
 var miesiac = dt.getMonth() + 1;
 var dzien = dt.getDate();
 var dzientygodnia = dt.getDay();
 text = rok + "-" + miesiac + "-" + dzien;
 text += " " + godzina + ":" + minuta + ":" + sekunda;
 
 return text;
 }

teraz możemy uzyć naszej funkcji do wyświetlania godziny:

var dt = new Date();
document.write(formattime(dt));

wynik bedzie bardziej czytelny:

2012-11-13 0:48:17

niestety jak widać inforacja o godzinienie została prawidłowo sformatowana, zamiast 00: mamy 0:, musimy dopisać funkcję, która praiwdłowo sformatuje nam liczby poniżej 10:

function zero(liczba) {
 if (liczba < 10)
   return "0" + liczba;
 else
   return liczba;
 }

naszej funkcji zero() użyjemy w funkcji formatowania czasu:

function formattime(dt) {
 var godzina = dt.getHours();
 var minuta = dt.getMinutes();
 var sekunda = dt.getSeconds();
 var rok = dt.getFullYear();
 var miesiac = dt.getMonth() + 1;
 var dzien = dt.getDate();
 var dzientygodnia = dt.getDay();
 text = rok + "-" + zero(miesiac) + "-" + zero(dzien);
 text += " " + zero(godzina) + ":" + zero(minuta) + ":" + zero(sekunda);
 
 return text;
 }

teraz przy wyświetleniu godziny będziemy mieli:

2012-11-13 00:48:17

i o to chodziło !

A jaki mamy dzisiaj dzień tygodnia ?

O ile nie zabalowaliśmy zbyt długo poprzedniej nocy, odpowiedź na to pytanie jest zazwyczaj dość prosta, w JavaScript też nie jest to skomplikowane. Do pobrania dnia tygodnia z obiektu Date służy metoda:

var dzientygodnia = dt.getDay();

metoda getDay() zwraca liczbę z zakresu 0-6, przy czym 0 oznacza niedzielę, jako pierwszy dzień tygodnia. Czytelniej będzie jednak gdy wyświetlimy nazwę dnia tygodnia zamiast liczby, do tego celu wykorzystamy tablicę z nazwami dni tygodnia:

var dnitygodnia = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"];

zmodyfukujemy teraz naszą funkcję formattime() wzbogacając ją o informację o dniu tygodnia:

var dnitygodnia = ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"];
function formattime(dt) {
 var godzina = dt.getHours();
 var minuta = dt.getMinutes();
 var sekunda = dt.getSeconds();
 var rok = dt.getFullYear();
 var miesiac = dt.getMonth() + 1;
 var dzien = dt.getDate();
 var dzientygodnia = dt.getDay();
 text = dnitygodnia[dzientygodnia] + " " + rok + "-" + zero(miesiac) + "-" + zero(dzien);
 text += " " + zero(godzina) + ":" + zero(minuta) + ":" + zero(sekunda);
 return text;
}

po tej modyfikacji nasza strona powinna wyświetlać taką informację:

Wtorek 2012-11-13 00:48:17

Zegar tyka

Ok, nasza strona wyświetla bierzącą godzinę, jednak dopełni szczęścia brakuje aby nasz zegar "chodził", tzn. automatycznie odświeżał na stronie informacje o bierzącej godzinie. Stwórzmy więc szkielet strony jak poniżej:

<html>
<head>
<script>
   function zero(liczba) {
      .....
   };
   var dnitygodnia = ....
   function formattime(dt) {
      .....
   };
   
</script>
</head>
<body>

<form>
 <div id="date"></div>
</form>
</body>
</html>

oczywiście w odpowiednie miejsca skryptu wpisujemy wcześniej utworzone funkcje zero() i formattime(). Do skryptu dodajemy funkcję, która w div o id=date wypisze bierzącą datę:

function showtime() {
  var dt = new Date();   //bierząca data
  var elem = document.getElementById("date");
  elem.innerHTML = formattime(dt)

}

I teraz najważniejsze, chcemy aby funkcja showtime() wykonywała się automatycznie co sekundę, co spowoduje odświeżenie aktualnie wyświetlanej godziny. Do tego celu użyjemy metody setInterval() obiektu window. Metoda te powoduje wykonanie zadanego kodu co określony czas podany w milisekundach. Dodanie na końcu naszego skryptu liniki:

window.setTimeout("showtime()",1000);

spowoduje że funkcja showtime() będzie automatycznie wykonywana co 1000ms czyli 1s. Zapisz i sprawdź. Działa ? 

The final countdown

Jeśli znacie angielski w stopniu przynajmniej podstawowym zapewne wiecie że tytuł tego akapitu (hit lat '80 zespołu Europe) znaczy "końcowe odliczanie". Z takim odliczaniem mamy do czynienia przeważnie przy starcie rakiety kosmicznej, ale także w bardziej "przyziemnej" sytuacji kiedy odliczamy czas do nowego roku. Takie właśnie odliczanie zrobimy z wykorzystaniem JavaScript.
Jak więc policzyć rożnicę pomiedzy dwiema datami ? Do tego idealnie nadaje się metoda getTime() zwracająca ilośc milisekund, które upłynęły od 1 stycznia 1970 do zadanej daty. Znając tą wartośc dla dwóch różnych dat, możemy obliczyć ile milisekund dzieli te dwie daty. Namieszane ? To może posłużmy się kodem:

var dt1 = new Date();           //bierząca data
var dt2 = new Date(2013,0,1);   //początek przyszłego roku 2013-01-01
var ilems1 = dt1.getTime();     //ilosc ms od 1970-01-01 do teraz
var ilems2 = dt2.getTime();     //ilość ms od 1970-01-01 do 2013-01-01
var roznica = ilems2 - ilems1;  //ilość ms od teraz do 2013-01-01
document.write(roznica);

Mam nadzieję ze traz lepiej, strona powinna wyświetlić liczbę typu:

4227429615

Należy wierzyć na słowo, że jest to faktycznie liczba milisekund jaka dzieli nas od nowego roku. Po odświeżeniu przeglądarki (F5) ta liczba powinna się zmienić, bo jak wiadomo czas upływa i z kazą milisekundą nowy rok się zbliża. Nie trzeba chyba specjalnie zanaczać że jest to mocno nieczytelne. Podobnie jak w przypadku bierzącej daty, postaramy się to sformatować. Postaramy się naszą różnicę wyświetlić w formacie "Pozostało D dni, H godzin, N minut, S sekund".

Na początek, zajmiemy się ilością dni. Aby policzyć ilośc dni, należy najpierw policzyć ile milisekund przypada na jeden dzień:

var msnadzien = 1000 * 60 * 60 * 24; //1000ms = 1s, 60s=1m, 60m=1h, 24h = 1d

a teraz przeliczyć ilośc milisekund na ilośc dni:

var iledni = roznica / msnadzien;

wyświetlenie ilości dni, da liczbę typu:

48.92368396990741

co dalej jest niestety nieczytelne, 48.92... dnia tzn. ile ? Skupmy się więc na całkowitej ilości dni, a resztę wyświetlimy z postaci godzin,minut i sekund:

...
iledni = Math.floor(iledni);
roznica = roznica - (iledni * msnadzien);  //od roznicy odejmujemy "dni" które wyświetliliśmy
var msnagodz = 1000 * 60 * 60;  //milisekund na godzinę
var ilegodzin = roznica / msnagodz;
ilegodzin = Math.floor(ilegodzin);
roznica = roznica - (ilegodzin * msnagodz);
var msnamin = 1000 * 60;   //milisekund na minutę
var ilemin = roznica / msnamin;
ilemin = Math.floor(ilemin);
roznica = roznica - (ilemin * msnamin);
var msnasek = 1000;  //milisekund na sekundę
var ilesek = roznica / msnasek;
ilesek = Math.floor(ilesek);

Teraz pozostaje nam wyświetlić obliczone wartości w założonym przez nas formacie:

document.write("pozostało " + dni + " dni, "+ilegodzin+" godzin, "+ileminut+" minut, "+ilesekund+" sekund";

powinniśmy otrzymać tekst w takiej formie:

pozostało 48 dni 22 godzin 3 minut 57 sekund

W następnym odcinku zajmiemy się tworzeniem kalendarza. Zapraszam.