JS ve jQuery’de Girilen Değerleri Büyük/Küçük Yapmak

Anlık olarak kullanıcıdan aldığımız verilerde tamamı büyük ya da tamamı küçük olmasını isteyebiliriz. Bunu bir çok yolla yapabiliriz, ama daha kullanıcı girerken yapıyor olmamız bir avantaj.. Peki nasıl yapacağız?

Örneğin bir inputumuz olsun;

<input type="text" />

Bu input, keyup olduğunda bunu yakalayalım ve mevcut değerleri toUpperCase() ile büyütelim ve yeniden değerini yazdıralım.

$('input').keyup(function(){
    this.value = this.value.toUpperCase();
});

Ya da mesela büyütmek yerine küçültmek istersek bu seferde toLowerCase() işlemini uygulayacağız.

this.value = this.value.toLowerCase();

Hepsi bu kadar, bol kodlu günler.

 

Tayfun ERBİLEN JQuery 26.ders

 

Yirmi altıncı jQuery dersinde aşağıdakileri öğrendik;
– jQuery finish Metodu
– jQuery on – off Metodları
– jQuery :first-of-type Seçicisi

.finish()

Çalışan bir animasyonun işlemini tamamlayıp bitirmesini sağlar. Stop’a nazaran animasyonu durdurmaz, animasyonu bitirir.

:first-of-type

Her nesne için ilk elemanları seçer.

.on()

Nesneye olay atamamızı sağlar.

.off()

Nesneye ait olayları kaldırmamızı sağlar.

 

jQuery UI Varlık Kontrolü – Versiyon Öğrenme

jQuery UI kütüphanesinin olup olmadığını ve versiyonunu nasıl öğreneceğinizi merak ediyorsanız konuya göz atabilirsiniz..jQuery UI kütüphanesinin olup olmadığını ve versiyonunu nasıl öğreneceğinizi merak ediyorsanız aşağıdaki kodlar işinize yarayacaktır;

if ( $.ui ){
    alert('UI Kütüphanesi Mevcut!');
    alert('Versiyon: ' + $.ui.version );
}
else
{
    alert('UI Kütüphanesini Yükleyin!');
}

 

jQuery Versiyon Bulma

Mevcut jquery kütüphanesinin sürümünü bulmak istiyorsanız konuya bir göz atmanızda fayda var  Mevcut jquery kütüphanesinin sürümünü bulmak istiyorsanız aşağıdaki kodlar işinize yarayacaktır;

var versiyon = $().jquery;
alert( versiyon ); // 1.9.1

var versiyon = jQuery.fn.jquery;
alert( versiyon ); // 1.9.1

Canlı Önizleme;

 

jQuery Yazım Performansı #1

 

jQuery’de yaptığımız işlemlerin daha performanslı çalışması için farklı farklı yöntemler bulunmakta. Bende bu yöntemlerden bir tanesini sizlere göstereceğim.

Ayrıca birçok performans testi için;
http://jsperf.com/browse

Örnek;

// 136ms
console.time('test');
for ( i = 1; i <= 1000; i++ ){
	$('.box').text(i);
}
console.timeEnd('test');

// 99ms
console.time('test_cache');
var box = $('.box');
for ( i = 1; i <= 1000; i++ ){
	box.text(i);
}
console.timeEnd('test_cache');

Canlı Sonuçlar;

 

jQuery ile Facebook ve Twitter Bilgilerini Almak

Facebook sayfanızın ve twitter hesabınızın bilgilerini json formatında nasıl alabileceğinize bu yazıda değineceğim. Öncelikle facebook ve twitter json çıktısı veren adresleri aşağıdadır;

– Facebook;
http://graph.facebook.com/tayfunerbilen

– Twitter
http://api.twitter.com/1/users/show.json?screen_name=tayfunerbilen&callback=?

Facebook İçin Örnek;

Şimdi ilk olarak jquery $.getJSON() fonksiyonunu kullanarak facebook’a bağlanalım ve json bilgilerini alalım..

$.getJSON("http://graph.facebook.com/tayfunerbilen", function(veri){
	// bilgiler
});

