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.
Ş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.
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).
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.
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.
 |
| Javascript Nesne Yönelimli bir programlama dilidir. |
<!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>
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.Javascript Yapısını öğrenmek için DOM'u bilmek gerekir
 |
| Html Dom Yapısı(Belge Nesnesi Modeli) |
- JavaScript sayfadaki tüm HTML öğelerini değiştirebilir.
- JavaScript sayfadaki tüm HTML niteliklerini değiştirebilir.
- JavaScript sayfadaki tüm CSS stillerini değiştirebilir.
- JavaScript mevcut HTML öğelerini ve niteliklerini kaldırabilir
- JavaScript, yeni HTML öğeleri ve nitelikleri ekleyebilir.
- JavaScript sayfadaki tüm mevcut HTML olaylarına tepki gösterebilir
- 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
Yorum Gönder