JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20.4 Sayfa 1

20.4 - Tarih,Takvim,Saat Uygulamaları

20.4.1 - Güncel Tarihin Yerel Dile Çevrilmesi

Güncel tarih bilgilerinin yerel dile çevrilmesi, otomatik olarak gerçekleştirilebilir. Tarih verilerinin yerel dillere çevrilmesi toLocaleString() metodunun uyglanması ile gerçekleşir. Bu metodun geri döndürdüğü değer, belge çözümleyicisine özgüdür. Bu nedenle, belgenin çözümlendiği belge çözümleyicisinin vereceği sonuç daha önceden kontrol edilmelidir. Bu konudaki bir programın, kodları aşağıda görülmekte ve bu program, bağlantılı olduğu uygulama sayfasında, çalışmaktadır.

/* <![CDATA[  */

function yerelTarih() {

var 
datum = new Date(),
girişıNoktası = document.getElementById(bağlantı),
text = document.createTextNode('Günün Tarihi : ' + datum.toLocaleString ()),
p0 = document.createElement('p');

p0.setAttribute('class', 'tarih');
p0.appendChild(text);
insertAfter(p0, girişNoktası);
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(yerelTarih);

/* ]]>  */
		

Yukarıdaki program, sadece IE 8, Opera 10 ve FireFox 3.5 da türkçeleştirilmiş bir çıkış verebilmektedir. Safari 4 ve Chrome 3 bu programın ingilizce çıktısını verebilmektedir. Diğer bir deyişle, bu son iki belge çözümleyicisi, toLocaleString () metodu ile tarih sınıfı nesne örneklerini türkçe karakter dizgilerine dönüştüremez. Bu nedenle , söz konusu dönüştürme yöntemlerini bizim organize etmemiz gerekli olmaktadır.

Tarih sınıfı nesne örneklerinin türkçeleştirilmesi için örnek bir fonksiyon , aşağıda görülmektedir:

function türkçeTarih() {
var 
yerelTarih = new Date(),
tarih = {};
gün = new Array('Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'),
ay = new Array('Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'), 
geçerliTarih = String(yerelTarih.getDate());
geçerliYıl = String(yerelTarih.getYear() % 100) + 2000),
geçerliAy = String(ay[yerelTarih.getMonth()]),
geçerliGün = String(gün[yerelTarih.getDay()]),
geçerliSaat = String(yerelTarih.getHours()),
geçerliDakika = String(yerelTarih.getMinutes()),
geçerliSaniye = String(yerelTarih.getSeconds());

if(geçerliSaat.valueOf() < 10) {
geçerliSaat = '0' + geçerliSaat;
}

if(geçerliDakika.valueOf() < 10) {
geçerliDakika = '0' + geçerliDakika;
}

if(geçerliSaniye.valueOf() < 10) {
geçerliSaniye = '0' + geçerliSaniye;
}

tarih = { tarih : geçerliTarih, yıl : geçerliYıl, ay : geçerliAy, gün : geçerliGün, saat : geçerliSaat, dakika : geçerliDakika, Saniye : geçerliSaniye};
 
return tarih;
}
			

Yukarıda görülen türkçeTarih() {fonksiyonu, tarih verilerinin türkçe karşılıklarını içeren ilişkisel diziyi döndüren bir fonksiyondur. Bu fonksiyon, bdelib.js program kitaplığına eklenmiştir. Bu fonksiyondan türkçe tarih adlarına gereksinme duyulacak her programda yararlanılabilir. Bu konudaki bir program aşağıda görülmekte ve bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

function tarihBelirle(bağlantı) {

var 
yerelTarih = türkçeTarih(),
girişıNoktası = document.getElementById(bağlantı),
p0 = document.createElement('p'),
ata = girişNoktası.parentNode (),
gününTarihVerisi = geçerliAn['tarih'] + ' ' + geçerliAn['ay'] + ' ' + geçerliAn['yıl'] + geçerliAn['gün'] + 
' ' + geçerliAn['saat'] + ' ' + geçerliAn['dakika'] + ' ' + geçerliAn['saniye' ];

p0.setAttribute('class', 'tarih');
p0.appendChild(document.createTextNode('Günün Tarihi : ') + gününTarihVerisi));
insertAfter(p0, girişNoktası);
}


function başlat() {

tarihBelirle('bağlantı');
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]>  */
		

Yukarıdaki program, türkçe tarih bilgilerinin oluşturulması için genel bir temel niteliğindedir. Bu programda geliştirilen değerler, başka programlarda da gereksinme olduğunda uygulanabilecektir.

20.4.2 - Bir Belgenin Son Güncellenme Tarihi

