Flashcentury » AJAX

sdfdsf

admin — Fri, 15 Jan 2010 17:28:23 +0000

dsfdsf

JavaScript ‘te Events (Olaylar)

Huseyin Kocak — Thu, 04 Dec 2008 01:58:34 +0000

Events yani olayları Javascript nesnelerini tetikleyenler unsurlar olarak görmeliyiz.

Örnegin; Mause linklerin üzerinde geldiginde, “onMouseOver” özelliği tetiklenmiş olur.

Eğer linki tıklarsa, bu sefer önce “onMouseDown”, sonra ise “onMouseUp” ve “onClick” tetiklenmiş olur.

Nesnelere Tanımlanabilecek olaylar şunlardır.

1. onclick Fareyle tıklamayı ifade eder.
2. ondblclick Fareyle çift tıklamayı ifade eder.
3. onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.
4. onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.
5. onmousedown Fare düğmesine basmayı ifade eder.
6. onmouseup Fare düğmesini bırakmayı ifade eder.
7. onload Sayfanın yüklenmesini ifade eder.
8. onunload Sayfanın kapatılmasını ifade eder.
9. onchange Form aracının değişmesini ifade eder.
10. onsubmit Form bilgilerinin gönderilmesini ifade eder.
11. onreset Form bilgilerinin silinmesini ifade eder.
12. onselect Form aracının seçilmesini ifade eder.
13. onblur Form aracının pasif hale geçmesini ifade eder.
14. onfocus Form aracının aktif hale geçmesini ifade eder.
15. accesskey İstenen karakterin girilmesini ifade eder.
16. tabindex Nesnelerin işlem sıralamasını numaralandırır.
17. onkeydown Tuşun basılmasını ifade eder.
18. onkeyup Tuşun salınmasını ifade eder.
19. onfocus Tuşun basılıp salınmasını ifade eder.

bu olaylardan en çok kullanılanları inceleyelim.

onClick

Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse’un nesneyi tıklayıp bırakması gereklidir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.

Örnek :

OnClick Olayı

Butana tıklanıp bırakıldıgında onlick olayı gercekleşir ve ardından etiketleri arasında yerleştirilen tiklandi() fonksiyonı çağrılır.

onMouseOver , onMouseOut

onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında.

Örnek :

onMouseOver ve onMouseOut Olayı

onMouseOut =disinda()>

http://javascript-dersi.blogspot.com

Bur örnek birak htmlde bağlara verilen title özelliğine benziyor.

onSubmit

Web programlamada action olayında bilgileri doldurulan formu sunucuya yollar.
Javascript’ de bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.

Basit bir örnek.

OnSubmit Olayı

onChange

Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır.

Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz.

Güzel Bir Örnek yapalım..

java Script Onchange

Kapat

onLoad , onUnLoad

Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir.

Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız.

Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise Güle Güle diyebiliriz.

Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.

Şimdi de bunun için gerekli kodlara bir göz atalım.

onLoad onUnLoad Olayı

onError onAbort

Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur.

Bir resminde image map yaptınız ve dolayısıyla düzgün çalışabilmesi için resmin tam yüklenmesi gerekir.

Örnek :

Eger resmin yüklenmesi ziyaterci stop( dur) tuşu ile durdurursa ( onabort olayı gerçekleşir) olaşacak hatayı ziyaretcinize bildirebilirsiniz.

tam olarak yüklenemedi. İlgili resim bir harita olduğu için
yüklenmesini tavsiye ederiz.’)”>

onFocus, onBlur

HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz.

Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:

onFocus ve onBlur Olayı

JavaScript ‘te Değişkenler

Huseyin Kocak — Sun, 23 Nov 2008 11:58:19 +0000

JavaScript değiskenleri Var komutuyla tanımlarız.

var Adi
var Soyadi

Ayrıca değişkenleri tek satırda tanımlaza bilir hatta aynı satır üzerinde değerini verebilirz. Örneğin ;

