Real-Time Clock dengan Javascript


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

8 thoughts on “Real-Time Clock dengan Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s