Listeniz.NetKaynak Kod

Nesne Tabanlı Javascript ve Temelleri

Sir Pavlow — Sun, 03 Oct 2010 15:50:04 +0000

JQuery ve MooTools gibi özenle ve ustalıkla hazırlanmış javascript kütüphaneleri sayesinde, geliştirme bir zevk haline dönüşmüştür. Ancak son derece mükemmel hazırlanmış bu kütüphanelerde kullanılan üst düzey kavramları dikkatle incelemek çok önemlidir. Bir web geliştirici bu eğilimlerin sınırını zorlayan girişimleri ve güncel programlama dillerini öğrenme aşamalarını dengelemek zorundadır. Bu denge olmadan, hiçbir alanda yeniliği ve gelişimi yakalaması söz konusu değildir. O yüzden Nesne tabanlı javascript temelleri için class’lar inheritance’lar ve scope’lara bir el atalım istedim.

Classes (Sınıflar)

Classların nasıl uygulanacağını öğrenmeden önce bunların neler oldupunu ve neden sınıfları öğrenmemiz gerektiğine bir bakalım.

Java öğrenme dökümanlarında belirtildiği gibi, bir ev yapma sürecinde kullanılan gerçek bir plan düşünelim. “A Sınıfı tek tek nesnelerden oluşan plan olsun” bu nesneleri defalarca kullanarak aynı yapıdan sonsuz kez yapabilmemizi sağlar plan. Bu şekilde düşünecek olursak classlar da belirli bir nesnenin birden fazla bulunması durumunda kolaylık sağlar.

Örnek olarak, diyelim ki sınıfları kullanmadan 2 gerçel yaşam nesnesini karşılaştırıyoruz ve nesne tabanlı düşünce sürecinin aksine usul düşünce sürecini kullanıyoruz. Ali adından bir erkek ile Ayşe adında bir afet-i cazibeyi karşılaştıralım. Bu karşılaştırma öncesinde elimizde hiç plan olmdığını düşünelim.

Ali

Ali’nin Vücudunun üst kısmında birbirinin benzeri aralarında birkaç santim olan iki yapı var.
Bu yapının içerisinde iki oval kahverengilik var.
Ali’nin vücüdunun yanlarında yere dik iki uzantı var.
Bu uzantıdaki ekler sanki nesleri kavramak için yapılmış gibi
Ali’nin uzunluğu 180cm civarında
Oksijen alıp karbondiyoksit veren bir yapısı var.

Ayşe

Ayşe’nin Vücudunun üst kısmında birbirinin benzeri aralarında birkaç santim olan iki yapı var.
Bu yapının içerisinde iki oval mavilik var.
Ayşe’nin vücüdunun yanlarında yere dik iki uzantı var.
Bu uzantıdaki nispeten daha küçük ekler sanki nesleri kavramak için yapılmış gibi
Ayşe’nin uzunluğu 185cm civarında
Oksijen alıp karbondiyoksit veren bir yapısı var.

Buradaki bir çok terim aslında insanın belli başlı özelliklerini tanımlıyor fakat elimizde bir plan olmadığında işler içinden çıkılmaz ve sıkıcı bir karmaşıklığın içerisine doğru sürükleniyor.

Aslında sadece bir insanın;

Gözleri
Kolları
Elleri
Boyu
Nefes Alışı

gibi belirgin özelliklerinden bahsedilmiştir.
Şimdi aynı örnek üzerinden yeniden ele alacak olursak hem erkek hemde hatun kişi için belirleyici özellikleri kullanarak bir şablon oluşturalım ve örneği yeniden ele alalım. Tanımlamalara isim vermek işimizi kolaylaştıracaktır.

İnsanlarda:

Vücudun üst kısımlarında birbirine yakın iki oval yapı vardır bunların içinde farklı renklerde bir yapı daha vardır. Biz bunlara göz diyoruz.
Vücudun yanlarında yere dik olarak olarak uzanan iki yapı vardır, bunlara kol diyoruz.
Kolların bitiş noktası kavramayı yarayan bir organa sahiptir. Bunlara el diyoruz.
İnsan vücudunun toplam uzunluğuna, boy diyoruz.
Oksijen alıp karbondiyoksit verme işlemi, nefes olarak tanımlanır.

