Javascriptte Fonksiyonlar
Fonksiyonlar, functions
Değer Döndürmeyen Fonksiyonlar
JavaScript’te Bir Fonksiyonu Tanımlamak
Fonsiyonlar Birden Fazla isi yada görevi yerine getirebilen olaylar dizisidir
Basit Bir Fonsiyon Olusturmak icin Su kodlar gereklidir;
<script language="javascript">
<
function kontrol() {
var örnek1 = "örnek1"
var örnek2 = "örnek2"
}
//>
</script>
<
function kontrol() {
var örnek1 = "örnek1"
var örnek2 = "örnek2"
}
//>
</script>
NOT: kontrol fuction’un ismi Parantez icinde ise Genellikle Sonradan Tanımlamıs Oldugumuz Degiskenler vardır…
Fonksiyona değer atama ve değer alma
Bir fonksiyon, yaptığı işin sonucu olarak, kendisini göreve çağıran komuta veya fonksiyona bir değer verebilir.
ÖRNEK FUNCTION 1 TOPLAMA CIKARMA
<script language="javascript">
//fonsiyon olustururuz ve ekleriz
function topla(sayi1, sayi2){
var c = sayi1+sayi2;
document.write(" - Sayı Toplamı - "+c);
}
function cıkar(sayi1, sayi2){
var c = sayi1-sayi2;
document.write(" - Sayı Çıkarma - "+c);
}
var a = 7;
var b = 3;
topla(a,b);
cıkar(a,b);
</script>
//fonsiyon olustururuz ve ekleriz
function topla(sayi1, sayi2){
var c = sayi1+sayi2;
document.write(" - Sayı Toplamı - "+c);
}
function cıkar(sayi1, sayi2){
var c = sayi1-sayi2;
document.write(" - Sayı Çıkarma - "+c);
}
var a = 7;
var b = 3;
topla(a,b);
cıkar(a,b);
</script>
ÖRNEK FUNTION ÖRNEK 2 TEXTBOX'a YAZDIRMA
<html>
<head>
<title>JavaScript Tutorial</title>
<Script Language="JavaScript">
function isimsoyad(){
var isim, soyad, hepsi;
isim = document.FormYazdırma.ilkisim.value;//formdan ve textbox ın name'ini alır
soyad = document.FormYazdırma.sonisim.value;//formdan ve textbox ın name'ini alır
hepsi = isim + " " + soyad;
document.FormYazdırma.birlestir.value = hepsi;//formdan ve textbox ın name'ini alır
}
</Script>
<body>
<font face="Verdana, Tahoma, Arial" size="3">
<form name="FormYazdırma">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">isim:</td>
<td><input type="text" name="ilkisim" size="14"></td>
</tr>
<tr>
<td width="100">soyisim:</td>
<td><input type="text" name="sonisim" size="14"></td>
</tr>
<tr>
<td width="100">Birlestir:</td>
<td><input type="text" name="birlestir" size="30"></td>
</tr>
<tr>
<td width="100"><br><br></td>
<td>
<input type="button" value="Birlestir" onClick="isimsoyad()">
</td>
</tr>
</table>
</form>
</font></head>
</body>
</html>
<head>
<title>JavaScript Tutorial</title>
<Script Language="JavaScript">
function isimsoyad(){
var isim, soyad, hepsi;
isim = document.FormYazdırma.ilkisim.value;//formdan ve textbox ın name'ini alır
soyad = document.FormYazdırma.sonisim.value;//formdan ve textbox ın name'ini alır
hepsi = isim + " " + soyad;
document.FormYazdırma.birlestir.value = hepsi;//formdan ve textbox ın name'ini alır
}
</Script>
<body>
<font face="Verdana, Tahoma, Arial" size="3">
<form name="FormYazdırma">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">isim:</td>
<td><input type="text" name="ilkisim" size="14"></td>
</tr>
<tr>
<td width="100">soyisim:</td>
<td><input type="text" name="sonisim" size="14"></td>
</tr>
<tr>
<td width="100">Birlestir:</td>
<td><input type="text" name="birlestir" size="30"></td>
</tr>
<tr>
<td width="100"><br><br></td>
<td>
<input type="button" value="Birlestir" onClick="isimsoyad()">
</td>
</tr>
</table>
</form>
</font></head>
</body>
</html>
Örnek
function TamAd(Gelen) { //firstName = firstName ?? "Aykut"; //lastName = lastName ?? "Dulkadir"; return Gelen.adi + " " + Gelen.soyadi + " " + (Gelen.Adres ?? "büyükçekmece"); } const Veri = {soyadi:"dulkadir", Adres:"hebele hübele", adi:"aykut"};document.write(TamAd(Veri));
Değer Döndüren Fonksiyonlar
Return Kullanımı
Bu ifade , bir değeri döndürmek için function ifadesiyle birlikte kullanılır.
Bir fonksiyon içinde return ifadesinin kullanımı isteğe bağlıdır. Çünkü javascript fonksiyonlarının hepsi belli bir değeri döndürmez
Kullanımı;
Örnek
<script Language="JavaScript">
function DikdortgenAlan(uzunluk, yukseklik){
var Alan;
Alan = uzunluk * yukseklik;
return Alan;
}
function displayAlan(){
var l, h, alan;
l = 20;
h = 2;
alan = DikdortgenAlan(l, h);
document.write("ALAN = ", alan);
}
</Script>
<Script Language="JavaScript">
displayAlan();
</Script>
function DikdortgenAlan(uzunluk, yukseklik){
var Alan;
Alan = uzunluk * yukseklik;
return Alan;
}
function displayAlan(){
var l, h, alan;
l = 20;
h = 2;
alan = DikdortgenAlan(l, h);
document.write("ALAN = ", alan);
}
</Script>
<Script Language="JavaScript">
displayAlan();
</Script>
ÖrneK
<html>
<head></head>
<title>Fonksiyonlar</title>
<body>
<script language="javascript">
<
function kontrol() {
var hata1 = "Öneren İsim Girilmedi"
var hata2 = "Öneren Mail Girilmedi"
if ( document.olesine.onerenisim.value=="") {
alert(hata1);
return false;
}
if ( document.olesine.onerenmail.value=="") {
alert(hata2);
return false;
}
return true;
}
//>
</script>
<form method="post" name="olesine" onsubmit="return kontrol();"action="?git=1">
Isminiz: <input type="text" name="onerenisim">
E-post adresiniz: <input type="text" name="onerenmail">
<input type="submit" value="gonder" name="gondersubmit">
</form>
</body>
</html>
<head></head>
<title>Fonksiyonlar</title>
<body>
<script language="javascript">
<
function kontrol() {
var hata1 = "Öneren İsim Girilmedi"
var hata2 = "Öneren Mail Girilmedi"
if ( document.olesine.onerenisim.value=="") {
alert(hata1);
return false;
}
if ( document.olesine.onerenmail.value=="") {
alert(hata2);
return false;
}
return true;
}
//>
</script>
<form method="post" name="olesine" onsubmit="return kontrol();"action="?git=1">
Isminiz: <input type="text" name="onerenisim">
E-post adresiniz: <input type="text" name="onerenmail">
<input type="submit" value="gonder" name="gondersubmit">
</form>
</body>
</html>
Örnek
<script>
function fullName(firstName="Aykut", lastName="Dulkadir") {
//firstName = firstName ?? "Aykut";
//lastName = lastName ?? "Dulkadir";
return firstName + " " + lastName;
}
let name = fullName("Kaya", "Enes");
document.getElementById("demo").innerHTML = "The name is " + name;
</script>
Örnek
<script>
function Fiyatlar(Fiyat) {
//return;
let FiyatTipleri = {Kdv:Fiyat*0.18, Otv:Fiyat*0.40, Indirim:Fiyat*0.50};
return FiyatTipleri;
}
let FiyatListesi = Fiyatlar(80);
document.write("<br>Kdv " + FiyatListesi.Kdv + "<br>Ötv " + FiyatListesi.Otv + "<br>İndirim " + FiyatListesi.Indirim);
</script>
Örnek
<script> let shapeObject = { geometri: "daire", resim: "1000_F_45481569_9pSvUWXde83qEmEXqHztj71EwQVfo1ao.jpg", en: "50px", boy: "50px", sayi: 10, renk: "red", maxPos: 500, minPos: 0 } function geometrisiniCiz(shapeObjectElement){ for(let i = 0; i < shapeObjectElement.sayi ?? 20; i++){ let newElement = document.createElement("img"); shapeObjectElement.geometri = shapeObjectElement.geometri ?? kare; if(shapeObjectElement.geometri === "daire"){ newElement.style.borderRadius = "100vw"; } else{ newElement.style.borderRadius = "0px"; } newElement.src = shapeObjectElement.resim ?? "1000_F_45481569_9pSvUWXde83qEmEXqHztj71EwQVfo1ao.jpg"; newElement.style.width = shapeObjectElement.en ?? "20px"; newElement.style.height = shapeObjectElement.boy ?? "30px"; newElement.style.backgroundColor = shapeObjectElement.renk ?? "red"; newElement.style.position = "absolute"; newElement.style.top = Math.round(Math.random() * (shapeObjectElement.maxPos - shapeObjectElement.minPos) + shapeObjectElement.minPos) + "px" ?? "50px"; newElement.style.left =Math.round(Math.random() * (shapeObjectElement.maxPos - shapeObjectElement.minPos) + shapeObjectElement.minPos) + "px" ?? "50px"; document.body.appendChild(newElement); } } geometrisiniCiz(shapeObject); </script>
İLKER ERUCAR
