Browser information object

Merhaba,
Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.
Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.

Peki bu bilgiler ne işe yarar?
bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.

Bunun için bir obje yazdım gayet derli toplu oldu.

// Define Browser
function Browser(){
   this.name          = navigator.appName;
   this.codename      = navigator.appCodeName;
   this.version       = navigator.appVersion.substring(0,4);
   this.platform      = navigator.platform;
   this.javaEnabled   = navigator.javaEnabled();
   this.cookieEnabled = navigator.cookieEnabled;
   this.userAgent     = navigator.userAgent;
   this.screenWidth   = screen.width;
   this.screenHeight  = screen.height;
   this.loc           = window.location.href;
   this.referrer      = (document.referrer)?     document.referrer     : "Direct";
   this.charSet       = (document.characterSet)? document.characterSet : document.charset;
   this.language      = (navigator.language)?    navigator.language    : navigator.browserLanguage;

   this.information = function(){
         info  = "\n== Client Descriptions ==\n";
         info += "Application Name is: "      + this.name          + "\n";
         info += "Application Code name is: " + this.codename      + "\n";
         info += "Application Version is: "   + this.version       + "\n";
         info += "Location: "                 + this.loc           + "\n";
         info += "Referrer: "                 + this.referrer      + "\n";
         info += "User agent: "               + this.userAgent     + "\n";
         info += "Platform is: "              + this.platform      + "\n";
         info += "Is java Enabled?: "         + this.javaEnabled   + "\n";
         info += "Is Cookie Enabled?:"        + this.cookieEnabled + "\n";
         info += "Language: "                 + this.language      + "\n";
         info += "Document Character Set: "   + this.charSet       + "\n";
         info += "Client screenWidth: "       + this.screenWidth   + "\n";
         info += "Client screenHeight: "      + this.screenHeight  + "\n";
         return info;
   }

   this.alert = function(){
         alert(this.information());
   }
}

Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız

var info = new Browser();

Artık browser bilgilerine info.information(); method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.
aynı çekilde info.alert(); method'uda bu mesajı alert box içerisinde gösterir.
bir deneyelim info.alert()

Sonuç genelde şuna benzer birşey olmalıdır:

== Client Descriptions ==
Application Name is: Microsoft Internet Explorer
Application Code name is: Mozilla
Application Version is: 4.0
Location: http://www.jotform.com/results.php

User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Platform is: Win32
Is java Enabled?: true
Client screenWidth: 1280
Client screenHeight: 1024


Bu yöntemle alınan bilgiyi biz jotform'un error report'ları için kullanıyoruz.

bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.

Jotform'un yaptığı şu:

var iserrorsent = false; // Global to check error status (sent or not sent)
// Error Handling, Handle errors gracefuly
window.onerror = function(desc, file, line, chr){
   // Ignore these errors
   if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }
   var info = new Browser();

   // Create message
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ desc +"\n";
   message += "Ocuured in: "+ file +"\n";
   message += "Occured on line: "+ line +"\n";
   message += info.information();
   // Send message
   if(!iserrorsent){ //Dont send more than one error in one session
         reportError(   message   ,"Error occurred in Jotform: "+desc);
         iserrorsent = true;
   }
   return true;
}

// Send errors by ajax
function reportError(desc,title){
   var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));
}

Tabi burda karşımıza yeni bir şey daha çıktı window.onerror onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.

window.onerror = function(description, fileLocation, lineNumber){
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ description +"\n";
   message += "Ocuured in: "+ fileLocation +"\n";
   message += "Occured on line: "+ lineNumber +"\n";
   alert(message);
}

Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.

JavaScript Button Rollover

Merhaba,
Bu yazımda biraz daha dizayn ağırlıklı bir konudan bahsedicez.
Konumuz rollover button'lar. Bilmeyenler için bir hatırlatma yapalım, Rollover bir çok sitede gördüğünüz farenin bir butunun veya bir imajın üzerine gelmesiyle o nesnenin değiştirilmesi işlemine verilen isimdir.

Bu işlem çoğunlukla web sitelerdeki tuşları tanımlamak ve tıklanabilir olduklarını anlatmak için kullanılır.

Aslında birçok kişi bu konuya Dreamweaver'dan aşina. Dreamweaver sizin için otomatik olarak rollover imagelar yaratabiliyor. Ancak yarattığı kod o kadar çirkin ve kullanışsızki, her yeni rollover image eklediğinizde HTML'inize birsürü karışık kodlar ekleyip daha sonra içinden çıkamıyacağınız bir hale getiriyor.
Bu iş için çok basit bir CSS Çözümü var aslında ancak IE herzamanki gibi oyun bozanlık yapıp bunu kullanmamızı engelliyor. Yinede ben %90 lık IE kullanıcılarını umursamıyorum diyorsanız CSS yöntemini bi hatırlatalım

.rollover{
   background:url(images/button.gif);
}

.rollover:hover{
   background:url(images/button_over.gif);
}

.rollover:active{
   background:url(images/button_down.gif);
}

Kodu biraz tanımlarsak. .rollover{ image'ın normal durumu .rollover:hower image'ın mouseover durumu ve .rollover:active ise image'ın mousedown durumudur. geri kalanı CSS sizin için halledicektir.
Gördüğünüz gibi oldukça basit, ancak iki kusuru var birincisi IE6 asla ne yapmaya çalıştığınızı anlamıyacak ve ikincisi her roll over image için ayrı ayrı bunları yazmanız gerekicek.

Durum böyle olunca bende kendi javascript fonksiyonumu yazmaya karar verdim. heryerde kullanılabilecek oldukça geliştirmeye açık ve anlaşılır olmasını istedim. Sonuçta JotForm üzerinde kullanıyoruz ve oldukça başarılı oldu.

İlk önce fonksiyonun nasıl çalıştığının bir örneğini görelim.



İlk tuş yukarda verdiğim CSS rollover örneğine ait. Alttaki iki tane ise benim javascript ile yaptığım örnekler
birisi normal imaj diğeri ise bir button, yazdığım fonksiyon ikisi arasındaki farkı anlayıp ona göre davranıyor. ayrıca fark ettiyseniz alttaki tuşda mousedown efekti yok buda fonksiyona gönderilen bir argumanla kapatılabiliyor.

evet şimdi fonksiyonu görelim.

function buttonOver(elem,noDown){
   var realImage = "";             // Should be empty. veriable to keep original background.
   var ext      = ".gif";          // Define Extention .gif .png .jpg
   var over_ext = "_over" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var down_ext = "_down" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var regEx = /\.\w+$|\.\w+\)$/;  // Remove extention of the image
   var preload_img = function(imgToLoad){
      var img = new Image;
      if(document.imageArray)
         document.imageArray.push(img.src = imgToLoad);
      else{
         document.imageArray = new Array();
         document.imageArray.push(img.src = imgToLoad);
      }
   }
   
   if(elem.style.backgroundImage){      // if object has a background.
      realImage = elem.style.backgroundImage.replace(regEx,"");  //Take original background and replace with over image.
      elem.style.backgroundImage = realImage + over_ext +")";
   }else if(elem.src){         // if object has a src .
      realImage = elem.src.replace(regEx,"");       //Take original background and replace with over image.
      elem.src = realImage + over_ext;
   }
   if(!noDown) preload_img((realImage + down_ext).replace(/^url\(/,"")); // Preload images
      elem.onmouseout = function(){ buttonOut(elem); }   // Define mouseout event.
      elem.onmousedown = function(){ buttonDown(elem); } // Define mousedown event.
      elem.onmouseup  = function(){ buttonUp(elem); }    // Define mouseup  event.
      var buttonOut = function(elem){      // on mouseOut revert back to original image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + ext + ")";
         }else if(elem.src){
            elem.src = realImage + ext;
         }
      }
      var buttonUp = function(elem){      // on mouseUp revert back to mouseover image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + over_ext +")";
         }else if(elem.src){
            elem.src = realImage + over_ext;
         }
      }
      var buttonDown = function(elem){    // on mouseDown replace with mouseDown image.
         if(noDown) return true;
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + down_ext +")";
         }else if(elem.src){
            elem.src = realImage + down_ext;
         }
      }
}

buttonOver fonksiyonunu kullanmanız için ilk önce yapmanız gerek bir kaç küçük ayar var.
mesela fonksiyonun ilk satırındaki değerleri ayarlamak gibi.

function buttonOver(elem,noDown){
   var realImage = "";
   var ext      = ".gif";
   var over_ext = "_over" + ext;
   var down_ext = "_down" + ext;
[...]

Gayet açık kullanacağınız image'ların uzantısı ext, mouseover olduğunda gelicek resmin son eki over_ext, mousedown olduğunda gelicek olan resmin son eki down_ext
resimleriniz için genelde button.gif, button_over.gif, button_down.gif yada button.gif button2.gif button3.gif gibi isimler seçmeye özen gösterirseniz hem işinizde kolaylık sağlar hemde dosyaların yönetimi kolaylaşır.

Fonksiyon artık kullanıma hazır. fonksiyonu çalıştırmak için yapmamız grekende çok basit. Sadece mouseover event'inde buttonOver(this) yazarak çağırıcaz tek yapmamız gereken bu. Fonksiyon sizin verdiğiniz ayarlara göre davranarak diğer bütün eventleri ayarlayacaktır.
Ayrıca mousedown işleminde gelicek olan resim içinde küçük bir preload var.
eğer mousedown event'inin çalışmasını istemiyorsanız da buttonOver(this,true) diyerek çalışmasını engelleyebilirsiniz.

Fonksiyonla ilgili bir sorun yaşarsanız herzaman sorabilirsiniz.
İyi Çalışmalar.

Ajax için kullanışlı fonksiyonlar

Merhabalar.
7 aydır uğraştığımız projemiz JotForm'u tamamlama peşinde olduğumdan uzun zamandır blog'a vakit ayıramıyordum neyse ki JotForm başarıyla tamamlandı da sonunda içim rahat bi şekilde yazabiliyorum.

Neyse eğer Jotform'a girip bir bakacak olursanız sitenin işlevlerinin çoğunun ajax yoluyla yapıldığını hemen farkedeceksiniz. Özellikle yeni form yaratırken ve payment özelliklerini ayarlarken kullandığımız Wizard'lar tamamen ajax yoluyla yükleniyorlar.

Çalışmakta olan kodun üzerine server'dan yeni kod getirip sonra da çalışan kod dan bu yeni kod da bulunan bir javascript fonksiyonunu çağırmak istediğinizde ya da bu yeni çağırdığınız sayfadaki bir HTML elementini yakalamak istediğinizde bazı "zamanlama" hataları oluşuyor. Mesela, ya fonksiyonunuz daha sayfa yüklenmeden çalışıyor yada daha yaratılmamış bir elementi yakalamaya çalışıyorsunuz bazen de daha yüklenmemiş fonksiyonlara çağrı yapıyorsunuz. Tabi bunlar kişilerin internet hızlarına göre de değişim gösteriyor. Bu tür sorunları aşmak bizim için gerçekten de çok önemliydi bizde şu fikirle yola çıktık, bir fonksiyonu veya elementi çağırmadan varlığından emin olmalıyız eğer yoksa da yaratılana kadar beklemeliyiz.

Bu mantıkla bazı fonksiyonlar yazdık ve gerçekden işe yaradı, ben de sizinde işinize yarayabileceğini düşündüğümden burada paylaşmak istedim.

işte fonksiyonlar.

function isExist(funcName){
try{
 if(typeof eval(funcName) == 'function')
    return true;
 }catch(e){
    return false;
 }
}
}

isExist fonksiyonu isminden de anlaşıldığı gibi bir fonksiyonun varlığını kontrol ediyor. isExist("foo") ; şeklinde kullanmak gerek () kullanmadan sadece fonksiyonun ismini yollamanız yeterli size true yada false return edicektir.

