jQuery kullandığım bir projede, seçim kutusu(select elemanı) seçeneklerini(option) değişkende saklayarak, istediğim zaman istediğim kadar kullanmayı planladım. Daha iyi anlaşılabilmesi için ufak bir kod örneği vereyim;

  var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
  $('#Baslangic').html(secenekler);
  $('#Varis').html(secenekler);

Buraya kadar bir sorun ortaya çıkmadı. Ne zaman ki, bu şekilde doldurduğum seçim kutularında bir elemanı seçili hale getirmeye çalıştım, işte o zaman Internet Explorer 6′da (IE6) garip bir hata mesajı ile karşılaştım: “Could not set the selected property. Unspecified error.” IE7, IE8, Firefox, Opera, Chrome ve Safari’de sorunsuz bir şekilde çalışırken, IE6 bu şekilde, anlaşılmaz bir hata mesajı ile beni çıkmaza soktu. Seçim yapmak için kullandığım kod öbeğini de eklersek kod örneğimiz şu hale geliyor;

  var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
  $('#Baslangic').html(secenekler).val(34);
  $('#Varis').html(secenekler).val(35);

Hata mesajının ilk bölümü, kısmen problemin neden kaynaklandığını açıklasa da ikinci bölümdeki “Belirsiz hata” ibaresi direkt olarak bir çözüme yönlenmemi engelledi. Internetlerde yaptığım ufak bir araştırma ile bu sayfada probleme ve olası bir çözüme ulaştım. Problem IE6′da DOM’un yeteri kadar hızlı çalışamamasından kaynaklanıyormuş. DOM ağacını zamanında hazırlayamadığı için, seçim yapmak istediğimizde seçim kutusunda ilgili elemanı bulamıyor ve ilgili hata mesajını ekrana basıyor.

Problemi çözmek için bir çok alternatif yöntem uygulayabilirsiniz. Problem ile ilgili bilgi bulduğum sayfadaki çözüm, try/catch bloğunu iş akışının bir parçası olarak kullandığından benim gözümde ideal bir çözüm değil. Tabi tercih size kalmış. Benzer bir durum için benim önerebileceğim çözüm şu olabilir;

  var secenekler = '<option value="34">İstanbul</option><option value="6">Ankara</option><option value="35">İzmir</option>';
  var $Baslangic = $('#Baslangic').html(secenekler);
  var $Varis = $('#Varis').html(secenekler);
  if($.browser.msie && $.browser.version === "6.0") {
    setTimeout(function() {
      $Baslangic.val(34);
      $Bitis.val(35);
    }, 1);
  }
  else {
    $Baslangic.val(34);
    $Bitis.val(35);
  }

İşin püf noktası, tarayıcı IE6 ise, seçim işlemlerini 1 milisaniyelik bir gecikme ile gerçekleştirip, bu ufacık gecikme ile DOM’a kendini toparyalabilmesi için zaman tanımak.

Alternatif olarak, imkanınız varsa, seçeneklerden seçili olmasını istediğiniz elemana da selected=”selected” özelliğini atayarak bu hatadan kaçınabilirsiniz. Bu örnekte aynı seçenekleri birden çok kez kullanacağım için ve varsayılan olarak belirli bir tanesini seçili durumda oluşturamayacağım için bu şekilde bir çözüm yoluna gittim.

Daha önce bahsettiğim .NET için HTML etiketleri temizleme metodunu JavaScript uygulamalarında kullanmak için düzenledim. Şöyle buyrun:

function StripTags(input)
{
  var array = [];
  var inside = false;

  for (i = 0; i < input.length; i++)
  {
    var let = input.charAt(i);
    if (let == '<')
    {
      inside = true;
      continue;
    }
    if (let == '>')
    {
      inside = false;
      continue;
    }
    if (!inside)
      array.push(let);
  }
  return array.join('');
}

