Javascript Programlama Dili

Yahoo! javascript mimarı Douglas Crockford’un javascript eğitim videolarını belki duymuşsunuzdur. Javascript bildiğimi düşünürken, aslında bu dilin birçok güzelliğinden haberdar olmadığımı bu videoları izleyince anladım.

Şimdi bu videoları tekrar izleyerek, özet olarak aldığım notları sizinle paylaşmak istedim. Hem İngilizce bilmeyen web programcıları bu bilgilerden faydalanmış olur, hem de elimizde gerektiği zaman bakabileceğimiz yazılı bir doküman bulunmuş olur. İnşallah faydalı olur temennisiyle başlıyorum:

Javascript’te Sayılar

Javascript’te sadece bir sayı tipi vadır: Double

Double tipi her zaman beklediğimiz gibi çalışmaz. Örneğin, double tipinde 0.1 + 0.2 = 0.30000000000000004’tür. Bu yüzden para ile ilgili hesaplar yapılırken çok dikkatli olmak gerekir. Double tipi ile ilgili bu problem bütün programlama dillerinde mevcuttur, javascript’e özel bir problem değildir.

NaN Değeri

NaN diye özel bir değer vardır. “Not a Number” (sayı değil) demektir. Tanımsız veya hatalı işlemlerin sonucu NaN olur. Herhangi bir işlemde sayılardan biri NaN ise, sonuç da NaN olur.

NaN hiçbir şeye eşit değildir. NaN’a da eşit değildir.

Pek mantıklı değil ama, typeof(NaN) = “number”dır.

Number(deger) şeklinde bir fonksiyon vardır. String tipli değeri sayıya çevirir. Eğer çevirme işleminde bir problem varsa sonuç NaN olur. Aynı işlem + öneki ile de yapılabilir.

parseInt Deyimi

Sadece tamsayıları ayrıştırmak (parse etmek) için parseInt isimli bir fonksiyon vardır. Bu fonksiyon sayı olmayan ilk karakterde durur. parseInt kullanılırken taban mutlaka yazılmalıdır. Çünkü;

• parseInt(“08”) = 0
• parseInt(“08”, 10) = 8

String Tipi

String tipi mevcuttur. Char tipi mevcut değildir. Char için 1 karakter uzunluğunda string kullanılır.

String’ler sabittir. Oluşturulduktan sonra değiştirilemez. Örneğin 2. karakter “c” olsun veya 3. karakter’den sonra araya “sinan” ekle denilemez. Bu tür işlemler için yeni bir string oluşturulur.

String’lerde tek tırnak da çift tırnak da kullanılabilir. Bu ikisinin hiçbir farkı yoktur.

String(deger) şeklinde bir fonksiyon vardır. Verilen değeri string’e çevirir.

String’ler birer nesnedir ve charAt, concat, indexOf, … gibi metotları vardır.

Boolean Tipi

2 adet boolean değer vardır: true ve false.

Boolean(deger) şeklinde bir fonksiyon vardır. Verilen değeri boolean’a çevirir. !! öneki ile de aynı işlem yapılabilir.

null Değeri

null değeri vardır. null hiçbir şey demektir.

undefined Değeri

undefined değeri vardır. Değişken ve parametrelerin varsayılan değeri undefined’dır. Değişken tanımlanırken başlangıç değeri verilmezse başlangıç değeri undefined olur. Nesnelerin olmayan bir üyesinin değeri istendiğinde sonuç undefined olarak döner.

False ve True kabul edilen değerler

Aşağıdaki değerler false kabul edilir:

• false
• null
• undefined
• “” (Boş string)
• 0
• NaN

Yukarıdakiler hariç diğer tüm değerler (tüm nesneler dahil) true kabul edilir. “0” ve “false” tırnak içinde yazıldığı için birer string’dir ve dolayısıyla true kabul edilir.

Büyük/Küçük Harfler

Tüm anahtar kelimeler (keywords) küçük harftir. Bazı metotlar (fonksiyonlar) camelCase’tir.

Javascript büyük/küçük harfe duyarlıdır.

Nesneler ve Üyelerine Erişim

new Object() denilerek boş bir nesne oluşturulabilir. Daha önceden oluşturulmuş bir nesneye sonradan yeni üyeler (değişkenler, fonksiyonlar, vs.) eklenebilir.

Üyelere nesne.uye şeklinde veya nesne[“uye”] şeklinde erişilebilir.

Değişkenler

Herhangi bir tip, değişkende saklanabilir, fonksiyonlara parametre olarak gönderilebilir, fonksiyonlardan return ile döndürülebilir.

Değişkenlere değer olarak fonksiyon atanabilir.

var a = function() {
	alert("merhaba");
};

Değişken adları harf, _ veya $ ile başlar, harf, rakam, _ veya $ ile devam eder.

Tüm değişken, parametre, üye ve fonksiyonlar gelenek üzere küçük harfle başlar. Kurucu fonksiyonlar (constructor’lar) büyük harfle başlar.

+ Öneki

+ öneki string’leri sayıya çevirmek için kullanılabilir.

• +”42” = 42
• Number(“42”) = 42
• parseInt(“42”, 10) = 42
• +”3” + (+”4”) = 7

== ve != Operatörlerinin Yerine === ve !== Operatörleri

== ve != operatörleri karşılaştırma için kullanılır. Ancak bunların yerine === ve !== kullanılması tavsiye edilir. Çünkü bu operatörler hem değerleri hem de tipleri karşılaştırır:

• “4” == 4 işleminin sonucu: true
• “4” === 4 işleminin sonucu: false
• “4” != 4 işleminin sonucu: false
• “4” !== 4 işleminin sonucu: true

&& Operatörü

Mantıksal && operatörü şu şekilde çalışır: a && b işleminde, a true kabul edilen bir değerse ise sonuç b’dir. a false kabul edilen bir değerse ise sonuç a’dır. Burada a ve b’nin boolean olması şart değildir. Dolayısıyla bu işlemin sonucu a veya b olacağı için, sonuç boolean olmak zorunda değildir.

if (a) {
	return a.uye;
}
else {
	return a;
}

Bu mantıkla, yukarıdaki ifade şu şekilde de yazılabilir:

return a && a.uye;

|| Operatörü

Mantıksal || operatörü şu şekilde çalışır: a || b işleminde, a true kabul edilen bir değerse ise sonuç a’dır. a false kabul edilen bir değerse ise sonuç b’dir. Aynı şekilde, burada a ve b’nin boolean olması şart değildir. Dolayısıyla bu işlemin sonucu a veya b olacağı için, sonuç boolean olmak zorunda değildir.

var sayi;
if (girilen_sayi) {
	sayi = girilen_sayi;
}
else {
	sayi = eleman_sayisi;
}

Bu mantıkla, yukarıdaki ifade şu şekilde de yazılabilir:

var sayi = girilen_sayi || eleman_sayisi;

! Operatörü ve !! Şeklinde Kullanımı

!a işleminde, a false kabul edilen bir değerse sonuç true, true kabul edilen bir değerse sonuç false olur. Bu mantıkla !!a işlemi, ya da başka bir deyişle !(!a) işlemi, a değerini boolean tipine dönüştürmek için kullanılabilir. !!”” = false, !!”sinan” = true olur.

Bitwise Operatörleri

Bitwise operatörleri &, |, ^, >>, >>> ve << kullanılırken, operand 32-bit işaretli tamsayıya dönüştürülür, sonra da tekrar 64-bit ondalıklı sayıya dönüştürülür. Bu yüzden, daha hızlı çalışır düşüncesiyle, örneğin sayıyı 2 ile çarpmak yerine bitleri kaydırma işlemi yapılırsa, tahmin edilenin aksine, bu işlem daha yavaş çalışır.

Deyimlere Etiket Verme

Deyimlere etiket verilebilir.

dongu: for (;;) {
	...
	if (...) {
		break dongu;
	}
	...
}

