FONKSİYONLAR
Javascript, klasik HTML’in yapamadığı şeyler yapabilir; ziyaretçiden veya ziyaretçinin Browser programından alacağı bir bilgiyi değerlendirerek bir dizi işlem yapabilir; ziyaretçiyi sitemizde belli bir sayfaya yönlendirebilir; kısaca sayfalarımıza ziyaretçi ile etkileşme imkanı kazandırır.
Yukarıdaki çeşitli örneklerde gördüğünüz işlerin çoğu bir kere başvurulan işlerdi; fakat çoğu zaman sayfanızdaki bir Javascript işleminin defalarca yapılması gerekebilir. Hatta öyle işlemler olur ki, Javascript, başka bir işi yapmadan önce, mutlaka bu işlemi yapmak isteyebilir.
Bu tür tekrarlanan işleri, bu işin yapılması için gerekli bilgi kümesi ve komutlarla birlikte bir grup haline getirsek ve bu gruba bir isim versek; sonra bu iş kümesine ihtiyaç olduğu yerde Javascript’e “Filanca isimli grubu al; içinde belirtilen işleri yap, sonra sonucu bu noktaya bildir!” desek; acaba işlerimiz daha kolay hale gelmez mi?
İşte bu tür, bir isim altında toplanmış işlem paketlerine Function (işlev) adı verilir; Javascript kendisine “Şu fonksiyonu yap!” dediğiniz noktada yapmakta olduğu durdurur ve fonksiyon paketindeki işleri yapar; bu paket ortaya bir değişken veya sonuç çıkartıyorsa, o bilgiyi edinmiş olarak fonksiyon için yarım bıraktığı işleme geri döner. Fonksiyon yazmanızdaki birinci sebep, büyük bir ihtimalle, Javascript’e, Fonksiyon’un sağlayacağı bilgiyi kazandırmaktır.
Genel hatlarıyla fonksiyon, şu formüle göre yazılır:
|
function fonksiyonun_adı (argüman1, argüman2, ... argümanN) {
işlemler
}
|
Fonksiyonlar mutlaka SCRIPT etiketinin içinde yer alır. Daha sonra kullanılacak (çağrılacak) olsa da bütün fonksiyonlarınını HTML dosyasının HEAD bölümüne koymanız, Browser’ın Javascript yorumlayıcısı bakımından sürat sağlar. İyi bir programlama tekniği, bir sayfada gerekli bütün fonksiyonları, altalta, HTML’in HEAD bölümünde yer alacak bir SCRIPT etiketi içinde beyan etmek; sonra ihtiyaç olduğu yerde yeni bir SCRIPT etiketi koyarak bu fonksiyonu göreve çağırmaktır.
Bir fonksiyon, kendisini göreve çağıran komuttan veya fonksiyondan veri kümesi (argument) alabilir. Buna bir değerin fonksiyona geçirilmesi, ulaştırılması, verilmesi denilir. Bir fonksiyon, bir ya da daha fazla argüman alabilir. Fonksiyonun argümanları, bir isim altında toplanır ve bu bilgi kümesinin bölümlerine bu isimle atıfta bulunulur.
|
| NOT: Arguman, fonksiyonun çağrıldığı yerde, fonksiyona gönderilen değerdir.Ancak her fonkisyon arguman kullanmaz. |
Argumansız Fonksiyon
|
<html>
<head>
<title>Argümansız Fonksiyon</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function mesaj()
{
alert("Hiç bir mesajınız yok.");
document.write("Mesaja baktınız...");
}
</script>
</head>
<body>
<form>
Mesaja bakmak istiyorsanız, düğmeye basın.<br>
<input type="button" onclick="mesaj()" value="Mesaj Kontrol">
</form>
</body>
</html>
|
Burada form içerisine konan buona basıldığında mesaj isimli fonksiyon çağrılıyor onclick=mesaj(). Hİç birmesajınız yok uyarı kutusu açılıyor (alert)ve kutuya tamam dendiğinde ekrana "mesaja baktınız" yazdırılıyor. |
Argumanlı Fonksiyon
Bu türfonksiyonlarda,fonksiyon çağrılırken,bir değerde gönderilir. Fonksiyonlar <head< etiketleri arasından tanımlanırken ise, bu argumanlarıda parantez içerisine eklenir. Kaç tane değer yollanacaksa, bunlar arguman olarak eklenir. |
<html>
<head>
<title>Argümanlı Fonksiyon</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function puan(a, b)
{
alert("Verdiğiniz notu göndermek için basın.");
document.write(a + " isimli aktöre " + b + " notunu verdiniz.")
}
</script>
</head>
<body>
<form>
<input type="button" value="Notu Gönderin" onclick= "puan('Brad Pitt', '100')">
</form>
</body>
</html>
|
| |
| Bu uygulamada fonksiyonumuzun iki tane argümanı var. Bunlar: 'Brad Pitt' ve '100'. Yanlarındaki ' işaretleri bu argümanların bir metin ifadesi olduğunu anlatıyor. Burada çift tırnak kullanamıyoruz çünkü çift tırnak onclick olayına değer vermek için kullanılıyor.Bu nedenle javascript'nın kabul ettiği tek tırnağı kullanıyoruz. Burada "brad pitt", fonksiyondaki a değişkeninin, "100" ise b değişkeninin yerini alıyor. |
| |
Değer Döndüren Fonksiyon (değer atamalı)
Bu tür fonksiyonlarçalıştığında,return ifadesi ile çağrıldıkları yere bir değer gönderirler. |
| |
function fonksiyonun adı (argüman1, argüman2,....,argümanN)
{
İŞLEMLER
return değer
}
|
| |
<html>
<head>
<title>Değer Atamalı Fonksiyon</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function karesi(a)
{
a = a*a
return a
}
</script>
</head>
<body>
<script language="JavaScript">
sayi = prompt ("Karesi alınacak sayıyı girin!")
sonuc=karesi(sayi)
document.write(sonuc)
</script>
</body>
</html>
|
| |
| Burada sayfa açılır açılmaz kullanıcıdan karesi alanacak sayının girilmesi isteniyor. Bunu prompt ile sağlıyoruz. prompt alert'ten farklı olarak mesaj gösterdiği gibi aynı zamanda , kullanıcın girdiği değeri de alır. Bunu örnekte olduğu gibi bir değişkene atayarak üzerinde işlem yapabiliriz. Örnekte promptla alınan değer sayi isimli değişkene aktarılıyor ve ardından karesi isimli fonksiyona gönderiliyor karesi(sayi). Fonksiyon sayının karesini alarak bu değeri return ile geri yolluyor ve dönen bu sayı sonuc değişkenin içine aktarılıyor sonuc=karesi(sayi). Son olarak sonuc değişkeni ekranda yazdırılıyor. |
| |
<html>
<head>
<title>İki sayının çarpımı</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function carpim(a,b)
{
c = a*b
return c
}
</script>
</head>
<body>
<script language="JavaScript">
sayi1= prompt ("İlk sayıyı girin")
sayi2 = prompt ("İkinci sayıyı girin")
sonuc=carpim(sayi1,sayi2)
document.write(sonuc)
</script>
</body>
</html>
|
Burada prompt ile kullanıcıda ard arda iki sayı alınarak sayi 1 ve sayi 2 değişkenlerine aktarılıyor. Daha sonr abu iki değişken arguman yoluyla carpim fonksiyonuna yönlendiriliyor ve dönen değer sonuc isimli değişkene aktarılıyor.Son olarak ekranda gösteriliyor. |
| |