Javascript Parametreli Fonksiyonlar
Web Developer'lara yeniden merhaba :)
Bugüne kadar yaptığımız hemen hemen her Javascript örneklerimizde fonksiyonlar kullandık ve kullandığımız fonksiyonlar
için herhangi bir parametre ya da değer döndürme işlevler yazmadık.Bugünkü makalemizde ise Javascript parametreli fonksiyonlar ile değer döndüren Javascript fonksiyonları öğreneceğiz.
Bildiğiniz gibi fonksiyonlar temelde içeriğine yazılan kod parçacıklarını çalıştıran programcıklardır ve içerisine yazılan
kodlardaki değerlere göre hareket ederler.Ancak bazı fonksiyonlar ise dışarıdan değer alırlar ve bu da çok daha dinamik ve esnek kullanım sağlar.
İşte dışarıdan alınan her değere parametre denir ve parametreler fonksiyonun içerisinde kullanılmak üzere fonksiyonun başına yazılır.
Parametreli bir Javascript fonksiyonunun yapısı ise:
function FonksionAdi(parametre1,parametre2,parametre3,...)
{
//kodlar
}
şeklindedir ve fonksiyon içerisine yazılabilecek parametre sayısında herhangi bir sınır yoktur.
Parametrelerin kullanımı ise gayet basittir,fonksiyonun içerisindeki kodlarda üste yazılan parametre çağırılır ve fonksiyonun yazıldığı yerdeki değere göre referans alınır.
Şimdi parametreli fonksiyon kullanımı için basit bir uygulama yapalım,bunun için HTML belgesi oluşturup head tagları arasında yeni bir script tagı oluşturuyoruz:
Buradaki javascript fonksiyonumuzun amacı kendisine parametre olarak verilen "mesaj" isimli değişkeni alert metoduna referans verecek ve metodu kullandığımız yerdeki metni ekrana yansıtacaktır.
Sayfamızı çalıştırdığımızda ise bu fonksiyon çalışmayacaktır çünkü bu fonksiyonu tetikleyecek herhangi bir event (olay) henüz yok,bu yüzden sayfamızın body tagları arasında input tipinde bir buton ekliyor ve tıklandığında fonksiyonu çalıştırması için onclick eventine fonksiyonumuzun adını ve parametre değerini yazıyoruz:
Peki sistem nasıl çalışıyor?
Öncelikle input içerisindeki onclick eventine yazdığımız MesajGoster("merhaba javascript!"); fonksiyonumuza odaklanıyoruz,bu fonksiyon içerisindeki "merhaba javascript!" değeri string tipte bir değerdir ve bu değer MesajGoster(mesaj) fonksiyonundaki "mesaj" sözcüğüne denk gelmektedir.
Dolayısıyla fonksiyonu yazdığımız onclick eventindeki değere ne yazarsak yazalım MesajGoster metodu içerisine yazdığımız alert metodundaki "mesaj" sözcüğünün yerini alacaktır.
Konuyu birazda şöyle hayal edin: bilgisayarınıza yeni bir oyun yüklediniz ancak oyunun çalıştırma dosyası olan .exe uzantılı dosyanın kısayolu masaüstünüzde var ve siz biliyorsunuz ki masaüstündeki kısayol dosyasını değil aslında Program Files içerisindeki oyunun exe dosyasını çalıştırıyorsunuz.İşte parametreli fonksiyon kullanımı tıpkı buna benziyor.
Yeni bir örnek yapalım ve bu defa iki parametreli bir fonksiyon yazalım ve fonksiyonumuzun görevi 2 sayıyı toplamak olsun:
Şimdi toplama fonksiyonumuzu inceleyelim: "Topla" isimli fonksiyonumuzda "sayi1" ve "sayi2" isimli iki parametremiz var ve bunlar aralarında virgül (,) ile ayrılmış durumdalar.
Fonksiyon içerisinde ise sürekli kullandığımız genel değişken tipi olan "var" deyimiyle yazdığımız "birinciSayi" ve "ikinciSayi" değişkenlerimiz yer alıyor ve karşılarında daha önce kullanımını öğrendiğimiz parseInt metodu ile parametreleri sayısal değerlere çevirdik.
Not: Parametrelere yazılan değerlerin tipleri varsayılan olarak string türdedir,eğer bu parametreleri farklı tiplerde kullanacaksak fonksiyon içerisinde parse (dönüşüm) ederiz!
Elimizde iki sayı olduğuna göre artık klasik toplama işlemi ile toplayarak alert metoduyla ekrana yansıtırız.
Metodu kullanacağımız yer yine body tagları arasındaki bir input olsun:
Önceki örneğimizden tek farkı ise fonksiyonumuzu çalıştıracağımız onclick eventine fonksiyonumuzun adını yazarken parametreler arasında yine virgül koyarak belirtmemizdir.
4 ve 6 sayısını topladığımız bu Javascript fonksiyonunu çalıştıralım:
Böylelikle parametreli fonksiyonların çalışma yapısını öğrenmiş olduk.Şimdi ise değer döndüren fonksiyon kullanımını görelim :)
Web yazılım dilleri haricinde C# ya da Java gibi assembly dilleri biliyorsanız metodların yapılarını biliyor olmalısınız eğer
bilmiyorsanız hemen anlatayım :)
Metodlar (fonksiyon da diyebiliriz) değer döndüren (return) ve iş yapan (void) metotlar olarak ikiye ayrılırlar,değer döndüren metotlar içerisinde belli bir işlem yaparak ya da hiçbir işlem yapmadan sabit bir değeri "return" deyimiyle geri döndürürler.
Void metotlar ise içerisine yazılan kodları çalıştırmaktan başka hiçbir işlevleri yoktur ve javascript derslerimizde şimdiye
kadar yazdığımız tüm fonksiyonlar void metot tipindeydiler.
Void metot için örnek verirsek:
function Calis()
{
//çalışacak kodlar
}
Değer döndüren metotlar örneğine ise:
function DegerAl()
{
var deger="selam";
return deger;
}
veya
function DegerAl()
{
return "selam";
}
şeklinde örnekler verebiliriz.
Peki tüm kodları void metotlar içerisinde yazabilmek varken neden geriye değer döndüren metotlara ihtiyacımız var?
Bu sorunun cevabı programcılığın temellerine dayanmaktadır ve bazen ekrana bir yazı yansıtılmasını istemek yerine
yansıtılacak yazıyı kod tarafında kullanmak isteriz,dolayısıyla değer döndüren metotlar böyle bir ihtiyaçtan doğmuştur.
Örneğin iki sayıyı çarpan ve çarpımın sonucunu geri döndüren bir fonksiyon yazalım:
Fonksiyonumuz içerisine yazılan iki sayıyı çarpıyor ve sonucu geri veriyor ama nereye veriyor? :)
Değer döndüren bir fonksiyonun kullanımı ise şu şekildedir:
Yine script tagı içerisinde "sonuc" isimli bir değişken tanımladık ve bu değişkenin değerine fonksiyonun adını yazdık.Bu sayede "sonuc" isimli değişkene değer atamamız gerektiğinde "CarpimiVer" isimli fonksiyon çalışacak ve içeriğindeki kodlardan gelen 42 değeri alacaktır.
Şimdi de değer döndüren fonksiyonu parametreli olarak inceleyelim:
"FarkAl" isimli fonksiyonun içerisine sayıların farkını alacak eksi operatörünü kullandık ve çok basit bir şekilde "return"
deyimiyle degerini geri döndürdük.Ardından "fark" isimli değişkenin karşısına fonksiyonumuzun adını yazdık ve parametre olarak 5 ile 2 sayılarını yazdık,tahmin edebileceğiniz gibi 5 ve 2 sayıları fonksiyona gidecek ve fonksiyon içerisinde çıkarma işlemi yapıldıktan sonra 5-2=3 sonucu "fark" isimli değişkenimize atanacak.
Gördüğünüz gibi değer döndüren fonksiyonlarda parametre kullanımı gayet kolay bir şekilde yazılabilmektedir.İlerleyen makalelerimizde yeniden bu fonksiyonlarımıza geri döneceğiz.
Son olarak iç içe javascript fonksiyon kullanımını görelim,iç içe fonksiyon kullanımı bir fonksiyon çalışırken içerisinde bir başka fonksiyon kullanım işlemidir.
Örneğin bir sayının karesini geri döndüren fonksiyon yazalım:
Bu fonksiyon kendisine sayı olarak verilecek parametrenin karesini alıyor,şimdi ise bu fonksiyonun döndürdüğü değeri kullanarak ekrana yansıtacak fonksiyonumuzu yazalım:
Fonksiyonlarımızı incelersek "KaresiniGoster" isimli fonksiyonumuzun içerisinde herhangi bir sayı yazmadık ancak sayıyı aynı fonksiyon içerisinde "KaresiniGetir" fonksiyonunu çağırarak "karesi" isimli değişkene atadık ve bu değişkenin değerini alert ile ekrana yansıtıyoruz.
İç içe fonksiyon kullanımı ile ilgili olarak bir başka bilmemiz gereken ise diğer fonksiyonu çağıracak olan ana fonksiyonun parametresini çağırılan fonksiyonun parametresine devredilebilmesidir,aynı örneğimizde "KaresiniGoster" isimli fonksiyona parametre yazalım ve içerideki fonksiyonun 5 olan değerini ana fonksiyonun parametresi olarak verelim:
Görüldüğü gibi ana fonksiyonun "sayi" isimli parametresi,içerisinde çağırdığımız fonksiyonun da parametresi oluyor ve ben buna parametrelerin fonksiyonlar arası devredilebilirliği diyorum :)
Peki iç içe fonksiyon yazdık ve hatta kendi aralarında parametrelerini devrettik,input butonumuza hangi fonksiyonu referans vereceğiz?
Cevabımız tabi ki ana fonksiyonumuz olan "KaresiniGoster" fonksiyonumuz olacak çünkü fonksiyonlar arası çağırılan değil diğer fonksiyonları çağıran fonksiyonumuzu kullanalım ki diğer fonksiyonlar da çalışabilsin:
Böylelikle input içerisindeki 4 sayısı önce "KaresiniGoster" fonksiyonuna gidecek ve oradan da "KaresiniGetir" fonksiyonuna yönlendirilecek.
Javascript fonksiyonları ile ilgili olarak şu anlık aklıma gelenler bu kadarla sınırlı kalıyor,ilerleyen makalelerimizde bu fonksiyonlarımızı tekrar tekrar kullanarak javascript dünyasında ilerlemeye devam edeceğiz.Geri kaçınılmaz son diyebiliriz çünkü javascript'te fonksiyonlar çok sık kullanılır ve fonksiyonsuz javascript düşünemiyorum :)
Bir sonraki makalemizde görüşmek üzere hoşçakalın,esen kalın...
Bugüne kadar yaptığımız hemen hemen her Javascript örneklerimizde fonksiyonlar kullandık ve kullandığımız fonksiyonlar
için herhangi bir parametre ya da değer döndürme işlevler yazmadık.Bugünkü makalemizde ise Javascript parametreli fonksiyonlar ile değer döndüren Javascript fonksiyonları öğreneceğiz.
Bildiğiniz gibi fonksiyonlar temelde içeriğine yazılan kod parçacıklarını çalıştıran programcıklardır ve içerisine yazılan
kodlardaki değerlere göre hareket ederler.Ancak bazı fonksiyonlar ise dışarıdan değer alırlar ve bu da çok daha dinamik ve esnek kullanım sağlar.
İşte dışarıdan alınan her değere parametre denir ve parametreler fonksiyonun içerisinde kullanılmak üzere fonksiyonun başına yazılır.
Parametreli bir Javascript fonksiyonunun yapısı ise:
function FonksionAdi(parametre1,parametre2,parametre3,...)
{
//kodlar
}
şeklindedir ve fonksiyon içerisine yazılabilecek parametre sayısında herhangi bir sınır yoktur.
Parametrelerin kullanımı ise gayet basittir,fonksiyonun içerisindeki kodlarda üste yazılan parametre çağırılır ve fonksiyonun yazıldığı yerdeki değere göre referans alınır.
Şimdi parametreli fonksiyon kullanımı için basit bir uygulama yapalım,bunun için HTML belgesi oluşturup head tagları arasında yeni bir script tagı oluşturuyoruz:
Buradaki javascript fonksiyonumuzun amacı kendisine parametre olarak verilen "mesaj" isimli değişkeni alert metoduna referans verecek ve metodu kullandığımız yerdeki metni ekrana yansıtacaktır.
Sayfamızı çalıştırdığımızda ise bu fonksiyon çalışmayacaktır çünkü bu fonksiyonu tetikleyecek herhangi bir event (olay) henüz yok,bu yüzden sayfamızın body tagları arasında input tipinde bir buton ekliyor ve tıklandığında fonksiyonu çalıştırması için onclick eventine fonksiyonumuzun adını ve parametre değerini yazıyoruz:
Peki sistem nasıl çalışıyor?
Öncelikle input içerisindeki onclick eventine yazdığımız MesajGoster("merhaba javascript!"); fonksiyonumuza odaklanıyoruz,bu fonksiyon içerisindeki "merhaba javascript!" değeri string tipte bir değerdir ve bu değer MesajGoster(mesaj) fonksiyonundaki "mesaj" sözcüğüne denk gelmektedir.
Dolayısıyla fonksiyonu yazdığımız onclick eventindeki değere ne yazarsak yazalım MesajGoster metodu içerisine yazdığımız alert metodundaki "mesaj" sözcüğünün yerini alacaktır.
Konuyu birazda şöyle hayal edin: bilgisayarınıza yeni bir oyun yüklediniz ancak oyunun çalıştırma dosyası olan .exe uzantılı dosyanın kısayolu masaüstünüzde var ve siz biliyorsunuz ki masaüstündeki kısayol dosyasını değil aslında Program Files içerisindeki oyunun exe dosyasını çalıştırıyorsunuz.İşte parametreli fonksiyon kullanımı tıpkı buna benziyor.
Yeni bir örnek yapalım ve bu defa iki parametreli bir fonksiyon yazalım ve fonksiyonumuzun görevi 2 sayıyı toplamak olsun:
Şimdi toplama fonksiyonumuzu inceleyelim: "Topla" isimli fonksiyonumuzda "sayi1" ve "sayi2" isimli iki parametremiz var ve bunlar aralarında virgül (,) ile ayrılmış durumdalar.
Fonksiyon içerisinde ise sürekli kullandığımız genel değişken tipi olan "var" deyimiyle yazdığımız "birinciSayi" ve "ikinciSayi" değişkenlerimiz yer alıyor ve karşılarında daha önce kullanımını öğrendiğimiz parseInt metodu ile parametreleri sayısal değerlere çevirdik.
Not: Parametrelere yazılan değerlerin tipleri varsayılan olarak string türdedir,eğer bu parametreleri farklı tiplerde kullanacaksak fonksiyon içerisinde parse (dönüşüm) ederiz!
Elimizde iki sayı olduğuna göre artık klasik toplama işlemi ile toplayarak alert metoduyla ekrana yansıtırız.
Metodu kullanacağımız yer yine body tagları arasındaki bir input olsun:
Önceki örneğimizden tek farkı ise fonksiyonumuzu çalıştıracağımız onclick eventine fonksiyonumuzun adını yazarken parametreler arasında yine virgül koyarak belirtmemizdir.
4 ve 6 sayısını topladığımız bu Javascript fonksiyonunu çalıştıralım:
Böylelikle parametreli fonksiyonların çalışma yapısını öğrenmiş olduk.Şimdi ise değer döndüren fonksiyon kullanımını görelim :)
Web yazılım dilleri haricinde C# ya da Java gibi assembly dilleri biliyorsanız metodların yapılarını biliyor olmalısınız eğer
bilmiyorsanız hemen anlatayım :)
Metodlar (fonksiyon da diyebiliriz) değer döndüren (return) ve iş yapan (void) metotlar olarak ikiye ayrılırlar,değer döndüren metotlar içerisinde belli bir işlem yaparak ya da hiçbir işlem yapmadan sabit bir değeri "return" deyimiyle geri döndürürler.
Void metotlar ise içerisine yazılan kodları çalıştırmaktan başka hiçbir işlevleri yoktur ve javascript derslerimizde şimdiye
kadar yazdığımız tüm fonksiyonlar void metot tipindeydiler.
Void metot için örnek verirsek:
function Calis()
{
//çalışacak kodlar
}
Değer döndüren metotlar örneğine ise:
function DegerAl()
{
var deger="selam";
return deger;
}
veya
function DegerAl()
{
return "selam";
}
şeklinde örnekler verebiliriz.
Peki tüm kodları void metotlar içerisinde yazabilmek varken neden geriye değer döndüren metotlara ihtiyacımız var?
Bu sorunun cevabı programcılığın temellerine dayanmaktadır ve bazen ekrana bir yazı yansıtılmasını istemek yerine
yansıtılacak yazıyı kod tarafında kullanmak isteriz,dolayısıyla değer döndüren metotlar böyle bir ihtiyaçtan doğmuştur.
Örneğin iki sayıyı çarpan ve çarpımın sonucunu geri döndüren bir fonksiyon yazalım:
Fonksiyonumuz içerisine yazılan iki sayıyı çarpıyor ve sonucu geri veriyor ama nereye veriyor? :)
Değer döndüren bir fonksiyonun kullanımı ise şu şekildedir:
Yine script tagı içerisinde "sonuc" isimli bir değişken tanımladık ve bu değişkenin değerine fonksiyonun adını yazdık.Bu sayede "sonuc" isimli değişkene değer atamamız gerektiğinde "CarpimiVer" isimli fonksiyon çalışacak ve içeriğindeki kodlardan gelen 42 değeri alacaktır.
Şimdi de değer döndüren fonksiyonu parametreli olarak inceleyelim:
"FarkAl" isimli fonksiyonun içerisine sayıların farkını alacak eksi operatörünü kullandık ve çok basit bir şekilde "return"
deyimiyle degerini geri döndürdük.Ardından "fark" isimli değişkenin karşısına fonksiyonumuzun adını yazdık ve parametre olarak 5 ile 2 sayılarını yazdık,tahmin edebileceğiniz gibi 5 ve 2 sayıları fonksiyona gidecek ve fonksiyon içerisinde çıkarma işlemi yapıldıktan sonra 5-2=3 sonucu "fark" isimli değişkenimize atanacak.
Gördüğünüz gibi değer döndüren fonksiyonlarda parametre kullanımı gayet kolay bir şekilde yazılabilmektedir.İlerleyen makalelerimizde yeniden bu fonksiyonlarımıza geri döneceğiz.
Son olarak iç içe javascript fonksiyon kullanımını görelim,iç içe fonksiyon kullanımı bir fonksiyon çalışırken içerisinde bir başka fonksiyon kullanım işlemidir.
Örneğin bir sayının karesini geri döndüren fonksiyon yazalım:
Bu fonksiyon kendisine sayı olarak verilecek parametrenin karesini alıyor,şimdi ise bu fonksiyonun döndürdüğü değeri kullanarak ekrana yansıtacak fonksiyonumuzu yazalım:
Fonksiyonlarımızı incelersek "KaresiniGoster" isimli fonksiyonumuzun içerisinde herhangi bir sayı yazmadık ancak sayıyı aynı fonksiyon içerisinde "KaresiniGetir" fonksiyonunu çağırarak "karesi" isimli değişkene atadık ve bu değişkenin değerini alert ile ekrana yansıtıyoruz.
İç içe fonksiyon kullanımı ile ilgili olarak bir başka bilmemiz gereken ise diğer fonksiyonu çağıracak olan ana fonksiyonun parametresini çağırılan fonksiyonun parametresine devredilebilmesidir,aynı örneğimizde "KaresiniGoster" isimli fonksiyona parametre yazalım ve içerideki fonksiyonun 5 olan değerini ana fonksiyonun parametresi olarak verelim:
Görüldüğü gibi ana fonksiyonun "sayi" isimli parametresi,içerisinde çağırdığımız fonksiyonun da parametresi oluyor ve ben buna parametrelerin fonksiyonlar arası devredilebilirliği diyorum :)
Peki iç içe fonksiyon yazdık ve hatta kendi aralarında parametrelerini devrettik,input butonumuza hangi fonksiyonu referans vereceğiz?
Cevabımız tabi ki ana fonksiyonumuz olan "KaresiniGoster" fonksiyonumuz olacak çünkü fonksiyonlar arası çağırılan değil diğer fonksiyonları çağıran fonksiyonumuzu kullanalım ki diğer fonksiyonlar da çalışabilsin:
Böylelikle input içerisindeki 4 sayısı önce "KaresiniGoster" fonksiyonuna gidecek ve oradan da "KaresiniGetir" fonksiyonuna yönlendirilecek.
Javascript fonksiyonları ile ilgili olarak şu anlık aklıma gelenler bu kadarla sınırlı kalıyor,ilerleyen makalelerimizde bu fonksiyonlarımızı tekrar tekrar kullanarak javascript dünyasında ilerlemeye devam edeceğiz.Geri kaçınılmaz son diyebiliriz çünkü javascript'te fonksiyonlar çok sık kullanılır ve fonksiyonsuz javascript düşünemiyorum :)
Bir sonraki makalemizde görüşmek üzere hoşçakalın,esen kalın...