Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan JavaScript programlama dili eğitimidir. Eğitmen, event propagation ve event özellikleri konularını detaylı şekilde anlatmaktadır.
- Video, iki ana bölümden oluşmaktadır. İlk bölümde event propagation özelliğinin nasıl çalıştığı ve event nesnesinin target, cleanX ve cleanY gibi özellikleri örneklerle açıklanmaktadır. İkinci bölümde ise bu bilgilerin uygulamalı olarak bir galeri uygulaması üzerinden gösterilmektedir. Eğitmen, HTML'deki küçük görsellerin JavaScript ile büyük görsellere dönüştürülmesi sürecini adım adım anlatmaktadır.
- Eğitim, data-pic attribute'inden değer alarak görsellerin id'lerini bulma, bu id'lere class name atama ve büyük görsellerin yan yana gelmesini engelleme yöntemlerini içermektedir. Video, kodun çalıştırılması ve sonuçların test edilmesiyle sonlanmaktadır.
- Event Propagation Özellikleri
- Önceki derste propagation özelliği incelenmiş, kırmızı kareye tıklandığında "square click", mavi dikdörtgene tıklandığında "rectangle click" sonucu alınıyordu.
- Event propagation özelliği kaldırıldığında, kırmızı alana basıldığında önce "square click" sonra "rectangle click" sonucu alınıyor.
- Event propagation özelliğini değiştirmek için üçüncü parametre ekleyip true değerini vererek, tıklama sırasını değiştirebiliriz.
- 02:54Event Object Özellikleri
- Event object'in en çok kullanılan özelliği "target" özelliğidir ve tıklanan web sayfasının elementini gösterir.
- "Target" özelliği ile tıklanan elemanın id'sini elde edip, bu elemana stil verebiliriz.
- "Event.clientX" ve "event.clientY" özellikleri ile tıklanan alanın x ve y koordinatlarını alabiliriz.
- 06:31JavaScript Öğrenme Yöntemleri
- JavaScript'in en temel noktası bol bol örnek incelemek, kodlamak ve Google'ı iyi kullanmaktır.
- Google'da "javascript mouse click" gibi aramalar yaparak veya Mozilla Developer Network (MDN) gibi kaynaklara bakarak event özellikleri hakkında bilgi edinebiliriz.
- 08:00Galeri Örneği
- Örnek olarak basit bir galeri oluşturulacak, küçük resimlere tıklandığında aşağıda büyük resimlerin görünmesi istenecek.
- HTML kodunda "data-pic" atribütü kullanılarak küçük resimlerin id'leri büyük resimlerin id'leriyle eşleştirilecek.
- JavaScript'te "document.getElementById" fonksiyonu ile küçük resimlerin id'leri değişkenlere atanacak ve "addEventListener" ile click event'i eklenecek.
- 15:43HTML Görselleri ve ID'ler
- Köşeli parantez içerisinde çift yazarak "data-pic" attribute'ından değer alınıyor.
- Üç görsel için "data-pic" attribute'ına ait değerler id'lerle eşitlenerek "picture" değişkenine atanıyor.
- "document.getElementById" fonksiyonu kullanılarak id'ye göre elementler seçiliyor.
- 17:44Görsel Gösterme ve Gizleme
- "if" koşulu ile "picture" elementinin class name'i "high" ise gizleniyor, değilse gizleniyor.
- Tekrar tıklandığında görselin durumu tersine çevriliyor.
- Bu şekilde görsel galerisi çalışıyor, ancak tek bir yerde tek bir görselin açılması gerekiyor.
- 19:36Görsellerin Gizli Yapılması
- Tüm görsellerin gizli görünmesi için "high" class'ı atanıyor.
- "document.querySelectorAll" fonksiyonu kullanılarak tüm büyük resimler bir değişkene atanıyor.
- For döngüsü ile tüm elementlere "high" class'ı atanıyor.
- 22:58Dersin Özeti
- Tüm HTML dosyasındaki küçük görseller bir değişkene atandı.
- Event ile sınır atandıktan sonra fonksiyon yazıldı.
- "data-pic" attribute'ından değer alınıp id'lerle eşitlendi ve class özelliği atandı.
- Büyük görsellerin yan yana gelmesini engellemek için "high" class'ı verildi.