Dinamik Web Sayfaları

Yazan: türker | Tarih 29 Eylül 2007 | Yorum  2 Yorum
BerbatKötüOrtaGüzelHarika 2 kez puan verildi, Ortalama: 4.5 (5 üzerinden)
Loading ... Loading ...

Sayfalar: 1 2

Ön Bilgiler

Aşağıdaki grafikte gördüğünüz bir web sayfasındaki tüm nesnelerin birbiri ile olan ilişkisini kabaca göstermektedir. Bu nesnelere(object) ulaşmak için bilmeniz gereken iki şey; birincisi tarayıcının desteklediği standart ve .DOM

Tarayıcı Standartları : Eskiden (tarayıcıların 5. versiyonları henüz çıkmamışken) hemen her tarayıcıya göre farklı bir kodlama yapmanız gerekebiliyordu. Bir süre sonra bu karışıklığın ilerde yol açacağı sorunları gören kuruluşlar ortak bir standardı kabul etmenin gerekliliğini anladılar. Şu an yazdığınız kodun(hem JS hem CSS) en az %95lik kısmı tüm tarayıcılar üzerinde çalışacaktır. Günümüzde yazılan uygulamaların tüm tarayıcılarda çalıştığını ifade etmek için "cross-browser" terimi kullanılıyor. Sadece 1-2 tarayıcıya özgü özellikler olduğu gibi bazen W3C tarafından standart olarak ilan edilen özelliklerin tam olarak(yada hiç) desteklenmediğini de görebilirsiniz. Ama programcı biziz ve işimiz develere hendek atlatmak :D

(Doküman Nesne Modeli-Document Object Model): Websitenize iletişim formu eklediğinizi düşünelim. İletişim formunun text alanlarına fare ile tıklandığında rengini de değiştirmek istiyorsunuz. Hatta JavaScript bilginiz de var ve form gönderilmeden önce birkaç güvenlik kontrolü de yapacaksınız. Bir şekilde sayfadaki nesnelere erişip bilgilerine ulaşmanız ve o nesneye özgü özellikler(property) ve metodları(method) kullanarak istediklerinizi yapmanız lazım. İşte istediğiniz nesneye erişirken kullanacağınız yapı(structure)  olarak ifade edilir. Aslında ilk başlarda biraz karmaşık gelebilir ancak birkaç küçük antremandan sonra nasıl kullanıldığını anlayacaksınız. Ana fikir şudur: sayfada bulunan herşey bir nesnedir. Linkler, form elemanları, tablolar, resimler vs. Basit bir örnek vereyim:

[code]

Deneme Yazısı

document.getElementById('text').style.color="red";

[/code]

Gördüğünüz gibi  "deneme" isimli katmanımıza(layer) "id" ile tanıtıcı bir anahtar tanımladık. (Hem "name" hem "id" tamamen keyfidir, kodlama yaparken kolay hatırlamak için dilediğiniz gibi isimlendirebilirsiniz.) Bu anahtar ile gerekli elemanı elimizle koymuş gibi bulduk. Daha sonra bu elemanın özelliğini yine keyfimize göre değiştirdik. Anlayacağınız üzere basamaklı şekilde bir ilerleme söz konusu. "document" ile sayfayı ele alıyoruz, "getElementById('text')" ile anahtarını bildiğimiz elemanı  buluyoruz. Daha sonra "style" ile bu elemanın hangi özelliğini kullanacağımızı belirtiyoruz. En sonunda da "color" ile bu özelliğe uygulanacak değişikliği belirtiyoruz. Peki hangi elemanın hangi özelliği aldığını nerden bileceksiniz? CSS öğrenmeye başlayın hemen...

Olay Tutucular(Event Handlar): Daha önce kullanıcının(veya kodu yazan kişinin) bir şeyi tetiklemesi sonucu bir dinamiklik oluşuyor demiştim. Bu tetikleme işlemleri belli tutucular sayesinde olabiliyor. Bu tutucuların hepsi her eleman için geçerli değildir. Mesela "onkeypress" "<img" ile birlikte kullanılmaz. Nedeni gayet basit, webde gördüğünüz grafikler üzerinde fare ile işlem yaparsınız. Ya üzerine gelirsiniz, ya tıklarsınız ya tutup sürüklemeye çalışırsınız vs.

  • onabort: sayfa yüklenmesi iptal edilirse
  • onblur: eleman terk edilirse
  • onchange: elemanın değeri değiştirilirse
  • onclick: elemana tıklanırsa
  • ondblclick: elemana çift tıklanırsa
  • onfocus: eleman aktive edilirse
  • onkeydown: tuşa basılı tutulursa
  • onkeypress: tuşa basılırsa
  • onkeyup: tuşa basıp bırakılırsa
  • onloadsayfa: yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez.
  • onmousedown: fare butonuna basılırsa
  • onmousemove: fare imleci bir elemanın üzerinde hareket ederse
  • onmouseover: fare imleci bir elemanın üzerine gelirse
  • onmouseout: fare imleci bir elemanın üzerinden ayrılırsa
  • onmouseup: fare butonuna basılıp bırakılırsa
  • onreset: form resetlenirse
  • onselect: sayfadan bir içerik seçilirse
  • onsubmit: form gönderilirse
  • onunload: sayfa kapatılırsa

Ne zaman, hangi olay tutucuyu kullanacığınızı kestirmek yapacağınız pratiklerle doğru orantılı olarak kolaylaşacaktır. Bu tetikleyiciler "cross-browser" olarak çalışmaktadırlar.

Kolay gelsin.

Sayfalar: 1 2

Yazdır Yazdır | 1,119 Görüntülenme | Kategori: HTML & Javascript & Ajax | Trackback  Geri İzleme
Etiketler  Etiketler: , , , , , ,

Benzer Yazılar


Yorum Yap


(gerekli)

(gerekli,yayınlanmaz)




XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>