Bir belgenin son güncellenme tarihi, document.lastModified() metodunun döndürdüğü tarin nesnesidir. Ne yazık ki bu metodu sadece Internet Explorer , FireFox ve Opera desteklemektedir. Webkit temelli Safari ve Chrome bu metodu desteklememektedir. Metodu destekleyen belge çözümleyiciler, aynı zamanda toLocaleString() metodunu da desteklediklerinden sonuç türkçe olarak belirtilmektedir. Belgenin son düzenlenme tarihini belirten program, kendi kendine çalışabilecek ve hiçbir kitaplığa gerek göstermeyecek şekilde düzenlenmiştir. Bu program, bağlı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

function lastModification() {
var datum = new Date(document.lastModified),
q = document.getElementsByTagName('body'),
text = '';
p = document.createElement('p');
			
if(document.lastModified) {
text = document.createTextNode('Son Değiştirme Tarihi : ' + datum.toLocaleString());
p0 = setAttribute('style', 'color: #cc9900;font : 18px verdana;');
p0.appendChild(text);
q.item(q -length - 1)..appendChild(p0);
}
		
else { 

text = document.createTextNode(Belgenin Son Düzenlenme Tarihini, IE 8, Opera 10, FireFox 3.5 kullanarak Öğrenebilirsiniz !  ' ));
p0 = setAttribute('style', 'color: #cc9900;font : 18px verdana;');
p0.appendChild(text);
q.item(q -length - 1)..appendChild(p0);
}
}

function olayDinleyicisiEkle(elm, olay, fonksiyon) {

// Eğer Belge Çözümleyici FireFox Tipi İse (GECKO Motoru)

if(elm.addEventListener) {
elm.addEventListener(olay, fonksiyon, false);
return true;
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if(elm.attachEvent) {
olay = 'on' + olay;
var r = elm.attachEvent(olay, fonksiyon);
return r;
}
		
// Eğer Belge Çözümleyici Farklı İse

else{
elm['on' + olay] = fonksiyon;
}
}

function sayfaYüklenmesiTamamlandıktanSonraÇalıştır(fonksiyon) {
olayDinleyicisiEkle(window, 'load', fonksiyon);
}

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(lastModification);

/* ]]>  */
		

Eğer bdelib.js kitaplığından yararlanılmak istenirse, yukarıdaki program, tüm yardımcı fonksiyonlar kitaplığa alınmış durumda olduğu için, sadece,

sayfaYüklenmesiTamamlandıktanSonraÇalıştır(lastModification);
		

şeklinde çalıştırılabilir.

20.4.3 - Sayısal Saat

Sayısal bir saat tasarımı, tarih verisini sayfada belirli bir yerde türkçe olarak her saniye güncelleyerekgösterecek bir program yaratmak analamına gelmektedir. Bu saatin gösterimi, değişik font ve renklerin kullanımı ile istenildiği gibi özelleştiriebilir. Bu amaçla, ilk olarak genel amaçlı bir sayısalSaat() fonksiyonu gerçekleştirilmiş ve bdelib.js program kitaplığna eklenmiştir. Bu fonksiyonun yazılımı aşağıda görülmektedir.

function sayısalSaat(girişNoktası) {
var geçerliAn = türkçeTarih(),
span = document.createElement('p'),
ata = girişNoktası.parentNode,
altDüğümler = ata.childNodes,
yerDeğiştirme = false,
tarih = document.createTextNode(geçerliAn['tarih'] + ' ' + geçerliAn['ay'] + ' ' + geçerliAn['yıl'] + ' ' + geçerliAn['gün'] + ' ' + geçerliAn['saat'] + ' ' + 
geçerliAn['dakika'] + ' ' + geçerliAn['saniye']);

span.setAttribute('style','color: red;font : 18px verdana;');
span.appendChild(tarih);
if(ata.nodeType === 1) {
ata.setAttribute('style',' position : relative; left: 70%;');
for(var i = 0; i <altDüğümler.length  : i ++) { 
if(altDüğümler.item(i).nodeType  === 1) {
ata.replaceChild(span, altDüğümler.item(i);
yerDeğiştirme = true;
}
}

if(yerDeğiştirme) {
setTimeout('sayısalSaat(span)', 1E3);
}

else {
alert('Programlama Hatası !');
}

else {
alert('Sayfa Yerleştirme Hatasıı !');
}

}
		

Yukarıda kodları görülen sayısalSaat() fonksiyonu, bdelib.js fonksiyon kitaplığına alınırsa, sayısal bir, saat aşağıda görüldüğü gibi, çok kısa bir kod yazılarak sayfanın bir köşesine yerleştirilebilir. Bu program ilgili olduğu web sayfasında çalışmaktadır.

Sayısal saat her sayfaya eklenebilir. Bunun için sayfaya aşağıdaki gibi bir satır eklenmesi yeterli olur:

...

<p>
<span id="saat"></span>
</p>

...
		

Görüntülecek sayısal saatin görüntüsü, sayısalSaat() fonksiyonun özelleştirilmesi ve istenilen stil özellilerinin belirtilmesi ile sağlanabilir.

Bir başka sayısal saat programı daha önce hazırlanmış sayı resimlerinden yararlanmaktadır. Bu resimlerin kaynaklarından biri http://www.fortochka.com adresinde bulunmaktadır. Bu siteden indirilen sayı resimleri, 0.gif, 1.gif, 2.gif vb.. şeklinde adlandırılarak, '../images/' klasörüne konulmuştur.

Modern W3C-DOM yöntemlerine göre programlama, eskiye göre çok farklıdır. Bu programda ilk olarak güncel saat değerleri analiz edilerek altı gösterge kutusu için gerekli resimler seçilir ve sayfa öğeleri yerleştirilip güncel saat, dakika ve saniye değerleri, gözalıcı resimlerle görüntülenir.

Bundan sonra her saniye tekrarlanarak bu değerler incelenir ve eski resimler, değerleri güncel saat değerlerini gösterecek şekilde, yenileri ile yer değiştirir. Bu programın kodları aşağıda görülmekte ve bağlı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */

function ilkGörüntü() {
var saatGörüntüsü = document.getElementById('saat'),
an = new Date(),
th = an.getHours(),
th1 = '',
th2 = '',
td = an.getMinutes(),
td1 = '',
td2 = '',
ts = an.getSeconds(),
ts1 = '',
ts2 = '',
sayı1 = '',
sayı2 = '',
sayı3 = '',
sayı4 = '',
sayı5 = '',
sayı6 = '',
span1 = document.createElement('SPAN'),
span2 = document.createElement('SPAN'),
span3 = document.createElement('SPAN'),
span4 = document.createElement('SPAN'),
span5 = document.createElement('SPAN'),
span6 = document.createElement('SPAN'),
resim1 = document.createElement('IMG'),
resim2 = document.createElement('IMG'),
resim3 = document.createElement('IMG'),
resim4 = document.createElement('IMG'),
resim5 = document.createElement('IMG'),
resim6 = document.createElement('IMG');

saatGörüntüsü.setAttribute('style', 'padding-left :1000px; font : bolder italic 40px Trebuchet;color : red;');

span1.setAttribute('id', 'gösterge1');
span2.setAttribute('id', 'gösterge2');
span3.setAttribute('id', 'gösterge3');
span4.setAttribute('id', 'gösterge4');
span5.setAttribute('id', 'gösterge5');
span6.setAttribute('id', 'gösterge6');

saatGörüntüsü.appendChild(span1);
saatGörüntüsü.appendChild(span2);
saatGörüntüsü.appendChild(span3);
saatGörüntüsü.appendChild(span4);
saatGörüntüsü.appendChild(span5);
saatGörüntüsü.appendChild(span6);

span1.appendChild(resim1);
span2.appendChild(resim2);
span3.appendChild(resim3);
span4.appendChild(resim4);
span5.appendChild(resim5);
span6.appendChild(resim6);


if(th < 10) {
th = '0' + th;
}
else {
th = th + '';
}
if(td < 10) {
td = '0' + th;
}
else {
td = td + '';
}
if(ts < 10) {
ts = '0' + ts;
}
else {
ts = ts + '';
}

th1 = th.substring(0, 1);
sayı1 = '../images/' + th1 + '.gif';
resim1.setAttribute('src', sayı1);
th2 = th.substring(0, th.length);
sayı2 = '../images/' + th2 + '.gif';
resim2.setAttribute('src', sayı2);

td1 = td.substring(0, 1);
sayı3 = '../images/' + td1 + '.gif';
resim3.setAttribute('src', sayı3);
td2 = td.substring(0, td.length);
sayı4 = '../images/' + td2 + '.gif';
resim4.setAttribute('src', sayı4);

ts1 = ts.substring(0, 1);
sayı5 = '../images/' + ts1 + '.gif';
resim5.setAttribute('src', sayı5);
ts2 = ts.substring(0, ts.length);
sayı6 = '../images/' + ts2 + '.gif';
resim6.setAttribute('src', sayı6);
}


function dijitalSaat() {
var an = new Date(),
th = an.getHours(),
th1 = '',
th2 = '',
td = an.getMinutes(),
td1 = '',
td2 = '',
ts = an.getSeconds(),
ts1 = '',
ts2 = '';


if(th < 10) {
th = '0' + th;
}
else {
th = th + '';
}
if(td < 10) {
td = '0' + th;
}
else {
td = td + '';
}
if(ts < 10) {
ts = '0' + ts;
}
else {
ts = ts + '';
}


th1 = th.substring(0, 1);
sayı1 = '../images/' + th1 + '.gif';
span1= document.getElementById('gösterge1');
for(var i = 0; i <span1.childNodes.length  : i ++) { 
if(span1.childNodes.item(i).nodeType  === 1) {
span1.childNodes.item(i).setAttribute('src', sayı1);
}
}
th2 = th.substring(0, 2);
sayı1 = '../images/' + th2 + '.gif';
span1= document.getElementById('gösterge2');
for(var i = 0; i <span1.childNodes.length  : i ++) { 
if(span2.childNodes.item(i).nodeType  === 1) {
span2.childNodes.item(i).setAttribute('src', sayı2);
}
}

td1 = td.substring(0, 1);
sayı3 = '../images/' + td1 + '.gif';
span3= document.getElementById('gösterge3');
for(var i = 0; i <span1.childNodes.length  : i ++) { 
if(span3.childNodes.item(i).nodeType  === 1) {
span3.childNodes.item(i).setAttribute('src', sayı3);
}
}
td2 = td.substring(0, 2);
sayı4 = '../images/' + td2 + '.gif';
span4= document.getElementById('gösterge4');
for(var i = 0; i <span1.childNodes.length  : i ++) { 
if(span4.childNodes.item(i).nodeType  === 1) {
span4.childNodes.item(i).setAttribute('src', sayı4);
}
}

ts1 = ts.substring(0, 1);
sayı5 = '../images/' + ts1 + '.gif';
span5= document.getElementById('gösterge5');
for(var i = 0; i <span1.childNodes.length  : i ++) { 
if(span1.childNodes.item(i).nodeType  === 1) {
span5.childNodes.item(i).setAttribute('src', sayı5);
}
}
ts2 = ts.substring(0, 2);
sayı6 = '../images/' + ts2 + '.gif';
span6= document.getElementById('gösterge6');
for(var i = 0; i <span6.childNodes.length  : i ++) { 
if(span6.childNodes.item(i).nodeType  === 1) {
span6.childNodes.item(i).setAttribute('src', sayı6);
}
}
}

function başlangıç() {
ilkGörüntü();
setInterval('dijitalsaat()', 1E3);
}


sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlangıç);

/* ]]>  */

Yukarıdaki program, dizilerin kullanılması ile önemli ölçüde kısalabilir, fakat izlenmesi de belirli bir şekilde güçleşebilir. Aşağıda, bu programın, dizilerin kullanıldığı sürümünün kodları görülmekte ve bu program, bağlantılı olduğu sayfada çalışmaktadır.

/* <![CDATA[  */


function ilkGörüntü() {
var saatGörüntüsü = document.getElementById('saat'),
an = new Date(),
span = new Array(),
sayı = new Array(),
resim = new Array(),
gösterge = new Array(),
t = new Array(),
temp = 0;

for(var i = 0; i < 6; i ++) { 
span[i] = document.createElement('SPAN');
resim[i] = document.createElement('IMG');
span[i].setAttribute('id', 'gösterge' + i);
saatGörüntüsü.appendChild(span[i],
span[i].appendChild(resim[i],
if(i === 0) {
t[i] =an.getHours();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
if(i === 2) {
t[i] =an.getMinutes();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
if(i === 4) {
t[i] =an.getSeconds();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
sayı[i] = '../images/' + t[i] + '.gif';
resim[i].setAttribute('src', sayı[i]);
};
}


function dijitalSaat() {
var an = new Date(),
span = new Array(),
sayı = new Array(),
resim = new Array(),
gösterge = new Array(),
t = new Array(),
temp = 0;

for(var i = 0; i < 6; i ++) { 
span[i] = document.createElement('SPAN');
resim[i] = document.createElement('IMG');
span[i].setAttribute('id', 'gösterge' + i);
saatGörüntüsü.appendChild(span[i],
span[i].appendChild(resim[i],
if(i === 0) {
t[i] =an.getHours();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
if(i === 2) {
t[i] =an.getMinutes();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
if(i === 4) {
t[i] =an.getSeconds();
if(t[i] < 10) {
t[i] = '0' + t[i];
}
else {
t[i] = t[i] + '';
}
temp = t[i];
t[i] = temp.substring(0, 1);
t[i + 1] = temp.substring(1, 2);
}
sayı[i] = '../images/' + t[i] + '.gif';
span[i] = document.getElementById('gösterge' + i);
for(var j = 0; j <span[i].childNodes.length ; j ++) { 
if(span[i].childNodes.item(j).nodeType === 1) {
span[i].childNodes.item(j).setAttribute('src', sayı[i]);
}
}
}
}

function başlangıç() {
ilkGörüntü();
setInterval('dijitalsaat()', 1E3);
}


sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlangıç);

/* ]]>  */