17 Haziran 2011 Cuma

Javascript if Uygulaması (Javascript ile Basit Bir Hesap Makinesi)

javascript ifProgramlama öğrenmeye çalışan herkesin eninde sonunda karşılaşacağı bir problem vardır. Programcılar buna "Program Akış Denetimi" derler. Bilgisayar programı dediğimiz şey esasen akış halinde birbirini takip eden bir dizi işlemden ibarettir. Program akışı içinde bu işlemler bilgisayar tarafından süratle gerçekleştirilir ve sonuçları ekrana yansıtılır. Bazı programlar yapı itibariyle basittir. Sadece kullanıcıdan ya da herhangi bir yerden aldığı verileri işleyerek sonucunu gösterirler. Bu tip programlar tek yönde çalışırlar ve genelde sadece tek bir şarta dayalı işlemleri gerçekleştirirler ve çözüme ulaşırlar. Ancak bazı problemlerin çözümü bu kadar basit olmaz. Programcılar sıklıkla bilgisayara, "Şu şart halinde şunu yap, bu şart halinde bunu yap" şeklinde komutlar etkleyerek programa farklı durumlar için esneklik kazandırmak zorunda kalırlar. İşte bu farklı durumların sorgulandığı yer, belirlenen şarta göre program akışının yön değiştirdiği ya da olağan akışına devam ettiği bir kavşak noktası gibidir. Program akışı bu noktalardan denetlenir. Hemen hemen tüm programlama dillerinde bu denetleme "if" komutu ile yapılır. "if" komutu program akışını iki kola ayırır. İngilizce'de "eğer" anlamına gelen bu sözcük programa işleyeceği verileri, programcı tarafından önceden belirlenen kriterlere göre(büyüklük, küçüklük, eşitlik gibi)karşılaştırıp sonuca göre (evet yada hayır) program akışını yönlendirme olanağı verir.

Buraya kadar anlatılanlar Javascript için de geçerlidir. Javascript'te "if" komutu şu şekilde kullanılır;

if(aranan şart){
uygulanacak işlem
}
Bir sonraki işlem

Aranan Şart: x==5, secim=="yeni", a<5 gibi şartların sorgulandığı bölüm.

Uygulanacak İşlem: x=sayi1+sayi2, document.hesap.sonuc.value=islem gibi komutların uygulandığı, çeşitli işlemlerin yapıldığı kısım. Bu bölümde çeşitli aritmetik işlemler, karşılaştırmalar, döngüler gerçekleştirilebilir. Bir sonraki işlem: aranan şartın sağlanamadığı durumlarda yapıl Javascript'te "if komutu şu şekilde çalışır;

1- Önce parantez içindeki şart sorgulanır. Sorgulama sonucu evet ya da hayır dır.

2- Sonuç evet ise yani şart sağlanıyorsa, süslü parantezler içindeki işlemler gerçekleştirilir.

3- Sonuç hayır ise yani şart sağlanmıyorsa süslü parantez içindeki işlemler uygulanmaz. "if" bloğundan çıkılır ve hemen bir sonraki işlem gerçekleştirilir.

Birden fazla "if" komutunu iç içe kullanabilirsiniz. Yani bilgisayara "şu şart halinde, şu şartta şu şartı sorgula" şeklinde komutlar verebilirsiniz. Bu komutun iç içe uygulamasını daha sonraki bir yazıya bırakıp örnek bir program ile yazımı sonlandırmak istiyorum. Aşağıdaki kodlar web sayfasında çok basit, ilkel bir hesap makinesi oluşturmak için yazıldı. Kullanıcı arayüzü olarak HTML'nin form elemanlarını (textbox ve button) kullandım. Program yaı ve işlevsellik açısından o kadar iyi olmasa da "if" komutunu anlamamız açısından yararlı olacaktr. Ayrıca şunu da belirtmek istiyorum bu programın "endeks=selectedIndex " ile başlayan kısmını "Hakkı İcal"'in Javascript ders notlarından aldım. Oradan öğrendiklerimi geliştirip değiştirerek ürettiğim uygulamaları buradan sizlerle paylaşıyorum. Umarım hem sizin için hem de benim için faydalı olur.

İşte hesap makinesi kodları:

<script language="javascript1.2">
function hesapla(secme){ /* Bu satırda bir fonksiyon tanımlanıyor*/
var sayi1,sayi2,endeks, secilenIslem,islem /*değişkenler belirleniyor*/
endeks=secme.selectedIndex
secilenIslem=secme.options[endeks].text /*bu kısımda açılır menüden seçilen değeri"secilenIslem" değişkenine aktarıyor */

sayi1=eval(document.hesap.birinci.value)/* Sayısal işlem yapılacak değişkenlere*/
sayi2=eval(document.hesap.ikinci.value) /* kullanıcının girdiğideğerleraktarılıyor*/

if(secilenIslem=="Topla"){ /* bu kısımda kullanıcının seçtiği işlem*/
islem=sayi1+sayi2 /* sorgulanıyor ve işlem gerçekleştirilip sonucu*/
document.hesap.sonuc.value=islem /* "Sonuç" adlı text box'a yazdırılıyor*/
}
if(secilenIslem=="Çıkar"){
islem=sayi1-sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Çarp"){
islem=sayi1*sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Böl"){
islem=sayi1/sayi2
document.hesap.sonuc.value=islem
}
if (secilenIslem=="İşlemi Seçiniz"){ /*kullanıcı işlem seçimi yapmazsa uyarı*/
alert("Lütfen Bir İşlem Seçiniz") /*mesajı veriyor*/
}
}
</script>
<form name="hesap">
<div style="float:left;">
1. Sayı : <input type="text" value="" name="birinci" maxlength="10"

/><br />
2. Sayı : <input type="text" value="" name="ikinci" maxlength="10"

/><br />
Sonuç = <input type="text" value="" name="sonuc" maxlength="10" />
</div>
<div style="float:left;">
<select name="secim" onchange="hesapla(this)">
<option selected>İşlemi Seçiniz
<option>Topla
<option>Çıkar
<option>Çarp
<option>Böl
</select>
<input type="reset" value="Sil" />
</div>

</form>



Bu kodlamanın sonucunda hesap makinemiz şu şekilde görüntülenir.


1. Sayı :

2. Sayı :

Sonuç =





14 Haziran 2011 Salı

CSS3 ile Web Sayfasına Yuvarlak Köşeli Elemanlar Koymak

Bir web sayfasına içerik yerleştirilirken genellikle div, span gibi kutu özelliği olan ve sayfa üzerinde belirli bir yüzeyi kaplayan elemanlar kullanılır. Tablo ile web tasarımının modasının geçtiği şu günlerde, tasarımcılar sayfalarını "div" veya "span" gibi kutu elemanları ile hazırlamaktadırlar. Bu elemanlar CSS'nin verdiği sayısız özellikler sayesinde web tasarımcıların daha keliteli ve daha güzel görünümlü siteler tasarlamasına olanak sağlamıştır. Bu yazıda artık üçüncü versiyonu ile karşımıza çıkan CSS'nin tasarımcılara verdiği yeni bir imkandan bahsetmek istiyorum. CSS3 ile gelen "border-radius" kodu sayesinde artık tasarımcı hazırladığı web sayfasına köşeleri yuvarlatılmış HTML elemanları yerleştirebilir. Bunu bir örenek kod üzerinde gösterelim. Mesela bir "div" elemanı CSS3 sayesinde şu şekilde biçimlendirilebilir,

<div style="float:left; text-align:center; font-size:18px; background: #9CF; border:solid 5px #c1c6c7; border-radius: 55px 35px 20px 10px; padding:30px;">Köşeleri Yuvarlatılmış Div</div>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Köşeleri Yuvarlatılmış Div

İsterseniz benzer bir kodlama ile yuvarlak butonlar da yapabilrisiniz. Alın size bir örnek,

<input type="button" value="Yuvarlak buton" style="text-align:center; font-size:18px; color:#fff; background: #9CF; border-radius:10px; padding:5px;"/>

Bu kodlama da şu şekilde görüntülenir,


"border-radius" bu kodun standart halidir. Eğer yaptığınız kodlamanın diğer web tarayıcılarda da sorunsuz çalışmasını istiyorsanız Şu kodları da sayfanıza eklemelisiniz,

-moz-border-radius:55px 35px 20px 10px; / Firefox için /
-webkit-border-radius:55px 35px 20px 10px; /Safari ve Google Chrome için /

Burda verdiğiniz
ilk değer: sol-üst köşeyi,
ikinci değer: sağ-üst köşeyi,
üçüncü değer:sağ-alt köşeyi,
dördüncü değer:sol-alt köşeyi

yuvarlatmak için vermeniz gereken yarıçap değerleridir. Eğer yarıçap için tek bir değer girerseniz, tüm köşeler aynı değerde yuvarlatılır.

Son olarak "border-radius" kodu ile uymlu tarayıcı listesini de verelim.

Uyumlu tarayıcılar:
-----------------------------
Firefox 3.5 ve üzeri
Internet Explorer 9 ve üzeri
Netscape Navigator 3 ve üzeri
Opera 10.5 ve üzeri
Google Chrome 4.0 ve üzeri