Javascript Programlama Ünite -8

DOM ile Yapabilecekleriniz:

HTML öğelerini değiştirme veya yeni öğeler ekleme.
HTML öğelerinin içeriğini değiştirme.
HTML öğelerinin stillerini değiştirme.
Olaylar dinleme ve bu olaylara tepki verme.

Temel DOM Metodları ve Özellikleri:

getElementById(id):

Belirli bir ID’ye sahip elementi seçer.

getElementsByClassName(className):

Belirli bir sınıfa sahip elementleri seçer.

getElementsByTagName(tagName):

Belirli bir etiket adına sahip elementleri seçer.

querySelector(selector):

CSS seçicilerini kullanarak ilk eşleşen elementi seçer.

querySelectorAll(selector):

CSS seçicilerini kullanarak eşleşen tüm elementleri seçer.
Olaylar, genellikle HTML etiketlerine eklenir ve JavaScript kodlarıyla birlikte kullanılarak web sayfalarının daha dinamik ve kullanıcı dostu hale gelmesini sağlar. Bu ünite, JavaScript’te olayların nasıl kullanıldığını, olay dinleyicilerinin nasıl eklendiğini ve olayların nasıl yönetildiğini ele almaktadır.

Javascrıpt Dilinde Olay

JavaScript dilinde olaylar, kullanıcı etkileşimlerine yanıt verme yeteneği sağlar. Olaylar, web sayfasındaki elementlerin kullanıcı tarafından tıklanması, üzerine gelinmesi, form gönderilmesi gibi çeşitli kullanıcı eylemleri ile tetiklenir. Bu olayları yakalayıp işleyebilmek için JavaScript dilinde olay dinleyicileri (event listeners) ve olay işleyicileri (event handlers) kullanılır.

Olay dinleyicisi, belirli bir olay gerçekleştiğinde çalışacak olan fonksiyonu belirler. Örneğin, addEventListener metodu, belirli bir HTML elementine olay dinleyicisi eklemek için kullanılır. Bu sayede, belirli bir olay gerçekleştiğinde, belirtilen JavaScript fonksiyonu çalıştırılır.

Olay akışı (event flow), olayların HTML elementlerine nasıl yayıldığını belirler. Bu süreç, olayın önce en içteki elementten başlayarak dışarı doğru yayılmasını veya tersi yönde gerçekleşmesini kapsar. Bu iki yöntem, olayın yakalanma (capturing) ve kabarcıklanma (bubbling) fazları olarak bilinir.

JavaScript dilinde olaylar, web sayfalarının etkileşimli ve dinamik hale gelmesini sağlar. Kullanıcı etkileşimleri, web uygulamalarının kullanıcı dostu ve erişilebilir olmasını artırır. Olaylar, kullanıcı deneyimini geliştirmek ve web sayfalarının işlevselliğini artırmak için kritik bir rol oynar.

1- Bir HTML elemanına tıklanıldığında bir fonksiyon çalıştırmak için kullanılan JavaScript olay dinleyicisi hangisidir?

A) onmouseover
B) onmouseout
C) onclick
D) onload
E) onchange

Cevap : C) onclick

Açıklama : onclick olay dinleyicisi, bir HTML elemanına tıklanıldığında bir fonksiyonun çalıştırılmasını sağlar.

2- Aşağıdakilerden hangisi JavaScript’te bir olayın gerçekleştiği elemente erişmek için kullanılır?

A) this
B) event.target
C) event.currentTarget
D) event.type
E) event.preventDefault()

Cevap : B) event.target

Açıklama : event.target, bir olayın gerçekleştiği elemente erişmek için kullanılır.

3- Aşağıdaki JavaScript kodu hangi olayı dinlemektedir?

javascript
Kodu kopyala
document.getElementById(“myButton”).addEventListener(“mouseover”, function() {
alert(“Mouse over!”);
});

A) onclick
B) onmouseover
C) onmouseout
D) onload
E) onchange

Cevap : B) onmouseover

Açıklama : Kod, mouseover olayını dinlemektedir ve myButton id’sine sahip elemente fare ile üzerine gelindiğinde bir uyarı gösterir.

4- Aşağıdaki seçeneklerden hangisi bir olayın varsayılan davranışını engellemek için kullanılır?

A) event.stopPropagation()
B) event.preventDefault()
C) event.stopImmediatePropagation()
D) event.cancelBubble
E) event.default

Cevap : B) event.preventDefault()

Açıklama : event.preventDefault() yöntemi, bir olayın varsayılan davranışını engellemek için kullanılır.

5- JavaScript’te hangi yöntem bir olay dinleyicisi ekler?

A) attachEvent()
B) addEventListener()
C) setEventListener()
D) createEvent()
E) onEvent()

Cevap : B) addEventListener()