Yukarıdaki kod parçasında görüldüğü gibi break deyiminin hangi döngüyü kıracağı belirtilebilir. Böylece, iç içe döngüler varsa, gerektiği takdirde, en dıştaki döngü kırılabilir.

switch Deyimi

switch deyiminde, switch değeri sayı olmak zorunda değildir. String de olabilir. Ayrıca, case değerleri sabit olmak zorunda değildir, ifade de olabilir.

Değişken Kapsamları

{ bloklar } değişkenler için kapsam belirtmez. Sadece fonksiyonlar kapsam belirtir. Yani bir fonksiyonun içinde tanımlanmış değişkenler fonksiyonun dışında kullanılamazlar. Ama fonksiyonun içindeki herhangi bir blokta tanımlanmış değişkenler, o fonksiyonun içinde her yerde (o bloğun dışında dahi olsa) kullanılabilir.

function f() {
	for (var i = 0; i < 1; i++) {
		var a = 5;
	}
	return a; // Hata vermez, 5 döndürür
}

Varolan Değişkenlerin Yeniden Tanımlanması

Aynı isimle 2 kez değişken tanımlanırsa, değişken sadece 1 kez oluşturulur ve bunun için hata üretilmez.

var a = "sinan";
var a = "ilyas"; // Hata vermez, önceden oluşturulmuş a değişkenine “ilyas” değerini atar

return Deyimi

return deyimi mutlaka bir değer döndürür. return’den sonra bir ifade yazılmamışsa (return;) undefined değeri döndürülür. Bunun bir istisnası vardır: Kurucu fonksiyonlarda varsayılan return değeri this‘tir.

Nesneler

Javascript’te nesneler birer isim/değer koleksiyonudur. Veri ve metotlar içerebilir, başka nesnelerden miras alabilirler. İsim/değer koleksiyonundaki isim herhangi bir string olabilir. Değer ise herhangi bir tip, hatta başka bir nesne olabilir. İsim tırnak içinde yazılabilir, ama bu isteğe bağlıdır.

var nesne = {
	isim: "Sinan",
	'varisYeri': 'Trabzon',
	harf: 'A',
	seviye: 3
}

var a = nesne.isim;
var b = nesne.varisYeri;
var c = nesne["harf"]; // nesne.harf yazmak yerine bu şekilde de yazılabilir

Nesne oluşturmak için aşağıdaki gibi bir fonksiyon da yazılabilir:

function nesneOlustur(isim, varisYeri, sinif, seviye) {
	var n = {}; // Boş nesne
	n.isim = isim;
	n["varisYeri"] = varisYeri;
	n.sinif = sinif;
	n.seviye = seviye;
	return n;
};

var nesne = nesneOlustur("Sinan", "Ankara", "A", 3);

Nesne İçinde Nesne

Nesnelerin içindeki değerler başka nesneler de olabilir:

var nesne = {
	isim: "Sinan",
	format: {
		genislik: 1920,
		yukseklik: 1080
	}
};

Parametre Olarak Nesneler

Fonksiyonlar çağrılırken parametre olarak nesne gönderilebilir:

yazdir( {isim: "Sinan", yer: "Ankara"} );

Yukarıda görüldüğü gibi, yeni bir nesne oluşturmak için { } parantezleri yeterlidir. Herhangi bir kurucu fonksiyon çağırmaya gerek yoktur.

Fonksiyonlara çok fazla parametre göndermek gerektiğinde, bunun yerine bir tek nesne göndermek çok daha kullanışlıdır.

function superDiv(genislik, yukseklik, sol, ust, zIndeks, pozisyon, renk, gorunurluk, html, cssSinifi)
 
function superDiv(divOzellikleri)

Nesnelere Yeni Üyeler Ekleme

Basit bir atama işlemiyle, nesnelere sonradan yeni üyeler ilave edilebilir.

nesne.gorunum.renk = 'red';
nesne["isim"] = 'sinan';

Nesneler Arasındaki Gizli Bağ

Nesneler oluşturulurken başka bir nesneye gizli bir bağ kurulabilir.

var yeniNesne = object(eskiNesne);

var a = yeniNesne.seviye; // 3 değeri atanır

Bu bağ sadece tek yönlü çalışır. Yeni oluşturulan nesnenin üyelerinin değerleri değiştirildiğinde, eski nesnenin üyelerinin değerleri değişmez.

yeniNesne.ad = 'ahmet';
yeniNesne.seviye  = 4;
yeniNesne.sehir = 'trabzon';

Yeni bir nesne oluştururken, dinamik bir bağ oluşturmak yerine, eski nesneyi kopyalayarak bağımsız yeni bir nesne oluşturmak mümkün değildir.

Yeni Nesne Oluşturma Şekilleri

Yeni nesne oluşturmanın 3 yolu vardır:

var a = new Object();
 
var b = { };
 
var c = object(Object.prototype);

Bunlardan { } parantezlerinin kullanılması önerilir.

Nesnelerin Referans Olarak Gönderilmesi

Fonksiyonlara parametre olarak gönderilen nesneler ve fonksiyonlardan return ile döndürülen nesneler, değer olarak değil referans (hafızada saklandığı adres) olarak gönderilir.

=== operatörü değerleri değil referansları karşılaştırır.

Nesnelerin Üyelerinin Silinmesi

delete operatörü ile nesnelerin üyeleri silinebilir.

delete nesne[ad];

delete operatörünün aslında yaptığı şey, ilgili üyenin değerini undefined olarak değiştirmektir.

Diziler

Diğer dillerden farklı olarak, Javascript’te Array’ler Object’ten miras alır.

Dizilere [ ] parantezleri kullanılarak ilk değer verilebilir.

var dizi = ['sinan','ahmet','mehmet'];

length İsimli Üye

Dizilerin length isimli bir üyesi vardır ve her zaman en büyük indeksin bir fazlasını verir.

Yeni Dizi Oluşturma

Yeni dizi oluştururken new Array() ve [ ] kullanılabilir. Bunlardan [ ] parantezlerinin kullanılması tavsiye edilir.

delete Operatörü ve splice Metodu

delete operatörü ile dizilerin elemanları silinebilir.

delete dizi[5];

Ancak bu şekilde silindiğinde numaralandırmada bir boşluk kalır. Çünkü aslında yapılan şey dizinin belirtilen elemanının değerini undefined olarak değiştirmektir. Bunun yerine splice kullanılırsa, eleman silindikten sonra, numaralandırma yeniden düzenlenir.

dizi.splice(5,1);

Dizilerden Miras Alma

Dizilerden düzgün bir şekilde miras alınamaz. Bu yüzden dizilerin prototip olarak kullanılması tavsiye edilmez. Çünkü bu şekilde oluşturulan nesneler dizi özelliği taşımaz. Dizinin değerlerini ve metotlarını miras alır, ama örneğin length üyesini almaz.

Dizilere Metot Ekleme

Dizilere sadece değerler değil, metotlar da eklenebilir. Çünkü diziler de aslında birer nesnedir.

Fonksiyonlar

Fonksiyonlar herhangi bir değer gibi değişkenlerde saklanabilir, diğer fonksiyonlara parametre olarak gönderilebilir ve return ile döndürülebilir.

Fonksiyonlar Object’ten miras alır ve isim/değer çiftleri barındırabilir.

Aşağıdaki iki ifade tamamen aynı anlama gelmektedir.

function yaz() { }
var yaz = function() {};

Fonksiyonlar, herhangi bir deyimin yazılabileceği her yerde (örneğin, başka bir fonksiyonun içinde) tanımlanabilirler.

İç içe fonksiyonlar yazıldığında, içteki fonksiyon, dıştaki fonksiyonun tüm değişkenlerine ve parametrelerine erişebilir.

Dıştaki fonksiyonun işletilmesi tamamlandıktan sonra dahi, içteki fonksiyon dıştaki fonksiyonun üyelerine erişebilir. Örneğin;