Bugün valiDate metodunu çalışma arkadaşıma gösterirken, neden doğrulama başarılı olduğunda tarih nesnesini döndürmediğim sorusu aklıma geldi. Toplam 7 byte’lık ufak bir ekleme ile, doğrulama başarılı olduğunda JavaScript tarih nesnesi döndürecek şekilde metodu güncelledim. Bu sayede metottan dönen değeri hala if ifadesi içinde kullanabilirken, isterseniz if ifadesinden önce metottan dönen değeri bir değişkene atayarak, bu değişkeni if ifadesinde kullanabilir ve doğrulamayı geçerse değişkeni tarih nesnesi olarak kullanabilirsiniz. Hatta abartıp doğrulamadan dönen değeri direkt if ifadesi içinde değişkeninize atayarak da kullanabilirsiniz.

/*
 * valiDate
 * http://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2010-04-16 17:08:32 +0300 (Fri, 16 Apr 2010)
 * Revision: 7
 */
String.prototype.valiDate =
  function() {
    if(/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9]{2}$/.test(this)) {
      var v = this.replace(/[- /]/g,'.').split('.');
      var d=parseInt(v[0],10), m=parseInt(v[1],10), y=parseInt(v[2],10);
      var o = new Date(y, m - 1, d);
      return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y ? o : false;
    }
    else
      return false;
  }

Metodun küçültülmüş halini (647 byte) buradan edinebilirsiniz.

Bu makalenin orijinali (Explaining JavaScript scope and closures) Robert Nyman tarafından kendi blogunda yazılmıştır. Türkçe çevirisi için kendisinden izin alınmış olup, aşağıda okuyacağınız birinci tekil şahıs yine Robert Nyman’ın kendisidir;

Javascript ile uygulama geliştirirken bir çok insanın zorluk çektiği bir konuyu açıklamaya çalışmak istedim.

Arkaplan

Kapsam ve kaplamları anlatmaya çalışan bir sürü makale olmasına rağmen bir çoğunun net bir şekilde konuyu ele almadığını söyleyebilirim. Bunun yanında bir çok makalede de herkesin daha önce 15 başka yazılım dili ile uygulama geliştirdiğini varsayılıyor ki deneyimlerime göre JavaScript yazan bir çok kişi C ve Java yerine HTML ve CSS altyapısından geliyor.

Bu nedenle bu makale ile mütevazi hedefim herkesin kapsam ve kaplamların ne olduğunu kavraması, nasıl çalıştıklarını ve daha önemlisi bunlardan nasıl yararlanabileceklerini görmeleri. Okumaya başlamadan önce değişkenler ve fonksiyonların temellerini anlıyor olmalısınız.

Kapsam

Kapsam, değişkenlerin ve fonksiyonların nerede erişilebilir oldukları ve hangi bağlam içinde çalıştırıldıklarını refere eder. Basitçe, bir değişken ya da fonksiyon, genel ya da yerel kapsam içinde tanımlanabilir. Değişkenler sözde fonksiyon kapsamına sahiptirler ve fonksiyonlar da değişkenlerle aynı kapsama sahiptirler.

Genel Kapsam

Bir şey genel olduğunda bu demektir ki ona kodunuzda istediğiniz yerden erişebilirsiniz. Şu örneği ele alalım:

var maymun = "Goril";

function misafiriKarsila() {
  return alert("Merhaba değerli blog okuyucusu!");
}

Bu kod bir tarayıcıda çalıştığında, fonksiyon kapsamı pencere olacaktı, bu da ilgili tarayıcı penceresinde çalışan her şey için fonksiyonu erişilebilir kılacaktı.

Yerel Kapsam

Genel kapsamın tersine, yerel kapsam bir şeyin, örneğin bir fonksiyonun, kodun belli bir kısmında tanımlanmış olmasıdır. Örneğin;

function terbiyesizKonus() {
  var konusma = "Oh, seni gidi VB sever seni";
  return alert(konusma);
}
alert(konusma); // Hata fırlatır

Yukardaki koda bakarsanız konusma değişkeni sadece terbiyesizKonus fonksiyonu içinde erişilebilir durumdadır. Fonksiyonun dışında tanımlı değildir. Buraya dikkat: eğer değişkeni tanımlarken öncesinde var kullanmazsanız, değişken otomatik olarak bir genel değişken olur.

