Sayfa 87

Peki gizli.htm tam olarak ne yapmamıza yarıyor? Bu tamamen sizin arzunuza bağlı. Size yapılabileceklerden birini aşağıdaki örnekte veriyorum. Bu örnek yardımıyla index.php'de yüklenen ilk resmin üzerinde sağ click'e basıldığında çıkan menüyü iptal ediyoruz.

gizli.htm

<html> ... <script> parent.window.frames["anasayfa"].document.images[0].oncontextmenu = function(){ return false; }; </script> ... </html>

Peki tam olarak ne yaptık burada?

parent ile bir üst obje seviyesine çıktık, yani index_alt.htm'de tanımladığımız frame'lerin her ikisinin de bulunduğu seviyeye. Daha sonra window.frames["anasayfa"] diyerek "anasayfa" yani "index.php"nin yer aldığı bölüme ulaştık. document.images bu sayfada yer alan tüm resimlerin bulunduğu dizi. document.images[0] ile ilk resmi seçtik. Son olarak "oncontextmenu" ile sağ mouse click event'ini kendi yarattığımız bir fonksiyona yönlendirdik. Bu fonksiyon ise "return false" komutuyla event'i gerçekleşmeden durdurmaya yarıyor. return false yerine alert('deneme') yazarak da script'i test edebilirsiniz.

Tabii ki bu en basit kullanım örneklerinden biri. Bu yöntemle sayfa içerisindeki hemen her şeyi kontrol etmeniz, elementler eklemeniz, değiştirmeniz hatta yok etmeniz mümkün. Ancak unutmayın ki bu kullanım lokal sayfalar için geçerlidir. Yani web server elinizin altında değilse ve index_alt.htm, gizli.htm dosyalarını index.php'nin olduğu server'a koyamıyorsanız, bu durumda bu yöntem işe yaramayabilir.

2) Dinamik olarak nasıl element yaratabilirim? Bunlara nasıl event ekleyebilirim?

Javascript'te az önce gördüğümüz örnekteki event tanımlama kullanımı her zaman işe yarıyor mu? Aslında çoğunlukla yarar. Ancak bir de dinamik olarak yaratılan elementler var ki bu durumda işler biraz değişebiliyor. Size aşağıdaki kullanımı tavsiye ediyorum.

<html> ... <body> <div id="tasiyici"></div> <script> function goster(yazi) { alert("Textbox'a girmiş olduğunuz yazı: "+yazi+"\nİşte dinamik elementlerin gücü!"); } var textbox = document.createElement('input'); textbox.setAttribute('type','text'); textbox.setAttribute('size','50');

var button = document.createElement('input'); button.setAttribute('type','button'); button.value = 'Onayla'; if(document.addEventListener) // Firefox button.addEventListener('click',function(){ goster(textbox.value); },false); else if(document.attachEvent) // Internet Explorer button.attachEvent('onclick',function(){ goster(textbox.value); });