JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20 Sayfa 3

20.3 -Sayfa İçeriğine Yeni Metin Düğümleri Eklenmesi

W3C- DOM CORE yönergelerinin izlenerek, JavaScript program adımları yardımı ile çözümlenmiş bir belge yapısına yeni düğümlerin eklenmesi, karmaşık olmayan bir yöntemdir.

Çözümlenmiş belge yapısı, W3C-DOM doktrinine göre, hiyerarşik bir düğüm sisteminden oluşur. Bu düğüm sistemini, birbirleri ile ilişkili olan (X)HTML, CSS ve JavaScript kodlarının etkilleşimi sonucunda gerçekleşir. Çözümlenmiş belgenin düğüm yapısında, JavaScript program adımlarından yararlanılarak her türlü değişiklik, ekleme ve çıkarma işlemi gerçekleştirilebilir

Çözümlenmiş bir belgenin yapısına JavaScript programları ile erişim sağlanabilmesi için bu yapıda bulunan düğüm noktalarından birisinin giriş veya bağlantı noktası olarak kullanılması gerekir. Bağlantı noktalarında tam hedefe ulaşılması için en garantili yöntem, düğüm noktalarının en ayırdedici özelliği olan id nitelik değerinden yararlanarak hedefi bulan getElementById() metodunundan yararlanılır. Bunun yanında, çapa elementlerinin rel özellikleri gibi ayırdedici özelliklerden de yararlanılabiir. Giriş noktaları seçilirken, olanaklar ölçüsünde sayfanın değişme olasılığı az düğüm noktalarından yararlanılması, değişme olasılığı yüksek düğüm noktalarının bağlantı noktası olarak seçiminden kaçınılması, uygun olacaktır.

Belge yapısında bulunan bir element içeriğine yeni bilgiler eklenmesi için, öncelikle bu içerik eklenebilecek element düğümünün bellek referansına erişilmesi gerekir. Bunu en uygun yönteminin daha önceden de açıklandığı gibi, getElementById() yöntemi olabilir. Bellek referansına erişilmiş olan düğümün stil niteliği JavaScript programlaması ile yeni bir class nitelik değeri atanarak tam olarak değiştiririlebilir. Bu durumda elementin (X)HTMl kodlamasında belirtilen (veya kalıtımla elde ettiği) class nitelik değeri JavaScript programı ile atanmış olan class nitelik değeri tarafından yenilenir. Doğal olarak, JavaScript programı ile atanacak sınıf selektörünün daha önceden hazırlanmış ve sayfanın CSS dosyasında saklı olması gerekir.

Erişilmiş olan düğümün stil niteliğine sadece katkı yapılması için, JavaScript programlaması ile yeni bir style nitelik değeri oluşturulabilir. Bu durumda, bu tanım, bir satıriçi stil tanımı anlamına gelir ve sadece yeni değerler, eski değerlere göre öncelik alır.

JavaScript programı ile erişilen bağlantı noktasının stil niteliği değiştirilmezse, bağlantı noktasının sayfa kodları ile belirlemiş olan kendi stili geçerli kalır.

Sayfa içeriğine yeni metin bilgileri eklenmesini öngören birçok örnek, hesaplama sonuçlarının sayfaya yazdırılması amacı ile bu çalışmada geliştirilerek, bdelib.js kitaplığına eklenmiş olan fonksiyonlardır. Burada bu fonksiyonların çalışma yöntemleri daha yakından incelenerek, yazılımları üzerinde açıklayıcı bilgiler verilecektir.

20.3.1 - bilgiYaz() Fonksiyonu

Bölüm 1.4 de tanımlanmış olan bilgiYaz() fonksiyonunda içeriğin yazılması için, bağlantı noktasının stil niteliğinde sadece padding niteliği yeniden tanımlanmaktadır. Bunun anlamı, kullanıcının bağlantı noktasına atamış olduğu color, font ve benzeri önemli stil niteliklerinin olduğu gibi kalmasıdır. Bu şekilde büyük bir esneklik elde edilmiş olmakta ve istenildiği stil niteliği (X)HTML kodlarında belirlenmiş olan her içerik alabilecek element bağlantı noktasına içerik eklenebilmekte ve elementin orijinal stili padding dışında değişmemektedir.

Burada incelenen bilgiYaz() fonksiyonu, bu çalışmanın uygulamalarının çoğunda, sonuçların görüntülenmesi amacı ile kullanılmıştır. Bu fonksiyonun uygulanması ilişikli olduğu uygulama sayfasında çalışmakta olan, aşağıdaki programda yeniden hatırlatılmıştır.

/* <![CDATA[  */

function bilgiYaz(sonuç, yazımYeri) {

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

bağlantıNoktası.setAttribute('style','padding : 0 0 20px 20px;');
		
// üst sağ alt sol (saat yönünde) (alt ve sol 20px)	

bağlantıNoktası.appendChild(document.createTextNode(sonuç));
}

