Genel yazım kuralı

İşlevler kodlamayı bir araya toplar: denetim yapıları, işlemler, yöntemlerin hesaplamaları vb. (normal kodlamalar gibi). Bu işlevler daha sonra gerek olunca çağrılır. Kodlamanızda yinelemek gereği duyulmadan istendiğinde kullanılmış olur.

İşlevler aşağıdaki yapılardan birini kullanarak yazılır:

Normal işlev yapıları

    function nameOfFunction(listOfVariableNames) {
      işlev kodu buraya yazılmalıdır
    }

Nesne yöntemleri için bu yazım kuralı kullanıldığında, Nestcape 4 gibi eski sürümler 'this' sözcüğünde sorun çıkarır.

    nameOfFunction = function (listOfVariableNames) {
      işlev kodu buraya yazılmalıdır
    };

    nameOfFunction = function anotherNameForTheFunction(listOfVariableNames) {
      function code should be written here
    };

Bu özel durumda, işlev atandığı ve normal tanımlanmadığı için anotherNameForTheFunction adı işlevin içinde işlevin kendisini belirtecek biçimde kullanılır, fakat işlevin dışındaki kod bunu göremez bile (bazi tarayıcıların özellikle IE bunu doğru yorumlamaz, bu nedenle kodlama biçiminde konuya çok da bağımlı kalınmamalıdır. Aşağıda gösterilen arguments.callee daha iyidir).

İşlev Sınıf yapısı

    functionName = new Function("işlev kodu buraya yazılır");

    functionName = new Function("varName","varName2","etc.","function code");

İşlevler aşağıdakilerden biriyle çağrılır:

• islev_adi(Ğarametre_listesi);
• window.islev_adi(Ğarametre_listesi);
• object.onEventName = islev_adi;

Normal işlev tanımlama adımları 'if' deyimi içinde yaratılmamalıdır (ya da benzeri denetim yapısında). javascript 1.5 tanımlamalarında bu konu vardır, ama ECMAScript 3 (javascript 1.5 için çekirdek dil tanımıdır) ile çelişkili olur. Sonuç olarak bazı tarayıcılar izin verir, bazıları izin vermez. Bu konuya pek bağımlı kalmak doğru olmayabilir.

İşlevlere değişken geçirme

İşleve geçirilen değişkenlere argumanlar da denir.

İşlevi çağırırken, parantezler içinde yazılan değişkenler ve değerler, işlev tanımında parantez içinde yazılan değişkenlere atanır.

function checkval(passvar) {
  //Bu işlev "checkval('hello')" biçimde çalıştırılırsa
  //passvar değeri 'hello' olur.
  if( passvar != "" ) {
    document.myform.mytextinput.value = passvar;
  }
}

Bu işlev çağrıldığında, "passvar" değeri boşluk değilse yazı giriş alanına atanır.

Örnek olarak HTML aşağıdakileri tanımlar:

<input type="button" onClick="checkval('pygmy')">

Kullanıcı düğmeyi tıkladığında, yazı giriş alanının değeri 'pygmy' olur.

işleve birden çok değişken geçirilebilir. İşlev değişkenleri virgülle birbirinden ayırır.

function IslevAdi(degisken1,degisken2,degisken3,vb.) { işlev kodu }
IslevAdi(5,6,7,vb.);

function IslevAdi() { işlev kodu }
IslevAdi();

Eğer son işlev aşağıdaki gibi çağrılmış olsa:

functionName(1,2,3,myVar,window,'stringy bit')

Değişkenler işleve hala geçirilir ama onlara erişim ancak arguman toplanmasından (collection) olur (referenceToFunction.arguments biçiminde değişkenlere erişilir)

İşlev tanımında argumanlar belirtilmemiş olsa da arguman birikimi kullanmak mümkündür. Ya da bazı parametreleri tanımlayıp bazılarını tanımlamamak ve arguma birikimiyle onlara erişmek mümkündür.

function functionName(variable1,variable2) {
  window.alert(variable1); //alerts 5
  window.alert(arguments[0]); //alerts 5
  window.alert(variable2); //alerts 6
  window.alert(arguments[1]); //alerts 6
  window.alert(arguments[2]); //alerts 7
  window.alert(functionName.arguments[3]); //alerts 8
}
functionName(5,6,7,8);

Arguman birikiminin çok kullanışlı bir özelliği vardır: argument.callee. Bu işlevin kendisine erişimdir. Bunun anlamı, anonim bir işlevin içindeki kod onu çağıranla ilgili bilgiye erişebilir. Bu özellik eski tarayıcılarda kullanılamaz.

