Bu makalemiz, çok çalışmak yerine bizim yerimize bilgisayarı nasıl daha çok çalıştırabiliriz de etrafımızdaki insanlarla kopmak üzere olan bağlantılarımızı kurtarabiliriz konusunda olacak. Evet, konumuz döngüler.

Asıl mesleği programcılık olmamasına rağmen script seviyesinde de olsa programcılık ile uğraşan insanların ortak bir özelliği, tüm işi el emeğiyle yapmaya yatkın olmalarıdır. Bu insanların olağan üstü kopyala-yapıştır-değiştir yetenekleri vardır. Öyle ki, bir kod bloğunu Excel'e kopyalar, hücreleri birleştirir, replace yapar, tekrar not defterine yapıştırır bir daha bulk replace yapar ve ihtiyacı olan kodu elde ederler.

Örneğin bu tarz insanlara, 1 ila 1000 arasındaki sayıların toplamını ekrana yazdır dediğimizde, aşağıdaki tarzda bir kod yazmaları çok muhtemeldir.







"use strict";

$(document).ready(function () {

    var x = 1 + 2 + +3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11.....

    $("body").append(x);
});


Bunu yaptıktan sonra öncelikle olağan üstü sabırlarına ve el yeteneklerine dikkat çekerek övünürler. Ardından da bilgisayarın insanları asosyalleştirmesinden yakınırlar.

Birader, bilgisayarın suçu yok ki, suç senin. Bir de bilgisayara sor bakalım, senden memnun mu? Aletin klavyesini eskittin, bir de konuşuyorsun!

Kod yazmak acı vermemeli, zevk vermeli. Tamam ama nasıl?

Cevap : Döngülerle


Bu makalemizde iki çeşit döngü tipini ve kullanımlarına ilişkin örnekleri göreceğiz.


for Döngüsü

İyice derine inmeden önce adım adım gidelim. for döngüsü, kendisine verilen işi, kendisine söylenen miktarda tekrarlar. Hemen bir örnek üzerinden görelim. İlk olarak klasik HTML sayfamızı 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 aşağıdaki kodlarla "program.js" dosyamızı hazırlayalım.

"use strict";

$(document).ready(function () {

    for (var i = 0; i < 5; i++) {
        
        $("body").append("Ali");
        $("body").append("<br>");
    }
});

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.


Burada for döngüsünün en basit kullanım şeklini görüyoruz. for'dan sonra gelen parantezlerin içerisinde ";" ile ayrılmış üç kısım bulunuyor. İlk kısımda "i" isminde bir değişken tanımlıyoruz ve ilk değerini 0 olarak belirliyoruz. Ardından i'nin 5'den küçük olması şeklinde bir koşul yazıyoruz ki, döngü bu kural geçerli olduğu sürece dönmeye devam edecek. Son olarak, "i++" şeklinde bir ifademiz var ki, bu ifade ile döngünün her dönüşünde i değişkeninin değerini bir arttırıyoruz.

Peki ne oluyor burada?

  • Döngü ilk kez çalışmaya başladığında, i değişkeninin değeri 0 oluyor ve "i < 5" şartını sağladığı için döngünün içerisinde yazan kod işletiliyor, yani ekrana "Ali" yazdırılıyor.
  • Döngü tekrar çalıştırılıyor. Bu sefer i'nin değeri 1 arttırılıyor ve 1 oluyor. "i < 5" şartı halen sağladığı için döngünün içerisinde yazan kod tekrar çalıştırılıyor ve ekrana yine "Ali" yazdırılıyor.
  • Döngü tekrar çalıştırılıyor. i'nin değeri 1 arttırılıyor ve 2 oluyor. "i < 5" şartı halen sağladığı için döngünün içerisinde yazan kod tekrar çalıştırılıyor ve ekrana yine "Ali" yazdırılıyor.
  • Döngü tekrar çalıştırılıyor. i'nin değeri 1 arttırılıyor ve 3 oluyor. "i < 5" şartı halen sağladığı için döngünün içerisinde yazan kod tekrar çalıştırılıyor ve ekrana yine "Ali" yazdırılıyor.
  • Döngü tekrar çalıştırılıyor. i'nin değeri 1 arttırılıyor ve 4 oluyor. "i < 5" şartı halen sağladığı için döngünün içerisinde yazan kod tekrar çalıştırılıyor ve ekrana yine "Ali" yazdırılıyor.
  • Döngü tekrar çalıştırılıyor. i'nin değeri 1 arttırılıyor ve 5 oluyor. Ancak bu sefer "i < 5" şartı sağlanmıyor. Bu yüzden de döngünün içerisine girilmeden çıkılıyor.


Evet, 5 kez Ali yazmak için biraz fazla kod yazdık, direk yazsaydık belki daha kolaydı ama ya sayımız 5 değil de, 500 olsaydı? Ya da bu sayı kullanıcı tarafından çalışma anında belirlenseydi?

Biliyorum, ekrana n kez Ali yazdırmak çok aptalca. Ama film burada bitmiyor. O "i" değişkeni var ya. İşin sırrı onda. Bir de aşağıdaki örneğe bakalım.

"use strict";

$(document).ready(function () {

    for (var i = 0; i < 5; i++) {

        $("body").append("Ali " + i);
        $("body").append("<br>");
    }
});

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.


