JavaScript Nedir?
Yazım Kuralları
Değişkenler
İşlemler
Akış Denetimi
Döngü Denetimi
Diziler
Fonksiyonlar
Pencere Komutları
Metin Komutları
Zaman Komutları
Matematik Komutları
Tarayıcı Komutları
Olay
Nesneler
Javascript ve DHTML
Örnek Uygulamalar

ZAMAN (TIME) KOMUTLARI

Date()



Bu metod, Javascript’in Browser’dan, Browser’ın işletim sisteminden, işletim sisteminin de bilgisayarın temel girdi/çıktı işlemlerini yapan (BIOS) çipinden, saati ve tarihi içeren bilgiyi almasını sağlar. Gerçi metod Date (günün tarihi) adını taşıyor, ama Date(), Javascript açısından class (sınıf) sayılır ve edinilen bilgi sadece ay, gün ve yıl bilgisini değil, o andaki saati, dakikayı ve saniyeyi de içerir.

Date() sınıfının sağladığı bilgiyi, get... yoluyla alırız.

 

,
getYear: Yıl (1900’den sonra)
getMonth: Ay (0=Ocak - 11=Aralık)
getDate: Gün (1-31)
getDay: Gün (pazar=0,ptesi=1........cumartesi=6)
getHours: Saat (0-23)
getMinutes: Dakika (0-59)
getSeconds: Saniye (0-59)
getTime: Zaman (Bu bilgilerin tümü: Gün, Ayın Adı, günün tarihi, saat:dakika:saniye, Yaz saati/kış saati ve yıl)



Bu özlelikleri kullanabilmek için öncelikle Date() sınıfının bir değişkene alınması gerekir.


<script language="javascript">

var a=new Date()

var b

b=a.getDay()

alert(b)

</script>


Scrip çalıştığında ekranda gün bilgisi görünecektir. Burada önce a değişkenine Date() bilgileri yükleniyor ve ardından getDay komutu ile gün bilgisi b değişkenine atanıyor. Alert ile ekranda güne karşılık gelen sayı gösteriliyor.(Örneğin çarşamba ise "3")


NOT: getYear komutu, yılı bilgisini 1900 ylını baz alarak gösterir.YAni 2012 yılı için ekranda 2012-1900= 112 yazacaktır. Dolayısıyla getYear yerine getFullYear kullanılır.


<pre>
<script language="javascript">

var bugun = new Date();
var saat=bugun.getHours()
var dakika=bugun.getMinutes()
var gun=bugun.getDate()
var ay=bugun.getMonth()+1
var yil=bugun.getFullYear()

document.writeln("Saat şu anda: " , saat , ":" , dakika )

document.write("Tarih ise: ", gun , "/" , ay , "/" , yil );

</script>
</pre>


Burada ekranda saat ve tarih bilgisi görünecektir. Burada getMonth komutuna +1 eklenmiştir.Çünkü ay bilgisi 0'dan başlar. Dikkat edilirse date bilgisi bugun isimli değişkene atanıyor ve ardından tüm zaman değerleri ayrı ayrı değişkenlere alınarak ekrana yazdırılıyor.

 

Ancak burada tarih 4/4/2012 şeklinde yazacaktır. Eğer gün ve ay ismi eklemek istenirse, o zaman döngü elemanlarını kullanarak bu bilgileri bir değişkene yüklemek gerekir.

<pre>
<script language="javascript">

var bugun=new Date()
var saat=bugun.getHours()
var dakika=bugun.getMinutes()
var saniye=bugun.getSeconds()
var gun=bugun.getDate()
var gunad=bugun.getDay()
var ay=bugun.getMonth()
var yil=bugun.getFullYear()
var a,b

switch (gunad)

{

case 0 :
a="pazar"
break

case 1 :
a="pazartesi"
break

case 2 :
a="salı"
break

case 3 :
a="çarşamba"
break

case 4 :
a="perşembe"
break

case 0 :
a="cuma"
break

case 6 :
a="cumarresi"
break

}

