Fatih Hayrioğlu'nun not defteri » Javascript http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Javascript’te “null” ve “undefined” farkı http://www.fatihhayrioglu.com/javascript%e2%80%99te-%e2%80%9cnull%e2%80%9d-ve-%e2%80%9cundefined%e2%80%9d-farki/ http://www.fatihhayrioglu.com/javascript%e2%80%99te-%e2%80%9cnull%e2%80%9d-ve-%e2%80%9cundefined%e2%80%9d-farki/#comments Thu, 18 Aug 2011 12:19:58 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2249 Javascript diğer birçok dilden farklı olarak null ve undefined iki ayrı durum olarak kabul eder.

null; boş değer anlamına gelen özel bir değerdir. typeof null bize nesne döndürür.

<script>
var testDegiskeni = null;
alert(testDegiskeni); //null
alert(typeof testDegiskeni); //object
</script>

undefined değişken bildirilmiş ama henüz değeri atanmamış demektir.

<script>
var testDegiskeni;
alert(testDegiskeni); // undefined
alert(typeof testDegiskeni); //undefined
</script>

Yukarıdaki örneklerde gördüğümüz gibi null özel bir nesne iken undefined tip olarak undefiend döndürür.

Atanmamış değişkenlerin değeri javascript tarafında otomatik olarak undefined olarak atanır.

Javascript asla null değeri atamaz. Eğer bir elemanın değeri null ise bu javascript tarafından değil, program tarafından atanmış demektir.

undefined ve null kontrolü

if(typeof(test) !== 'undefined' && test != null) {
    //test değişkenin kullanabiliriz
}

Kaynak

]]> http://www.fatihhayrioglu.com/javascript%e2%80%99te-%e2%80%9cnull%e2%80%9d-ve-%e2%80%9cundefined%e2%80%9d-farki/feed/ 2 jquery 1.3.2 sürümünde check ve radio change olayı sorunu ve çözümü http://www.fatihhayrioglu.com/jquery-1-3-2-surumunde-check-ve-radio-change-olayi-sorunu-ve-cozumu/ http://www.fatihhayrioglu.com/jquery-1-3-2-surumunde-check-ve-radio-change-olayi-sorunu-ve-cozumu/#comments Tue, 05 Jul 2011 17:48:07 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2145 jQuery biz arayüz geliştiriciler için çok büyük bir yardımcı. Devamlı güncellenen jquery kütüphanesi bazı geniş çaplı sitelerde yeni sürüme geçmek o kadarda kolay olmuyor. Burada yaşadığımız sorun eski sürüm jquery kütüphanesinin bir problemine kütüphane güncellemeden çözüm üretmek olacak.

Sorun şu; chackbox veya radio butonlara atanan change olayının işlememesi, daha doğrusu ilk tıklamada değil ikinci tıklamada çalışması ve bu sorunun sadece Internet Explorer sürümlerinde(6,7,8) meydana gelmesi.

Çözüm için yapmamız gerekn çok basit

$("#fatih").click(function() { this.blur(); });

Aslında yaptığımız input alanından focus’u kaldırmak oldu. Evet belki pek işinize yaramıyacak ama benim gibi çok arayan bir kişi buradan yararlansa yeter.

Kaynak

]]> http://www.fatihhayrioglu.com/jquery-1-3-2-surumunde-check-ve-radio-change-olayi-sorunu-ve-cozumu/feed/ 0 Googe Chrome 12 ile birlikte gelen güzel bir özellik(Built-in de-obfuscation) http://www.fatihhayrioglu.com/googe-chrome-12-ile-birlikte-gelen-guzel-bir-ozellikbuilt-in-de-obfuscation/ http://www.fatihhayrioglu.com/googe-chrome-12-ile-birlikte-gelen-guzel-bir-ozellikbuilt-in-de-obfuscation/#comments Wed, 22 Jun 2011 17:31:46 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2128 Javascript kodlarının daha hızlı yüklenmesi, dosya boyutunun azaltılması için ve kodları kopyala-yapıştır ile kolayca almak isteyenler engellemek için javascript kodlarını sıkıştırırız.

Evet güzel bu özelliklerin her biri güzel ancak bir sorun olduğunda kodu göremiyoruz. Chrome yeni sürümünde güzel bir özellik getirmiş. “Sıkıştırmayı geri al” diye Türkçe’ye çevirebileceğim bir özellik ile tek tıkla kodu anlaşılabilir bir hale getirebiliyoruz.

Değişken isimlerini kısa göstermesi gibi küçük bir sorun dışında gayet başarılı bir özellik olmuş.

