Monthly Archives: April 2010

Javascript Kaynak Kitaplar

Dün mail ile bir arkadaş Javascript için önerebileceğim kitapları sormuştu. Bende Javascript öğrenirken kullandığım kaynakları aşağıya yazayım başkaları içinde belki faydalı olabilir diye düşündüm. Bana en çok yararlı olan kaynaklar :

İlk kitap Yahoo’da front-end engineer olarak çalışan Nicholas C. Zakas tarafından yazılmış oldukça iyi bir Javascript kitabı. Kitapta Javascript dili,Object Oriented Javascript,DOM,BOM,Ajax,XML.. gibi neredeyle genel olarak birçok konuya değinmiş. Kitabın sonundaki Best Practices kısmını oldukça beğendiğimi söyleyebilirim. Kitabı daha çok referans kitabı olarak kullanıyorum.

ikinci kitap JSON mucidi yine bir Yahoo çalışanı olan Javascript dünyasının efsanesi Douglas Crockford tarafından yazılmış sadece Javascript dilini anlatan bir kitap. Kitap yaklaşık olarak 200 sayfa civarında kısa olduğuna bakmayın birçok bölüm tekrar okumayı gerektiriyor.

Diğer kitap ise bir Twitter çalışanı olan blog’unuda severek takip ettiğim Dustin Diaz tarafından yazılmış. Klasik anlamda Design Pattern’ların Javascript dilinde nasıl kullanılacağını güzel örneklerle anlatmış.  Bu kitabın örneklerini oldukça sevdiğimi söyleyebilirim.

Bunun dışında Yahoo’nun YUI Theater kısmında bulunan videoları şiddetle tavsiye ederim. Özellikle bu sayfada bulunan Douglas Crockford’un Javascript JavaScript Programming Language ve Advanced Javascript serilerini mutkala izleyin. Umarım kitaplar ve videolar yararlı olur…

Javascript Refactoring : Use Constants

Javascript kodlarına bakarsanız etrafta bolca string göreceğinizden eminim. En azından benim eski Javascript kodlarım böyleydi.Daha öncede Java, C# gibi static typed dillerde bunların önüne nasıl geçebileceğimizden bahsetmiştik. Javascript dilinde Constant kavramı olmasa da Object Literal notasyonu kullanarak sabit değişkenler tanımlayabiliriz. Aşağıdaki masum Javascript fonksiyonlarını görüyorsunuz.

function createStatusImage(movie) {
    var img = document.createElement("img");
    if (movie.avaliable)
        img.src = '/Content/Images/watched.gif';
    else
        img.src = '/Content/Images/unwatched.gif';

    return img;
};

function makePlanned(img) {
    img.src = img.src = '/Content/Images/planned.gif';
}

Yukarıdaki kodlar ne kadar masum görünse de, her tarafta string tanımı olduğu için kodda eğer resim yani “Content/Images” dizinini değiştirmek istediğinizde kodun 3 yerinde bu değişikliği yapmak zorundasınız. Bunun yerine Object Litaral ile bir konfigürasyon nesnesi oluşturup kodumuzu aşağıdaki gibi refactor edersek daha okunaklı ve değiştirmesi daha kolay olacaktır.

var ImageConfig = {
    IMAGE_PATH: '/Content/Images/',
    WATCHED_IMAGE: 'watched.gif',
    UNWATCHED_IMAGE: 'unwatched.gif',
    PLANNED_IMAGE: 'planned.gif'
}

function createStatusImage(movie) {
    var img = document.createElement("img");
    if (movie.avaliable)
        img.src = ImageConfig.IMAGE_PATH + ImageConfig.WATCHED_IMAGE;
    else
        img.src = ImageConfig.IMAGE_PATH + ImageConfig.UNWATCHED_IMAGE;

    return img;
};

function makePlanned(img) {
    img.src = img.src = ImageConfig.IMAGE_PATH + ImageConfig.PLANNED_IMAGE;
}

Yukarıdaki tanımlama gerçek anlamda oluşturulduktan sonra değiştirilemiyen “constant” ya da “final” değişkenler sunmasa da fantazi olsun diye birisi ImageConfig nesnesi içeriğini değiştirmez ise bu amaçla kullanılabilir.Bu yüzden eğer takım olarak ortak Javascript dosyaları üzerinde değişiklik yapıyorsanız Code Conversions belirlemeniz faydanıza olacaktır. Sizi bilmiyorum ama ben son halini daha çok sevdim :)

zp8497586rq

Object Oriented Javascript : Object Literals