switch (ay)
{
case 0 :
b="ocak"
break

case 1 :
b="şubat"
break

case 2 :
b="mart"
break

case 3 :
b="nisan"
break

case 4 :
b="mayıs"
break

case 5 :
b="haziran"
break

case 6 :
b="temmuz"
break

case 7 :
b="ağustos"
break

case 8 :
b="eylül"
break

case 9 :
b="ekim"
break

case 10 :
b="kasım"
break

case 11 :
b="aralık"
break
}

document.writeln("saat : ",saat," : ",dakika," : ",saniye)
document.writeln("tarih : ",gun," ",b," ",yil," ",a)

</script>
</pre>


 

Burada switch-case döngüleri ile hem ay hemde gün bilgileri indexlerine göre, a ve b değişkenlerine aktarılıyor. getMonth ve getDay metodları 0'ı ilk indeks kabul eder. ( ay için 0=ocak) (gün için 0=pazar) Ekran görünümü aşağıdaki gibi olur.


      


Ancak programı bu şekilde yazmak hem zaman kaybettirir hemde programı yavaşlatır. Bunun yerine for düngüsü ilave edilerek daha kısa bir program yazılabilir.
 

<pre>
<script language="javascript">

var bugun=new Date()
var saat=bugun.getHours()
var dakika=bugun.getMinutes()
var saniye=bugun.getSeconds()
var gun=bugun.getDate()
var gunad=bugun.getDay()
var ay=bugun.getMonth()
var yil=bugun.getFullYear()
var a,b

var gunler=new Array ("pazar","pazartesi","salı","çarşamba","perşembe","cuma","cumartesi")
var aylar=new Array ("ocak","şubat","mart","nisan","mayıs","haziran","temmuz","ağustos","eylül","ekim","kasım","aralık")

for (i=0; i<=11; i++) {

switch(gunad)

{
case i :
a=gunler[i]
}

switch(ay)

{
case i :
b=aylar[i]
}

}

document.writeln("saat : ",saat," : ",dakika," : ",saniye)
document.writeln("tarih : ",gun," ",b," ",yil," ",a)

</script>
</pre>


Burada öncelikle ay ve gün bilgileri string olarak iki ayrı dizi değişkenine aktarılıyor. (gunler ve aylar) .Daha sonra for ile
0 dan 11 e kadar dönecek bir döngü başlatılıyor. For döngüsü içerisindede hem aylar için hemde günleriçin iki ayrı switch caseaçılıyor. "i" nin her değerinde "gunad (getDay)" ve "ay (getMonth)" değişkenlerinin durumu kontrol ediliyor. Örneğin ay değişkeninde 3 değeri var ise (Nisan), i=3 olduğunda case 3 değeri sağlanacak ve b değişkenine aylar[3] değeri aktarılacak. Diziye bakıldığında 3. indekse karşılık "nisan" aynın geldiği görülür.Burada önemliolan diziyioluşturuken ilk indeksin 0 olarak numaralandıralacağını ve aynı zamanda getMonth ve getDay komutlarının bilgileri verirken ilk değerleri 0 olarak (ocak=0, pazar=0) gönderdikleri unutulmamalıdır.Ekran çıktısı öncekiyle aynı olacaktır.


      


Tek haneli gösterimleri 05 şekline çevirmek için aşağıdaki if cümleleri eklenebilir.
 

<pre>
<script language="javascript">

var bugun=new Date()
var saat=bugun.getHours()
var dakika=bugun.getMinutes()
var saniye=bugun.getSeconds()
var gun=bugun.getDate()
var gunad=bugun.getDay()
var ay=bugun.getMonth()
var yil=bugun.getFullYear()
var a,b

var gunler=new Array ("pazar","pazartesi","salı","çarşamba","perşembe","cuma","cumartesi")
var aylar=new Array ("ocak","şubat","mart","nisan","mayıs","haziran","temmuz","ağustos","eylül","ekim","kasım","aralık")

if (saat<=9) {

saat="0"+saat

}

if (dakika<=9) {

dakika="0"+dakika

}

if (saniye<=9) {

saniye="0"+saniye

}

if (gun<=9) {

gun="0"+gun

}

for (i=0; i<=11; i++) {

switch(gunad)

{
case i :
a=gunler[i]
}

switch(ay)

{
case i :
b=aylar[i]
}

}