Yeni sürümlerde ikon olarak eklenmiş.

]]> http://www.fatihhayrioglu.com/googe-chrome-12-ile-birlikte-gelen-guzel-bir-ozellikbuilt-in-de-obfuscation/feed/ 3 Jquery holdReady() fonksiyonu http://www.fatihhayrioglu.com/jquery-holdready-fonksiyonu/ http://www.fatihhayrioglu.com/jquery-holdready-fonksiyonu/#comments Tue, 10 May 2011 20:24:26 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2096 Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir. 

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

Örneği görmek için tıklayınız.

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar

]]> http://www.fatihhayrioglu.com/jquery-holdready-fonksiyonu/feed/ 4 HTML Dokümanında Javascript Dosyalarını Nereye Koymalıyız? http://www.fatihhayrioglu.com/html-dokumaninda-javascript-dosyalarini-nereye-koymaliyiz/ http://www.fatihhayrioglu.com/html-dokumaninda-javascript-dosyalarini-nereye-koymaliyiz/#comments Wed, 23 Mar 2011 22:09:58 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2074 Javascript’i web sitelerine eklemek

Javascript dosyaları bir web sitesine iki şekilde eklenir. Birincisi satıriçi(inline), ikincisi ayrı bir javascript dosyası hazırlayıp harici olarak eklemek.

İlk javascript’i Hakkı Öcal’ın javascript kitapçığından öğrenmeye başlamıştım.

İlk örnek şöyle idi;

<html>
<head>
<title>Merhaba Dünya!</title>
<script>
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert ("Merhaba Dünya!") //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
</script>
</head>
<body>
<b>Merhaba Dünya</b><br>
<form>
<button onclick=merhaba()>TIKLAYINI!</button>
</form>
</body>
<html>

Bu satıriçi kodlamaya örnek olarak verilebilir.

Aynı kodu ayrı bir javascript dosyası olarak hazırlayıp .js uzantısı ile kaydedersek ve bunu html dokümana eklersek buda harici bir javascript dosyası ekleme kısmına girer. 

function merhaba()
{
alert ("Merhaba Dünya! Sene 2011")
}

Bu dosyayı merhaba.js olarak kaydedip, sonra

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Merhaba Dünya!</title>
<script src="merhaba.js">
</script>
</head>
<bodyY>
<b>Merhaba Dünya</b><br>
<form>
<input type="submit" name="button1" value="TIKLAYIN!" onclick="merhaba()">
</form>
</body>
</html>

Şeklinde HTML dokümanına ekleriz.

Yukarıda kullandığımız her iki yöntem ile de aynı sonucu alırız. Harici javascript dosyası ile eklemenin avantajları vardır;

  • Bir dosya ile tüm sitedeki javascript dosyalarını idare ederiz ve güncellemeleri tek dosya ile daha kolay yaparız.
  • Sayfa daha hızlı yüklenir, tek dosya ön belleğe alınınca diğer sayfalarda tekrar tekrar yüklenmediği için sayfalar daha hızlı açılır.

Javascript o günden bu yana daha fazla önem kazandı ve artık javascript kodumuzu en iyi hale getirmek için daha çok zaman harcıyoruz ve bize zaman kazandıracak her durumu inceleyip uyguluyoruz.

HTML dokümanında javascript dosyasını nereye eklemeliyiz?

Web sitelerinin en iyi hale getirmek için çeşitli araçlar ile sitemizi test ederiz. Bunlardan biri Firefox’ın YSlow eklentisidir. YSlow eklentisi ile web sitemizi test ettiğimizde javascript dosyalarımızı html dokümanının sonuna eklememizi öneren bir başlık ile karşılaşırız, burada bu başlığı biraz inceleyeceğiz.

CSS dosyalarının <head> içine konmasının öneren YSlow Javascript dosyalarının HTML dokümanının sonuna(</body>’nin hemen öncesine) konmasını öneriyor. Burada bir çelişki var gibi görünüyor. Buradaki mantık şudur; javascript blokları <head> içine konduğu zaman sayfa ilk açıldığında bu javascript blokları yüklenir ve işlenir. Javascript dosyası yüklenip, işlendikten sonra diğer sayfa üyeleri yüklenir. Javascript dosyası yüklenip işlenmesi bitene kadar sayfa boş bir sayfa olarak görünür, tabi buda istenen bir durum değildir. 

<html>
<head>
<title>Javascript yükleme yeri</title>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<p>İçerik Burada</p>
</body>
</html>

Sayfa başına konan javascript dosyalarının yüklenme zamanı aşağıdaki grafikte görüldüğü gibidir

Javascript dosyalarını html dokümanın sonuna koyunca sayfa öğeleri tamamen yüklenecek ve sonra javascript dosyaları yüklenecek ve işlenecektir. Böylece ziyaretçi sayfayı açtığı anda görsel öğeler yüklenecek ve ziyaretçi sayfa içeriğini görecektir ve sonra javascript yüklenecek ve işlenecektir.

Paralel Yükleme

Bir diğer problem ise javascript dosyaları paralel yüklemeyi bloklar. Paralel yükelemeyi şöyle açıklayabiliriz; web sitemiz yüklenirken her öğe tek tek yüklemek yerine iki ve daha fazla yükleme, yani paralel olarak yükleme yapabiliyoruz. HTTP/1.1 şartnamesinde her barındırma servisinden(hositng) iki paralel yüklemeye izin verir, buradan şunuda anlayabiliriz ki farklı barındırma servislerinden ikiden fazla yükleme yapabiliriz. Ancak script dosyaları yüklenirken pararlel yüklemeye izin vermez. Bu durumu göz önünde bulundurarak script dosyalarımızı dokümanın sonuna koyarak sayfamızın daha hızlı yüklenmesini sağlayabiliriz.

Uygulanamayan Durumlar

Bazı durumlarda script dosyasını dokümanın altına koymamız mümkün olmaz. Örneğin script içinde documen.write ile doküman içine bir şey eklememiz gerektiğinde. Ancak bu durumlar içinde bazı çözümlerin olduğu aklımızın bir köşesinde kalsın.

defer Özelliği

HTML4 ile birlikte <script> etiketi içine defer özelliği eklenmiştir. defer özelliği tanımlanmış script dosyaları hemen uygulanmayıp tüm sayfa yüklendikten sonra yüklenir ve çalıştırılır. Bu özelliği İnternet Explorer 4+ ve Firefox3.5+ desteklemektedir. 

<script type="text/javascript" src="script1.js" defer></script>

şeklinde kullanılır. Bu dosyayı html dokümanının istediğimiz yerine koyabiliriz. Tüm tarayıcıların desteklmemesi kullanımı konusunda bizi biraz düşündürüyor.

Sonuç

Sonuç olarak javascript dosyalarımızı html dokümanımız sonuna koymak web sitelerimizin daha hızlı açılmasını sağlayacak bir yöntemdir.

Kaynak

]]> http://www.fatihhayrioglu.com/html-dokumaninda-javascript-dosyalarini-nereye-koymaliyiz/feed/ 19 Jquery Geliştiricileri için Güzel Bir FireBug Eklentisi FireQuery http://www.fatihhayrioglu.com/jquery-gelistiricileri-icin-guzel-bir-firebug-eklentisi-firequery/ http://www.fatihhayrioglu.com/jquery-gelistiricileri-icin-guzel-bir-firebug-eklentisi-firequery/#comments Wed, 12 Jan 2011 22:12:09 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1987 Firefox’un eklentisi FireBug’ı bilmeyeniniz yoktur. FireBug öyle büyük bir eklenti ki onun üzerine kurulan birçok eklentiler var. Bu eklentide FireBug yeteneklerini geliştirmek için kullanılan bir eklenti.

Bu eklenti jQuery ile kod yazarken çok işimize yarayacak. Bu eklenti sayesinde FireBug’ın CSS yeteneklerine yakın bir çözümü jQuery üzerinde sağlayacağız. FireBug bize CSS açısından belirlediğimiz nesneye uygulanan css özelliklerini yakalama ve hangi css dosyasının hangi satırında olduğu gösterir. Benzer bir özelliği FireQuery bize sağlar.

Bu eklentide jQuery ile etkilediğimiz elemanlar hakkında benzer bir bilgi veriyor bize. Jquery ile etkilenen elemana hangi işlev ile etki yaptığımızı ve hangi fonksiyon ve kod ile etki ettiğimiz gösteriyor.

jQuery bulunmayan sayfalarda da jquery kütüphanesini ekliyor. Böylelikle her sitede FireBug özelliklerini jQuery yardımı ile kullanma imkanı sunuyor bize.

jQuery Data verileri Gösterir

Eklentiyi kurduktan sonra Firebug’ı açarız ve HTML sekmesine geliriz. Aşağıdaki bir pencere ile karşılaşırız.

jQuery data kullanarak web sitesine gömdüğümüz verileri gösterir bize. Bu durum dinamik olarak eklediğimiz jQuery verilerini kontrol ederken çok işimize yarar.

Bir Elemana Atanmış Fonksiyonları Gösterir

Test sayfasında h1 elemanına tanımlana aşağıdaki fonksiyon kodunu görüyoruz.

$('h1').bind('click', function() {
$(this).css('background-color', '#fee');
});

Bu tanımı FireBug HTML sekmesinde FireQuery yardımı ile aşağıdaki gibi görürüz.

Bir elemana tanımlanmış fonksiyonları bulmaya yarar. Süper bir özelliktir bu. Tanımlana fonksiyon konsolda yukarıdaki gibi görünür.

function() üzerine geldiğimizde bu elemena atama yapılan kodu ve satır numarasını gösterir. Bu bizi birçok yükten kurtaran süper bir özelliktir.

jQuery Olmayan Sitelere jQuery Ekleme Özelliği

Bir sitede jQuery kütüphanesi olmasa da bu eklenti etkin olduğu tarayıcılarda jQuery eklenmiş gibi olur. Bu sayede site üzerinde jQuery kolaylıklarını uygular ve sonuçlarını görebiliriz.

Bu sayede Konsolda jQuery kolaylıklarını kullanarak jquery eklenmemiş olsa da bu sitede jQuery varmış gibi rahat kod yazabiliriz.

Bu eklentiyi bana gösteren Orhan Ekici’ye ve ona gösteren Volkan Özçelik’e teşekkürler.

FireBug büyüksün.

Kaynaklar

]]> http://www.fatihhayrioglu.com/jquery-gelistiricileri-icin-guzel-bir-firebug-eklentisi-firequery/feed/ 2 jquery ipuçları – 4 http://www.fatihhayrioglu.com/jquery-ipuclari-4/ http://www.fatihhayrioglu.com/jquery-ipuclari-4/#comments Tue, 26 Oct 2010 21:04:05 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1924 Jquery ipuçları – 1
Jquery ipuçları – 2
Jquery ipuçları – 3

1 – Mümkünse Class yerine Id kullanmayı tercih edin

jQuery ile kod yazarken bize çok büyük kolaylıklar kazandırır. Bunlardan bir tanesi elemana atanmış sınıfı yardımı ile kolayca seçebilme özelliğidir, ancak burada şöyle bir durum söz konusudur; jquery id ile atanmış elemanları normal javascriptteki gibi getElementById ile yakaladığı için daha hızlı çalışırken normal olarak sınıf ile yakalamalarda daha yavaş çalışacaktır.

Bu nedenle mümkün olduğunca seçicilerde id kullanmaya dikkat edilmelidir. Tabi bazı durumlarda sınıf kullanmak zorunda kalabiliriz o başka.


kaynak: net.tutsplus.com

2 – next() ve prev() kullanımı

Bu özelliklerin kullanımı bazen can kurtarıyor ancak kullanırken dikkat etmek lazım, bazende sorunlara yol açabiliyor. Sonradan eklediğiniz bir eleman sizin next ve prev kabullerinizi mahvedebiliyor

next() : next fonksiyonu bir sonraki elemanı yakalar. Sadece sonraki elemanı yakalar alt elemanlarını yakalamaz.

next fonksiyonu filtreleme özelliği vardır, yani next(‘li.secili’) tanımı ile en yakın bir sonraki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').next().css('border-bottom', '1px solid #999');

next() fonksiyonu yardımı ile bir sonraki elemanı yakalayabiliriz.

prev() : prev fonksiyonu bir önceki elemanı yakalar. Sadece önceki elemanı yakalar alt elemanlarını yakalamaz.

prev fonksiyonu filtreleme özelliği vardır, yani prev(‘li.secili’) tanımı ile en yakın bir onceki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').prev().css('border-bottom', '1px solid #999');

prev() fonksiyonu yardımı ile bir önceki elemanı yakalayabiliriz.

3 – Üst Eleman Bulma – parent(), parents() ve closest()

parent()

Bir üst elemanı bulma. Geriye bir adet üst eleman döndürür. 

    $('td.secili').parent().css('border-bottom', '#999');
    $('div').parent('.large').css('font-size', '14px');

İlk kod üst elemanı yakalarken, ikinci satırda ise seçme işlemini biraz daha daraltarak .large sınıfı tanımlı olan üst  elmanı yakala diyoruz.

parents()

Belirlenen elemanın tüm üst elemanlarını bulmaya yarar.

    $('li').parents().css('background-color', 'red');
    $('li').parents(&quot;ul&quot;).css('background-color', 'red');

İlk satır li’nin tüm üst elemanlarını yakalarken, ikinci satır li’nin tüm ul etiketli üst elemanlarını yakalar.

closest()

En yakın üst elemanı bulmak içindir. 

  $(document).ready(function()
    {
    $('li.urunler').closest('ul').css('background-color', 'red');
  });

HTML

<ul>
    <li>Üst Menü
        <ul>
        <li class="urunler">Ürün 1</li>
        <li class="urunler">Ürün 2</li>
        </ul>
    </li>
</ul>

İçiçe girmiş birçok listede yukarıdaki tanım ‘urunler’ sınıfı tanımlanmış öğenin ilk üst ul elemanını yakalamamıza yardım eder.

4 – Firebug ve console.log ile kodumuzu izlemek

Firebug’ın çalışma hayatımızdaki yerini biliyoruz. jquery ile hata yakalama amacı ile console.log kullanıyoruz. Daha önceleri javascript ile kod yazarken alert fonksiyonun çok kullanırdım. Şimdi aynı işi console.log yapıyor ancak popup çıkarıp bizi rahatsız etmiyor.

  var count = 0;
    while(count < 1000) {
    count++;
    console.log(count);
    setTimeout("takistHesapla";, 1000);
  }

yazın ve Firebug’ın console sekmesine bakın. Bu kod Chrome’da da çalışıyor.

Örneği görmek için tıklayınız. Tabi takistHesapla diye bieşy bulamadım diye size bin tane hata verecek oda gayet normal.

Bir uyarı işinizi yayına atarken bu satırı silin yoksa ie’de hata verir.

5 – Animasyon ve Efektleri Geciktirme (delay)

jQuery 1.4 ile birlikte gelen yeni bir özellik olan delay() animasyonlarımıza belli bir süre ara vermemizi sağlat, daha önceleri bu işi yapmak için setTimeout metodunu kullanıyorduk. 

$("div").fadeIn().delay(4000).fadeOut();

Örneği görmek için tıklayınız.

seçtiğimiz katmana fadeIn efekti ver ve sonra 4000 milisaniye bekle ve sonra fadeOut efekti ver diyoruz.

6 – has() Metodu

jQuery 1.4 ile birlikte gelen bir başka yeni özellik has() metodudur. Daha önceki sürümlerde :has seçicisi vardı, şimdi has() metodu ile daha kolay yakalama işi yapabileceğiz. 

<ul>
<li>list item 1</li>
<li>list item 2
    <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
    </ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Yukarıdaki kodda alt menüsü olan li elemanını yakalamak için bu metodu kullanabiliriz.

$('li').has('ul').css('background-color', 'red');

Örneği görmek için tıklayınız.

Şeklinde altında ul etiketi olan li’leri ki burada bir tane var oda list item 2 içeriğine sahip olandır.

Kaynaklar

]]> http://www.fatihhayrioglu.com/jquery-ipuclari-4/feed/ 7 Önden Resimleri(Preloading images) Yükleme Yöntemleri http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/ http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/#comments Fri, 27 Aug 2010 20:44:19 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1822 Web sitelerimizi hızlandırmak için çeşitli yöntemler ve metotlar deneriz. Amacımız kullanıcıya daha hızlı cevap vermektir. Bunlardan bir tanesi önden resimleri kullanıcı bilgisayarına yükletip sonra açılacak sayfaların hızlı açılmasını sağlamak gibi bir amacımız olduğu durumlardır. Rollover resimleri, araç ipucu(tooltip), background resimleri vb. resimleri önceden yükletmek bize hem sayfa ilk açıldığında kötü görüntüyü engellememizi sağlar hemde kullanıcıya daha sonraki tercihlerinde daha hızlı cevap vermemizi sağlar.

Ben genelde daha önce kullanmadığım metotları kullanmadan önce bir araştırma yaparım ve sonuçta bana göre iyi olan yöntemi uygularım. Web ajanslarında çalışırken bu araştırmayı kısa tutmam gerekirken tek bir proje geliştirirken bu iş için daha uzun zamanımız oluyor.

Bu işi çin CSS, javascript ve ajax ile çözümler mevcut.

Ben bu yöntemlerden javascript yöntemi ile yapmayı tercih ettim. Diğer yöntemler hakkında genel bir bilgi verip geçeceğim.

CSS Yöntemleri

CSS Sprite yöntemide bu kategoriye girer.

CSS yöntemleri genelde sayfa içine konulan resimlerin tarayıcı görüntüsünden kaçırılması ile yapılan yöntemlerdir ki işin bu kısmı benim hoşuma gitmiyor.

CSS ile bu işi yapan bir örnek verelim. 

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px;
   top: -9999px;
   height: 1px;
   width: 1px;
}

HTML kodu

<div id="preloaded-images">
 <img src="http://deneme.com/image-01.png" width="1" height="1" alt="Image 01" />
 <img src="http://deneme.com/image-02.png" width="1" height="1" alt="Image 02" />
 <img src="http://deneme.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Yukarıda görüldüğü gibi html içine eklenen resimler CSS yardımı ile kullanıcının göremeyeceği bölgelere itilmiştir. Bu şekilde bir çözüm üretilmiştir.

Javascript Yöntemleri

Javascript ile yapılan yöntemlerin genel yapısı bir sıraya sokulan resimler dinamik olarak doküman içine eklenir.

Javascript ile bu işlemi yapan çeşitli kodlar var. Benim uyguladığım ise aşağıdaki koddur. Bu kodun diğerlerine göre avantajı yükleme yaptığımız sayfanın yüklenmesi bittikten sonra bizim önden yükleme yaptığımız resimleri yüklemesidir. 

function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
    if (oldonload) {
      oldonload();
    }
    func();
    }
  }
}
addLoadEvent(preloader);

Yukarıdaki javascript kodu işimizi görecektir.

jQuery ile daha kısa ve basit bir kod ile bu işi yapabiliriz.

// resim onyükleme fonksiyonu
 jQuery.preloadImages = function()
 {
   for(var i = 0; i<arguments.length; i++)
   {
   jQuery("<img>").attr("src", arguments[i]);
   }
 };

// yükleme yap
 $.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

Yukarıdaki kodu yazınca yükleme yaptığımız sayfadaki öğeler yüklenirken yükleme yaptığımız resimlerde yüklenir. Bu benim istediğim bir durum değildir. Bence yükleme yapılacak sayfanın öğeleri yüklendikten sonra yüklenecek resimler yüklenmelidir. Kullanıcı ilk önce mevcut sayfayı tam görmelidir, sonra kullanıcıya göstermeden diğer sayfa resimlerini yüklemeliyiz.

Bunun için kodumuzu aşağıdaki değiştirmeliyiz.

 $(document).ready(function() {
 $(window).bind('load', function()
 {

   // resim onyükleme fonksiyonu
   jQuery.preloadImages = function()
   {
   for(var i = 0; i<arguments.length; i++)
   {
     jQuery("<img>").attr("src", arguments[i]);
   }
   };

   // yükleme yap
   $.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

 });
});

Eklediğimiz sadece $(window).bind(‘load’ function()) kısmıdır. Burada sayfa yüklendikten sonra bu işlemi yap diyoruz.

Örneği görmek için tıklayınız.

Örneklerde dikkatiniz bir yere çekmek istiyorum. Firebug Net sekmesini açtım çünkü sayfa yüklenmesi anını görmenizi istedim. İlk resimde sayfa yüklenirken sonradan görüntüleyeceğimiz resimleride içeren bir durum söz konusu idi. Dikkat ederseniz ilk reismde dikey kırmızı çizgi en sondadır. İkinci resimde ise kırmızı dikey çizgi sayfa öğelerini sonuncusu olan resimden sonra çizilmiştir, daha sonra yükleme yapılan resimler yüklenmiştir.

Sonuç

Ben küçük bir araştırma sonucunda bu kodu kullanmayı uygun buldum. Bulduğum bu kodun kendimce gerekçelerini yukarıda açıklamaya çalıştım, eğer sizlerin daha iyi çözümleri ve önerileri varsa yorum kısmında bizlerle paylaşırsanız sevinirim.

Kalın sağlıacakla

Kaynaklar

]]> http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/feed/ 10 jQuery ipuçları – 3 http://www.fatihhayrioglu.com/jquery-ipuclari-3/ http://www.fatihhayrioglu.com/jquery-ipuclari-3/#comments Wed, 30 Jun 2010 22:10:35 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1785 Jquery ipuçları – 1
Jquery ipuçları – 2

jQuery ipuçlarını yayınlamaya devam ediyorum.

1- Dinamik oluşturulan elementlere live() ile olay atama

Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.

$('a.acilSusam').live('mouseover', function() {
 // yapilacak islemler
});

2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak

Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.

function pencereBoyutuDegisti() {
	alert("Değişti");
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});

3 – Element miktarını bulmak

Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;

	$('element').size();

4 – Bir elemanın index değerini bulmak

index değerini bulmanın farklı bir yolu 

$("ul > li").click(function () {
	var index = $(this).prevAll().length;
});

5- Bir elemanın görünür olup olmadığını yakalamak

if($(".eleman").is(":visible")) {
    alert('Burda');
}

6- Kaç tane alt elemanı(çocuk elemanı) var

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length

7- jQuery Kopya Kağıdı(Cheat Sheet)

jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.

http://www.futurecolors.ru/jquery/

Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)

8 – Select Elemanı ipuçları

// secili olan ögenin metnini almak
$("#myselect option:selected").text();

// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();

// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));

// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");

