|
|
|
JAVASCRİPT
KONULAR
|
Javascript ile Dinamik HTML Bu kadar uğraşıp, Javascript öğrenmemizin, iki amacı olabilir; ziyaretçi ile etkileşme ve HTML yapılması imkanı bulunmayan görsel etkileri oluşturma. Ziyaretçinin Form yoluyla size vereceği bilgileri, yapacağı tercihleri ve bunları tutan değişkenlerin değerlerini nasıl belirleyeceğimizi ve kullanabileceğimizi ana hatlarıyla gördük. Buraya kadar edindiğimiz bilgilerden yararlanmak ve bunları sayfalarımızın içeriğine bağlı olarak gerçek durumlara uygulamak tabir yerinde ise kolay. Javascript’in Browser ve HTML olaylarını (MouseOver, Click, Change gibi) yönlendirmekte kullandığı yönlendiricilerinden (onMouseOver, onClick, onChange gibi) yararlanarak, sayfalarımızda belki de Javascript’i icad edenlerin hiç de niyet etmedikleri bir tarzda da kullanabiliriz. Bu bölümde Javascript ile oynayabileceğimiz görsel oyunları veya Javascript-Layer ve Javascript-CSS ilişkilerini ele alacağız. Fakat önce kısaca Dinamik HTML’in (DHTML) imkan ve yeteneklerinden söz edelim. HTML ile DHTML arasındaki fark, ikincisinin stil komutları, iki boyutlu tasarıma üst üste yığılan katmanları ekleyerek üçüncü boyutu getiren ve veritabanı ile çoklu-ortam ürünleri ile klasik Web unsurları arasında bağ kuran teknolojiler içermesidir. DHTML, HTML’e ek etiket getirmez; mevcut etiketlere ilave özellik ve nitelik kazandırır. Bunu CSS (Cascading Style Sheets) teknolojisi sağlar. Ayrıca DHTML yoluyla, HTML’in bilinen etiketlerinin bilinen özellikleri, ziyaretçinin sayfanızda yapacağı tercihlere, tutum ve davranışlarına göre dinamik olarak değişmesini programlayabilirsiniz. Başka bir deyişle, DHTML, HTML etiketlerinin program yoluyla dinamik hale getirilmesi demektir. Browser dünyasında IE, bir HTML sayfasındaki bütün unsurların programlanmasına imkan veren ve adına Element Modeli denen bir yöntem uygulayabilir. Fakat bunu yaptığınızda, bu kez Netscape’in bu modeli tanımayan yorum tarzına takılabilirsiniz. Başka bir ifadeyle, IE için bir sayfanın tümü, programlandığı belirtilmeden programlanabilir. Bir örnek verelim. H1 etiketini tanırsınız ve sürekli kullanırsınız; H1 olarak etiketlenmiş bir metnin MouseOver olayı ile ilgisi olamaz, diye düşünebilirsiniz. O halde şu kodu herhangi bir sayfaya yerleştirin: <H1 onMouseOver="this.style.color = ‘red’;" onMouseOut="this.style.color = ‘black’;" >Beni Kırmızı Yap!</H1> Sonra bu sayfayı önce IE ile sonra Netscape ile açın; her ikisinde de Mouse işaretçisini "Beni Kırmızı Yap!" kelimelerinin üzerine getirin ve geri çekin. Bu deneyden sonra hayalkırıklığına kapılmayın; aynı etkiyi Netscape ile de sağlamanız mümkün; fakat bunu Javascript programı ile yapabilirsiniz. Şimdi bu tür Javascript programlarının örneklerini görelim. Düğme Grafiği Animasyonu Cascading Style Sheets (Yığılmalı Stil Sayfaları) denen ve HTML’in kendi önceden-tanımlanmış stil etiketlerinin (H1, H2, P gibi) biçimini değiştirmek dahil, kendi stil etiketlerinizi tanımlamanıza imkan veren ek imkana geçmeden önce, şu ana kadar öğrendiğimiz Javascript komutlarını ve HTML olaylarını kullanarak, kendimize bir Anime (Hareketli) İleri-Geri düğmesi içeren sayfa yapalım. Hatırlayacaksınız, HTML’in Anchor etiketi, Mouse işaretçisinin üzerine gelmesi (MouseOver) ve geri çekilmesi (MouseOut) olaylarına karşı hassastı; ve biz iki olayı onMouseOver ve onMouseOut yönlendiricileri ile istediğimiz fonksiyona bağlıyabiliyorduk. Aşağıdaki kodun mantığı, buna dayanıyor; önce fonksiyonumuzda kullanmak üzere dört değişken tanımlıyoruz ve bunlara düğmelerimizin adlarını ve boyutlarını değer olarak veriyoruz. Bu alıştırmayı yapmaya başlamadan önce aynı boyda dört grafiğiniz olması gerekir: (1) İleri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (ileri_on.gif), (2) İleri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (ileri_out.gif), (3) Geri düğmesinin Mouse işaretçisi üzerine geldiği sıradaki görüntüsü (geri_on.gif), ve (4) Geri düğmesinin Mouse işaretçisi üzerinden çekildiği sıradaki görüntüsü (geri_out.gif). Konumuz grafikçilik değil, ama düğme grafiklerinizde yazı ve diğer unsurların yerlerinin aynı olması ve "on" ve "out" türleri arasında dikkat çekici bir derinlik (boyut) farkı bulunması yerinde olur. "dugmeDegistir" isimli fonksiyonumuz, onMouseOver ve onMouseOut yönlendiricilerinden iki küme bilgi almaktadır: işlemin ileri mi geri olduğuna ilişkin "ileri" veya "geri" kelimesini ve bu bu halde kullanması gereken değişkenin adını. Fonksiyonumuz, bu bilgileri kullanarak kullanacağı değişkenin adını elde edecektir. Bunu eval() fonksiyonu ile yapıyoruz. Hatırlayacaksınız, eval() ile, Javascript’in, bir kaç değişkenin içeriğini değerlendirip, bize arzu ettiğimiz bir biçimde sunmasını sağlıyoruz. Burada eval(), "goruntuNesne" adını verdiğimiz değişken-değerini alacak ("goruntuNesne," fonksiyonun onMouseOver veya onMouseOut’tan aldığı ikinci küme bilgi, yani ya "ileri_onDugme," ya "ileri_outDugme," ya "geri_onDugme," ya da "geri_outDugme") ve buna ".scr" metodunu harekete geçirecek kelimeyi ekleyecek. Bu metod ise fonksiyona, Javascript ‘e düğmenin kaynağını (source) bulması için yol gösterecek. Aşağıdaki kodu animeDugme.htm adıyla kaydeder ve bir yerde saklarsanız, daha sonra bir çok düğme veya grafik animasyonunda size yol gösterebilir:
Katman Tekniği (DIV, LAYER) Katman, HTML’e, kendi içindeki bütün unsurların bir bütün olarak ele alınmasını bildirir. Tabir yerinde ise, DIV veya LAYER etiketi ile oluşturacağınız katman ile HTML sayfasının üzerine, altını gösteren bir parşömen kat koymuş oluyorsunuz. CSS tekniklerini kullanarak Layer unsurlarını sayfada diğer herhangi bir HTML unsurundan daha büyük ölçüde ve çok daha hassas şekilde biçimlendirebilir; hatta hareket özelliği kazandırabilirsiniz. Javascript, katmanların bu özelliklerini, çeşitli olaylardan yararlanarak, olay-yönlendiricilerine ve metodlara bağlayabilir. 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 (scott@insideDHTML.com) 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:
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:
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:
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;
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:
IE için ise:
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:
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:
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:
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 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:
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’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:
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:
|
©2001 BİRSEY.COM |
