İNTERNET TABANLI PROGRAMLAMA Dersi JS Kütüphaneleri ile Çalışmak soru detayı:
SORU:
JQuery’de olay kullanımını açıklayınız.
CEVAP:
Kullanıcıların sayfa üzerindeki hareketlerine tepki
vermek için HTML DOM tarafından yayınlanan olaylar
için fonksiyonlar yazılır. HTML DOM kullanıcının bir
düğmeye tıklaması, fareyi hareket ettirmesi, bir
bağlantının üzerine gelmesi gibi eylemleri için olaylar
yayınlar. Olaylara tepki vermek için kullanılması gereken
sentaks aşağıdaki kodda gösterilmiştir.
<script>
$(seçici).olay( ... tepki veren kodlar ...);
</script>
Öncelikle $ ile JQuery çağırılır. Bunun ardından
parantezler içinde olaylarına tepki verilecek element/
elementler seçilir. Ardından nokta ile tepki verilecek olay
adı yazılır. Ardından parantezler içinde bu olaya tepki
verecek kodlar yazılır. Parantez kapandıktan sonra noktalı
virgül ile iş- lem sonlandırılır. Aşağıda verilen kodda bir
düğmeye tıklanması halinde (click olayında) tarayıcının
uyarı penceresini çağıran JQurey kodları görülmektedir.
<script>
$(“button”).click(function(){
alert(“Bir düğmeye tıklandı.”);
}
);
</script>
Seçici button olarak belirlendiğinden yazılan kodlar
sayfadaki tüm düğme elementleri için geçerlidir. click
ifadesi ile sayfadaki tüm button elementlerinin tıklanma
olaylarına tepki verecek kodlar yazıldığı belirtilmiştir.
JQuery olaylarına tepki verecek kodlar parantezler içinde
bir fonksiyon olarak yazılır. Bu amaçla function anahtarı
kullanılarak bir fonksiyon üretilmiştir. Üçüncü satırda bu
fonksiyonun içine yerleştirilen alert metodu
çağırılmaktadır. Bu sayede sayfadaki tüm button
elementlerine tıklandığında çağırılacak genel bir
fonksiyon üretilmiştir. Yazılan kod düğmenin tıklandığını
belirtmek için tarayıcının uyarı penceresini çıkarmaktadır.
JQuery kodları, script etiketleri içinde olmak kaydıyla,
sayfanın herhangi bir yerinde yazılabilir. Bununla birlikte
henüz yüklenmemiş ya da HTML DOM’a eklenmemiş
elementler için yazılan kodlar hata verecektir. Bu tür
hataları engellemek için sayfayı ifade eden document
seçicisinin ready olayı kullanılabilir. Bu olay HTML
DOM üretildiğinde yayınlandığından, yazılan kodlar bu
tür hatalar vermeyecektir. Aşağıdaki kodda bu olayın
kullanımı örneklenmiştir. İkinci satırda document
nesnesinin ready olayı seçilerek içine kod yazmak üzere
bir fonksiyon başlatılmıştır. Bu fonksiyon içine yazılan
kodlar hata vermeyecektir.
<script>
$(document).ready(function(){
$(“button”).click(function(){ alert(“Düğme tıklandı.”);
});
}
};
</script>