var Adi, Soyadi

Değer atamak için ;

var Adi ="Hüseyin", Soyadi="Kocak"

ama değer atama işlemini ayrı bir satirda da yapabilirdi, Örneğin,

Var Adi, Soyadi, Yasi
Adi = "Hüseyin"
Soyadi = "Kocak"
Yasi = 30

Değişkenlere verilecek ismimlerin anlaşılır olması programın okunulurluğunu kolaylaştırır. Ayrıca değişken tanımlarken uyulması gereken bazı kurallar vardır;

Değişken ismi bir harf veza altcizgi ile başlamalıdır.
Ad1, Ad2, _Ad şeklinde değişken tanımı yapılabilir fakat 1Ad veya 2Ad kullanımı yanlıştır
Değişken isminde boşluk bulunamaz. Bunun yerine alt çizgi karakteri kullanılabilir.
Adi_Soyadi doğru kullanımdır.
Değişken isimlerinde İngilizce ‘de olmayan karakterleri (ş, ç, ö, ğ vb.) kullanmayınız.
Değişken ismi 255 karakterden fazlada olamaz.
Değişken isimleri içinde diğer semboller (+, -, /, boşluk, vb.) yer alamaz.
Değişken isminiz SOYAD ise, bu değişkeni hep böyle büyük harflerle yazmak zorundasınız. soyad yazarsanız, Asp bunu farklı bir değişken olarak okur.

Öyellıkle son şıkta yazdığım, büyük küçük harf olayı programcıların ilk başta sıklıkla yaptığı hatalardan biridir JavaScript case-sensitive olduğu için kodlamada büyük küçük harf konusunda çok hassatır.

Bu kadar teknik bilgiden sonra artık birazda ugulama yapalım ;

Var Ad, Soyad, Maas, Odeme_Durum
Ad = "Hüseyin";
Soyad = "Koçak";
Maas = 200;
Odeme_Durum = true;

Burada 3 farklı türdeki değişkeni tanımlamış olduk bunlar

Strings = Düz metinlerdir (Alfanümerik ) ve tırnak ( ” ) içinde yazılırlar

Ad = "Hüseyin"
Soyad = "Koçak"

Numbers = Adından da anlaşıldığı üzere sayı değerleridir. Eksi veya artı değerlerini alabilirler.

Maas = 200
Borc = -250

Booleans = Sadece True (Doğru) veya False (Yanlış) degerini alırlar, programlamaza göre 0 veya 1 olarata degerlendirilebilir. Sadece iki olasilikli bir değişken türü oldugu için sistemi fazla zorlamazlar.

Odeme_Durum = true
Borc_odeme = false

Ayrıca bu üç değişken türü dışında Null, Undefined, Object ve funciıon olmak üzere dört farkı değişken türü daha vardırç İleri derslerde bol bol değineceğiz ama bu değişken türlerini kısaca açıklama gerekirseÖ

Null = Değeri yoktur daha doğrusu değeri tamamen boştur

var maas
maas = Null

Undefined= Değeri yoktur fakat Null ıle karıştırılmasın. Null ‘da değişkenin değeri olmasa bile en azından sıfır ( 0 ) yani tamamen boştur fakat Undefined değersizdir JavaScript ‘ın bu değişken hakkında hiçbir fikri yoktur

Var Adi
if Adi=(Undefined){
Adi = "Bilinmiyor"
}

Object = Object aslında tam anlamıyla değişken sayılmaz ama JavaScript kodları içerisinde Oblectlerı bir değişken gibi kullanmamız mümkün.

var Neslemiz
Neslemiz = new Object();

Function= Function (Fonksiyon) aslında başlı başına ayrı bir konudur. JavaScript ‘te fonksizonlar çok önemli bir yer tutar ve esasen bütün kodlama neredeyse fonksiyonlardan oluşur.

var fonksiyonumuz = Function

veya

function Fonksiyonumuz

