JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20.3 Sayfa 2

20.3.3 - veriTipiYaz() Fonksiyonu

VeriTipiYaz() foksiyonu, ilk olarak bölüm 2.7.2.1 de tanıtılmıştır. Bu fonksiyonun yazılımı aşağıda görülmektedir:

function veriTipiYaz(veri , bilgiYeri) {

var bağlantıNoktası = document.getElementById(bilgiYeri);

bağlantıNoktası.appendChild(document.createTextNode(veri + "   (veri tipi : " + typeof(veri) + ")");
}
		

Bu fonksiyon, bağlantı noktasının stil niteliğini etkilememektedir ve çalışması sonunda sadece bağlantı noktasının içeriğine katkı yapmaktadır. Bu fonksiyon bdelib.js program kitaplığında bulunmaktadır. Bu fonksiyonun bir uygulaması, 2.7.2.1 deki uygulama sayfasında görülebilir.

20.3.4 - veriYaz() Fonksiyonu

BU fonksiyon bolüm 2.4.6 da tanıtılmıştır. yazılımı aşağıda görülmektedir :

function veriYaz(veri , bilgiYeri1 , bilgiYeri2) {

var bağlantıNoktası = document.getElementById(bilgiYeri1);
bağlantıNoktası.appendChild(document.createTextNode(veri);
bağlantıNoktası = document.getElementById(bilgiYeri2);
bağlantıNoktası.appendChild(document.createTextNode(typeof(veri));
}
		

Bu çok basit fonksiyon, içeriğine katkı yapılacak iki tane bağlantı noktasına erişim yapmaktadır. Fonksiyon bağlantı noktalarının stil niteliklerini etkilememekte ve kullanıcılar sonuç ve sonucun tipini ayrı stillerde görüntüleyebilmektedirler. Bu fonksiyon bdelib.js program kitaplığında bulunmaktadır ve bir uygulaması, bölüm 2.4.6 da yapılmıştıır.

20.3.5 - Bir Metin Düğümüne Erişim Ve İçeriğinin Değiştirilmesi

Bir sayfadaki bazı metin içeriklerine ulaşılıp bunların değiştirişmeleri veya yerlerine yeni metinler yerleştirilmesi, web programlamasında çok sık gerekebilen bir yöntemdir. W3C-DOM yöntemleri, sayfadaki sözel içeriğe uygulanabilecek birçok metot tanımlamıştır. Bu metotlar özellikle CharacterData arabiriminde tanımlanmış ve Text arabirimine kalıtımla aktarılmışlardır. Bu konuda ker iki arabirimde de çok sayıda uygulama yapılmıştır.

Bilgilerin tazelenmesi açısından, bir web sayfasında sözel içeriğin, Text arabiriminde tanımlanmış nesne sınıfı yapısında bir düğüm nesnesi örenği olduğunu hatırlatalım. Programlama tekniği açısından, nesne örenkleri bellekte belirli bir bölgede sabit kalmakta ve bu bilgilere, bellekteki yerlerine eriim sağlayan bellek referansları (pointer) aracılığı ile ulaşılmaktadır. JavaScript programlama dilinde bellek referanslarının mutlak değerine erişilemez ve bunlar sadece değişkenlere atanarak kullanılabilirler.

Bir web sayfasında, sözel düğümler, <body> veya <form> gibi elementlerin doğrudan alt düğümleri olamaz. Bu düğümlerin sözel içerik alabilen element düğümlerinin alt düğümü olabilir. Sözel içerik alabilen elementler, <div> veya <p> gibi blok düzey elementler olabileceği gibi, <span> gibi satıriçi elementler de olabilir.

Alt düğüm olarak sözel içerik düğümü içerebilen element düğümleri normalde sadece bir tane sözel içerik düğümü içerirler. Bu sözel içerik düğümünün ail alt düzey düğümü olması gerekmez. Bunun için, sözel içerik düğümünü alt düzey düğümü olarak içeren element düğümünün, tüm alt düzey düğümlerinin incelenerek sözel içerik düğümünün belirlenmesi gerekir. Bir element düğümünün bellek referansı, tüm alt düzey düğümlerin bellek referanslarına erişim olanağı sağlar, alt düzey düğümlerin bellek referanslarının taranması ile sözel düğümün bellek referansı saptanabilir ve saptanmış olan bu bellek referansının değeri bir değişkene atanabilir. Bu değişkenindeğeri, düğümün sözel içeriğidir ve bu içerik, her türlü çekirdek veya W3C-DOM metotlarından yararlanılarak bu karakter dizgisi (string) tipinde verinin değeri değiştirilebilir.

Bu konuda şama aşama gitmek gerekir. İlk öncelikle yapılacak şey, sözel düğümün bulunduğu taşıyıcı elemanın bellke referansının saptanmasıdır. Bu konuda en garantili yolun document.getElementById() metodu olduğunu biliyoruz. Yöntem, birçok kez uygulanmış olduğu gibi,

değeriSözelİçerikDüğümününBellekReferansıOlanDeğişken = document.getElementById('taşıyıcıElemanınIdDeğeri');
		

şeklindedir.Bunu kısaca,

taşıyıcıEleman = document.getElementById('taşıyıcıElemanınIdDeğeri');
		

olarak açıklayabiliriz. Bundan sonraki aşama, taşıyıcı elemanın alt düğümlerinin koleksiyonuna (NodeList) ulaşmaktır. Bunu da

taşyıcıElemanAltDüğümleri = taşıyıcıEleman.childNodes;
		

şeklinde çözümleyebiliriz. Taşıyıcı elemanın alt düğümlerinin sayısı,

taşyıcıElemanAltDüğümleri.childNodes.length;
		

olarak belirlenir. Bundan sonraki adım, bir döngü ile tüm alt düğüm türlerini inceleyip sözel düğümün saptanmasıdır. Bunu bir fonksiyon olarak daha önce çözümlemiş ve bdelib.js fonksiyon kitaplığına almıştık.

function sözelDüğüm(elementDüğümü) {


for (var i = 0; i < elementDüğümü.childNodes.length ; i ++) {
if(elementDüğümü.childNodes.item(i).nodeType === 3) {
break;
}
}

return elementDüğümü.childNodes.item(i);
}
		

Bu durumda, bdelib.js fonksiyon kitaplığının kullanıldığı, programlarda, taşıyıcı bir elementin sözel düğüm tipindeki alt düğümüne, (yani değeri sözel alt düğüme erişimi sağlayan bellek referansı olan bir değişkene) erişim son derece kolaylaşmaış olacak ve id değeri 'veri' olan bir sözel düğüm taşıyıcı elementin değeri sözel düğüm bellek referansı olan değişken basitçe

sözelDüğüm = sözelDüğüm('veri');
		

şeklinde elde edilebilecektir. Bu değişkenin değeri web sayfasının ilgili yerinde görüntülenmekte olan karakter dizgisidir. undan sonra, bu değişkene her türlü karakter dizigisi manipülasyon metodu uygulanarak değeri değiştirilebilir ve yeniden web sayfasındaki yerine yerleştirilebilir. Örnek olarak, bir sayfada, bazı metin içeriklerine ulaşılıp bunların yerine yeni metinler yerleştirilmesi, web programlamasında çok sık gerekebilen bir yöntemdir. Yani, bir sayfadaki

...

<p class="cursive-red" id="mesaj">
Bu Uyarıyı Lütfen Dikkate Alınız!
</p>

...
		

İçeriğinin, mouse içeriğin üstüne geldiğinde,

...

<p class="cursive-red" id="mesaj">
Dikkat Önemli Uyarı!
</p>

...
		

olarak değişmesi istenebilir.

Bu içeriğin değişmesi için, öncelikle id değeri 'yazım' olan paragraf element düğümüne erişilmeli ve bu element düğümünün bir alt düğümü olan metin düğümünü yenisi ile değiştirmektir. Burada sorun, paragraf düğümünün hangi alt düğümünün metin düğümü olduğunun belirlenmesidir. Çünkü, metin düğümünün, paragraf düğümünün ilk alt düğümü olması garanti değildir. Bu durumda ilkönce paragraf düğümünün alt düğümleri arasında Text türü olan düğümün bulunması ve bu düğümün bellek referansının bir değişkene atanarak saklanması gereklidir. Bundan sonra, öngörülen olayın gerçekleşmesi ile, bu bellek referansı yardımı ile metin düğümünün data özelliğinin değeri değiştirilebilir. Bu işlevin gerçekleşmesini sağlayan 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 mesajDeğiştir() {

var düğüm = document.getElementById('mesaj'),
metinDüğümününBellekReferansı = sözelDüğüm(düğüm);
yeniİçerik = 'DevletinTemeli Adalettir !';


metinDüğümününBellekReferansı.data = yeniİçerik;
}

function başlat() {
var sekme = document.getElementById('mesajsekmesi');

olayDinleyicisiEkle(sekme, 'click', mesajDeğiştir);
}


sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);
			
		/* ]]>  */
		

Yukarıdaki programda, kullanıcı sekmeye tıkladığında, sayfadaki bir paragraf içeriği, yenisi ile değişmektedir.

20.3.6 - Çözümlenmiş Sayfa Yapısına Yeni Bir Paragraf Eklenmesi

İlk bir örnek olarak bir sayfaya stil nitelikleri JavaScript programı tarafından belirlenen bir paragraf eklenecektir. Bu program ilişkili olduğu uygulama sayfasında çalışmaktadır.

/* <![CDATA[  */

function yeniElementEkle() {
	
var
içerik = 'Bu içerik JavaScript program adımları ile belge görüntüsüne eklenmiştir!', 
yeniMetinDüğümü = document.createTextNode(içerik),
yeniParagraf = document.createElement('p');

yeniParagraf.setAttribute('style', 'font-family : Verdana, Helvetica, sans-serif; font-size : 1.2em; font-style : italic; color :blue; padding-left :200px;' );

yeniParagraf.appendChild(yeniMetinDüğümü);

insertAfter(yeniParagraf, document.getElementById('topnavlist1'));

}


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

/* ]]>  */
		

Bu programın ikinci sürümü, önceden hazırlanmaış bir CSS sınfından yararlanmaktadır. Bu program ilişkili olduğu uygulama sayfasında çalışmaktadır.

/* <![CDATA[  */

function yeniElementEkle() {
	
var
içerik = 'Bu içerik JavaScript program adımları ile belge görüntüsüne eklenmiştir!', 
yeniMetinDüğümü = document.createTextNode(''),
yeniParagraf = document.createElement('p');

yeniParagraf.setAttribute('class', 'cursive-blue');
yeniMetinDüğümü.data = içerik;
yeniParagraf.appendChild(yeniMetinDüğümü);

insertAfter(yeniParagraf, document.getElementById('topnavlist1'));

}


sayfaYüklenmesiTamamlandıktanSonraÇalıştır(yeniElementEkle);
			
		/* ]]>  */
		

İkinci sürüm de ilki gibi iyi desteklenmektedir. Bu sürümün ilkinden farklı olarak önce boş bir metim düğümü oluşturduğunu, sonra içeriğini, data niteliğinden yararlanılarak doldurduğu görülebilir.

Görüldüğü gibi, çözümlenmiş bir belge ağacına yeni düğümlerin eklenmesi ve bu düğümlmerin stillerinin düzenlenmesi son derece kolay olmaktadır.

Burada kullanılan insertAfter() fonksiyonu, W3C-DOM CORE tanımlı bir metot değildir. Bu fonksiyon, bölüm 19.2 de tanıtılmış olan Jeremy Keith 'in formüle ettği kullanıcı tanımlı bir fonksiyondur. insertAfter() fonksiyonu, sonunaYaz() olarak türkçeleştirilmiş ve hem türkçesi hem de orijinali bdelib.js program kitaplığına eklenmiştir.

20.3.7 - diziElemanlarıDikeyYazımı() Fonksiyonu

Bu fonksiyon dizi verilerinin görüntülenmesinde kullanılmasına karşın tablolardan değil, Yaratılan bir paragraf düğümünden yararlanır. Dizi elemanları, yaratılan paragraf içeriğine yerleştirilir. Bu fonksiyonun yazılımı ve uygulaması ile ilgili 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 diziElemanlarıDikeyYazımı(dizi, öncekiElementId) {
var öncekiElement = document.getElementById(öncekiElementId),
yeniParagraf = document.createElement('p');

yeniParagraf.setAttribute('class', 'cursive-blue');
insertAfter(yeniParagraf, öncekiElement);
yeniParagraf.appendChild(document.createElement('br'));

for (var i = 0; i < dizi . length;  i++ ) {
if (dizi [i] == undefined) {
dizi[i] = 'undefined';
}
yeniParagraf.appendChild(document.createElement('br'));
yeniParagraf.appendChild(document.createTextNode(dizi[i]));
}
}

function başlat() {
var a = [9, 45, 23, 56, 2558, 36458];

diziElemanlarıDikeyYazımı(a, 'başlık');
}

sayfaYüklenmesiTamamlanıncaÇalıştır(başlat);

		
/* ]]>  */
		

Yukarıdaki programda, uygulanan diziElemanlarıDikeyYazımı() fonksiyonu yani bir paragraf elemanı tanımlayarak başlamakta ve bu paragrafa JSstyle.css stil sayfasında tanımlı stil selektörlerinden birini atamaktadır. Bundan sonra paragraf elementinin içeriği sayfada bulunan bir bağlantı noktasının ardına eklenmektadir. Sonra sırası ile ile bir dizi elemanı ve bir <br /> elemanı bu paragraf içeriğine eklenmektedir. Programın çalışması oldukça kolay anlaşılır nıiteliktedir.