31 Mayıs 2011 Salı

Javascript iç içe for döngüsü

Javascript for döngüsü
Döngüler bilgisayarlara belirli bir işi, belirli şartlar altında istenen miktarda yaptırmak için kullanılır. Döngü yazmak programcıyı aynı kodu defalarca tekrarlamaktan kurtarır. Bu konuyu çarpım tablosu üretmeye yarayan bir program üzerinde inceleyelim. Bu arada javascriptte kullanılan for döngüsünü de anlatmış olacağız.

Neden çarpım tablosu diye sorabilirsiniz. Biliyorum, yararsız bir program. Ama döngü kavramını incelemek ve for döngüsünü hem de iç içe eklenmiş bir vaziyette uygulamak için ideal bir çalışma. Önce For döngüsünün ne olduğuna bir bakalım



For Döngüsü:

Javascript'te bir işlemi/hesaplamayı istenen sayıda tekrarlamak için kullanılır. Ufak bir hesaplama ile programcıyı sayfalar dolusu kod yazmaktan kurtarır, zaman ve emekten tasarruf sağlar. For döngüsü şu şekilde kullanılır,

for (sayılacak değişkenin ilk değeri; sayılacak değişkenin limiti; altma veya azalma miktarı)
{
Bu bögeye (süslü parantezler arasına) yaptırılmak istenen işlem yazılır.
}
sayılacak değişkenin ilk değeri şöyle belirlenir;

i=1;

Javascript'te for döngüsü içinde önceden tanımlanma şartı olmaksızın değişken yazabilir ilk değerini verebilirsiniz. Şimdi "i=1" ile bir değişken oluşturduk ve buna ilk değernin atadık. Hesaplamanın ne zamana kadar yapılacağını belirlemek için değişkenin alabileceği değerlerin, programın işleyişine uygun bir şekilde sınırlanması gerekir. Bunu da yapalım,

i<=10;

Böylelikle i değişkeni 10 değerine gelinceye kadar(10 da dahil) döngü için belirlenen işlemler tekrarlanır. Verilen değerlerin artma ya da azalma miktarı şu şekillerde verilebilir.

i=i+1 veya ++i
i=i-1 veya --i 

lkinde bire birer artar ikincisinde birer birer azalır. isterseniz artma/azaltma miktarını değiştirerek işlem adedini küçültebilirsiniz. süslü parantezler içinde de yapılacak işlemi yazarsınız.

{
k=i*j
}

For döngüsü matruşka gibidir
For döngüleri iç içe kullanılabilrler. İç içe for döngüsü kullanılırken süslü parantezleri açık unutmamaya ve doğru yerlerde kullanmaya dikkat edin. iç içe for döngüsü matruşka gibidir.  Yani iç döngüyü kendi içinde dış döngüyü de kendi içinde kapatmalısınız.

Bu kadar önbilgiden sonra programı incelemeye başlayabiliriz. Programımız şunları yapıyor
Aşağıdaki butona basınca;

-Çarpım tablosunu oluşturmakla görevli carp isimli bir fonksiyon tanımlıyor. (Aslında bu fonksiyona ihtiyacımız yok Ama programın sayfa açılır açılmaz çalışmasını istmediğim için ben üzerine tıkladığım zaman olayı başlatacak bir düğme için bu fonksiyonu yazdım)
-Bir tablo başlatıyor,
-İlk satırı açıyor ve içine birden 9 a kadar numaraları sıralıyor. (bu kısım elle yapıldı döngüye dahil değil)
-İlk döngüye giriyor bu döngü "i=1" için ilk satırı oluşturuyor
-ikinci döngüye giriyor bu döngü "j=1" için ilk sütunu oluşturuyor.Böylelikle tablonun ilk hücresi oluşturulmuş oluyor. Ardından k=i x j çarpımını yapıyor ve hem çarpma işlemini hem de sonucunu bu hücreye yazıyor. İç döngünün başına geliyor ve ikinci hücreyi oluşturuyor. Bu iç döngü bu şekilde "j=9" oluncaya kadar hücreleri oluşturup içine sonuçları yazmaya devam ediyor."i=9" değeri de hesaplandıktan sonra iç döngüden çıkılıyor ve dıştaki döngüye giriliyor. İç döngü tmamlandığında "i=1 "olan değer +1 arttırılarak "i=2" için aynı döngü yeniden tekrarlanıyor. "i="10" olduğunda dış döngü de tmamlanıyor ve son olarak tablo etiketi kapatılıp çarpım tablosu tamamlanıyor.

İşte tüm bu hesaplamaları yapan programın kodları ;

<script language="javascript1.2">

function carp(){

document.writeln("<table Border=1>")

document.writeln("<tr><td>"+ 1 + "</td><td>"+2+"</td><td>"+ 3 + "</td><td>"+4+"</td><td>"+ 5 + "</td><td>"+6+"</td><td>"+ 7 + "</td><td>"+8+"</td><td>" + 9 + "</td></tr>")

for (i = 1; i <= 10; ++i)

{

document.writeln("<tr>")

for (j =1; j<=9; ++j)

{k = i * j

document.writeln("<td>" + i + "x" + j + "=" + k + "</td>")

}

}

document.writeln("</tr>")

document.writeln("</table>")

document.writeln("<input type=button Value= geridön_geridööön onclick=parent.location='http://infial.blogspot.com/2011/05/function-carpdocument.html' />")

}
</script>
<input type="button" Value="Çarpım tablosunu göster" onclick="carp()" />


Turuncu ile işaretli olan yeri yazmayın. O kısmı bu sayfaya geri dönüş için koydum.
Bu kadar kafa yormaya ne gerek var? Ben elimle oturur yazarım bütün tabloyu diyorsanız, uğraşmak istiyorsanız siz bilirsiniz. :)))
İşte size tek tıkla çarpım tablosu!!!


29 Mayıs 2011 Pazar

HTML Metin Hizalama

Web sayfanıza yerleştirmek istediğiniz metin içeriğnin daha güzel görünmesi ve özellikle sayfa tasarımıyla uyumlu olması için metnin uygun bir biçimde hizalanması gerekir. Hizalama işlemi CSS kodları ile yapılır. Hizalama işlemi için metni işaretlemekte kullandığımız herhabgi bir HTML tagının (< div >, < b >, < p > gibi) içinde, "text-align" kodunun parametrelerine "left, right, center ve justify" değerlerinden birini yazmamız yeterli olacaktır. Ben aşağıdaki metinleri < div > tagının içinde hizaladım. İşte size bir hizalama örneği,

< div style="text-align: left; border:solid #333;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.< /div >

"text-align" ile hizalanan metinler şu şekillerde görüntülenir;

text-align:left (sola yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:center (ortala)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:right (sağa yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align: justify (iki yana yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

Not :
Metinlerdeki garip yazı dikkatinizi çekmiştir. Örnek metni Lorem Ipsum' dan aldım. Bu da nedir yahu? diyorsanız işte size sitesinden kısa bir açıklama,

"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur."

Eğer bu kadar bilgi sizi tatmin etmediyse, ayrıntılı bilgi ve örnek yazı almak için Lorem Ipsum dan yararlanabilirsiniz.