Şeklinde tanımlanabilir.

Json`da diziler (array)

Huseyin Kocak — Mon, 10 Nov 2008 08:57:30 +0000

Bir Önceki dersimizde Json’un (JavaScript Object Notation) ne oldugunu ve nasil tanimlama yaptigimizi anlatmistim. Simdi ise Json ile dizi tanimlamayi gösterecegim. Böylelikle siraki isimiz Javascript veya diger programla dilleriyle ile Json’u cagirmak ve kullanmak olacak.

Hadi baslayalim ;

[
“Ocak” ,
“Subat” ,
“Mart” ,
“Nisan” ,
“Mayis” ,
“Haziran” ,
“Temmus”,
“Agustos” ,
“Eylül” ,
“Ekim” ,
“Kasim” ,
“Aralik”
]

Gördügünüz gibi diziler köseli Parantez ( [ ] ) ile baslar ve biterler, dizi icerisindeki degeler virgül ( , ) isareti ile ayrilir ve eger deger string yani yazi ise cift tirnak ( ” ) icerisine alinirlar.

Yukaridaki örnek tek boyutlu bir dizidir fakat Json bize iki boyut veya daha fazla boyutta dizi tanimlama imkanida sunar;

[
[
“Ocak” ,
“Subat” ,
“Mart” ,
“Nisan” ,
“Mayis” ,
“Haziran” ,
“Temmus” ,
“Agustos” ,
“Eylül” ,
“Ekim” ,
“Kasim” ,
“Aralik”
] ,
31 ,
28 ,
31 ,
30 ,
31 ,
30 ,
31 ,
31 ,
30 ,
31 ,
30 ,
31
]
]

Gördügünüz gibi Json ile iki boyutlu bir dizi (Array) tanimlamis olduk. Yukaridaki örnekte ay isimleri ve o ayin kac gün cektigini tanimladik. Dizilerin köseli parantezler ( [ ] ) icerisine yazildigini yukarida söylemistim, cok boyutlu dizi tanimlarken de köseli parantez ( [ ] ) kullaniyoruz ve dizileri birbirinden ayirirken yine virgül ( , ) isareti kullaniyoruz. Yukaridaki örnekte ay isimleri bitip köseli parantezle kapatildiktan sonraki virgül ( , ) isareti ikinci boyutun oldugunu belirtmektedir. Yukaridaki örnekte bir diger ayrinti ise ikinci gruptaki, ayin kac gün cektigini gösteren veriler sayi oldugu icin cift tirnak ( ” ) icerisinde yer almadi, diger programlama dillerinde oldugu gibi Jsonda da sayilar tirnak icerisinde yer almamaktadir. Bir önceki dersimizde Json veri cesitleri ile ilgile bilgi sahibi olabilirsiniz.

Ilerleyen derslerde diger programla dillerinin Json ile nasil baglanti kurdugunu anlatarak devam edecegim. Bir sonraki derste görüsmek üzere…

Json Nedir?

Huseyin Kocak — Tue, 04 Nov 2008 09:01:14 +0000

AJax ilk kullanilmaya baslandigi yillarda Xml ‘lin gücünden bol bol faydalanacagi düsünülmüstü fakat Xml ‘lin javaScript ile parse edilmesi zor ve zahmetli oldugundan yeni cözümler düsünüldü ve sonunda Json yani orjinal acili ile ( JavaScript Object Notation) biz programcilara sunuldu.

Json ‘nu Xml ‘le alternatif olarak düsünebilirsiniz. Her ne kadar Ajax uygulamalarinda Xml hala kullanilsa veya kullanilmaya devam etsede hemen hemen ayni isleri Json ile de cok daha bir sekilde yapabiliriz. Json javaScript ‘in alt kümesi olduğu için Xml ‘den çok daha hızlı bir şekilde calistigini göreceksiniz. Ayrıca bir diger avantaji ise Json ile biçimlendirdiğiniz bir veri kümesini Xml ‘le kiyasla daha az yer kaplamasidir.

Json ‘nun ne oldugunu konusunda bir fikir sahibi oldunuzu düsünerek birazda uygulama yapalim.

{
“isim”: “Hüseyin Kocak”,
“yasi”: 30,
“calisiyor”: true
}

Örnektende anyacaginiz üzere, Json ‘da nesneler Parantez ( { } ) isareti ile baslar ve biter. Bunu Css ‘ye benzetebilirsiniz. Ayrica degisken isimleri cifttirnak ( “ ) isaretleri arasina yazilir, deger ile aralarina iki nokta üst üste ( : ) ve son olarak veriler virgül ( , ) isareti ile ayrilir.

Veri Cesitleri ;

Json ile 4 cesit veri olusturmaniz mümkündür bunlar;

yazi (string) –> cift tirnak ( ” ) icerisinde yazilirlar
Sayi (Number)
true – False –> dogru veya yanlis (boolean)
null

Yukaridaki örnekte ilk üc degisken türünü görebilirsiniz. Örnekte yer almayan null ise bir gdegere sahip olmadigi durumlarda kullanilir.

simdi yukaridaki örnegimize baska nesnelerde ekleyelim;

{
"elemanlar":[
{
"isim" : "Hüseyin Kocak",
"yasi" : 30,
"calisiyor" : true
},
{
"isim":"Ergin Baltaci",
"yasi" : 27,
"calisiyor" : false
},
{
"isim":"Ali Gündüz",
"yasi": 29,
"calisiyor": true
}
]
}

Gördügünüz gibi köseli paranteler ( [ ] ) icerinde diger nesneleri tanimliyoruz. Bir sonraki derste Json ‘da dizi (array) islemleri adli baslikta bu konu hakkinda daha fazla fikir sahibi olacaginizi düsünüyorum.

Simdi yukaridaki son örnegimizi Xml ile yapmis olsaydik, nasil bir yol izlecektik ve ne gibi ajavantaj veya dezavantajlarimiz olurdu bir göz atalim ;


    
        Hüseyin Kocak
        30
        true
    
    
        Ergin Baltaci
        27
        false
    
    
        Ali Gündüz
        29
        true

Gördügünüz bircok Tag acip kapamak zorunda kaliyoruz ayrica her iki örnegide text olarak kaydederseniz Json ile yazilmis kodumuzun cok daha az yer kapladigini göreceksiniz bunu binlerce nesne yüklü bir dosya oldugunu düsünürsek aradaki fark cok daha belirgin bir sekilde acilacaktir. Fakat yukarida belirttigim gibi Json ‘un en büyük avantaji javaScript ‘in bir alt kümesi olduğu için Ajax uygulamalarınızda cok daha kolaylıkla kullanabilmemiz ve Xml gibi parse edilmesine gerek yoktur. Bir diger avantaji ise Json ‘u Html veya hangi programlama diline kullaniyorsaniz direk kodlariniz icerisine yerlestirip bir değişkene set ederek kullanabilirsiniz.

Json Php, Asp, .Net, Python, ColdFusion, java, vb.. tüm programlama dillerinde kullanilabilir.

Bir sonraki dersimizde Json ‘da dizi (array ) islemlerini anlattiktan sonra Json ‘nu nasil kodumuz icerisinde nasil kullanacagimizi ve Ajax uygulamalarinda ne tip görevler veregimizi örneklerle anlatmaya devam edecegim.

JavaScript Nedir?

Huseyin Kocak — Sat, 11 Oct 2008 17:23:26 +0000

Bildiginiz gibi Html sadece taglardan olusan bir programlama dilidir. Yapabiliecegi isler sahip oldugu taglarla sinirlidir örnegin programla dillerinin en önemli yapi taslarindan biri olan sartli ifade (if then else) özelligi bile yoktur. Iste Javascript Html ‘yi daha dinamik olarak kullanma görevini üstlenmis bir programlama dilidir. Ilk olarak Netscape firması tarafından Html’in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak amaci ile C dilinden esinlenilerek yazılmıştır. Netscape, Inc. zaman icerisinde calismalarina devam ederek JavaScript dilini bizlere kazandirmistir. Ajax ‘in temel programi olan JavaScript bir cok web programcisinin vazgecilmezidir.

Javascript ‘in en büyük dezavantaji web tarayici ( browser ) uyusmazligi sorunu ile sik sik karsilasiyor olmamisi. Yukarida da Anlattigim gibi JavaScript dili Netscape Firmasi tarafindan gelistirilmistir ve ilk olarak Netscape 2.0 versiyonunda akabinde Firefox ‘ta uygulanmistir. Sonrasinda JavaScript ‘tin kullanim alani hergecen gün gelismis ve en sonunda Microsoft firması bu dili Internet Explorer’a eklememistir. Fakat Microsoft her zamnki gibi gicikli yapmaktan geri kalmayip Kendi yazım kurallarını belirlemistir ve kodu kendi istedigi sistemde Internet Explorer ‘da algilatmaktadir bu nedenle Bazi kodlar Firefox veya operada farkli gözükürken Internet Explorer ‘da farkli sonuclar verebiliryor. Bu sebeple Web sitenize Javascript kodlari yazarken her iki tarayicida tet edip ikisinde de calisir sekilde kodlamak gerekiyor.

DOM nedir?

Huseyin Kocak — Wed, 08 Oct 2008 01:52:42 +0000

Dom yani Orjinal acilimi ile Document Object Model (Belge Nesne Yapısı) Ajax ‘in yapi taşlarindan birisidir. hazırladığınız web sayfasini internet tarayicisinda actiginizda tarayiciniz (Internet Explorer, Firafox, opera vb..) bu sayfayi bir dokuman (belge) olarak kabul ederler ve bu belde bulunan tum taglar hiyerarsik bir yapiya sahiptir örnegin ;

yazi

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

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

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.

XMLHttpRequest ile Basit Bir Örnek Yapalim

Huseyin Kocak — Sat, 04 Oct 2008 14:12:26 +0000

Bir önceki dersimizde XMLHttpRequest ‘in ne oldugunu ve Javascript ile nasil XMLHttpRequest nesnesi cagirdigimizi anlatmistim. Simdi örnegimize devam ederek XMLHttpRequest nesnesini daha yakindan taniyalim. Böylece Ajax ‘in en önemli unsurlarindan biri olan XMLHttpRequest nesnesinin ne ise yaradigini iyice kavramis olacaksiniz.

Ilk olarak bir önceki derste gördügümüz gibi XMLHttpRequest nesnesini cagiralim ;

function durumaGoreNesne() {
var nesne;
var ziyaretciniTarayicisi = navigator.appName;
if(ziyaretciniTarayicisi == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}

var nesnemiz = durumaGoreNesne();

Burada atadigimiz nesnemiz isimli nesne bize XMLHttpRequest ‘in kapilarini acacak.

Simdi Ajax ile olabildigince basit bir sifre kontrolu yapalim.

ilk olarak html kodumuzu yapalim, bir form olusturalim

Bir sifre isimli textbox olusturduk ve onblur özelligine sifreKontrol diye bir fonksiyon atadik. Textbox ‘un Onblur özelligi sayasinde ziyearetci bir yazi yazip sonra mause ile ekranin herhangi bir yerine tikladiginda daha dogrusu textbox disina ciktiginda sifrekontrol() fonksiyonu harekete gececek.

Simdi sifreKontrol() fonksiyonunu hazirlayalim;

function sifreKontrol() {
var sifreAl = document.formumuz.sifre.value;
nesnemiz.open('get', 'sifreKontrol.asp?sifre=' + sifreAl);
nesnemiz.onreadystatechange = kontrolSonucu;
nesnemiz.send(null);
}
}

Burada önceden taminladigimiz nesnemiz isimli XMLHttpRequest nesnesini open komutu ile actik ve sifre isimli textbox ‘a yazilan veriyi get metoduyla gönderdik.

Kodumuzdan da anlayacaginiz üzere open komutu söyle bir kalipla diger sayfaya veri gönderiyor ;

nesne.open(‘method’, ‘gonderilecek sayfa‘);

Buradaki method post veya get olabilir bu sizin kodlamaniza göre degisebilir.

Kullandigimiz bir diger XMLHttpRequest metodu ise onreadystatechange ‘dir. onreadystatechange sunucu tarafinda bir degisiklik olursa algilar ve bize islem yapma kolayligi saglar. Yukaridaki koddaki görevi eger sifrekontrol.asp ‘ye gönderdigimiz veride bir degisiklik olursa kontrolSonucu() isimli fonksiyonu calistiracak.

Son olarak send ise kodumuzu tetikleyip open metoduyle actigimiz XMLHttpRequest yolunu harekete gecirir.

simdide kontloSonucu() sonucu fonksiyonumuzu yazalim ;

function kontrolSonucu() {
if(nesnemiz.readyState == 4){
document.getElementById('sonuc').innerHTML = nesnemiz.responseText;
}
}

Evet finale dogru yaklasiyoruz, burada XMLHttpRequest nesnesini bir diger metodu olan readyState karsimiza cikiyor. readyState gönderilen verinin durumunu kontrol eder ve 5 farkli durum vardir.

readyState = 0 —> islem baslatilamadi (hata var)
readyState = 1 —> yükleniyor (Bu durumu loading uygulamasi icin bol bol kullanacagiz)
readyState = 2 —> yüklendi
readyState = 3 —> etkileşimli
readyState = 4 —> tamamlandı (bu durum herseyin sorunsuz yapilip bittigini isaret eder)

Kodumuza geri dönelim, kontrolSonucu() fonksiyonu ilk etapta readyState araciligi ile XMLHttpRequest isleminin durumunu kontrol ediyor ve islem tamamlandi ise biraz sonra olusturacagimiz sonuc isimli Div ‘in icine durumu yazaaktir.

Simdi Sonucun yazilacagi Div ‘imizi olusturalim ;

iste bu kardar. Artik ana sayfaniz hazir diyebilirim simdi son olarak arkaplanda calisacak olan sifreKontrol.asp isimli dosyamizi hazirlayalim ;

[asp]
Dim sifre
sifre = request.QueryString(“sifre”)
if sifre = “flashcentury” then
Response.Write(“Sifreniz Dogru”)
else
Response.Write(“Sifre hatali”)
end if
[/asp]

Tabiki XMLHttpRequest nesnesini en kolay sekilde anlatabilme icin kodumuzu olabildigince basit bir halde sundum fakat Ajax dersleri ilerledikce cok daha kompleks kodlarla XMLHttpRequest nesnesini görecegiz.

Kodumuzun calisan versiyonununa buradan ulasabilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica ben bircok yerde bu tip konular Php ile anlatildigi ve Asp kaynak bulmak zor oldugu icin özellikle kodlamada Asp ‘yi tercih ettim fakat ayi kodu Php ‘ye cevirmek isterseniz buyrun ;

sifre = $_GET("sifre");
if (sifre == "flashcentury"){
echo "Sifreniz Dogru";
}else
echo "Sifre Hatali";
}

ve yukarida open metoduyla cagirdigimiz asp dosyasinin uzantisini php yapiniz ;

nesnemiz.open('get', 'sifreKontrol.php?sifre=' + sifreAl);

Calisan Php versiyonunu buradan inceleye bilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica kanak dosyalarini Asp icin buraya ve php icin buraya tiklayarak ulasabilirsiniz.

Bir sonraki Ajax dersimizde XMLHttpRequest nesnesinin metotlarini inceleyegiz.

XMLHttpRequest Nedir ?

Huseyin Kocak — Sat, 04 Oct 2008 03:29:16 +0000

Programcilarin yüzde doksani her ne kadar Microsoft ‘tu sevmesede (ki bu konuda bildigece.com ‘da bir tartisma baslatmistim) XMLHttpRequest Microsoft ‘un bize sundugu bir nimettir. Nimet dedim cünkü Ajax XMLHttpRequest sayesinde sanki bir masaüstü programi gibi davranir, istedigimiz herhangi bir islemi XMLHttpRequest sayesinde sayfa yenilemeden veya postback yapmadan saglariz. Microsoft ilk olarak Internet Explorer’ın 5.0 ‘da ActiveX bileşenini kullandi ve bu birlesen icinde bize XMLHttpRequest nesnesi sunuldu yani ilk olarak XMLHttpRequest nesnesi ile Explorer’ın 5.0 ‘la tanistik akabinde Google tarafından (Google Suggest ile) popülerligi her gecen gün artti ve Mozilla 1.0 / Firefox, Opera 8+, Netscape 7, Safari 1.2 sürümlerine dahil edildi.

Bu kadar tarih bilgisinde sonra ne ise yarar bu XMLHttpRequest nesnesi deyip konuya derinlemesine dalalim ;

XMLHttpRequest sayfayi yenilemeye veya baska bir sayfaya gitmeye gerek kalmadan arka planda Client Side diye adlandirilan yani islemci tarafinda çalışır ve sizin isteginiz dogrultusunda bilgileri gönderir ve geri alir. Örnegin son zamanlarda bircok sitede görmüssünüzdür (örnegin wikipedia.org) arama kutusuna siz bir metin yazarsiniz ve her harfe tikladiginizda XMLHttpRequest nesnesi bilgiyi arkaplanda isler ve arama kutusuna benzer sonuclari cikarmaya calisir veya aradiginiz seyin devamini yazar. Tabi XMLHttpRequest ile yapilabilecekler bununla sinirli degil daha bircok sekilde kullaniliyor örnegin Google Maps; bildiniz gibi bu uygulama resimlerden olusur siz haritaya yakinlastirdiginizda daha yakindan cekilmis resim dosyasi ekranda görülür uzaklastikca daha uzaktan cekilmis resimi görürsünüz fakat bu islem ayni sayfa uzerinde gerceklesir ve hayretle bakariz.

Sanirim XMLHttpRequest nesnesinin ne oldugu konusunda bir fikir sahibi oldunuz simdi isin biraz daha teknik boyutuna girelim;

XMLHttpRequest ‘e mucizeler yarattiran sey tabiki Ajax ‘in bel kemigi Javascript ‘tir. Ilk zamanlar xml sistemiyle casilmasindan ötürü bu nesnenin adi XMLHttpRequest olsada su an Javascript ile cagirilip islem yapiyor.

Hadi bir XMLHttpRequest nesnesi cagiralim

nesne = new XMLHttpRequest();

Fakat Microsoft yine dedigim dedik diyor ve standartin disina cikiyor ve nesnesini Internet explorer icin su sekilde cagiriyoruz ;

nesne = new ActiveXObject("Microsoft.XMLHTTP");

ve bu iki farkli nesne olusturma tekniginden dolayi kodumuz biraz uzuyor ve asagidaki sonuc ortaya cikiyor ;

function durumaGoreNesne() {
var nesne;
var ziyaretciniTarayicisi = navigator.appName;
if(ziyaretciniTarayicisi == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}
var nesnemiz = durumaGoreNesne();

Bu kodu dahada gelistirmemiz mümkün fakat ben basit haliyle bu sekilde kullanabiliriz.

Bir sonraki derste XMLHttpRequest ile örnek calismamizi yapacagiz.

Css Nedir?

Huseyin Kocak — Wed, 01 Oct 2008 08:43:19 +0000

Css yani orjinal acilimiyla Cascading Style Sheets (Katmanli Sitil Sablonlari) web tasarimin vazgecilmez unsurlarindan biridir. Basit bir tanim yapmak gerekirse Html`nin vitrini diyebiliriz. Yani Css araciligiyla bir linke, yaziya, resime, tabloya veya html dökümanin tümüne bir sitil verebiliriz fakat Css`nin gercek gücü tüm siteye hükmedebilmesinde sakli yani basit bir islemle tüm sitedeki yazilarin fontunu degistirebilir veya tüm sitedeki linklerin rengini ayarlaya bilirsiniz.

Css ilk olrak 1995′de ortaya çıkti ve akabinde 1996 yılında W3C ’e kabul edildi. W3C ’ye katılması ile tüm tarayıcılar tarafından desteklendi. Bu tarihten itibaren W3C ’ye üye olan tüm tarayıcı grupları CSS ’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Css ise günden güne yeni özelliklerle gücüne güc katarak Mayıs 1998 ′de Css 2 ′ye geçiş yapılmıştır. Su an Css 2.1 versiyonunu kullanmaktayiz.

Simdi bu kadar ön bilginin üzerine Css ‘nin ne olduguna biraz daha derinlemesine girelim Html etiketleme sistemiyle calisan basit bir dildir sadece var olan etiketleri yazarsiniz ve ortaya basit bir Html sayfasi cikar ama dizayn olarak cok yetersizdir örnegin bir linkin üzerine mause gelince renginin degismesi gibi basit bir islemi bile xyapamazsiniz iste tam bu noktada Css imdadimaza yetiyor Css ile Html etikezlerine hükmedebiliyorsunuz hatta Html etiketlerine class `lar atayip özel dizaynlar sagliyabiliyorsunuz. Css `nin nasil kullanildigini ilerleyen derslerde adim adim isleyecegiz ve tanidikca cok seveceginize inandigim ve web tasarim unsurlari arasinda en basit olduguna inandigim bir dildir.

Css bir web sayfasinda üc iki ayri sekilde kullanilabilir bu kullanilis sekilleri ;

Disardan import edilerek ( .css dosyalari olusturulur ve Html sayfamiza dahil ederiz.)
ve taglari arasinda tanimlayarak (.css dosyasi olusturup disardan importetmek yerine direk sayfanin icerisinde tanimlayabiliriz)
Html etiketleri icine style olusturarak css olustururuz (Kullanim sekli itibarizle ilk iki secenekten farklidir. Css`nin en basit kullanim seklidir fakat fakat bu sekilde kullanmak ilk etaptta size zaman kazandirsada ileride düzenleme yaparken biraz ugrastirabilir.)

Css kullanim sekillerini bir sonraki derste anlacagim. Eger Ajax ‘e merak saldiysaniz Css en önemli yapitaslarindan biridir hatta Ajax teknigi icin bilinmesi gereken en önemli programlama dillerini siralamak gerekirse Javascript -> Css -> Xml ….. seklinde siralayabiliriz.

Bir sonraki Css dersimizde ilk örneklerimizi yapmaya baslayacagiz. Eger Css ilginizi cekti ve gelismelerinden ve yeniliklerinden haberdar olmak istiyorsaniz; Css orjinal sitesine bu sayfadan ulasabilirsiniz. Bir sonraki dersimizde görüsmek ezere.

Flashcentury » AJAX

sdfdsf

JavaScript ‘te Events (Olaylar)

onClick

onMouseOver , onMouseOut

onReset

onChange

onLoad , onUnLoad

onError onAbort

onFocus, onBlur

JavaScript ‘te Değişkenler

Json`da diziler (array)

Json Nedir?

JavaScript Nedir?

DOM nedir?

yazi

XMLHttpRequest ile Basit Bir Örnek Yapalim

XMLHttpRequest Nedir ?

Css Nedir?