function başla() {

bilgiYaz('Sin(90)  veya Sin(π/2) = ', Math.sin(90* π/180) +  '(90 derece = π/2 radyan)', 'bağlantı);
}

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

/* ]]>  */
		

Yukarıdaki programda, çözümlenmiş belge kodlarında, bağlantı noktası olarak seçilen bir düğümün stil niteliğine yeni bir tanım yapılmakta ve bu düğüme bir metin düğümü, alt düğüm olarak eklenmektedir.

Yukarıdaki programda, önemli olan nokta, düğümün CSS class niteliğinin değişmeden kalması, bunu yanında, yeni tanımlanan style niteliğinde tanımlanan yeni CSS kurallarının ek bir tanım olarak çalışmasıdır. bilgiYaz() fonksiyonu genel amaçlı bir fonksiyon olduğundan ve sınıf niteliği çok değişik olabilecek sayfa elementleri tarafından kullanılabileceğinden bu tür bir yazılım, genel amaçlı bu fonksiyona çok büyük esneklik sağlamaktadır. Bu yüzden bdelib.js program kitaplığında, bilgiYaz() fonksiyonunun bu yazılımı alınmıştır.

Stil nitelikleri Javascript kodları arasında tanımlanmış bu fonksiyonun bu şekilde kullanılmasının tek nedeni, fonksiyonun genel amaçlı olmasıdır. Oysa stil niteliklerinin tanımlanması için, CSS programlama dili çok daha uygundur. Sezarın hakkı sezara verilmeli düşüncesi ile, kuramsal olarak, programlama işlevi Javascript ile, stil tanımlama işlemi CSS ile, sayfa kodlaması (X)HTML ile yapılmalıdır.

Aşırı genel kullanım kaygısının olmadığı durumlarda, normal olarak stil kuralları CSS kodları ile çözümlenmeli ve JavaScript programları, hazır CSS sınıflarına atıfta bulunmalıdır.

Bu düşünce ile, sayfa ile ilişkili CSS program dosyasına önce aşağıdaki stil tanımı eklenmiştir:

.bilgiyaz {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size :   18px;
font-syle : justify;
padding : 0 0 20px 20px;
}
		

Bundan sonra, yazılım geliştirilerek, yeni bir bilgiYaz2() fonksiyonu bu yeni stil selektörüne atıf yapacak şekilde değiştirilmişitir. Bu yeni programın kodları aşağıda görülmekte ve ilişikli olduğu uygulama sayfasında çalışmaktadır.

/* <![CDATA[  */

function bilgiYaz2(sonuç, yazımYeri) {

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

bağlantıNoktası.setAttribute('class','bilgiyaz');

bağlantıNoktası.appendChild(document.createTextNode(sonuç));
}

function başla() {

bilgiYaz('Sin(90)  veya Sin(π/2) = ', Math.sin(90* π/180) +  '(90 derece = π/2 radyan)', 'bağlantı);
}

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

/* ]]>  */
		

Bu son uygulamanın ilkinden farkı, son uygulamadaki sayfa bağlantısında, herhangibir satıriçi stil niteliği tanımlanması gereği bulunmamasıdır. Bu programda, bağlantı noktasının stil tanımları, önceden tanımlanmış CSS sınıf selektörü tarafından karşılanmaktadır.

Hangi yaklaşımın daha doğru olduğuna gelince ikinci uygulamadaki yaklaşımın doğru olduğuna bir kuşku yoktur. Birinci uygulamadaki yaklaşım, taktik açıdan doğrudur, çünkü genel amaçlıdır ve hızla kullanıma alınma yeteneği büyüktür. Fakat bu yaklaşım stratejik açıdan uygun değildir çünkü, tüm programlar en uygun oldukları programlama ortamnda geliştirilmemişlerdir. İkinci uygulamadaki yaklaşım ise, taktik açıdan avantajlı değildir, çünkü kolayca uygulamaya alma yeteneği zayıftır. Fakat, stratejilk açıdan doğrudur çünkü, tüm programlar ait oldukları ortamlarda geliştirilmişledir.

Bu düşünce ile, bdelib.js gibi ortak kitaplıklardan az yararlanılabileceği söylenebilir. Ortak kitaplıklar sadece gerçekten ortak olarak kullanılabilecek genel amaçlı fonksiyonlar için çok uygundur. Fakat, bilgiYaz() gibi bir miktar özelleştirme gerektiren yazılımların her programda kendine özgü olarak geliştirlmesinde yarar bulunmaktadır. Programın ilk geliştirme aşamalarında, teknik ön planda olduğu için, acil çözümlerden yararlanılabilir ve özelleştirmeler programın ilerideki geliştirme aşamalarında ele alınabilir. Fakat bu çalışmalar mutlaka yapılarak, programın kendi özel koşullarında daha güzel görümlü çıktılar vermesi ve daha performanslı çalışması için gereken önlemler alınmalıdır.

Buradan çıkarılacak sonuç, , bdelib.js kitaplığının sadece başlangıç aşamasında, fazla JavaScript yazılım bilgisine sahip olmadan yapılan programlarda yararlı olabileceğidir. Artık, yeterli biligimiz var ve bazı kalıplara bağlı kalmak zorunda değiliz. Her çalışmaya uygun programlama ortamımızı düzenleme ve geliştirme yeteneğini kazanmış durumdayız. Yeneklerimizi kullanmak zamanı geldi ve bunu her uygulama için özel giriş/çıkış ve görüntüleme fonksiyonları gibi fonksiyonları geliştirerek başlatabiliriz.

20.3.2 - SonuçYaz() Fonksiyonu

Sonuçların bir mesajla birlikte sayfadaki yerleşik bir elementin içeriği olarak yazdırılması için geliştirilen sonuçYaz() fonksiyonu, bölüm 2.4.5 de tanıtılmış ve bdelib.js program kitaplığına alınmıştı. Birçok uygulamada kullanılmış olan sonuçYaz() fonksiyonun amacı hesap sonuçlarının bir açıklaması olan mesajın ayrı, mesajla aynı sıraya yazdırılacak sonucun ayrı bir stil ile yazdırılmasıdır. Bunun için <div> veya <p> gibi konteyner görevi yapan bir blokdüzey elementin içeriğine, iki tane yeni <span> elementi yaratılarak eklenir. Bu iki yeni elementin ilkinin içeriğine mesaj metni, diğerine de metin şekline dönüştürülen hesap sonucu yerleştirilir. Bu iki yeni düğümün stil nitelikleri farklı değerler içeriyorsa, hesap sonucu ve bunu açıklayan mesaj ayrı stillerde görüntülenecektir.

Yeni oluşturulacak <span> elementlerinin stiline, konteyner element kalıtım yolu ile etki edebilir. Fakat eğer, bu elementlerin kendi stil kuralları belirlenirse, bu kurallar daha önceki etkilere göre öncelik alırlar. Yeni oluşturulacak <span> elementleri JavaScript programı ile yaratıldıklarından, stil niteliklerinin de aynı JavaScript programı ile belirlenmesi gerekir.

Yeni oluşturulacak <span> elementlerinin JavaScript programı belirlenmesinde iki seçenek bulunmaktadır. Bunlardan ilki bu stilin daha önce yaratılmış bir CSS kuralına dayanarak belirlenmesidir ki bu en uygun olan yöntemdir. Çünkü stil kurallarının olanaklar ölçüsünde, JavaScript ile değil, CSS programları ile belirtilmesi esastır.

Yeni oluşturulacak <span> elementlerinin JavaScript programı belirlenmesinde ikinci seçenek, stil niteliklerinin JavaScript programı ile satıriçi (inline) olarak on-the-fly (kodu program içinde hazırlanarak) tanımlanmasıdır. Bu seçeneğe, program geliştirme aşamasında geçici olarak başvurulmalı ve program geliştikçe, elementin CSS kuralı hazırlanıp programda bu kural çağrılarak stil niteliği belirlenmelidir.

İlk incelenecek seçenek, stil niteliklerinin program içinde satırıçi olarak tanımlanmasıdır. Bu 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 sonuçYaz(bilgi, sonuç, yazımYeri) {
var bağlantıNoktası = document.getElementById('yazımYeri'),
span = document.createElement('span');

span.setAttribute('style', 'padding-left : 25px; padding-bottom : 5px; font : italic 1.2em Arial,Helvetica,sans-serif; color : green');
span.appendChild(createTextNode(bilgi));
bağlantıNoktası.appendChild(span);

span = document.createElement('span');
span.setAttribute('style', 'padding-left : 25px; padding-bottom : 5px; font : italic 1.2em Arial,Helvetica,sans-serif; color : red');
span.appendChild(createTextNode(sonuç));
bağlantıNoktası.appendChild(span);
}



function başlat () {

sonuçYaz('Deneme', 999, 'yazım');

}

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

İkinci incelenecek seçenek, stil niteliklerinin daha önce bir CSS sayfasında, CSS kuralı olarak tanımlanmış olduğu ve JavaScript programının, yeni oluşturulan elementin stilini bu kurala dayanark tanımlamasıdır. Bu 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 sonuçYaz(bilgi, sonuç, yazımYeri) {
var bağlantıNoktası = document.getElementById('yazımYeri'),
span = document.createElement('span');

span.setAttribute('class', 'cursive-green');
span.appendChild(createTextNode(bilgi));
bağlantıNoktası.appendChild(span);

span = document.createElement('span');
span.setAttribute('class', 'cursive-red');
span.appendChild(createTextNode(sonuç));
bağlantıNoktası.appendChild(span);
}

function başlat () {

sonuçYaz('Deneme', 999, 'yazım');

}

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

Her iki program da aynı sonucu vermesine karşın, ikinci seçenek programlama kuramı açısından daha uygundur ve bu nedenle, bu seçeneğin kodları, bdelib.js program kitaplığına eklenmiştir.