Teknolojizm.com » Ajax http://www.teknolojizm.com Teknoloji makaleleri Mon, 15 Mar 2010 15:35:20 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Ajax Yerine Dhtml Görün-Kaybol http://www.teknolojizm.com/ajax-yerine-dhtml-gorun-kaybol http://www.teknolojizm.com/ajax-yerine-dhtml-gorun-kaybol#comments Wed, 25 Jun 2008 14:15:47 +0000 Mehmet Selim http://www.teknolojizm.com/?p=62 Herkezin bildiği gibi AJAX sayesinde sayfalarımızın içeriği yeniden yüklenmeden verileri görebilmekteydik ama bunu daha basit 3 dilin birleşimi ilede yapabiliyoruz.Bu dil DHTML dilidir.DHTML üç dilin birleşiminden oluşur bunlar”HTML-CSS-JSP” dilleridir. Bizde şimdi bu dilleri kullanarak ajaxta yaptıklarımızı DHTML daha kolay ve basit bir yolla yapacağız.

Kod;

<html>
<head>
<title>Görün-Kaybol</title>
<style type=”text/css”>
#birinciKatman {
position: absolute;
top:200px;
left:200px;
background-color:orange;
layer-background-color:orange;
}
#ikinciKatman {
position: absolute;
top:350px;
left:350px;
background-color:orange;
layer-background-color:orange;
}
</style>
<script language=”JavaScript”>
function kaybol(katman) {

if (document.all) {
document.all[katman].style.visibility=”hidden”;
}
else if (document.layers) {
document.layers[katman].visibility=”hide”;
}
else {
document.getElementById(katman).style.visibility=”hidden”;
}
}

function gorun(katman) {

if (document.all) {
document.all[katman].style.visibility=”visible”;
}
else if (document.layers) {
document.layers[katman].visibility=”show”;
}
else {
document.getElementById(katman).style.visibility=”visible”;
}
}
</script>
</head>

<body>

<b>Kontrol panosu:</b>
<br>
<a href=”javascript:kaybol(’birinciKatman’)”>Birinci katman kaybolsun</a><br>
<a href=”javascript:gorun(’birinciKatman’)”>Birinci katman görünsün</a><br>
<a href=”javascript:kaybol(’ikinciKatman’)”>Ikinci katman kaybolsun</a><br>
<a href=”javascript:gorun(’ikinciKatman’)”>Ikinci katman görünsün</a><br>

<div id=”birinciKatman”><b> Birinci Katman </b></div>

<div id=”ikinciKatman”><b> Ikinci Katman </b></div>

</body>

</html>
Kodu_Denemeyin

Şimdi script kodlarımızı incelemeden önce çalışıp çalışmadığına bir bakın isterseniz.
Şimdi script açıklamasını yapalım;
Göründüğü gibi sayfamızda 2 tane katman var ve bu katmanların kontrolü kullanıcılara yani bizim kontrölümüzde.Üsteklik bunu yaparken sayfamız kendini tekrardan yüklemiyor! Katmanlarımızın üzerinde tamamen html nesneleri olan tekst parçaları.Şimdi bu işi nasıl yaptığımıza bakalım beraber.

Sayfamızada  2 tane katman ve üzerlerinde  tekst bulunmaktadır.Katmanlarımızın görünürlüğüne olanak tanıyan  birer JavaScript fonksiyonunu ise <script> takıları içerisinde tanımladıklarını görüyoruz.Bir katman nesnesini görünmez yapabilen  kaybol(katman) fonksiyonu.İkinci fonksiyonumuza olan gorun kaybol fonksiyonu ise kaybol(katman) fonksiyonuna tamamen paralelolarak oluşturulmuş.Görünmez yapılmış bir katmanı tekrar görünür yapan bir başka JavaScript fonksiyonu.Fonksiyonlarımızı parametlerli olarak yazmış olduğumuzdan iki ayrı katman için iki ayrı fonksiyon kullanmak yerine fonksiyonlarımızın her ikisini de iki farklı katman tarafından ortaklaşa kullanabilmekteyiz. Sadece Fonksiyonumuzu çağırırken hangi katman nesnesi için işlem görmesini istediğimizi bildirmemiz gerekiyor.Buda istenen fonksiyonu parantezleri içerisine katmanı yerleştirmekle yapıyoruz.

Kod;

Kaybol (‘birinciKatman’)

Burada dikkat edilmesi gereken en önemli yer ismin tırnak içerisinde yer alması gerekliliği.Bunu yapmazsanız  JavaScipt birinci katman olarak adlandırılan şeyin ne olduğunu, aslında katmanımızı ismi olduğunu anlayamayacak ve ilgili objeyi sayfa üzerinde bulamayıncada hata mesajı vererek çalışmayacaktır.Şimdi bir önemli noktayı açıklıyacağım tektikleme mekanizmasın, yani görünürlük özelliklerinin değişmesini başlatan kullanıcı hareketleri.Bunların ne olması gerektiğine siz karar verebilirsiniz.Ben bu iş için basit link objesi seçtim.Örneğin ilk linke bastığı anda

Kod;

<a href=”javascript:kaybol(‘birinciKatman’)”>…

Satırı ile dilediğimiz JavaScript fonksiyonunun programlanmış olduğu işlemini yerine getirmesini, yani birinci katmanın kaybolmasını belirtiyoruz.Bu kod yerine,

Kod;
<a href=”#” onClick=”kaybol(‘birinciKatman’)”>…

Yazmanız hemen hemen aynı görevi yapar, ancak bu durumda sayfanız ekrandar en üst noktasından itibaren görünmeye başlayacaktır.

AJAX yerine DHTML dememin sebebi bu daha basit bir yolla JavaScript  Fonksiyonu kullanarak görün kaybol katmanlar yapabiliyoruz. İşin basitliği bakımından tasarımcıların işine yarayabilir AJAX daha profesyonel ama gördüğünüz gibi DHTML ilede ortaya çıkan script isteğimizi karşılayacak nitelikte  bir daha ki yazdığım makalede görüşmek üzere…


]]> http://www.teknolojizm.com/ajax-yerine-dhtml-gorun-kaybol/feed 3