JavaScript For Döngüsü
Web Developer'lara Selamlar :)
Yeni bir JavaScript makalesinde bugün JavaScript For Döngüsünü işleyeceğiz,for döngüsüni C#,Java ve Visual Basic
makalelerimde anlatmıştım ve syntax olarak hemen hemen aynı diyebilirim.
Aşağıda for döngüsünün genel yapısını görebilirsiniz,JavaScript'te ise int yerine var değişken tipinin yazılıyor olmasıdır:
Döngüler,programlama dillerinde olduğu gibi bir betik dili olan JavaScript'te de kullanılabiliyor.Döngülerden kısaca
bahsedersek başlangıç ve bitiş noktası olan iki değer arasındaki tüm değerleri döndüren kod yapılarıdır diyebiliriz.Döngüler içerisine yazılacak kodlar ile döngünün dönüş anında verdiği her değer boyunca yeniden
çalıştırılabilir.
Döngüler,JavaScript'te for,while,do-while,for-in olmak üzere 4'e ayrılmaktadır ve içlerinden for-in döngüsü dışında
geri kalan tüm döngü tipleri diğer yazılım dillerinde benzer biçimde bulunmaktadır.For-in döngüsü için ilerleyen
makalelerimizde tekrar detaya gireceğiz,şimdilik biz JavaScript'te for döngüsü ile ilgili bir örnek yapalım.
Yapacağımız for döngüsü örneğinde kullanıcıdan bir sayı isteyeceğiz ve 0'dan kullanıcının vereceği sayıya kadar olan
tüm sayıların ayrı ayrı karelerini alıp ekrana yazdıracağız ve bu gelen sayıların toplam değerlerini yazdıracağız.
Not:Bu arada web sayfasına herhangi bir metin ya da tag yazdırmak için JavaScript'teki document.write() metodunu
kullanacağız.
Şimdi Dreamweaver'i açıp yeni bir boş HTML belgesi oluşturuyor ve body tag içine yalnızca tipi submit olan input
yerleştiriyoruz:
Şimdide yukarıdaki örneğimizi çalıştıracak olan bir JavaScript function yazıyoruz:
Kullanıcıdan herhangi bir değer alabilmek için tıpkı alert metodu gibi bir ekranda mesaj kutusu kullanmak istersek bunu JavaScriptte prompt metodunu kullanarak yapabiliyoruz.
Prompt metodu ile kullanıcının gireceği değeri "sayi" isimli değişkenimize atadıktan sonra döngüden gelecek olan
sayıların toplamını bir değişkende tutmalıyız ve bu değişkenimiz daha sonra döngü içerisinde katlanarak artacağı için
başlangıç değerini sıfır veriyoruz:
Şimdi for döngümüzü yazıyoruz,döngümüzün başlangıç değer sıfır olacak ve kullanıcının verdiği sayı kadar dönecek:
Döngümüz hazır,şimdi her gelen değerin karesini alıp önce ekrana yazdıracak ve toplam isimli değişkene ekleyeceğiz:
Ardından for döngüsü tamamlandığında toplam değişkenimiz o ana kadar gelen tüm sayıların karelerinin toplamlarını
almış olacak ve bizde bu toplam değeri sayfamıza yazdırıyoruz:
Döngümüz hazır ve artık JavaScript fonksiyonumuzu kurduktan sonra fonksiyonumuzu daha önceden oluşturduğumuz input DOM nesnesiyle bağdaştırıyoruz,bunun için onclick eventine eklememiz yeterli:
Şimdi programımızı test etme zamanı:
Gördüğümüz gibi program tam istediğimiz gibi çalışıyor,ancak bir noktayı unutuyoruz;
Kullanıcı ya sayı girmeden tamam tuşuna basarsa?
Yani boş bir sayı olması durumunda for döngüsünün bitiş noktası olmayacak ve sonsuza kadar dönmeye devam
edecektir,for döngüsünün sonsuza kadar dönmesi durumunda ise web tarayıcısı (browser) sürekli meşgul olacaktır.Bu
yüzden if-else koşulu ile kullanıcının boş bir değer geçmesini önlemeliyiz:
Önlemimizide aldıktan sonra sıra geldi döngü deyimlerine; döngülerde sadece for döngüsüne özel olmamak koşullarda iki
deyim bulunmaktadır ve bu deyimler döngüler içerisine yazılır:
A-Break Deyimi:
Break deyimi ile döngünün çalışma esnasında döngüyü kırmasına yani döngüden çıkılmasına olanak sağlanır,örneğin
toplam adındaki değişkenimiz 100'den büyük olması durumunda döngüden çıkılsın istiyorsak hemen döngünün içine if
koşulu yazmamız yeterlidir:
16.satırda yazdığımız if koşulu öncelikle toplam değişkenin değerine bakacak ve 100'den büyük olması durumunda alert
metodu ile kullanıcıyı bilgilendirip break deyimiyle döngüyü durduracaktır.
B-Continue Deyimi:
Continue deyimi for döngüsü içerisinde break deyimi gibi yazılır ancak döngüyü durdurmak yerine döngüden gelen değeri yoksayarak içeriğinde belirtilmişse kodların çalışmasını engeller.
Örneğin döngüden gelen sayının karesi 50'den küçükse döngü ekrana o sayının karesini yazdırmasın:
Döngülerde kullanılan bu iki deyim tek döngü içerisinde aynı anda kullanılabilirler,bu örneğimizde hem break hem de
continue deyimlerini kullandık ve 1'den 20'ye kadar olan sayıların karelerini almak istediğimizde ekran görüntümüz şu
şekilde çıkmaktadır:
Döngülerle ilgili bugünkü makale dizimizin sonuna geldik,dizi diyorum çünkü bir sonraki makalelerimizde diğer döngüleri öğrenmeye devam edeceğiz.
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
Projeyi İndir
Yeni bir JavaScript makalesinde bugün JavaScript For Döngüsünü işleyeceğiz,for döngüsüni C#,Java ve Visual Basic
makalelerimde anlatmıştım ve syntax olarak hemen hemen aynı diyebilirim.
Aşağıda for döngüsünün genel yapısını görebilirsiniz,JavaScript'te ise int yerine var değişken tipinin yazılıyor olmasıdır:
Döngüler,programlama dillerinde olduğu gibi bir betik dili olan JavaScript'te de kullanılabiliyor.Döngülerden kısaca
bahsedersek başlangıç ve bitiş noktası olan iki değer arasındaki tüm değerleri döndüren kod yapılarıdır diyebiliriz.Döngüler içerisine yazılacak kodlar ile döngünün dönüş anında verdiği her değer boyunca yeniden
çalıştırılabilir.
Döngüler,JavaScript'te for,while,do-while,for-in olmak üzere 4'e ayrılmaktadır ve içlerinden for-in döngüsü dışında
geri kalan tüm döngü tipleri diğer yazılım dillerinde benzer biçimde bulunmaktadır.For-in döngüsü için ilerleyen
makalelerimizde tekrar detaya gireceğiz,şimdilik biz JavaScript'te for döngüsü ile ilgili bir örnek yapalım.
Yapacağımız for döngüsü örneğinde kullanıcıdan bir sayı isteyeceğiz ve 0'dan kullanıcının vereceği sayıya kadar olan
tüm sayıların ayrı ayrı karelerini alıp ekrana yazdıracağız ve bu gelen sayıların toplam değerlerini yazdıracağız.
Not:Bu arada web sayfasına herhangi bir metin ya da tag yazdırmak için JavaScript'teki document.write() metodunu
kullanacağız.
Şimdi Dreamweaver'i açıp yeni bir boş HTML belgesi oluşturuyor ve body tag içine yalnızca tipi submit olan input
yerleştiriyoruz:
Şimdide yukarıdaki örneğimizi çalıştıracak olan bir JavaScript function yazıyoruz:
Kullanıcıdan herhangi bir değer alabilmek için tıpkı alert metodu gibi bir ekranda mesaj kutusu kullanmak istersek bunu JavaScriptte prompt metodunu kullanarak yapabiliyoruz.
Prompt metodu ile kullanıcının gireceği değeri "sayi" isimli değişkenimize atadıktan sonra döngüden gelecek olan
sayıların toplamını bir değişkende tutmalıyız ve bu değişkenimiz daha sonra döngü içerisinde katlanarak artacağı için
başlangıç değerini sıfır veriyoruz:
Şimdi for döngümüzü yazıyoruz,döngümüzün başlangıç değer sıfır olacak ve kullanıcının verdiği sayı kadar dönecek:
Döngümüz hazır,şimdi her gelen değerin karesini alıp önce ekrana yazdıracak ve toplam isimli değişkene ekleyeceğiz:
Ardından for döngüsü tamamlandığında toplam değişkenimiz o ana kadar gelen tüm sayıların karelerinin toplamlarını
almış olacak ve bizde bu toplam değeri sayfamıza yazdırıyoruz:
Döngümüz hazır ve artık JavaScript fonksiyonumuzu kurduktan sonra fonksiyonumuzu daha önceden oluşturduğumuz input DOM nesnesiyle bağdaştırıyoruz,bunun için onclick eventine eklememiz yeterli:
Şimdi programımızı test etme zamanı:
Gördüğümüz gibi program tam istediğimiz gibi çalışıyor,ancak bir noktayı unutuyoruz;
Kullanıcı ya sayı girmeden tamam tuşuna basarsa?
Yani boş bir sayı olması durumunda for döngüsünün bitiş noktası olmayacak ve sonsuza kadar dönmeye devam
edecektir,for döngüsünün sonsuza kadar dönmesi durumunda ise web tarayıcısı (browser) sürekli meşgul olacaktır.Bu
yüzden if-else koşulu ile kullanıcının boş bir değer geçmesini önlemeliyiz:
Önlemimizide aldıktan sonra sıra geldi döngü deyimlerine; döngülerde sadece for döngüsüne özel olmamak koşullarda iki
deyim bulunmaktadır ve bu deyimler döngüler içerisine yazılır:
A-Break Deyimi:
Break deyimi ile döngünün çalışma esnasında döngüyü kırmasına yani döngüden çıkılmasına olanak sağlanır,örneğin
toplam adındaki değişkenimiz 100'den büyük olması durumunda döngüden çıkılsın istiyorsak hemen döngünün içine if
koşulu yazmamız yeterlidir:
16.satırda yazdığımız if koşulu öncelikle toplam değişkenin değerine bakacak ve 100'den büyük olması durumunda alert
metodu ile kullanıcıyı bilgilendirip break deyimiyle döngüyü durduracaktır.
B-Continue Deyimi:
Continue deyimi for döngüsü içerisinde break deyimi gibi yazılır ancak döngüyü durdurmak yerine döngüden gelen değeri yoksayarak içeriğinde belirtilmişse kodların çalışmasını engeller.
Örneğin döngüden gelen sayının karesi 50'den küçükse döngü ekrana o sayının karesini yazdırmasın:
Döngülerde kullanılan bu iki deyim tek döngü içerisinde aynı anda kullanılabilirler,bu örneğimizde hem break hem de
continue deyimlerini kullandık ve 1'den 20'ye kadar olan sayıların karelerini almak istediğimizde ekran görüntümüz şu
şekilde çıkmaktadır:
Döngülerle ilgili bugünkü makale dizimizin sonuna geldik,dizi diyorum çünkü bir sonraki makalelerimizde diğer döngüleri öğrenmeye devam edeceğiz.
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
Projeyi İndir