JavaScript Orta Seviye

Merhaba,

JavaScript'e Giriş yazımızın ardından şimdi de orta seviyede bir yazıyla öğrenmeye devam ediyoruz. Bu bölümde temel bilgilerden hariç iş yapan kodlar göreceğiz. DOM , JSON , AJAX , jQuery gibi yeni kelimeler göreceğiz.

Başlayalım.

DOM

Document Object Model kelimelerinin baş harflerinden oluşan DOM ile HTML elemanlarına ulaşarak onlar üzerinde JavaScript ile işlemler yaparız. 

DOM neye benziyor derseniz geliştirici araçlarını açtığımızda elements sekmesinde görünen liste DOM'un ta kendisidir. 

Tree ve Branch

Ağaç ve Dal. HTML yapısı XML yapılara benzer. Elemanlar ve onların içlerinde elemanlar vardır. Bu yapı bir ağaca ve dallarına benzer. Bir tane ana eleman vardır html. Onun head ve body dalları vardır. Bunların her biri içinde de kendi dalları vardır. Bu sebepten DOM için bazen DOM Tree denir. 

DOM'u değiştirmek demek, onun bir elemanını seçip birşeylerini değiştirmek demektir ve bu çoğunlukla JavaScript ile yapılır. . 

Prototype AJAX (keşke projax diye bir gem olsaydı)

Daha önce Prototype Ajax kabiliyetlerinden bir kısmını kurcalamıştım. Biraz daha derinlere dalmaya ancak fırsat bulabildim. Biraz da server tarafta betik koşturmaca yapayım dedim.

Twit gibi birşeyler

Ajax çağrıları aslında daha önce yaptığımız html yada text erişimleri yerine dinamik erişimlerde kullanılır. Yani gelecek olan cevap aslında gönderilen veriyle bağlı olarak server tarafta işlenerek oluşturulur.
Html formlarından server'a veri gönderip almakta kullanılan GET ve POST metodlarını kullanacağız. Ajax bu metodların ikisini de veri göndermek için kullanabilir.

Yeni denememizde twitter gibi yaptıklarımızı not alacağız (biraz benzer belki). Şimdi bir tane "twit.html.haml" dosyası oluşturalım ve daha önceki "index.html.haml" ile aynı klasöre koyalım :

Protototototype Ajax Antremanı (Akıllı adamlar bulmuş)

Tok nefs sarhoş kafa gibidir, hiçbir şeyi düzgün yapamaz. Nefs dediğin aç olmalı , aç nefsin olunca bilincin açılır. Nefsi fazla doyurmayacaksın , burnunun dibindekini göremezsin.

Rails'de javascript yardımcısı olarak ana pakette Prototype ve Script.aculo.us javascript kütüphaneleri kullanılmış. Ajax konusunda araştırma yaparken güzel bir yazı buldum paylaşmak isterim.

Malzeme Listesi

1 Adet Pardus
1 Adet Ruby
1 Adet HAML gem
1 Adet Serve gem
1 Adet Prototype.js
1 Adet Firefox Tarayıcı
1 Adet Firebug Eklentisi

Tarif

Ajax Yollarından Aştım da Geldim

   Geçen Rails ve Ajax üzerine bir giriş yazısı okudum. Birşeyler öğrendiğim için paylaşmak istedim.

   Önce bir Rails uygulama üretelim. 

rails ajaxdnm
cd ajaxdnm
script/server

   Uygulamanın çalıştığını browser'da "http://localhost:3000/ " adresinden kontrol edelim, meşhur "Welcome aboard" ekranını görelim. Çalışma yapacağımız sayfayı oluşturmak için "act" adında bir action(ekşın)'ı olan kendi adı da "cont" olan bir controller üretelim.

script/generate controller cont act

   "http://localhost:3000/cont/act " adresini girdiğimizde karşımıza şu çıkar :