Javascript Uzman Konular -1 - Geniş Kapsamlı Doküman ve Makale Sitesi

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:

<HTML>

<HEAD>

<!-- Javascript kodunu eski sürüm Browserlardan saklayalim

// grafiklerimizi tanimlayalim

var geri_outDugme = new Image( 54, 44 );

geri_outDugme.src = "geri_out.gif";

var geri_onDugme = new Image( 54, 44 );

geri_onDugme.src = "geri_on.gif";

var ileri_outDugme = new Image( 54, 44 );

ileri_outDugme.src = "ileri_out.gif";

var ileri_onDugme= new Image( 54, 44 );