Nesnelere Göre İşlem Yapmak
Javascript ile sitemize dinamik içerikler katabildiğimiz için nesnelere göre işlem yapabilmemiz de mümkündür. Seçilen bir nesneye tıklandığında, üzerine gelindiğinde, seçildiğinde vs. farklı alanlarda bir çok işlem gerçekleştirebiliriz. Bu işlemi gerçekleştirebilmek için önce temel HTML sayfamızı oluşturalım.
Javascript Ders 3 - WMArşiv
<script></script>
Jquery kütüphanemizi çalışma alanımıza dahil ettik, şunda boş bir alanımız oluştu. Bu dersimizde örnekler ile ilerleyeceğiz, sizde kendi örneklerinizi oluşturarak derse devam edebilirsiniz. Ben öncelikle bir iletişim formu oluşturmak ve buton olayına bilgi eklemek istiyorum. Formumun body alanına şu şekilde basit bir yapı oluşturuyorum:
Adınız:
Soyadınız:
Mesajınız:
Yukarıda görmüş olduğunuz şekilde bir form oluşturmuş olduk. Şimdi mesajı gönder butonuna tıklandığı zaman mesajınız başarıyla iletilmiştir tarzında bir bilgilendirme yapmak istiyorum bunun için sayfa başlığını kullanmayı tercih ettim. Sayfa başlığı HTML kodumuzda bulunan
Kodu oluşturmadan önce değinmek istediğim bir nokta var, Javascript'te elemanlarınızı kullanabilmeniz için function oluşturmak gerekir. Oluşturulan bu fonksiyonları dilediğiniz nesneye atayabilirsiniz. Ben az önce bahsettiğim örneğin fonksiyonunu ve çalışması gereken kodu oluşturuyorum.
function Bilgi() {
document.title = "WMArşiv Javascript Dersleri";
}
Javascript kodumu oluşturdum, şimdi kodumuzu adım adım inceleyelim. Bilgi adında bir fonksiyon yarattık, süslü parantezlerimizi açarak fonksiyonumuzun içerisine girdik. Bu fonksiyonun yapması gereken görev süslü parantezler içerisinde belirtilmektedir. Ben burada sayfanın başlığını WMArşiv Javascript Dersleri olarak değiştirmeksini istedim. Bu fonksiyonumuz butona tıklandığında çalışması gerekecek bu nedenle az önce oluşturduğum form kodum da bulunan buton nesnesinde ufak bir düzenleme yapmam gerekiyor.
Kodu incelediğinizde onclick nesnesi içerisine oluşturduğum fonksiyonu eklediğimi göreceksiniz. Yani burada butona tıklandığında fonksiyonumu çalıştır demek istedim. Oluşturduğumuz sayfayı çalıştırdığınızda hiç bir sorunla karşılaşmamanız gerekiyor. Sonuç olarak oluşturduğumuz sayfa şu şekilde olmuş oldu:
Javascript Ders 3 - WMArşiv
<script></script>
<script>
function Bilgi() {
document.title = "WMArşiv Javascript Dersleri";
}
</script>
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 göz atarak anlamaya çalışın. Tüm çabalarınıza rağmen olmuyorsa yorum olarak bize nerede takıldığınızı mutlaka bildirin.
Farklı bir örnekle devam edelim, bu sefer butona tıklanınca değilde belirlenen bir yazının üzerine gelindiği zaman işlem yapılsın. Bunun için örnek açı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 örneğin üçüncü paragrafın üzerine gelindiği zaman mesaj verilmesini istiyorum. Mesaj işlemi için Javascriptin dahili fonksiyonlarından birisi olan alert yani ekrana mesaj yazdırmayı kullanacağım. Örneğimize göre dördüncü paragrafın üzerine gelindiği zaman bu konu önemli gibi kullanıcıyı uyarak bir mesaj verelim.
function MesajVer() {
alert ("Bu konu önemli");
}
Fonksiyonumu oluşturdum sıra geldi bu fonksiyonu HTML sayfamda bulunan paragrafa atamaya. Bunun için dördüncü paragrafım da ufak bir düzenleme yapıyorum.
Test mesaj 4
Gördüğünüz gibi HTML'de elamanın üzerine gelindiği zaman işlem yapmak için onmouseover kullanılır. Bu elemanı ekleyerek içerisinde oluşturduğum MesajVer fonksiyonun atadım ve çalıştırdım. Yani belirlediğimiz paragrafın mouse ile (fare) üzerine gelindiği zaman bizi aşağıdaki ekran mesajı karşılayacaktır:
Sıra geldi aynı işlemleri Jquery üzerinden yapmaya. Jquery biliyorsuz ki Javascript'in ücretsiz kütüphanelerinden birisi. Peki ekstra ne faydası olacak derseniz, yapılan işlemleri daha pratik ve az kod kullanarak oluşturabilmemiz de yardımcı olacak. Önceki dersimizde gördüğümüz gibi Jquery kodu her zaman $ (dolar) işaretiyle başlamaktaydı. Kodlamaya başlayalım
$(document).ready (function() {
});
Hatırlayacağınız üzere Jquery kodlarında herhangi bir problemle karşılaşmamak için önce web sayfamızın tamamen yüklenmesini beklememiz gerekiyordu. Bunun için yukarıda görmüş olduğunuz gibi kodumuza döküman hazır olduğunda yani web sayfamız yüklendiğinde çalış demek istedik. Hemen arasına gelerek erişmek istediğimiz nesneyi belirtiyoruz, ben burada farklı bir örnek oluşturmak istiyorum.
Örneğin ilk adımda yaptığımız form örneğini tekrar oluşturdum, bu sefer butona tıklandığında farklı bir paragraf üzerinden kullanıcıya mesajınız iletildi tarzında bilgilendirme yapmak istiyorum önce HTML yapımızı tekrar hazırlayalım
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ı için tüm kodları ekliyorum
$(document).ready (function() {
$('#gonder').click(function() {
Bilgi();
})
function Bilgi() {
$('p').append ("Mesajınız iletildi");
}
})
Artık kodumuzu yorumlayabiliriz,
- İlk olarak sayfa tamamen yüklendikten sonra işlem yapması için $(document).ready fonksiyonumuzu oluşturduk.
- Daha sonra formumuzda bulunan gonder nesnesine yani butona tıklandığında Bilgi() fonksiyonunu çağırmasını istedik.
- Son adımda ise Bilgi fonksiyonumuza boş bulunan
tagı içerisine mesajınız iletildi yazmasını istedik.
Jquery sayesinde oldukça pratik ve hızlı bir şekilde kodumuzu oluşuturmuş olduk. Bu kodu Javascript ile yazmak isteseydik çok daha uzun kod yapısı oluşturmamız gerekecekti. Bu yapı sayesinde form doldurulduktan ve mesajımız gönder butonuna basıldıktan sonra kullanıcıyı bilgilendirmesi adına işlem yaptırmış olduk. Mesaj vermek istediğimiz alanın içerisinde dilersek HTML kodlarıda kullanabilmekteyiz. Örneğin ben o mesajın belirginleşmesi adına yeşil yazı rengine çevirmek istiyorum ve şu şekilde bir yapı oluşturuyorum
$('p').append ("Mesajınız iletildi");
Genel kod yapımızı ise aşağıdaki gibi oldu:
Javascript Ders 3 - WMArşiv
<script></script>
<script>
$(document).ready (function() {
$('#gonder').click(function() {
Bilgi();
})
function Bilgi() {
$('p').append ("Mesajınız iletildi");
}
})
</script>
Adınız:
Soyadınız:
Mesajınız:
Projemizin son halini buradan indirebilirsiniz, lütfen takıldığınız yerleri sormaktan çekinmeyin. Kendi örneklerinizi oluşturarak pratiğinizi geliştirmeye çalışın bir sonraki derste görüşmek üzere, hepinize iyi çalışmalar dilerim.