function tryFunction(func,args,dur,trycount){
 args = args.replace(/\"/g,"'");
 trycount = (trycount)? trycount : 0;
 dur = (dur)? dur : 15;
 if(isExist(func)){
    eval(func + args);
    trycount=0;
 }else if(trycount < dur){
    trycount++;
    setTimeout("tryFunction(\""+func+"\",\""+args+"\","+dur+","+trycount+")", 100);
 }
}

tryFunction ise daha karmaşık, ayrıca isExist() fonkisyonunada bağımlı,şu şekilde çalışıyor, fonksiyon ismi ve argumanları verildiğinde bulana kadar deniyor bulursa da çalıştırıyor, bulamazsa hata vermeden çıkıyor.
iki şekilde kullanabilirsiniz,
ya tryFunction("funcName","(a,r,g,s)")
yada tryFunction("funcName","(a,r,g,s)",45)
sonuna eklediğiniz rakam fonksiyonu çalıştırmayı kaç kere deneyeceğini belirtiyor.
Buradaki 45, 4.5 saniye ye denk geliyor. hiç birşey vermezseniz de default olarak 15 alıyor.

function printInDiv(str,cnt){
 cnt = (cnt)? cnt : 0;
 if(document.getElementById('idDiv')){
    document.getElementById('idDiv').innerHTML = str;
 }else if(cnt < 45){
    cnt++;
    setTimeout("printInDiv('"+str+"',"+ cnt +")", 100);
 }else
    return false;
}

Bu bir fonksiyon değil bir yöntem,
burada varsayalım ki "printInDiv" diye bir fonksiyonumuz varmış ve biz bunu printInDiv("hello world") şeklinde kullanıyormuşuz. Ancak içine yazı koyulacak div, ajax'la geldiğinden ve hala yüklenmediğinden div element'inin orada olup olmadığını kontrol etmemiz gerek. fonksiyonu bu şekilde modifiye ettiğiniz zaman ya elementi bulup çalışıp durucak yada kendi kendisini 45 kere çağırıcak bulamayıncada hata verip durucak yine burda da 45, 4.5 saniye demek.

fonksiyonun eski hali şu şekildeydi

function printInDiv(str){
   document.getElementById('idDiv').innerHTML = str;
}

Bu yöntemler benim gerçekten çok işime yaradı umarım sizde faydasını görürsünüz.
İyi çalışmalar.

Bütün Form elementlerini değer olarak tanıtma, extract()

Merhaba,
Geçenlerde bir kod yazdım ve sizinle paylaşmak istedim. Bu kod body->onload event'inde çalıştırldığında bir form element'ini adeta

var textbox = document.getElementById("textbox");

şeklinde tanıtmışsınız gibi bütün elementleri yakalayıp id'lerine göre tanıtıyor.
Bu function'ın çok benzeri PHP'de de var yine extract ismiyle.
Neyse işte kod.

function extract(){
var ie = (document.all)? "var " : "";
var allelems = document.body;
for(var x=0;x < allelems.childNodes.length;x++){
  if(allelems.childNodes[x].id){
      eval(ie + allelems.childNodes[x].id + " = document.getElementById('"+ allelems.childNodes[x].id +"');");
  }
}
}

Bu fonksiyonun bazı problemleri var mesela body->onload'da luzümsüz şeyleri çalıştırmak programınızı yavaşlatabilir.
bunun yanında eğer form'unuzdaki elementlere id'olarak allocated isimler verdiyseniz. yani "window", "document", "if", "for", "while" gibi bu isimlerle değer tanıtmaya çalışacağından sorun yaratabilir.

Aslında bu probleminde bir çözümü var, değerleri şu şekilde:

var textbox = document.getElementById("textbox");

tanıtmak yerine, bu şekilde tanıtın.

var elems = new Array;
elems["textbox"] = document.getElementById("textbox");
elems["textbox2"] = document.getElementById("textbox2");

Bu sorunu çözecektir. size formdaki bütün elementleri içeren bir associative array vericek.

Çokta kullanışlı bir function olmadığını biliyorum. ancak bazı özel durumlarda mesela dosya boyutunu düşürmede kullanılabilir. neyse umarım işinize yarar,
iyi çalışmalar.

JavaScript Debugger and Trace Tool

Hi, people.
Here is the tool that i wrote it for my self,
i sick of using alert() and i wrote a trace tool.
it can show you the errors also you can use it to prompt any thing on it, just like using alert().
also you don't have to add any code onto your site. just call the trace.js at very top of your page and it will run it by itself.
to promp on screen just use it like alert() but call it as trace("helloworld");
it's quite simple. it work on almost all browsers.
best part is, this tool is in a floating windows so this means you can place it anywhere in your page.
You can see the working version here
-----
There is a watch property I currently added. watch is not perfect but at least you can fallow hidden fields or that kind of thing by just giving their id's.
-----
you can find the code here

Color Picker, Basit bir renk seçme aracı

Web sitenizde renk seçilmesi gereken bir yer için bu kodu kullanabilirsiniz olduça basit olduğu için geliştirmeniz gerekebilir. bir div'in içinde açılmasını yada floating olmasını sağlayabilirsiniz. orası size kalmış ben örneği buraya ekliyorum sadece :)


Örnek kod için buraya

Rating Stars, Websitenize Yıldız Temalı Rating Ekleyin.

Bir çok sitede gördüğünüz rating yıldızcıklarını artık kendi sitenizede ekleyebilirsiniz.
İşlem oldukça basit.

Öncelikle yıldız resimlerinin içinde bulunacağı bir table yapmalıyız.

<table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)">
<tr>
  <td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td>
  <td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td>
  <td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td>
  <td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td>
  <td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td>
</tr>
</table>

table'a ilk baktığımızda sanki ayrı ayrı yıldızlar varmış gibi gözükmesine rağmen aslında toplamda altı resim var.
Bir tane bütün yıldız ların sönük olduğu resim, ardından bütün yıldızların yanık olduğu resme kadar sırayla artan 5 resim daha. bu mantıkla işlem bir anda bebek işine dönüşüyor.
Şimdi kod'a dikkat ettiyseniz 3 adet function görürsünüz
bunlar
changeRate()
rate()
resetRate()
Ayrıca table'a birde background-image verdim bu image sıfır rating'i temsil ediyor.
functionların Şimdi hepsini bir bir açıklayalım Örnek kodu'da altta

function changeRate(val){
  document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";
}

function rate(val){
  document.getElementById('rated').value = val;
}

function resetRate(elem){
  var val = document.getElementById('rated').value;
  if(val == "")
      elem.style.backgroundImage="url(star0.gif)";
  else
      elem.style.backgroundImage="url(star"+val+".gif)";
}

onMouseMove event'inde çağırdığımız changeRate function'ı mouse'u üzerine getirdiğimiz TD'ye göre Table'ın background image'ını değiştiriyor. buda yıldızların dolma boşalma efektini oluşturuyor.
funtion table'ı id'sinden yakalayıp backgraound image olarak daha önceden hazırladığımız ve akıllıca isimlendirdiğimiz yıldız resimlerini atıyor. akıllıca diyorum çünki verdiğimiz isimler şöyle
star0.gif
star1.gif
star2.gif
vs.
hangi rating verildiyse
"star"+val+".gif"
diyerek sadece bir seferde if kullanmadan resimlere ulaşabiliyoruz.
bu tarz dosya isimleri çoğu zaman hayat kurtarır.
---
onMouseClick event'inde çağırdığımız rate function'ı tek değer alıyor. buda rating değeri.
function basitçe kendisine gönderilen değeri bir textbox'ın içine yazıyor. seçilen değeri bir yerlerde tutmalıyızki daha sonra yıldızlarımız kaç seçtiğimizi hatırlayabilsin.
bu function aslında en önemli function çünki oylama burda yapılıyor ve gerçek bir uygulamada bütün içeriği bu function'a yazmanız gerekebilir. isterseniz direk PHP ile istereniz (ki daha uygun) AJAX ile seçili değeri database'inize gönderebilirsiniz. textbox yerine hidden field kullanabilirsiniz ben burda demo olduğu için bir textbox kullandım.

Rating:
<input type="text" id="rated" />

---
Üçüncü ve son functionda resetRate Function'ı mouse'umuzu yıldızların üzerinden çektiğimizde değerlerini unutmamalarını ve göstermeye devam etmelerini sağlayan function. bu function'ı yıldızların tamamını kapsayan table'ın onMouseOut event'ine koyduk ki mouse terk ettiğinde çalışsın.
function direkt textbox'ımızın içindeki değere bakıyor. eğer textboxda hiçbirşey yoksa sıfır nolu resmi eğer bir değer varsada changeRate'de yaptığımız gibi o değerin resmini çağırıyor. bu functionda textbox'ın içindeki değeri doğrulayan herhangi bir kontrol kod'u koymadım çünki zaten büyük olasılıkla hidden kullanıcaksınız.
--
kodlar gayet basit olduğuiçin istediğiniz gibi düzenleyebilirsiniz. Örnek kod için buraya