Fonksiyonlar belirli bir görevi yerine getirmek için tasarlanmış kod bloklarıdır. Hazırlanan fonksiyonlar çağrıldığında yürütülerek istenen görev gerçekleştirilir.
1 2 3 4 5 | function fonk1(s1, s2) { return s1 * s2; } |
Fonksiyoların temel yapısı yukarıdaki gibidir. “function” anahtar kelimesi ile başlar. Daha sonra fonksiyona bir isim verilir. Yukarıdaki fonksiyonda fonk1 ismi verilmiştir.
Fonksiyonları yapacağı işe göre isimlendirmek kolaylık sağlayacaktır. Fonksiyon ismi verildikten sonra “( )” parantez açılır.
Parantezler virgüllerle ayrılmış parametre adlarını içerebilir:
(parametre1, parametre2, …)
Parametreler fonksiyon çağrıldığında fonksiyon tarafından alınan değerlerdir. Alınan bu değerler değişkenler gibi davranır ve fonksiyon içerisinde bu şekilde davranır.
{ } süslü parantezler içindeki kısım fonksiyonun çalıştıracağı kodlardır. Bu kodlar fonksiyon çağrıldığında çalışacaktır. Fonksiyonun çağrılması;
Bir olay meydana geldiğinde (kullanıcı bir düğmeyi tıklattığında),
JavaScript kodundan çağrıldığında,
Otomatik olarak (kendiliğinden) olabilmektedir.
Fonksiyonda kullanılan return ifadesi fonksiyonun geri döndüreceği değer için kullanılır. return ifadesine ulaşıldığında fonksiyon duracaktır.
Yukarıda fonk1 ismiyle oluşturduğumuz fonksiyonu incelediğimizde dışarıdan 2 adet parametre aldığını görmekteyiz (s1,s2).
ve alınan bu iki değerinin çarpımının geriye döndürüldüğünü görüyoruz.
Şimdide oluşturduğumuz bu fonksiyonu nasıl çağırabileceğimize bakalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> </head> <body> <h2>JavaScript Fonksiyon Kullanımı</h2> <p>Bu örnek fonksiyon oluşturma ve fonksiyonun çağrılmasını göstermektedir.</p> <p id="kutu"></p> <script> function fonk1(p1, p2) { return p1 * p2; } document.getElementById("kutu").innerHTML = fonk1(6, 4); </script> </body> </html> |
Yukarıdaki örnekte aldığı 2 parametreyi çarpıp sonucu döndüren fonksiyonun oluşturulduğunu görüyoruz.
1 2 3 | document.getElementById("kutu").innerHTML = fonk1(6, 4); |
Bu satır ile çağırdığımız fonk1 isimli fonksiyondan geri dönen değerin “kutu” isimli div içerisinde yazdırılmasını sağlıyoruz.
Niçin Fonksiyon Kullanılır?
Yukarıda fonksiyon kullanımını en basit haliyle gördük. Fonksiyon kullanmaktaki amaç fonksiyon içerisine yazdığımız kodları defalarca kullanabilecek olmamızdır. Biraz daha açalım.
Yukarıda kombinasyon hesaplamak için gerekli formülü görmekteyiz. Biz bu işlemi fonksiyon kullanmadan yapan bir sayfa oluşturacaksak yani kullanıcıdan “n” ve “r” değerini alıp sonucu hesaplayacaksak 3 defa faktoriyel hesabı yapmamız gerekecektir.
(n!, r! ve (n-r)! )
Fakat biz faktoriyel alma işini bir fonksiyona yaptırırsak sadece kullanıcıdan aldığımız bu değerleri fonksiyona yollamamız yeterli olacaktır.
Abi ben bir soru sormak istiyorum.IF-ELSE kullanırken css özelliğini belirtip fonksiyon yapmasını istiyorum.Yani mesela bir div olsun.Eğer bu div yeşil ise alarm versin.Benim istediğim bu.Yardım ederseniz çok sevinirim.