Önemli not: Gökhan'ın önerisi üzerine yazıya kod örnekleri tam olarak eklenecek ve çalışma anındaki ekran görüntüleri eklenecektir. Bir de çalışan haline bağlantı konulacak.
Unobtrusive Javascript, kısaca işaretleme dili (markup) arasına "katıştırılmamış" betikler için kullanılan bir terimdir. Jquery gibi javascript framework leri ve FCKEditor gibi kütüphaneler, katıştırılmamış javascript kullanımına önem verirler.
Javascript kodu, genellikle html içine doğrudan tamamıyla yazılmaz. Örneğin bir "button" için onclick olayına onclick="function(){}" diyerek tüm fonksiyon orada tamamlanmaz. Şimdiye kadar gördüğüm yazım şekli, fonksiyonu <script> etiketinin içinde (tercihen ayrı bir dosyada) tutmak fakat fonksiyona çağrı yapan kodu onclick, onmoueover gibi olaylara html işaretleme içinde yazmaktır.
Unobtrusive yazdığınız zaman, olay tutucuya fonksiyonu iliştirme işlemini de javascript içinde yaparsınız. Bunun için window.onload olayını kullanabilirsiniz, örnek bir olay tutucusu atamayı birlikte inceleyelim:
<input type="button" id="buton_1" value="Tıkla"/>
Bu butona onclick olayında alert('katışıksız'); yazdırmak isteyelim. Dahil edeceğimiz javascript dosyası içinde yazmamız gereken şudur:
window.onload = function() {
var buton = document.getElementById('buton_1');
if(buton.onclick) {
buton.onclick = function(){ alert('katışıksız');}
}
}
Birden fazla elemente olay atamak istediğimiz zaman id gibi tek olan bir özellik değil, class, rel, title gibi birden fazla elementte aynı değeri alabilen bir belirleyici ile html elementlerini gruplayabiliriz. Javascript tarafında ise getElementsByTagName metodunu kullanıp, gelen kontroller içinde istediğimiz şartı sağlayanlar için uygun olaylarına (onclick, onmouseover gibi) fonksiyonlarımızı atayabiliriz.
Örnek :
<input type="button" class="tik" value="Tıkla"/>
<input type="button" class="tik" value="Tıkla"/>
<input type="button" class="tik" value="Tıkla"/>
Bunun için yazacağımız javascript kodu:
window.onload = function() {
var butonlar = document.getElementsByTagName('input');
for(buton in butonlar) {
if(buton.className!="tik") continue; //eger class="tik" değilse,
//bir sonraki adımdan devam et
if(buton.onclick) {
buton.onclick = function(){alert(this.value);}
}
}
}
Benzer şekilde, ihtiyacımız olan tüm parametreleri html işaretleme (markup) içinde bir şekilde anıp, sonra javascript içinden uygun özellikle çekeriz. Örneğin tıklanan nesnelerin isimleri veya css sınıfları dahi bu şekilde javascript kodunu tetiklemek için bir işaretleyici görevi görür.
Tüm yazdığınız kodlar bu kadar basit olmayacaktır, ancak prensip bu kadar basittir. Aynı dosyayı farklı bir projeye kattığınız zaman, javascript olayları sizin belirlediğiniz html özelliklerini bulacak ve o olaylara kendini ekleyecektir.
Eksik/hatalı anlatım ve görüşleriniz için yorumlarınızı bekliyorum. Teşekkürler.
Kaynakça ve detaylı bilgiler: