Javascript - for döngüsü örnek uygulama - PcTekno.NET | PTN

Konumunuz: Anasayfa

Javascript - for döngüsü örnek uygulama

Perşembe, 12 Temmuz 2007

Sample Image Hayal gücü yüksek olan bir tasarımcı ise yeni yeni yöntemler ve kullanım alanları geliştirebilir. Biz burada for döngüsünü genel bir konu ile deneyeceğiz.

Yazacağımız program birinci lig puan durumunu ekrana basacak. Aslında bunu bir tablo veya bir liste halinda html tagları ile yapabiliriz. javaScripti kullanma nedenimiz gerekli bilgileri bir dizi altında toplamak ve her hafta değişik bir tablo yapacağımıza sadece dizinin içindeki elemanları yeni puan durumuna göre değiştirmek olacaktır.
Bu bize bir kolaylık ve zaman tasarrufu sağlar.

 
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<script language="JavaScript">
<!-- gizle
var takimlar=new Array("Fenerbahçe", "Galatasaray", "Trabzonspor",
"Gaziantep", "Beşiktaş", "Altay", "Denizlispor", "Gençlerbirliği",
"Kocaelispor", "İstanbulspor", "Antalyaspor", "Samsunspor", "Göztepe",
"Erzurumspor", "Adanaspor", "Ankaragücü", "Vanspor", "Bursaspor");
var puanlar=new Array(10, 9, 9, 9, 7, 7, 7, 7, 6, 6, 6, 6, 5, 4, 1,
                      1, 1, 0);
var takimSayisi=takimlar.length;
 
document.write("<table border=1 bgcolor=F0F0FA>");
document.write("<tr><td>Sıra</td><td>Takım</td><td>Puan</td></tr>");
 
for(a=0 ; a < takimSayisi ; ++a)
        {
        document.write("<tr><td>"+(a+1)+"</td><td>"+
takimlar[a]+"</td><td align=right>"+puanlar[a]+"</td></tr>");
        }
 
document.write("</table>");
 
// gizleme sonu -->
</script>
</head>
<body>
 
</body>
</html>

Aslında programımız göründüğü kadar karışık değil. Pogramı denediğiniz sayfanın kodlarını incelerseniz programın dokuz satırdan oluştuğunu ve bu satırların üçünün değişken tanımlaması olduğunu görürsünüz. Fakat bu program ile yaklaşık altmış elemanlı bir tablo oluşturduk ve tablonun içerisini gerekli bilgiler ile doldurduk.

Ayrıca bu program bize her hafta yeni bir sayfa hazırlamak yerine sadece ilk iki satırdaki takimlar ve puanlar adlı iki dizi değişkenin yeni değerlerini girerek sayfayı güncelleme kolaylığı ve hızı sağlayacaktır.

Programı inceler isek ilk iki satırda takimlar ve puanlar dizilerini oluşturduk ve içeriğini girdik. Üçüncü satırda ise takimlar dizisinin uzunluğunu bularak takimSayisi değişkenine aktardık. takimSayisi=takimlar.length
Sonra bir tablo oluşturmaya başladık; document.write("<table border=1 bgcolor=F0F0FA>");

Tablonun ilk satırını oluşturduk; document.write("<tr><td>Sıra</td><td>Takım</td><td>Puan</td></tr>");
Ve tablonun içeriğini doldurmaya başlıyoruz. Burada konumuz olan for döngüsünü kullandık. for(a = 0 ; a < takimSayisi ; a++)

for döngüsünü a değerini sıfır yaparak a=0 sıfırdan başlattık. Kontrol şartımız olarak döngünün takimSayisi değişkeni kadar olamsını sağladık; a < takimSayisi; Sonra a değerinin birer birer artmasını sağladık; a++;

Bu şekilde döngümüz sıfırdan başlayıptıp onyedide bitirtmiş oluyoruz. Gerçi takım sayısı değiştiğinde döngü sayısıda buna bağlı olarak değişecektir.

Bir satır ilede tablomuzun içeriğini giriyoruz. Burası biraz karışık gibi gelsede aslında tablo hücrelerini oluşturan <tr><td> kısımlarını atarsak geriye sadece

document.write((a+1)+takimlar[a]+puanlar[a]); şeklinde bir satır kalıyor. Bu bölümü inceleyelim. Önce (a+1) şeklinde bir yazılımla sıralama numarasını giriyoruz. Burada a yerine (a+1) kullanmamızın sebebi takım sıralamasının birden başlaması, fakat döngümüzün ise sıfırdan başlamasıdır. Böylece sıralamanın birden başlamasını sağlıyoruz.
takimlar[a] şeklinde takımın ismini diziden okuyup yazdırıyoruz. Yine puanlar[a] şeklinde bir yazılımla aynı takımın puan durumunu ekrana yazıyoruz.

Döngümüz boyunca bu işlemler tekrarlanıyor. Döngümüz bitince tablomuzu kapatıyoruz. document.write(</table>); böylece programımız sona eriyor.

Programa aynı yöntem ile averaj durumu, oynadığı maç sayısı, attığı gol sayısı, yediği gol sayısı gibi bilgileride kolayca ekleyebiliriz.

Yorumlar (0) Add Comment