jQuery’e Giriş, jQuery’i Tanıma ve İlk Örnek


Yeni oluşturduğum Tasarım isimli kategori altında CSS3, HTML5 ve jQuery hakkında yazılar yazacağım. İlk önce JQuery’den başlamak istedim çünkü şuan mobil örneklerini inceliyorum ve uygulamalar yapıyorum. Gelecekte “mobil” gelecek şüphesiz. Bu kategorideki ilk örnek olduğu için biraz uzun olacak. Sabrınız için teşekkür ediyorum.


Tabi ben burada Amerika’yı yeniden keşfetmiyorum ya da yeni çıkmış bir teknolojiyi anlatmıyorum. Bu teknoloji bir süredir zaten bulunuyordu. Bende, bir çoğumuz gibi, bir yerlerden kopyalayıp yapıştırarak, hazır kodların içerisinde onları düzetmeye çalışacak zamanımı geçiyordum. Yine bu hazır kodlara bakacağım fakat bu sefer ne yaptığımı bilerek kullanacağım. Ben bir yazılım geliştirici olarak hazır kodları projelerimde kullanmayı tercih etmiyorum çünkü bu hazır kod başınızı yarın bir gün ağrıtır bu çok belli. Çok uzadı hemen geçelim jQuery’e.

Giriş

jQuery, sloganından da belirtildiği gibi daha az kod yazarak daha fazla iş yapmanıza yarıyor. Tabi biraz hava da kalabilir. Çoğumuz internette gezerken çok iyi örnekler ile karşılaşırız. En yaygınları lightbox içerisinde fotogalerileri, üyelik sistemleri. Çok başarılı efekler gözümüze çarpmıyor değil. Bende ilk başlarda sağ tıklayıp flash mı diye baktım sizde bakmışsınızdır. jQuery’i bir çeşit javascript kütüphanesi diye geçiyor kaynaklarda. Sizin javascript kodları ile uzun yapacağız işlemleri jQuery ile bir satır kod ile yapabilirsiniz.

Başlamadan Önce Dikkat Edilmesi Gerekenler

Ben Visual Studio 2010 Ultimate üzerinde çalışacağım ve bunun için Visual Studio için buradan aşağıdaki seçenekteki gibi indirmeniz gerekiyor ya da buradan direkt indirebilirsiniz. Daha sonra da projenize eklemeniz gerekiyor. Masaüstünden sürükleyip visual studio içerisine solution adının yazılı olduğu yere bıraktığınızda kopyalayacaktır. Visual Studio 2010dan önce inheritance özelliği yoktu ama bu versiyonda mevcut ve işimizi oldukça kolaylaşdırdığını söyleyebilirim.

Eğer master page kullanmıyorsak her sayfaya bu js dosyasını eklememiz gerekiyor. Solution Explorer dan head tag leri arasında sürükle bırak yapabiliriz.

Alternatif

Kodu indirmeyip sadece aşağıdaki kod yazarakta kullanabilirsiniz. Ama local çalışıyor ve internetiniz gidip gelirse sıkıntı olabilir.

<script src="http://code.jquery.com/jquery-1.4.1-vsdoc.js" type="text/javascript">

Mantık Yürütme

Basit düzeyde kafa karıştırıcı olmayacak şekilde ben bu süreci üç bölümde anlatacağım;

  1. Hangi nesne (div, a, p, span, img, buton vb) bizim işlemlerimizden etkilenecek
  2. Bu nesnede neler olacak yani kod yazacağımız kodlar
  3. Bu yazdığımız kodlar ne zaman tetiklenecek/çalışacak. Bir butonun onClick, body nin onLoad anında gibi

Kod Yazma

Bu kodumuzda ekranda bir div olacak bu divin display özelliği none olacak ve bunu jQuery ile güzel bir şekilde görünür yapacağız. Boyutları ile oynayacağız bir kaç küçük örnek yapacağız.

Mantık Yürütme bölümünde anlattığım gibi;

  1. gosterilecekDiv id li div üzerinde çalışacağım
  2. bu kodu henüz yazmadım fakat function ın adı Goster()
  3. <a></a> taginin onClick özelliğine Goster() isimli function umu çağırıyorum.
<body>
    <form id="form1" runat="server">
    <a href="#" id="deneme" onclick="Goster()">Goster Bakalım</a>
    <div style=" background-color:Red; display:none; height:200px;" id="gosterilecekDiv">    
    </div>
    </form>
</body>

Goster isimli function ımızın kodunu yazıyoruz.

<head runat="server">
    <title>jQuery İlk Deneme</title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        function Goster() {
            $("#gosterilecekDiv").toggle(500);
        }
    </script>
</head>

Nasıl Yani?

jQuery bir kod yazmak için öncelikle $ (dolar) işareti ile başlıyoruz ve parantez içerisine aynı css teki mantık gibi eğer id li öğeyi çağıracaksak başına # (diyez) koyuyoruz, class çağıracaksak . (nokta) koyuyoruz veya tüm div, p, … leri etkileyecek bir kod yazmak istiyorsak sadece div,p,… yazıyoruz. Daha sonra . (nokta) ya bastığımızda inheritance özelliğinden bir sürü function geliyor. Alıp kullanabiliriz rahatça. Ben burada toggle kullandım. Toggle parametre olarak;

  • Milisaniye cinsinden sayısal değer
  • “slow”, “fast”, “normal” olarakta değer alabilir

Benim kullanmak istediğim diğer özellikte animate özelliği belkide en çok bunu kullanırsınız. Goster2 adında bir function daha yazacağım. Burada önce div görünecek daha sonrada boyutları değişecek.

<head runat="server">
    <title>jQuery İlk Deneme</title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        function Goster() {
            $("#gosterilecekDiv").toggle(500);
            $("#gosterilecekDiv").animate({}, 1000);
        }
        function Goster2() {
            $("#gosterilecekDiv2").animate({height:500,width:1000}, 1000);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" onclick="Goster()">Goster Bakalım 1.divi</a>
    <a href="#" onclick="Goster2()">Goster Bakalım 2.divi</a>
    <div style=" background-color:Red; display:none; height:200px;" id="gosterilecekDiv"></div>
    <div style=" background-color:Blue; display:none; height:200px; width:500px;" id="gosterilecekDiv2"></div>
    </form>
</body>

Giriş olduğu için uzatmak istemiyorum. Sonraki yazımda güzel örnekler yapacağız. Belli bir seviyeye geldiğimde yazılarım mobil tarafta yaptığım örnekleri yazacağım.

jQuery için daha fazla bilgi almak istiyorsanız 1

jQuery için daha fazla bilgi almak istiyorsanız 2

İndirme

Düz html örneğini indirmek için tıklayınız

Asp.net örneğini indirmek için tııklayınız

İyi çalışmalar. Umarım faydalı olur.

Görsel Kaynaklar:

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s