Real-Time Clock dengan Javascript
June 26, 2008
Ass…wr.wb.
Pengen buat real-time clock pada web? Ini bisa diprogram dengan mudah dengan Javascript. Pada bahasa pemrograman Javascript, terdapat predefined object yang dapat digunakan untuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk ‘menghidupkan’ sebuah instance date dengan nama tanggal, sintaks yang digunakan adalah sebagai berikut.
var tanggal = new Date();
Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagai berikut.
|
Method |
Tipe Kembalian |
Deskripsi |
|
getDate() |
Integer |
Mengembalikan angka hari dalam suatu bulan |
|
getDay() |
Integer |
Mengembalikan angka hari dalam 1 minggu (Minggu = 0) |
|
getMonth() |
Integer |
Mengembalikan angka bulan dalam 1 tahun (Januari = 0) |
|
getYear() |
Integer |
Jika tahun<2000, maka kembaliannya adalah 2 digit terakhir dari tahun, jika tahun>= 2000, maka kembaliannya adalah 3 digit terakhir dari tahun (xyz) dimana x = 1 |
|
getFullYear() |
Integer |
Mengembalikan angka tahun |
|
getTime() |
Integer |
Mengembalikan selang waktu dalam milliseconds sejak 1 Januari 1970 s.d. sekarang |
|
getHours |
Integer |
Mengembalikan jam dalam 1 hari |
|
getMinutes() |
Integer |
Mengembalikan menit dalam 1 jam |
|
getSeconds() |
Integer |
Mengembalikan detik dalam 1 menit |
|
getMilliseconds() |
Integer |
Mengembalikan milidetik dalam 1 detik |
|
toTimeString() |
String |
Mengembalikan waktu dalam string dengan format hh:mm:ss GMT – xx:yy (<nama_lokasi> Standard Time) |
|
toLocaleTimeString() |
String |
Mengembalikan waktu dalam string dengan format hh:mm:ss AM/PM |
|
toDateString() |
String |
Mengembalikan tanggal dalam string-string singkatan dengan format inggris ( contoh : Wed Jun 25 2008 ) |
|
toLocaleDateString() |
String |
Mengembalikan tanggal dalam string dengan format inggris (contoh : Wednesday, June 25, 2008 ) |
|
toLocaleString() |
String |
Mengembalikan tanggal + waktu dalam string dengan format inggris (contoh : Wednesday,June 25,2008 7:09:21 PM ) |
Darimanakah informasi tanggal dan waktu yang diambil oleh Javascript berasal?
Ya mudah aja, karena Javascript merupakan salah satu dari sekian jenis bahasa pemrograman web yang client-side scripting, maka informasi tanggal dan waktu tersebut berasal dari komputer client, bukan dari komputer server.
Untuk menampilkan waktu atau jam dengan format hh:mm:ss PM/AM di suatu objek HTML (pada contoh dibawah ini akan digunakan objek DIV) pada saat halamat HTML tersebut di-load ke browser,maka langkah-langkahnya adalah sebagai berkut.
1. Buat sebuah fungsi yang menjalankan instance dari objek tanggal. Mis. Fungsi tersebut kita namakan show_date()
<script type=”text/javascript”>
function show_date(){
var tanggal= new Date();
document.getElementById(“tempat_tanggal”).innerHTML= tanggal.toLocaleTimeString();
}
</script>
2. Tambahkan action onload = <nama_fungsi> pada tag pembuka body
</pre> . . . <body onload="show_date()"> . . . <pre>
3. Jangan lupa buat sebuah objek DIV dengan ID = <string_id> pada halaman tersebut.
<div id = “tempat_tanggal”></div>
Jika langkah-langkah tersebut dijalankan dengan bernar dan tidak ada gangguan teknis maupun non-teknis :> , maka jam dengan format dd:mm:yy AM/PM akan tampil pada objek div dengan id=”tempat_tanggal”.
Nah, agar jam dapat berjalan pada web browser seperti jam-jam sebagaimana mestinya (real-time clock), maka ide dasarnya adalah dengan me-refresh halaman secara menyeluruh ataupun secara parsial setiap detiknya dengan harapan agar informasi jam dari mesin client dapat diambil terus-menerus tiap detiknya. Untuk itu, kita dapat menggunakan method setTimeout(<nama_fungsi>,<milliseconds>).
Script pada block javascript yang dituliskan kira-kira dapat berbentuk seperti ini
<script type=”text/javascript”>
//menuju ke fungsi show_date() 1000 milidetik atau 1 detik kemudian
window.setTimeout(“show_date()”,1000);
function show_date(){
var tanggal = new Date();
document.getElementById(“tempat_tanggal”).innerHTML= tanggal.toLocaleTimeString();
//kembali ke awal fungsi show_date() 1000 milidetik atau 1 detik kemudian
setTimeout(“show_date”,1000);
}
</script>
Kira-kira begitulah ide dasar dari pembuatan real-time clock pada web. Representasi dari jam dapat dikembangkan menjadi animasi dengan mengganti-ganti gambar clock atau menggeser-geser jarum jam pada clock untuk setiap perubahan waktu yang terjadi, tidak harus menggunakan method toLocaleTimeString() atau method-method string lainnya.
Sekian…wassalam.
P.S. coba temen2 buat script untuk countdown timer. Misal: untuk dalam selang waktu n jam / menit / detik tiba-tiba halaman web nya nutup sendiri :> jangan lupa di-posting di komentar
Entry Filed under: IF2-an, Pemrograman Web. .
7 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
1.
Petra Barus | June 26, 2008 at 1:42 am
gak ada demonya, far?
2.
ghifar | June 26, 2008 at 2:17 am
@Petra Barus : ada siy pet, tapi gw belum ngehubungi asisten bwt Demo-nya, hi3 (cape deh) :8
3.
kibi | December 16, 2008 at 8:14 pm
thanx y bro wat materi java scripTnya. ne berguna bgt wat gw dalemin Js…Thanx..thanx
4.
tcina | March 30, 2009 at 6:43 am
apa ci fungsi dari clock pada komputer? jawab sekarang zo coz butuh banget nich
5.
tcina | March 30, 2009 at 6:44 am
pa ci fungsi dari clock
6.
tcina | March 30, 2009 at 6:45 am
pa ci fungsi dari clock pada komputer? lez sekarang za coz gi keburu nich ”””””””””””
7.
tcina | March 30, 2009 at 6:49 am
pa ci fungsi dari clock pada komputer?