Kaynaklar

]]> http://www.fatihhayrioglu.com/jquery-ipuclari-3/feed/ 9 FireBug Net Sekmesi ve Kullanımı http://www.fatihhayrioglu.com/firebug-net-sekmesi-ve-kullanimi/ http://www.fatihhayrioglu.com/firebug-net-sekmesi-ve-kullanimi/#comments Wed, 26 May 2010 21:36:01 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1737 FireBug hakkında elle tutulur bir bilgi olmadığı için bu makaleyi yazmaya karar verdim. Bu yazımda FireBug Net paneli hakkında olacaktır. FireBug geliştirme ile alakalı bir makale değildir. Özellikleri hakkında genel bir bilgi içerecektir.

Web sayfalarının kodlarken bir çok yönünü düşünerek kodlarız. Erişebilirliği, esneklik, farklı tarayıcılara uyumlu olması, performans bunlardan ilk aklımıza gelenler. En önemlilerinden biri performansının iyi olmasıdır. Web sitesi sahipleri sitelerinin tarayıcılar tarafından hızlı gezilmesi için en kısa zamanda açılmasını sağlamak için uğraşır. Performans değerlendirmesi için kullanabileceğimiz araçlardan birisi Firebug’ın Net panelidir. Burada Firebug’ın Net sekmesini inceleyeceğiz. Aşağıda benim anasayfamın net panelindeki görüntüsünü görüyorsunuz.

Genel Net sekmesi görünümü

Net Panel Giriş

Net sekmesinin genel amacı kullanıcıya HTTP trafiğini kolayca göstermektir. Her satır sayfayı oluşturan bir girdinin istek/cevabını gösteren bir göstergedir.

Örnek bir sayfa ile devam edelim.

http://fatihhayrioglu.com/dokumanlar/fare_degisen_resim.html

Yukarıdaki resimde sunucuya yapılan iki isteğin sıralaması ile birlikte göstermektedir. İlk istek sayfanın kendisi, ikinci istek ise degisen_resim.gif resmi.

Her girdi istek hakkında genel bir bilgiyi gösterir. Zaman çizelgeside grafiksel olarak yüklenme zamanını gösteriyor.

Net sekmesi bize fare_degisen_resim_klavye.html içeriğinin 418ms de yüklendiğini ve degisen_resim.gif resmininde 146ms de yüklendiğini gösteriyor.

Net sekmesi bize ilk bakışta aşağıdaki bilgileri verir;

  • HTTP istek metodunu (GET)
  • Cevap durumu ve açıklaması (200 OK)
  • İstem dosya ismini(fare_degisen_resim_klavye.html) ve fare imlecini üzerine getirirsek hangi adresten çektiğini gösterir.
  • Cevapların hangi barındırma hizmetinde geldiği (fatihhayrioglu.com)
  • Cevabın boyutu (778Byte)
  • Grafiksel gösterge ve yüklenme zamanı (418ms)

Birde en sondaki sonuç bilgi satırı var.

  • Sayfada 2 adet istek yapıldı
  • Bu 2 isteğin toplam boyutu 3kb ve eğer önbellekten alıyorsa ne kadarını önbellekten alıyor bilgisi.
  • Bu 2 isteğin ne kadar zamanda yüklendiği(son isteğin sonu ile ilk isteğin başı arasındaki zaman)

Her bir elemanın üzerine gelince popup ekranı ile bize daha detaylı bilgi veriyor. Her rengin bir anlamı var.

DNS Lookup: DNS çözümleme zamanı
connecting: Oluşturulan TCP bağlantısı için harcanan zaman
Blocking: Ağa bağlanırken tarayıcı bu istekleri belli bir sıraya dizer. Bu sırada beklerken harcadığı zaman. Eğer böyle bir zaman harcanıyorsa gösterilir, yoksa gösterilmez. Aşağıda bu konuya(Tarayıcı Sırasında Bekleme Zamanı) biraz daha ayrıntılı değineceğiz.
Sending: Sunucuya gönderilecek veri için istek gönderme zamanı
Waiting: Sunucudan dönen cevabın bekleme zamanı(sunucudan gelen ilk byte’ın bekleme zamanı)
Receiving: Gelen cevabın indirilmesi için gereken zaman.

DOMContenLoaded:(Mavi dikey çizgi) ilk istek başladıktan +5.48s sonra DOM içeriğinin yüklenme olayı tetiklendi, anlamını taşıyor. Eğer bu değer eksi ise DOM içeriği istek başlamadan önce gönderilmiş demektir.

load:(kırmızı dikey çizgi) Bu gösterge bize yüklenme olayının ilk istek başladıktan sonra geçen süreyi gösterir. Eksi değer alması ilk istekden önce tetiklendiğini gösterir.

Tarayıcı Sırasında Bekleme Zamanı

