Yazar: merhaba değerli web tasarım meraklıları! bu yazımda javascript ile ilgili değişkenler konusuna değineceğim.
her programlama dilinin olmazsa olmazı değişkenlerdir ve bu değişkenler konusu programlamanın en küçük yapıtaşı diyebiliriz.
tıpkı diğer programlama dillerinde olduğu gibi javascript dilinde de değişkenler vardır ve bu değişkenlerin bir tanımlama tarzı vardır.
şimdi bu yazıylada birlikte javascriptte nasıl değişken tanımlayabiliriz ve nasıl kuralları vardır bunlara bakalım.
Değişkenlere isim verirken Belirleyici isimleri kurallarına riayet etmeniz gerekir. Yani bir değişkenin adı rakamla veya alt çizgi (_) dışında bir işaretle başlayamaz. Javascript, büyük harf-küçük harf ayırt ettiği (case-sensitive olduğu) için, örneğin SONUC ve sonuc kelimeleri iki ayrı değişken gösterir. Bir değişkeni tanımlarken, büyük harf kullandıysanız, program boyunca bu değişkeni büyük harfle yazmanız gerekir.
Değişken tanımlamak, bilgisayar programcılarına daima gereksiz bir yük gibi görünür. Birazdan göreceğiz, Javascript sadece değişkenleri tanımlamayı zorunlu kılmakla kalmaz, fakat nerede tanımlandığına da özel bir önem verir. Javascript’e bir Belirleyici’nin değişken olarak kullanılacağını bildirmek için “var” anahtar-kelimesini kullanırız:
var sonuc
var adi, soyadi, adres, siraNo
var i, j, k
var mouseNerede, kutuBos, kutuDolu
Gördüğünüz gibi, bir “var” satırında birden fazla değişken tanımlayabilirsiniz.
Bazı diğer programlardan farklı olarak Javascript, size değişkenleri hem beyan, hem de içeriğini belirleme işini aynı anda yapma imkanı veriyor (initialization):
var sonuc = ”Merhaba Dünya!”
var adi = ”sadik”, soyadi = ”ozdogan”
var i = 100, j = 0.01, k = 135
var kutuBos = false, kutuDolu = true
Gerekiyorsa, bir değişkeni önce tanımlar, sonra değerini belirleyebilirsiniz:
var kutuBos = false, kutuDolu
kutuDolu = true
Javascript, programcıya bir değişkeni tanımlamadan “initalize etme” (içine doldurma) imkanı da verir; bu durumda o değişken genel (global) nitelik kazanır. Buna birazdan değineceğiz; ama iyi programlama tekniği ve özellikle daha sonra hata arama zorunluğu sebebiyle, değişkenlerin açık-seçik tanımlanması en doğru yoldur.
Bir değişkeni tanımlayarak içini doldurmadan (initialization’dan) önce içindeki değeri sorgulamaya kalkarsanız, Browser’ın Javascript yorumlayıcısı o noktada durur ve tanımlanmamamış (undefined) değişken hatası verir.
Javascript programlarında beş tür değişken bulunabilir:
1. Sayı (number): -14, 78, 87678
Sayı türündeki değişkenler, tam sayı, ondalık sayı, pozitif sayı veya negatif sayı olabilir. Sayı değişkenlerle aritmetik işlemler yapılabilir.
var eni = 9, boyu = 4
var alani = eni * boyu
document.writeln(alani)
Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “alani” adlı değişkenin değerini (36) yazdıracaktır.
2. Boolean değişken: true, false
Javascript, tanımlanırken değeri “true” (doğru) veya “false” (yanlış) olarak belirtilen değişkenleri otomatik olarak Boolean değişken olarak sınıflandırır ve sorguladığınızda “true” için 1, “false” için 0 değerini verir.
3. Alfanümerik (String) Değişken: “Merhaba Dünya!”
Alfanümerik değişken, kendisine tek veya çift tırnak içinde verilen bütün karakterleri tutar, ve sorulduğunda aynen bildirir. Alfanümerik değişkenin içi boş olabilir (var adi = “”, soyadi = “”). Alfanümerik değişkenler, tabir yerinde ise “toplandığında” değişkenlerin değerleri sırayla birbirine eklenir:
var adi = “sadık”, soyadi = “özdoğan”
var adisoyadi = adi + soyadi
document.writeln(adisoyadi)
Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye “adisoyadi” adlı değişkenin değerini (sadıközdoğan) yazdıracaktır. Araya boşluk koymanın tekniğine ilerde değineceğiz!
4. İşlev (Function) Değişken:
Javascript’in hayatî noktası fonksiyonlardır. Javascript’e fonksiyonlarla iş yaptırırız. Kimi fonksiyonu, Javascript’i tasarlayanlar bizim için tanımlamışlardır; bunlara metod denir. (Kimi metod, ne yapacaksa bizim hiç bir katkımızı beklemeden yapar; kimi metod mutlaka bizden bir katkı bekler.) Kimi fonksiyonları biz tanımlarız ve komutlarını biz veririz. Bunlara “Programlanan Fonksiyonlar” denir. Başlarda yazdığınız ve merhaba2.html adıyla kaydettiğiniz dosyada biz “merhaba()” adlı bir fonksiyon oluşturduk; sonra bu fonksiyona bir otomatik fonksiyon olan alert() metodunu kullanmasını bildirdik; bu otomatik fonksiyona da görevini yaparken kullanmasını istediğimiz değeri verdik!
5. Nesne (Object) değişkenleri: window, document
Bu tür değişkenlere değişken adını vermek bile gerekmez; çünkü bunlar Browser’ın nesneleridir. Fakat Javascript kodlarımızda bu nesneleri de değişken gibi kullanabiliriz. Bu sınıfa giren özel bir değişken ise değerini “null” (içi boş) kelimesiyle belirlediğiniz değişkenlerdir.
Javascript, değişkenlerini bu beş sınıfa ayırmakla birlikte sizden değişkenlerinizini sınıflamanızı beklemez. Sınıflamanın önemi, daha sonra, programın ileri bir aşamasında bir değişkenin değeri ile yaptıracağınız işlemde ortaya çıkacaktır. Bir değişken, kendi sınıfının yapamayacağı bir işleme veya sorgulamaya tabi tutulursa, Javascript size pek de kibarca olmayan bir hata mesajı ile değişkeni doğru kullanmadığınızı hatırlatacaktır.
Bununla birlikte bir fonksiyonda sayı olarak tanımlanmış ve doldurulmuş bir değişken, aynı fonksiyonda daha sonraki bir işlemde veya başka bir fonksiyonda alfanümerik değişken olarak tanımlanabilir ve doldurulabilir. Bu değişken sorgulandığında değerini, yetki alanı (scope) çerçevesinde bildirir.
Değişkenlerin yetki alanı veya geçerli olduğu alan (scope), oluşturulmuş ve değeri belirlenmiş olduğu sahayı, yani kendisine atıfta bulunulduğu zaman bildireceği değerini ve bu değişkene nerelerden atıfta bulunulabileceğini gösterir. Şimdi, HTML dosyasının baş tarafında (HEAD etiketi içinde) bir değişkeni tanımladığınızı ve ona bir değer verdiğinizi düşünün. Daha sonra yazacağınız bütün fonksiyonlarda veya değerini belirleyebileceğiniz otomatik fonksiyonlarda (metod’larda) bu değişkeni bir daha tanımlamaya ve değerini belirlemeye gerek kalmadan kullanabilirsiniz; çünkü Javascript açısından bu değişken genel (global) değişken sayılır. Daha sonra ayrıntılı olarak göreceğimiz gibi, HTML’in gövde kısmında (BODY etiketi içinde) bir fonksiyon yazdığımızı ve bu fonksiyonun içinde bir değişken tanımladığımızı düşünün. Daha sonra yazacağınız bir fonksiyonda bu değişkeni kullanamazsınız; çünkü Javascript bir fonksiyonun içindeki değişkeni yerel (local) değişken sayar ve kendi yetki alanı (scope’u) dışında kullanmanıza izin vermez. Bir yerel değişken, ait olduğu fonksiyon çağrıldığı anda oluşturulur ve fonksiyonun icrası bittiği anda yok edilir. Dolayısıyla bir fonksiyon, başka bir fonksiyonun yerel değişkinini kullanmaya kalktığında “undefined” (tanımlanmamış) değişken hatasıyla karşılaşırsınız.
Bir değişkeni bütün HTML sayfası boyunca kullanmayı düşünüyorsanız, bu değişkeni, HTML sayfasının başında içinde fonksiyon bulunmayan bir SCRIPT bölümünde tanımlamalı ve doldurmalısınız. İyi bir programlama tekniği, genel değişkenleri, açık-seçik tanımlamak ve bunu yorum satırıyla belirtmektir:
<doctype html>
<html>
<HEAD>
<title> merhaba dünya </title>
</head>
<body>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE=”SUBMIT” NAME=”dugme1″ VALUE=”TIKLAYIN!” onclick=”merhaba()”>
</FORM
<P>BURAYA ÇEŞİTLİ AMAÇLARLA HTML KODLARI GİREBİLİR!! SONRA TEKRAR SIRA JAVASCRIPT’E GELEBİLİR</P>
<script>
// genel değişken tanımları
var metin1 = “Merhaba Dünya!”
var metin2 = “Vayy, merhaba canım! N’aber?”
var metin3 = “Bu samimiyet nereden? Lütfen biraz ciddi olur musunuz?”
</script>
<br>
<p> başka bir javascript kodu gelecek </p>
<script>
//bu fonksiyon uyarı kutusu açar
function merhaba()
{
alert(metin1)
}
</script>
</body>
</HTML>
Bu kodu da merhaba3.html adıyla kaydedebilirsiniz. Daha sonra merhaba fonksiyonunda “alert(metin1)” satırındaki 1 rakamını 2 ve 3 diye değiştirirseniz, merhaba3.html’in uyarı kutusunun içeriğini değiştirdiğini göreceksiniz. Şimdi, merhaba3’da merhaba() fonksiyonunu şöyle değiştirin ve şu eki yapın:
function merhaba()
{
var metin1 = “Sana da merhaba!”
alert(metin1)
}
function hello()
{
alert(metin1)
}
Sonra, aynı dosyada mevcut düğme oluşturan INPUT satırının altına şu satırı ekleyin; sayfanızda iki düğme görünecektir:
<INPUT TYPE=”SUBMIT” NAME=”dugme2″ VALUE=”TIKLAYIN!” onclick=”hello()”>
Bu düğmelerden birincisi, merhaba() fonksiyonunu, ikincisi hello() fonksiyonunu çağıracak. Genel olarak tanımladığınız ve değer verdiğiniz metin1 değişkeninin değerini merhaba() fonksiyonunda değiştirdiniz; bu değişkenin yeni değeri “Sana da merhaba!” şeklini aldı. Bu metni, merhaba7.htm adıyla kaydedip, Browser’da açtığınızda ve birinci düğmeyi tıkladığınızda, uyarı kutusunun içeriğinin metin1 değişkeninin genel değerini değil yerel değerini içerdiğini göreceksiniz. Yani metin1’in değeri değişmiş oldu. Peki, ikinci düğmeyi tıklayın! metin1’in değeri değişmemiş gibi, uyarı kutusunun genel tanımlamadaki değeri kullandığını göreceksiniz. Oysa biraz önce, birinci düğmeyi tıkladığımızda yani merhaba() fonksiyonu çalıştığında metin1’in değeri değişmemiş miydi? Şimdi neden eski metin1’in eski değeri karşımıza çıkıyor?
Bu alıştırmanın öğrettiği kural şöyle özetlenebilir: Bir genel değişken, bir fonksiyon içinde yerel olarak değiştirilebilir; ama onun genel değeri diğer fonksiyonlar için geçerli kalır. Javascript programlarınızı yazdığınız zaman genel değişkenleriniz beklediğiniz değeri vermiyorsa bu değeri bir fonksiyonun yerel olarak, sırf kendisi için, değiştirip değiştirmediğine bakmalısınız. Bu tür hatalardan kaçınmanın bir yolu, yerel değişkenlerinizle genel değişkenlerinize farklı isimler vermektir.
Javascript, değişkenlerinizi isimlendirmede rakamla ve işaretle başlamamak dışında kural koymuyor; ama iyi programcılık tekniği, değişkenlere anlaşılır ve kullanıldığı yeni belli eden isimler vermektir. Örneğin, ”adi” şeklindeki bir değişken adı, çok değişkenli bir Javascript programında yanıltıcı olur. “musteri_adi” veya “musteriAdi” çok daha uygun olabilir. Ayrıca değeri “Evet” (=doğru, true) veya “Hayır” (=yanlış, false) olan Boolean değişkenlerin adlandırılmasında, örneğin, “doluMu,” “tamamMi,” “acikMi,” “bittiMi” gibi cevabı çağrıştıran değişken adları kullanabilirsiniz.
javascript, değişkenlerinizi isimlendirmede rakamla ve işaretle başlamamak dışında kural koymuyor; ama iyi programcılık tekniği, değişkenlere anlaşılır ve kullanıldığı yeni belli eden isimler vermektir. Örneğin, ”adi” şeklindeki bir değişken adı, çok değişkenli bir Javascript programında yanıltıcı olur. “musteri_adi” veya “musteriAdi” çok daha uygun olabilir. Ayrıca değeri “Evet” (=doğru, true) veya “Hayır” (=yanlış, false) olan Boolean değişkenlerin adlandırılmasında, örneğin, “doluMu,” “tamamMi,” “acikMi,” “bittiMi” gibi cevabı çağrıştıran değişken adları kullanabilirsiniz.
artık javascript ile nasıl değişken tanımlayabileceğimizi öğrendik. ilerideki yazılarda javascript ile programlama yapabilmek için gerekli olan diğer unsurları öğrenebiliriz.
javascript ile ilgili soru ve sorunlarınızı yazımın altında yer alan yorum yaz kısmından bana ulaştırabilirsiniz.
iyi bloglamalar herkese.
Bir önceki yazımız olan javascript yazım kuralları uygulamalı anlatım başlıklı makalemizde javascript yazım kuralları, javascript yazım kuralları uygulamalı anlatım ve sadık özdoğan javascript dersleri hakkında bilgiler verilmektedir.