return deyimini kullanma

'return' deyimi işlevin o noktada son bulması anlamına gelir. İşlevi çağırdığı yerden kodlama çalışmaya devam eder.

function doWhatever() {
  var apod = Math.pow(3,7);
  return;
  // ne olursa olsun
  // aşağıdaki kod çalışmaz
  apod *= 34;
  if( 700 * 3 <= apod ) {
    return;
    //return koşullu deyimin bir parçasıdır.
    //kendisine dönmesi daha kullanışlıdır.
  } else {
    window.alert('Kodlamada hata oldu');
  }
}

function appendComment(passvar) {
  //Burada bir yazı dizisi parametre olarak geçer ve sonuç yine
  //yazı dizisi değişkenidir. Her tür değişken tipi geri döndürülebilir.
  passvar += ' yardım almadan';
  return passvar;
}

var myString = appendComment('Kendim yaptım,');
//myString şimdi 'Kendim yaptım, yardım almadan' olur.

Eğer kodunuzun eski tarayıcılarda da çalışmasını isterseniz, 'return' deyiminde kodunuz bir değer döndürmelidir. Netscape 4 sürümlerinden bazıları hata mesajı verir.

Renk değiştirme işlemini ele alalım. Şimdi sürekli olarak aynı işlev çalışmalı ve yavaş yavaş bir renkten diğerine geçiş olmalı. Bunun için yazılan kodlama renk geçişini yapacaktır. Kodlama bir işlevin parçası olarak çalışır. Bu işlev bir sonrakinde çalışırken gereken renk kodunu işlev sonucu olarak döndürür.

function fadeColour( fromcol, tocol, fadePortion ) {
  //kalıpta fadeColour( 'ff0098', 'fe0934', 0.23 ) olur
  var oF = [], oT = [], oP = [];
  var oH = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
  //kirmizi, yesil ve mavi alt dizileri al...
  for( var x = 0; x < 3; x++ ) {
    //... onları hex sayidan ondaliga cevir
    oF[x] = eval( '0x' + fromcol.substring( 2 * x, ( 2 * x ) + 2 ) );
    oT[x] = eval( '0x' + tocol.substring( 2 * x, ( 2 * x ) + 2 ) );
    //... ikisi arasindaki farki degisecek oran olarak ekle
    oP[x] = Math.round( oF[x] + ( ( oT[x] - oF[x] ) * fadePortion ) );
    //... ve tektrar hex bicimine donustur...
    oP[x] = oH[ ( oP[x] - ( oP[x] % 16 ) ) / 16 ] + oH[ oP[x] % 16 ];
  }
  //... yeniden reng dizisi biciminde hepsini topla
  return '#' + oP.join('');
}

for( var y = 0; y < 10; y++ ) {
  //10 adimda, rengi degistir - kodlamayla yazarak bölümünde olanlari gor
  document.write( 'Fade!<\/span> ' );
}

for( var y = 0; y < 12; y++ ) {
  //12 adimda, rengi degistir
  document.write( 'Fade!<\/span> ' );
}

Uyarı, bir işlevden değer döndürüyorsanız, işlevi doğrudan <a href= yöntem biçiminde çağırmayın. Bir çok tarayıcı yeni sayfa açar ve sayfada da yalnız işlevin dönen değeri vardır. Hala 'return' yalnız başına kullanılabilir. Hatta 'return' bir işlev bir başkasından çağrılmışsa güvenle değer döndürebilir.

<a href=yöntem biçimini kullanmak zorunda kalırsanız void işlemini kullanın.

Bir çok olayda 'false' döndürmek işlemin kesilmesine neden olur. Örneğin bir kullanıcı form gönderse, 'false' döndürmek formun gönderilmesini engellemek olur. Tek ayrıcalık 'onmouseover'. Burada true döndürmek farenin üzerinde olmasının etkisini durdurur (örneğin bağlarda true dönmesi, durum (status) satırında bağın URL adresi görüntülenmesini bitirir).

Değişken Kapsama Alanı

Javascript gibi dillerin değişken kapsama alanı çok önemli bir özelliktir. Biraz karışık görünse de biraz zaman ayırılmalı ve öğrenilmelidir.

Basit bir kodlamada birçok değişken ve işlev vardır. Aşağıdaki örnekte:

var a = 1, b = 2, c = 3;
function sample() {
  var d;
  a = 7;
}
sample();
alert(a);

a,b ve c değişkenleri hiç bir işlevin içinde değildir. O halde bunlar evrensel kapsama alanı içindedir. Her yerden onlara erişilebilir. Buradaki 'sample' işlevi de evrenseldir. Çünkü bir başka işlevin içinde değildir. Başka bir yerden bir kod bunların içeriğini değiştirirse, bu içerik herkese açık olur.

'd' değişkeni 'sample' işlevinin içinde tanımlanmıştır. Bunun anlamı: "Yalnız bu işlevin içindeki kod onu kullanabilir" demektir. Bu kavram tüm işlevler için geçerlidir. İçlerinde tanımlanan bir değişken yalnız o işlev içinde kullanılabilir (Kodlama o işlevin içinde tanımlanmış gibi algılar). Şimdi kodda aşağıdaki değişiklik yapılmış olsun:

var a = 1, b = 2, c = 3;
function sample() {
  var a, d;
  a = 7;
}
sample();
alert(a);

Burada 'a' değişkeni işlev içinde yeniden tanımlanmıştır. 'var' anahtar kelimesi kullanılarak tanımlandığından, her iki 'a' değişkeni de birbirinden bağımsızdır. İşlev içinde bu değişkene yapılan değişiklikler yalnız içte tanımlanan değişkeni etkiler. Evrensel değişken etkilenmez. Yani 'alert' sonucu '1' olur.

Eğer işlev içindeki kod, dışarıdaki (evrensel) değişkene erişmek isterse Javascript kodlamasında 'window' kullanılır. İşlev içindeki kod window.a diyerek evrensel değişkene ulaşır. Bu nedenle hem alert hem de window.alert kullanılmaktadır.

İç içe İşlevler

Başka işlevlerin içinde işlevler tanımlanabilir. Basit olarak bir kodun içinde başka bir işlev tanımlama aşağıda gösterilmiştir:

var a = 1, b = 2, c = 3;
function sample() {
  var a, d, e;
  function anothersample() {
    var e, f;
  }
  anothersample();
}
sample();

Bu örnekte 'anothersample' işlevi yalnız 'sample' işlevi içinde vardır. Kapsamlar da iç içe olur. Bu durumda 'anothersample' evrensel kapsama alanındaki b ve c değişkenlerine erişebilir. Aynı kapsama alanından a ve d'ye de erişebilir. Kendi kapsama alanındaki e ve f de erişilen değişkenlerdir. Ayrıca window.a ile evrensel kapsama alanından değişkenlere de erişebilir.

İç içe tanımlanmış işlevlerden evrensel değişkene atama yapılırsa, bu değişken üzerinden işleve erişilebilir.

Kapsamların bellekleri var

Kapsamlar aslında çok beceriklidirler (Zamana yayılmış olmalarından olsa gerek). Örnek: Bir işlev içindeki kodlama yerel değişken yaratsın. Daha sonra bir bağ tıklanınca başlayacak bir olay yakalama işlemi olsun. Kısacası aşağıdaki kodlama olsun:

function sample() {
  var a = 20;
  document.links[0].onclick = function () {
    alert(a);
  };
}
sample();

Olay yakalayıcı işlemi kodlamanın yaratılmasından çok sonra olacak bir şeydir. Ama 'a' değişkeni vardır. O halde alert 20 sayısını görüntüler.

Kapsamları kullanarak Çelişkiden Korunmak

Bir çok evrensel değişken ve işlev kullanan bir kodlama olduğunu varsayalım. Aynı sayfaya bir başka işlev eklemek isterseniz daha önceki işlevle benzer olması nedeniyle evrensel değişkenlerin çelişme olasılığı vardır. Bu sorunu geçmenin bir yolu, kodu bir işlevin içine yerleştirmek ve işlevi çalıştırmaktır. Bu yönüyle, işlevin yerel kapsamı değişkenlerin birbirlerini ezmelerini önler ama değişken tanımlarının doğru yapılmış olması gerekir.

Evrensel bir işlev tanımlamadan yapmanın diğer bir kolay yöntemi, anonim bir işlev üretmek ve onu parantezler içine almaktır (yorumlayıcı herşeyi bir işlev tanımı altına almış olur). Sonra aç, kapat parantezleri kullanarak hemen çalıştırılır. Bu biraz tuhaf gözükse de çalışmaktadır.

(function () {
  //Put your script code in here
})();