JAVASCRİPT FONKSİYON KULLANIMI
Fonksiyon, belirli sayıda verileri kullanarak bunları işleyen ve bir sonuç üreten komut grubudur. Her fonksiyonun bir adı ve fonksiyona gelen değerleri gösteren parametreleri (bağımsız değişkenleri) vardır. Her fonksiyonda parametre olması zorunlu değildir. Parametresiz fonksiyonlar, adından da anlaşılacağı gibi herhangi bir parametreye gerek duymadan ve fonksiyonda tanımlanan kodların yerine getirilmesi ile çalışan fonksiyonlardır. Aşağıda ki şekil fonksiyonların çalışma prensibini gösteriyor.
Fonksiyonların genel özellikleri
- Bir amaca hizmet eden program parçacıklarıdır.
- Fonksiyon çalıştırıldığında, bir işlemi yerine getirmesi yada bir değer döndürmesi istenecektir.
- Çağrılmış olan bir fonksiyon ya geriye bir sonuç değeri döndürür ve/veya fonksiyon içerisindeki operasyonlarını işlemlerini tamamlayıp çağrılan yere geri döner.
- Diğer programlama dillerinde metod,prosedür (yordam) v.b isimlendirme ile adlandırılırlar.
- Programcılar, programların yapacağı işi fonksiyonlar vasıtasıyla anlamlı parçalara bölerek programlarının modülerlik kazanmalarını sağlar.
javascript dilinde hazırlanan bir fonksiyonun genel yapısı şöyledir:
function fonksiyon_Adı (parametre1,parametre2,....paremetreN)
{
İŞLEMLER
}
Parametresiz basit bir fonksiyon örnek verelim.
JavaScript:
function mesaj()
{
alert("merhaba javascript dünyası");
}
mesaj(); //fonksiyon çağrılıyor
mesaj(); //fonksiyon çağrılıyor
Yukarıda örnekte mesaj fonksiyonumuz iki kere çağrıldı. Ekrana iki kere mesaj kutusu çıkacak.
fonksiyon çağırma
- Bir olay meydana geldiğinde (Bir kullanıcı bir düğmeye tıkladığında)
- Doğrudan çağrılan fonksiyonlar
- Otomatik (kendi kendine çağrılan)
Not : javaScript büyük harf küçük harf farkına duyarlıdır; Bu yüzden javaScript fonksiyon adları tanımlama ve fonksiyonu çağırırken harflerin büyük ya da küçük oluşuna dikkat etmek gerekiyor.
Parametre ve Argüman Kavramı
Fonksiyon bildiriminde, fonksiyona girdi olarak, kullanılan değişkenlere parametre denir. Argüman ise fonksiyon çağrılırken gönderilen değere(lere) verilen addır. Bunun yanısıra fonksiyonlarda argüman kullanma zorunluluğu yoktur.
// Fonksiyon bildiriliyor
function topla(x,y) // Burada x ve y parametre
{
return (x+y);
}
//Fonksiyon çağrılıyor
t = topla( 7,3 ); // Burada 7 ve 3 argüman
Argümanların giriliş sırası ( 7,3 )'e göre parametre değer sırasıda aynı sırayla görünmesi gerekir. "x=7" atanır ve "y=3" atanır unutmayın.
ÖRNEK:
function okul (ad,sinif)
{
alert ( "Hoşgeldiniz " + ad + "," + sinif );
}
HTML:
<button onclick = "okul('Ali','9A')">buraya tıklayın </button>
<button onclick = "okul('Hasan','8B')">buraya tıklayın </button>
Neden Fonksiyonlar?
Farklı Argümanlar ile aynı kodu birçok kez kullanabilirsiniz, ve farklı sonuçlar elde edersiniz.
ÖRNEK:
HTML:
<p id="demo"> </p>
javaScript:
function derece(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = derece(77);
Yukarıda ki örnekte farklı Fahrenheit girerek farklı Derece, sonuçları elde edilir.
Fonksiyonlar değişken olarak kullanma
Fonksiyonları değişkene atayarak başka javaScript işlemlerinde kullanılır.
ÖRNEK:
var x = derece(32);
Fonksiyonlarda geri dönüş (return)
return anahtar sözcüğünün iki önemli işlevi vardır:
- fonksiyonun geri dönüş değerini oluşturur.
- fonksiyonu sonlandırır.
Bu return deyiminden sonra bir değişken, işlem, sabit veya başka bir fonksiyon yazılabilir. Örneğin:
javaScript:
return (x+y/2); //Parantez kullanmak zorunlu değil
return 20; //Değişken kullanmak mecburu değil
return topla(x,y)/4.0; // Önce topla fonksiyonu çalışır
Bir fonksiyonda birden çok geri dönüş değeri kullanılabilir. Fakat, ilk karşılaşılan return deyiminden sonra fonksiyon sonlananır, ve çağrılan yere bu değer gönderilir. Örneğin aşağıdaki sinif fonksiyonunda beş tane return deyimi kullanılmıştır.
function sinif(not)
{
if( not>=0 && not<50 ) return 'F';
if( not>=50 && not<70 ) return 'D';
if( not>=70 && not<80 ) return 'C';
if( not>=80 && not<90 ) return 'B';
if( not>=90 ) return 'A';
}
var y = sinif(60);
alert(y);
Bu fonksiyon kendisine parametre olarak gelen 0-100 arasındaki bir notun harf karşılığını gönderir. Aslında geri gönderilen değer bir tanedir.
Sayının karesini döndüren fonksiyon hazırlayalım.
javaScript:
function kare(x) {
return x * x;
}
var y = kare(5);
alert("sonuc...:"+y); // çıktı:25
HTML etiketlerin içinden parametreli fonksiyonumuzu çağıralım.
javaScript
function degistir_text (x)
{
x.innerHTML = "Teşekkürler!";
}
HTML:
<h1 onclick = "degistir_text (this)" > metnin üzerine tıklayın</h1>
ÇIKTI:
metnin üzerine tıklayın
HTML etiketlerin içinden fonksiyonumuzu çağıralım.
javaScript:
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
HTML:
<p id="test"><p>
<button onclick="displayDate()">Buraya tıklayın</button>
ÇIKTI:
Barış Sevinç 22/09/2019
yönetici 22/09/2019
Mesut 03/12/2019
Elvan 01/05/2020
yönetici 01/05/2020
Hamza 07/07/2021
yönetici 11/07/2021
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESİM EKLEME
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME