JavaScript Temelleri

Bölüm 20

Uygulamalar

Bölüm 20.5 Sayfa 1

20.5 - Tablolar ile Gerçekleştirilen Uygulamalar

Tablolar web sayfalarında hem görüntü düzenleme hem de diziler gibi sıralı ve yoğun verilerin görüntülenmesi amacı ile kullanılablirler. Burada tabloların gerçek kullanım alanları olan JavaScript programları ile elde edilmiş ve dizi elemanlarına atanmış olan verilerin görüntülenmesi amacına yönelik uygulamalar incelenecektir.

Bu çalışma çerçevesi içinde verilerin tablolalarda gösterimini sağlayacak birçok fonksiyon geliştirilmiş ve bunlarla ilgil genel amaçlı fonksiyonlar bdelib.js program kitaplığına konulmuştur. Bu fonksiyonlarla ilgili stil verileri, JSstyle.css stil sayfasında bulunmaktadır. Burada çalışmalar da bu kitaplık fonksiyonlarının çalışmalarının açıklanması ve kullanıcıların tabloları kullanma yeteneklerinin geliştirilmesidir.

20.5.1 - diziTabloTekBoyut() Fonksiyonu

diziTabloTekBoyut() fonksiyonu dizi elemanlarının bir tabloda gösterilmesinin sağlanması için ilk olarak b8.2-uyg-1.htm sayfasında kullanılmıştır. Bu fonksiyon tek boyutlu dizilerin elemanlarını bir tabloda görüntüleyebilmektedir. Bu fonksiyonun kullanılabilmesi için sayfanın gereksinme duyacağı stil selektörleri, JSstyle.css stil sayfasında bulunmaktadır. Bu fonksiyonun yeni bir uygulaması aşağıdaki programda görülmekte ve ilişikli olduğu uygulama sayfasında çalışmaktadır.

/* <![CDATA[  */