Bu aynı zamanda şu manaya da gelir, iç içe fonksiyonlar tanımladığınızda içerdeki fonksiyon, içinde bulunduğu fonksiyonun değişkenlerine ve fonksiyonlarına erişebilir:

function adSakla(ad) {
  function buyukHarfeCevir() {
    return ad.toUpperCase();
  }
  var buyutulmus = buyukHarfeCevir();
  return buyutulmus;
}
alert(adSakla("Robert")); // "ROBERT" döndürür

Gördüğünüz gibi, iç fonksiyon buyukHarfeCevir işlem yapmak için herhangi bir parametreye ihtiyaç duymadı fakat dış fonksiyon adSakla’nın parametresi olan ad parametresine tam erişim sağladı. Daha net anlaşılması için bir örnek daha ele alalım:

function kardesler() {
  var kardesler = ["Mehmet", "Mahmut", "Ayşe"];
  function kardesSayisi() {
    var kardeslerUzunlugu = kardesler.length;
    return kardeslerUzunlugu;
  }
  function kardesIsimleriniBirlestir() {
    return "Benim " + kardesSayisi() + " kardeşim var:\n\n" + kardesler.join("\n");
  }
  return kardesIsimleriniBirlestir();
}
alert(kardesler()); // "Benim 3 kardeşim var: Mehmet Mahmut Ayşe" döndürür

Az önce gördüğünüz gibi, her iki iç fonksiyon da kendilerini kapsayan fonksiyona ait dizi değişkenine erişebildiler ve her iç fonksiyon kendisiyle aynı seviyedeki diğer iç fonksiyonlara (bu durumda kardesIsimleriniBirlestir fonksiyonu kardesSayisi fonksiyonuna erişti) erişebildi. Ne varki kardeslerUzunlugu değişkeni sadece ilgili fonksiyonda erişilebilir durumda, başka bir deyişle o kapsamda erişilebilir.

Kaplamlar

Hazır kapsam konusunu daha iyi kavramışken şimdi karışıma bir de kaplamları ekleyelim. Kaplamlar, genellikle, belirli bir bağlamda değişkenlerle çaışabilen ifadelerdir ya da işi daha da kolaylaştırmak adına, dış fonksiyonların yerel değişkenleri ile işlem yapan iç fonksiyonlar kaplamları oluşturur. Örneğin:

function topla(x) {
  return function(y) {
    return x + y;
  };
}
var topla5 = topla(5);
var sayi8 = topla5(3);
alert(sayi8); // 8 döndürür

Dur bir dakika! Az önce ne oldu? Şunu parçalarına ayıralım:

1. topla fonksiyonu çağırıldığında geriye bir fonksiyon döndürüyor.
2. Bu fonksiyon ilgili bağlamı kapatıyor ve x parametresinin o anki değerini hafızasında tutuyor.(Yukardaki örnekte 5 değeri)
3. topla5 değişkenine değeri atanırken, dönen fonksiyon x değerinin 5 olduğunu hep biliyor.
4. topla5 değişkeni parametre olarak aldığı değere 5 ekleyen bir fonksiyonu refere eder hale geliyor.
5. topla5 fonksiyonu 3 parametresi ile çağrıldığında, 5 değerine 3 ekliyor ve 8 değerini dönüyor.

Yani JavaScript dünyasında topla5 fonksiyonu aslında şuna benzer:

function topla5 (y) {
  return 5 + y;
}

Rezil döngü problemi

Kaç defa, bir döngü yaratıp, i değerini bir elemana atamaya çalıştığınızda, gördünüz ki sadece i’nin en son değeri geri dönüyor?

Yanlış referans

Şimdi, 5 adet a elemanı yaratıp, i değişkeni ile metinlerini oluşturan ve tıklama olayında da i değerini mesaj kutusu (alert) ile ekrana basan, şu yanlış koda bir bakalım. Oluşan a elemanları dokümanın (document) gövdesine (body) eklenecekler:

function baglantiEkle() {
  for (var i=0, baglanti; i < 5; i++) {
    baglanti = document.createElement("a");
    baglanti.innerHTML = "Bağlantı " + i;
    baglanti.onclick = function () {
      alert(i);
    };
    document.body.appendChild(baglanti);
  }
}
window.onload = baglantiEkle;

Her eleman "Bağlantı 0", "Bağlantı 1" vb doğru metinlere sahip olacaklar. Fakat hangi bağlantıya tıklarsanız tıklayın, mesaj kutusunda hep "5" yazacaktır. Peki ama neden? Döngünün her yinelenmesinde i değeri bir artıyor ve tıklama olayı sadece elemana bağlanıyor ama henüz çalıştırılmıyor.

Böylece döngü i değeri 5 olana kadar devam ediyor, ki bu da baglantiEkle fonksiyonu çalışmayı bitirmeden önce i'nin aldığı son değer. Sonrasında da her tıklama olayı gerçekleştiğinde, son i değeri kullanılıyor.

Doğru referans

Bunun yerine yapmanız gereken bir kaplam yaratmak, böylece tıklama olayını her bağladığınızda o anki doğru i değeri ile olay çalışır. Şöyle ki:

function baglantiEkle() {
  for (var i=0, baglanti; i < 5; i++) {
    baglanti = document.createElement("a");
    baglanti.innerHTML = "Bağlantı " + i;
    baglanti.onclick = function (numara) {
      return function () {
        alert(numara);
      };
    }(i);
    document.body.appendChild(baglanti);
  }
}
window.onload = baglantiEkle;

Bu kod ile her a elemanına tıkladığınızda "Bağlantı 0", "Bağlantı 1" gibi ilk kod parçasında olmasını beklediğiniz değerler karşınıza çıkacaktır. Burada çözümü sağlayan, tıklama olayına atanan iç fonksiyon numara değişkenini -bu örnekte parametre olarak geçilen i değişkeninin o andaki değeri- refere eden bir kaplam oluşturmasıdır.

Bu fonksiyon geçerli değer ile kapanıyor ve bu sayede tıklama olayı çağırıldığında olması gereken değeri dönebiliyor.

Kendi kendini çalıştıran fonksiyonlar

Kendi kendini çalıştıran fonksiyonlar anında çalışan ve kendi kaplamlarını oluşturan fonksiyonlardır. Şuna bir göz atın:

(function () {
  var kopek = "Alpan Çobanı";
  alert(kopek);
})();
alert(kopek); // undefined (tanımlanmamış) geri döner

Tamam, demek ki kopek değişkeni sadece o bağlamda uygun durumda. Büyük iş, gizli köpekler... Ama, sevgili arkadaşlarım, işte olayın ilginçleştiği nokta da bu! Biraz önceki döngüde sorunumuzu çözen şey bu. Yahoo da bunu Yahoo JavaScript Modül Deseni için kullanıyor.

Yahoo JavaScript Modül Deseni

Desenin özü şu; Kendi kendini çağıran fonksiyonlar kullanarak bir kaplam yaratıyoruz, bu sayede özel ve genel değişkenler ve metotlar oluşturabiliyoruz. Basit bir örnek:

var kisi = function () {
  // Özel
  var isim = "Robert";
  return {
    ismiGetir : function () {
      return isim;
    },
    ismiBelirle : function (yeniIsim) {
      isim = yeniIsim;
    }
  };
}();
alert(kisi.isim); // undefined
alert(kisi.ismiGetir()); // "Robert"
kisi.ismiBelirle("Robert Nyman");
alert(kisi.ismiGetir()); // "Robert Nyman"

Bunun güzelliği, artık nelerin genel olarak görüneceğini(ve değiştirilebileceğini), nelerin ise özel olacağını dolayısıyla da kimsenin erişememesine ve değiştirememesine siz karar verebileceksiniz. Yukardaki değişkenin ismi fonksiyonun bağlamı dışında gizlidir, fakat ismiGetir ve ismiBelirle fonksiyonları aynı kaplamda yaratıldıkları için ilgili değişkenin referansına sahiptirler ve kendisine ulaşabilirler.

