Herkese merhabalar, bu dersimizde formumuzda bulunan nesnelere gore işlem yapmayı goreceğiz. Hem Javascript ile hemde Javascript'in ucretsiz bir kutuphanesi olan Jquery ile işlemlerimizi gercekleştireceğiz. Bir onceki dersimizde Jquery'yi indirmeyi ve calışma sayfamıza dahil etmeyi gormuştuk. Dilerseniz dersimize başlayalım.

Nesnelere Gore İşlem Yapmak
Javascript ile sitemize dinamik icerikler katabildiğimiz icin nesnelere gore işlem yapabilmemiz de mumkundur. Secilen bir nesneye tıklandığında, uzerine gelindiğinde, secildiğinde vs. farklı alanlarda bir cok işlem gercekleştirebiliriz. Bu işlemi gercekleştirebilmek icin once temel HTML sayfamızı oluşturalım.

PHP:
Javascript Ders 3 - WMArşiv

Jquery kutuphanemizi calışma alanımıza dahil ettik, şunda boş bir alanımız oluştu. Bu dersimizde ornekler ile ilerleyeceğiz, sizde kendi orneklerinizi oluşturarak derse devam edebilirsiniz. Ben oncelikle bir iletişim formu oluşturmak ve buton olayına bilgi eklemek istiyorum. Formumun body alanına şu şekilde basit bir yapı oluşturuyorum:
PHP:
Adınız:

Soyadınız:

Mesajınız:







Yukarıda gormuş olduğunuz şekilde bir form oluşturmuş olduk. Şimdi mesajı gonder butonuna tıklandığı zaman mesajınız başarıyla iletilmiştir tarzında bir bilgilendirme yapmak istiyorum bunun icin sayfa başlığını kullanmayı tercih ettim. Sayfa başlığı HTML kodumuzda bulunan tagları arasıdır. Yani butona tıkladığımız zaman bilgilendirme mesajımız tarayıcı başlık penceresinde gorunecektir.

Kodu oluşturmadan once değinmek istediğim bir nokta var, Javascript'te elemanlarınızı kullanabilmeniz icin function oluşturmak gerekir. Oluşturulan bu fonksiyonları dilediğiniz nesneye atayabilirsiniz. Ben az once bahsettiğim orneğin fonksiyonunu ve calışması gereken kodu oluşturuyorum.

PHP:
function Bilgi()

Javascript kodumu oluşturdum, şimdi kodumuzu adım adım inceleyelim. Bilgi adında bir fonksiyon yarattık, suslu parantezlerimizi acarak fonksiyonumuzun icerisine girdik. Bu fonksiyonun yapması gereken gorev suslu parantezler icerisinde belirtilmektedir. Ben burada sayfanın başlığını WMArşiv Javascript Dersleri olarak değiştirmeksini istedim. Bu fonksiyonumuz butona tıklandığında calışması gerekecek bu nedenle az once oluşturduğum form kodum da bulunan buton nesnesinde ufak bir duzenleme yapmam gerekiyor.
PHP:


Kodu incelediğinizde onclick nesnesi icerisine oluşturduğum fonksiyonu eklediğimi goreceksiniz. Yani burada butona tıklandığında fonksiyonumu calıştır demek istedim. Oluşturduğumuz sayfayı calıştırdığınızda hic bir sorunla karşılaşmamanız gerekiyor. Sonuc olarak oluşturduğumuz sayfa şu şekilde olmuş oldu:
PHP:
Javascript Ders 3 - WMArşiv Adınız:

Soyadınız:

Mesajınız:




Eğer bu konu anlaşıldıysa devam edelim, eğer takıldıysanız tekrar goz atarak anlamaya calışın. Tum cabalarınıza rağmen olmuyorsa yorum olarak bize nerede takıldığınızı mutlaka bildirin.

Farklı bir ornekle devam edelim, bu sefer butona tıklanınca değilde belirlenen bir yazının uzerine gelindiği zaman işlem yapılsın. Bunun icin ornek acısından beş farklı paragraf alanı oluşturuyorum
[]Test mesaj 1

Test mesaj 2

Test mesaj 3

Test mesaj 4

