Jquery Mantığı

Jquery Mantığı

     Öncelikle daha önce öğrendiğimiz şekliyle bir web sayfasını hayalimizde canlandıralım.Bir web sayfası genel olarak şunlardan oluşuyordu:

1.  HTML etiketleri

2.   tarayıcıda görebildiğimiz ve göremediğimiz kısımlar

3.  (Varsa)Görünüme müdahale ettiğimiz CSS şablonları

4.  JavaScript kütüphaneleri      HTML etiketlerinin,görüntülenen imajlar,başlıklar,yazılar,makaleler,linkler ve görüntülenmeyen meta ,head gibi etiketlerden oluşturulduklarını biliyoruz.Bunlar da şimdi zihnimizin bir köşesinde dursun.

  • Olay

Ancak bu zamana kadar açıklamadığımız kısım şu.Etkileşim.Bir tarayıcı, kullanıcının yaptığı işlemlere göre tepki verir.Bir yere tıkladığında ,sayfayı kaldırdığında,cep telefonundaysa dokunduğunda,metin seçtiğinde bu olaylara göre tepki vermesi gerekir. Bu yüzden tarayıcı internet sayfanızda gezinirken  yaptığınız bütün işlemleri takip eder,sizi gözler ki sizin isteklerinize anında cevap verebilsin.İşte sizin yaptığınız,kendi kendine olan ,başka bir olayı takip eden olaylar zincirine “Olaylar” ya da ingilizcesiyle Events diyoruz.

 

  • Dinleyici

Newtonun dediği gibi bir olay olduğunda, her zaman tepki de vardır.Yani tanımadığın birisi sokakta sana tokat attığında, ya sen de ona tokat atarsın ,ya öbür yanağını çevirirsin, ya da bir şey yapmasan dahi,yaağın kızararak olaya tepki verir.Tarayıcı sürekli bizi gözetlediği ve olan olayları takip ettiği için bu olaylara tepki vermek durumundadır.Ancak hangi olaylara ne tepki vereceğini önceden bildirmek durumundadır.

Mesela bir linke tıkladığımızda,sayfayı bize hissettirmeden değiştirmelidir.Ya da bir form girişi seçtiğimizde,o girişi seçtiğimizi anlamalı, ve yazacaklarımızı dinlemeye başlamalıdır.Bu olaylara karşı tepki veren şey “Dinleyiciler” veya İngilizcesiyle Listeners olarak adlandırılır.

 

  • Eleman

Herhangi bir olayın nerede olduğu vereceğimiz tepkiyi de değiştirir.Yani her olaya aynı tepkiyi veremeyiz.Örneğin kardeşimizin doğum günü geldiğinde vereceğimiz tepki,halamızın kızının doğum gününe vereceğimiz tepkiyle aynı olmayacaktır.Yani olaylar ve tepkiler bağlama göre değişirler.Tarayıcı tıkladığınız her linke aynı tepkiyi verse,tüm sayfadaki linkler aynı yere giderlerdi ve istediğimiz işi yapmamış olurlardı.Burada tepki vereceğimiz olayın bağlantılı olduğu yapıya “Eleman” ya da İngilizce Element diyoruz.

Biz web sayfalarıyla ilgilendiğimiz için bütün bu elemanlar HTML dosyasının bir parçası.

 

  • Belge Nesne Modeli-Document Object Model(DOM)

Başlık kafamızı karıştırmasın,çünkü aslında bu kavramı öğrendik.Daha önce HTML’yi oluşturan XML yapısını anlamıştık.Bir HTML dosyası iç içe geçmiş HTML etiketlerinden oluşuyordu.Tüm HTML sayfaları en önce bir html etiketi ile başlıyorlardı.<html></html> Standart bir html dosyası şu etiketlerden oluşuyordu:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Title of the document</title>

</head>

 

<body>

Sayfa içeriği

</body>

</html>

 

Etiketler <meta charset=”UTF-8″> örneğinde görüldüğü  gibi kapatılmadan ya da <title>Title of the document</title> örneğindeki gibi kapatılarak da kullanılabiliyordu.<meta charset=”UTF-8″> etiketindeki “charset” kelimesi etiketin özelliği attiribute ve tırnak içindeki “UTF-8″verisi de o özelliğe atadığımız değeri temsil ediyordu.İlk başta kullanılması ve öğrenilmesi bu kadar basit olduğu için HTML dünya çapında internetin standart dili haline gelmiştir.

Peki “etiket” ve “eleman” dediğimiz kavramların birbirlerinden farkı nedir?Bir eleman,açılış etiketi,özellikler içerik ve kapanış etiketinden oluşabilir.Yani etiketler,tarayıcı tarafından okunup,anlaşılır bir hale geldikten sonra eleman haline gelirler.

Tarayıcılar bu elemanlara istedikleri zaman ulaşabilmek için,önce dosyayı okurlar,daha sonra da onları nesneler haline getirirler. Bu işlemin nasıl yapıldığını şu an  anlamadıysanız sorun değil.Zaten tarayıcı bizim için yapıyor bu işlemi.Sayfayı açtığımızda tarayıcı kendi hafızasında ağaç benzeri bir yapı oluşturur.Bu sayede <section>ile belirttiğimiz bir bölümde kaç tane link <p>Paragraf<p> olduğunu sorgulayabiliriz.İşte bu sorgulamayı yapmamızı sağlayan varlığa “Belge Nesne Modeli(DOM)”ya da Document Object Model (DOM) deniyor.

 

 

Share this post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir