Javascript Değişkenler

DEĞİŞKENLER

Değişken, adı üstünde, Javascript yorumlayıcısı tarafından bilgisayarın belleğinde tutulan ve içerdiği değer programın akışına göre değişen bir unsurdur. Değişkenlerin bir adı olur, bir de değeri. Program boyunca beğişkenin adı değişmez; fakat içeriği değişebilir

Değişkenlere isim verirken; 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ımlanırken, büyük harf kullanılırsa, program boyunca bu değişkenin büyük harfle yazılması gerekir.

Javascript sadece değişkenleri tanımlamayı zorunlu kılmakla kalmaz, fakat nerede tanımlandığına da özel bir önem verir. Javascript'e bir değişken tanımlamak için "var" anahtar-kelimesi kullanılır.Aynı satırda birden fazla değişken tanımlanabilir. Ayrıca tanımlama yapılırken değişkene doğrudan bir değer atanabilir.

var sonuc
var adi, soyadi, adres, siraNo
var i, j, k
var mouseNerede, kutuBos, kutuDolu
Var sonuc = "Merhaba Dünya!"
var adi = "Abdullah", soyadi = "Aksak"
var i = 100, j = 0.01, k = 135
var kutuBos = false, kutuDolu = true

DEĞİŞKEN TÜRLERİ

Javascript programlarında beş tür değişken bulunabilir:

1. Sayı (number): 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.

<script language="JavaScript">

var eni = 9, boyu = 4
var alani = eni * boyu
document.writeln(alani)

</script>

Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye "alani" adlı değişkenin değerini (36) yazdıracaktır.

2. Boolean: (true, false) Değişken:: 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 sorgulandığında "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, "toplandığında" değişkenlerin değerleri sırayla birbirine eklenir:

var adi = "Java", soyadi = "script"  
var adisoyadi = adi + soyadi  
document.writeln(adisoyadi)

</script>

Bu kod örneği ile Javascript, Browser penceresi içindeki belgeye "adisoyadi" adlı değişkenin değerini (Javascript) yazdıracaktır.

4. İşlev (Function) Değişken: . Javascript'e fonksiyonlarla iş yaptırılır. Bazı fonksiyonlar hazırdır ve bunlara metod denir. Bazı fonksiyonları ise biz tanımlarız ve komutlarını biz veririz. Bunlara "Programlanan Fonksiyonlar" denir. Genellikle <head> etiketleri arasına yazılır.

<script language="JavaScript">

document.writeln("merhaba")     // HAzır Fonksiyon

</script>

Bu scriptte hazır wirteln fonksiyonu ile ekrana merhaba yazdırılır. Script sayfanın neresinde yazıldıysa merhaba yazısıda orada görünecktir. Burada document bir nesnedir.

<head>
    
<script language="JavaScript">    // Tanımlanan Fonksiyon
     
function dugmebas() { 
        
alert("Selam!");    

}   
  
</script>  

</head>  

<body>  

<form>    
<input type="button" name="Button1" value="Buraya Tıklayın" onclick="dugmebas()">    
</form>
  
</body>

Bu script ile düğmeye basıldığında 'Selam!' yazan bir pencere oluşacaktır. Öncelikle fonksiyon alıcı tarafından okunur ve bilgisayarın hafızasında tutulur. Daha sonra normal 'HTML' dilindeki <FORM> komutuyla düğme yaratılır. 'onClick' düğmeye basıldığında hangi fonksiyonu çağrılacağını belirler. dugmebas() fonsiyonu <HEAD> komutları arasında tanımlandı. Böylece düğmeye basınca fonksiyon gerçekleştirildi. "alert" metodu JavaScript'te zaten mevcut olduğundan sadece onu çağırılmıştır.

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 yeri, 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.

NOT : 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.

<html>

<head>
<title>Merhaba Dünya!</title>

<SCRIPT LANGUAGE="Javascript1.2">


</SCRIPT>

</head>

<body>

<SCRIPT LANGUAGE="Javascript1.2">


</SCRIPT>

<b>Merhaba Dünya</b><br>

<form>

<input type="submit" name="dugme1"value="TIKLAYIN!" onclick="merhaba()">

</form>

</body>
</html>

merhaba fonksiyonunda "alert(metin1)" satırındaki 1 rakamını 2 ve 3 diye değiştirirseniz, uyarı kutusunun içeriğini değiştirdiğini göreceksiniz.

<html>

<head>
<title>Merhaba Dünya!</title>

<SCRIPT LANGUAGE="Javascript1.2">


</SCRIPT>

</head>

<body>

<SCRIPT LANGUAGE="Javascript1.2">


</SCRIPT>

<b>Merhaba Dünya</b><br>

<form>

<input type="submit" name="dugme1 "value="TIKLAYIN1!" onclick="merhaba()">

<input type="submit" name="dugme1 "value="TIKLAYIN2!" onclick="hello()">

</form>

</body>
</html>

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, 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. ikinci düğme tklandığında ise metin1'in değerinin değişmediğini ve 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.

DİZİ DEĞİŞKENLER (ARRAY)

Javascript'in şu ana kadar ele aldığımız bütün değişkenleri, tekildir. Yani bu değişkenlerden Javascript bakımından sadece bir adet vardır; dolayısıyla bir adet de değeri bulunur.

Oysa şimdi şöyle bir durum düşünün: Evcil kuşları tanıttığınız bir site yapıyorsunuz. Ele alacağınız bütün kuşları ve özelliklerini bir tablo olarak düşünebilir misiniz? Kuş-1: Kanarya, Kuş-2: Bülbül, Kuş-3: Muhabbet Kuş-4: Papağan, gibi. Bunların hepsini tek tek tanımlamaya kalkarsak, daha sonra kullanım zorluğu doğabilirdi. Javascript, bize "dizi-değişken" (Array) yoluyla, örneğin bir "kuş" değişkeni oluşturup, bunun içine istediğimiz kadar değer koyma imkanı veriyor. Bir dizi-değişkenin bireylerinin değerlerini dizi-değişkenin endeksi ile çağırabilir veya belirleyebilirsiniz.Bir dizi-değişken oluşturmanın formülü şudur

var dizinin_Adı = new Array(unsur1, unsur2, unsur3...unsurN)

Bu formüle göre, kuş dizisini şöyle oluşturabiliriz:

var kusDizi = new Array(bülbül, kanarya, muhabbet, papagan)

Diziler sıfırdan itibaren numaralanır; yani bizim örneğimizde dizinin birinci üyesi, kusDizi[0], ikinci üyesi kusDizi[1], üçüncü üyesi kusDizi[2], dördüncü üyesi ise kusDizi[3] diye anılır. Burada örneğin kusDizi[2] değişkeni "muhabbet" değerini taşır. İlerde bu değeri değiştirmek ve diyelim ki "Saka" yapmak istersek, Javascript kodumuzun uygun yerinde şunu yazarız:

kusDizi[2]="saka"

NOT: Diziler Javascript açısından nesne sayılırlar. Dlayısıyla, nesne oldukları için özellikleri (property) vardır. Örneğin, oluşturulan dizi-değişkenin kaç üyesi olduğu, "kusDizi.length" özelliğinin içinde yazılıdır.

<script language="Javascript">

</script>

Yukarıda eray ismiyle bir dizi tanımlanmış ve dizi içerisine sırasıyla; ad-soyad-yaş-eeee-ffff string değerleri yazılmış. Yazdırma işlemi sonucunda tüm bu kelimeler yanyana yazılacaktır.

<script language="Javascript">

</script>

Burada tanımlanan eray dizi değişkeninin sadece ilk değeri ( 0.index) ekranda yazdırılıyor. Yani kod çalıştığında ekranda "ad" yazacaktır.