Test mesaj 5
[/PHP]
Bu bu yazılardan orneğin ucuncu paragrafın uzerine gelindiği zaman mesaj verilmesini istiyorum. Mesaj işlemi icin Javascriptin dahili fonksiyonlarından birisi olan alert yani ekrana mesaj yazdırmayı kullanacağım. Orneğimize gore dorduncu paragrafın uzerine gelindiği zaman bu konu onemli gibi kullanıcıyı uyarak bir mesaj verelim.
PHP:
function MesajVer()

Fonksiyonumu oluşturdum sıra geldi bu fonksiyonu HTML sayfamda bulunan paragrafa atamaya. Bunun icin dorduncu paragrafım da ufak bir duzenleme yapıyorum.
PHP:
Test mesaj 4


Gorduğunuz gibi HTML'de elamanın uzerine gelindiği zaman işlem yapmak icin onmouseover kullanılır. Bu elemanı ekleyerek icerisinde oluşturduğum MesajVer fonksiyonun atadım ve calıştırdım. Yani belirlediğimiz paragrafın mouse ile (fare) uzerine gelindiği zaman bizi aşağıdaki ekran mesajı karşılayacaktır:



Sıra geldi aynı işlemleri Jquery uzerinden yapmaya. Jquery biliyorsuz ki Javascript'in ucretsiz kutuphanelerinden birisi. Peki ekstra ne faydası olacak derseniz, yapılan işlemleri daha pratik ve az kod kullanarak oluşturabilmemiz de yardımcı olacak. Onceki dersimizde gorduğumuz gibi Jquery kodu her zaman $ (dolar) işaretiyle başlamaktaydı. Kodlamaya başlayalım

PHP:
$(document).ready (function() );

Hatırlayacağınız uzere Jquery kodlarında herhangi bir problemle karşılaşmamak icin once web sayfamızın tamamen yuklenmesini beklememiz gerekiyordu. Bunun icin yukarıda gormuş olduğunuz gibi kodumuza dokuman hazır olduğunda yani web sayfamız yuklendiğinde calış demek istedik. Hemen arasına gelerek erişmek istediğimiz nesneyi belirtiyoruz, ben burada farklı bir ornek oluşturmak istiyorum.

Orneğin ilk adımda yaptığımız form orneğini tekrar oluşturdum, bu sefer butona tıklandığında farklı bir paragraf uzerinden kullanıcıya mesajınız iletildi tarzında bilgilendirme yapmak istiyorum once HTML yapımızı tekrar hazırlayalım

PHP:
Adınız:

Soyadınız:

Mesajınız:




Şimdi Jquery desteği ile kod yapımızı oluşturuyoruz kafanızın karışmaması icin tum kodları ekliyorum
PHP:
$(document).ready (function() ) function Bilgi() })

Artık kodumuzu yorumlayabiliriz,
- İlk olarak sayfa tamamen yuklendikten sonra işlem yapması icin $(document).ready fonksiyonumuzu oluşturduk.
- Daha sonra formumuzda bulunan gonder nesnesine yani butona tıklandığında Bilgi() fonksiyonunu cağırmasını istedik.
- Son adımda ise Bilgi fonksiyonumuza boş bulunan
tagı icerisine mesajınız iletildi yazmasını istedik.
​
Jquery sayesinde oldukca pratik ve hızlı bir şekilde kodumuzu oluşuturmuş olduk. Bu kodu Javascript ile yazmak isteseydik cok daha uzun kod yapısı oluşturmamız gerekecekti. Bu yapı sayesinde form doldurulduktan ve mesajımız gonder butonuna basıldıktan sonra kullanıcıyı bilgilendirmesi adına işlem yaptırmış olduk. Mesaj vermek istediğimiz alanın icerisinde dilersek HTML kodlarıda kullanabilmekteyiz. Orneğin ben o mesajın belirginleşmesi adına yeşil yazı rengine cevirmek istiyorum ve şu şekilde bir yapı oluşturuyorum
PHP:
$('p').append ("Mesajınız iletildi");

Genel kod yapımızı ise aşağıdaki gibi oldu:
PHP:
Javascript Ders 3 - WMArşiv Adınız:

Soyadınız:

Mesajınız: