1 <html> 2 <head> 3 <script language="javascript"> 4 var turkMonth=new Array("Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylül","Ekim","Kasim","Aralik");
5 var turkDays=new Array("Pazar","Pazartesi","Sali","Çarsamba","Persembe","Cuma","Cumartesi");
6 function setDate(){
7 var now=new Date();
8 var year=now.getYear();
9 var month=now.getMonth();
10 var day=now.getDate();
11 var dayOfWeek=now.getDay();
12 document.dateForm.dateText.value=day+" "+turkMonth[month]+" "+year;
13 document.dateForm.dayText.value=turkDays[dayOfWeek];
14 setTheHours();
15 }
16 function setTheHours(){
17 var now=new Date();
18 var hour=now.getHours();
19 var minute=now.getMinutes();
20 var second=now.getSeconds();
21 var h=getZeroNumber(hour);
22 var m=getZeroNumber(minute);
23 var s=getZeroNumber(second);
24 document.dateForm.hourText.value=h+":"+m+":"+s;
25 window.setTimeout("setTheHours()",1000);
26 }
27 function getZeroNumber(number){
28 if(number<10){
29 return "0"+number.toString();
30 }else{
31 return number.toString();
32 }
33 }
34 </script> 35 <style> 36 input{
37 color:black;
38 background:white;
39 border-style:solid;
40 border-width:2px;
41 border-color:blue;
42 font-size:9pt;
43 font-weight:bold;
44 }
45 </style> 46 </head> 47 <body onLoad="setDate()"> 48 <center> 49 <form name="dateForm"> 50 <input type="text" value="" size="15" name="dateText" readonly></input><br> 51 <input type="text" value="" size="15" name="dayText" readonly></input><br> 52 <input type="text" value="" size="15" name="hourText" readonly></input> 53 </form> 54 </center> 55 </body> 56 </html>
Kodun Açıklanması
Örneğimizde bir form yaratılmıştır. Bu formda üç text field(yazı alanı) bulunmaktadır. dateText adlı yazı alanı tarihi, dayText günü, hourText ise saati gösterecektir.
Sayfa yüklenir yüklenmez onLoad ile setDate methodu çağrılmaktadır. setDate methodu tarih ve saati alıp yazı alanlarında gösterir. JavaScript'te zaman işlemleri için Date nesnesi kullanılır. Date nesnesinden şimdiki zaman, gün, ve saat bilgileri alınabilir.
var now=new Date();
var year=now.getYear();
var month=now.getMonth();
var day=now.getDate();
var dayOfWeek=now.getDay();
Önce now adlı Date değişkenini yaratıyoruz. Bu değişken şimdiki zaman bilgileri bize verir. getYear() methodu yılı, getMonth() kaçıncı ayda olduğumuzu, getDate() ayın kaçında olduğumuzu ve getDay() methodu ise haftanın kaçıncı gününde olduğumuz bilgisini verir. Ay ve gün için bize index verilmektedir. Bu index'in hangi aya veya güne geldiğini yukarıda tanımlanmış turkMonth ve turkDays dizileri ile elde edebiliriz. Örneğin getDay 0 index'ini gönderiyorsa bu Pazar'a karşılık gelir ve turkDays[index] ile bu değer alınabilir.
Değerler elde edildikten sonra yazı alanları set edilebilir. document.dateForm.dateText.value ile tarih alanı, document.dateForm.dayText.value ile gün alanının değeri set edilir. setTheHours(); fonsiyonu ise saati hesaplamak için kullanılır.
getHours() metodu saati, getMinutes() dakikayı ve getSeconds() ise saniyeyi bize vermektedir. Genellikle saatlerde eğer sayı tek rakamlıysa başına 0 eklenir. Örneğin 2 yerine 02 yazılır. getZeroNumber() methodu bu işlemi yapmaktadır. Eğer sayı 10'dan küçükse başına 0 eklemektedir. Daha sonra document.dateForm.hourText.value ile saat alanıda set edilmektedir. Saat sürekli değiştiği için bu işlem her saniye'de tekrarlanmalıdır. Bir fonksiyonu sürekli çağırmak için setTimeout method'u kullanılır. Biz her saniye'de set setTheHours methodunu çağırıyoruz. Böylece saat alanındaki değer her saniye için yenilenmektedir. setTimeout metodunun ikinci paramtresi milisaniye cinsindendir ve fonksiyonu hangi sıklıkla çağrılacağını belirtir. Biz bu değeri 1000 milisaniye yani 1 saniye olarak verdik.
