JAVASCRIPT DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
Fonksiyonla javascript'te daha önce yaptığımız örneklerin aksine programı biraz daha harekete geçirecek operasyonlardır. Fonksiyon belirtmek için başına function ifadesini koymamız ve ardından bir de fonksiyon ismini belirtmemiz gerekir. Fonksiyon isimlerini verirken de yine değişken isimlerinde geçerli olan kurallar göz önünde bulundurulabilir (sayı ile başlayamaz, eksi/artı ile başyamaz gibi). Hemen ardından parantez açıp kapatıyoruz. Bu parantezler içerisine ilerde fonksyionun alacağı parametreleri yazabileceğiz. Ama ilk fonksiyonumuz olduğundan şimdilik boş kullanacağız daha basit ve anlaşılır olması açısından. Sonrasında fonksiyonumuzla ilgili komutları yazmak için süslü parantez açıp kapatıyoruz.
<html>
<head>
<script type="text/javascript">
function fonksiyonum () { // Fonksyion oluşturup isim veriyoruz
alert ("Selam Naber?"); // 'Selam Naber?' adında bir uyarı (alert) mesajı yazıyoruz
}
fonksiyonum(); // Fonksiyonumuzu çağırıyoruz
</script>
</head>
<body>
</body>
</html>
Fonksiyonumuzu içerisine bir alert (uyarı) mesajı ekleyerek fonksiyonum isimli fonksiyonumuzu çağırarak .html dosyamıza çift tıklayarak tarayıcı da çalıştırdığımızda bize bir uyarı kutusu gçstermesini sağlıyoruz.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Eğer aynı işlemi bir buton yardımıyla yapmak istersek kodumuzun body kısmına HTML derslerinde öğrendiğimiz şekilde buton ekleyebiliriz ve fonksiyonumuzu bu buton yardımıyla çağırabiliriz. Butonumuza tıkladığımızda yine uyarı mesajının belirmesini sağlayabiliriz;
<html>
<head>
<script type="text/javascript">
function fonksiyonum () { // Fonksyion oluşturup isim veriyoruz
alert ("Selam Naber?"); // 'Selam Naber?' adında bir uyarı (alert) mesajı yazıyoruz
}
</script>
</head>
<body>
<form>
<input type="button" value="Tıklayınız" onclick="fonksiyonum()">
</form>
</body>
</html>
Fonksiyonumuzu buton ile birlikte çalıştırmak için onclick yani basıldığında ne yapmasını istediğimizi belirtmemiz gerekiyor. Bu şekilde butona tıklandığında fonksiyonum isimli fonksiyonumuzu çağırıyoruz yine parantez aç kapat kullanarak.
Geçen derste herhangi bir parametreye sahip olmayan bir fonksiyon oluturmuştuk, bu dersimizde de parametreye sahip fonksiyon oluşturup bunu nasıl kullanabileceğimizi öğreneceğiz. Bunun için fonksiyonumuzu oluşturduktan sonra normal parantezimiz içerisinde bir x parametresi oluşturuyoruz.
<html>
<head>
<script type="text/javascript">
function puan (x) { // Fonksyion oluşturup isim veriyoruz ve bu sefer bir parametre ekliyoruz
document.write("Merhaba! Final Puanınız: " + x); // Ekrana x parametresini yazdır diyoruz
}
puan(85); // Puan fonksiyonumuzu çağırıp bir parametre belirtiyoruz
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
İki parametreli bir fonksiyon oluşturmak istediğimizde aşağıdaki şekilde ilerleyebiliriz.
<html>
<head>
<script type="text/javascript">
function ben (ad, soyad) { // Fonksyion oluşturup bu sefer iki parametre ekliyoruz
document.write(" Merhaba! Adım: " + ad + " Soyadım: " + soyad + "<br/>");
// Ekrana ad soyad parametrelerini yazdır diyoruz.
}
ben("Ali", "Veli"); // ben fonksiyonumuzu çağırıp iki String parametre belirtiyoruz
ben("Ahmet", "Mehmet"); // ben fonksiyonumuzu birden fazla kez çağırabilriz
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Bu dersimizde return komutunu kullanarak başlayacağız. return'ü birşeyin çıktısını almak ya da sonucunu döndürmek için kullanıyoruz. Dikkat edilmesi gereken nokta return bize bir işlem yapar ama sonucunu bize göstermez tek başına. Daha önce gördüğümüz örneklerde olduğu gibi çıktının ekranda görünmesi için yine document.write, alert gibi komutları da kullanmamız gerekecektir.
Örneğimizde yine her zaman olduğu gibi standart html şablonumuzu kullanarak <script> etiketleri arasına kodlarımızı yazıyoruz.
<html>
<head>
<script type="text/javascript">
function returnFonksiyonu (sayi) {
return sayi*sayi;
}
document.write (returnFonksiyonu(10));
</script>
</head>
<body>
</body>
</html>
Örneğimizde returnFonksiyonu diye bir fonksiyon oluşturup, belirleyeceğiniz sayının kendisini kendisiyle çarpmasını söylüyoruz. document.write kullanarak da 10 sayısının kendisini kendisiyle çarpıp sonuç olan 100 sayısını bize ekrana yazdırmasını söylüyoruz.
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Kafanızda bunu return kullanmadan da ekrana yazdırabilirdik gibi bir soru işareti oluşmuş olabilir. Evet bunu yapabilirdik ama return bazı durumlarda bize ara çıktı gibi sonuçlar elde etmek istediğimizde yardımcı olacaktır. Yani bazı fonksiyonlarda tüm değerleri değil de sadece bazı değerlerin çıktısını almak için kullanabilirsiniz.
Şimdiki örneğimizde yeniFonksiyon adında bir fonksiyon oluşturup daha önce oluşturduğumuz returnFonksiyonu ile etkileşime sokup sonucu ekrana bir alert (uyarı) kutucuğu ile yazmasını isteyeceğiz.
<html>
<head>
<script type="text/javascript">
function returnFonksiyonu (sayi) {
return sayi*sayi;
}
function yeniFonksiyon (rakam) {
alert (rakam*rakam*rakam);
}
yeniFonksiyon(returnFonksiyonu(8));
</script>
</head>
<body>
</body>
</html>
İlk olarak returnFonksiyonu içerisindeki işlemi gerçekleştirip 8x8=64 sonucuna ulaşıyoruz. Sonrasında ise yeniFonksiyon içerisindeki işlemi gerçekleştirerek 64x64x64=262144 sonucunu bize ekranda alert kutucuğu içerisinde çıkarıyor. Bu şekilde iki fonksiyonu birbiri içerisinde kullanmış oluyoruz
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Loop (Döngü) fonksiyonlarını birbirini çağıran fonksiyonlar gibi düşünebilirsiniz.
Yine her dersimizde olduğu gibi standart html şablonumuzu kullanıp <script> etiketleri arasında kodlarımızı yazıyoruz. ilkFonksiyon, ikinciFonksiyon ve sonFonksiyon adında 3 adet fonksiyon oluşturup, sonFonksiyon içerisinde ilkFonksiyon ve ikinciFonksiyon'u çağırıyorum. Bu şekilde html dosyanızı çalıştırdığınızda ekrana ilk ve ikinci fonksiyonu yazacağını göreceksiniz.
<html>
<head>
<script type="text/javascript">
function ilkFonksiyon () {
document.write ("İlk Fonksiyon Alanı: ");
}
function ikinciFonksiyon () {
document.write ("İkinci Fonksiyon Alanı: ");
}
function sonFonksiyon () {
ilkFonksiyon();
ikinciFonksiyon();
}
sonFonksiyon();
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Her fonksiyonu birbirini çağıracak şekilde de oluşturabiliriz. Bu noktada aşağıdaki örnekte ilkFonksiyon içerisinde ikinciFonksiyonu, ikinciFonksiyon içerisnde de ilkFonksiyon'u çağırıyoruz. html dosyasını çalıştırdığınızda oluşan döngüden dolayı ekranınızda ilkFonksiyon ve ikinciFonksiyon içeriğinden oluşan sonsuz bir döngü oluştuğunu göreceksiniz.
<html>
<head>
<script type="text/javascript">
function ilkFonksiyon () {
document.write ("İlk Fonksiyon Alanı: ");
ikinciFonksiyon();
}
function ikinciFonksiyon () {
document.write ("İkinci Fonksiyon Alanı: ");
ilkFonksiyon();
}
ilkFonksiyon();
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
Değişik birşey görme açısından fonksiyonlarımızı kaç defa çalıştırdığımızı görmek için yukarıdaki kodumuza bir x değişkeni ekleyelim ve fonksiyonularımıza birer parametre ekliyoruz. Her çalıştırdığımızda bir arttırmak amacıyla da parametrelerimizle + 1 ekleyerek sonuçta fonksiyonlarımızı kaç defa çalıştırdığımızın sonucunu elde edebiliriz.
<html>
<head>
<script type="text/javascript">
var x = 1;
function ilkFonksiyon (defa) {
document.write ("İlk Fonksiyon " + defa + ". defa çalıştırılıyor.");
defa = defa + 1;
ikinciFonksiyon(defa);
}
function ikinciFonksiyon (kez) {
document.write ("İkinci Fonksiyon " + kez + ". kez çalıştırılıyor." );
kez = kez + 1;
ilkFonksiyon(kez);
}
ilkFonksiyon(x);
</script>
</head>
<body>
</body>
</html>
TARAYICI (BROWSER) EKRAN GÖRÜNTÜSÜ:
