Reklami Kapat

JQuery

Buyrun En Çok Kul landığım AJAX Fonksiyonu

Elimde ne varsa sizinle paylaşmaya devam ediyorum. jQuery ve AJAX ile güçlendirdiğim projelerimde en çok kullandığım fonksiyonu sizlere sunmak isterim.

Bu Javascript fonksiyonunun görevi form verilerini bir dosyaya göndermek ve dosyadan gelen cevaba göre işlem yapmak. Yani bildiğiniz AJAX. Müsadenizle önce kodu göstereyim, sonra kısa bir açıklama yapayım.

01.function ekle(){
02.
03. //Form verileri gönderilmek için uygun formata dönüştürülüyor.
04. var sc = $('#yeni_kayit_formu').serialize() ;
05.
06. // #ekleniyor isimli div'de "Yükleniyor..." yazısı yazıyoruz.
07. $('#ekleniyor').html('Yükleniyor...');
08.
09. $.ajax({
10. type: "POST",
11. url: "ekle.php",
12. data: sc,
13. success: function(msg){
14. if (msg=="ok")
15. {
16. //Dosyadan gelen cevap "ok" ise #ekleniyor isimli div'e "Kayıt Eklendi!" yazdırıyoruz.
17. $('#ekleniyor').html("Kayıt Eklendi!");
18. }
19. else
20. {
21. //Dosyadan gelen cevap "ok" değil ise #ekleniyor isimli div'e gelen cevabı yazıyoruz.
22. $('#ekleniyor').html( msg );
23. }
24. }
25. });
26.}

Uygulamanıza jQuery kütüphanesini dahil ettikten sonra bu fonksiyonu kullanarak bir PHP dosyasına veri gönderip gelen cevabı değerlendirebilirsiniz. Veri gönderilen PHP dosyası da şöyle olabilir.

01.<?php
02.include('../../ayar.php');
03.
04.// Eğer ismini yazmamışsa $sonuc değişkeni "ok"'den farklı bir değer alıyor.
05.if ($_POST['isim']=='') $sonuc="Lütfen başlık yazınız.";
06.
07.if (!$sonuc)
08.{
09.$sql = "INSERT INTO kisiler VALUES ($_POST[isim])";
10.mysql_query($sql);
11.
12.// Eğer ismini yazmışsa $sonuc değişkeni "ok" değerini alıyor.
13.$sonuc="ok";
14.}
15.
16.// $sonuc değişkenini gönderiyor.
17.echo $sonuc;
18.

Jquery Komple Örnek

Aşağıdaki Eğer kendi dosyasında komut kullanmak olduğunu tam HTML dosyası nasıl olması bir örnektir. Bunun Google’ın CDN için jQuery çekirdek dosyasını yüklemek için bağlantılar unutmayın. Ayrıca, süre özel komut dosyası <head>, genellikle ayrı bir dosya yerleştirmek için tercih edilir ve komut elemanın src özniteliği ile bu dosyadaki bakın dahildir

  <! DOCTYPE html>
  <html lang=”en”>
  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”> </ script>
    <script type=”text/javascript”>
      $ (document). ready (function () (
        $ ( “a”). click (function (olay) (
          alert ( “Gördüğünüz gibi, bağlantı artık” jquery.com kadar) aldı;
          event.preventDefault ();
        ));
      ));
     
    </ script>
  </ head>
  <body>
    <a href=”http://jquery.com/”> jQuery </ a>
  </ body>
  </ html>

JQUERY Başlatılması Kodu Belge Hazır Doğum

Ilk şey en Javascript programcıları elini sonunda, program, buna benzer bazı kod katmaktadır:

  window.onload = function () (( “”) edilir uyarı;)
Içinde olan kodu çalıştırmak için doğru zaman sayfa yüklendiğinde istersiniz. Sorunsal Ancak, Javascript kodu kadar tüm görüntüleri indirme bittiğinde (bu afiş reklamlar da buna dahildir) çalıştırmak değildir. Başta window.onload kullanma nedeni, HTML ‘belge’ henüz, ne zaman ilk olarak kodu çalıştırmayı denediğinizde yüklenmesi bittikten değildir.

Hem sorunları atlatmak için, jQuery basit bir beyanı kontrol eden belge ve beklediği kadar, hazır etkinliği olarak bilinen manipüle hazır’s:

  $ (document). ready (function () (
    / / Kodunuzu buraya
  ));
Hazır olay içinde bağlantıya bir tıklama işleyicisi ekleyin:
Yazının devamını oku. »

jQuery: Temel Bilgiler

Bu bir, sen jQuery kullanmaya başlamanıza yardımcı olmak için tasarlanmış öğretici temel. Henüz, aşağıdaki içeriği ile yeni bir HTML sayfası oluşturarak başlamak bir test sayfası kurulum yoksa:

<html>
   <head>
     <script type=”text/javascript” src=”jquery.js”> </ script>

     <script type=”text/javascript”>
      
     </ script>
   </ head>
   <body>
     <a href=”http://jquery.com/”> jQuery </ a>
   </ body>
</ html>
Komut etiketinde src özniteliği Düzenle jquery.js kopyanızı işaret edecek. Örneğin, jquery.js HTML dosyası olarak aynı dizinde ise, kullanabilirsiniz:

  <script type=”text/javascript” src=”jquery.js”> </ script>
Not: Tüm sayfa PHP ile bulunur () veya emin olun () fonksiyonu, ihtiyaç içinde <body> etiketini değil içinde bu komut dosyası kodunu koymak dahil <head>, çünkü <head içinden arama jQuery komut dosyası nedense> etiketinin doesnt work.

Sen indirme jQuery sayfasından jQuery kendi kopyasını indirebilirsiniz.

jQuery’nin birkaç özelliği

Basit kullanım: Gerçekten jQuery’nin son derece basit bir kullanımı var. Yapmak istediğiniz pek çok işlemi çoğu zaman “tek bir satırda” halledebiliyorsunuz. Örneğin web sayfanızdaki bütün div etiketlerini $('div') kodu ile yakalayabiliyorsunuz. Yok ben sadece class özniteliği “baslik” olan div etiketlerini yakalayacağım derseniz $('div.baslik') kodunu kullanmanız yetiyor. Yani jQuery’nin sloganında da yazdığı gibi: “daha az yazın, daha fazlasını yapın” ;)

Zincirlenebilirlik: jQuery’nin Sihri (The Magic of jQuery) olarak isimlendirilmiş bu özellik sayesinde çok kısa kodlar yazabilirsiniz. jQuery içerisindeki methodları birbirine zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin şöyle bir kod ile web sayfanızdaki tüm linkleri önce yakalarsınız, sonra bir class ataması yaparsınız ve son olarak da onclick olayına bir fonksiyon eklersiniz:

$('a').addClass('deneme').click(fonksiyon);

Eklentiler: jQuery’nin bir başka mükemmel özelliği de eklentileridir. Eklentileri, belli görevleri yapan ve jQuery kütüphanesi üzerinden geliştirilmiş kod parçacıkları olarak tanımlayabiliriz. Örneğin web sitenizde “sekme (tab) menüler” kullanmak isterseniz Tabs eklentisi, web sayfanıza bir mp3 player yerleştirmek isterseniz jMP3 eklentisi ya da bir dosya yükleme uygulaması sunmak isterseniz jqUploader eklentisi ihtiyacınızı karşılamaya hazırdır. Buna benzer yüzlerce jQuery eklentisi vardır ve vakti geldikçe de bu konuda tanıtımlar yapacağım ;)

Uyumluluk: jQuery, şu anda en çok kullanılan web tarayıcılarında çalışabilmektedir. Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz. Bunun haricinde Prototype.js gibi başka kütüphaneler ile birlikte de uyum içerisinde kullanabilirsiniz. Bu konuda jQuery’yi Diğer Kütüphaneler İle Birlikte Kullanmak sayfası size yardımcı olacaktır.

Efektler: jQuery, script.aculo.us gibi tamamen bir efekt kütüphanesi olmamasına rağmen yine de sık kullanılan efektleri sunuyor. Örneğin fadeOut efekti sayesinde bir nesnenin görünürlüğünü yavaş yavaş azaltırken, show efekti sayesinde daha önceden gizlenmiş bir nesneyi görünür kılabiliyorsunuz. En önemlisi de bu efektleri kullanmak çok basittir. Alttaki örnek kodda, “hide” efektini kullanarak “myDiv” isimli nesneyi yavaşça gizlemiş oluyoruz.

$("#myDiv").hide("slow");

AJAX: jQuery diğer konularda olduğu gibi AJAX konusunda da kullanıcılarına kolaylıklar sağlıyor. Böylece web sayfanızın tamamı yüklenmeden, başka bir web sayfası ile etkileşime geçebiliyorsunuz. AJAX işlemi başlamadan önce veya bittikten sonra bir olayı tetiklemek, sunucudan gelen veri türüne göre (xml, json) işlem yapmak, belli zaman aralıklarında tekrar tekrar istekler yollamak v.s. jQuery ile yapabileceklerinizin küçük bir bölümü. Örneğin alttaki örnek kod ile AJAX kullanarak form.php dosyasına Erhan ve 23 verilerini post etmiş oluyoruz.

$.ajax({
type: “POST”,
url: “form.php”,
data: “isim=Erhan&yas=23″
});

Bu da basitleştirilmiş ve kolaylaştırılmış versiyonu:

$.post( "form.php", {isim:"Erhan", yas:"23"} );

Sonuç…

Evet, basite indirgeyerek jQuery kütüphanesinden bahsetmeye çalıştım. Bundan böyle jQuery ile ilgili haberleri, kaynakları, örnek kodları ve kullanışlı eklentileri paylaşmaya gayret göstereceğim. Bu sayede Türkçe içeriğe de bir katkım olacağını düşünüyorum. Zira jQuery ile ilgili maalesef kendi dilimizde doğru düzgün bir kaynak bulunmuyor. Kendi web sitem haricinde bir de javam.org sitesinde de jQuery ile ilgili birkaç yazı bulabilirsiniz. Eğer sizin de bildiğiniz başka Türkçe jQuery yazıları varsa lütfen yorum kısmında belirtiniz ;)

jQuery dünyasına adım atıyoruz

javaScript kütüphaneleri kendilerine çok sağlam bir yer edindiler. Gerek kod yazma sürecini azaltmaları, gerek tarayıcı farklılıklarından doğan pek çok sorunla boğuşmamızı engellemeleri ve nesne tabanlı yapıları itibariyle javaScript kütüphaneleri çabuk benimsendiler. Prototype.js‘nin tetiklediği bu süreçte yüzlerce javaScript kütüphanesi duyuruldu. Dolayısıyla bunların arasından bir seçim yapmak gerekiyor. Bugüne kadar benim seçimim Prototype.js idi ama artık çok daha isabetli bir seçim olduğuna inandığım jQuery ile yoluma devam ediyorum.

jQuery nedir ve kimler tarafından kullanılıyor?

jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.

jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek istiyorum. Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır. Daha fazlası için jQuery Kullanan Siteler sayfasına bakabilirsiniz.

Program yazlm Script oyun indir