karalamalar

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.
devam »

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.
devam »