Sonuç

Naçizane umudum, bu yazıyı okuduktan sonra, ister acemi, ister uzman bir programcı olun, JavaScript'deki kapsam ve kaplamlar ile ilgili daha net bir görüş açısı kazanmanızdır. Sorular ve geri beslemelere her zaman açığım ve konuyla ilgili gerçekten önemli her türlü bilgi için makaleyi hemen güncellerim.

Mutlu kodlamalar!

JavaScript ile bir elemanın tarayıcının görüş alanına göre ya da ebeveyni olan diğer bir elemana göre x ve y koordinatlarını belirlemeye yönelik bir betik hazırladım ve jQuery eklentisi haline getirdim. Eklentinin kendisini ve sıkıştırılmış halini aşağıda bulabilirsiniz.

Kullanımı:

var top = $('#elm').top();

var left = $('#elm').left();

var pos = $('#elm').pos();
top = pos.top;
left = pos.left;

/*
 * jTopLeft
 * http://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-12 17:56:24 +0300 (Mon, 12 Oct 2009)
 * Revision: 3
 */
(function($){
  $.fn.extend({
    top: function(obj) {
      var o = findPos(this.get(0));
      return obj ? o - findPos(obj) : o;
    },
    left: function(obj) {
      var o = findPos(this.get(0),true);
      return obj ? o - findPos(obj,true) : o;
    },
    pos: function(obj) {
      var pos = {},o;

      o = findPos(this.get(0));
      pos.top = obj ? o - findPos(obj) : o;

      o = findPos(this.get(0),true);
      pos.left = obj ? o - findPos(obj,true) : o;

      return pos;
    }
  });
  function findPos(o,l){
    var x = 0;
    if (o.offsetParent) {
      x = l ? o.offsetLeft : o.offsetTop;
      while (o = o.offsetParent)
        x += l ? o.offsetLeft : o.offsetTop;
    }
    return x;
  }
})(jQuery);

Paketin küçültülmüş halini (802 byte) buradan edinebilirsiniz.

JavaScript kullanırken eksikliğini hissettiğim bir kaç string metot var. padLeft, padRight, trimLeft, trimRight ve trim metotları varsayılan string metotları arasında yer almıyor. Zaman içinde çeşitli projelerde bu metotlara ihtiyaç duydukça yazıp yazıp bir kenara koymuştum. Şimdi bu metotları toplayıp ufak bir paket oluşturdum ve sizlerle de paylaşayım dedim. valiDate v2.0‘ı da bu pakete dahil ettim. Metotları aşağıda bulabilirsiniz;

/*
 * strExtensions - String extensions
 * http://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-08 17:43:34 +0300 (Thu, 08 Oct 2009)
 * Revision: 2
 */
String.prototype.trimLeft =
  function(c) {
    c = c || ' ';
    return this.replace(new RegExp('^'+c+'+'),"");
  };
String.prototype.trimRight =
  function(c) {
    c = c || ' ';
    return this.replace(new RegExp(''+c+'+$'),"");
  };
String.prototype.trim =
  function(c) {
    return this.trimLeft(c).trimRight(c);
  };
String.prototype.padLeft =
  function(l, c) {
    c = c || ' ';
    var s = this.toString();
    while (s.length < l) s = c + s;
    return s;
  }
String.prototype.padRight =
  function(l, c) {
    c = c || ' ';
    var s = this.toString();
    while (s.length < l) s = s + c;
    return s;
  }
String.prototype.valiDate =
  function() {
    if(/^(0[1-9]|[12][0-9]PO|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9]{2}$/.test(this)) {
      var v = this.replace(/[- /]/g,'.').split('.');
      var d=parseInt(v[0],10), m=parseInt(v[1],10), y=parseInt(v[2],10);
      var o = new Date(y, m - 1, d);
      return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y;
    }
    else
      return false;
  }

Paketin küçültülmüş halini (1130 byte) buradan edinebilirsiniz.

