JAVASCRIPT
Fonksiyonlar (Functions)
Javascriptin sözdizimini kavrayip ciddi program yapmak üzere devam etmeden önce fonksiyonlari anlamaniz gereklidir. Fonksiyonlar bütün programlama lisanlarinda vardir. Fonksiyonlari her seferinde tekrar tekrar kod yazmaya gerek olmadan çagrilabilen programlar olarak düsünün. Fonksiyonlar pencerenin içinde gerçeklesen olaylar tarafindan icra edilirler.
Herzaman oldugu gibi simdi de pratik olmayan ama ögretici bir örnekle baslayalim ;-)) . Kullaniciya nasil oldugunu soran bir script yazalim. Eger cevap olumlu olursa, "Tebrikler", olumsuz ise neselenmesini ögütleyen bir alert-box çiksin. Önceden tahmin edebileceginiz gibi, biraz kod yazmak gerekli. Simdi siz bu scriptin sayfanizin 4 ayri noktasindan erisilebilir olmasini istiyorsunuz. Sanirim bir defa kodu yazip, 3 defa da kes-yapistir yapmaktan daha pratik bir yol sizi hayli memnun edecektir. Iste söyle:
<script language="JavaScript">
<!--
function hatir_sor() {
question_for_mood = prompt("Nasilsiniz?","iyi veya berbat");
if (question_for_mood == "iyi") {
alert('Oh oh sevidim, iyiyim diyen biri çikti!');
} else {
alert('Memlekette iyiyim diyen kaldimi acaba!');
}
}
// -->
</script>
Kirmizi ile yazili olanlar yeni ögrenecegimiz fonksiyonlardir. Geri kalanini anlatmaya gerek oldugunu sanmiyorum. Simdi neden fonksiyon yarattigima gelelim. Bir fonksiyona herhangi bir zamanda, sayfanin herhangi bir noktasindan ulasabilirsiniz (fonsiyonun önceden yüklendigini farzedersek). Ayrica ne siklikta kullanmaniz gerektiginde hiç bir kisitlama da yoktur (en azindan saniyede 1000 kerelik bir döngüye sokup kullanicinin CPUsunu çökertmediyseniz). Her lazim oldugunda bir fonksiyonu kes yapistir yapacaginiza, bir sefer <HEAD> etiketlerinin arasina yerlestirin ve tamam. Ek bir avantaj, ilerde scripti degistirmek istediginizde, teker teker her koydugunuz yerde degistireceginize, yalniz <HEAD> etiketleri arasindaki kodu degistinizmi tamamdir. Simdi fonksiyonlarin özelliklerine bakalim. Önce, genel "görünüm":
function name() {
// Kod buraya yazilir
}
Her fonksiyonun bir isme ve ismin sonunda 2 tane () ihtiyaci vardir. 2 () sayasinde scripte parametreler geçirilir. Bu konuda, ilerde daha da açiklayici notlar yazariz. Fonksiyonun içinde kod 2 tane {} parantez tarafindan sarilir. Sanirim simdi vurgulamanin tam zamani, daha önce yazdigimiz bir çok kodun aksine, bir fonksiyon okundugu zaman icra edilmez, sadece disardan tetiklenince icra edilir.
Simdilik fonksiyonlarin nasil yaratildigini biliyoruz, birde nasil çagiracagimizi görelim..
Çagirma fonksiyonu iki sekilde olabilir:
<A> etiketini kullanarak <a href="javascript:hatir_sor()" >Hatir sormak için tiklayin</a>
yada olaylari (event) kullanarak:
<img src="resim.gif" onMouseOver="hatir_sor()" >
Sanirim çok karisik görünmüyor, degil mi? Simdiden fonksiyonu nasil yaratacaginizi ve erisebileceginizi ögrendiniz. Ama fonksiyonlar hakkinda bir sey daha var: Fonksiyonun isminin sonundaki parantezlere dikkat ettiniz mi? Hatirlarsaniz önceki derslerde metodlarla ugrasirken parantezlerin içine metodlarin nasil olmasi gerektigi hakkinda bilgiler yazmistik. Simdi fonksiyonlarda ise parametreler o parantezlerin içine yerlestirilir. Parametreler ise, fonksiyonlar icra edilmeye baslandiginda degisken olarak kabul edilirler. Böylece hatir_sor(berbat) diye bir fonksiyon asagidaki gibi kodlanir ve soruyu atlayabilirsiniz!
<script language="JavaScript">
<!--
function hatir_sor( hatirsorusu ) {
if ( hatirsorusu == "iyi") {
alert('Oh oh sevidim, iyiyim diyen biri çikti!');
} else {
alert('Memlekette iyiyim diyen kaldimi acaba!');
}
}
// -->
</script>
Gördügünüz gibi, fonksiyon hatirsorusu degiskenine bir parametre atar.
Fakat bu teknigin amaci nedir? Söyle düsünelim, siz ziyaretçiye HTML ile bir soru soarsiniz ve opsiyon olarak 2 tane link verirsiniz. Bir "iyi" digeri "berbat" der. Ziyaretçiye bir kez daha sormanin bir anlami yoktur aktik degil mi? böylece direkt olarak "iyi" veya "berbat" degiskenin degerini atayabilirsiniz. Bu kodu bir fonksiyona indirir ki diger çözümde 3 tane yazmak gerekir (biri soru sormak için, biri "iyi" biride "berbat" linkleri için) aynen asagidaki gibi:
Tetikleyici:
fonksiyon_adi(parameter)
Fonksiyon:
function fonksiyon_adi(parametreyi_saklamak_için_degisken) {
}
Sirasi gelmisken, bir fonksiyona birkaç parametre atayabilirsiniz: :
Tetikleyici:
fonksiyon_adi(parameter,parameter2)
Fonksiyon:
function fonksiyon_adi(degisken_parameter1,degisken_parameter2) {
}
Fonksiyonlar için bu kadar yeter.
Bugün yaptiklarimizi özetlersek:
- Javascript sözdiziminin son halkasi: Fonksiyonlar
- Parametresiz fonksiyonlar
- Bir parametreli fonksiyonlar
- Birkaç parametreli fonksiyonlar
|
EgLeNCe