JAVASCRIPT DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
Array'i (dizi) günlük hayatımızdan örnek verecek olursak liste, grup gibi değerlendirebiliriz. Listeleri de bir class gibi düşünebilirsiniz. İçerisinde listeye ait elemanlar bulundurup, tümü ya da bir kısmı üzerinde istediğimiz zaman işlem yapabiliyoruz.
Liste içeriğinde yazı, sayı, başka bir class da barındırabiliriz.
Örneğimizde alisverisListesi diye bir array oluşturup 5 adet elemandan oluşmasını sağlıyoruz. document.write ile alisverisListesi içerisinden kaç numaralı elemanı yazdırmak istediğimizi parantez içerisinde belirtiyoruz ve program bunu ekrana yazıyor. Burada dikkat etmemiz gereken elemanı köşeli parantez içerisinde yazmamız ve liste elemanlarını 0'dan sayılmaya başladığını bilmemiz gerektiğidir. Yani normalde bizler saymaya hep 1'den başlarız ama array'lerde ilk eleman her zaman 0. eleman olarak başlar. Bu durumda aşağıdaki 5 elemanlı listemizde ilk elemanı çağırmak istiyorsak 0, son elemanı çağırmak istiyorsak 4 kullanıyoruz gibi. Bu numaralandırma işlemine indexleme denilmektedir. Her bir elemanın numarası da index olarak adlandırılmaktadır.
Örneğimizde index'i 3 olan elemanı ekrana yazdırmasını istiyoruz ama program 0'dan saymaya başladığı için bize 4. sıradaki elemanı yani Elma elemanını yazdıracaktır.
<html>
<head>
<script type="text/javascript">
var alisverisListesi = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
document.write(alisverisListesi[3]);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Array yaratmak için aşağıdaki şekilde farklı bir yöntem de kullanabiliriz. Yine aynı şekilde document.write ile 2 numaralı index'i yazdırmasını istediğimizde ekrana Matematik dersini yazacaktır.
<html>
<head>
<script type="text/javascript">
var dersListesi = new Array();
dersListesi[0] = "Ekonomi";
dersListesi[1] = "İstatistik";
dersListesi[2] = "Matematik";
dersListesi[3] = "İşletme";
dersListesi[4] = "İktisat";
document.write(dersListesi[2]);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Bazı durumlarda array yani listemizin uzunluğunu yani kaç elemanı sahip olduğunu hesaplamaya ihtiyacımız olabilir. Bunun için Javascript'te length yani uzunluk metodunu kullanıyoruz.
Aşağıdaki örneğimizde eleman sayısını hesaplamak için elemanSayisi adında bir değişken oluşturup listemizin adını yazıp sonuna length ifadesini koyarak belirttiğimiz listede kaç eleman olduğunu hesaplamasını sağlıyoruz. document.write kullanarak da yine elemanSayisi değişkenimizi parantez içerisinde belirtip alisverisListesi isimli array'imizde kaç eleman olduğunu ekrana yazdırmasını sağlıyoruz.
<html>
<head>
<script type="text/javascript">
var alisverisListesi = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
document.write(alisverisListesi[3]);
document.write("<hr/>");
var elemanSayisi = alisverisListesi.length;
document.write(elemanSayisi);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Yaptığımız proje doğrultusunda bazen listemizdeki tüm elemanları ekrana yazdırmak isteyebiliriz. Bu durumda bir sürü document.write yazmamız gerektiğini düşünebiliriz. Ama bunun yerine for döngüsünü de kullanarak bu işlemi gerçekleştirebiliriz.
for döngüsü içerisinde bir i değişkeni belirleyip bu değişkenimiz sıfıra eşitken ve listemizin uzunluğundan (alisverisListesi.length) küçükken 1 arttır işlemini yapmasını söylüyoruz. Bu durumda i değişkeni 0 ile listemizin uzunluğu arasında iken bir artmış olacak. Bu da bize listemizin elemanlarını yazdırmasını sağlayacaktır. Sondaki <br/> ibaresini satır atlayarak yazması için kullanıyoruz. Bunu kullanıp kullanmamakta özgürsünüz sadece görsel olarak yanyana yazmaması için eklemiş bulunduk.
<html>
<head>
<script type="text/javascript">
var alisverisListesi = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
for (var i = 0; i < alisverisListesi.length; i++) {
document.write(alisverisListesi[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Join komutu ile for döngüsü ile yaptığımız işlemi yani listemizin elemanlarını ekrana yazdırma işlemini gerçekleştirebiliriz.
Bunun için document.write kullanarak parantez içerisinde listemizin adını yazıp nokta koyduktan sonra join yazarak listemizin elemanlarını ekrana yazdırabiliriz. Tek fark olarak bu sefer aralarına virgül koyduğunu göreceksiniz.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker");
document.write(mevcutListe.join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Concat komutu ile elimizde bulunan iki listenin elemanlarını bir araya getirerek ekrana yazmasını sağlayabiliriz. Bu işlemi teker teker iki listenin elemanlarını çağırarak da yapabiliriz ama bu bize hem daha fazla kod yazma hem de vakit kaybı olarak geri dönecektir. Concat komutu bu yükü üzerizimizden almayı sağlıyor.
Bunun için document.write kullanarak parantez içerisinde birleştirmek istediğimiz birinci listemizin adını (mecutListe) yazıp nokta koyduktan sonra concat diyip sonraki parantez içerisinde de ikinci listemizin adını (alinacaklarListesi) listelemesi için de join ekleyerek her iki listemizin elemanlarını ekrana yazdırabiliriz. Tercihen hangi listeyi önce yazdırmak istediğinize göre parantez içerisindeki listelerin yerlerini değiştirmeniz yeterli olacaktır.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker");
var alinacaklarListesi = new Array ("Elma", "Armut");
document.write((mevcutListe.concat(alinacaklarListesi)).join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Reverse komutunu listemizdeki elemanların konumlarını değiştirmek için kullanıyoruz. Mesela listemizdeki şeker elemanı sonda ekmek elemanı elemanı başta ama biz reverse kullanarak bunu kısa bir hamleyle tersine çevirebiliriz. Bunu yapmak için yine manuel olarak yeni değişik listeler oluşturarak fazladan kod yazarak da bu işlemi yapabilirdirdik. Reverse komutu bizi bu dertten kurtarmaya yarıyor.
Bunun için document.write kullanarak listemizin adını (mevcutListe) belirtip nokta koyduktan sonra reverse yazıyoruz. Sonuna da join ekleyerek her listemizin elemanlarını ters bir şekilde ekrana yazdırabiliriz.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker");
document.write((mevcutListe.reverse()).join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Sort komutu ile listemizdeki elemanlara göre düzenli bir sıralama yapmamızı sağlıyor. Listemizdeki elemanların ilk harflerine göre harf sıralaması oluşturmamızı sağlamak için kullanabiliriz mesela. Elemanlarımız sayı olsaydı numarasına göre sırayla listeleyebilirdik gibi.
Bunun için listemi oluşturduktan sonra siraliListe adında yeni bir değişken oluşturum mevcutListe.sort(); yazarak listemdeki elemanları isminin baş harfine göre sıralamasını söylüyorum. document.write kullanarak parantez içerisinde yeni oluşturduğum siraliListe listemizin adını yazıp nokta koyduktan sonra join yazarak listemizin elemanlarını ekrana yazdırmasını söylüyorum. html dosyamızı tarayıcı da açtığımızda bizim yazdığımız sıraya göre değil de harf sırasına göre elemanlarını sıraladığını göreceğiz.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
var siraliListe = mevcutListe.sort();
document.write(siraliListe.join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Pop metodu ile listemizdeki son elemanın yazılmasını engelliyoruz. Şu an için faydasız görülebilecek bir metod ama ileride büyük projelerinizde kullanıp faydasını görebileceğiniz bir metod gibi düşünebilirsiniz.
siraliListe isimli listemizin sonuna nokta koyup pop yazdıktan sonra parantezi açıp kapatarak bu listemizin sonundaki Şeker elemanını yazdırmadığını görebiliriz. Listemizin son elemanı Şeker değil diye düşünebilirsiniz ama örneğimizde sort metodunu da pekiştirmek amaçlı kullandığımız için son eleman olarak Şeker elemanını görecektir. Eğer sort kullanmasaydık Armut elemanını görmezden gelecekti.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
var siraliListe = mevcutListe.sort();
siraliListe.pop();
document.write(siraliListe.join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Push metodunu listemizdeki elemanlara listemiz üzerinde hiçbir işlem yapmaya gerek kalmadan yenilerini eklemek için kullanıyoruz.
Bunun için listemizin adını (siraliListe) yazıp nokta koyduktan sonra push yazıp parantez içerisinde yeni ekleyeceğimiz elemanları (yağ, zeytin domates) tırnak içerisinde belirtiyoruz. html dosyamızı tarayıcı da çalıştırdığımızda yeni elemanlarımızı eklediğini göreceğiz. Bunları listemizin sonuna isim sırasına dikkat etmeden ekleyecektir.
<html>
<head>
<script type="text/javascript">
var mevcutListe = new Array ("Ekmek", "Peynir", "Şeker", "Elma", "Armut");
var siraliListe = mevcutListe.sort();
siraliListe.pop();
siraliListe.push("Yağ", "Zeytin", "Domates");
document.write(siraliListe.join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Prompt basit tabiriyle kullanıcıdan aldığımız bir girdiyi işlememize yarıyor. Yani kullanıcı ekranında birşey giriyor ve girdiği bu bilgi document.write kullanarak ekranımıza ekleniyor. Daha önce gördüğümüz alert gibi ekrana bir pencere açıyor. Ama fark olarak alert sadece uyarı veriyordu ama birşeyler yazamıyorduk o pencerede. Prompt'da ise bir veri girdisi sağlayabileceğiz.
Aşağıdaki şekilde kodumuzu yazdığımızda karşımıza bir kutucuk çıkacağını ve oraya yazdığımız bilginin de tarayıcımızda belireceğini göreceğiz.
<html>
<head>
<script type="text/javascript">
var girdi = prompt ("Herhangi bir veri giriniz!", "");
document.write(girdi);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Prompt kullanımını öğrendikten sonra şimdi bir array (liste) içerisinde kullanımına göz atalım.
İlk olarak listemiz adında bir array oluşturuyoruz ve hiçbir veri almamasını söylüyoruz. Sonrasında for döngüsünü kullanarak bir i değişkeni oluşturup bu değişken 0'dan büyük 5'den küçükken prompt ile çıkacak ekranda oluşturduğumuz girdi değişkeniyle kulanıcının beş adet veri girmesini sağlıyoruz. Son olarak da daha önce öğrendiğimiz gibi document.write ve join kullanarak kullanıcının girdiği 5 adet veriyi ekrana liste şeklinde yazmasını sağlıyoruz. Veri girişinde herhangi bir türden olabilir, bu konuda veri girerken istediğiniz şeyleri girebilirsiniz. Önceki konularla ilişkili olması açısından ben alışveriş listesine bağlı veriler girdim.
<html>
<head>
<script type="text/javascript">
var listemiz = new Array();
for (var i = 0; i < 5; i++) {
var girdi = prompt (i + ". veriyi giriniz!");
listemiz[i]=girdi;
}
document.write(listemiz.join());
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
