JQuery Attribute Metodu
JQuery sever web yazılımcılarına yeniden merhaba :)
Önceki makalemizde JQuery Selectors konusunu öğrenmiş ve web sayfasındaki HTML nesnelerine nasıl erişebileceğimizi öğrenmiştik,bu makalemizde ise JQuery ile nesnelerin attribute (öznitelik) değerlerini okumanın yanı sıra değiştirebilmeyi öğreneceğiz.
Bildiğiniz gibi JQuery Javascript'ten türetilmiş çok kapsamlı bir kütüphanedir ve bu kütüphane sayesinde JQuery kodları yazmanın yanı sıra Javascript kodlarından da faydalanıyoruz.Dolayısıyla bu makalemizde biraz da Javascript kodları yazacağız.
Makalemizin temel konusu JQuery Attribute ile sayfa içerisindeki nesnelere erişerek özniteliklerini değiştirmek olacak ve bu konuyu çok daha rahat anlayabilmeniz için güzel bir örnek uygulayacağız.
Örnek projemiz JQuery ile resim galerisi yapmak olacak,bu küçük projede kullanıcı her butona bastığında ekrandaki resim değişecek.Tabi bunun için sayfa elementlerinde sadece img tagı ve bir adet HTML buton kullanacağız bu kadar basit yani :)
Şimdi Adobe Dreamweaver uygulamamızı açıp yeni bir HTML belgesi oluşturduktan sonra aşağıdaki gibi sayfamızı oluşturuyoruz:
Sayfamıza JQuery kütüphanesini sarı renkle gösterdikten sonra sayfamızı çalıştırıp tarayıcı görüntüsüne bakalım:
Şimdi Google görsellerden 400x400px boyutlarında 3 resim bulduktan sonra proje klasörümüze indirelim:
Resimlerimizi de tamamladıktan sonra artık javascript kodlarını yazmaya başlayabiliriz :)
Öncelikle Head tagı içerisinde kodlarımızı yazacağımız script tagı açıyoruz:
Document.Ready metodundan daha önce bahsetmiştik ve tekrar hatırlarsak web sayfasının tamamen yüklendiğinden
emin olmak ve JQuery kodlarının çalışacağını web tarayıcısına bildiriyoruz.
Script tagımızı açtıktan sonra ilk yapmamız gereken galerimizdeki resimleri bir yerde tutmamız olacak,tabi burada dosya anlamında değil dosyanın yolu anlamında olacak.Bu işlem için resimlerin yollarını bir Javascript dizisinde tutuyoruz:
Jquery'yi etkin bir şekilde kullanabilmek için Javascript'i orta seviye kadar bilmeniz gerektiğini daha
önce söylemiştim o yüzden Array (dizi) konusu size yabancı gelmemeli,geliyorsa da biraz Javascript öğrenmekte
fayda var :)
Artık resimleri bir noktada tuttuğumuza göre img tagımıza taşımaya geldi ancak galerimizi çalıştırabilmemiz için
öncelikle butona tıklanmasını sağlamak olacak,bunun için JQuery eventlerinden (olaylar) click eventini kullanmalıyız:
Eventler konusu için şimdilik kafanız karışmasın çünkü ilerleyen makalelerimizde JQuery eventlerini daha detaylı göreceğiz.
HTML butonumuzun tıklanma anını yakaladıktan sonra resimlerin yollarını img tagına verebiliriz ama hangisini?
Dizilerle ilgili bildiğimiz önemli bir kavram olan index olayını hatırlayalım: index ile bir dizideki hangi elemana ulaşabildiğimizi belirtiyorduk ve bu sayede dizi içerisindeki birden çok elemana sıralı ve düzenli bir şekilde
erişebiliyoruz.
Index olayının bu konumuzla olan ilgisi ise kullanıcı butona her bastığında dizi içerisindeki o andaki resimden bir sonraki resme geçişi sağlamak için kullanacağız yani kullanıcı her butona tıkladığında aynı resmi görmek yerine sırasıyla görecek ve son resme geldiğinde ise diziyi başa sararak (index değerini resetleyerek) ilk resme geri dönmesini sağlamak olacaktır.
Madem kullanıcı butona her tıkladığında index değeri değişecek o halde indexin butondan bağımsız olması gerekmektedir.
Bunu sağlamak için index isimli değişkeni butonun click eventi dışında yazmak olacak:
Indexin başlangıç değeri olarak sıfır vermemizin amacı kullanıcı butona ilk tıkladığında dizideki ilk resmi görmesini
sağlamak ve butona her tıklandığında ise index değeri 1 artmalı ki kullanıcı sonraki resmi görebilsin:
Eğer kullanıcı son resmi yani dizideki 2.indexte olan 3. resme bakıyorsa 4. resim olmayacağı için indexi başa sarmalıyız:
Index kavramıyla ilk başlarda kafanız karışabilir bunu doğal karşılayın çünkü ben index kavramını öğrenirken 3-4 gün
baya kafa patlatmıştım :)
Artık kullanıcının butona her tıkladığında hangi resimleri göreceğini ifade ettiğimize göre şimdi makalemizin ana konusu
olan attribute kavramına geri dönüyoruz.
Bir HTML nesnesini özniteliğini yakalamak ve değiştirmek için kullanılan attribute metodu iki şekilde kullanılır:
Nesnenin attribute değerini okurken:
$(secici).attr("öznitelik");
Nesnenin attribute değerini değiştirirken:
$(secici).attr("öznitelik","yeni_deger");
syntaxlarını kullanırız.
Örneğin img tagındaki o an gösterilen resmin yolunu yakalayalım:
Tabi bizim için önemli olan şu an hangi resim yolunun olduğu değil dizideki hangi resmin olduğudur,neyse bu konunun
kafanıza karıştırmasına izin vermiyorum ve konumuza devam edelim :)
Kullanıcı butona her tıkladığında resimler dizisindeki o anda gelecek resmi img tagının src attribute'ne verelim:
Görselde sarı renklerle gösterdiğim ilk satırda o an ki index değerinden gelen resmin yolunu "yuklenecekResim" isimli
bir değişkene attık ve ikinci satırda da img tagının src özniteliğine değer olarak verdik.Zaten projenin asıl can damarı
dediğimiz nokta bu iki satırdan ibarettir,eğer bu iki satırı kavrayabiliyorsanız olayı çözdünüz demektir :)
Projemizi çalıştıralım:
Peki kodlar nasıl çalışıyor diye tekrar gözden geçirelim:
Kod satırı sırasıyla:
9.satırda Document.Ready metodu ile Jquery kodlarının web tarayıcısında (browser) çalışmaya hazır olduğunu denetliyoruz,
12.satırda resimleri bir noktada tutmak için Array dizisi oluşturuyor 14,15 ve 16.satırlarda dizimize resimlerin yollarını veriyoruz,
18.satırda diziden gelecek resimlerin sıra değeri olarak sıfır veriyoruz ki kullanıcı butona tıkladığında ilk resim görüntülensin,
20.satırda kullanıcının butona tıklama anını yakalıyoruz,
25.satır aslında bilgi amaçlı,maksat attr metodu ile nesnedeki değere nasıl ulaşıldığını gösterebilmek,
27.satırda kullanıcı butona tıkladığında dizideki o an ki index değerine göre gelen resmin yolunu bir değişkene atıp 29.satırda bu değişkeni
img tagına src değeri olarak verdik,
31.satırda ise kullanıcı bir sonraki resmi görmeye hazır olabilsin diye index değerini 1 artırıyoruz,
33.satırda eğer kullanıcı son resmi görüntülüyorsa diziyi başa sarması için index değerini sıfıra döndürüyoruz,bunu yaparken dikkatli olmamız gerekiyor çünkü elimizde 3 resim olduğu için indexi 0 yaptık,eğer 3 yerine 2 yazsaydık kullanıcı son resmi görmeden tekrar başa dönecekti.
Bu noktadan sonra kullanıcı her butona bastığında sonraki resim görüntülenecektir.
Eğer buraya kadar anlatılanlardan ufakta olsa anlam çıkarabildiyseniz işte şimdi JQuery dünyasına hoşgeldiniz diyor bir sonraki makalemizde görüşmek üzere hoşçakalın diyorum :)
Projeyi İndir
Önceki makalemizde JQuery Selectors konusunu öğrenmiş ve web sayfasındaki HTML nesnelerine nasıl erişebileceğimizi öğrenmiştik,bu makalemizde ise JQuery ile nesnelerin attribute (öznitelik) değerlerini okumanın yanı sıra değiştirebilmeyi öğreneceğiz.
Bildiğiniz gibi JQuery Javascript'ten türetilmiş çok kapsamlı bir kütüphanedir ve bu kütüphane sayesinde JQuery kodları yazmanın yanı sıra Javascript kodlarından da faydalanıyoruz.Dolayısıyla bu makalemizde biraz da Javascript kodları yazacağız.
Makalemizin temel konusu JQuery Attribute ile sayfa içerisindeki nesnelere erişerek özniteliklerini değiştirmek olacak ve bu konuyu çok daha rahat anlayabilmeniz için güzel bir örnek uygulayacağız.
Örnek projemiz JQuery ile resim galerisi yapmak olacak,bu küçük projede kullanıcı her butona bastığında ekrandaki resim değişecek.Tabi bunun için sayfa elementlerinde sadece img tagı ve bir adet HTML buton kullanacağız bu kadar basit yani :)
Şimdi Adobe Dreamweaver uygulamamızı açıp yeni bir HTML belgesi oluşturduktan sonra aşağıdaki gibi sayfamızı oluşturuyoruz:
Sayfamıza JQuery kütüphanesini sarı renkle gösterdikten sonra sayfamızı çalıştırıp tarayıcı görüntüsüne bakalım:
Şimdi Google görsellerden 400x400px boyutlarında 3 resim bulduktan sonra proje klasörümüze indirelim:
Resimlerimizi de tamamladıktan sonra artık javascript kodlarını yazmaya başlayabiliriz :)
Öncelikle Head tagı içerisinde kodlarımızı yazacağımız script tagı açıyoruz:
Document.Ready metodundan daha önce bahsetmiştik ve tekrar hatırlarsak web sayfasının tamamen yüklendiğinden
emin olmak ve JQuery kodlarının çalışacağını web tarayıcısına bildiriyoruz.
Script tagımızı açtıktan sonra ilk yapmamız gereken galerimizdeki resimleri bir yerde tutmamız olacak,tabi burada dosya anlamında değil dosyanın yolu anlamında olacak.Bu işlem için resimlerin yollarını bir Javascript dizisinde tutuyoruz:
Jquery'yi etkin bir şekilde kullanabilmek için Javascript'i orta seviye kadar bilmeniz gerektiğini daha
önce söylemiştim o yüzden Array (dizi) konusu size yabancı gelmemeli,geliyorsa da biraz Javascript öğrenmekte
fayda var :)
Artık resimleri bir noktada tuttuğumuza göre img tagımıza taşımaya geldi ancak galerimizi çalıştırabilmemiz için
öncelikle butona tıklanmasını sağlamak olacak,bunun için JQuery eventlerinden (olaylar) click eventini kullanmalıyız:
Eventler konusu için şimdilik kafanız karışmasın çünkü ilerleyen makalelerimizde JQuery eventlerini daha detaylı göreceğiz.
HTML butonumuzun tıklanma anını yakaladıktan sonra resimlerin yollarını img tagına verebiliriz ama hangisini?
Dizilerle ilgili bildiğimiz önemli bir kavram olan index olayını hatırlayalım: index ile bir dizideki hangi elemana ulaşabildiğimizi belirtiyorduk ve bu sayede dizi içerisindeki birden çok elemana sıralı ve düzenli bir şekilde
erişebiliyoruz.
Index olayının bu konumuzla olan ilgisi ise kullanıcı butona her bastığında dizi içerisindeki o andaki resimden bir sonraki resme geçişi sağlamak için kullanacağız yani kullanıcı her butona tıkladığında aynı resmi görmek yerine sırasıyla görecek ve son resme geldiğinde ise diziyi başa sararak (index değerini resetleyerek) ilk resme geri dönmesini sağlamak olacaktır.
Madem kullanıcı butona her tıkladığında index değeri değişecek o halde indexin butondan bağımsız olması gerekmektedir.
Bunu sağlamak için index isimli değişkeni butonun click eventi dışında yazmak olacak:
Indexin başlangıç değeri olarak sıfır vermemizin amacı kullanıcı butona ilk tıkladığında dizideki ilk resmi görmesini
sağlamak ve butona her tıklandığında ise index değeri 1 artmalı ki kullanıcı sonraki resmi görebilsin:
Eğer kullanıcı son resmi yani dizideki 2.indexte olan 3. resme bakıyorsa 4. resim olmayacağı için indexi başa sarmalıyız:
Index kavramıyla ilk başlarda kafanız karışabilir bunu doğal karşılayın çünkü ben index kavramını öğrenirken 3-4 gün
baya kafa patlatmıştım :)
Artık kullanıcının butona her tıkladığında hangi resimleri göreceğini ifade ettiğimize göre şimdi makalemizin ana konusu
olan attribute kavramına geri dönüyoruz.
Bir HTML nesnesini özniteliğini yakalamak ve değiştirmek için kullanılan attribute metodu iki şekilde kullanılır:
Nesnenin attribute değerini okurken:
$(secici).attr("öznitelik");
Nesnenin attribute değerini değiştirirken:
$(secici).attr("öznitelik","yeni_deger");
syntaxlarını kullanırız.
Örneğin img tagındaki o an gösterilen resmin yolunu yakalayalım:
Tabi bizim için önemli olan şu an hangi resim yolunun olduğu değil dizideki hangi resmin olduğudur,neyse bu konunun
kafanıza karıştırmasına izin vermiyorum ve konumuza devam edelim :)
Kullanıcı butona her tıkladığında resimler dizisindeki o anda gelecek resmi img tagının src attribute'ne verelim:
Görselde sarı renklerle gösterdiğim ilk satırda o an ki index değerinden gelen resmin yolunu "yuklenecekResim" isimli
bir değişkene attık ve ikinci satırda da img tagının src özniteliğine değer olarak verdik.Zaten projenin asıl can damarı
dediğimiz nokta bu iki satırdan ibarettir,eğer bu iki satırı kavrayabiliyorsanız olayı çözdünüz demektir :)
Projemizi çalıştıralım:
Peki kodlar nasıl çalışıyor diye tekrar gözden geçirelim:
Kod satırı sırasıyla:
9.satırda Document.Ready metodu ile Jquery kodlarının web tarayıcısında (browser) çalışmaya hazır olduğunu denetliyoruz,
12.satırda resimleri bir noktada tutmak için Array dizisi oluşturuyor 14,15 ve 16.satırlarda dizimize resimlerin yollarını veriyoruz,
18.satırda diziden gelecek resimlerin sıra değeri olarak sıfır veriyoruz ki kullanıcı butona tıkladığında ilk resim görüntülensin,
20.satırda kullanıcının butona tıklama anını yakalıyoruz,
25.satır aslında bilgi amaçlı,maksat attr metodu ile nesnedeki değere nasıl ulaşıldığını gösterebilmek,
27.satırda kullanıcı butona tıkladığında dizideki o an ki index değerine göre gelen resmin yolunu bir değişkene atıp 29.satırda bu değişkeni
img tagına src değeri olarak verdik,
31.satırda ise kullanıcı bir sonraki resmi görmeye hazır olabilsin diye index değerini 1 artırıyoruz,
33.satırda eğer kullanıcı son resmi görüntülüyorsa diziyi başa sarması için index değerini sıfıra döndürüyoruz,bunu yaparken dikkatli olmamız gerekiyor çünkü elimizde 3 resim olduğu için indexi 0 yaptık,eğer 3 yerine 2 yazsaydık kullanıcı son resmi görmeden tekrar başa dönecekti.
Bu noktadan sonra kullanıcı her butona bastığında sonraki resim görüntülenecektir.
Eğer buraya kadar anlatılanlardan ufakta olsa anlam çıkarabildiyseniz işte şimdi JQuery dünyasına hoşgeldiniz diyor bir sonraki makalemizde görüşmek üzere hoşçakalın diyorum :)
Projeyi İndir