JavaScript Diziler
Javascript meraklılarına merhaba :)
Bugün Javascript derslerimizde yep yeni bir konuya geçiyoruz: Diziler (Arrays).
Tabi ki aklınıza pembe diziler gelmesin çünkü yazılım dünyasında dizilerin yeri ap ayrı ve güzel bir yer taşıyor ve sizlerinde seveceğine inanıyorum :)
Dizilerden kısaca bahsedersek şimdiye kadar gördüğümüz var,string,int,bool gibi aynı türden bütün veri tiplerini bünyesinde barındıran değişkenler olarak tanımlayabiliriz.Dizileri anlamak için böyle bir cümle yerine şöyle desek kafanızda daha rahat hayal edebilirsiniz;
Bir ya da birden çok elmayı sepete koyuyorsunuz...
Burada elmalar herhangi bir değişken ya da aynı tipte değerler olurken sepetin kendisi dizinin kendisi,yani içerisine elmaları koyduğumuz sepet içerisinde elmaları barındırıyor.
İşte yazılımcılık dünyası biraz gerçek dünyaya benzetilirse bu denli anlaması kolay ve eğlenceli kod yazmaya
elverişli oluyor :)
Peki diziler neden var ve nerelerde kullanıyoruz?
Programlama esnasında birden çok verinin bir başka yere taşınması esnasında her veriyi ayrı ayrı taşımak ve işlemek yerine bunları tek bir noktada toplayıp hedefe en hızlı şekilde götürmek daha avantajlıdır,hal böyle olunca programlar daha hızlı çalışıyor ve biz yazılımcılar daha az kodla daha hızlı projeler üretebiliyoruz.
Dizileri etkin bir şekilde kullanabilmek için index kavramını iyi anlamak gerekiyor; index dizinin içerisindeki değeri atanmış atanmamış her alanın adına denir ve indexler sıfırdan başlar,yani 10 eleman kapasitesine sahip bir dizinin ilk elemanı sıfırıncı elemanı,son elemanı ise 9.uncu elemanıdır.
Eğer bu anlatımdan hiçbirşey anlamadıysanız elinize kalem kağıt alın ve yan yana 10 kare çizin,karelerin üstüne ilk baştakine sıfır yazarak hepsini numaralandırın.Son karenin üstünde 9 yazdığını göreceksiniz,şimdi karelerin içine harfleri yazın.Karşınızda sıfırıncı elemanı 'a' harfi olan ve 9.uncu elemanı 'i' harfi olan bir dizi göreceksiniz. (İngiliz alfabesinden varsayarsak)
Peki diziler nasıl yazılır;
Dizi oluşturmak için öncelikle şimdiye kadar javascriptte kullandığımız var (variable) değişken türünü kullanır ve bu değişken türü için bir isim veririz,bundan sonrasında ise dizi oluşturmak için 3 seçenek var;
1- var meyveler=new Array(diziBoyutu);
Bu seçenek ile öncelikle diziyi tanımlar ve dizinin kapasitesini belirleriz.Ardından her dizi indexi için birer değer veririz:
meyveler[0]="Elma";
meyveler[1]="Armut";
gibi dizinin boş değerlerini doldururuz.
2- var meyveler=new Array("Elma","Armut");
Bu seçenekte ise dizinin boyutunu belirlemeden doğrudan dizi elemanlarını diziye ekleriz,bu durumda dizinin kapasitesi içine eklediğimiz eleman sayısı kadar olacaktır.
3-var meyveler=["Elma","Armut"];
Bu seçenek ise diğer iki seçeneğe göre en sade dizi oluşturma seçeneğidir.
Dizi oluşturma seçeneklerinden istediğinizi kullanabilirsiniz ancak benim dizi oluşturma seçeneğim 1.seçenek oluyor çünkü 1.seçenek diğerlerine göre uzun olsa da okunabilirliği ve kullanılabilirliği daha kolay oluyor.
Dizilerle ilgili bu kadar üstün körü bilgi yeterli,şimdi pratik bir şey deneyelim :)
Öncelikle Dreamveawer uygulamamızı açıyor ve boş bir HTML belgesi oluşturduktan sonra head tagına script tagı
açarak kendimize bir dizi oluşturuyoruz:
Kendimize başlangıç olarak 100 index kapasiteli bir dizi oluşturduk.Hatırlarsanız önceki makalelerimizden birinde döngüler konusunu işliyorduk ve döngüler her dönüşlerinde içerilerindeki kodları çalıştırdıkları gibi her dönüş sırasında bir değer veriyordu,işte onlardan biri olan for döngüsünü bu konuyla birlikte işleyeceğiz.
Peki for döngüsünün dizilerle ne alakası var diye sorabilirsiniz,konuyu şuraya bağlamak istiyorum: madem for döngüsü bize her dönüşü sırasında dönüş yaptığı sayıyı veriyorsa bu sayıyı neden diziye eklemeyip 100 index kapasiteli dolu bir dizi oluşturmayalım?
Kulağa güzel bir fikir geliyor ve bu konuyu şöyle yapıyoruz:
Burada 12.satırda bildiğimiz for döngüsünü kurduk ve döngü 100'e kadar devam ediyor,asıl bilmeniz gereken 14.satırda ne olduğu.
For döngüsüne bakarsak sıfır değerinden başlıyor,yani dizilerdeki indexler de sıfırdan başladığına göre sıfırdan başlayan bir for döngüsü diziyi şöyle doldurabilir;
For döngüsü herhangi bir andaki dönüşü sırasında dizinin belli bir indexini hedefler ve o indexe o anda gelen değeri içine atayabilir.Yani demek istediğim 14.satırın Türkçesi: dizinin i'ncisi indexinin değeri i'nin stringe (toString()) dönüştürülmüş halidir.
i'ncisi derken herhangi bir yazım hatası yok aslında çünkü dizinin herhangi bir dizisini for döngüsü içerisindeki döngünün değişken adıyla okuruz.
Peki buraya kadar for döngüsü 100 kez döndü ve her dönüşünde dizinin bütün indexlerine değerleri yüklediğini nerden anlayacağız?
Bu sorumuza cevap bulmak için örneğimizi şu şekilde değiştirelim; kullanıcı HTML inputa herhangi bir sayı girer (sayı=index olacak) ve butona tıkladığında o dizi içerisinde gösterdiği indexin içindeki değer ekrana yazılır. Şimdi örneğimizi yapmak için öncelikle body etiketimize tipi metin olan bir input ve birde tipi submit olan input yazarak butonumuzu oluşturalım:
Şimdi tekrar javascript fonksiyonumuza dönelim ve kullanıcının girdiği sayıyı yakalayıp diziyle bağdaştıralım:
17.satırda kullanıcının inputa girdiği sayıyı yakaladık,19.satırda kullanıcının girdiği sayıyı dizinin indexi olarak varsaydık ve "dizidenGelen" isimli değişkene atadık. 21.satırda ise daha önce yaptığımız gibi gelen değeri sayfaya yazdırdık.
Şimdi sayfamızı çalıştırıyor ve test ediyoruz:
Peki yazılımsal bir hata yapmış olabilir miyiz diye şöyle bir ekleme yapalım; for döngüsü diziyi her doldurduğunda o anki döngüden gelen sayının karesini alsak nasıl olurdu?
Şimdi tekrar test edelim:
Gördüğünüz gibi dizideki 21.indexteki 21 sayısının karesini alarak ekrana yazdırdık.
Dizilerle ilgili olarak bilmemiz gereken şimdilik bu kadar yeterli diye umuyorum,bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
Projeyi İndir
Bugün Javascript derslerimizde yep yeni bir konuya geçiyoruz: Diziler (Arrays).
Tabi ki aklınıza pembe diziler gelmesin çünkü yazılım dünyasında dizilerin yeri ap ayrı ve güzel bir yer taşıyor ve sizlerinde seveceğine inanıyorum :)
Dizilerden kısaca bahsedersek şimdiye kadar gördüğümüz var,string,int,bool gibi aynı türden bütün veri tiplerini bünyesinde barındıran değişkenler olarak tanımlayabiliriz.Dizileri anlamak için böyle bir cümle yerine şöyle desek kafanızda daha rahat hayal edebilirsiniz;
Bir ya da birden çok elmayı sepete koyuyorsunuz...
Burada elmalar herhangi bir değişken ya da aynı tipte değerler olurken sepetin kendisi dizinin kendisi,yani içerisine elmaları koyduğumuz sepet içerisinde elmaları barındırıyor.
İşte yazılımcılık dünyası biraz gerçek dünyaya benzetilirse bu denli anlaması kolay ve eğlenceli kod yazmaya
elverişli oluyor :)
Peki diziler neden var ve nerelerde kullanıyoruz?
Programlama esnasında birden çok verinin bir başka yere taşınması esnasında her veriyi ayrı ayrı taşımak ve işlemek yerine bunları tek bir noktada toplayıp hedefe en hızlı şekilde götürmek daha avantajlıdır,hal böyle olunca programlar daha hızlı çalışıyor ve biz yazılımcılar daha az kodla daha hızlı projeler üretebiliyoruz.
Dizileri etkin bir şekilde kullanabilmek için index kavramını iyi anlamak gerekiyor; index dizinin içerisindeki değeri atanmış atanmamış her alanın adına denir ve indexler sıfırdan başlar,yani 10 eleman kapasitesine sahip bir dizinin ilk elemanı sıfırıncı elemanı,son elemanı ise 9.uncu elemanıdır.
Eğer bu anlatımdan hiçbirşey anlamadıysanız elinize kalem kağıt alın ve yan yana 10 kare çizin,karelerin üstüne ilk baştakine sıfır yazarak hepsini numaralandırın.Son karenin üstünde 9 yazdığını göreceksiniz,şimdi karelerin içine harfleri yazın.Karşınızda sıfırıncı elemanı 'a' harfi olan ve 9.uncu elemanı 'i' harfi olan bir dizi göreceksiniz. (İngiliz alfabesinden varsayarsak)
Peki diziler nasıl yazılır;
Dizi oluşturmak için öncelikle şimdiye kadar javascriptte kullandığımız var (variable) değişken türünü kullanır ve bu değişken türü için bir isim veririz,bundan sonrasında ise dizi oluşturmak için 3 seçenek var;
1- var meyveler=new Array(diziBoyutu);
Bu seçenek ile öncelikle diziyi tanımlar ve dizinin kapasitesini belirleriz.Ardından her dizi indexi için birer değer veririz:
meyveler[0]="Elma";
meyveler[1]="Armut";
gibi dizinin boş değerlerini doldururuz.
2- var meyveler=new Array("Elma","Armut");
Bu seçenekte ise dizinin boyutunu belirlemeden doğrudan dizi elemanlarını diziye ekleriz,bu durumda dizinin kapasitesi içine eklediğimiz eleman sayısı kadar olacaktır.
3-var meyveler=["Elma","Armut"];
Bu seçenek ise diğer iki seçeneğe göre en sade dizi oluşturma seçeneğidir.
Dizi oluşturma seçeneklerinden istediğinizi kullanabilirsiniz ancak benim dizi oluşturma seçeneğim 1.seçenek oluyor çünkü 1.seçenek diğerlerine göre uzun olsa da okunabilirliği ve kullanılabilirliği daha kolay oluyor.
Dizilerle ilgili bu kadar üstün körü bilgi yeterli,şimdi pratik bir şey deneyelim :)
Öncelikle Dreamveawer uygulamamızı açıyor ve boş bir HTML belgesi oluşturduktan sonra head tagına script tagı
açarak kendimize bir dizi oluşturuyoruz:
Kendimize başlangıç olarak 100 index kapasiteli bir dizi oluşturduk.Hatırlarsanız önceki makalelerimizden birinde döngüler konusunu işliyorduk ve döngüler her dönüşlerinde içerilerindeki kodları çalıştırdıkları gibi her dönüş sırasında bir değer veriyordu,işte onlardan biri olan for döngüsünü bu konuyla birlikte işleyeceğiz.
Peki for döngüsünün dizilerle ne alakası var diye sorabilirsiniz,konuyu şuraya bağlamak istiyorum: madem for döngüsü bize her dönüşü sırasında dönüş yaptığı sayıyı veriyorsa bu sayıyı neden diziye eklemeyip 100 index kapasiteli dolu bir dizi oluşturmayalım?
Kulağa güzel bir fikir geliyor ve bu konuyu şöyle yapıyoruz:
Burada 12.satırda bildiğimiz for döngüsünü kurduk ve döngü 100'e kadar devam ediyor,asıl bilmeniz gereken 14.satırda ne olduğu.
For döngüsüne bakarsak sıfır değerinden başlıyor,yani dizilerdeki indexler de sıfırdan başladığına göre sıfırdan başlayan bir for döngüsü diziyi şöyle doldurabilir;
For döngüsü herhangi bir andaki dönüşü sırasında dizinin belli bir indexini hedefler ve o indexe o anda gelen değeri içine atayabilir.Yani demek istediğim 14.satırın Türkçesi: dizinin i'ncisi indexinin değeri i'nin stringe (toString()) dönüştürülmüş halidir.
i'ncisi derken herhangi bir yazım hatası yok aslında çünkü dizinin herhangi bir dizisini for döngüsü içerisindeki döngünün değişken adıyla okuruz.
Peki buraya kadar for döngüsü 100 kez döndü ve her dönüşünde dizinin bütün indexlerine değerleri yüklediğini nerden anlayacağız?
Bu sorumuza cevap bulmak için örneğimizi şu şekilde değiştirelim; kullanıcı HTML inputa herhangi bir sayı girer (sayı=index olacak) ve butona tıkladığında o dizi içerisinde gösterdiği indexin içindeki değer ekrana yazılır. Şimdi örneğimizi yapmak için öncelikle body etiketimize tipi metin olan bir input ve birde tipi submit olan input yazarak butonumuzu oluşturalım:
Şimdi tekrar javascript fonksiyonumuza dönelim ve kullanıcının girdiği sayıyı yakalayıp diziyle bağdaştıralım:
17.satırda kullanıcının inputa girdiği sayıyı yakaladık,19.satırda kullanıcının girdiği sayıyı dizinin indexi olarak varsaydık ve "dizidenGelen" isimli değişkene atadık. 21.satırda ise daha önce yaptığımız gibi gelen değeri sayfaya yazdırdık.
Şimdi sayfamızı çalıştırıyor ve test ediyoruz:
Peki yazılımsal bir hata yapmış olabilir miyiz diye şöyle bir ekleme yapalım; for döngüsü diziyi her doldurduğunda o anki döngüden gelen sayının karesini alsak nasıl olurdu?
Şimdi tekrar test edelim:
Gördüğünüz gibi dizideki 21.indexteki 21 sayısının karesini alarak ekrana yazdırdık.
Dizilerle ilgili olarak bilmemiz gereken şimdilik bu kadar yeterli diye umuyorum,bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
Projeyi İndir