function diziTabloTekBoyut() {
var tablo = document.getElementById('diziTabloTekBoyut.arguments[0]),
dizi = diziTabloTekBoyut.arguments[diziTabloTekBoyut.arguments.length - 1],
capt = document.createElement('caption'),
tabloGövdesi = document.createElement('tbody'),
yeniSatır = document.createElement('tr'),
yeniBaşlık = document.createElement('th'),
yeniSütun = {}; 

tablo.setAttribute('class', 'diziTablo');

capt.setAttribute('class', 'captionred');
capt.appendChild(document.createTextNode(diziTabloTekBoyut.arguments[1]));
tablo.appendChild(capt);

tablo.appendChild(tabloGövdesi);

yeniSatır.setAttribute('class', 'diziTabloTr');
tabloGövdesi.appendChild(yeniSatır);

yeniBaşlık.appendChild(document.createTextNode('Eleman'));
yeniSatır.appendChild(yeniBaşlık);

yeniBaşlık = document.createElement('th');
yeniBaşlık.appendChild(document.createTextNode());
yeniSatır.appendChild(yeniBaşlık);

yeniBaşlık = document.createElement('th');
yeniBaşlık.appendChild(document.createTextNode(Değer'));
yeniSatır.appendChild(yeniBaşlık);

for( var i = 0;i<dizi.length;i++) {
if(dizi[i] === undefined) {
continue;
}
yeniSatır = document.createElement('tr');
tabloGövdesi.appendChild(yeniSatır);

yeniSütun = document.createElement('td');

yeniSütun.setAttribute('class', 'diziTabloGreen');
yeniSütun.appendChild(document.createTextNode('Eleman[' + i + ']'));
yeniSatır.appendChild(yeniSütun);


yeniSütun = document.createElement('td');
yeniSütun.setAttribute('class', 'diziTabloMaroon');
yeniSütun.appendChild(document.createTextNode(' = '));
yeniSatır.appendChild(yeniSütun);


yeniSütun = document.createElement('td');
yeniSütun.setAttribute('class', 'diziTabloRed');
yeniSütun.appendChild(document.createTextNode(dizi[i]));
yeniSatır.appendChild(yeniSütun);
}
}

function harcama() {
var giderDöviz = [];

giderDöviz[0] = 16;
giderDöviz[1] = 58;

diziTabloTekBoyut('tablo', 'Döviz Giderleri Kalemi Dökümü', giderDöviz);
}

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

/* ]]> */
		

Burada çağrılan diziTabloTekBoyut() fonksiyonu, gizli argümanlı bir fonksiyondur ve üç argümana gereksinmesi bulunmaktadır. Bu fonksiyonun kullanımı aşğıdaki gibidir:

diziTabloTekBoyut('tabloIdDeğeri', 'tabloBaşlığı', diziAdı);
		

Yukarıdaki programdaki diziTabloTekBoyut() fonksiyonunun çalışması çok kolay izlenebilir. Çalışma yöntemi, gereken düğüm türlerinin yaratılması, içeriğininin oluşturulması, belge ağına monte edilmesi, yeniden yeni bir düğüm yaratılması ile devam edilmesi şeklindedir. Fonksiyon, dizinin en son elemanının tablo içeriğinde görüntülenmesi tamamlanmasına kadar çalışmasına devam eder.

20.5.2 - Tablo Satırlarının Aydınlatılması

Belge çözümleyicilerinin farklı çözümleme yöntemleri nedeni ile, (X)HTML ile kodlanmış tabloların görüntüleri, farklı belge çözümleyicilerde az çok farkeder. Belirli belge çözümleyicilerde yakın görüntüler oluşturacak tablo kodlamalarının oluşturulabilmesi deneyim gerektirir. Arıca, özellikle çok sütünlu ve çok veri satırı içeren tablolarda aynı satıra hizalanmış verilerin okunması kolay olmayabilir. Bu nedenle, bir tablodaki satırların üzerinde mouse ile gezildiğinde, tablo satırının renginin değişmesi yani satırın aydınlatılması çok yararlı bir program olarak kabul edilmektedir.

Tablo tasarımları bazı durumlarda oldukça karışık olabilir. Bazı durumlarda veriler alt alta birden çok satıra taşmış olabilir. Bazı durumlarda ise, bir satırda birden çok sütün dolduran veriler görülebilir. Bazı ekstrem durumlarda ise, bir hücrenin içine başka bir tablo yerleştirilmiş olabilir. Yine de çoğunlukla tablolar düzenli satır ve sütunlar olarak tasarlanır. Satır aydınlatılması da, aslında bu düzenli tabolar için gereklidir.

Aşağıda CSS ve JavaScript kodları aşağıda görülen JavaScript programı, düzenli tablolar için satır verilerinin aydınlatılmasını sağlamaktadır. Bu program orijinal olarak Jonathan Snook tarafından tasarlanmış ve düzenlenerek modernize edilmiştir. Bu program, ilişkilendirilmiş olduğu uygulama sayfasında çalışmaktadır.

Sayfanın CSS kuralları aşağıda görülmektedir.

<style>
table.tabl25 {

border : 3px solid blue;

border-bottom : 3px solid blue;
			
border-collapse : collapse;

margin : 0 auto;

font : 0.92em/2em Verdana,Arial,Helvetica,sans-serif;
			
color : black;

background-color : window;

width : 50%;

}

tr {

border : 3px solid blue;

}

tbody {

padding-left : 5%;

padding-top : 4%;
padding-bottom : 2%;
}

col {

border : 3px solid blue;

}

tr.son {

border-bottom : 3px solid blue;

}

		</style>
		

Sayfanın JavaScript programı aşağıda görülmektedir.

/* <![CDATA[  */

function tabloBul (nesne) {

while(nesne && nesne.tagName.toLowerCase() != 'table') {
nesne = tabloBul(nesne.parentNode);
}

return nesne;
}


function aydınlat (hücre, renk) {

var arkaPlanRengi = 'background-color'+ renk,
tablo = [];

hücre.parentNode.setAttribute('style', arkaPlanRengi);
tablo = tabloBul(hücre);
}

function satırdahiSütunlarıAydınlat () {
aydınlat(this, aqua');
}


function satırdakiSütunlarıKarart() {
aydınlat(this, 'white');
}

function satırAydınlat (tablo) {
var TDs = tablo.getElementByTagName('td');

for (var i = 0; i < TDs.length; i++ ) {
TDs.item(i).onMouseOver = satırdakiSütunlarıAydınlat;
TDs.item(i).onMouseOver = satırdakiSütunlarıKarart;
}
}


function başlat (tablo) {
var tbl = document.getElementById('bemimTablom');

if (tbl.nodeType === 1 && tbl.nodeName.toLowerCase () === 'table') {
satırAydınlat(tbl);
}
}
sayfaYüklenmesiTamamlandıktanSonraÇalıştır(başlat);

/* ]]> */
		
		

Yukarıdaki programda, en ilginç noktalardan biri, bir konteyner elementi tipi olan <table> elementinin içerdiği tüm <th> elementlerinin bir diziye aktarılabilmesidir. Buna ek olarak, düğümlerin alt sınıf/üst sınıf ilişkierinden çok iyi bir şekilde yararlanılmıştır.

Sayfanın satırları aydınlatılacak tablonun bulunduğu kısmının XHTML kodlaması aşağıda görülmektedir.


<table class="tabl-25" summary="Hava Durumu" cellspacing="0" frame="box" rules="all" id="benimTablom">
<caption class="captionred">Hava Durumu</caption>
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr class="color4">
<th><span class="pl-50">Şehir</span></th>
<th><span class="pl-50">Hava Durumu</span></th>
<th><span class="pl-50">Ortalama Sıcaklık</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="pl-25">İstanbul</span></td>
<td><span class="pl-50">Açık</span></td>
<td><span class="pl-50">16 - 22  °C</span></td>
</tr>
<tr>
<td><span class="pl-25">Ankara</span></td>
<td><span class="pl-50">Açık</span></td>
<td><span class="pl-50">11 - 19 °C</span></td>
</tr>
<tr>
<td><span class="pl-25">İzmir</span></td>
<td><span class="pl-50">Açık</span></td>
<td><span class="pl-50">18 - 24  °C</span></td>
</tr>
</tbody>
</table>
		

Yukarıdaki programın, uygulandığı sayfadaki talonun satırlarının aydınlatılması için uygulanması okunurluğu artmış bir tablo ile sonuçlanmasına karşın, CSS yöntemlerinin, JavaScript yöntemlerine göre sayfanın erişebilirliğinin arttıracağı kuşkusuzdur. Bunun nedeni, sayfanın JavaScript programlarını çalıştırabilmesi, kullanıcı tarafından iptal edilebilmesine karşın, CSS desteğinin kullanıcı tarafından devreden çıkarabilme olasılığının bulunmamasıdır. Bu nedenle tablo satırlarının aydınlatılması, sayfanın navigasyon öğeleri, hatta rollover butonları gibi klasik olarak JavaScript ile uygulanan yöntemler yerine olanaklar elverdiğince, CSS alternatifleri tasarlanmaya çalışılmaktadır. Tablo satırlarının aydınlatılması da aşağıda görülen CSS sayfasındaki kodları kullanan, sayfadaki tablonun satırlarının aydınlatılmasında olduğu gibi, salt CSS kuralları kullanlarak gerçekleştirilebilir.

Sayfadaki tablonun kodları aşağıda görülmektedir:

...
<table class="tabl25" summary="Hava Durumu" cellspacing="0" frame="box" rules="all">
<caption class="captionred">Hava Durumu</caption>
<thead>
<tr>
<th scope="col">Şehir</th>
<th scope="col">Hava Durumu</th>
<th scope="col">Ortalama Sıcaklık</th>
</tr>
</thead>
<tbody>
<tr class="alt">
<th scope="row">İstanbul</th>
<td>Açık</td>
<td>16 - 22  °C</td>
</tr>
<tr class="alt">
<th scope="row">Ankara</th>
<td>Açık</td>
<td>11 - 19 °C</td>
</tr>
<tr class="alt">
<th scope="row">İzmir</th>
<td>Açık</td>
<td>18 - 24  °C</td>
</tr>
</tbody>
</table>
...
		

Bu tablonun bazı satırlarının ait olduğu belirtilen alt selektörü, CSS kuralı olarak hiç belirtilmemiş sadece satırı bir genel tip nitelik değeri selektörü, .element[class = alt] selektörü ile eşleştirmek amacı ile kullanılmıştır.

Bu sayfanın CSS kodlarının formülasyonu, http://www.elated.com/articles/styling-tables-with-css/ de açıklanmış, kendi uygulamamıza uyarlanmıştır. CSS kodlarında kullanılan selektörler, Internet Explorer 8 tarafından sorunsuz desteklenebilmekte, sadece p[class] gibi genel nitelik selektörleri, IE tarafından yeterli olarak desteklenememekte fakat bu da fazla önemli olmamaktadır. Bu durumda, Bu tablonun satır aydınlatılmasında CSS kodlarına IE desteği de alınabildiğinden, (diğerleri zaten modern tasarımlı belge çözümleyiciler olarak CSS 2.1 spesifikasyonuna tam destek sağlamaktadır), tablo satır aydınlatılmasında, JavaScript kullanımı söz konusu olmaktan çıkmıştır.