İnsanın özelliklerini belirledikten sonra Ali ve Ayşe’nin özelliklerini bir insan olarak ele alalım ve belirlediğimiz plan çerçevesinde yeniden değerlendirelim.

Bir insan olarak Ali

Ali’nin kahverengi gözleri var
Ali’nin kolları var
Ali’nin elleri var
Ali 180cm boyunda
Ali nefes alıyor

Bir İnsan olarak Ayşe

Ayşe’nin mavi gözleri var
Ayşe’nin kolları var
Ayşe’nin küçük elleri var
Ayşe 185cm boyunda
Ayşe Nefes alıyor

Ali ve Ayşe insani özellikleri kullanılarak kolayca tarif edildi ve aslında anlatılmak istenen daha az kelime ile bilinen ortak bir dil kullanılarak anlatıldı. Bu da bize etken iki nesne arasında aynı değerlere sahip farklı özelliklerdeki nesneleri tanımlama imkanı sağladı.

Sınıfları ve nesneleri ele alacak olursak aşağıdaki incelendiğinde daha verimli olacağı kanaatindeyim.

Sınıf: Öğrenci
Özellikleri: sınıf, yaş, doğum, TCkimlik No
Fonksiyonları: Başarı puanı, devamsılık durumu

Sınıf: Çalışan
Özellikleri: Sicil No, Saatlik ücreti, İrtibat No, Sigorta Sicili
Fonksiyonları: Özgeçmiş, Verimlilik, Maaş

Sınıf: Bilgisayar
Özellikleri: İşlemci, anakart, ekran kartı
Fonksiyonları: Başlat, kapat, yeniden başlat

PHP ve C++ gibi dillerin aksine javascriptte fonksiyonlar yoktur, fakar sınıfları kullanarak kolaylıkla bu sorunun üstesinden gelebilmektedir.
Örneklerden yola çıkacak olursak, öğrencileri temsilen bir yönelim yazırlayalım.

Bir sınıf oluştururken 2 şeye dikkat etmek gerekir. Sınıfı oluşturan özellikleri ve fonksiyonları bilmek gerekmektedir. Ayrıca, sınıfı oluşturan özellikleri bir değerle başlatmalıyız.

Kodu Görüntüle JAVASCRIPT

function Student(name, gender, age, grade, teacher)
{
	this.name = name;
	this.gender = gender;
	this.age = age;
	this.grade = grade;
	this.teacher = teacher;
}
 
var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.age); //Çıktı 15
 
var susan = new Student("susan", "female", 10, 5, "Gresham");
alert(susan.gender); //Çıktı 'female'

Bu örnekte sınıfın operatörleri tanımlandı ve o operatörler doğrultusunda işlem yapıldı mesela sınıfın tanımlayıcıları içerisinden age kullanılarak bob’un yaşı elde edildi diğer bilgilerin içerisinden sadece lazım olan alındı ve kullanıldı aynı şekilde susan içinde cinsiyet bilgisi alındı. Örnekleri çoğaltmak mümkün.

Ancak örnekte 2 sakıncalı durum söz konusudur. (kolaylıkla düzeltilebilir.)

Sınıf özelliklerine her hangi bir durumda erişilebilir.
argümanların belli bir düzende olması gerekmektedir.

Özel değerlerin gizli tutulması

Örnekte biz sadece, bob.age arayarak bobun yaş değerini elde ediyoruz, ayrıca, biz her yerde bob.age yazarak bobun yaş değerine ulaşabiliriz peki bu durum ne sağlar ne götürür.

Kodu Görüntüle JAVASCRIPT

var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.age); //Çıktı 15
 
bob.age = 9;
alert(bob.age); //Çıktı 9;

Oldukça eğlenceli görünüyor, peki aşağıdaki örneğe bakalım bir de;

Kodu Görüntüle JAVASCRIPT

var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.age); //Çıktı 15
 
bob.age = -50;
alert(bob.age); //Çıktı -50;

Program yazarken öncelikli amacımız mantık hatalarına yervermemek tir bu durumları oluşturacak bütün etkenleri bir bir ortadan kaldırmalıyız. Bu örnekte yaş olarak negatif bir değer görülmektedir. Bu durumun oluşması veri bütünlüğümüzü bozar. Özel değişkenler kullanarak bu durumları önlemeye çalışmalıyız. Javascript bize bu durumu çözmek için direk olarak araçlar sağlamasa bile biz bunu aşaüıdaki şekilde yapabiliriz.

Kodu Görüntüle JAVASCRIPT

function Student(name, gender, age, grade, teacher)
{
	var studentName = name;
	var studentGender = gender;
	var studentGrade = grade;
	var studentTeacher = teacher;
	var studentAge = age;
 
	this.getAge = function()
	{
		return studentAge;
	};
 
	this.setAge = function(val)
	{
		studentAge = Math.abs(val); //age değerinin mutlak değeri alınarak negatif girilmesi önlendi
	};
}
 
var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.studentAge); //tanımsız, age değeri özel sınıf içerisinde tanımlı
 
alert(bob.getAge()); //Çıktı 15
bob.setAge(-20);
alert(bob.getAge()); //Çıktı 20

Veri bütünlüğünü korumak için doğrudan sınıf erişimi yerine sınıf özelliklerine erişim yöntemini kullanmalıyız. Verileri biçimlendirmek ve korumak için sınıf içerisinde aksesuarları ve mutasyon yöntemlerini kullanmalıyız ki javascriptin faydalarını görelim. ancak her bir özellik için aksesuar ve mutasyon yöntemlerini kullanmak sıkıcı ve uzun kodlar oluşturur.

Kodu Görüntüle JAVASCRIPT

function Student(name, gender, age, grade, teacher)
{
	var studentName = name;
	var studentGender = gender;
	var studentGrade = grade;
	var studentTeacher = teacher;
	var studentAge = age;
 
	this.getName = function()
	{
		return studentName;
	};
 
	this.getGender = function()
	{
		return studentGender;
	};
 
	this.getGrade = function()
	{
		return studentGrade;
	};
 
	this.getTeacher = function()
	{
		return studentTeacher;
	};
 
	this.getAge = function()
	{
		return studentAge;
	};
 
	this.setAge = function(val)
	{
		studentAge = Math.abs(val);
	};
}
 
var bob = new Student("bob", "male", 15, 10, "Marlow");
alert(bob.studentGender); 
 
alert(bob.getGender()); //Çıktı 'male'

Eğer kod yazarken kendinizi bir anda aynı kodları defalarca yazıyorken buluyorsanız birşeyleri yanlış yapıyorsunuz demektir. Aslında bazı şeylerin kolay yolu yok ve defalarca yazmak gerekebilir, bu durumları yespit edip kendinize göre önlemlerini almak sizin için daha verimli olacaktır diye düşünüyorum.

Dinamik oluşturulmuş aksesuar yöntemleri

Bu yöntemi John Resid’in Pro JavaScript Techniques kitabında görmüştüm. İlk üç bölümde bundan bahsediyordu ve ele almaya çalışacağım.

Kodu Görüntüle JAVASCRIPT

function Student( properties )
{
	var $this = this;  //Store class scope into a variable named $this
 
	//Iterate through the properties of the object
	for ( var i in properties )
	{
 
		(function(i)
		{
			// Dynamically create an accessor method
			$this[ "get" + i ] = function()
			{
				return properties[i];
			};
		})(i);
	}
}
 
// Create a new user object instance and pass in an object of
// properties to seed it with
var student = new Student(
{
	Name: "Bob",
	Age: 15,
	Gender: "male"
});
 
alert(student.name); //Undefined due to the property being private
 
alert(student.getName()); //Outputs "Bob"
alert(student.getAge()); //Outputs 15
alert(student.getGender()); //Outputs "male"

Bu tekniği kullanmak, sadece özelliklerimizi gizli tutmaya yaramaz aynı zamanda da, argümanlarımızı sıra ile belirlememizi sağlar. Aşağıdaki tüm sınıf eşlemeleri denktir.

Kodu Görüntüle JAVASCRIPT

var student = new Student(
{
	Name: "Bob",
	Age: 15,
	Gender: "male"
});
 
var student = new Student(
{
	Age: 15,
	Name: "Bob",
	Gender: "male"
});
 
var student = new Student(
{
	Gender: "male",
	Age: 15,
	Name: "Bob"
});

Inheritance (Miras)

Bu yazı boyunca sınıfları son derece gevşek bir kullanımda sundum. Daha öncede belirtildiği gibi Javascript’de, kişiliğe sahip olmayan sınıfların takip edilebilir bir değer yoktur. Javascript ile diğer nesne yönelimli diller arasındaki belirgin fark onların miras modellerinde yatıyor. C++ ve Java sergi sınıf tabanlı ya da Klasik miras tabanlı bir dil olması. Kalıtım nesne tabanlı dillerde nesneleri oluşturmak için plan temsil eden gerçek bir veri türüdür. Javascript ise nesne tabanlı bir dil simulatörü gibi işlev göstermektedir. Fonksiyonları kullanıyor olmamıza rağmen aslında onlar sadece gerçek nesnelerin içinde vardırlar. Bu nesneler daha sonra diğer nesneler için model olarak kullanılırlar aslında var olmayan nesneler gibidirler. Detaylı bilgi için : Javascript Prototypal Inheritance

Aktarımlı miras kavramını uygulamak bize alt veya başka bir nesneden özellikleri miras alınan nesneler oluşturmamızı sağlar, Bu özellik belli başlı birkaç küçük değişiklikle başka bir nesnenin yöntemlerini kullanmak istediğimizde bize yararlı olur.

Bir Çalışan sınıfı düşünün, ücret ve komisyon tabanlı olsun, veya çalışanları iki tür olduğunu varsayalım. Bu iki tür çalışan çok benzer özelliklere sahip olacak. Örneğin; bağımsız bir çalışan komisyon üzerinden gelir elde edecek, bir de ücret bağımlı bir çalışan olacak. Bu iki çalışan için gelir tamamen farklı olacak. aşağıdaki örnekte bunu ele alalım.

Kodu Görüntüle JAVASCRIPT

function Worker()
{
	this.getMethods = function(properties, scope)
	{
		var $this = scope;  //Store class scope into a variable named $this
 
		//Iterate through the properties of the object
		for ( var i in properties )
		{
 
			(function(i)
			{
				// Dynamically create an accessor method
				$this[ "get" + i ] = function()
				{
					return properties[i];
				};
 
			//Dynamically create a mutation method that parses for an integer and
			//Ensures it is positive.
			$this[ "set" + i ] = function(val)
			{
				if(isNaN(val))
				{
					properties[i] = val;
				}
				else
				{
					properties[i] = Math.abs(val);
				}
			};
			})(i);
		}
	};
}
 
//The CommissionWorker "subclass" and WageWorker "subclass"
//inherit the properties and methods of Worker.
CommissionWorker.prototype = new Worker();
WageWorker.prototype = new Worker();
 
function CommissionWorker(properties)
{
	this.getMethods(properties, this);
 
	//Calculates income
	this.getIncome = function()
	{
		return properties.Sales * properties.Commission;
	}
}
 
//Expects the following properties: wage, hoursPerWeek, weeksPerYear
function WageWorker(properties)
{
	this.getMethods(properties, this);
 
	//Calculates income
	this.getIncome = function()
	{
		return properties.Wage * properties.HoursPerWeek * properties.WeeksPerYear;
	}
}
 
var worker = new WageWorker(
{
	Name: "Bob",
	Wage: 10,
	HoursPerWeek: 40,
	WeeksPerYear: 48
});
 
