Kategori: JavaScript

Ajax Hatalarını Bulmak

Bazen jquery’de ajax ile çalışırken hata yapıyoruz.. Özellikle json formatında geriye değer döndürmeye çalıştığımızda ve php dosyasında bir hata yaptığımızda hatanın nerede olduğunu bulamıyoruz.. En azından dosyayı açıp bakmadığımız sürece.. Bu gibi durumlarda ne yapmalı, hataları nasıl kolayca tespit edebilir ve giderebiliriz bu videoda bunları anlatmaya çalıştım..

Hex ve RGB Değerlerini Dönüştürme (JavaScript)

Bugün prototürk’ün yeni halini hazırlarken bir hex değerini rgb’ye dönüştürme ihtiyacı duydum.. Biraz araştırdıktan sonra bu işin o kadarda zor olmadığını anladım, bulduğum fonksiyonları sizlerle de paylaşmak istiyorum, eminim bir gün işinize yarar ????

RGB to HEX

Elinizde bulunan RGB değerini HEX değerine çevirmek için gerekli fonksiyon;

function hex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgb2hex(r, g, b) {
    return "#" + hex(r) + hex(g) + hex(b);
}

alert( rgb2hex(12, 47, 112) ); // #0c2f70

Sırasıyla Red, Green ve Blue değerlerini yazmanız yeterlidir.

HEX to RGB

Elinizde bulunan HEX değerini RGB değerine çevirmek için gerekli fonksiyon;

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

alert( hex2rgb('#0c2f70') ); // 12,47,112

İyi çalışmalar herkese.

jQuery Hedef Dışı Tıklama

Mevcut nesnemiz dışında herhangi bir yere tıklandığında bunu yakalayıp işlem yapmak için yani hedef dışı tıklamayı yakalamak için nasıl bir yol izleyeceğimizi bu derste sizlere anlatmaya çalıştım.. Yararlı olması dileğiyle..

İNDİR

Derste dosyalarına aşağıdaki bağlantıdan indirebilirsiniz;
http://yadi.sk/d/M988C-Vq4P518

jQuery ile Animasyonlu Sayfa Hazırlama

Köpeğim çomar ve arkadaşları için küçük bir sayfa hazırlamayı planlıyordum.. Ve bu sayfayı hazırlarken de dersini çekmeye karar verdim.. Derste yaptığımız şey, tam sayfa olmak üzere sayfalar arası animasyonlu geçiş.. Yararlı olması dileğiyle..

Sonradan Eklenenler;

Videoda kaldığı yerden devam etmeme hatası vardı.. Bunu aşağıdaki kod ile düzelttim;

/* otomatik olana gitsin */
setTimeout(function(){
	indis = Math.ceil( $('body').scrollTop() / $.height() );
	$('.solMenu ul li').removeClass('aktif').eq( indis ).addClass('aktif');
	$('body').scrollTop( $.height() * indis );
}, 100);

Ve ek olarakta klavye aşağı ve yukarı yön tuşlarını kullanarakta geçiş yaptırdım.. Onlar içinde aşağıdaki kodları kullandım;

/* klavye yön tuşları hareketi */
$.oynat = function(e){
	evt = e || window.event;
	if ( evt.keyCode == 40 || evt.keyCode == 38 ) $('.solMenu ul li').removeClass('aktif');
	/* Aşağı Yön Tuşu */
	if ( evt.keyCode == 40 ){
		if ( indis < $('.blok').length - 1 ) indis++;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
	/* Yukarı Yön Tuşu */
	else if ( evt.keyCode == 38 ){
		if ( indis > 0 ) indis--;
		$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
		$('html, body').stop().animate({
			scrollTop: $.height() * indis
		}, {
			duration: 1000
		});
	}
}

Tabi bu bir fonksiyon.. Body etiketine onkeydown=”$.oynat(event)” şeklinde olayı tanımladım.. Ve birde indis değişkenini genel tanımlayıp tıklamada ve klavye yön tuşlarında otomatik değerini değiştirdim ki nereden kaldıysa oradan devam edebilsin diye.. Kodları incelediğinizde zaten açık ve net görebilirsiniz.

İndir

http://yadi.sk/d/IgV9a6J74-dYm

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.