Giriş
Programlama dünyasına aşinaysanız, programlama dillerinin ne kadar önemli olduğunu bilirsiniz. En kritik ve sık kullanılanlardan bazıları şunlardır: HTML, CSS, ve JavaScript. HTML ve CSS web sitenizi tasarlamanıza ve yapılandırmanıza yardımcı olurken, JavaScript onu etkileşimli hale getirmenizi sağlar. Web projenize benzersiz özellikler eklemek için kullanabileceğiniz bir dizi JavaScript kütüphanesi vardır. Bunların arasında jQuery kütüphanesi de yer alır.
jQuerytek başına bir programlama dili değildir. JavaScript'te web geliştirmeyi kolaylaştırmak için kullanabileceğiniz bir araçtır. Bu, görevleri daha basit ve anlaşılır hale getirmeye yardımcı olur. Meşhur 'Daha Az Yaz, Daha Çok Yap' (Write Less, Do More) konseptine dayanır. Web geliştirmeyi kolaylaştırmanın yanı sıra jQuery, size tarayıcılar arası uyumluluk avantajı da sağlar. Bu, çıktının hangi tarayıcıda görüntülendiğine bakılmaksızın kodun düzgün bir şekilde işlenebileceği anlamına gelir.
jQuery'nin işleri nasıl daha kısa ve öz hale getirdiğini daha iyi görselleştirmek için bir örneği ele alalım. Diyelim ki “Hello, World!” programını yazıyoruz. JavaScript ve jQuery'de sırasıyla şu şekilde görünecektir:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Bu iki kod satırı da aynı sonucu verecektir. Ancak görebileceğiniz gibi, jQuery yazımı daha kısa, öz ve amaca yönelik hale getirir.
Bu eğitimde, jQuery'nin temelleri hakkında her şeyi öğreneceksiniz. Bu aracı kendiniz için bu web sitesinden indirebilirsiniz. jQuery hakkında hiçbir bilgisi olmayan tamamen yeni başlayan biriymişsiniz gibi ilerleyeceğiz. Bu eğitim size jQuery'yi nasıl kuracağınızı ve bununla ilişkili bazı temel kavramları öğretecektir. jQuery'deki bazı yaygın seçicileri, olayları ve efektleri inceleyeceğiz. Ardından, yararlı örnekler aracılığıyla API, DOM ve CDN gibi geliştirme kavramlarını nasıl test edeceğinizi öğreneceksiniz. jQuery dünyasına aşina olmak için okumaya devam edin.
Başlamadan Önce
Önceden bilmeniz durumunda işinize yarayacak bazı şeyler vardır. Örneğin, HTML ve CSS'in nasıl çalıştığına dair temel bir anlayışa sahip olmak size büyük ölçüde yardımcı olacaktır. Bu eğitimde bunu ele almayacağız. En azından basit bir web sitesini nasıl kuracağınızı bildiğiniz varsayımıyla çalışacağız. Ayrıca genel olarak programlamanın nasıl çalıştığına dair temel bir anlayışa sahip olmalısınız. Bu, devam etmek için JavaScript konusunda uzman olmanız gerektiği anlamına gelmez. Programlamadaki mantık, değişkenler ve veri tipleri gibi konulara biraz aşina olmanız yeterlidir.
Sisteminizde jQuery Nasıl Kurulur
Öncelikle, sisteminizde jQuery’yi nasıl kurabileceğinizi görelim. jQuery bir JavaScript kütüphanesi olduğu için bir JavaScript dosyası olarak mevcuttur. Bu dosyayı web sitemizin HTML koduna bağlamanız gerekir. Bunu yapmanın iki yolu vardır. Daha önce de belirttiğim gibi, yollardan biri onu buradan indirmektir. Resmi web sitesinin yanı sıra, jQuery'yi Google Hosted Libraries'de de tam burada.
bulabilirsiniz. Diğer bir yol ise dosyayı bağlamak için İçerik Dağıtım Ağı (Content Delivery Network) veya CDN kullanmanızdır. Bir CDN, web içeriğinin yerel olarak sunulmasına yardımcı olan bir sunucu kümesinden oluşur. Bir jQuery dosyasını CDN aracılığıyla barındırmak, içeriğin kullanıcıya çok daha hızlı ulaşmasını sağlar. Bu nedenle, bu eğitimde bu noktadan itibaren İçerik Dağıtım Ağı'nı kullanacağız.
İlk örneğimizde bir web projesi yapacağız. Bu küçük proje şunları içerir: style.css dosyası css/ dizininde yer alır. script.js dosyası js/ dizininde bulunur. Son olarak, bir index.html dosyası web projesinin kök dizininde yer alır:
Bu projeye göre bir HTML iskeleti oluşturacağız. Ardından, bunu index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Burası jQuery dosyasını bağlayacağımız yerdir. Daha önce de belirttiğim gibi, bunu CDN aracılığıyla bağlayacağız. jQuery bağlantısını şundan önce gireceksiniz: </body> etiketi. Bundan sonra, örneğimizdeki script.js olan özel JavaScript dosyanızı ekleyebilirsiniz. JavaScript dosyasını her zaman jQuery kütüphanesinin altına koymayı unutmayın, şu şekilde:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Bunun yerine jQuery kütüphanesinin yerel bir kopyasını indirseydiniz ne yapardınız? Bu durumda, jQuery dosyasını js/ klasörüne kaydetmeniz gerekir. Ardından bunu şu şekilde bağlayabilirsiniz: js/jquery.min.js.
jQuery: Temeller
Detaylara dalmadan önce, jQuery’nin bazı temellerinin üzerinden geçelim. jQuery'nin ana görevi, tarayıcıdaki HTML öğelerini bağlamak için DOM kullanmaktır. DOM'un açılımı Document Object Model'dir. JavaScript'in bir tarayıcıda HTML ile etkileşime girmesini sağlayan yöntemdir. Web sayfanıza sağ tıklayıp İncele'yi seçerek DOM'u görselleştirebilirsiniz. Geliştirici Araçları'nda görünen HTML, DOM'dur.
Düğüm (node), DOM'daki bağımsız bir HTML öğesidir. JavaScript bu nesnelerin veya öğelerin tümünü değiştirebilir. Bu nesnelerin düzenini ağaç benzeri bir yapı olarak hayal edebilirsiniz. <html> kök dizinde yer alırken, öğeler daha da dallanır.
Sağ tıklayıp Sayfa Kaynağını Görüntüle'yi seçmek size web sitesinin ham HTML'ini gösterecektir. Bunun DOM ile aynı olmadığını unutmayın. DOM değiştirilebilirken, HTML kaynağı tamamen statiktir. JavaScript'te yapacağınız hiçbir değişiklik bu HTML dosyasını etkilemeyecektir. Tüm <html> düğümü, belge nesnesi (document object) adı verilen dış bir katmanla sarmalanmıştır.
Sırada, jQuery kullanarak web sayfanızı ve özelliklerini nasıl değiştirebileceğinizi göreceğiz. Ancak bunu yapmadan önce sayfanın hazır olduğundan emin olmalısınız.
Aşağıdakileri yazın, oluşturduktan sonra script.js dosyasını js/ dizininde:
|
1 2 3 4 5 |
$(document).ready(function() { // tüm özel jQuery kodları buraya gelecek }); |
Artık yazacağınız her kod bu kodun içine sarmalanacaktır. jQuery, kodun hazır olma durumunu algılayacaktır. Bu fonksiyonun içindeki kod, yalnızca DOM hazır olduğunda çalıştırılacaktır.
Eğitimin başında bahsettiğimiz “Hello, World!” betiğine geri dönelim. Bu betiği başlatmak istediğimizi varsayalım. Bu metni tarayıcıya yazdırmak üzere jQuery kullanmak için, şu şekilde boş bir blok düzeyindeki paragrafa demo kimliğini (ID) uygulamamız gerekir:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
jQuery'yi çağırmak için $ sembolünü kullanmalıyız. jQuery ile DOM'a erişmek için CSS sözdizimini ve yöntemlerini uygulayabilirsiniz. Basit bir örnek aşağıdaki gibidir:
|
1 |
$("selector").method(); |
Bu, jQuery ile kullanacağınız formattır. CSS'te # sembolünün ID'yi temsil ettiğini zaten biliyoruz. Bu nedenle, #demo.html() seçicisini kullanarak demo ID'sine erişebilirsiniz. Bu yöntem, bir öğede bulunan HTML'i değiştirmenize olanak tanır.
Aşağıdaki kod, “Hello, World” programını script.js dosyasının jQuery ready() sarmalayıcısına koyduğumuzu gösterir:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Bu kod satırını script.js dosyasına eklemeniz gerekir. Bu dosyayı kaydedin. Ondan sonra, index.html dosyasını tarayıcıda açabilirsiniz. Çıktıyı görebilmeniz gerekir: Hello, World!. Burası, konuyu daha iyi anlamanız için DOM'u kontrol etmek adına da iyi bir noktadır. “Hello, World!” metnine sağ tıklayın. Öğeyi Denetle'yi seçin. DOM şunu gösterecektir: <p id="demo">Hello, World!</p>. Diğer yandan, Sayfa Kaynağını Görüntüle'ye tıklamak size yalnızca ham html'yi gösterecektir. Bu durumda, bu şu şekilde olacaktır: <p id="demo"></p>.
Seçiciler (Selectors) Nelerdir?
Şimdi jQuery'deki bazı kritik özelliklere geçececeğiz. Bunların arasında seçiciler de yer alıyor. jQuery seçicileri, programa hangi öğelerle çalışmak istediğinizi veya hangilerini 'seçmek' istediğinizi söyler. CSS'de kullanabileceğiniz seçicilere çok benzerler. jQuery'de bir seçiciye nasıl erişileceğinin temel biçimi şöyledir:
|
1 |
$("selector") |
Tek veya çift tırnaklı dizeler kullanabilirsiniz, ancak jQuery stil kılavuzu ikincisini tercih eder. İsterseniz, jQuery seçicilerinin tam listesini bu resmi sayfada görüntüleyebilirsiniz. Bilginize sunmak amacıyla, en sık kullanılan seçicilerden bazıları şunlardır:
-
$("*")
Bu, Joker Karakter (Wildcard) seçicisidir. Sayfanızdaki her öğeyi seçecektir.
-
$(this)
Bu, Geçerli (Current) seçicidir. Şu anda bir fonksiyonla üzerinde işlem yaptığınız öğeyi seçer.
-
$("p")
Bu, Etiket (Tag) seçicisidir. <p> etiketinin tüm örneklerini seçer.
-
$(".example")
Bu, Sınıf (Class) seçicisidir. example sınıfı uygulanmış olan her bir öğeyi seçecektir.
-
$("#example")
Bu, Id seçicisidir. Sadece example id'sinin tek bir örneğini seçer.
-
$("[type='text']")
Bu, Öznitelik (Attribute) seçicisidir. text değeri type özniteliğine uygulanmış olan tüm öğeleri seçecektir.
-
$("p:first-of-type")
Bu, Sözde Öğe (Pseudo Element) seçicisidir. İlk <p>.
Olaylar (Events) Nelerdir?
Web sayfasının, sayfa yüklenir yüklenmez yüklenen bazı özellikleri vardır. “Hello, World” örneğini düşünün. Bu durumda, kodu doğrudan kaynak HTML'ye ekleyebilirdik. Ancak bir özelliğin yüklenmesi kullanıcı etkileşimi gerektirdiğinde ne olur? İşte jQuery burada kullanışlı hale gelir.
Diyelim ki kullanıcının bir düğmeye tıklamasından sonra bazı metinlerin görünmesini istiyoruz. Bu özelliği eklemek için, bir <button> öğesini index.html dosyasına eklemeniz gerekir. Bu düğme, tıklama 'olayını' dinleyecektir:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Click me</button> <p id="demo"></p> |
Kullanıcının tarayıcıyla etkileşime girdiği her an bir olay (event) olarak kabul edilir. Etkileşim, fare imleci veya klavye aracılığıyla olabilir. Yukarıdaki örnekte, bir düğmeye tıklanması bizim olayımızdır. Bu yüzden buna tıklama olayı (click event) denir.
Ardından, “Hello, World” kodunu içeren bir fonksiyon çağırmamız gerekir. Bunu yapmak için, click() yöntemini kullanacağız:
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Gördüğünüz gibi, <button> öğemizin ID'si trigger olarak adlandırılmıştır. Bunu $(“#trigger") kullanarak seçebiliriz. click() yöntemini eklemenin amacı, programın tıklama olayını dinlemesini sağlamaktır. Ardından, metin kodunu içeren fonksiyonu yöntemin içine yerleştireceğiz:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Kodumuz sonunda şuna benzer görünecektir:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Şimdi script.js dosyasını kaydedebilirsiniz. Yenileyin: index.html değişiklikleri uygulamak için tarayıcıda. Düğmeye tıkladıktan sonra, test çıktısı “Hello, World!” görünecektir.
Tıklama (click) dışında başka jQuery olay türleri de vardır. Bu olay yöntemlerinin tam listesini şuradan görüntüleyebilirsiniz: bu resmi belge. İşte zaman zaman karşılaşabileceğiniz en sık kullanılanlardan bazıları:
-
click()
click olayı, tek bir fare tıklamasıyla kodu yürütür.
-
hover()
hover olayı, fare imleci bir öğenin üzerine geldiğinde kodu yürütür. Kodun farenin girmesiyle mi yoksa çıkmasıyla mı tetikleneceğini ile de belirtebilirsiniz.mouseenter() ve mouseleave() sırasıyla.
-
submit()
Bir formun gönderilmesi kodu tetikler.
-
scroll()
Ekranda aşağı kaydırma, kodu yürüten olay olacaktır.
-
keydown()
Klavyede bir tuşa basılması kodu yürütecektir.
Efektler Nelerdir?
jQuery efektleri jQuery olaylarıyla birlikte çalışır. Efektlerin temel amacı, terimden de anlaşılacağı gibi, sayfaya animasyonlar eklemektir. Çeşitli efekt türlerini uygulamak için öğeleri manipüle etmenize olanak tanır. Bu efektler belirli olaylar tarafından tetiklenebilir.
Daha iyi anlamak için bir örnek ele alalım. Diyelim ki bir açılır pencere katmanını (popup overlay) açıp kapatmak istiyoruz. Bunu yapmanın bir yolu iki farklı ID kullanmaktır. Biri katmanı açar, diğeri ise kapatır. Bunu yapmanın diğer yolu ise bir sınıf (class) kullanmaktır. Sınıf kullanmanın avantajı, aynı fonksiyonun katmanı hem açıp hem de kapatabilmesidir.
Open your index.html dosyasını açın. Ardından, gövdeden (body) <button> ve <p> etiketlerini silin. Şimdi HTML'e aşağıdaki kod satırlarını ekleyin:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Aç</button> <section class="overlay"> <button class="trigger">Kapat</button> </section> ... |
Şimdi style.css dosyamıza bakalım. Burada amacımız, katmanı gizlemek için minimum CSS kullanmaktır. Bunun için display: none özelliğini kullanacağız ve onu şu şekilde ortalayacağız:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Ardından, toggle() yöntemini kullanacağız. Bu yöntem, display özelliğini none ve block arasında değiştirmemizi (toggle) sağlayacaktır. Böylece, her tıkladığımızda katman gizlenecek ve gösterilecektir. Bu kodu script.js dosyanıza ekleyin:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Son olarak, değişiklikleri uygulamak için index.html dosyasını yenileyin. Artık modalın görünürlüğünü değiştirebileceksiniz. Tek yapmanız gereken düğmelere tıklamak. Bununla birlikte kullanabileceğiniz başka jQuery efektleri de vardır. Örneğin, basit toggle() efektini slideToggle() veya fadeToggle().
Aşağıda, jQuery'de yaygın olarak kullanılan birkaç efekt yöntemi verilmiştir:
-
toggle()
Bu yöntem, öğenin görünürlüğünü değiştirmenize olanak tanır. Bununla ilişkili tek yönlü efektler show() ve hide().
-
fadeToggle()
Bu yöntem, animasyon aracılığıyla öğenin görünürlüğünü ve opaklığını değiştirmenizi sağlar. Bu durumdaki tek yönlü efektler fadeIn() ve fadeOut().
-
slideToggle()
Bu yöntem, öğenin görünürlüğünü değiştirmek için kayma efektlerini kullanmanızı sağlar. Bu durumdaki tek yönlü efektler slideUp() ve slideDown().
-
animate()
Bu efekt yöntemi, özel animasyon efektleri gerçekleştirmenizi sağlar. Belirtilen öğenin CSS özelliğini kullanır.
Sonuç
Umarız bu eğitim, jQuery'ye kapsamlı bir giriş yapma konusunda yardımcı olmuştur. Web geliştirmeyi ve kod yazmayı kolaylaştırmada çok işe yarayan, inanılmaz derecede faydalı bir araçtır. Programlama dünyasında nispeten yeniyseniz bu durum özellikle geçerlidir.
jQuery'nin temellerini oluşturan çeşitli öğeleri inceledik. Ayrıca bu öğeleri nasıl seçip değiştirebileceğinizi, olayları ve efektleri nasıl verimli bir şekilde kullanabileceğinizi de öğrendik. jQuery gibi araçlarda uzmanlaşmak, ilgi çekici bir kullanıcı deneyimi sunan etkileşimli özelliklerle dolu web siteleri oluşturmanıza yardımcı olabilir.
JavaScript ile çalışırken size yardımcı olacak, blogumuzdaki bazı kaynaklara göz atın:
- HTML'e JavaScript Ekleme Kılavuzu
- JavaScript ile Çalışmak: Sınıflar Nasıl Çalışır
- JavaScript ile Çalışmak: Prototipler ve Kalıtım Nasıl Çalışır
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.