Daha önce ilk versiyonunu sizlerle paylaştığım valiDate metodunu biraz daha geliştirdim. String nesneleri doğrulama amaçlı kullandığım için String nesnesinin prototype’ına ekleyerek herhangi bir metin değişken üzerinde kolayca tarih doğrulaması yapılabilmesine olanak sağladım. Ayraç olarak “-”,” “,“/” ya da “.” karakterlerini kullanıyor, yani doğrulanan metnin ilgili ayraç ile ayrılmış dd.mm.yyyy formatında olmasını bekliyor.

/*
 * valiDate
 * http://www.karalamalar.net/
 *
 * Copyright (c) 2009 İzzet Emre Erkan
 * Licensed under Creative Commons Attribution-Share Alike 3.0 Unported License
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Date: 2009-10-08 16:51:00 +0300 (Thu, 08 Oct 2009)
 * Revision: 6
 */
String.prototype.valiDate =
  function() {
    if(/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9]{2}$/.test(this)) {
      var v = this.replace(/[- /]/g,'.').split('.');
      var d=parseInt(v[0],10), m=parseInt(v[1],10), y=parseInt(v[2],10);
      var o = new Date(y, m - 1, d);
      return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y;
    }
    else
      return false;
  }

Metodun küçültülmüş halini (640 byte) buradan edinebilirsiniz.

Webde uygulama geliştirirken genelde Firefox kullanıyorum. Geliştirme sürecinde de diğer tarayıcılarla uygulamayı test edip gereken önlemleri alarak tüm tarayıcılarda aynı sonucu alacak şekilde uygulama geliştirmeye çalışıyorum. Bu süreçte en çok baş ağrıtan tabii ki Internet Explorer oluyor. Bir tarafta test ettiğim dört tarayıcı (Firefox, Chrome, Opera, Safari) diğer tarafta Internet Explorer sürümleri (IE 6, IE 7, IE 8). Sağolsun Microsoft, peşpeşe çıkan iki sürüm bile birbirini tutmadığından ve piyasada kullanım oranları hiçe sayılamayacak düzeyde olduğundan, bir de böyle sancılı bir süreç ortaya çıkıyor.

Geliştirme sürecinde Firefox kullanmak çok büyük rahatlık. Web Developer araç çubuğu ve Firebug neredeyse tüm ihtiyaçları karşılıyor. Diğer tarayıcılarda ise bu iki eklentinin getirdiği rahatlığı yakalayabilmek bir kaç ekstra aparat kullanmam gerekiyor. Asıl ismi Bookmarklet olan bu kavram için malesef güzel Türkçemizde doğru bir karşılık yok ya da ben bilmiyorum. Ben web aparatı ya da kısaca aparat demeyi tercih ediyorum.

Bu yazımda sizlerle hem bu geliştirme aparatları hem de webde kullandığım diğer bir kaç aparattan bahsedeceğim. Kullanmak istediğiniz aparatı sık kullanılanlara/yer imlerine ekleyerek ya da sürükle bırak yaparak adres çubuğunuza yerleştirerek kolayca kullanabilirsiniz.

WTFramework
Bir web sitesinde, kullanılan JavaScript çatısı hakkında bilgi verir.

Aparatın web sitesi
WTFramework

Readability
Herhangi bir web sayfasında gezerken, aparatı kullandığınızda, sadece metne odaklanarak ve tercihlerinize göre sayfadaki metni daha okunabilir hale getiriyor. Aşağıdaki aparat benim tercihlerim olan, e-kitap, küçük karakter boyutu ve geniş metin alanı seçenekleriyle oluşturulmuştur. Web sitesinden siz de tercihlerinize göre aparatı ayarlayabilirsiniz.

Aparatın web sitesi
Readability

jQuerify
jQuery kütüphanesi kullanılmamış bir web sayfasına istemci tarafından jQuery yükleyerek, Firebug vb eklentiler ile sayfada jQuery kodları çalıştırabilmenize olanak sağlar.

Aparatın web sitesi
jQuerify

Firebug Lite
Firebug eklentisi yüklü olmadığı ya da desteklenmediği durumlarda, sayfaya istemci tarafından Firebug Lite yüklenmesini sağlayarak, bir çok Firebug özelliğini kullanabilmenize olanak sağlar.

