Bu kitapçık, javascript bilmeyen ya da bilgisi kısıtlı seviyede olan ancak herhangi bir programlama diline aşina yazılımcı arkadaşlar için hazırlanmış ve içerdiği kolay örneklerle javascript’in hızlıca öğrenilebilmesini hedeflemiş basit bir referans kaynağıdır. İçerisinde, veri tiplerinden object oriented programming’e kadar birçok konu hakkında bilgi paylaşılmakta ve gündelik hayat senaryolarında karşılaşabilinecek sorunlara çözüm önerileri getirilmektedir. İstenildiği şekilde çoğaltılıp kullanılabilir ve ayrıca dilendiği takdirde web sitelerinde referans gösterilebilir.
Bir yazılımcı için en önemli ve en kritik şey zamandır. Bu bilinçle her konu mümkün olduğunca hızlı ve sade anlatılmıştır. Değerli vaktini ayırıp okuyan yazılımcı arkadaşlar için fayda sağlamasından başka hiçbir beklenti içermez.
Mustafa Güven
mustafa@mustafaguven.com.tr
1 Değişken global (public) olarak atanmak isteniyorsa “var” kullanılmaz.
Örn:
var sayi = 5; // private
sayi = 5; // public
2 5 FARKLI VERİ TİPİ VARDIR (undefined, null, string, number, boolean) ve “typeof” OPERATÖRÜ İLE DEĞİŞKENLERİN VERİ TİPİNİ ÖĞRENEBİLİRİZ.
Not: typeof bir function değil, operatördür. Aşağıdaki gibi 2 farklı şekilde de kullanılabilir.
var sayi;
alert(typeof(sayi)); veya alert(typeof sayi);
UNDEFINED
bir değişken tanımlanmış ancak henüz değeri atanmamış ise undefined veri tipindedir.
Örn:
var sayi; // undefined
alert(sayi); //undefined (sayi isimli değişken tanımlandı ancak değeri atanmadı)
alert(typeof(sayi)); //undefined
NULL
Boş bir object’i gösteren özel bir değerdir. Bu yüzden typeof ile kullanıldığında object olarak döner.
Örn:
var sayi = null;
alert(typeof sayi); //object
undefined null’un türevidir.
alert(undefined == null); // true
BOOLEAN
true-false değerlerini taşır. Boolean() fonksiyonu ile diğer tüm veri tipleri bool’a cast edilebilir. (if ile Boolean() fonksiyonunu kullanmadan aşağıdaki gibi de kullanabiliriz.
var isim = “Mustafa Güven”;
if(isim){
alert(“değer true”);
}
NUMBER
Integer veya double değerleri taşır.
Örn:
var sayi = 10; // tam sayı
var sayi2 = 10.5; // ondalıklı sayı
NaN: Not a Number’ın kısaltılmışıdır. Bir işlemde sayı dönülmesi gerekirken hata alınıyorsa exception fırlatmasına karşılık NaN kullanılır ki kod patlamasın, operasyon devam etsin. Mesela neredeyse her programlama dilinde herhangi bir sayıyı 0’a bölmek istediğinizde mutlaka 0’a bölme hatası alırsınız. Javascript, bu durumda diğer işlemlerin devam edebilmesi için hata vermek yerine NaN değerini döner. NaN özel ve unique (eşsiz) bir değerdir. Dolayısıyla 2 NaN birbirine eşit değildir.
alert(NaN == NaN) // false;
Bu yüzden isNaN() fonksiyonu kullanılır. isNaN() fonksiyonu hiçbir koşulda sayı olamayan (number’a convert edilmesi halinde false olan) tüm değişkenlerde true döner.
alert(isNaN(NaN)); // true;
alert(isNaN(10)); //false è 10 bir sayı olduğundan NaN olamaz.
alert(isNaN(true)); // false è true number’a convert edildiğinde 1 değerini alır.
alert(isNaN(“Mustafa”)); //true è Mustafa number’a convert edilemez.
Herhangi bir değişkeni number’a convert etmek için Number() fonksiyonu kullanılır.
var numara1 = Number(“Mustafa Güven”); // NaN
var numara2 = Number(“ “); // 0 è null veya boş değerler 0 döner.
Not: Genelde string bir değer tamsayıya convert edilmek isteniyorsa Number() kullanılmaz. Onun yerine parseInt() kullanılır. parseInt() fonksiyonunun çalışma mantığı basittir. Convert edeceği değişkenin 0. indeksinde bulunan değerden başlayarak tamsayıya çevirmeye çalışır. Eğer daha 0. indeksteki değeri tamsayıya convert edemiyorsa NaN döner. Eğer 0. indeksteki değeri convert edebiliyorsa 1. indeksteki değere geçer. Bu işlem bulunduğu indeksteki değer convert edilebildiği sürece değişkenin karakter uzunluğuna kadar devam eder.
alert(parseInt(“3009mustafa”)); // 3009 è sayıları aldı ancak string değerleri almadı.
alert(parseInt(“ “)); //NaN è daha ilk değer bile sayıya convert edilemediği için NaN.
alert(parseInt(“10.5” )); // 10 è tamsayıya çevirildiği için ondalıklar dikkate alınmaz. Ondalıklı olarak convert etmek istersek parseFloat() fonksiyonunu kullanırız.
Unary Plus ve Minus
Nümerik olmayan değerleri number’a convert ederken kullanırız. Number() fonksiyonuyla benzer işlevi görür. Değişkenin önündeki operatöre göre (+ veya -) (eğer veritipi number değilse) değeri number’a çevirdikten sonra o operatörle çarpar.
var myNumber = "367";
myNumber = +myNumber; // 367
var myOtherNumber = "100";
myOtherNumber = -myOtherNumber; // -100
var myDegisken = "Galatasaray";
myDegisken = +myDegisken // NaN
STRING
Karakter tanımlarken kullanılır.
var isim = “Mustafa Güven”; veya
var isim = “Mustafa”;
isim = isim + “Güven”;
Herhangi bir veri tipindeki değişkenin null ya da undefined olup olmadığından emin isek String’e convert etmek için toString() fonksiyonu kullanırız.
var yas = 30;
alert(yas.toString()) // 30
Eğer emin değilsek veya null ya da undefined olduğunu biliyorsak String() fonksiyonu kullanılır.
var deger;
alert(String(deger)); // undefined
OBJECT
Veritipi primitive ya da belirgin olmayan data gruplarını temsilen kullanılır. new operatörüyle yaratılır.
var myObject = new Object();
Not: Object ile ilgili ayrıntılar ileriki bölümlerde anlatılmıştır.
3 FONKSİYONLAR
3.1.1 Function Kullanımı
function isminiYaz(){
alert(“ismim Mustafa”);
}
isminiYaz();
şeklinde kullanılır. İstenirse return ile geriye değer döndürebilirler. return’den sonra gelen hiçbir satır dikkate alınmaz – işlenmez.
function Topla(a, b){
var toplam = a + b;
return toplam;
alert(“bu alert çalışmaz”);
}
alert(Topla(3,5)); // 8
burada a ve b birer argümandır. gelen parametreler bir arguments adlı bir dizi içinde tutulurlar. arguments[0] => a’yı, arguments[1] => b’yi temsil eder.
3.1.2 return;
parametresiz olarak da return kullanılabilir. Geriye undefined döner.
Not: javascript fonksiyonlarda diğer birçok dilde olduğu gibi function overloading (metod aşırı yükleme) yoktur.
4 DEĞER ve REFERANS TÜRLERİNİN HAFIZADAKİ YERLERİ
4.1.1 Farklar
Önceki bölümlerde anlatılan veri tiplerinden object hariç hepsi değer türüdür. Değer türleri ram’in stack bölümünde, referans türleri ise heap bölümünde tutulur. Referans türlerinin sadece object’in heap bölgesine ulaştıracak adres değeri stack’te tutulur.
Örn:
var birincisayi = 5;
var ikincisayi = birincisayi;
alert(ikincisayi); //5
birincisayi += 10;
alert(ikincisayi); //5
yukarıdaki iki değişkenin de değeri 5’tir ancak stack’te farklı yerlerde tutulurlar. 2. satırdan sonra birincisayi’nın değeri değiştirilirse ikincisayi bundan etkilenmez.
var araba = new Object();
var araba2 = araba;
araba.model = "Mercedes";
alert(araba2.model); // Mercedes
araba.model = "Honda";
alert(araba2.model); //Honda
yine yukarıdaki iki değişkenin model fieldları Mercedes değerini verecektir. Ancak burada durum farklı, ikisi de heap’teki aynı bölgeyi gösterdikleri için araba.model neye eşit olursa araba2.model’de ona eşit olacaktır.
4.1.2 instanceof
Önceki bölümlerde öğrendiğimiz gibi typeof operatörünü kullanarak bir değişkenin object’mi yoksa string mi ya da number’mı, vb olup olmadığına bakabiliyorduk. Ancak genelde bizim için önemli olan değişkenin object olup olmadığı değil, ne tür bir object olup olmadığıdır.
var insan = new Object();
var renkler = new Array("yeşil", "sarı", "siyah", "beyaz");
alert(insan instanceof Object); //true
alert(insan instanceof String); //false
alert(insan instanceof Array); //false
alert(renkler instanceof Array); //true
5 Referans Tipleri
5.1 Object Tipi
Değişik şekillerde yaratılabilirler. En çok kullanılan 2 yöntem aşağıdaki gibidir. (java veya c# ile yakından ilgilenenler için iki yöntem de çok tanıdık gelecektir.)
//1. yöntem
var ogrenci = new Object();
ogrenci.isim = "Mustafa";
ogrenci.yas = 27;
//2. yöntem
var ogrenci = {
isim : "Mustafa",
yas : 27
}
5.2 Array Tipi (Diziler)
Aşağıdaki şekillerde tanımlanırlar.
//1. yöntem
var ulkeler = new Array();
ulkeler.push("Türkiye");
ulkeler.push("Almanya");
for(var i=0; i < ulkeler.length; i++){
alert(ulkeler[i]);
}
//2. yöntem
var rakamlar = [0,1,2,3,4,5,6,7,8,9];
//length özelliğini kullanarak diziye yeni değerler //ekleyebiliriz
var takimlar = ["Galatasaray", "Manchester United", "Milan"];
takimlar[takimlar.length] = "Fenerbahçe";
takimlar[takimlar.length] = "Beşiktaş";
Not: Diyelim ki yukarıdaki gibi 5 elemanlı takimlar dizisinin 50. indeksine yeni bir eleman eklediniz.
takimlar[50] = “Bursaspor”; // 5 ile 50 arasındaki tüm elemanların değeri undefined, dizinin boyutu ise 51 olacaktır.
Not 2: Dizinin 0. indeksine yeni bir eleman eklemek için unshift(), sonuna yeni bir eleman eklemek için push(), baştaki elemanı silmek için shift(), sondaki elemanı çıkarmak için pop() fonksiyonları kullanılır. Ayrıca bir değişkene atanmak koşuluyla gerçekleştirdikleri işlemden sonra dizinin uzunluğunu geri dönebilirler.
var sayi = takimlar.push(“Trabzonspor”, “Sakaryaspor”);
alert(sayi); // 53
Not 3: reverse() metodunu kullanarak elemanları sondan başa, sort() metodu ile ise baştan sona doğru sıralama yapabiliriz. Yalnız sort() metodu nümerik olarak değil string olarak sıralama yapar. Bu yüzden diziyi nümerik olarak sıralamak istersek sort() ile birlikte sayılar arasında karşılaştırma yapacak olan bir compare() metodu yazmamız gerekir.
//reverse
var ulkeler = ["Türkiye", "Almanya", "İtalya"];
alert(ulkeler.reverse()); //İtalya, Almanya, Türkiye
//sort
var sayilar = [1, 3, 5, 12, 29];
document.write(sayilar.sort()); // 1,12,29,3,5
// sıralama şekline dikkat edin, nümerik değil string
// kendi yazdığımız compare metodu
function compare(sayi1, sayi2){
if(sayi1 < sayi2)
return -1;
else if(sayi1 > sayi2)
return 1;
else
return 0;
}
document.write(sayilar.sort(compare)); // 1,3,5,12,29
Not 4: concat() metodu ile var olan dizinin yeni bir kopyası oluşturulabilir, hatta bu işlem esnasında yeni oluşturulan dizi üzerine yeni eleman veya başka bir dizi de eklenebilir.
var cicekler = ["Nergis", "Menekşe", "Sardunya"];
var cicekler_2 = cicekler.concat();
document.write(cicekler_2); //Nergis,Menekşe,Sardunya
var cicekler_3 = cicekler.concat("Lale");
document.write(cicekler_3); //Nergis,Menekşe,Sardunya,Lale
var cicekler_4 = cicekler.concat("Hanımeli",cicekler_2);
document.write(cicekler_4);
//Nergis,Menekşe,Sardunya,Hanımeli,Nergis,Menekşe,Sardunya
Not 5: slice() metodu ile de var olan dizinin yeni bir kopyası oluşturulabilir ve yine concat() metodundaki gibi parametrelerle yeni oluşturulan dizinin üzerinde oynamalar gerçekleştirilebilir.
//slice'da herzaman başlangıç elemanı dahil bitiş elemanı dahil değildir.
var sehirler = ["sidney", "new york", "muğla", "istanbul", "tokyo", "seul"];
var istanbulvesonrasi = sehirler.slice(3);
document.write(istanbulvesonrasi); //istanbul,tokyo,seul
var turksehirleri = sehirler.slice(2,4); //başlangıç indeksi dahil, bitiş indeksi dahil değil
document.write(turksehirleri); //muğla,istanbul
Not 6: splice() metodu ile yeni bir eleman veya elemanlar diziye eklenebilir ya da çıkartılabilir. splice() metodunun diğer bir özelliği bu işlemi gerçekleştirirken geriye silinen diziyi dönebilmesidir.
var isim = ["Mustafa", "Uzay", "Duru"];
var yeniisim = isim.splice(0,1,"Ayşe"); //0'dan 1'e kadar olan elemanları sil, 0'a Ayşe'yi ekle
document.write(isim); //Ayşe,Uzay,Duru
document.write(yeniisim); //Mustafa
5.3 Date Tipi (Tarih)
var tarih = new Date() şeklinde tanımlanır.
var tarih = new Date();
document.write(tarih); //Sun Aug 01 2010 18:26:28 GMT+0300 (GTB Yaz Saati)
var yenitarih = new Date("12/10/2010");
document.write(yenitarih.toDateString()); //Fri Dec 10 2010
var mytarih = "05/03/2009";
var sontarih = new Date(Date.parse(mytarih));
document.write(sontarih instanceof Date); //true
document.write(sontarih); //Sun May 03 2009 00:00:00 GMT+0300 (GTB Yaz Saati)
var isim = "mustafa";
var digertarih = new Date(Date.parse(isim));
document.write(digertarih instanceof Date); //true
document.write(isNaN(digertarih)); //true
//tarih formatında olmayan deger date'e convert edildi
//ancak değeri NaN
5.4 Function Tipi (Fonksiyon)
Bilmemiz gereken en önemli şey her fonksiyonun Function tipinin bir kopyası olduğudur. Dolayısıyla OOP mantığında düşünürsek yarattığımız her fonksiyon Function isimli ana nesneden türediği için Function nesnesinin tüm metod ve propertylerini de otomatik olarak içerir.
function Topla(sayi1, sayi2){
return sayi1 + sayi2;
}
document.write(Topla(2, 3)); //5
// Topla() ile topla’nın yazım dışında birbirlerinden hiçbir
// farkları yok çünkü ikisinin de yaptığı iş sadece heapteki
// yerin adresini göstermek.
var topla = function(sayi1, sayi2){
return sayi1 + sayi2;
}
document.write(topla(2,3)); //5
Javascript’te metod aşırı yüklemesi (overloading) yoktur. Bunun yerine revisited adı verilen birden fazla aynı isimli fonksiyonun yeniden çağırılması vardır. En son çağırılan fonksiyon hangisiyse o geçerli olur.
function ismimisoyle(isim){
return "benim ismim " + isim;
}
function ismimisoyle(isim){
return "my name is " + isim;
}
document.write(ismimisoyle("mustafa"));//my name is mustafa
ikinci ders ne zaman hocam?
YanıtlaSil