document.writeln("saat : ",saat," : ",dakika," : ",saniye)
document.writeln("tarih : ",gun," ",b," ",yil," ",a)

</script>
</pre>

 
Burada saat dakika saniye ve gün bilgisinin değerine bakılıyor. Eğer 9 veya 9dan küçükse yanına string olarak "0" ekleniyor.
 

    
 
setTimeout......(süreli çalıştıma)
 
Bir fonksiyonu belli bir süre sonra çalıştırır. Genel kullanımı
 

setTimeout("fonskiyonadı()" , milisaniye)

 
Parantez içerisinde belirtilen fonksiyonu, milisaniye cinsinden yazılan zaman kadar sonra çalıştırır.
 

<head>

<script language="JavaScript">

function merhaba() {

alert("Selam!");

}

</script>


</head>

<body>

<script language="JavaScript">

setTimeout ("merhaba()" , 3000)

</script>


</body>

 
Script çalıştığında setTimeout ("merhaba()" , 3000) komutuyla, merhaba isimli fonksiyon sayfa açıldıktan 3000 milisaniye, yani 3 saniye sonra çalışacaktır.
 

<head>

<script language="JavaScript">

function merhaba() {

alert("Selam!")

setTimeout ("
merhaba()" , 3000)

}

</script>


</head>

<body>

<script language="JavaScript">

merhaba()

</script>


</body>

 
Script çalıştığında, body arasında yazılan merhaba() komutuyla merhaba fonksiyonu çalışacaktır. Merhaba fonksiyonuna dikkat edilirse, fonksiyon kapanmadan önce setTimeout ("merhaba()" , 3000) komutu eklenmiş.Fonksiyon çalıştığında alert ile uyarı verildikten sonra program bu satırla (setTimeout) karşılaşacak ve 3 sn sonra fonsiyonu tekrar çalıştıracaktır.Dolayısıyla sayfada 3 saniyede bir uyarı kutusu açılacaktır. Ancak programın alert satırını geçebilmesi için, kullanıcının açılan uyarı kutusunda "tamam" tuşuna basması gerekir.Bastıktan 3 sn sonra uyarı tekrar gelecektir.
 

<HTML>
<HEAD>

<SCRIPT LANGUAGE="Javascript1.2">

function tarihsaat()

{

var saat = new Date()

document.saatForm.saatkutusu.value = saat.toString()

setTimeout("tarihsaat()",1000)

}

</SCRIPT>

</HEAD>

<BODY onLoad="tarihsaat()">

<FORM method="POST" name="saatForm">

Şu anda saat: <input type=text size=50 maxlength=50 name="saatkutusu">

</FORM>

</BODY>
</HTML>

 
Burada önce tarihsaat adında bir fonksiyon tanımlanıyor. Dikkat edilirse saat isimli değişkene önce Date sınıfı bilgileri aktarılıyor ve ardından saat.getTime() komutuyla, saat değişkeninin içeriği time bilgisine dönüştürülüyor.

document.saatForm.saatkutusu.value = saat.toString() satırıyla saat değişkeni içerisindeki bilgi "string" ifadeye (tostring) çevriliyor ve dökümandaki, saatForm isimli form içindeki saatkutusu isimli metin kutusunun value değerine aktarılıyor. Yani o kutunun içine yazılıyor.

Ardından gelen setTimeout("tarihsaat()",1000) satırıyla tarihsaat fonksiyonu (içinde bulunulan fonksiyon) 1000 milisaniye yani 1 sn sonra tekrar çalıştırılıyor.Bu durumda fonksiyon bir kez çağrıldığında her bir saniyede tekrar çalışacak şekilde ayarlanmış oluyor.

Body etiketine dikkat edilirse; onLoad="tarihsaat()" ifadesiyle body bölümü sayfaya yüklendiğinde, yani sayfa açıldığında tarihsaat fonksiyonu otomatik çalıştırılıyor. [onLoad =yüklenirken]

Sonuç olarak her bir saniyede fonksiyon tekrarı ile time komutu tazelendiği için ekranda saniye akışı görülüyor.