Aslında bu örneğin, bir önceki örnekten pek bir farkı yok. Sadece Ali'nin yanına i değişkenimizin o anki değerini de yazdırdık. Döngünün her dönüşünde, kaçıncı kez döndüğü bilgisine sahip olmak, bize çok farklı imkanlar sağlayacaktır.

Örnek mi lazım? Peki. 1 ila 1000 arasındaki sayıların toplamını ekrana yazdıran bir kod yazalım.
"use strict";

$(document).ready(function () {

    var total = 0;

    for (var i = 1; i < 1001; i++) {

        total += i;
    }

    $("body").append(total);
});

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.


Biraz biraz anlamlı gelmeye başladı mı? Döngülerin asıl gücü, diziler ile birlikte çalıştığında ortaya çıkar. Kullanıcı tarafından doldurulan bir dizinin olduğunu varsayalım. Kodu yazdığımız anda kullanıcının diziye kaç adet eleman gireceğini bilemeyiz. Ancak dizilerin "length" özelliği ile dizideki eleman sayısını öğrenebilir ve bu sayıya göre döngümüzü işletip dizideki her bir eleman için gerekli işlemleri gerçekleştirebiliriz. Yine bir örnek üzerinde görelim.

"use strict";

$(document).ready(function () {

    var users = [
        {name: "Ali", age: 45},
        {name: "Veli", age: 25},
        {name: "Ayse", age: 20},
        {name: "Esma", age: 30}
    ];

    for (var i = 0; i < users.length; i++) {

        $("body").append(users[i].name + " " + users[i].age + " yasinda");
        $("body").append("<br>");
    }
});

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 dizideki eleman sayısı kadar dönerek, her dizi elemanının özelliklerini uygun şekilde ekrana yazdırdık. Burada diziye yeni bir eleman eklesek, kodda hiçbir değişiklik yapmaya gerek kalmaksızın o elemanın değerleri de döngü tarafından ekrana yazılacaktır.


while Döngüsü

Bu döngü tipi, for döngüsüne çok benzer ancak içerisinde sadece koşul kontrolü içerir. Değişkenin ilk değerinin verilmesi ve her dönüşte değerinin arttırılması işlemlerini kendisi yapmaz, döngü içerisinde bulunan kodun yapmasını bekler. Bir örnek üzerinde görelim.
"use strict";

$(document).ready(function () {

    var users = [
        {name: "Ali", age: 45},
        {name: "Veli", age: 25},
        {name: "Ayse", age: 20},
        {name: "Esma", age: 30}
    ];

    var i = 0;

    while (i < users.length) {

        $("body").append(users[i].name + " " + users[i].age + " yasinda");
        $("body").append("<br>");

        i++;
    }
});

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.


Burada i değişkeninin tanımlanmasıyla ilk değerinin atanması ve her dönüşte değerinin bir arttırılmasını ayrıca biz gerçekleştirdik. Tamam da, bu döngünün ne gibi bir kullanım amacı olabilir ki? Bariz şekilde for'a göre daha kullanışsız gözüküyor.

İşin aslı, for gibi belirli bir düzende ilerlemeyen sayaçlar ve koşullar kullanmamız gerektiği durumlarda while döngüsüne başvururuz. Örnek olarak toplamları 50'den küçük sayıları ekrana yazdırmak istesek nasıl bir döngü yazmamız gerekir? 1'den başlayarak ekrana yazdırmaya başlayacağız ama kaça kadar? Burada her döngüde ekrana yazılan sayı ile döngünün dönmesini sağlayacak koşulda kontrol edilmesi gereken sayı farklı. Bu durumda, aşağıdaki gibi bir yol izlememiz gerekir.
"use strict";

$(document).ready(function () {

    var i = 1;
    var total = 0;

    while (total < 50) {

        $("body").append(i);
        $("body").append("<br>");

        i++;

        total += i;
    }
});

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.


Burada iki farklı değişkenimiz bulunuyor. İlki ekrana yazdırılacak "i" değişkeni iken, diğeri de, döngünün her işleyişinde sayıların toplamını tutan "total" değişkeni. Biz her ne kadar "i" değişkeni ile ekrana yazı yazdırsak da, koşulumuzu "total" değişkeni üzerinden işletiyoruz.


Böylece döngüler makalemizin de sonuna gelmiş olduk. Öğrendiklerimizi özetleyelim.
  • Çok kod yazmak değil, aynı işi yapan en az kodu yazmak maharettir.
  • Döngüler ile tekerrür eden işleri tek tek elimizle yapmak yerine çok daha az kod yazarak ve emek harcayarak bilgisayara yaptırmamız mümkündür.
  • Kolaylığın haricinde, dönüş sayısını çalışma zamanına kadar tahmin edemediğimiz durumlar için döngü kullanmamız zorunludur
  • JavaScript'te döngüler for ve while olmak üzere ikiye ayrılır (Bunların birkaç değişik varyasyonu daha var ama az kullanıldığı ve kafa karıştırmaması amacıyla anlatmıyorum).
  • for döngüsü, belirli bir düzen içerisinde giden sayılarla yapılacak döngülerde kullanılırken, while döngüsü daha esnek koşulların tanımlanması gerektiği durumlarda kullanılır.


Yorum Gönder

 
Top