<div><ul><li><h3>yazi</h3></li><ul><div>

yani Div icinde –> liste –> listenin icinde –> h –> baslik (header) icinde yazimiz var.

iste Dom bu noktada html dokumani icerisindeki taglar ulamamizi saglar.

Daha önceden nesle tabanli bir programla dili kullandiysaniz Dom ‘u daha rahat kavrayabilaceginize eminim. Dom ‘u kisaca özetlemek gerekirse html veya xml dosyasi üzerindeki tüm nesnelere ulasir ve bu nesneler üzerinde islem yapma imkani sunar. Örnegin bir resimin width degerini degisterebilir veya bir form icindeki textbox ‘tan dagerini alabiliriz.

Dom ‘un islemesi icin iki ana faktör vardir birincisi sitenin temel dili yani Html duruma göre Xml ‘de olabilir ve birde dom ‘u isletecek bir isletme diline ihtiyac vardir. Isletme dili olarak genel olarak Javascript kullanilsada asp, php, python,jsp vb.. gibi server tabanli dillerde olarabilir hatta Php 5 ‘in en önemli yeniliklerinde bir tanesi bünyesinde Dom sinifi barindiriyor olmasi. Bu son yadiklarimdan sonra hakli olarak “Dom bir programlama dili degilmi ?” seklinde bir soru takilabilir. Dom kesinlikle bir programlama dili degil dom aslinda bir web saysinin kaynagidir daha dogrusu hazirlamis oldugunuz sayfanin yapisidir.

Isterseniz örneklerle anlatarak Dom ‘u kavramaya calisalim ;

Ilk browserler web sayfasini bir dokuman olarak kabul eder yazmistim. bu sebeple Dom hiyerarsisinde en yukaridaki kurum document ‘tir

document.

sonrasinda dokuman icerisindeki nesnelerimiz gelir;

document.form.textbox.

sonrasinda da bu neslenin özelligi gelir;

document.form.textbox.value

söyle bir kod yazalim

<script type="text/javascript"><!--
document.form.textbox.value = "Hüseyin Kocak"
// --></script>

<form method="post"> <input id="isim" type="text" /> </form>

burada form ‘un icindeki textbox ‘un degerini Hüseyin Kocak yaptik ve textbox ‘un bu özelligine Dom ile ulasmis olduk. bu durumda kutucuk icerisinde verdigimiz deger yazacaktir.

Sanirim bu örnekten sonra Dom ‘un ne oldugunu ve ne isie yaradigini daha iyi anladiniz.

Yukarida örnekte textbox ‘a hiyerarsik bir yapiyla tag isimleri araciligi ile ulastiniz fakat ayni islemi id araciligi ile yapabilirdik.

Simdi ayni örnegi bir kez daha yapalim

<script type="text/javascript"><!--
document.getElementById('isim').value = "Hüseyin Kocak"
// --></script>

<form method="post"> <input id="isim" type="text" /> </form>

Dokumanin getElementById özelligini kullanarak id ’si isim olan nesnenin degerine ulasmis olduk. Islev olarak yukaridaki örnekle tamamen aynidir fakat nesnelere Id ile ulasmak daha yaygindir ayrica ileri derslerimizde bol bol görecegimiz örneklerde nesneyi id ile bulup islemenin farklarini daha iyi kavrayacaksiniz

Ayrica nesnelere ait bir cok özellik mevcuttur size bir fikir vermesi acisindan bunlardan birkac tanesini yazacak olursak;

- title –> bu özellik ile web sayfanizin veya nesnenin basligini degistirebilirsiniz.

document.title = "Web SayfasininBasligini Degistirdim"

- className –> nesnenin css icin class ‘ini degistirir

document.div.className = "kirmizi"

- width –> nesnenin genislik ebatini verir

resimin_genisligi = document.resimim.width

Tabiki Dom bünyesinde bir cok nesne özelligi vardir yukarida saydiklarin bunlardan sadece birkac tanesi. Ilerleyen derslerde Dom ‘un diger özelliler ve örneklerle Dom derslerine devam edecegim.

Eger web sitesi tasarliyorsaniz ilaki azda olsa HTML, JavaScript, Css gibi programlam dilleri hakinda bilginiz var demektir. Ajax bu programlama dillerinin harmanlanmis halini kullandigi icin ögrenilmesi zor degildir. Sadece teknik hakkinda bilgi sahibi olmaniz ve iyi bir kurgu yapmaniz yeterli.

Ajax ‘in bize sagladigi ajantajlari siralamak gerekirse ;

• Ögrenilmesi kolaydir
• Iyi bir kurgu sonucunda web sayfasinin sadece gerekli bölümlerini ziyaretciye gösterip diger bölümleri ziyaretcinin istegine sunabilirsiniz. Bu sekilde Web sitenize hiz saglayabilirsiniz.
• Ziyaretciye sanki bir masaüstü program kullaniyor hissi verir.
• Örnegin bir form dolduruken ziyaretcinin sectigi bilgiler dogrultusunda form secenekleri esneklik kazanabilir
• Bircok islem tek bir sayfada gerceklestigi icin bant genisligi (bandwith) sinirinizi minimuma indirebilirsiniz.
• Görsel olarak klasik sitelere kiyasla cok üstündür.

Peki ajax ‘nin  dezavantaji varmi derseniz, her nekadar ajantajlari dezavantajlarini bastiriyor olsa da evet vardir ;

• Arama motorları, tabi en basta Google Ajax ile sunulan bilgileri görmüyor ve indexlemiyor.
• Insanlarin büyük bir kismi hala klasik sitelere alisik oldugu icin bazen ajax uygulamalarini yadirgayabilirler. Örnegin bir link tikladiklarinda sag tarafta icerik gösterildigi halde ziyaretci yeni bir sayfa acilacak diye bekleyebilir. Bu sorunu cözmek icin bircok ajax gelistirici hazirladigi uygulamalarda loading teknigi kullanmaktadir.
• Bazi durumlarda ziyaretcilerin Web Tarayici programlari üzerinde ileri geri tusuna basmalari beklenmedik sonuclar cikarabiliyor.
• Ajax Server icin cok rahatlatici olsada tüm agirligini ziyaretcinin bilgisayarina verir. Yani Web sitenize giren kimsenin bilgisayari yavas ise ajax islemciyi biraz daha zorlayagi icin web siteniz o bilgisayarda yavaslaya bilir. Fakat gün gectikce eski bilgisayarlar ortadan kalkacagini düsünürsek bu asilmasi pek zor bir problem degil gibi gözüküyor
• Yukarida soruna paraler baska bir problem ise ziyarecinin bilgisayarinda javascript kapali ise veya bir antivirüs programi javascript uygulamalarini engelliyorsa siteniz o ziyaretcinin sayfasinda sorunlu calisabilir.

Ajax konusunda en cok dikkat etmeniz gereken husus ilk olarak web sitenizi analiz edip sadece gerekli yerlerde kullanmanizdir ve firefox, internet explorer, Chrome, opera vb… gibi diger browser ‘lerde web sitenizi kontrol ediniz.

Gelisen web 2 teknoloji ile önde gelen bir cok Web Sitesi Ajax kullaniyor örnegin youtube, Google, Ebay, Yahoo, Facebook, Hotmail bunlardan sadece birkaci ve ileleyen zaman icerisinde Ajax Teknigi webtasarimin vazgecilmez yapitaslarindan biri olarak yerini aldi.

Ilerleyen dersler icerisinde adim adim ajaxla nasil uygulamalar gelistirecegimizi anlatacagim, eminim Ajax ‘i ögrendikce cok seveceksiniz