JavaScript ile dijital saat yapımı.
http://www.w3schools.com da bulduğum basit ama öğretici bir Javascript uygulaması. Basit olduğuna bakmayın o sitede Advanced Examples kategorisinde bulunuyor. Yani aslında bu çalışma ileri düzeyde bir JavaScript uygulaması. siteden aldığım kodları blogger'da çalışacak şekilde düzenledim ve konunun daha iyi anlaşılabilmesi için kodları Türkçeleştirmeye çalışıtm. Kodların orijinallinde saati çalıştıran fonksion body tag'ı içine onload="saatim()" yazılarak çalıştırılıyordu ben onu scriptin içine aldım. Eğer fonksiyonu onload parametresiyle çalıştıracaksanız script içindeki saatim(); yazan satırı silin ve turuncu renklli parametreyi body tagına yerleştirin. Bu durumda scripti de head taglarinin arasına yerleştirmelisiniz. Yerleştirmeyi bu şekilde yaptığınızda web sayfanız yüklendiği zaman saatim() fonksiyonu otomatik olarak çalışacak ve web tarayıcınız fonksiyon kodlarına bağlı olarak sayfa içinde id değeri saat olan HTML elamanlarını arayacak ve bulduklarının içine o anki zamanı saat, dakika ve saniye olarak yazacaktır.
Aşağıdaki kodlamada ise durum biraz farklı. Öncelikle saati yazdırmak istediğim id'si saat olan bir HTML elemanı oluşturdum. Sonra da altına Javascirpt kodlarını yerleştirdim. Burada sıralama önemli. Bir javascript kodunu sayfa içinde kullanacaksanız mutlaka etki edeceği elemanların altına yazmalısınız. Unutmayın web tarayıcınız da aynı sizin gibi kodları yukardan aşağı okur. Eğer HTML elemanını kodun altına yazarsanız browser fonksiyonu başlatan kodu bulamaz ve programınız çalışmaz(eleman içine onload parametresi yazabilirsiniz ama herzaman sağlıklı çalışmaz, önermiyorum). JavaScript programları, elemana tıklama veya yükleme sayfa olaylarının tetiklemesiyle çalışır. Kodlama yaparken bunu göz önüne almalısınız. Aşağıdaki kodlamada hangi elemanın ne iş yaptığını kısaca anlatmaya çalıştım umarım yararlı olur.
<div id="saat"></div> // saati göstereceğim HTML elemanı
<script type="text/javascript">
saatim(); // saatim fonksiyonu çağırılıyor
function saatim() // fonksiyon başlangıcı
{
var zaman=new Date(); // zaman isimli bir Date nesnesi oluşturuluyor.
var sa=zaman.getHours();// zaman nesnesinden getHours metoduyla saat bilgisi bir değişkene aktarılıyor
var da=zaman.getMinutes(); // aynı işlem getMinutes ile dakika için yapılıyor
var sn=zaman.getSeconds(); // yine saniye bilgisi için getSeconds medodu kullanılıyor
// buraya kadar kullanılan getHours, getMinutes ve getSeconds metodları JavaScript'tin standart metdolarıdır.
da=zamanAyarla(da);
sn=zamanAyarla(sn);
// Yukarıdaki iki satırda çift haneli gösterim yapmak için dakika ve saniye değerleri zamanAyarla fonksiyonuna gönderiliyor. fonksiyon kendisine gelen sayı 10 dan küçükse bu değerin önüne bir sıfır ekleyip geri döndürüyor
document.getElementById('saat').innerHTML=sa+":"+da+":"+sn; // id değeri saat olan HTML nesnesini içine sa, da ve sn değişkenlerinin değerlerini yazıyor
setTimeout("saatim()",1000); //Her 1000ms(1saniye) de bir saatim() fonskiyonunu çalıştıran standart JavaScript fonkisyonu burası saatin gerçek bir saat gibi her saniye değer değiştirmesini sağlıyor.
}
function zamanAyarla(i) // i parametresiyle bir değer alarak fonksiyon başlar
{
if (i<10) // koşul inceleniyor i 10 dan küçükse hemen alt satırdaki işlemler yapılacak. i 10 dan büyükse doğrudan return satırına gidilecek
{
i="0" + i; // i değerinin önüne 0 ekleniyor(String değer, JavaScript'te değişkenler için tip koruması yoktur)
}
return i; // bu fonksiyon işlemleri sonucunda elde edilen değer fonksiyonun çağırıldığı yere geri döndürülüyor.
}
</script>
Şayet kodlamaları doğru yaptıysak saatimiz aşağıdaki gibi çalışacaktır. Ben sadece CSS ile biraz görünümünü değiştirdim. Siz de kendi CSS tasarımınızı uygulayabilirsiniz.