alert(worker.wage); //Undefined. wage is a private property.
 
worker.setWage(20);
alert(worker.getName());   //Outputs "Bob"
alert(worker.getIncome()); //Outputs 38,400 (20*40*48)
 
var worker2 = new CommissionWorker(
{
	Name: "Sue",
	Commission: .2,
	Sales: 40000
});
alert(worker2.getName());   //Outputs "Sue"
alert(worker2.getIncome()); //Outputs 8000 (2% times 40,000)

Örnekteki en önemli ifadeler şunlardır:

Kodu Görüntüle JAVASCRIPT

1 2	CommissionWorker.prototype = new Worker(); WageWorker.prototype = new Worker();

Her bir girdi için CommisionWorker veya WageWorker nesnesinin her bir özelliği nesnel olarak değiştirilebilir durumdadır. İstenildiği taktirde bu yöntemleri ve özellikleri alt sınıf tanımları için değiştirebilirsiniz.

Scope (Kapsam)

Kapsam javascriptte fonksiyon kapsamı olarak bilinir, bu işlev fonksiyon dışından erişilebilir değildir. Ancak, blok, değişken tanımlama ve değişiklikler çağıran çevreye sunulmaktadır.

Kodu Görüntüle JAVASCRIPT

var car = "Toyota";
 
if(car == "Toyota")
{
	car = "Toyota - We never stop...and you won't either.";
}
 
alert(car); //Ouputs Toyota - We never stop...and you won't either.
 
car = "Toyota"; //Reset car back to original value.
 
function makeFord(car)
{
	car = "Ford";
}
 
makeFord(car);
alert(car); //Outputs "Toyota" because car was altered in the function scope.

Ancak, bir fonksiyon değerini değiştirmek isterseniz, bir argüman olarak bir nesne geçer ve nesnenin bir özelliğini değiştirmez.

Kodu Görüntüle JAVASCRIPT

var car = new Object();
car.brand = "Toyota"
 
function makeFord(car)
{
	car.brand = "Ford";
}
 
makeFord(car);
 
alert(car.brand); //Outputs "Ford"

Bu işlem, bir işlevin fonksiyona giden referans değeri olarak bilinir. Ben genellikle bir sınıfın içinde yöntemler kuruluylen yanlızca referans değeri geçerek belirtilen özellikteki nesneleri içerecek sınıfları kullanıyorum.
Kodlarınızı basitleştirmek için bu yöntemler işinize yarayacaktır.

WordPress Görsel Boyutlarına Yenisini Ekleyin

Sir Pavlow — Tue, 15 Jun 2010 18:41:06 +0000

Uzun bir aradan sonra, yazılarıma devam etme kararı verdim, ihtiyaçlar doğrultusun da ortaya çıkan düzenlemeleri bloğumdan paylaşacağım, bu sayede, benzer durumda ki kullanıcılara yol gösterecek klavuzlar hazırlamak niyetindeyim. Yazılara başlamadan önce bloğumu elden geçirdim, gerek görsellik olsun gerek işlevsellik olsun bir düzenleme yaptım. WordPress ve Drupal için özel çözümler geliştiriyorum ve bu aşamada bazı etkenleri plugin olarak yayınlayacağım bazılarını ise “WordPress Hack” ve “Drupal Hack” adı altında toparlayıp multilanguage anlatım seçenekleri ile uluslararası bloglarımda yayınlayacağım. Bunlardan birtanesi de WordPress Görsel Boyutları‘na yeni bir boyut seçeneği eklemek.

WordPress ile gelen ve medya ayarları altında bulunan Görsel Boyutları bilindiği üzere Thumbnail Orta ve Büyük olmak üzere 3 farklı boyutlandırma seçeneği içeriyor. Bu yazım biraz tutorial havasında olacak ve mevcut olan üç görsel seçeneğe nasıl ekstra seçenekler ekleyebileceğimizi gösterecek. Tutorial seviyesi olarak bir değer belirlememiz gerekirse advanced olarak nitelendirebileceğimiz bir tutorial.