Aparatın web sitesi
Firebug Lite

XRAY
Adından da anlaşılabileceği gibi, sitenin röntgenini çekmenize olanak sağlar. XRAY’i aktif hale getirdikten sonra sayfa üzerindeki elemanlara tıklayarak, haklarında daha detaylı bilgi alabilmenize olanak sağlar.

Aparatın web sitesi
XRAY

W3C Markup Validation
Herhangi bir web sayfasında gezinirken, ilgili web sayfasının World Wide Web Consortium web standartları testinden girmesini sağlar.

W3C Markup Validation

W3C CSS Validation
Herhangi bir web sayfasında gezinirken, ilgili web sayfasının World Wide Web Consortium CSS standartları testinden girmesini sağlar.

W3C CSS Validation

BuiltWith
Gezindiğiniz web sitesi ile ilgili bir çok bilgiye ulaşabilmenize olanak sağlar.

Aparatın web sitesi
BuiltWith

TinyURL
TinyURL servisini kullanarak gezindiğiniz sayfanın adresini kısaltabilmenize olanak sağlar.

Aparatın web sitesi
TinyURL 1

Bir diğer TinyURL aparatı

Aparatın alternatif web sitesi
TinyURL 2

View cookies
İlgili web sayfası için tarayıcınızda saklanmış çerezleri gösterir.

View cookies

Acronym Lookup
Herhangi bir kısaltmanın açılımını sorgular.

Aparatın web sitesi
Acronym Lookup

View Passwords
Gezindiğiniz web sayfasında yer alan parola alanlarına girilmiş parolaları göstermek için kullanılır.

Aparatın web sitesi
View Passwords 1
View Passwords 2

Wave – Web Accesibilty
Gezindiğiniz web sayfasının Wave adı verilen web erişilebilirliği aracı ile test edilmesini sağlar.

Aparatın web sitesi
Wave – Web Accesibilty

Accessify
Bir başka erişilebilirlik aparatı

Aparatın web sitesi
Accessify

Go to Top of Domain
Bir web sayfasında gezinirken kolay yoldan ilgili web sitesinin kök adresine gitmenize olanak sağlar.

Go to Top of Domain

Wikipedia Lookup
Seçili metni Wikipedia’da arar.

Wikipedia Lookup

Spry Medias Design Bookmarklet
Gezindiğiniz web sayfası için, bir çok özelliğe sahip, Design isimli aracı yükleyerek aktif hale getirir.

Aparatın web sitesi
Spry Medias Design Bookmarklet

Slayer Office Favelet Suite
DOM inceleme, değiştirme, vb bir çok araca sahip bir paket uygulamayı yükleyerek, kullanıma hazır hale getirir.

Aparatın web sitesi
Slayer Office Favelet Suite

Anti No Right Click
Sağ tuş engellemesi olan sayfalarda, bu sinir bozucu engeli ortadan kaldırır.

Aparatın web sitesi
Anti No Right Click

View Dom Source
Gezindiğiniz web sayfasının DOM kaynağını ekrana getirir.

View Dom Source

Yazılarımı yazarken genelde ingilizce terimlerin varsa Türkçe karşılıklarını yoksa en yakın anlamlarını kullanmaya çalışıyorum. Ne var ki Türkçe yeterli kaynak olmadığından ve ingilizce kaynaklar çok fazla olduğundan çoğu zaman bir konu ile ilgili arama yaparken ingilizce anahtar kelimeler kullanıyorum. Bu makalenin başlığını da Parça tanımlayıcılar ile çapraz alan adı çerçeve iletişimi olarak yazmak isterdim fakat arandığında bulunabilsin diye mecburen bu şekilde yazmak durumunda kaldım.

