JavaScript ile Tree(Ağaç) Yapısı

Bu örnekte JavaScript ile bir tree yaratıyoruz. Tree bilgiğiniz gibi içi içe elemanlardan oluşmuş bir yapıdır. Örneğin File Manager programları (Windows Explorer vs..) dosya ve klasörleri tree şeklinde gösteririler. Bir eleman tıklandığında içindeki elemanlar görünür hale gelir. Bir daha tıklanınca tekrar görünmez olurlar.

Zafer Teker

tekzaf@yahoo.com

  1 <HTML>
  2 <head>
  3 	<script language="javaScript">
  4 		var plusUrl="plus.gif";
  5 		var minusUrl="minus.gif";		
  6 		var layer=".all";
  7 		var style=".style";
  8 		var w3Dom=false;
  9 		function refresh(objId){
 10 			obj=getObject(objId);
 11 			if(isDisplay(obj)){
 12 				hide(obj,objId);
 13 			}else{
 14 				view(obj,objId);
 15 			}
 16 		}
 17 	
 18 		function view(obj,objId){
 19 			eval("obj"+style+".display='block'");
 20 			document.images[objId+"Img"].src=minusUrl;	
 21 		}
 22 		
 23 		function hide(obj,objId){
 24 			eval("obj"+style+".display='none'");
 25 			document.images[objId+"Img"].src=plusUrl;						
 26 		}
 27 		
 28 		function isDisplay(obj){
 29 			return eval("obj"+style+".display=='block'");
 30 		}
 31 		
 32 		function getObject(objectId){
 33 			if(!w3Dom){
 34 				return eval("document"+layer+"['"+objectId+"']");
 35 			}else{
 36 				return document.getElementById(objectId);
 37 			}
 38 		}
 39 	
 40 		function setObjects(){
 41 			var browser=navigator.appName.toLowerCase();
 42 			if(document.getElementById){
 43 				w3Dom=true;
 44 			}else if(browser.indexOf("netscape")!=-1){
 45 				layer=".layers";
 46 				style="";
 47 			}			
 48 		}	
 49 	</script>
 50 	<style>
 51 		div{
 52 			margin-left:30px;
 53 		}
 54 	</style>	
 55 </head>
 56 <body onLoad="setObjects()">
 57 <h2>Tree</h2>
 58 	<div id="tree">
 59 	<img name="computerImg" src="plus.gif" onclick="refresh('computer')"></img>
 60 	<a href="computer.html">Bilgisayar</a><br>
 61 		<div name="computer" id="computer" style="display:none"> 
 62 			<img name="javaImg" src="plus.gif" onclick="refresh('java')"></img>		
 63 			<a href="java.html">java</a><br>	
 64 				<div name="java" id="java" style="display:none"> 					
 65 					<a href="swing.html">swing</a><br>
 66 					<a href="io.html">io</a><br>
 67 				</div>
 68 			<a href="html.html">html</a><br>
 69 			<a href="css.html">css (Cascading Style Sheet)</a><br>
 70 		</div>
 71 	<img name="historyImg" src="plus.gif" onclick="refresh('history')"></img>
 72 	<a href="history.html">Tarih</a><br>
 73 		<div name="history" id="history" style="display:none"> 
 74 			<a href="ottoman.html">Osmanlı</a><br>		
 75 			<a href="mongol.html">Moğollar</a><br>
 76 		</div>
 77 	</div>
 78 </body>
 79 </HTML>

Kodun Açıklanması

Tree'de iki tip yapı vardır. Altında başka yapılar bulunan eleman ve altında başka yapılar bulunmayan elamanlar. Eğer bir elemanın altında başka bir eleman yoksa o eleman için sadece bir link koyulmuştur. Eğer altında başka elamanlar varsa bu elamanlar div etiketinin içine konulmuştur. Kullanıcı elemanı tıkladığında div gösterilmekte veya gizlenmektedir. Örnekte Java elemanı içinde swing ve io elemanı bulunmakta.

Görüldüğü gibi üç element var. img elementi,elemanın solunda duran açıp kapamaya yarayan resim içindir. Bu resim tıklandığında eğer div içindekiler görünmüyorsa görünür hale getirilir vaya görünüyorsa gizli hale getirilir. div element'inin id'si java olarak verilmiştir. Resim tıklandığında refresh fonksiyonuna bu id'i verilmektedir. refresh fonksiyonu bu id'i alır ve aynı id'li elementi ya gösterir ya da gizler. img,a ve div'den oluşmuş yapı klasör'lere benzer bir işlev görür.

Browser'ı Anlama

DOM (Document Object Model)

XML ve HTML gibi markup dillerinde yazılmış dökümanların özelliklerine erişmek için kullanılır. Örneğin Browser'lar HTML dosyasını okuyarak DOM nesnesine çevirir. DOM özelliklerini kullanarak sayfanın bazı özelliklerine erişilebilir. Bazı browser'larda bu DOM nesnesine farklı şekilde erişilir. W3 DOM ise bu işlem için standard sağlamak için yaratılımıştır. En yeni browser'lar W3 DOM'a uyumlu olmaktadır.

refresh fonksiyonuna bir id'i verilmektedir. Bu id'li div nesnesi bulunup gösterilecek veya gizlenecektir. Bu işlemi yapmak için id'si verilen div element'ini bulmak gerekir. Maalesef browser'lar farklı bir yöntem kullanıyorlar. Örneğin id'si java olan bir div eleent'ine ulaşmak için İnternet Explorer'da document.all.java, netscape 4'te document.layers['java'], ve en son w3 DOM'u destekleyen browser'larda ise (ie5.5,netscape6,mozilla vs..) document.getElementById("java") şeklinde erişilmektedir. Bu yüzden sayfanın yüklendiği browser'ın tipi öğrenilmeli ve ondan sonra işlem yapılmalıdır.

Browser'ı tipini öğrenmek ve ona göre nesnelerimizi kurmak için setObjects fonksiyonu sayfa yüklenir yüklenmez çağrılmaktadır. Bunun için body element'inin onLoad özelliğine bu fonksiyon verilmiştir. Varsayılan olarak İnternet Explorer olduğunu kabul ediyoruz. O yüzden layer=".all" ve style=".style" yapıyoruz. Eğer browser W3 DOM destekliyorsa w3Dom boolean değişkenini true yapıyoruz. Eğer değilse ve browser netscape'se layer=".layers" ve style="" atamaları yapıyoruz. Bu atamalar yapıldıktan sonra id'si verilen bir nesneyi şu şekilde alabiliyoruz.

Eğer browser w3 DOM'u destekliyorsa document.getElementById(objectId) ile nesneyi alıyoruz. Eğer destekelmiyosa eval("document"+layer+"['"+objectId+"']"); ile nesneyi alıyoruz. Burada layer değişkenini daha önce uygun şekilde set ettiğimiz için internet explorer ve netscape için de çalışmaktadır.

id'si verilmiş bir element'in nesnesini elde ettikten sonra o elementi gösterme veya gizleme işini yapıyoruz. Bunun için style özelliği kullanılır. display="none" denirse div element'i içindekiler görünmez olur. display="block" yapılınca tekrar görünür hale gelir. view görünür hale getirmek ve hide ise gizlemek için yaptığımız fonksiyonlardır.

JavaScript ile Tree(Ağaç) Yapısı

Giriş

Kodun Açıklanması

Browser'ı Anlama

DOM (Document Object Model)

Dosya Listesi