|
ÖRNEK UYGULAMALAR
|
Form Kontrolü
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
function denetle() {
var num = document.form1.elements.length
var dogruMu = true
for (var i=0; i<num; i++) {
if ((document.form1.elements[i].value == null ||
document.form1.elements[i].value == "") &&
(typeof document.form1.elements[i] != 'submit' ||
typeof document.form1.elements[i] != 'reset'))
{
dogruMu = false
alert("Formdaki " + document.form1.elements[i].name +
" alanı doldurulmamış bulunuyor. Lütfen doldurunuz!")
break }
}
return dogruMu
}
// -->
</script>
</head>
<body>
<form name="form1" method="POST" onSubmit="return denetle()">
<h2>Abone Formu</h2>
<p>Adınız:<br>
<input type=text size=25 maxlength=256 name="Abone_Adı"><br>
İlgi Alanı:<br>
<input type=text size=25 maxlength=256 name="İlgi"><br>
<strong>Oturduğunuz İl: <br></strong>
<input type=text size=25 maxlength=256 name="İl"><br>
<strong>Elektronik Posta Adresiniz: <br></strong>
<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>
<input type=submit value="Gönder"> <input type=reset value="Sil">
</form>
</body>
</html>
|
| |
<html>
<head>
<script type="text/javascript">
function sayac()
{
var i=0;
while (i<=10)
{
document.write("Sayi "+i);
document.write("<br />");
i=i+1;
}
}
</script>
</head>
<body>
<form>
<input onclick="sayac()" value="bas" type="button" />
</form>
</body>
</html>
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick="alert('Merhaba Dünya!')">TIKLAYINI!</BUTTON>
</FORM>
</BODY>
</HTML>
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE=”Javascript1.2”>
<!--Javascript kodunu eski sürüm Browserlardan gizleyelim
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert (“Merhaba Dünya!”) //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
// kod gizlemenin sonu -->
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<BUTTON onclick=merhaba()>TIKLAYINI!</BUTTON>
</FORM>
</BODY>
<HTML>
|
| |
Bir de şunu deneyin: önce merhaba.js adıyla şu metni kaydedin:
function merhaba()
{
alert("Merhaba, Dünya!")
}
Sonra, aşağıdakini merhaba3.htm adıyla kaydedin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT SRC="merhaba.js" LANGUAGE=”JavaScript”>
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
<FORM>
<INPUT TYPE="SUBMIT" NAME="BUTTON1" VALUE="TIKLAYIN!" onclick="merhaba()">
</FORM>
</BODY>
</HTML>
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--
alert("Merhaba Dünya!")
// -->
</SCRIPT>
</HEAD>
<BODY>
<B>Merhaba Dünya</B><br>
</BODY>
<HTML>
Bu dosyayı da merhaba4.htm adıyla kaydedin ve Browser’ınızda açın. Sayfanızın içeriğini oluşturan “Merhaba Dünya” yazısı ile Javascript programınızın icra ettirdiği uyarı kutusunun görüntülenmelerindeki sıraya dikkat edin.
Bu dosyada, küçük bir değişiklik yapalım ve kodlarımıza şu şekli verelim:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Merhaba Dünya!</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function merhaba()
{
alert("Merhaba Dünya!")
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="merhaba()">
<B>Merhaba Dünya</B><br>
</BODY>
<HTML>
merhaba5.htm adıyla kaydedeceğiniz bu dosyayı Browser’ınızda açtığınızda, sayfa metni ile uyarı kutusunun görüntülenme sırasına dikkat edin.
|
| |
Diyelim ki, HTML sayfanızda şöyle bir bölüm var:
<FORM NAME=form01> WEB KİTAPÇISI
<INPUT TYPE=”checkbox” NAME=”roman”>Roman
<INPUT TYPE=”checkbox” NAME=”hikaye”>Hikaye
<INPUT TYPE=”checkbox” NAME=”biyografi”>Biyografi
<TEXTAREA NAME=”sonuc” ROWS=”6” COLS=”6”>Burada sonuç gösterilecek</TEXTAREA>
</FORM>
Şimdi bu HTML kodu sayfanızda şu Nesne’leri oluşturur:
1. Bir adet Form
2. Dört adet “checkbox” türü INPUT alanı
3. Bir adet metin alanı
Şimdi dikkat: Sizin açınızdan “form01” isimli bu formu oluşturan FORM ögesi, Javascript açısından “document.form01” adlı nesnedir. Ziyaretçinin içine işaret koyduğu kutu, Javascript tarafından “document.checkboxSelected” diye tanınır. Sizin “sonuc” isimli metin alanınızın içinde yazılı olacak metin ise Javascript bakımından “document.form01.sonuc.value” (value=değer) diye bilinir.
HTML dilini geliştirenler, türü “checkbox” olan INPUT nesnesinin başına gelebilecek “olay” türlerinin neler olabileceğini düşünürken, “Mesela,” demişler, “Kullanıcı bu kutuyu tıklayabilir!” Yani, bu nesnenin Browser açısından yol açabileceği “olay”lardan biri tıklanması halinde olan olaydır. Tıklamanın İngilizcesi ne? “click!” O halde bu olayın adı “Click,” bu olayı yönlenrdiren metodun adı ise “onClick”tir (on, İngilizce -de, -da eki veya üzerinde, halinde kelimesinin karşılığıdır). Bu durumda “onClick,” olayı, bu kutu açısından bir olaydır ve Javascript prnogramcısı olarak bu olayı yakalayabilir, kullanabiliriz. Başka bir deyişle, Browser’a, Javascript yoluyla “Ey Browser; kullanıcı benim INPUT nesnelerimden “roman” adlı olanı tıkladığı zaman şu, şu işi yap!” emrini verebiliriz. Bu noktada bilgisayar programının, hangi dille yazılırsa yazılsın, alt alta gelmiş komutlar listesi olduğunu hatırlatalım.
Peki, yine aynı örnekte, Browser’a Javascript yoluyla ne gibi bir iş yaptırtabiliriz? Mesela, “Ey Browser, kullanıcı benim INPUT nesnelerimden ‘roman’ adlı olanı tıkladığı zaman benim ’sonuc’ adlı TEXTAREA nesnemin değerini ‘Roman’ yap!” diyebiliriz. Biliyorsunuz ki, TEXTAREA nesnelerinin değeri, ekranda çizdikleri kutunun içine koydukları içerik demektir. Tabiî aynı mantıkla, “hikaye” kutusu işaretlenince Sonuç kutusuna “Hikaye,” “biyografi” kutusu işaretlenince de Sonuç kutusuna “Biyografi” yazdırtmak elimizde.
Kısaca, Javascript herşeyi, bir HTML ögesine göre tanımlar, adlandırır ve bilir. Unutmayacağınız kural: “Javascript, sayfanın bir şeyini alır, sayfanın bir şeyine hitabeder!”
Bu gayet anlamlı şekilde ifade ettiğimiz kuralı yerine getirmekte sorun, sadece Javascript’in on-onbeş kelimesini, yedi-sekiz işlemini öğrenmek değil, aslında HTML belgesinin nesnelerinin olaylarını ve metodlarını öğrenmektir.
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// degisken tanimlari
var x, y, z
x = 7
y = 7
z = 13
// -->
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//mukayese sonuclarını gösterelim
document.writeln("x = " + x)
document.writeln("y = " + y)
document.writeln("z = " + z)
document.write("x değişkeni y değişkenine eşit mi, (x==y)? ")
document.writeln(x==y)
document.write("y değişkeni z değişkenine eşit mi, (y==z)? ")
document.writeln(y==z)
// -->
</SCRIPT>
</PRE>
</BODY>
</HTML>
|
| |
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Mukayese</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
function goster(secme)
{
var endeks, secilenYemek
endeks=secme.selectedIndex
secilenYemek=secme.options[endeks].text
if (secilenYemek == "Adana Kebap")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz! Bravo!"
}
if (secilenYemek == "Yogurtlu Iskender")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Sizi tebrik ederiz!"
}
if (secilenYemek == "Biber Dolma")
{
document.tarifForm.tarif.value=secilenYemek + " seçtiniz. Zevkinize hayranız!"
}
if (secilenYemek == "Yaprak Sarma")
{
document.tarifForm.tarif.value=secilenYemek + " yapması biraz zordur; ama çok lezizdir"
}
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="tarifForm">
<P>Hangi yemeğin tarifini istiyorsunuz? Lütfen istediğiniz yemeği seçin:</P>
<SELECT NAME="yemeklistesi" onChange="goster(this)">
<OPTION SELECTED> Bir yemek seçiniz
<OPTION> Adana Kebap
<OPTION> Yogurtlu Iskender
<OPTION> Biber Dolma
<OPTION> Yaprak Sarma
</SELECT>
<P></P>
<INPUT NAME="tarif" VALUE="" SIZE=55>
</FORM>
</BODY>
</HTML>
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// santigrad-fahrenhayt tablosu
document.writeln("<TABLE Border=\"1\">")
document.writeln("<TR><TD>Santigrad</TD><TD>Fahrenhayt</TD></TR>")
for (santigrad = 0; santigrad <= 100; ++santigrad)
{
fahrenhayt = santigrad * 9 / 5 + 32
document.writeln("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
}
document.writeln("</TABLE>")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Burada “for” ifadesiyle tekrarlanan bir döngü oluşturuyoruz. “for” döngüsüne geçmeden Javascript’e, sayfaya bir kaç HTML komutu göndermesini bildiriyoruz; bu komutlar sayfada bir tablo başlatıyor; tablonun birinci sırasına iki kutu oluşturarak, içlerine “Santigrad” ve “Fahrenhayt” yazıyor. Şimdi asıl, “for” ifadesi üzerinde duralım:
“for” ile oluşturacağımız döngü, bir sayaca göre ilerler. Burada sayaç olarak “santigrad” adında bir değişken oluşturuyoruz, Javascript’e “Santigrad adında bir değişken yap, içine 0 değerini koy; ve bu değişken 100’den küçük veya 100’e eşit ise bazı işler yap!” demiş oluyoruz. Bu arada Javascript, diğer dillerin benzeri komutuna göre bize bir kolaylık sağlıyor: Javascript’in her döngü yapacağı işten sonra santigrad’ın mevcut değerine 1 eklemesini aynı satırda ve kolayca sağlıyoruz. “for” işleminin başladığını belirten açılan süslü parantezden sonra Javascript’e her döngüde yapacağı iki işi bildiriyoruz:
fahrenhayt = santigrad * 9 / 5 + 32
Bu komutla Javascript, “fahrenhayt” adını verdiği bir değişken oluşturuyor ve ilk değer olarak, santigrad değişkeninin değerini 9 ile çarpıp, 5’e bölüyor, bulduğu sayıya 32 ekliyor. ilk turda, santigrad değişkeninin değeri 0 olduğuna göre, fahrenhayt değişkeninin değeri 32 olarak bulunuyor; ve Javascript ikinci işe geçiyor:
document.writeln("<TR><TD>" + santigrad + "</TD><TD>" + fahrenhayt + "</TD></TR>")
Bu iş ise, sayfaya bir tablo sırası ile bir tablo kutusu göndermek; bu kutunun içine santigrad değişkeninin değerini yazmak; sonra bu kutuyu kapatıp yeni bir kutu açmak; bu kutunun içine fahrenhayt değişkenini değerini yazarak, kutuyu ve tablo sırasını kapatmaktan ibaret.
Javascript, birinci turu bitirdiğinde, “for” komutunun tayin ettiği ölçüde sayaç değişkeninin arttırıp veya azaltıp, ikinci tura başlayacaktır. Bu ne zamana kadar böyle devam edip gidecektir? Sayaç değişkeninin değeri, tayin ettiğiniz sınına ulaşıncaya kadar. Nedir bu sınır: santigrad değişkeninin değerinin 100’e eşitlenmesi. Bu kadar uzun bir tablo vermek istemiyorsanız, bu değeri istediğiniz bir sayıya indirebilirsiniz ve sayacı birer birer arttırma yerine, mesela beşer beşer attırabilirsiniz. Sayacı beşer-beşer arttırmak için “for” komutunun son argümanını “santigrad +=5” şeklinde yazmalısınız.
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te döngü</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// envanter kontrolü icin degisken
var stok = 700
// -->
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript1.2">
function hesapla(miktar)
{
var endeks, talepMiktar, satis
endeks=miktar.selectedIndex
talepMiktar=miktar.options[endeks].text
satis = 0
while (talepMiktar < stok)
{
stok -= talepMiktar
satis++
}
document.miktarForm.sonuc.value=talepMiktar + " ton itibariyle "+ satis + " adet sipariş için stokumuz var!"
}
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="miktarForm">
<P>Alacağınız miktarı lütfen seçiniz:</P>
<SELECT NAME="miktar" onChange="hesapla(this)">
<OPTION SELECTED> Miktarı seçiniz
<OPTION>100
<OPTION>200
<OPTION>300
<OPTION>400
</SELECT>
<P></P>
<INPUT NAME="sonuc" VALUE="" SIZE=55>
</FORM>
</BODY>
</HTML>
Bu kodun da bir çok unsuru üzerinde durmayalım; bizi döngü açısından ilgilendiren bölümlerini ele alalım. Gördüğünüz gibi üç değişken tanımlıyoruz; “stok” değişkeninin değerini biz veriyoruz; miktarTalep değişkeni ise sayfamızdaki Form nesnesinin “miktar” adlı SELECT nesnesinden alınıyor. Bu arada, işlemi yapan fonksiyonun içinde “satıs” adlı bir değişken oluşturuyoruz ve değerinin, döngünün içinde birer birer artmasını sağlıyoruz. Bu kodun mantığı, müşterinin sipariş vereceği miktarda, stokumuzdan kaç adet toptan satış yapılacağını bilmek olduğuna göre, Javascript, döngünün içinde çalışırken şöyle düşünecektir:
“Benden, stok değişkeninin değerinden talepMiktar değişkeninin değeri kadar çıkartmam; sonra da satıs adlı değişkenin değerini bir adet arttırmam isteniyor. Ama bunu ancak ve sadece talepMiktar değişkeninin değeri stok değişkeninin değerinden az iken yapabilirim!”
Nitekim Javascript, talepMiktar değişkeninin değeri stok değişkeninin değerine eşit veya fazla hale geldiği anda, döngüye son verecek ve “while” ifadesinin dışına çıkacaktır. Döngüden çıktığı anda Javascript’in yapacağı iş ise ekrandaki Form’un sonuc adlı kutusuna kendisine bildirilen metni yazmaktan ibaret!
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Switch</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// gecici bir degiskene ihtiyacımız var
gecici = "Bir"
// müsteriye soruyu bir defa soralım
do
{
//buraya gerçek alış veriş halinde gerekli işlemler girecek
yanit = prompt(gecici + " gömlek almak ister misiniz?", "Evet")
gecici = "Bir başka"
}
while (yanit == "Evet")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Bu programda Browser’ın kullanıcıdan bilgi alma aracı olan Prompt kutusunu kullanıyoruz; müşteri adayına “bir” gömlek almak isteyip istemediğini soruyoruz. Buradaki “bir” kelimesi, geçici değişkenimizden alınıyor; müşteri ikinci alış-verişini yapmaya karar verirse, bu değişkenin değerini “Bir başka” olarak değiştiriyoruz. Bu programda, müşteri-ziyaretçinin ilk “Evet” yanıtı halinde sayfamızda yapılabilecek siparişi alma, fiyatı bildirme, onay isteme ve benzeri işlerin hiç biri yok; Javascript sadece aynı soruyu yeniden soruyor; taa ki ziyaretci Prompt kutusuna “Evet” dışında bir şey yazıncaya kadar. Do komutu, while bölümüne yazdığınız şart değişinceye kadar icra edilecektir. (Tabiî, buradaki örnekte bütün süreç, müşteri-ziyaretçinin Prompt kutusunda Cancel (İptal) düğmesine basmasıyla da sona erecektir; ama bu Prompt kutusunun bir özelliğidir.)
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Switch</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// degiskeni tanımlayalım
var olcu
// degiskeni ziyaretciden alalım
olcu = prompt("Ölçünüzü belirtin: B-Büyük K-Küçük O-Orta", "O")
// bu degiskene göre yanıt verelim
switch (olcu)
{
case "O" :
case "o" :
alert ("Orta boy gömlek siparişiniz alındı!")
break
case "B" :
case "b" :
alert ("Büyük boy gömlek siparişiniz alındı!")
break
case "K" :
case "k" :
alert ("Küçük boy gömlek siparişiniz alındı!")
break
default: alert ("Lütfen beden ölçünüzü belirtiniz!")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Bu sayfayı Browser’da açtığınızda, karşınıza bir diyalog kutusu gelecektir.
<js003.tif ve js004.tif -- Resimaltı: Javascript’in “prompt” komutu ile IE’nin ve Netscape’in açtığı diyalog kutuları, başlıkları dışında, aynıdır.>
Bu kutuda varsayılan değer olarak Orta Boy ölçü için O harfi bulunuyor. isterseniz, komutta değişiklik yaparak. bu kutuya istediğiniz değeri girebilirsiniz. Javascript, bu kutunun sağlayacağı değeri, “olcu” adı altında, switch komutuna iletiyor; switch komutu da “olcu” bilgisinin üç ayrı halinde üç ayrı yanıt veriyor. Böyle bir programı gerçek hayatta uygularken, yapılacak iş olarak sadece bir Alert kutusuyla yetinmeyerek, söz gelimi bu noktada Javascript’i farklı fonksiyonlara sevkederek, diyelim ki bir sipariş belgesi hazırlatabilirsiniz. Bu örnekte Javascript, olcu bilgisinin farklı hallerinde sadece farklı uyarı kutuları vermekle yetiniyor. Bu programda dikkatinizi çeken bir diğer nokta, her bir hale ilişkin case grubunda yer alan break komutu olmalı. Olcu isimli switch döngüsünün işi gerekli mesajı verdikten sonra bittiğine göre, Javascript’in diğer case’leri değerlendirmesini önlememiz gerekir; bunu break ile sağlıyoruz.
Ayrıca bu programda, ziyaretçi ile ilişkilerde gözönünde tutmanız gereken bir ilkenin uygulandığını görüyorsunuz: ziyaretçinin büyük beden için büyük ya da küçük harf B tuşuna basacağını bilmediğimiz için, kendimizi her iki ihtimale karşı da hazırlıyoruz. İyi bir programcılık tekniği, özellikle ziyaretçilerden girdi beklediğiniz hallerde, büyük harf-küçük harf durumlarına karşı hazırlıklı olmaktır.
|
| |
<script type="text/javascript">
var gunler = new Date();
var gun = gunler.getDay();
switch (gun)
{
case 1:
document.write('Pazartesi');
break;
case 2:
document.write('Salı');
break;
case 3:
document.write('Çarşamba');
break;
case 4:
document.write('Perşembe');
break;
case 5:
document.write('Cuma');
break;
case 6:
document.write('Cumartesi');
break;
default:
document.write('Bugün haftasonu PAZAR');
}
</script>
Yukardaki kod satırının açıklaması:
var gunler = new Date();
Date() fonksiyonu o anki tarih ve zaman bilgisini verir. Buradan gelen bilgiyi “gunler” isimli değişkene aktardık.
var gun = gunler.getDay();
getDay() fonksiyonu ise o anki tarihin gün bilgisini verir. ”gunler” değişkeni içinde gelen gün bilgisini “gun” isimli değişkene aktardık. Buradaki bilgi haftanın günlerini rakam olarak verir.
Pazartesi ilk gün olduğu için “1” rakamını döndürür. Diğer günlerde sırasını takip eder.
switch (gun)
switch ifadesi ile “gun” değişkeni kontrol ediliyor.
case 1:
document.write('Pazartesi');
break;
Bu koşulda gelen bilgi “1” ise sayfaya “Pazartesi” yazdırır ve komut sonlandırılır. Diğer ifadelerde aynı mantıkla çalıştırılır.
|
| |
bütün case ve default ifadeleri, switch deyimine ait bir süslü parantez içerisinde bulunur.
<script type=”text/javascript”>
function goster()
{
var ortalama = document.form1.k1.value;
switch (ortalama)
{
case “1″:
alert(‘Zayıf’);
break;
case “2″:
document.write(‘Geçer’);
break;
case “3″:
document.write(‘Orta’);
break;
case “4″:
document.write(‘İyi’);
break;
case “5″:
document.write(‘Pekiyi’);
break;
default:
document.write(‘Hatalı Giriş’);
}
}
</script>
|
| |
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>Javascript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// fonksiyonu tanımlayalım:
function dogruMu(numara)
{
var karakter = null
var durum = true
if(numara.length != 13)
{
durum = false // durum değişkenin değeri değişti
}
else
{
for(var i = 0; i <= 12; i++) {
karakter = numara.charAt(i)
if ( i == 0 && karakter == "(" )
continue //birinci karakter parantez ise başa dön
else //değilse devam et
if( i == 4 && karakter == ")" )
continue //beşinci karakter parantez ise başa dön
else //değilse devam et
if( i == 8 && karakter == "-" )
continue //dokuzuncu karakter çizgi ise başa dön
else //değilse devam et
if( parseInt(karakter,10) >= 0 &&
parseInt(karakter,10) <= 9 )
continue //1, 4 ve 9 dışındaki karakter sayı ise devam et
else //değilse dur
{
durum = false //değişkenin değeri değişti
break //fonksiyon kesildi
}
}
}
return(durum) //çağıran işleme durum’un değeri bildirildi
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE = "Javascript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
// Ziyaretciden telefon numarasını isteyelim
numara = prompt("Lütfen telefon numaranızı yazınız [(333)111-2222 gibi]", "")
if(dogruMu(numara))
{
document.writeln("Telefon numaranızı verdiğiniz için teşekkür ederiz.")
document.writeln("Müşteri temsilciniz size ilk fırsatta arayacaktır")
}
else
{
document.writeln("Numaranızı örnekte görüldüğü şekilde yazmanızı rica ederiz")
}
// -->
</SCRIPT>
</PRE>
</BODY>
</HTML>
Bu sayfada, önce “if(dogruMu(numara))” şeklindeki ifadeye dikkat edelim. Javascript, bu noktada “dogruMu” fonksiyonu çağıracak, bunu yaparken de fonksiyona “numara” adı altında bir değer geçirecektir. (Bu değeri, çeşitli şekillerde elde edebiliriz; bir Form nesnesinde INPUT kutusundan alabileceğimiz gibi, burada olduğu gibi PROMPT diyalog kutusuyla da alabiliriz.) Fonksiyondan bütün beklediğimiz “if” sorgulamasına “true” (doğru) veya “false” (yanlış) şeklinde bir karşılık vermesidir. Yukarıda “if” döngüsünü ele alırken, yanıtın doğru olması halinde ilk bölümdeki, yanlış olması halinde “else” bölümündeki komutların uygulandığını görmüştük. Şimdi burada dogruMu() fonksiyondan “true” sonucu dönerse, sayfaya teşekkür mesajı ve bilgi notu iki satır halinde yazılacak; “false” sonucu dönerse, ziyaretçi numarayı doğru yazması için uyarılacaktır. (Bu örnekte program bu noktada kesiliyor, oysa gerçek hayatta bu noktada ziyaretçiye bilgi girme aracının yeniden sunulması gerekir.)
Şimdi fonksiyona dönebiliriz. dogruMu() fonksiyonu, kendisine görev verecek işlemden veya fonksiyondan mutlaka bir argüman verilmesini istiyor. “numara” adıyla işleme sokulacak olan bu argüman, fonksiyon için bir nesnedir. Bu arada fonksiyonumuz kendi işleri için bir değişken oluşturuyor (karakter), ve içine boş değer koyuyor (null); daha sonra kendisinden beklenen değeri içine koyacağı bir değişken oluşturuyor ve içine varsayılan değer olarak “true” kelimesini koyuyor. Aksi kanıtlanmadığı taktirde, fonksiyonu göreve çağıran “if” döngüsüne bu değer bildirilecektir.
Fakat önce fonksiyonun gerçekten kendisine verilen bilgilerin, arzu edilen biçime uygun olup olmadığını sınaması gerekir. Bu bilgiyi tutan “numara” nesnesi, nesne olduğu için bazı özelliklere sahiptir; bu özelliklerden biri de uzunluğudur. Önce bu uzunluğun 13 karakter olup olmadığına bakıyoruz. Ziyaretçi, telefon numarasını yazdığı halde parantezleri veya kesme çizgisini unuttuysa, verdiği bilgilerin uzunluğu 13 karakterden az olacaktır, yani “numara.length” 13 olmayacak, “durum” değişkenin değeri “false” olarak değiştirilecektir. Yok, numaranın karakter sayısı 13 ise, fonksiyonumuz 13 karakteri, bir “for” döngüsü çerçevesinde tek tek irdelemeye başlayacaktır.
|
| |
<html>
<head>
<title>Yenii</title>
<script language="JavaScript">
function yeni()
{
var metin = prompt("İsminizi yazın…","Buraya lütfen")
var buyuk=metin.toUpperCase(metin)
var kucuk=metin.toLowerCase(metin)
yenisayfa=window.open("","Yeni_Sayfa", "toolbar=no,directories=no, status=no, menubar=no,scrollbars=yes, resizable=no,copyhistory=no,width=480, height=180, left=200, screenX=200, top=100, screenY=100")
yenisayfa.document.write("<html><head></head><body bgcolor=#ffffcc>")
yenisayfa.document.write("<h1>En büyük ", buyuk, " Başka büyük yok!</h1>")
yenisayfa.document.write("<h4>Sayın ", kucuk , ", sayfa ücreti 50 milyon! Hemen ödeyin</h4>")
yenisayfa.document.write("</body></html>")
}
</script>
</head>
<body>
<form>
<p>İsmini yazın lütfen…</p>
<input type="button" value="tıkla" onclick="yeni()">
</form>
</body>
</html>
|
| |
Girilen Sayıları Küçükten Büyüğe Sıralama
<html>
<head>
<title>Sıralama</title>
<script language="JavaScript">
function sirala()
{
var kelime = new Array(9)
var i, j, k, m, ara
for (i=0; i <=9; i++)
{
kelime[i] = prompt("Metinsel bir ifade girin lütfen...","Buraya,")
}
//Sayıları sıralıyoruz.
for (j=0; j <=9; j++)
{
for (k=0; k <=8; k++)
{
if (kelime[k] > kelime[k+1])
{
ara =kelime[k]
kelime[k] = kelime[k+1]
kelime[k+1] = ara
}
}
}
for (m=0; m <= 9; m++) document.write(m + 1 + ". kelime = " + kelime[m] + "<br>")
}
</script>
</head>
<body>
<form>
<p>Düğmeye basarak 10 tane yazıyı alfabetik sıraya sokabilirsiniz.</p>
<input type="button" value="Sırala" onclick="sirala()">
</form>
</body>
</html>
|
| |
Telefon Rehberi
<html>
<head>
<title>Sıralama</title>
<script language="JavaScript">
function rehber()
{
var kayit = new Array()
for (var i=0; i<=100; i++)
{
kayit[i] = new Array()
kayit[i][0]=prompt("Arkadaşınızın ismini girin lütfen","İsim")
if (kayit[i][0]==null || kayit[i][0]=="") break
kayit[i][1]=prompt(kayit[i][0] + " isimli arkadaşınızın telefonunu girin lütfen", "Telefon")
}
document.write("Rehbere kaydedilmiş isim ve telefon numaraları:<br>")
for (var j=0; j<=i;j++)
{
document.write(kayit[j][0] + ": " + kayit[j][1] + "<br>")
}
}
</script>
</head>
<body>
Aşağıdaki düğmeye basarak telefon numaralarını öğrenebilirsiniz.<br><br>
<form>
<input type="button" value="Telefon Rehberi" onclick="rehber()">
</form>
</body>
</html>
|
| |
| |
| |
| |
| |
|