Bu yazıda değişiklik yapılan dosyaların yedeğini almanız kendi menfaatinize olacaktır, oluşacak bir hataya karşı yedekten geri yükleme yaparak ilk haline alabilirsiniz.

WordPress’i kurduğunuz zaman standart gelen görsel boyutları aşağıda görüldüğü gibi “Küçük Resim Boyutu“, “Orta Resim” ve “Büyük Resim“, olmak üzere 3 adet standart boyuta izin vermektedir. Biz bu yazıda buna bir adet daha ekleyeceğiz.

Wordpress Görsel Boyutları

Değişiklik Yapılacak Dosyalar

wp-admin/options-media.php
wp-admin/options.php
wp-admin/includes/image-edit.php
wp-admin/includes/image.php
wp-admin/includes/media.php
wp-includes/formatting.php
wp-includes/media.php

Burada yapacağımız değişiklikler mevcut kurulumu etkileyecektir, eğer her yeni kurulumda etkin olmasını istiyorsanız değiştirmemiz gereken bir kaç dosya daha bulunmakta ben bu yazıda onlara değinmeyeceğim.

1. Adım wp-admin/options-media.php
İlk adım olarak wp-admin/options-media.php dosyası içerisine aşağıdaki kod bloğunda belirtilen kodları buluyoruz,

Kriterler	Veri	Puan
Aranan Sonuca Ulaşma		10
Kullanılabilirlik		10
Sonuçların Uygunluğu		10
Hız		10
Bulunan Kod Sayısı		10
İlk Sayfa Yeterliliği		10
Kodun Bulunduğu Sayfa		10
Ekstra Özellikler		30
	Toplam	100

Kriterler	Veri	Puan
Aranan Sonuca Ulaşma	Yetersiz	4
Kullanılabilirlik	Zor	3
Sonuçların Uygunluğu	Yetersiz	3
Hız	0.06sn	10
Bulunan Kod Sayısı	75.000	7
İlk Sayfa Yeterliliği	Yetersiz	3
Kodun Bulunduğu Sayfa	7. Sayfa	0
Ekstra Özellikler	Orta Sv.	10
	Toplam	40

Kriterler	Veri	Puan
Aranan Sonuca Ulaşma	Yeterli	10
Kullanılabilirlik	Kolay	8
Sonuçların Uygunluğu	Yeterli	9
Hız	1.33sn	2
Bulunan Kod Sayısı	5.183	3
İlk Sayfa Yeterliliği	Çok İyi	10
Kodun Bulunduğu Sayfa	1. Sayfa	10
Ekstra Özellikler	Üst Düzey.	25
	Toplam	77

Kriterler	Veri	Puan
Aranan Sonuca Ulaşma	Kusursuz	10
Kullanılabilirlik	Çok İyi	9
Sonuçların Uygunluğu	Yeterli	8
Hız	2sn	2
Bulunan Kod Sayısı	1200	3
İlk Sayfa Yeterliliği	Çok İyi	9
Kodun Bulunduğu Sayfa	1. Sayfa	10
Ekstra Özellikler	Çok iyi	30
	Toplam	81

Listeniz.NetKaynak Kod

Nesne Tabanlı Javascript ve Temelleri

Classes (Sınıflar)

Ali

Ayşe

İnsanlarda:

Özel değerlerin gizli tutulması

Dinamik oluşturulmuş aksesuar yöntemleri

Inheritance (Miras)

Scope (Kapsam)

WordPress Görsel Boyutlarına Yenisini Ekleyin

Değişiklik Yapılacak Dosyalar

Kaynak Kod Arama Motorları

Örnek Puanlama Tablosu

Google Code Search

Google Code Puanlama Sonuçları

Koders

Koders Puanlama Sonuçları

Krugle

Krugle Puanlama Sonuçları

Merobase

Merobase Puanlama Sonuçları

Planet Source Code

Planet Source Code Puanlama Sonuçları