Ne var ki, katman oluşturmakta kullanabileceğimiz etiketlerden biri olan LAYER Netscape tarafından tanınır fakat IE tarafından tanımaz. Bu sebeple sayfalarımızda katmanları LAYER yerine DIV ile oluşturarak, iki Browser?a da hitabedebiliriz. DIV etiketi de LAYER gibi katmanlar yapar; özellikleri ve metodları da LAYER gibidir. Aralarındaki tek fark, DIV ile oluşturulacak katmanların biçim ve konum özellikleri kendi STYLE komutları ile kazandırmak zorundasınız; oysa LAYER?ın çok daha kestirme kendi biçim özellikleri vardır. Bununla birlikte STYLE metodunu kullanmakla DIV etiketine Javascript ile biçimlendirilecek daha çok “özellik” kazandırabiliriz. önce, etiketini yakından tanıyalım:
|
<DIV |
|
|
ALIGN=CENTER, LEFT, RIGHT |
Sayfada veya tablo içinde bulunduğu yere göre, ortaya, sola veya rağa hizalanmasını sağlar. |
|
CLASS=sınıf_adı |
Uygulanan stil sınıfı varsa, burada belirterek bütün DIV?in aynı stili almasını sağlarız. |
|
DATAFLD=sütun_adı |
DIV?e bir veritabanının değeri veriliyor, verilerin geleceği sütunun adı burada belirtilir. |
|
DATAFORMATAS=HTML , TEXT |
Bağlanan veritabanının HTML olarak mı, yoksa düz yazı olarak mı yorumlanacağını belirtmeye yarar. |
|
DATASRC=#ID |
Varsa, bağlanan veritabanının kimliği |
|
ID=değer |
Bu DIV?in kimliği |
|
LANG=dil |
ISO standartlarına göre bu bölümde yer alacak metnin yorumlanmasında uygulanacak dil kodu |
|
LANGUAGE=dil |
JAVASCRIPT, JSCRIPT, VBS veya VBSCRIPT. Bu DIV etiketinin içindeki Script?in dili. Hiç bir değer belirtmezseniz, JavaScript varsayılır. |
|
STYLE=css1-özellikleri |
Bu etiketin unsurlarına uygulanacak stil komutları |
|
TITLE=başlık |
Bilgi için kullanılır; Bu unsurun değeri onMouseOver halinde araç bilgi notu olarak görüntülenir. |
|
>…</DIV> |
|
DIV ile oluşturacağınız katman nesnesinin Görünürlük veya Pozisyon belirleme özelliklerini de stil unsurları ile belirtebilirsiniz. Örneğin bir DIV unsurunun HTML sayfası açıldığında görünmemesini istiyorsanız, bunu DIV etiketinin içine koyacağınız şöyle bir stil komutu ile sağlarsınız: “STYLE=”visibility:hidden;position:absolute;top:0; left:0; z-index:-1” Fakat, ne yazık ki, Javascript, DIV?i bir “sayfa unsuru” olarak ele alarak, Browser?a talimat vermeye kalktığında söylediklerini ya Netscape anlamayacaktır; ya da IE. Çünkü iki Browser?ın DIV ve stil belirlemelerinde şart koştukları referans biçimi farklıdır. Örneğin, Netscape, document.layers[1].visibility= “hide” şeklindeki bir Javascript ifadesi üzerine, sayfanızda ikinci katmanı görünmez hale getirirken, IE, size “document.layers1 Nesne Değil!” şeklinde hata mesajı verecektir. IE, sayfanın unsurlarına “document.all.nesne” (nesne kelimesinin yerine nesnenin adı girecek) şeklinde referans yapılmasını ister.
Her iki Browser?ın anlayacağı şekilde Javascript ile katman ve CSS komutları vererek Dinamik HTML sayfaları yapmanın bir yolu, söz gelimi, MacroMedia firmasının DreamWeaver gibi, kendi Javascript kodunu kendini oluşturan ve bunu her iki Browser?ın anlayacağı dilde yazabilen HTML editörü yazılımlar kullanmak olabilir. Ayrıca Scott Isaacs?in ([email protected]) DHTML Library Version 2.0b5 adlı Javascript programını (dhtmlLib.js), http://www.insideDHTML.com adresinden indirerek, HTML sayfalarınızda kullanabilirsiniz. Bu tür “haricî Javascript belgesi” bir HTML sayfasında HEAD bölümüne şu komutla bağlanır:
<SCRIPT scr="dhtmlLib.js" language="JavaScript"> </SCRIPT>
427 satırlık bu Javascript belgesi programcı olarak size, Javascript stil komutlarnızı ister sadece Netscape?in, ister sadece IE?nin anlayacağı şekilde yazma imkanı veriyor. Bu belge, Browser IE ise Netscape?in anlayacağı komutları IE için, Browser Netscape ise IE?in anlayacağı komutları Netscape için tabir yerinde ise “tercüme” ediyor. Böyle bir “tercüme” fonksiyonu, ana hatlarıyla şöyle olabilir:
function Is() { var agent = navigator.userAgent.toLowerCase(); this.major = parseInt(navigator.appVersion); this.minor = parseFloat(navigator.appVersion); this.ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) && (agent.indexOf('compatible') == -1))); this.ns2 = (this.ns && (this.major == 2)); this.ns3 = (this.ns && (this.major == 3)); this.ns4 = (this.ns && (this.major >= 4)); this.ie = (agent.indexOf("msie") != -1); this.ie3 = (this.ie && (this.major == 2)); this.ie4 = (this.ie && (this.major >= 4)); this.op3 = (agent.indexOf("opera") != -1); } var is = new Is() if(is.ns4) { doc = "document"; sty = ""; htm = ".document" } else if(is.ie4) { doc = "document.all"; sty = ".style"; htm = "" }
Bu kodu, söz gelimi tercume.js adıyla kaydeder “haricî Javascript belgesi” olarak HTML sayfanızda HEAD bölümüne şöyle bir komutla bağlayabilirsiniz:
<SCRIPT scr="tercume.js" language="JavaScript"> </SCRIPT>
Bu fonksiyonu doğruca HTML belgenizin HEAD bölümüne de koyabilirsiniz. Her iki durumda da Javascript?e DIV nesneleriyle ilgili bütün stil komutlarınızı, bir değerlendirmeden geçirerek uygulamasını şöyle bir komutla bildirirseniz;
golgeVer = eval(doc + '["golgeKatmani"]');
Javascript, diyelim ki başlıklara gölge veren “golgeKatmani” adlı bir katmanınız varsa, ve katmanın alacağı “golgeVer” gibi bir değişkeniniz bulunuyorsa bu değişkeni Netscape için:
golgeVer = document.golgeKatmani
IE için ise:
golgeVer = document.all.golgeKatmani
diye belirtecektir. HTML sayfanıza böyle bir “haricî Javascript dosyası” iliştirmek yerine, kendi kodunuzu kendiniz yazmak isteyebilirsiniz. Şimdi böyle bir örneği birlikte yapalım. Önce sayfamızın almasını istediğimiz şu ilk görüntüyü birlikte inceleyelim:
Bu sayfada, soldaki spiral süsü, üstte de üç sekme olan bir kitap ya da defter esprisinin hâkim olduğunu görüyorsunuz. Özellikle işletim sistemlerinin ve programların grafik arayüzleri, Internet ziyaretçilerinize sekmeleri tıklama alışkanlğı kazandırmış olmalı. Bu sebeple, bu sayfa ziyaretçiler açısından nerede ne olduğu kolay anlaşılan bir sayfa sayılabilir. Ziyaretçi birinci sekmeyi tıkladığında, bu sekmeyle ilgili bilgilerin bulunduğu sayfaya gidecek, ve belli ki bu sayfa da burada, kapağın bulunduğu alanda görüntülenecektir. Daha teknik ifade edersek, sayfamız açıldığında milimetrik olarak birbirinin üzerinde bulunan dört DIV?den (Kapak, Sekme1_zemin, Sekme2_zemin, Sekme3_zemin) sadece Kapak DIV?i görünür (visible) durumda olacaktır. Ziyaretçi diyelim ki Sekme1?i tıkladığında, Javascript Kapak DIV?ini görünmez (hidden) hale, Sekme1?in sayfasını içeren DIV?i görünür hale (visible) getirecektir. Ziyaretçinin diğer sekmelerden sonra Sekme1?i yeniden tıklayabileceğini hesaba katarak, Sekme1?e sadece Kapak DIV?ini değil, emniyette olabilmek için Sekme2 ve Sekme3?ün içerik DIV?lerini de görünmez hale getirtmemiz uygun olur. Diğer sekmeler de, kendi sayfalarını açarken, diğer sayfaları ve Kapak?ı, görünmez hale getireceklerdir. Görünmez halde olan bir DIV?i yeniden görünmez hale getirmenin Javascript veya Browser açısından bir sakıncası yoktur.
Bu sayfada sekmelerin içeriklerini tutan DIV?ler ziyaretçinin sekmeleri tıklamasının oluşturacağı Click olayının onClick ile yönlendirilmesi suretiyle değiştirilecektir. HTML?de DIV?lere ilişkin etiketi yazarken uygulayacağınız sıranın hiç önemi yoktur; Browser, DIV?lerin z-index sayısına bakarak hangisinin altta hangisinin üstte olduğunu belirler. Fakat yine de iyi programcılık gereği, DIV?leri en alttan en üste doğru yazmaktır. Şimdi, daha sonra sekmeler.htm adıyla kaydedeceğimiz kodumuzu adım adım birlikte yazalım. Tabiî, önce standart unsurlarımızla sayfanın çatısını çatalım:
<HTML> <HEAD> <TITLE>Sekmeler</TITLE> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1254"> <SCRİPT LANGUAGE="JavaScript"> <!-- Eski Browserlardan gizleyelim ....................... //--> </SCRİPT> </HEAD> <BODY bgcolor="#FFFFFF"> ........................ <p>Sekmeli sayfamıza hoş geldiniz!</p> <p> </p> </BODY> </HTML>
Burada nokta-noktalı yerlerin birincisine Javascript fonksiyonumuz, ikincisine ise DIV etiketlerimiz girecek. Fonksiyonu inşa etmeye başlamadan önce, tıklamayla değişmeyecek DIV?lerin etiketlerini yazalım. İşe Spiral?den başlayalım; ikinci noktalı yere şunları yazalım:
<div id="Spiral" style="position:absolute; left:13; top:141px; width:64px; height:288; z-index:1; background-image: url(spiral.gif); layer-background-image: url(spiral.gif); border: 1px none #000000; visibility: visible"> </div>
Bu örneği böyle satır satır yazmamızın sebebi, DIV etiketinin bölümlerinini açıkça görmeniz içindir: dikkat ettiyseniz, Spiral adlı bu DIV?e CSS ile tayin edebileceğimiz bütün pozisyon özelliklerini kazandırıyoruz. Zemin grafiği olarak spiral.gif diye bir resim kullanıyoruz. Kapak adını verdiğimiz diğer DIV ise şöyle oluşacak:
<div id="Kapak" style="position:absolute; left:73; top:141; width:290; height:288px; z-index:2; visibility: visible; background-image: url(kapak01.gif); border: 1px none #000000" > <h1 align="center"> <b><font face="Arial, Helvetica, sans-serif">KİTABIN İÇİNDEKİLERİ GÖRMEK İÇİN SEKMELERİ TIKLAYINIZ!</font></b></h1></div>
Bu iki DIV?in dinamik hiç bir özelliği olmadığı için içeriklerinde onClick veya başka bir yönlendirici yok. Şimdi dinamik DIV?ler olan Sekme1, Sekme2 ve Sekme3 adını verdiğimiz üç sekmeyi oluşturalım; bunların içinde, onClick?in çağıracağı fonksiyonu ve bu fonksiyona vereceğimiz argümanlar (parametreler) bulunacaktır. işte Sekme1?in DIV?i:
<div id="Sekme1" style="position:absolute; left:73px; top:95px; width:96; height:46; z-index:3; visibility: visible"> <a href="#" onClick="katmanGizleGoster( 'document.layers[\'Sekme1Zemin\']','document.all[\'Sekme1Zemin\']','show', 'document.layers[\'Sekme2Zemin\']','document.all[\'Sekme2Zemin\']','hide', 'document.layers[\'Sekme3Zemin\']','document.all[\'Sekme3Zemin\']','hide', 'document.layers[\'Kapak\']','document.all[\'Kapak\']','hide')"> <img src="sekme1.gif" width="96" height="46" border="0"> </a> </div>
DIV etiketi genellikle böyle yazılmaz; fakat neyin-ne olduğunu tartışabilmek için birinci Sekme DIV?imizi açıkça yazıyoruz. DIV?in adından sonra stil komutu ve görünür olup olmadığına ilişkin visibility özelliği belirtiliyor. Sonra, bu DIV?in içine koyacağımız resme “#” bağlantısı kazandırıyor. Bu bağlantı tıpkı bir sayfa veya site bağlantısı gibi, bir metne veya grafiğe A etiketinin özelliklerini kazandırır. Hatırlarsanız, DIV etiketinin olayları arasında en azından 3 ve 4?ncü sürüm Browserlar açısından hemen hiç bir olay (Click, MouseOver gibi) olmadığını, bu nedenle DIV?in onClick, onMouseOver gibi yönlendiricilerle yönlendirilemeyeceğini söylemiştik. Bu sebeple, DIV?in içine bir resim koyarak, bu resme Anchor etiketi bağlayıp (“#” şeklindeki bu Link tıklandığında Browser hiç bir yere gitmeyecektir!) bu etiketin Click olayına cevap verme özelliğinden yararlanabiliriz. Daha sonra yazacağımız katmanGizliGoster() adlı fonksiyonumuz, onClick halinde, yapılmasını istediğimiz işlere dair parametreleri (argümanları, arguments) üçerli gruplar halinde alacak: birinci grup bilgi Netscape için kullanılacak, ikinci grup bilgi IE için kullanılacak, üçüncü grup bilgi ise hedef katmanın görünür hale mi geleceğini, yoksa gizleneceğini mi belirtmek için kullanılacak Burada görünmesini istediğimiz katman için “göster” anlamına Show, gizlenmesini istediğimiz katman için “gizle” anlamına Hide kelimelerini İngilizce kullanıyoruz; çünkü bu kelimeleri daha sonra fonksiyonda Netscape için komut olarak kullanacağız. Bir sekme tıklandığında, Javascript dört iş birden yapsın istiyoruz: Kapak ve diğer iki sekmenin sayfaları gizlensin; tıklanan sekmenin sayfası gösterilsin. O halde, fonksiyona dört ayrı üçerli bilgi kümesini parametre olarak vereceğiz. Buraya gelmişken, diğer iki sekmenin DIV etiketlerini de yazalım:
<div id="Sekme2" style="position:absolute; left:169; top:95; width:95; height:46; z-index:4; visibility: visible"> <a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']', 'hide', 'document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']', 'show', 'document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']', 'hide','document.layers[\'Kapak\']', 'document.all[\'Kapak\']', 'hide')"> <img src="sekme2.gif" width="95" height="46" border="0"></a></div> <div id="Sekme3" style="position:absolute; left:266; top:95; width:97; height:46; z-index:5; visibility: visible"> <a href="#" onClick= "katmanGizleGoster('document.layers[\'Sekme1Zemin\']', 'document.all[\'Sekme1Zemin\']', 'hide', 'document.layers[\'Sekme2Zemin\']', 'document.all[\'Sekme2Zemin\']', 'hide', 'document.layers[\'Sekme3Zemin\']', 'document.all[\'Sekme3Zemin\']', 'show','document.layers[\'Kapak\']', 'document.all[\'Kapak\']','hide')"> <img src="sekme3.gif" width="97" height="46" border="0"></a></div>
Bu satırların hemen arkasından, sekmeler tıklandığında görüntülenecek olan sekme sayfalarını oluşturacak DIV etiketleri gelecektir. Onların kodları ise şöyle:
<div id="Sekme1Zemin" style="position:absolute; left:73px; top:141px; width:289px; height:288px; z-index:6; visibility: hidden; background-image: url(sekme1_zemin.gif); layer-background-image: url(sekme1_zemin.gif); border: 1px none #000000" ><p> </p> <h2><b>Burada Sekme 1'in bilgileri var...</b></h2> </div> <div id="Sekme2Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:7; visibility: hidden; background-image: url(sekme2_zemin.gif); layer-background-image: url(sekme2_zemin.gif); border: 1px none #000000" ><p> </p> <h2><b>Burada Sekme 2'nin bilgileri var...</b></h2> </div> <div id="Sekme3Zemin" style="position:absolute; left:73; top:141; width:289; height:289; z-index:8; visibility: hidden; background-image: url(sekme3_zemin.gif); layer-background-image: url(sekme3_zemin.gif); border: 1px none #000000" ><p> </p> <h2><b>Burada Sekme 3'ün bilgileri var...</b></h2> </div>
DIV?lerimizi tamamladığımıza göre HTML sayfamızda başa dönerek, fonksiyonumuzu yazabiliriz. Birinci nokta-noktalı yere şu kodu yazalım; sonra ayrıntılarına bakalım:
<script language="JavaScript"> <!-- function katmanGizleGoster() { var i, gorunurluk, parametreler, Nesne; parametreler = katmanGizleGoster.arguments; for (i=0; i<(parametreler.length-2); i+=3) { gorunurluk = parametreler[i+2]; if (navigator.appName == 'Netscape' && document.layers != null) { Nesne = eval(parametreler[i]); if (Nesne) Nesne.visibility = gorunurluk; } else if (document.all != null) { if (gorunurluk == 'show') gorunurluk = 'visible'; if (gorunurluk == 'hide') gorunurluk = 'hidden'; Nesne = eval(parametreler[i+1]); if (Nesne) Nesne.style.visibility = gorunurluk; } } } //--> </script>
katmanGizleGoster() fonksiyonu aldığı argümanlardan bir parametreler dizi-değişkeni yapıyor; ve oluşturacağı nesneyi bulunduğu Browser Netscape ise bunlardan “document.layers” diye başlayanlarını seçerek; bulunduğu Browser IE ise, “document.all” diye başlayan argümanları seçerek oluşturuyor; ve Browser IE ise ve hedef katman gösterilecekse “visibility” özelliği “visible,” gösterilmeyecekse “hidden”; Netscape için bizim verdiğimiz Show ve Hide kelimeleri aynen kullanılıyor.
Kodları girdikten sonra sayfanızı sekmeler.htm adıyla kaydederseniz ve Browser?ınızda açarsanız, her sekme için verdiğiniz metnin görüntülendiğini, diğer sekmelerin gizlendiğini göreceksiniz:
Hakkı Öcal Javascript dersleri