Menampilkan jam/waktu pada halaman web
JavaScript adalah sebuah bahasa script yang dicantumkan pada sebuah halaman web dan dijalankan pada browser web (misalnya Firefox). Tulisan ini menjelaskan sebuah contoh program JavaScript untuk menampilkan jam/waktu pada halaman web. Tulisan ini ditujukan untuk para webmaster yang ingin meningkatkan kemampuan halaman-halaman webnya dengan mengimplementasikan JavaScript. Asumsi yang diambil adalah bahwa para pembaca telah mengerti dengan baik sintaks dokumen HTML (hypertext markup language) terutama form dan elemen-elemennya.
Listing program contoh aplikasi yang dimaksud adalah sebagai berikut:
1. <html>
2. <head>
3. <title>Percobaan JavaScript</title>
4. <script language="javascript">
5. <!--
6. var timerID=null;
7. var timerRunning=false;
8. function stopclock (){
9. if (timerRunning)
10. clearTimeout(timerID);
11. timerRunning=false;
12. }
13. function startclock () {
14. stopclock();
15. showtime();
16. }
17. function showtime () {
18. var now = new Date();
19. var hours = now.getHours();
20. var minutes = now.getMinutes();
21. var seconds = now.getSeconds();
22. var timeValue = " " + ((hours>12) ? hours -12 : hours)
23. timeValue += ((minutes < 10) ? ":0" : ":") + minutes
24. timeValue += ((seconds < 10) ? ":0" : ":") + seconds
25. timeValue += (hours >= 12) ? " P.M." : " A.M."
26. document.clock.face.value=timeValue;
27. timerID = setTimeout("showtime()" ,1000);
28. timerRunning=true;
29. }
30. <!--end-->
31. </script>
32. </head>
33. <body onLoad="startclock()">
34. <h1> Percobaan JavaScript untuk menampilkan Jam pada halaman web</h1>
35. <hr>
36. <form name="clock" onSubmit="0">
37. <input type=text name="face" value="">
38. </form>
39. <hr>
40. </body>
41. </html>
Gambar 1 Listing program untuk menampilkan jam
Listing program JavaScript di atas disertakan pada sebuah halaman web yang mengandung beberapa elemen sebagai berikut:
· document web yang event onLoad-nya diambil untuk menjalankan sebuah function
· form dengan nama = “clock” (baris 36)
· inputbox dengan nama = “face” dan isi(value) = “” (baris 37)
JavaScript pada halaman web di atas dimulai dari baris nomor 4 sampai nomor 31. Program dimulai saat baris 32 dijalankan, yaitu jika terjadi event onLoad pada dokumen web yang dimaksud. Jika event onLoad terjadi maka function startclock() dijalankan dimulai dari baris 13 sampai 16.
Baris 14 menjalankan function stopclock() yang memastikan bahwa timer tidak aktif (baris 8 sampai 12). Kemudian pada baris 15 memanggil function showtime() yang merupakan inti dari seluruh program.
Function showtime() pada baris 17 sampai 30 berjalan dengan membaca waktu dari sistem dan memasukkannya kedalam objek now dan variabel hours, minutes, dan seconds. Setelah memperoleh nilai-nilai yang dimaksud (tanggal, jam, menit, dan detik) kemudian dilakukan penyusunan sehingga diperoleh format tertentu.
Baris 18 membuat sebuah objek baru yang berisi tanggal beserta waktu sekarang. Baris 19-21 membuat variabel baru yang dihasilkan dengan mengambil nilai dari objek now melalui method getHours(). Demikian juga minutes dan seconds yang diambil dari objek now melalui method getMinutes() dan getSeconds().
Variabel timeValue dihasilkan dengan menggabungkan variabel hours, minutes, dan seconds dengan terlebih dahulu dilakukan pengecekan sebagai berikut:
· baris 22: timeValue = " " + ((hours>12) ? hours -12 : hours)menyatakan jika nilai hours lebih dari 12 maka hours harus dikurangi 12 dan nilai timeValue adalah nilai hours
· baris 23: timeValue += ((minutes < 10) ? ":0" : ":") + minutes menyatakan ika nilai minutes kurang dari 10 maka minutes harus ditambah “:0”, jika tidak maka harus ditambah “:” dan nilai timeValue adalah nilai timeValue yang lama digabungkan dengan nilai minutes
· baris 24: timeValue += ((seconds < 10) ? ":0" : ":") + seconds menyatakan jika seconds kurang dari 10 maka seconds harus ditambah “:0”, jika tidak maka harus ditambah “:”dan nilai timeValue adalah nilai timeValue yang lama digabungkan dengan nilai seconds
· baris 25: timeValue += (hours >= 12) ? " P.M." : " A.M." menyatakan jika nilai hours lebih atau sama dengan 12 maka timeValue harus ditambah “ P.M.” , jika tidak maka harus ditambah “ A.M.”
Akhirnya nilai timeValue ditampilkan pada document, pada form dengan nama clock, di elemen dengan nama face seperti pada baris 26.
Baris 27 menyatakan bahwa function showtime() dijalankan secara otomatis setiap 1000 milisecond.
Silahkan anda coba ketik dan jalankan dengan Firefox. Jika semua berjalan dengan benar maka hasilnya adalah seperti gambar berikut ini:
Gambar 2 hasil listing program dari gambar 1
