+ Üye ol
|
İçerik Arama
Son üyeler
Temalar Kimler sitede
Ziyaretçi Sayısı
Alexa |
Ana sayfa / xoopshocasi.com / Tema Dersleri / Temamıza Saat ve Tarih
Temamıza Saat ve TarihBugüne kadar tüm tema derslerimizi takip ettiyseniz artık temalarla ilgiliçoğu şeyi biliyorsunuz demektir. Bu dersimizde ise biraz tema bilgilerinizi geliştirecek ama özellikle de javascript konularına giriş yapmamızı sağlayacak bir konuyu anlatacağım..temamıza saat ve tarih yazdıracağız. Şimdi ne varmış tarih ve saat yazdırmakta dediğinizi duyar gibiyim..evet belki sayfa yüklendiği andaki tarihi ve saati sayfanıza yazdırmak çok kolay olabilir..ancak bu saatin sayfa tekrar yüklenmeden sürekli ilerlemesini sağlamak her web programcısının harcı değildir. Merak etmeyin bu ders sonunda bir miktar fikir sahibi olacağınız javascript dilini ilerde ayrıntılı derslerle anlatacağım..hatta javascriptin abisi olan ajax da zaman zaman konularımız arasında yer alacak..şimdi kodlarımızı yazmaya başlayalım. İlk hazırladığım tema dersi olan theme.html dosyasını hazırlama konusunu tekrardan iyice okumanızı tavsiye ediyorum..zira öncelikle sayfanızda saat ve tarihin gözük- mesini istediğiniz yeri hazırlayacağız..bunu ister bir tablo sütunun da isterseniz sayfanın en altında veya en üstünde hazırlayabilirsiniz..bu kısımı sizin tercihinize bırakıyorum. Eğer saat ve tarihin gözükmesini istediğiniz yeri belirlediyseniz..şimdi bu alanda aşağıdaki kodlarla bir div oluşturuyoruz..stil özelliklerini css kullanarak özelleş- tirebilirsiniz: <div id="tarihim" style="font-family:verdana;font-size:10pt;color:#336699;font-weight:bold"></div> evet bu sadece işimizin ilk kısmıydı..yani saat ve tarihin gözükmesini istediğimiz yeri hazırlamış olduk..şimdi bu tagi yerleştirdikten sonra herhangi bir yere alağıdaki javascript kodlarını eklemelisiniz..ayrıntılı olarak inceleyelim:
<script language="javascript">
bu tag ile tarayıcımıza javascript ile kod yazmaya başladığımızı bildiriyoruz: function ayarla() { artık javascript ile yazmaya başladık..saatimizin hayati fonksiyonunu tanımlamaya başlıyoruz var simdi = new Date() önce simdi isimli bir değişken tanımladım ve bu değişkene tarihi atadım var aylar = new Array('Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık') var gunler = new Array('Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi') bu kodlarla aylar ve gunler adında iki adet dizi tanımladım..bu diziler sizinde anlayacağınız gibi ayın ve günün doğru ve Türkçe olarak ekrana yazdırılmasında kullanılacak: bu_gun = gunler[simdi.getDay()] bu_ay = aylar[simdi.getMonth()] bu kodlar bu_gun ve bu_ay değişkenlerine gün ve ayı alarak kaydediyor..bu kodları biraz daha açık anlatırsam javascript ve hatta genel web programcılığı hakkında daha çok fikir sahibi olacağınıza inanıyorum..hatırlarsanız fonksiyon tanımlamamızın başında simdi değişkenini tarih(date) metodunu kullanması için ayarlamıştık..burada kullandığımız simdi.getDay() öntanımlı fonksiyonu aslında bir sayı döndürecektir..yani bize gün numarasını döndürür..bu sebeple bu metodu gunler[] dizisi içinde kullandım böylece bu dizinin gün numarasına karşılık gelen elemanını çekme şansına sahip oluyorum..bu arada bir ayrıntı daha vereyim.. programcılıkta saymaya 1'den değil 0'dan başlanır..yani bu metodda pazar günü 0 sayısını döndürecektir..gunler dizisinde de ilk eleman yani 0 sırasında olan Pazar olduğu için ekrana bu yazılacaktır..bu_ay için de aynı şeyler söz konusu.. if ( simdi.getDate() < 10 ) { ayin_kacı = "0" + simdi.getDate() } else { ayin_kacı = simdi.getDate() } bu kod ise bir if yani koşullu döngü..bu kodun görevi ayın kacı olduğunu öğrenmek ve eğer tek basamaklı bir sayı dönüyorsa başına 0 eklemek..yani çift basamaklı hale getirmek..ayrıca ayın kaçı olduğunun ayin_kaci olarak kaydettiğine de dikkat edin yil = simdi.getYear() aynı şekilde hangi yılda olduğumuzu öğrendik ve yil olarak kaydettik if ( simdi.getHours() < 10 ) { saat = "0" + simdi.getHours() } else { saat = simdi.getHours() } bu sefer de saati öğrendik ve çift basamaklı hale getirdik if ( simdi.getMinutes() < 10 ) { dakika = "0" + simdi.getMinutes() } else { dakika = simdi.getMinutes() } if ( simdi.getSeconds() < 10 ) { saniye = "0" + simdi.getSeconds() } else { saniye = simdi.getSeconds() } aynı şeyi dakika ve saniye için de tekrarlıyoruz..hiç bir farkı yok tarihim.innerHTML = ayin_kacı + " " + bu_ay + " " + yil + "," + bu_gun + "," + saat + ":" + dakika + ":" + saniye şimdi en başta tanımladığımız div içine tüm hazırladıklarımızı istediğimiz düzen içinde yazdırıyoruz..buradaki + işareti toplama değil değişkenleri birbiri ardına yazmak için kullanılır..yani phpdeki "." gibi setTimeout('ayarla()',1000) } ayarla() </script> geldik en can alıcı noktaya..buraya kadar tüm yaptıklarımız..saat ve tarihi düzenleyip yazdırmak içindi..şimdi de saatin ilerlemesini sağlıyoruz..bu son kod bloğu ile en başta tanımladığımız ayarla() fonksiyonu 1000 milisaniyede bir kendini tekrarlıyor..aslında tam olarak açıklamak gerekirse..fonksiyon bittikten sonra 1000 milisaniye bekleniyor ve diğer işleme geçiliyor..ki diğer işlemde gördüğünüz gibi aynı ayarla() fonksiyonu.. umarım bu ders yardımıyla javascript hakkındaki bilgilerimiz biraz daha pekişmiştir..ilerde daha karmaşık uygulamalarla görüşmek üzere herkese kolay gelsin.. Bora Canbula ------------ xoopshocasi@xoopshocasi.com Ayrıca bakınız
 
Yorumlardan yazarları sorumludur.
|
