Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

Javascript yapısı ve DOM nedir

Javascript yapısı denildiğinde ilk akla gelmesi gereken nesne yönelimli  program olduğudur.Object Oriented bir dilde denilebilir.Nesne yönelimli programlamada her şey bir nesneden oluşur.Nesnelerin özellikleri ve davranışları(metodlar) vardır.
Javascript nesne yönelimli programlama
Javascript Nesne Yönelimli bir programlama dilidir.
Şimdi aşağıdaki kodları incelemenizi istiyorum. Javascript ile bir yazı yazdırmak istediğimizde klasik olarak kullanılan bir kod var.Document nesnesinin  write metodu kullanılarak html dökümanına yazı yazdıracağız.

<!DOCTYPE html> <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile yazı yazdırma metodu</title> </head> <body> <script type="text/javascript"> document.write("şu anda saat 18:53"); </script> </body> </html>
Görüldüğü üzere DOM modelindeki document nesnesi'nin  write metodu kullanılarak html sayfamıza şuanda saatin kaç olduğunu yazdırmış olduk.Bu şekilde  nesneleri  ve neslere ait  özellikleri hedef alan programlara nesne yönelimli programlar denir(Object Oriented Program).


Javascript Yapısını öğrenmek için DOM'u bilmek gerekir

Html belgesini bir ağaca benzettiğimizde en üst hiyerarşide document nesnesi yer alır.Sonrasında html ve sonrasında web tasarım ve kodlamaya geçtiğimizde göreceğiniz üzere head ve body kısımları gelir.Şuan  sadece vurgulamak istediğim dom yapısı denildiğinde resimde gördüğünüz temel elemanları unutmamanız.
dom nedir
Html Dom Yapısı(Belge Nesnesi Modeli)
Tarayıcılar oluşturduğumuz web sayfalarını birer belge ,belge içersindeki elemanları(form,resim,buton) birer nesne olarak algılar.Javascript yapısı ile ilgili bilmenizi istediğim şeyleri madde halinde sıralamak istiyorum.
  1. JavaScript sayfadaki tüm HTML öğelerini değiştirebilir.
  2. JavaScript sayfadaki tüm HTML niteliklerini değiştirebilir.
  3. JavaScript sayfadaki tüm CSS stillerini değiştirebilir.
  4. JavaScript mevcut HTML öğelerini ve niteliklerini kaldırabilir
  5. JavaScript, yeni HTML öğeleri ve nitelikleri ekleyebilir.
  6. JavaScript sayfadaki tüm mevcut HTML olaylarına tepki gösterebilir
  7. JavaScript, sayfada yeni HTML olayları oluşturabilir.

Javascript ile html belgesinin başlığının rengini değiştirme

Aşağıda hazırladığım uygulama ile Js ile html sayfanızın başlığının rengini kırmızıya dönüştürebileceksiniz.Rengi Değiştir butonuna tıklamayı unutmayın.Js  hala tüm browserlarda çalışan  ve gelişen bir teknoloji.Js ile yapılabileceklerin sınırı illaki vardır ama genel olarak hayal gücümüz ve bilgi düzeyimizle sınırlı dersek daha doğru olacaktır.

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile HTML Belgesinin Başlığına Müdahale</title> </head> <body> <h1 id="baslik">JS öğreniyorum</h1> <button onclick="renk()">Rengi Değiştir</button> <script type="text/javascript"> function renk(){ //rengini değiştirdim kırmızı yaptım document.getElementById("baslik").style.color="red"; } </script> </body> </html>
Javascriptin yapısı hakkında ve html dom nedir biraz olsun önbilginizin olması şimdilik yeterlidir.Diğer javascript derslerini takip etmeyi unutmayın .Daha bir çok javascript derslerimiz olacak .Daha iyi daha faydalı yazılar yazmama yardımcı olmak isterseniz yorum yazın.

Yorumlar