Javascript Fonksiyon Oluşturma
Hepinize merhaba dostlarım :) bu yazımda javascript programlama dilinde fonksiyon oluşturmayı ve oluştruğumuz fonksiyonları kullanmayı öğreneceğiz :). Önceki yazımda ekrana bastırma komutlarından olan alert() aslında javascriptin bize sunduğu ekrana yazı yazdırmak için kullanılan bir fonksiyondur. Bunun gibi fonksiyonlar nasıl oluşturulur diye merak ediyorsanız doğru yerdesiniz dostlarım :). Sözü daha fazla uzatmadan yavaştan başlayalım ama önce mantıksal bir tanım yapalım diyorum :)
Fonksiyon Nedir ?
Dostlarım mantıksal bir tanımlama ile fonksiyona giriş yapalım istedim. Fonksiyonun genel amacı birden fazla yerde kullanılacak kod parçaları olsun veya işlemler olsun bunları düşünsenize her sayfada uzun uzun yazmak ne kadar zorlar :). Hadi yazdınız diyelim güncelleme yaptığınızda 100 sayfanız varsa 100 tane güncelleme yapacaksınız :). İşte fonksiyonlar size bu kısımda çok yardımcı olur dostlarım :). Dediğim gibi 100 tane yerde kullanmak yerine bir yerde tanımlayın ve her yerde paşalar gibi kullanın :). Dostlarım şimdi fonksiyonlara genel olarak bakacak olursak bunlar 3 başlıkta incelenir. Bunlar:
- Parametresiz Çalışan Fonksiyonlar
- Parametreli Çalışan Fonksiyonlar
- Geri Değer Döndüren Fonksiyonlar
1-) Parametresiz Çalışan Fonksiyonlar
Dostlarım gelin fonksiyonlara parametresiz fonksiyonlar ile başlayalım :). Parametresiz fonksiyonlar içerisine hiçbir fonksiyon almadan çalışırlar. Örneğin siteye gelen kullanıcıları selamlamak veya <p></p> etiketleri içerisinde mesaj göstermek için parametresiz fonksiyon oluşturabilirsiniz. Gelin bir örnek yapalım
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<h1 id="karsila">
</h1>
<script>
function selamla(){
document.getElementById("karsila").innerHTML = "MFSoftware Blog";
}
selamla();
</script>
</body>
</html>
<!--
EKRAN ÇIKTISI: <h1></h1> etiketlerinin arasına "MFSoftware Blog" yazacaktır
-->
Evet dostlarım genel kullanımı bu şekildedir. Gelin sizinle bir örnek yapalım dostlarım. Sitede 2 input olsun ve iki inputa 0 ile 10 arasında rastgele değer atayalım. Sonra bu değerleri toplasın ve ekrana bastırsın. Bunun kodlamasını hızlı şekilde yapalım dostlarım
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<input id="sayi1" />
<br>
<input id="sayi2" />
<script>
function parametresiz_fonk_ornek(){
$("#sayi1").val(Math.floor(Math.random()*11));
$("#sayi2").val(Math.floor(Math.random()*11));
var s1 , s2,toplam;
s1 = parseInt($("#sayi1").val());
s2 = parseInt($("#sayi2").val());
toplam = s1 + s2;
alert(toplam);
}
parametresiz_fonk_ornek(); // fonksiyon parametre almıyor :) çağırdığımız an çalışıyor
</script>
</body>
</html>
<!--
sayi1 isimli inputa 0 - 10 arasında değer atadı
sayı2 isimli inputa 0 - 10 arasında değer atadı
daha sonra bu değerleri integer olarak dönüştürüp değişkenlere atadı
alert ile bu iki değerin toplamını yazdırınca ekranın üst ortasında mesaj çıkacaktır :)
-->
2-) Parametreli Fonksiyonlar
Dostlarım parametreli fonksiyonlar parametresiz fonksiyonların aksine parantez içerisine bir string veya integer artık siz hangisini belirtmişseniz onu almadan çalışmaz :) Hata verir sürekli. Gelin bununla da bir örnek göstereyim
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<script>
function selamla(isim){
alert("Merhaba "+isim);
}
selamla("MFSoftware Blog");
</script>
</body>
</html>
<!--
selamla() fonksiyonunun içerisine "MFSoftware Blog" yazdık dostlarım :). Bunu yazmasak parametre
isteyecektir ve hata mesajını döndürecektir bize :)
-->
Şimdi dostlarım gelin sizinle parametreli ve parametresiz olarak iki fonksiyon kulllanarak dik üçgenin alanını hesaplayan bir program yazalım. Site açılır açılmaz parametresiz fonksiyon çalışacak ve inputlara 1 ile 10 arasında rastgele değer atasın. Daha sonra değerleri alıp parametreli fonksiyona gönderelim :). O fonksiyonda işlemleri yapıp alert() ile ekrana bastırmasını sağlayalım
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<input id="sayi1" />
<br>
<input id="sayi2" />
<script>
function parametreli_fonk(sayi1,sayi2){
var sonuc = (sayi1*sayi2)/2;
alert(sonuc);
}
function parametresiz_fonk(){
$("#sayi1").val(Math.floor(Math.random()*10)+1);
$("#sayi2").val(Math.floor(Math.random()*10)+1);
var s1 , s2;
s1 = parseInt($("#sayi1").val());
s2 = parseInt($("#sayi2").val());
parametreli_fonk(s1,s2);
}
parametresiz_fonk();
</script>
</body>
</html>
evet dostlarım kodda dikkat ettiyseniz önce parametresiz fonksiyonu çalıştırdık. Inputlar içerisine rastgele değerler attık ve bu değerleri bir değişkene aldık. Daha sonra bu değerleri parametreli_fonk() fonksiyonuna parametre olarak gönderdik. Dik üçgen formülünden (taban*yukselik)/2 ile hesaplamasını yaptırdık ve alert() fonksiyonu ile ekrana bastırılmasını sağladık :). Zor bir şey yok dostlarım sadece bol pratik ve bol istikrar lazım :). Bunları sizin yaptığınıza da eminim dostlarım :). Gelelim bir diğer fonksiyonumuz olan geri değer döndüren fonksiyonlara :)
3-) Geri Değer Döndüren Fonksiyonlar
Dostlarım yukarıda gördüğümüz fonksiyonlar parametresiz fonksiyonlardır. Yani içerisinde return ifadesi yok. Şimdiki göreceğimiz geri değer döndüren fonksiyonlar parametreli de olsa parametresiz de olsa içerisinde return ifadesi olduğu için geri değer döndüren fonksiyon olarak geçer. Yalnız önemli bir notum var size
NOT: return komutundan sonra yazdığımız kodlar işleme alınmaz. Çünkü return ile geriye değer döndürülmüş artık o fonksiyonun yapacağı iş bitmiştir demektir :). Gelin hızlı bir örnekle buna da bakalım. Site açıldığı anda input içerisine veri yazdıralım
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<input id="sayi1"/>
<script>
function parametresiz_return(){
return 15;
}
function start(){
$("#sayi1").val(parametresiz_return());
}
start();
</script>
</body>
</html>
Dostlarım kodu incelerseniz parametresiz ve geriye değer göndürmeyen fonksiyon içerisinde parametresiz ve geri değer döndüren fonksiyonu çağırdık. parametresiz ve geri değer döndüren method içerisinde de gerekli işlemleri yaptırdık ve return ettik :). Biraz karmaşık gelebilir anlıyorum her programcı aynı yollardan geçti dostlarım :) Tek yapacağınız şey pratik :). Şimdi gelelim örneğimize :)
Bir input ve bir buton oluşturalım dostlarım. İnput içerisine sayı girelim ve bu sayının tek mi çift mi olduğunu geri değer döndüren fonksiyonla <p></p> etiketi içerisine yazdıralım :)
<!DOCTYPE html>
<html lang="tr">
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<title>Javascript Fonksiyon Oluşturma | MFSoftware Blog</title>
</head>
<body>
<input type="number" id="sayi1"/>
<br>
<button type="button" id="kontrol">Kontrol</button>
<br>
<p id="sonuc"></p>
<script>
function analiz(sayi){
if(sayi%2==0){
return "Sayı Çift";
}else{
return "Sayı Tek";
}
}
$("#kontrol").click(function(){
var sayi = parseInt($("#sayi1").val());
document.getElementById("sonuc").innerHTML = analiz(sayi);
});
</script>
</body>
</html>
Evet dostlarım kodlarımız bunlar. İnput içerisine sayı girdiğinizde ve butona bastığınızda mod alma işleminden geçecek ve bölümden kalan 1 ise "Sayı Tek" , 0 ise "Sayı Çift" yazacaktır :). Umarım faydalı olmuşumdur. Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi Çalışmalar :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer