JavaScript Temelleri

Bölüm 1

Başlangıç Bilgileri

Bölüm 1 Sayfa 4

1.4 - Program Sonuçlarının Web Sayfalarında Gösterimi

Bir programlama dilinde, hesaplanan ifade sonuçlarının yazdırılması, bilgisayar programlamasının hedeflerinden biridir. JavaScript programlama dili, bir web sayfasında konuk edilmekte ve program giriş/çıkışları bir web sayfası kanalı ile gerçekleştirilmektedir. JavaScript programlama dilinin öğeleri ile web sayfasının öğelerinin birbirleri ile iletişimi, W3C tarafından W3C-DOM adı verilen bir platform ile standartlaştırılmıştır. Standartlaşma W3C-DOM Düzey 1 ile başlamış ve W3C-DOM Düzey 3 ile tamamlanmıştır. Ne yazık ki belge çözümleyiciler, sadece W3C- DOM Düzey-1 düzeyinde destek sağlayabilmektedirler . Genel olarak DOM kuramı, ileride incelenektir. Burada sadece JavaScript programlama dilindeki uygulamalar için kullanılacak sınırlı sayıda W3C-DOM yöntemi tanıtılacaktır.

W3C-DOM yöntemlerinde, web sayfası, document (belge) nesnesi olarak adlandırılır. Belge nesnesi, birbirleri ile ata, anne-baba, çocuk ve kardeş hiyerarşik ilişki diziliminde düğüm noktalarından oluşur. Düğüm noktaları, elementlerden, element içeriği metin (text) parçalarıından ve benzeri öğelerden oluşur.

W3C-DOM yöntemlerine göre, id değeri x olan bir sayfa elementine erişim için,

document.getElementById("x");
		

Bir (X)HTML elementi yaratmak için,

document.createElement("span");
		

Bir metin düğüm noktasının yaratılması için,

document.createTextNode("Merhaba");
		

Bir b düğüm noktasını bir a düğüm noktasının çocuğu olarak yerleştirmek için,

a.appendChild(b);
		

bildirimleri kullanılır.

Çeşitli düğüm noktalarının kendilerine özgü öntanımlı özellikleri bulunmaktadır. Örnek olarak bir paragraf element düğümünün, style özelliği, elementin stil niteliklerini düzenler. style niteliğinin, CSS programlama dili gibi özellikleri bulunmaktadır. Bu şekilde, yazdırılacak sonuçların göze güzel görünecek şekilde görüntülenmesi sağlanabilir. Birçok element düğümünün de, olay yönetiini sağlayacak onclick gibi özelliği bulunmaktadır. Bu olay yöneticileri de, (X)HTML olay yöneticilerine başvurmadan, sayfada olay yönteminin sağlanması amacı ile kullanılırlar. Uygulamalarımızda, sayfadan veri okunması ve sayfada sonuç gösterimi amacı ile W3C-DOM yöntemlerinden yararlanacağiz.

Örnek olarak id niteliğinini değeri, "x" olan bir paragraf elementinin içeriğine bir metin parçasını yazdırılması için,

a = document.getElementById('x');
b = document.createTextNode("İçerik");
a.appendChild(b);
		

yazılabilir. Bu yöntem daha kısa olarak,

a = document.getElementById("x");
a.appendChild(document.createTextNode("İçerik"));
		

olarak gerçekleştirilebilir. Biz çalışmalarımızda, performansı daha yüksek olan ikinci şekli tercih edeceğiz. Bu yöntemi, bilgiYaz() olarak adlandıracağımız bir fonksiyon olarak düzenleyerek, bilgilerin bir web sayfasına yazılmasını daha sistematik ve kolayca gerçekleştirilebilecek hale getirebiliriz. Bu fonksiyon, iki tane argüman almaktadır. İlk argüman bir sonuç değeri, ikinci argüman ise karakter dizgisi (string) tipinde, sonucun görüntüleneceği sayfa elemanının id niteliğinin değeridir. Bu fonksiyonun yazılımı aşağıda görülmektedir:

function bilgiYaz(sonuç, yazımYeri) {

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

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

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

Bu programda kullanılan bilgiYaz() fonksiyonu, her türlü JavaScript uygulamasında sonucun yazdırılmasında kullanılabilecek genel amaçlı bir fonksiyondur. Bu fonksiyon uygulamalarımızda kullanılacaktır. Yazılımın incelenmesi, çalışmanın sonlarında 20.3.1 konusunda incelenecektir. Bu konuya gelene kadar bu gibi genel amaçlı yardımcı fonksiyonları sadece kullanmakla yetinecek, konularda ilerdikçe yazılımı kolayca anlayabileceğiz. Bu çalışmada kullanılan tüm fonksiyonlar, spesifikasyonlara uygun, en güncel ve ortak olarak desteklenen yöntemler içermektedir. Tüm yardımcı fonksiyonların, etkin olmaları yanında, basit ve anlaşılır yapıda olmalarına da büyük önem verilmiştir.

Bu çalışma boyunca kullanılabilecek bilgiYaz() gibi yardımcı foksiyonların, her uygulamada yeniden yazılması gerekmeyecek bir şekilde genel bir fonksiyon kitaplığına konulması ve bu kitaplığın her uygulamada sayfaya ilişkilendirilmesi daha uygun olacaktır. Bu fonksiyonlar, ayrı bir bdelib.js kitaplık dosyasında saklanır ve her uygulama sayfasına iliştirilirse, Java paketlerine benzer bir fonksiyon kitaplığı havuzu elde edilir. Bu fonksiyon kitaplığı bdelib.js fonksiyon kitaplık dosyasına yerleştirilmiştir. Her konuda ayrı kitaplık dosyaları yaratılarak fonksiyon kitaplığının aşırı büyümesi engellenebilir. Kitaplık dosyası, gereken Web sayfalarına ilişkilendirilerek, içeriğindeki metotlardan ilgili sayfalarda yararlanılması sağlanabilecektir. Bu çalışmada kullanılan yardımcı fonksiyonları içeren bdelib.js fonksiyon kitaplığının başlangıç yazılımı aşağıdaki gibidir. Bu kitaplık, gereken fonksiyonların eklenmesi ile istendiği kadar genişletilebilir.

/* <![CDATA[  */

// Bu program, bdelib.js Kitaplık Dosyasında Saklanmaktadır.
function sayfaYüklendiktenSonraÇalıştır(çalıştırılacakFonksiyon) {

var öncekiFonksiyon = window.onload;

if (typeof window.onload  !=  'function') {
window.onload = çalıştırılacakFonksiyon;
}
else {
window.onload = function() {
öncekiFonksiyon();
çalıştırılacakFonksiyon();
};
}
}


function bilgiYaz(sonuç, yazımYeri) {

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

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

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


/* ]]> */

Artık ilk uygulama sayfamızı organize edebiliriz. İlk uygulama sayfamız, tüm programlama dillerinde uğur sayfası olarak kullanılan Merhaba Dünya programı olacaktır. Bu sayfanın yapılandırma kodları, DTD si tamamlanmış en son XHTML standardı olan, XHTML 1.1 (İkinci Baskı) standardına uygun olacak, sayfa stil kodları ayrı bir CSS sayfasında JavaScript kodları ise, ayrı bir JavaScript dosyasında tutulmaktadır. Sayfanın XHTML kodlarında ne stil, ne de olay yönetimi nitelikleri kullanılmamıştır. Olay yöntemi sadece JavaScript program sayfalarında gerçekleştirilmektedir. Bu uygulama sayfasının tasarım yöntemi, ideale yakın bir Web sayfası tasarımı olarak nitelendirilebilir. Bu çalışmadaki tüm sayfalara, bu güncel tasarım yöntemi uygulanacaktır.

"Merhaba Dünya ! " karakter dizgisi literalinin, sayfadaki, id değeri "programSonucu" olan bir paragrafın içeriği olarak yazdırıldığı web sayfasının , XHTML kodları aşağıda görülmektedir:

<?xml version="1.0" encoding="windows-1254" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xtml11.dtd">
<html xmlns="http://www.w3.org/1999/06/xhtml" xml:lang="tr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution"  content="Local" />
<meta name="Robots" content="Index" />
<link rel="stylesheet" type="text/css" href="../css/JSstyle.css" />
<title>MerhabaDunya</title>
</head>
<body>
<table class="layout-top" summary="Başlık">
<tr>
<td><img src="../images/banner.gif" alt="Banner" class="banner"/></td>
<td class="top1text">JavaScript Temelleri - Uygulamalar -</td>
<td class="top1previous"><a href ="../b1/b1s4.htm#merhabaDunya"><img 
src="../images/previous.gif" alt="önceki" /></a></td>
</tr>
<tr>
<td></td>
<td class="top2text">MerhabaDunya.htm</td>
<td class="top2previous">1.4 Konu Sayfasına Dönüş</td>
</tr>
<tr>
<td></td>
<td class="top3text">İlk Uygulama</td>
<td></td>
</tr>
</table>
<ul id="topnavlist1">
<li id="ilk">
<a href="../uygulamalar/merhabaDunya-src.htm"><em>Sayfanın XHTML Kaynak Kodları</em></a>
</li>
<li id="atla1"
</li>
<li id="orta">
<a href="../uygulamalar/JSstyle-css.htm"><em>Sayfanın CSS Stil Kodları</em></a>
</li>
<li id="atla2">
</li>
<li id="son">
<a href="../uygulamalar/merhabaDunya-js.htm"><em>Sayfanın JavaScript Program Kodları</em></a>
</li>
<li id="topnavlist1-sonlama">
</li>
</ul>
<p class="cursive-green" id="programSonucu">
</p>
<ul id="navbottom">
<li id="index">
<a href="../index.htm"><em>&laquo; İndeks</em></a>
</li>
<li id="denge">
</li>
<li id="sayfa">
<a href="../b1/b1s4.htm#merhabaDünya"><em>Konu Sayfasına Dönüş &raquo;</em></a>
</li>
<li id="navbottom-sonlama">
</li>
</ul>

<--Script Yükleme Alanı -->

<script type="text/javascript" src="../js/bdelib.js">
</script>
<script type="text/javascript" src="../js/merhabaDunya.js">
</script>

<--Script Yükleme Alanı Sonu-->

</body>
</html>

Bu sayfanın JavaScript kodları da aşağıda görülmektedir :

/* <![CDATA[  */

// Bu program, bdelib.js Kitaplık Dosyasından Yararlanmaktadır.

function merhabaDünya() {

bilgiYaz('Merhaba Dünya !', 'programSonucu');
}

sayfaYüklendiktenSonraÇalıştır(merhabaDünya);

/* ]]> */

Bu programın sonucu,

olacaktır.

Bu uygulamanın JavaScript kodları incelendiğinde, bdelib kitaplık dosyasında toplanan fonksiyonların Java paketletine (Java Packages) benzediği açıkça görülmektedir. Bu yöntemle toplanmış yardımcı fonksiyonlar tüm site sayfalarında programcılar tarafından kullanılabilmektedir.

Bu uygulamada bdelib kitaplığındaki bilgiYaz() fonksiyonu, ilişkili olduğu Web sayfasında, id niteliğinin değeri belirli bir sayfa öğesini çağırmaktadır. Eğer fonksiyon fonksiyonun çağırdığı sayfa öğesi, sayfaya henüz yüklenmemiş ise, henüz yüklenmememiş bir sayfa elementine erişim isteği, hata oluşmasına neden olacak ve bir hata mesajı ile hatalı bir işlem yapılmak istendiği uyarısı verilecektir. Bunun önlenmesi için, önce sayfanın yüklenmesi, sonra yüklenmiş olan sayfanın belirli bir öğesini çağrılması gerekmektedir.

Sayfanın yüklenmesini dinleyen olay yöneticisi, window.onload olay yöneticisidir. Bu olay yöneticisinin yardımı ile, sayfanın önce yüklenmesinin sağlanması ve ondan sonra fonksiyonun çalışmasının gerçekleşmesini sağlayacak üç farklı yöntem daha önceden açıklanmıştır. Bu yöntemlerden Simon Willison tarafından yazılmış olan, fonksiyon uygulamalarımız için seçilmiş ve fonksiyon kitaplığı, bdelib.js ye eklenmiştir. Web sayfasının özel program sayfasından bu ön yükleme fonksiyonunu çağırmak yeterli olacaktır.

Bu sayfada uygulanmakta olan window.onload olay yöneticisi, sayfanın yüklenmesini gözlemekte, sayfanın yüklenmesi tamamlanınca, kullanıcının bir etkisi olmadan, sayfaYüklendiktenSonraÇalıştır(argüman) fonksiyonunu çağırmaktadır. Bu fonksiyon, Simon Willison tarafından düzenlemiş olan yukarıda verilmiş program kodları gereğince, argümanını, sayfanın yüklenmesinden sonra çalıştırılacak fonksiyonlar için oluşturduğu bir çalıştırma kuyruğununa ekleyecektir. Bir sayfada istendiği kadar sayfaYüklendiktenSonraÇalıştır(argüman) fonksiyonu çağrılabilir. Bu fonksiyon her çağrıldığında, argümanını oluşturacağı çalıştırma kuyruğuna ekleyecektir. Tüm liste tamamlandığında, fonksiyonlar, belirli bir sıra gözetilmeden çalıştırılmaya başlayacaktır. Bu şekilde, bir web sayfasındaki öğeyi, sayfanın tümü yüklenmeden çalıştırma olasılığı kalmayacaktır.

Aslında, bu programda olduğu gibi, sayfanın yüklenmesinden sonra çalıştırılacak sadece bir tane fonksiyon olursa, bir çalıştırma kuyruğu oluşturmak gereği olmaz ve sadece, window.onload = merhabaDünya; şeklinde kullanılacak window.onload olay yöneticisi yeterli olur. Fakat, bazı durumlarda sayfanın yüklenmesi tamamlandıktan çalıştırılması gereken birden fazla fonksiyon olabilir. Her duruma uygun olan bir tek kodlama yapılması için, istenirse bir, istenirse daha çok sayıda fonksiyonu sayfanın yüklenmesinden sonra çalıştırma yeteneğine sahip olan sayfaYüklendiktenSonraÇalıştır() programı, sayfanın yüklenmesinden sonra çalışması gereken bir veya birden çok fonksiyonun bulunduğu her sayfada kullanılmıştır.

Valid XHTML 1.1