Evet bu şekilde bağlanıp json değerlerine ulaşabiliriz.. Ama bilmemiz gereken, eğer sayfa ise şöyle bir çıktı verecektir bize;

{
   "about": "Web dillerine merak\u0131 sayesinde bir\u015feyler \u00f6\u011frenmi\u015f, ve merak eden di\u011fer insanlara bir\u015feyler \u00f6\u011fretmek i\u00e7in do\u011fmu\u015f hayali bir karakterdir.",
   "is_published": true,
   "location": {
      "street": "",
      "city": "Eskisehir",
      "state": "",
      "country": "Turkey",
      "zip": ""
   },
   "phone": "0541 749 57 44",
   "talking_about_count": 13,
   "username": "prototurkcom",
   "website": "http://www.prototurk.com",
   "were_here_count": 0,
   "category": "Fictional character",
   "id": "317224665035770",
   "name": "Protot\u00fcrk",
   "link": "https://www.facebook.com/prototurkcom",
   "likes": 464,
   "cover": {
      "cover_id": 376503862441183,
      "source": "http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/s720x720/534016_376503862441183_1950606480_n.png",
      "offset_y": 0
   }
}

Eğer kişi ise de şöyle bir çıktı;

{
   "id": "100001454838611",
   "name": "Tayfun Erbilen",
   "first_name": "Tayfun",
   "last_name": "Erbilen",
   "link": "https://www.facebook.com/tayfunerbilen",
   "username": "tayfunerbilen",
   "gender": "male",
   "locale": "tr_TR"
}

Bu bilgiler, facebook gizlilik ayarlarına göre değişkenlik gösterebilir.. Atıyorum biz sayfanın beğeni sayısını, sayfa adını, sayfa linkini ve sayfa kapak resmini alalım;

$.getJSON("http://graph.facebook.com/prototurkcom", function(veri){
	var sayfa_adi = veri.name;
	var sayfa_begeni = veri.likes;
	var sayfa_link = veri.link;
	var sayfa_cover = veri.cover.source;
});

Evet artık bu değişkenleri istediğiniz yerde kullanıp değerleri gösterebilirsiniz..

Örneği İncele

Twitter İçin Örnek;

Facebook için yaptığımız işlemin aynısıdır.. Sadece link ve alacağınız değerler değişiktir.. Örnek olarak biz ad-soyad, takipçi ve takip edilen sayısını alalım twitter hesabımızın..

$.getJSON("http://api.twitter.com/1/users/show.json?screen_name=tayfunerbilen&callback=?", function(veri){
	var adsoyad = veri.name;
	var takipci = veri.followers_count;
	var takip_edilen = veri.friends_count;
});

Evet bu değişkenleri de yine istediğiniz yerde kullanıp, bilgilerin gözükmesini sağlayabilirsiniz..

Örneği İncele

 

jQuery 1.9 ile Gelen Yenilikler

Bu yazımda jQuery 1.9 versiyonu ile gelen bazı yeni metodlardan ve eski metodlardaki güncellemelerden bahsedeceğim.

.css()
Bildiğiniz gibi css metodu içerisinde özellik adını yazıp o özelliğin değerine ulaşabiliyorduk. Artık 1.9 ile bu özellikleri dizi halinde tanımlayıp birden fazla özelliğin değerine tek seferde dizi olarak ulaşabiliyoruz.

 

.finish()
1.9 ile gelen ve animasyonları bitirmek için kullanılan bir metoddur. Çalışan hali hazırda animasyonu sonlandırmak için kullanılır. Yani bu metod uygulandığında animasyon işlemini tamamlamış olur, sıralı tüm animasyonlarda kaldırılır. Küçük bir örnek ile anlamak için;

 

:first-of-type
1.9 ile gelen ve benimde çok sevdiğim yeni bir filtre.. Örnek ile ne işe yaradığını açıklayayım.. Örneğin her div içerisinde ki ilk span’ı seçip işlem yapmak istiyorsunuz.. Bunu şu kodla yapmanız sadeece ilki için işe yarayacaktır;

$("div span:first")

Ancak :first yerine bu filtreyi kullandığınızda div nesnesini döngüye sokup ilk span nesnelerini seçip işlem yapıyor.. Yani sizi böyle güzel bir zahmetten kurtarıyor 

 

