Son yıllarda javascript kütüphanelerinin artması ve gelişmesiyle web sayfalarının çehresi oldukça değişti. Artık javascript animasyonlarının daha kolay yapılabilmesi, kütüphaneler ve eklentileri sayesinde hazırlanan aksiyonların tekrar tekrar kullanılabilmesini sağladı. İleri seviyede yapılan çalışmalarla flash animasyonlara taş çıkaran javascript tabanlı siteler hazırlanmaya başlandı. Ayrıca sayfalarımızın vazgeçilmezi olan bir çok uygulamanın da (lightbox, tooltip, ajax) ana kaynağı oldu bu kütüphaneler.

Şimdiki yazımızda, bu kütüphanelerden en çok bilinenlerinden biri olan ve eklenti bakımından en zengini sayılan jQuery kütüphanesinin sayfalarımıza eklenmesinin nasıl yapılacağını öğreneceğiz.

1. jQuery kütüphanesi sayfanıza ekleme

jQuery kütüphanesini sayfanıza 2 farklı şekilde ekleyebilirsiniz. Bunlardan birincisi, jQuery web sitesinden indirebileceğiniz jQuery kütüphanesi dosyanızı web sitenize kaydederek.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

Yukarıdaki gibi, web sitemizin kök dizinine yüklemiş olduğumuz jQuery kütüphanesinin 1.3.2 versiyonu sayfamıza çağırmış oluyoruz.

İkinci olarak ise, jQuery kütüphanesini jQuery kod sunucusundan çağırabilirsiniz. jQuery kod sunucusunu kullanmak size, ziyaretçilerin daha önceden aynı sunucuyu kullanan başka siteleri ziyaretinden önbelleğe yüklediği jQuery kütüphane dosyasını tekrar yüklemek zorunda olmayacağından sayfanızın yüklenmesi nispeten hızlı olması avantajını sağlamasıdır.

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

Burada da, jQuery kod sunucusundan sayfamıza jQuery kütüphanesinin son versiyonunu çağırmış olduk. Son versiyon yerine belirli bir versiyonu çağırmak için ise kod parçasında gördüğünüz “jquery-latest.js” kısmını, çağırmak istediğiniz versiyon dosyası ile çağırmanız yeterli. Mesela  jquery-.1.2.js ile 1.2 versiyonunu sayfanıza çağırabilirsiniz.

Javascript kodlarının sayfa içerisindeki yeri ile alakalı herhangibir kısıtlama olmadığı için, yukarıdaki kod satırlarından tercihiniz olanı sayfanızın “<head>” kısmı içine ya da “<body>” kısmı içine ekleyebilirsiniz. Ama genel tavsiye, javascript kodlarını sayfanın yüklenme performansı açısından, “</body>” satırının hemen üstüne eklenmesi yönündedir.

2. jQuery kodlarını çalışır hale getirme

jQuery kütüphanesini sayfamıza çağırmak bu kütüphaneyi hemen çalışır hale getirmiyor. Kütüphane kodlarını kullanabilmek için, kütüphanesi sayfa yüklenirken ya da sayfa yüklendikten sonra aktif hale getirmemiz gerekiyor. Sayfa yüklenirken aktif hale getirmek için jQuery’i eklediğimiz satırdan sonra (bu kısım önemli, jQuery kütüphanesi kullanarak hazırlayacağınız kodlar mutlaka jQuery kütüphanesinin sayfaya çağrıldığı satırdan sonra sayfaya eklenmeli)

$(document).ready(function(){
    yazacağınız jQuery kodlarını bu kısma ekleyeceksiniz
});

ya da

$(function(){
    yazacağınız jQuery kodlarını bu kısma ekleyeceksiniz
});

kodu ile, sayfanın yüklenme aşamasında kütüphaneyi aktif ve kullanıma hazır hale getiriyorsunuz. Yukarıdaki iki kod da aynı işi yapıyor, ikinci kod parçasını ilkinin kısa yolu şeklinde düşünebilirsiniz.

Kütüphanenizin sayfa yüklendikten (tüm yazılar ve resimler) sonra aktif hale gelmesini istiyorsanız,

$(window).load(function(){
    yazacağınız jQuery kodlarını bu kısma ekleyeceksiniz
});

kod parçasını kullanabilirsiniz.

jQuery kütüphanesini kullanarak hazırlacağınız animasyon ve fonksiyonlarınızı ayrı bir javascript dosyasında tutmanız odlarınızın tekrar kullanabilirliği ve kolay düzenlebilmesi açısından avantajlı olacaktır.

Özetlemek gerekirse, jQuery kütüphanesini ve hazırladığınız javascript kod dosyanızı sayfanızın “</head>”  satırının hemen üzerine ya da “</body>” satırının hemen üzerine aşağıdaki şekilde ekleyebilirsiniz.

<script src="jQuery kütüphanesinin url adresi (kendi sitenizden ya da jQuery kod sunucusundan çağırabilirsiniz" type="text/javascript"></script>
<script src="jQuery kütüphanesini kullanarak hazırladığınız kendi kodlarınızın bulunduğu dosyanın url adresi" type="text/javascript"></script>

Kodlarınız içerisinde jQuery’nin eklentilerini kullanıyorsanız, bu eklentileri jQuery kütüphanesini çağırdıktan sonra ve kendi kodlarınızı çağırmadan önce sayfanıza eklemeniz gerekiyor.

jQuery kütüphanesi kullanarak kod oluşturma ve eklentileri kullanmayı daha sonraki yazılarımızda ele alacağız.

7 comments

Hakan Bey çok teşekkürler..!

Temel Jquery ile ilgili yazılarınızın devamı gelir umarım. Kolay gelsin.

çok teşekkürler h.yaman bey
yazılarınızı takip ediyorum jQuery ile ilgili cok tanıtım var ama bu şekilde nasıl kullanılacağını anlatan türkçe bir kaynak yokdu.bu konudaki bir açığı kapattınız.bende ilgilenmekdeyim jQuery ile ama sizin bu konudak makalelerinizle geliştireceğim.yazılarınızın devamını sabırsızlıkla bekliyorum.
teşekkürler

Eğitim yazılarını ben değil değerli Bilal Çınarlı hazırlıyor 🙂 Yorumunuz için teşekkür ederiz.

Hamdi yazının altına ya da başına bir boy bir portre fotoğrafımız ile kocaman adımızı yazmadan olmayacak heralde 🙂

şaka bir yana, jQuery eğitim yazılarımız devam edecek. Bunun yanında, MooTools ile alakalı yazılara da ağırlık vermeye çalışacağız.

teşekkürler bilal çınarlı ve h.yaman.
MooTools da oldukca kullanışlı o konudaki makalelerinizide sabırsızlıkla bekliyorum

Bir cevap yazın

*