function fade(id) {
	var dom = document.getElementById(id), level = 1;
	function step() {
		var h = level.toString(16);
		dom.style.backgroundColor = '#FFFF'   h   h;
		if (level < 15) {
			level  = 1;
			setTimeout(step, 100);
		}
	}
	setTimeout(step, 100);
}

Yukarıdaki fade isimli fonksiyon id’si parametre olarak gönderilen nesnenin arkaplan rengini sarıdan beyaza çevirir. Bu fonksiyon çalıştığında, önce dom ve level isimli iki değişken tanımlanır, sonra step isimli fonksiyon tanımlanır (çalıştırılmaz, sadece tanımlanır), daha sonra setTimeout deyimi ile 100 milisaniye sonra step fonksiyonunun çalıştırılması gerektiği sisteme bildirilir. Sonra da fade isimli fonksiyonun çalışması sona erer. Ancak, 100 milisaniye sonra sistem step isimli fonksiyonu çalıştırmaya başlar. Bu fonksiyon çalışmaya başladığında fade fonksiyonunun çalışması çoktan sona ermiş olmasına rağmen, fade fonksiyonunun level ve dom isimli değişkenler step fonksiyonunun içinde kullanılır.

Fonksiyonlar değer olarak kullanılabildiği için, nesnelerin fonksiyonları olabilir. Nesnelerin içindeki fonksiyonlara metot denir.

Fonksiyonlara gerektiğinden fazla parametre gönderilirse (örneğin, 3 parametreli bir fonksiyona 5 parametre gönderilirse), fazladan gönderilen parametreler görmezden gelinir. Gerektiğinden az parametre gönderilirse, eksik kalan parametrelere undefined değeri verilir. Her iki durumda da hata oluşmaz.

Fonksiyonların Çağrılma Biçimleri

Fonksiyonlar 4 farklı biçimde çağrılabilir:

Fonksiyon biçimi

fonksiyonNesnesi(parametreler)

Metot biçimi

nesne.metotAdi(parametreler)
nesne[“metotAdi”](parametreler)

Kurucu (constructor) biçimi

new fonksiyonNesnesi(parametreler)

Apply biçimi

fonksiyonNesnesi.apply(nesne,[parametreler])

this

Bir fonksiyon, fonksiyon biçiminde çağrıldığında this, global nesnedir (Bundan daha sona bahsedilecektir).

Bir fonksiyon metot biçiminde çağrıldığında this, fonksiyonun sahibi olan nesnedir.

Bir fonksiyon kurucu biçiminde (new operatörü ile) çağrıldığında, yeni bir nesne oluşturulur ve bu nesne this’e atanır. Eğer return ile bir değer döndürülmüyorsa, undefined yerine this döndürülür.

Özetle, this, fonksiyona gönderilen gizli bir parametredir. Bu parametrenin değeri ise fonksiyonun çağrılış şekline göre değişir:

arguments

Bir fonksiyon çağrıldığında, fonksiyonun parametreleri haricinde, arguments isminde başka bir gizli parametre daha vardır. Bu parametre, çağrılırken gönderilen tüm parametreleri içeren, dizi benzeri bir nesnedir.

function topla() {
	var i, n = arguments.length, toplam = 0;
	for (i = 0; i < n; i  = 1) {
		toplam  = arguments[i];
	}
	return toplam;
}

Prototiplere Ekleme Yapma

• Object.prototype
• Array.prototype
• Function.prototype
• Number.prototype
• String.prototype
• Boolean.prototype

Javascript’te string’lerin başındaki ve sonundaki beyaz boşlukları silmek için herhangi bir fonksiyon yoktur. Ancak bunu biz yazabiliriz.

String.prototype.trim = function() {
	return this.replace(/^\s*(\S*(\s \S )*)\s*$/, “$1”);
}

Böylece artık tüm string’ler trim isimli bir fonksiyona sahip olur.

var ad = '  Sinan    ', soyad = '      İlyas  ';
var yeniAd = isim.trim();
var yeniSoyad = soyad.trim();

typeof

Değerlerin tiplerini öğrenmek için başına typeof operatörü koyulabilir.