İsteğin sunucuya gönderilmeden önce tarayıcı sırasında beklemesi sonucu iki durum orataya çıkar. Bu durumları biraz açarsak;

  • Bir web sayfasında iki adet javascript dosyası varsa bunlar aynı anda yüklenmez. İlk önce birisi yüklenir daha sonra ikincisi yüklenir. Bu nedenle mümkünse javascript dosyalarını teke indirmek bize zaman kazandıracaktır.
  • Her tarayıcının aynı anda sunucudan(her bir domain için) yapacağı istek sayısı sınırlıdır. Mesela bu sayı Firefox 3 için 6′dır. Yani bunun anlamı eğer sunucudan yapılacak istek sayısı 6′yı geçerse, altıncıdan sonrası ilk altının yüklenmesini beklemek durumunda kalacaktır. Bu nedenle CSS Sprite tekniği kullanımı önemlidir.

Net Sekmesi İstek ve Cevap Detayları

Her isteğin solundaki artı(+) işaretine tıklayarak daha ayrıntılı bilgi alabiliriz. Burada önemli bir noktayı açıklayalım: request sunucuya gönderimi response geri geleni gösterir. Eğer gösterilen öğe sunucudan veya ön bellekten geliyorsa bir adet request ve response görünecektir.

Açılan alandaki sekmeler ve anlamları;

  • Headers: HTTP istek ve cevapları
  • Response: Sunucudan dönen veri.
  • HTML: Verilen cevap HTML’in ön görünümü(sadece html ögeleri içindir.)

URL Parametreleri

Eğer sayfada kullanıcıdan veri alınmış ise Net panelinde yukarıdakine ek olarak Params sekmesi çıkar. Params sekmesinde kullanıcıdan gelen verileri görmemiz mümkündür.

http://www.softwareishard.com/firebug/introduction/net-panel/testPage1.htm?param1=value1&param2=value2

Post ve Put İstekleri

Eğer kullanıcından HTTP üzerinden veri istenmiş ise bunun için Post isimli yeni bir sekme açılacaktır ve kullanıcının gönderdiği veriler listelenecektir.

JSON Cevapları

JSON verisi olması durumunda yeni bir sekme daha açılacaktır ve json verileri bir liste halinde sıralanacaktır.

Tarayıcı Ön Belleği

Eğer sayfa ögesi tarayıcı ön belleğinde geliyorsa Cache sekmesi belirecektir. Bu sekme bize ön bellekten gelen bilgileri ayrıntısı ile gösterecektir.

Yukarıdaki ekran görüldüğü gibi listede 304 değişmedi ibaresi olan ögeler tarayıcı ön belleğinden alınıyor demektir.

Dosya Tipine Göre Yükleme Zamanları

Bazen biz sayfadaki ögelerin her biri için yüklenme zamanını bilmek isteriz, örneğin javascript veya resimler vb. Bunun biz Net sekmesine tıklayıp sonra eskiye göre üstte yenilerde alttaki sekmelerden(javascript, images) yapabiliriz. Buda bize toplam yüklenme zamanı ve farklı dosya tiplerinin yüklenme zamanı ayrımını yapma imkanı verir.

XMLHttpRequest İzleme

Şimdiye kadar yapılan istek ve cevapları inceledik. Bununla birlikte web sayfaları asenkron istekler ve cevaplarıda içermektedir, ajax olarak tanımlanan bu istek ve cevaplarıda Net panelinden izlememiz mümkündür. Bir sayfada ajax isteği olduğu durumları Net panelindeki XHR sekmesinden izleyebilir ve bilgilerini buradan alabiliriz.

http://www.janodvarko.cz/firebug/tests/BreakOnXHR/breakOnXHR.html Örnek sayfasını incelersek

Yukarıda görüldüğü gibi ajax istek ve cevapları hakkında detaylı bilgi alıyoruz. Clear düğmesi ile isteği silebiliriz.

FireBug Net Sekmesine Yardımı İle Performans Değerlendirmesi Yapmak

Benim açımdan FireBug Firefox’un en önemli eklentisidir. Bu nedenle diğer tarayıcılara geçmem şu an itibari ile imkansız. FireBug o kadar büyük bir eklentidir ki bu eklentiye bağlı çıkarılan eklentiler vardır. Bu eklentilerden bir kaçı;

Bu eklentileri kullanarak web sayfalarımızın performansını ölçebiliriz. Ayrıca bu eklentiler bize sitemizdeki yavaşlamaya neden olan durumları açıkça gösterir ve düzeltmemiz için önerilerde bulunur.

Kaynaklar

]]> http://www.fatihhayrioglu.com/firebug-net-sekmesi-ve-kullanimi/feed/ 2