Kurs JavaScript - Czas  

Autor: Mateusz Mikulski

Opublikowano: 2011-12-21

W wielu przypadkach, podczas tworzenia stron WWW, zachodzi potrzeba operowania na czasie – do wyświetlania daty, czy np. pobierania jakiegoś elementu co określony czas. Język JavaScript dostarcza narzędzi, które pozwalają na takie manipulacje.

Przed wykonaniem zadań powinieneś wiedzieć:

• Jak tworzyć pętle w JavaScript
• Jak definiować zmienne w JavaScripit
• Jak dodawać skrypty do strony

Po wykonaniu zadań nauczysz się:

• jak wyświetlać datę w JavaScript,
• jak pobierać informację co określony czas przy wykorzystaniu JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to sprawdź w encyklopedii pod hasłem Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie dodanie skryptu do strony samouczka, który będzie on pokazywał aktualną datę i czas, a następnie rozbudowanie go w taki sposób, aby pokazywany czas odświeżał się co sekundę.

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Strona samouczka z dodaną informacją o dacie i godzinie.

Dodanie informacji o dacie i godzinie

Aby do dokumentu dodać informację o aktualnej dacie i godzinie, zastosuj następujące metody:getHours(), getMinutes(), getDate(), getMonth() oraz getYear(), wbudowane w język JavaScript .

1. W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
2. Wciśnij przycisk F12 lub wybierz Tools­>F12 developer Tools.
3. W oknie kliknij na zakładkę Script (oznaczoną 1 na Rys. 2.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

teraz=new Date();
document.getElementById("pokaz").innerHTML="Godzina: " + teraz.getHours() + ":" + teraz.getMinutes() + "<br />"
document.getElementById("pokaz").innerHTML+= "Data: " + teraz.getDate() +"." + (teraz.getMonth()+1) + "." + teraz.getYear() + "<br />"

Rys. 2. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

4. Wciśnij ENTER. Do strony zostanie dodana informacja o dacie i godzinie, w której został uruchomiony skrypt tak, jak pokazano to na Rys. 1.

Dodanie odświeżania godziny na stronie

Aby data i godzina odświeżały się na bieżąco, użyj metody setTimeout (więcej o metodzie setTimeout dowiesz się w encyklopedii pod hasłem Jak ustawić cykliczne odświeżanie w JavaScript).

1. W oknie narzędzi programistycznych, w zakładce Script (oznaczonej 1 na Rys.2.) w wierszu w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

function zegar(){
var teraz=new Date()
var godziny=teraz.getHours()
var minuty=teraz.getMinutes()
var sekundy=teraz.getSeconds()
var dzien = teraz.getDate()
var miesiac=teraz.getMonth()
var rok=teraz.getYear()

if(minuty<=9)
minuty="0"+minuty
if(sekundy<=9)
sekundy = "0" + sekundy

document.getElementById("pokaz").innerHTML="Data: " 
+ dzien + "." + (miesiac+1) + "." + rok + "<br />" + godziny + ":" + minuty + ":" + sekundy
setTimeout("zegar()",1000)
}
zegar()

2. Wciśnij ENTER i sprawdź, czy zegarek jest odświeżany co 1 sekundę.

Podsumowanie

W tym samouczku nauczyłeś się, w jaki sposób dodać datę i godzinę do strony WWW oraz jak zmodyfikować skrypt, aby odświeżał się co określony interwał czasu.

 

---