Javascript diğer adıyla The Lingua Franca of the Web,yani Web’in ortak dili. Günümüzde yaygınlaşan Ajax ve Web teknolojileri bu dilin yaygınlaşmasında daha da önemli rol oynuyor. Aslına bakılacak olursa dünyada en yaygın programlama dillerinden biri.Çalışması için browser hariç hiçbir gereksinime ihtiyaç duymayan basit, güçlü, hem object oriented programming hemde functional programming  özelliklerini barındıran son zamanlardaki favori dillerimden biri.

Eğer sizde Web projesi geliştiriyorsanız mutlaka Javascript’e biryerinden bulaşmışsınızdır. Genellikle bu bulaşma benim gibi işimi görecek şeyi yapayımda gerisi önemli değil tarzında olduğunu düşünüyorum.Düz mantık global değişkenler ve bunlar üzerinden işlem yapan fonksiyonlar tanımlayarak ufak tefek işlemizi rahatlıkla görebiliriz. Tabi uygulama büyüdükçe yazdığınız kodun Javascript gibi dinamik ve tip koruması olmayan bir dilde yönetilmesi daha da zorlaşacaktır. Bu yüzden script gözüyle bakmantan vazgeçip Javascript’e ciddi bir dil gibi davranıp genel yazılım mühendisliği prensiplerini uygulamak,test yazmak kodun yönetimini kolaylaştıracak diğer prensipleri uygulamak gereklidir.Bu yüzden kodun yönetimini kolaylaştıracak nesneye yönelik programlama teknikleri Javascript içinde oldukça faydalıdır.

Javascript sanılanın aksine Object Oriented programlamayı destekleyen bir programlama dilidir. Klasik anlamda diğer nesneye yönelik programlama dillerinden farkı ise nesneye yönelik programlamayı sınıf tabanlı (class based) değilde , biraz daha farklı olarak object ve prototype tabanlı olarak desteklemesidir. Javascript’in nesneye yönelik programlama tekniklerini birkaç yazıda anlatmayı planlıyorum bu yüzden bu yazıda en basit olarak nasıl nesne tanımlarız onu bakacağız.

Javascript’de basit olarak bir nesneyi aşağıdaki gibi oluşturabiliriz.

var movie = new Object();
movie.name = "Leon";
movie.year = 1995;
movie.rating = 8.5;
movie.displayInfo = function() {
    alert("Movie : " + this.name + " , "+ this.year);
}

movie.displayInfo();

Yukarıda gördüğünüz gibi basit bir şekilde film nesnesi oluşturup gerekli özelliklerine gerekli değerleri atadık.Gördüğünüz gibi herhangi bir “class” tanımı yok. Javascript dinamik bir dil olduğu için herhangi bir zamanda nesneye özellik atayıp çıkarabiliriz.

Yukarıdaki ile aynı işi yapan nesneyi Object Literal notasyonu ile aşağıdaki gibi de tanımlayabiliriz.

var movie = {
    name : "Leon",
    year : 1995,
    rating : 8.5,
    displayInfo : function() {
        alert("Movie : " + this.name + " , "+ this.year);
    }
}

Yukarıda gördüğünüz gibi aynı nesneyi Object Literal notasyonu ile tanımladık.Bunun JSON formatından tanıdık geldiğini düşünüyorum. Daha kısa olduğunu farketmişsinizdir. Javascript gibi her bir byte'ın önemli olduğu bir dilde kısa olması bizler için daha faydalı olacaktır. Yukarıdaki nesne tanımında dikkat edilecek bir nokta da özellik tanımlamalarıdır.Nesnenin özelliklerini aşağıdaki gibi de atayabilirdik.

var movie = {
    "name" : "Leon",
    "year" : 1995,
    "rating" : 8.5,
    "displayInfo" : function() {
        alert("Movie : " + movie.name + " , "+ movie.year);
    }
}

Yukarıdaki gibi Javascript dilinde özellikleri string içerisinde tanımlayıp daha sonra normal özellik gibi ulaşabilirsiniz.Bunun faydası aşağıdaki gibi nesnelere programatik olarak özellik atayıp ya da ulaşabilirsiniz.Yalnızca Object Literal notasyonu programatik özellik tanımlamayı desteklemez bunu aşağıdaki gibi yapabiliriz.

var number =5;
var movie = {
    "name" : "Leon",
    "year" : 1995,
    "rating" : 8.5,
    "displayInfo" : function() {
        alert("Movie : " + movie.name + " , "+ movie.year);
    }
}
movie["writer"+number]="George.." ;

alert(movie["writer"+number]);

Basit olarak nasıl bir nesneye oluşturabileceğimizi gördük. Javascript'de bir işi yapmanın birden fazla yolu olduğu için diğer yöntemleride ileride değinmeyi planlıyorum. Bunları aklınızda tutun ilerlerikçe işler biraz daha karmaşıklaşacak :)

zp8497586rq