:last-of-type
:last filtresinin :first-of-type’ıdır  Yani ilk nesneyi döngüye sokarak 2. nesnenin sonuncularını seçip işlem yapmamızı sağlar. Yukarıdakinin tam tersidir kısaca.

 

:lang
1.9 ile gelen ve language niteliğine sahip nesneleri filtremek, seçmek için kullanılan filtre, seçicidir.

 

:nth-last-child()
1.9 ile gelen ve girilen nesnede son’dan x.ci nesneyi seçmemizi sağlayan filtre, metoddur.

 

:nth-last-of-type()
“nth-last-child” ile aynı sonucu veren farklı bir metod. Daha iyi kavramak için farklı bir örnek verelim;

$("div span:nth-last-of-type(2n + 1)")

Bu şekilde seçilen nesneler şu mantıkla seçilecek.. Önce 1.si seçilecek.. Daha sonra +2 eklenip 3.sü +2 eklenip 5.si +2 eklenip 7.si gibi seçilmeye devam edilecek.

 

:nth-of-type()
1.9 ile gelen ve seçilen nesne içerisinde gelen 2. nesneyi seçmeyi sağlar.. Bu tanım pek yeterli olmayabilir, şöyle örnek vereyim..
div’ler içerisinde spanların olduğunu düşünün.. örneğin span’dan sonra gelen nesne her ne ise onu seçmek istiyorsunuz. Ama sadece ilk span için bunu uygulamak istiyorsunuz. Ve eğer span var ama ondan sonra bir nesne yoksa işlem yapmamasını istiyorsunuz. İşte o zaman bu metodu kullanıyorsunuz 

 

 nly-of-type
1.9 ile gelen ve hiçbir kardeş öğesi bulunmayan nesneyi seçmemizi sağlar..

 

Not: 1.9 versiyonda kaldırılan metodlara bakmak için aşağıdaki linki kullanın;
http://jquery.com/upgrade-guide/1.9/#changes-of-note-in-jquery-1-9

Daha fazlası için;
http://api.jquery.com/category/version/1.9/

 

jQuery ile Animasyonlu Renk Geçişi

Bu dersimizde jquery ile arkaplan ve yazı renklerinde animasyonlu bir şekilde nasıl renk geçişi yapabileceğimizi öğreneceğiz.. Yararlı olması dileğiyle..

Demo: http://www.prototurk.com/demo/jquery-animation-background-color/index.html
İndir: http://yadi.sk/d/zUL8bmAy1Yktb

 

Tayfun ERBİLEN JQuery 25.ders

Yirmi beşinci jquery dersimizde aşağıdakileri öğrendik;
–  dd (tek) ve :even (çift) Seçicileri
– :gt ve :lt Seçicileri

 dd Seçicisi
Seçtiğimiz nesneyi odd ile seçtiğimizde, sadece indis değeri tek olan nesneleri seçecektir.. Yani;

$("ul li:odd").css("background","#eee");

Bu şekilde ul içindeki li’lerde indis değeri tek olanları seçip arka plan rengini değiştirecektir.

:even Seçicisi
odd’nin tam tersi olup, çift indis değeri olan nesneleri seçmemizi sağlar. Yani;

$("ul li:even").css("background","#ddd");

Bu şekilde ul içindeki li’lerde indis değeri çift olanları seçip arka plan rengini değiştirecektir.

:gt Seçicisi
Seçici içerisinde yazdığımız değerden büyük indisli nesneleri seçmemizi sağlar.

$("ul li:gt(3)").css("background","#ddd");

li’ler içerisinde indis değeri 3′ten büyük li’leri seçecektir.

:lt Seçicisi
Seçici içerisinde yazdığımız değerden küçük indisli nesneleri seçmemizi sağlar.

$("ul li:lt(3)").css("background","#ddd");

li’ler içerisinde indis değeri 3′ten küçük li’leri seçecektir.

 

Tayfun ERBİLEN JQuery 24.ders

Yirmi dördüncü jQuery dersimizde aşağıdakileri öğrendik;
– is() Metodu
– replaceWith() Metodu
– blur() Metodu