Yazar: Tayfun Erbilen

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!');
}

Eşitse (==) ve Denkse (===) Arasındaki Farklar (JavaScript)

Bu derste sizlere eşitse ve denkse arasındaki farklardan bahsetmek istiyorum.. Aslnıda öyle çok aman aman fark yok ama olan farklarıda bilmek gerek ????

Konuyla ilgili örnekleri aşağıda paylaşıyorum, incelerseniz az çok anlayacaksınız zaten.

alert( 1 == "1" ); // true
alert( 1 === "1" ); // false - tipleri farklı (int, string)
alert( 0 == false ); // true
alert( 0 === false ); // false - tipleri farklı (int, bool)
alert( null == undefined ); // true
alert( null === undefined ); // false - tipleri farklı (obj, undef)
alert( new Date() === new Date() ); // false - obje olmasından kaynaklı

function test1(){ this.a = 'test'; }
var test1 = new test1();

function test2(){ this.a = 'test'; }
var test2 = new test2();

alert( test1 === test2 ); // false - obje olmasından kaynaklı
alert( test1.a === test2.a ) // true

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');

Özel radio ve checkbox Butonları Hazırlamak (css/jquery)

Çoğu zaman css’e döktüğümüz tasarımlarda özel radio ve checkbox butonları olmakta. Buda bizim işimizi zorlaştırmakta.. En azından bir çoğumuzun diyelim ???? Hal böyle olunca bu checkbox ve radio butonlarını nasıl özelleştirebiliriz, kendimize göre düzenleyebiliriz bunu sizlere göstermek istedim.. Yararlı olması dileğiyle..

Kaynak Dosyalar

İndirmek İçin Tıklayın

Düzeltme;

radio ve checkbox’ları bir arada kullanabilmek için label’lere class atamamız gerekiyor.. Label içinde checkbox varsa class’ı checkbox, radio ise class’ı radio yaptıktan sonra css dosyalarındaki kodlarıda buna göre düzenlerseniz sorun düzelecektir.. İndireceğiniz örnek dosyalarda ben bu işlemi yaptım, inceleyebilirsiniz.

Css’de gt ve lt seçicileri

Normal şartlarda jquery’de olan gt ve lt seçicileri css’de bulunmuyor.. Ancak css kullanarakta bu işlemleri yapmamız mümkün.. Bu yazımda sizlere bunu göstereceğim.

gt seçicisi

jQuery’de :gt() seçicisi girilen indis değerinden büyük indise sahip nesneleri seçmemizi sağlar.. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’ü hariç diğerlerine işlem yapmak istediğimizde şöyle bir kod uygularız;

$("ul li:gt(2)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/EjftH

Şimdi bunun aynısını css ile yapalım;

ul li:nth-of-type(3) ~ li {
  color: red
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/pBdGg

lt seçicisi

jQuery’de :lt() seçicisi girilen indis değerinden küçük indise sahip nesneleri seçmemizi sağlar. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’üne işlem yapmak için şöyle bir kod uygularız;

$("ul li:lt(3)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/Abdmp

Şimdi bunun aynısını css ile yapalım;

ul li {
  color: red
}
ul li:nth-of-type(3) ~ li {
  color: #000
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/bKtcH

Evet gördüğünüz gibi, css’de birazcık hile ile bu işlemleri yapabildik ???? Gerçi lt olayı tam anlamıyla sağlıklı çalışmıyor ama yinede ilerisi için ne olur bilinmez ????

Not: ~ ve :nth-of-type(n) seçicileri css3 seçicileri olduğu için sadece modern tarayıcılar desteklemektedir. Gerçi biraz araştırdım ~ ie7 ve üzeri destekliyormuş, onuda ekleyeyim ek olarak ????

JavaScript OnError ile Hata Bulma ve Loglama

Normal şartlarda oluşacak javascript hatalarını bulmak için bir çok yöntem var.. Örneğin firebug aracı ile console’dan hataları görmek gibi.. Ya da gelişmiş bir editör kullanıyorsanız (örn: dw) oda size anlık olarak oluşan javascript hatalarını gösterecektir.. Ancak yinede her ihtimale karşı oluşabilecek javascript hatalarını yakalayıp bunu loglamak en sağlıklısı olacaktır.. Olası durumlarda loglara bakılıp işlem yapılabilir.

window.onerror

onerror olay tutucusu ile hataları yakalayıp işlem yapabiliyoruz.. Örneğin;

<script type="text/javascript">
window.onerror = function(hata, url, hataSatiri){
    alert(url + " adresinde " + hataSatiri + ". satırda hata oluştu. Hata: " + hata);
}
</script>
<script type="text/javascript">
alert("deneme); // hatalı kod
</script>

Bu şekilde hatanın hangi dosyada hangi satırda olduğunu ve hatanın sebebini kolayca öğrenebiliriz.. Bu işlemi öğrenebildiğimize göre bunu post ettirip loglama işleminide kolayca yapabiliriz.. Bu işlem için aşağıdaki videoya göz atmalısınız.

CSS ile Dikey Ortalama

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.

Nasıl Yapacağız?

Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.

Hadi Yapalım

<!DOCTYPE>
<html>
<head>
	<title>css dikey ortalama</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.box {
		width: 500px;
		height: 300px;
		background: #111;
		color: #fff;
		display: table
	}
	.box p {
		display: table-cell;
		vertical-align: middle;
		text-align: center
	}
	</style>
</head>
<body>

<div class="box">
	<p>
		burası ortalanacak..
	</p>
</div>

</body>
</html>

Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..

IE7 ve alt sürümleri için fix

CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına #işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;

<div class="box">
	<p>
		<span>
			burası ortalanacak..
		</span>
	</p>
</div>

Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;

.box {
	width: 500px;
	height: 300px;
	background: #111;
	color: #fff;
	display: table;
	#position: relative
}
.box p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	#position: absolute;
	#top: 50%;
	#width: 100%
}
.box p span {
	#position: relative;
	#top: -50%
}

İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.

CSS’de Arkaplan Saydamlığı

Bildiğiniz gibi css’de nesneye opacity verdiğimizde, nesnenin içindekilerle birlikte saydamlığı değişiyor.. Ama genelde bize lazım olan, arkaplanın saydamlaşmasıdır.. Bunun için görsel oluşturmakta biraz mantıksızca.. Yine css kullanarak daha basit bir yol ile bu işlemi kolayca yapabiliriz..

Nasıl?

:before ile nesnenin öncesine boş bir içerik ekletip genişlik ve yükseklikdeğerlerini 100% yaptıktan sonra, position değerini absolute yapıp z konumunu -1 yapmalıyız.. Daha sonra nesne öncesine eklettiğimiz içeriğin kapsayıcı nesne içinde kalması için, kapsayıcı nesneye position relativedeğerini vermeliyiz.

Peki ya RGBA?

Normal şartlarda renk şeffaflığı için rgba kullanılabilir.
(Bkz: http://codepen.io/tayfunerbilen/pen/HLGif)
Ancak bu işlem sadece arkaplan rengi için değil, aynı zamanda arkaplan resmi ya da arkaplandaki herhangi bir şey için geçerli olduğundan, rgba bunun yerini tutmuyor ne yazık ki 🙂