if (typeof deger === 'string') { ... }

new

new Boolean(), new String(), new Number() deyimlerinin kullanılması tavsiye edilmez. Çünkü örneğin, new Boolean() denildiğinde, boolean değer içeren yeni bir nesne oluşturulmuş olur. “Boolean değer” ile “boolean değer içeren nesne” birbirinden farklı şeylerdir. Bunun nasıl bir hataya yol açabileceği aşağıdaki örnekten görülebilir:

var nesne = new Boolean(false);
document.write(nesne);
if (nesne) {
	document.write('true');
}
else {
	document.write ('false');
}

Bu örnekte önce false, sonra true yazar. Çünkü document.write(nesne) denildiğinde nesnenin içindeki değer (false) yazdırılır. Ama if (nesne) denildiğinde, nesnenin içerdiği değer ne olursa olsun, tüm nesneler true kabul edildiği için, true yazdırılır.

Global Nesne

Global nesne, tüm global değişkenlerin ve javascript’in kendi nesnelerinin sahibidir. Web tarayıcılarında global nesne window’dur.

Global değişkenlerin kullanılması tavsiye edilmez. Çünkü bir uygulamanın içindeki fonksiyonlar birbiriyle çakışabilir, ya da birlikte çalışan uygulamalar birbiriyle çakışabilir. Global namespace’in kullanımı en aza indirilmelidir.

Düzgün bir şekilde tanımlanmamış tüm değişkenler global kabul edilir. Bu durum, encapsulation hakkında bilgi sahibi olmayan veya önemsemeyen kişiler için işleri kolaylaştırabilir, ama uygulamaları daha az güvenilir hale getirir.

Global değişkenleri ve uygulamaların diğer zayıf yönlerini bulma konusunda http://www.JSLint.com adresindeki JSLint programı kullanılabilir.

Namespace

Her nesne ayrı bir namespace’tir. Değişken ve fonksiyonlarınızı düzenlemek için bir namespace olarak nesne kullanınız. Böylece kendi yazdığınız kodların, kullandığınız hazır script’lerle vs. çakışması ihtimalini ortadan kaldırmış olursunuz. Namespace olarak kullanacağınız nesnenin adını büyük harflerle yazmanız tavsiye edilir, çünkü bu kazara diğer nesnelerle karıştırılarak kullanma ihtimalinizi azaltır.

var YAHOO = {}; // Namespace
YAHOO.Popup = function () {
	// Popup ile ilgili global değişkenler ve fonksiyonlar
	...
};

Fonksiyonlar değişkenler için kapsam belirlediği için, YAHOO.Popup fonksiyonunun içinde tanımlanan hiçbir değişken ve fonksiyon, bu fonksiyonun dışında geçerli değildir.

Kod Yazım Standartları

Javascript çok esnek bir dil olduğundan dolayı, kodlama stili konusunda disiplinli olmak gerekir. Douglas Crockford’un tavsiye ettiği Javascript kod yazım standartlarına şu adresten ulaşabilirsiniz:

http://javascript.crockford.com/code.html (İngilizce)

Noktalı Virgül

Derleyici bir hata gördüğünde hemen hata vermez. Önce en yakındaki satır sonuna gider, oraya bir noktalı virgül yerleştirir ve tekrar dener. Eğer yine hata varsa, o zaman hata verir. Ancak yine de gerekli olan her yere noktalı virgülleri koymak gerekir.

JSLint

JSLint Javascript ile yazılmış bir programdır. Yazdığınız Javascript kodlarını inceler ve yazdığınız kodların sağlamlığını ve taşınabilirliğini arttırmanız için size tavsiyelerde bulunur, yaptığınız hataları bulmanıza yardımcı olur. JSLint’e aşağıdaki adresten ulaşabilirsiniz:

http://www.JSLint.com

Douglas Crockford’un bu konuda bir uyarısı var: JSLint duygularınızı incitebilir! Çünkü çok katı kuralları var. Ancak eğer programın tavsiyelerini dinlerseniz, programlarınız çok daha iyi hale gelir.