Güvenlik gereği tarayıcılar, bir alan adı üzerinde çalışan bir betiğin başka bir alan adı üzerinde çalışan başka bir betik ile haberleşmesine ve/veya ilgili dokümanın özelliklerine erişebilmesine izin vermezler. Pratikte çok işe yarayan bu güvenlik önlemi, her iki alan adına sahipseniz ve bu iki alan adında çalışan uygulamaların iletişim kurmaları gerekliliği söz konusuysa, durum çok can sıkıcı bir hal alabiliyor.

Flash tabanlı uygulamalarda sunucuların kök klasöründe düzgün bir şekilde yapılandırılmış crossdomain.xml dosyası yardımı ile bu sorunun üstesinden gelebiliyorsunuz. (crossdomain.xml ile ilgili daha detaylı bilgiyi adobe sitesinden edinebilirsiniz.) Peki javascript ile çalışırken ne yapılabilir? Bu makalede bu soruya cevap olabilecek bir yöntemden bahsedeceğim.

İşyerinde bir projede karşıma çıkan benzer bir problem için çözüm ararken, delicious üyeliklerim arasında tam da aradığım konuyla ilgili bir yazı buldum. Yazının ana fikri, değiştiğinde sayfanın yenilenmesini gerektirmeyen parça tanımlayıcı (Fragment Identifier) adı verilen url bölümünü kullanarak çerçeveleri konuşturmak.

Parça tanımlayıcılar, bir web sayfası içinde, sayfayı yenilemeden sayfanın içerisinde bağlantılar yardımıyla gezinti yapılabilmesine olanak sağlarlar. http://www.test.com/urunler.html#A-Urunu şeklinde bir bağlantı, sayfa yüklendikten sonra sayfanın A-Urunu olarak işaretlenmiş bölümüne odaklanmasını sağlar. A-Urunu olarak işaretlenmiş bir bölüm yoksa, bu durumda sayfa herhangi bir hata vermez ve özel bir konuma odaklanmaz.

Çerçeveleri konuşturmak için bizim de ihtiyacımız olan tam böyle bir şey. Tek yapmamız gereken A sayfasından, yine A sayfasında yer alan sayfa içi çerçeve (iframe) içinde yer alan B sayfasına veri göndermek için, göndereceğimiz veriyi B sayfasının adres bölümüne parça tanımlayıcı olarak göndermek. B sayfasını da sürekli olarak parça tanımlayıcı kısmı dinleyecek ve yorumlayacak şekilde yapılandırmak. Tam ters mantıkla, A sayfasını dinleyici, B sayfasını veri gönderici şekilde yapılandırarak her iki çerçevenin birbirleriyle iletişim kurmasını sağlayabilirsiniz.

İletişimin boyutu, parça tanımlayıcıların ve dolayısıyla url bölümüne yazılabilecek en yüksek veri miktarı ile sınırlı. Ayrıca sayfa içi çerçeve kullanmak, tarayıcının geri tuşununu da doğru çalışmamasına yol açabilir. Bu iki konu da yöntemin dezavantajları arasında sayılabilir.

Örnek sayfalarının kodlarını inceleyerek anlatmak istediğimi çok daha rahat anlayabilirsiniz.

Uzun bir aradan sonra tekrar merhaba. Yılbaşında bahsettiğim sürpriz yazar henüz ortalarda yok. Aldığım duyumlara göre ilk yazısı hazırmış, umarım yakında burada görürüz.

Ben şimdi size valiDate’den bahsedeyim. Çalışırken javascript ile tarih doğrulaması yapma ihtiyacı doğdu. Kullanıcının gün, ay ve yıl kutularından seçtiği değerler geçerli bir tarih oluşturuyor mu test etmem gerekiyordu. Önce biraz internette araştırdım ve şurada ihtiyacımı az çok karşılayacak ufak bir betik buldum. Biraz sadeleştirme ve biraz özelleştirme ile projemde (ve gelecekte) kullanmak üzere aşağıdaki ufak fonksiyonu yazdım. Gelecekteki çalışmalarıma referans olması ve ihtiyacı olanların kullanması için buraya da ekliyorum.

function valiDate(d, m, y) {
var o = new Date(y, m - 1, d);
return o.getDate() == d && o.getMonth() + 1 == m && o.getFullYear() == y;
}