Açıklama : addEventListener() yöntemi, bir HTML elemanına bir olay dinleyicisi ekler.

6- Aşağıdaki kodun işlevi nedir?

javascript
Kodu kopyala
element.removeEventListener(“click”, myFunction);

A) click olayını dinler
B) click olayını tetikler
C) click olayını durdurur
D) click olayını dinlemeyi kaldırır
E) click olayını yeniden başlatır

Cevap : D) click olayını dinlemeyi kaldırır

Açıklama : removeEventListener() yöntemi, bir elemandan daha önce eklenmiş olan bir olay dinleyicisini kaldırır.

7- Bir formun gönderilmesi olayını dinlemek için hangi olay dinleyicisi kullanılır?

A) onsubmit
B) onchange
C) oninput
D) onreset
E) onload

Cevap : A) onsubmit

Açıklama : onsubmit olay dinleyicisi, bir formun gönderilmesi olayını dinler.

8- Aşağıdaki seçeneklerden hangisi bir olayın yalnızca bir kez çalıştırılmasını sağlar?

A) once
B) addEventListener()
C) event.one()
D) oneEvent()
E) addEventListener(“event”, function, {once: true})

Cevap : E) addEventListener(“event”, function, {once: true})

Açıklama : addEventListener() yöntemine {once: true} parametresi eklenerek bir olayın yalnızca bir kez çalıştırılması sağlanır.

—

9- Olay tetikleyicisinin görevi nedir?

A) HTML etiketlerini değiştirmek
B) CSS stillerini uygulamak
C) Kullanıcı etkileşimlerine yanıt vermek
D) Sayfa yükleme süresini azaltmak
E) Veri depolamak

Cevap : C) Kullanıcı etkileşimlerine yanıt vermek

Açıklama : Olay tetikleyicisi, kullanıcı etkileşimlerine (tıklama, fare hareketi, tuş basımı vb.) yanıt verir.

10- Aşağıdakilerden hangisi JavaScript’te yaygın olarak kullanılan bir olay türü değildir?

A) click
B) mouseover
C) submit
D) focus
E) copy

Cevap : E) copy

Açıklama : “copy” olayı nadiren kullanılır, genellikle diğer olay türleri daha yaygındır.

11- addEventListener metodunun görevi nedir?

A) Olayları silmek
B) Olayları eklemek
C) HTML içeriğini değiştirmek
D) CSS stillerini değiştirmek
E) JavaScript kodunu optimize etmek

Cevap : B) Olayları eklemek

Açıklama : addEventListener metodu, bir HTML elementine olay eklemek için kullanılır.

12- Bir olay işleyici (event handler) nedir?

A) Olayları yakalayan bir HTML etiketi
B) Olayları işlemek için kullanılan bir CSS kuralı
C) Belirli olaylar gerçekleştiğinde çalışan bir JavaScript fonksiyonu
D) Olayları optimize eden bir JavaScript kütüphanesi
E) Kullanıcı verilerini depolayan bir mekanizma

Cevap : C) Belirli olaylar gerçekleştiğinde çalışan bir JavaScript fonksiyonu

Açıklama : Olay işleyici, belirli olaylar gerçekleştiğinde çalışan bir JavaScript fonksiyonudur.

13- Olay akışı nedir?

A) Olayların HTML elementlerine yayılma süreci
B) Olayların CSS stillerine uygulanma süreci
C) Olayların JavaScript koduna yüklenme süreci
D) Olayların sunucuya gönderilme süreci
E) Olayların tarayıcıda depolanma süreci

Cevap : A) Olayların HTML elementlerine yayılma süreci

Açıklama : Olay akışı, olayların HTML elementlerine yayılma sürecidir.

14- Aşağıdakilerden hangisi bir olay dinleyicisi (event listener) eklemek için kullanılır?

A) element.onclick
B) element.addListener
C) element.addEventListener
D) element.onlistener
E) element.addEvent

Cevap : C) element.addEventListener

Açıklama : element.addEventListener, bir olay dinleyicisi eklemek için kullanılır.

15- Aşağıdaki JavaScript kodunda hangi olay türü kullanılmıştır?

javascript
Kodu kopyala
document.getElementById(“myButton”).addEventListener(“click”, function() {
alert(“Button clicked!”);
});

A) mouseover
B) submit
C) click
D) focus
E) blur

Cevap : C) click

Açıklama : “click” olayı, butona tıklandığında çalışır.

16-Aşağıdakilerden hangisi JavaScript’te olayların önceliğini belirler?

A) Olayın türü
B) Olayın elementi
C) Olayın eklenme sırası
D) Olayın işleyici fonksiyonu
E) Olayın tetiklenme zamanı

Cevap : C) Olayın eklenme sırası

Açıklama : JavaScript’te olayların önceliği, olayın eklenme sırasına göre belirlenir.