Bu makalemizde, JavaScript'teki dizileri işleyeceğiz. Henüz döngüleri görmediğimiz için bu konunun biraz havada kalması normal ancak bundan sonraki makaleler için bu konuyu öğrenmemiz gerekiyor.

Bir önceki makalemizde değişkenleri görmüştük ve bunları, yazdığımız programlarda içlerinde bilgi saklayabilen en küçük birimler olarak tariflemiştik. Yine demiştik ki, bir değişken aynı anda tek bir değer saklayabilir ve aynı değişkene iki farklı değer atarsak, ilk atılan değer kaybolur.

Diziler ise basitçe, içlerinde birden fazla değer saklayabilen değişkenler olarak tanımlanabilir. Bir örnek üzerinden gidersek, sanırım her ikimiz için de daha kolay olacak. Öncelikle HTML belgemizi hazırlayalım.








<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>


Ardından "program.js" dosyamızı hazırlayalım.

"use strict";

$(document).ready(function(){

    var dizi = new Array();
    
    dizi[0] = "Ali";
    dizi[1] = "Veli";
    dizi[2] = "Ahmet";
    dizi[3] = "Mehmet";
    
    $("body").append(dizi[0]);
    $("body").append("<br>");

    $("body").append(dizi[2]);
    $("body").append("<br>");
    
    $("body").append(dizi.length);
    
});


Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Örneğimizde ilk olarak "dizi" adında bir değişken tanımladık. Ancak değişkene ilk değerini atarken "new Array();" dedik. Bu yüzden tarayıcı bunu sıradan bir değişken olarak değil, içerisinde birden fazla değeri barındırabilen bir dizi olarak gördü. Bu diziyi, boş kutuları olan bir düzenek gibi düşünebiliriz. Tanımlamanın hemen altında, 0. kutuya "Ali" değerini, 1. kutuya "Veli" değerini, 2. kutuya "Ahmet" değerini ve 3. kutuya "Mehmet" değerini atadık (Garip gözüktüğünü biliyorum ama programcılıkta saymaya hep sıfırdan başlanır). Normalde bu işlemi bir değişken ile yapsaydık, sadece "Mehmet" değeri saklanırdı. Ancak dizilerin her bir elemanı, bir değişken gibi görev yapar ve farklı odalara yerleştirilen tüm değerleri aynı anda saklayabilirler (Her bir oda bir değişken gibi davrandığı için, aynı odaya iki değer atandığında, yine sadece son atanan değer saklanacaktır).

Atamalardan sonra kodun devamında 0. ve 2. odalarda bulunan değerleri ekrana yazdırdık. Aslında gördüğün gibi diziler, değişkenlerin yanlarına açılmış birer köşeli parantez içerisinde oda numarasının verilmesinden ibaret.

Örneğimizde son olarak "dizi.length" değerini ekrana yazdırmışız ki, ekranda "4" değerini görüyoruz. "length" özelliği, dizinin içerisinde o anda kaç adet değer saklandığını bize söyler. Döngüleri henüz görmediğimiz için bu değer bize çok da anlamlı gelmeyecektir. Şimdilik sadece ne işe yaradığını bil, yeter.

Not : Diğer programlama dillerinden farklı olarak JavaScript'te dizinin her elemanına farklı tipte bir değer atanabilir. Örneğin ilk elemana metinsel bir değer atanırken, ikinci elemana tırnak işareti kullanmadan sayısal bir değer atanabilir. Ancak komplekslik ve takip zorluğu getirdiği için, özellikle yeni başlayanlara bu yöntem tavsiye edilmez.

Gördüğün gibi dizileri kullanmak çok kolay. Ama daha kolay ve kısa bir kullanım yolu var. Hemen bir örnek üzerinde görelim. "program.js" dosyasının içeriğini aşağıdaki kod ile değiştirelim.

"use strict";

$(document).ready(function(){

    var dizi = ["Ali", "Veli", "Ahmet", "Mehmet"];
    
    $("body").append(dizi[0]);
    $("body").append("<br>");

    $("body").append(dizi[2]);
    $("body").append("<br>");
    
    $("body").append(dizi.length);
    
});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Yukarıdaki kullanım, dizi tanımlamanın kısa yolunu gösteriyor. "[ ]" işareti JavaScript için dizi anlamına gelir. İçerisine de "," ile ayrılmış dizi elemanları ardı ardına yazılabilir. İlk yazılan değer 0. odaya, ikinci yazılan değer 1. odaya yerleştirilir. Bir önceki örnekte 5 satırda yaptığımız işi burada tek satırda yaptık. Sanırım daha fazla açıklamaya gerek yoktur.

Diziler hakkındaki makalemizi tamamlamadan önce göstermek istediğim son bir örnek daha var. Konumuz, çok boyutlu diziler ya da dizi içeren diziler. "program.js" dosyasının içeriğini aşağıdaki kod ile değiştirelim.

"use strict";

$(document).ready(function(){

    var dizi = [ ["Ali", "a"], ["Veli", "b"], ["Ahmet", "c"], ["Mehmet", "d"]];
    
    $("body").append(dizi[0][0]);
    $("body").append("<br>");

    $("body").append(dizi[2][1]);
    
});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu örneğimizde, dizinin her bir elemanına, iki elemanlı birer dizi atadık. Böylece asıl dizimizin 4 elemanı, ve her elemanın da iki alt elemanı, toplamda 4 x 2 = 8 eleman taşıyan bir dizi elde ettik. Diziden değerleri okurken de, önce dış dizideki değeri okuyup, sonrasında da iç dizideki değeri okuduk. Yani "[2][1]" diyerek, "dış dizinin 2. elemanındaki dizinin 1. elemanı" şeklinde kayıtlı değere ulaştık. Döngüleri henüz görmediğimiz için bu işlem de biraz anlamsız gözükebilir. Şimdilik ihtiyaç olduğunda, dizilerin her bir elemanına birer dizi (hatta onların da her bir elemanına birer dizi ile sonsuza dek gider şekilde) atama yapılabildiğini bil, yeter.

Makalemizi tamamlarken, öğrendiklerimizi özetleyelim.
  • Diziler, aynı anda birden fazla değer saklayabilen değişkenlere benzerler.
  • Dizileri uzun ve kısa olmak üzere iki çeşit tanımlama yolu vardır.
  • Diziler her ne kadar farklı elemanlarda farklı değerleri aynı anda tutabilseler de, her bir elemanı aynı anda sadece bir tek değer tutabilir.
  • Dizilerin "length" özelliği, o anda dizide kaç adet eleman saklandığını gösterir.
  • Bir dizinin her bir elemanına farklı tipte değerler atanabilir ancak komplekslik ve takip zorluğu getirdiği için, özellikle yeni başlayanlara tavsiye edilmez.
  • Dizinin her bir elemanı basit değerler saklayabileceği gibi, başka dizileri de eleman olarak saklayabilir.


Yorum Gönder

  1. Dizileri böyle basit anlattılar da anlamadık mı? (h) Allah razı olsun.

    YanıtlaSil
  2. JavaScript yerine JQuery dersleri demen daha doğru olur zira native js yerine jquery kütüphanesi kullanarak konuyu anlatmışsın.

    YanıtlaSil

 
Top