A függvények adják a programok vázát. Két részből áll a függvények létrehozása: definíció (maga a függvény) megírása és a függvény behívása a megfelelő helyen (ahol használni szeretnénk). Általános szerkezet:
// fuggveny letrehozasa parameterek nelkul
function fuggvenyNeve1() {
// fuggveny definicioja
}
// fuggveny letrehozasa parameterekkel
function fuggvenyNeve2(parameter1, parameter2) {
// fuggveny definicioja a parameterek hasznalatavals
}
// az elso fuggveny behivasa
fuggvenyNeve1();
// a masodik fuggveny behivasa
var param1 = 1.0;
var param2 = 2.0;
fuggvenyNeve2(param1, param2);
A függvények használatának bemutatása
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function elsoFuggveny() {
document.write("Fuggveny ");
}
elsoFuggveny();
elsoFuggveny();
</script>
</body>
</html>
Látható, hogy a függvények annyiszor hajtódnak végre, ahányszor behívjuk őket. Ez adja felhasználásuk értelmét: többször használandó, jól elkülöníthető részfolyamatokat (algoritumusokat) implementálunk függvényekben.
Egy függvényt bárhol lehet definiálni a script részen belül, de meghívni csak a függvény definiálása után lehet, akár másik script részből is. Lássunk erre egy példát:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
// Ez a szoveg nem fog megjeleni, mert a 'szovegKiiras' fuggveny meg nincs definialva
szovegKiiras("Hivas a definicio elott");
</script>
<script type="text/javascript">
function szovegKiiras(text) {
document.write(text+"<br/>");
}
szovegKiiras("Hivas a definicio utan egyazon scriptben");
</script>
<script type="text/javascript">
szovegKiiras("Hivas a definicio utan masik scriptben");
</script>
</body>
</html>
Természetesen akárhány függvény definiálható és ezek akárhányszor behívhatók:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function elsofuggveny(text) {
document.write("Első függvény: "text+"<br/>");
}
function masodikfuggveny(text) {
document.write("Második függvény: "text+"<br/>");
}
function harmadikfuggveny(text) {
document.write("Harmadik függvény: "text+"<br/>");
}
elsofuggveny("Hello");
harmadikfuggveny("Szép szöveg");
harmadikfuggveny("Még szebb szöveg");
masodikfuggveny("Legszebb szöveg");
</script>
</body>
</html>
Az is természetes, hogy egy függvény másik függvényből is hívahtó:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function nagybetusSzoveg(text) {
document.write("nagybetűs szöveg: "+text.toUpperCase()+"<br/>");
}
function kisbetusSzoveg(text) {
document.write("kisbetűs szöveg: "+text.toLowerCase()+"<br/>");
}
function foFuggveny(text) {
document.write("eredeti szöveg: "+text+"<br/>");
nagybetusSzoveg(text);
kisbetusSzoveg(text);
}
foFuggveny("Ez egy mondat!");
</script>
</body>
</html>
A függvények túlterhelése azt jelenti, hogy egy azon függvénynév többször van definiálva (implementálva), de más paraméter készlettel rendelkeznek az egyes definíciók. A függvény behívásakor a fordító a paraméter lista alapján dönti el, hogy melyik függvény defíniót kell behívni. A javascript nem támogatja a függvények túlterhelését, azaz egy függvénynév csak egyszer definiálható a kódban. Példa a HIBÁS függvény használatra:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
// ket fuggveny tulterhelse, ugyanaz a nev, de mas parameter lista
// HIBAS: csak az egyik fuggveny implemetalhato
function Osszaadas(a, b, c) {
var osszeg = a+ b + c;
document.write("Három tag összege: "+osszeg);
}
function Osszaadas(a,b) {
var osszeg = a+ b;
document.write("Két tag összege: "+osszeg);
}
var a = 3;
var b = 2;
Osszaadas(a,b);
var c = 4;
Osszeadas(a,b,c);
</script>
</body>
</html>
Láttuk, hogy bár a függvényekben definiált lokális változók a függvényen kivül is használhatóak, de ennek elkerülése végett a függvények rendelkezhetnek visszatérő értékkel, amit visszaadnak a a függvény hívásakor. Pl két szám összege:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function Osszaadas(a,b) {
return a+b;
}
function Szorzat(a,b) {
var result = a*b;
return result;
}
var a = 3;
var b = 2;
var osszeg = Osszaadas(a,b);
var szorzat = Szorzat(a,b)
document.write("osszeg = "+osszeg+" szorzat = "+szorzat);
</script>
</body>
</html>
A return utasítás után a függvény rögtön visszatér a hívófélhez, így az után lévő utasítások már nem hajtódnak végre:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function Osszaadas(a,b) {
return a+b;
document.write("Csomo mindent lehet irni ide, ugyse fog latszodni futas kozben");
document.write("Ahogy ez sem");
}
var a = 3;
var b = 2;
document.write("osszeg = "+Osszaadas(a,b));
</script>
</body>
</html>
Rekurzió definiciója: lásd rekurzió definiciójánál.
Rekurzió az, amikor egy függvényt önmagát hívja meg. VIGYÁZAT: végtelen ciklus generálható! Legegyszerűbb példa a visszaszámlálás:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function visszaszamolas(number) {
if (number == 0) {
document.write(number);
} else {
document.write(number+"<br>");
visszaszamolas(number-1);
}
}
visszaszamolas(6);
</script>
</body>
</html>
Másik egyszerű példa a faktoriális kiszámítása:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function factorial(number) {
if (number <= 0) { // terminal case
return 1;
} else { // block to execute
return (number * factorial(number - 1));
}
}
document.write(factorial(6));
</script>
</body>
</html>
Magukat a függvény definicíókat is el lehet menti változókba és azokat a változókat használhatjuk később, mint függvények:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
var fvvaltozo = function(text) {
document.write(text);
}
document.write(fvvaltozo+"<br>");
fvvaltozo("hello");
</script>
</body>
</html>
Egy függvény lehet egy másik függvény visszatérési érkére (akár csak egy változó), de a visszatérő függvény tartalmazhat egy paramétert, ami a külső függvény paramétere:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function nagyobbMint(n){
return function(m) {return m > n;};
}
var nagyobbMint10 = nagyobbMint(10);
var nagyobbMint20 = nagyobbMint(20);
document.write(nagyobbMint10(11)+"<br>");
document.write(nagyobbMint20(11)+"<br>");
</script>
</body>
</html>
Hasonló módon szám hozzáadása listaelemekhez:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function novelMeg(n){
return function(array) {
for(var i = 0; i < array.length; i++)
array[i] += n;
return array;
};
}
var novelMeg10 = novelMeg(10);
var novelMeg20 = novelMeg(20);
var tomb1 = [1,2,3,4,5];
document.write(tomb1+"<br>");
document.write(novelMeg10(tomb1)+"<br>");
document.write(novelMeg20(tomb1)+"<br>");
</script>
</body>
</html>
Láttuk korábban, hogy a javascript nem veszi túl komolyan a lokális változók kezelését: ha egy változó a kódban már definiálva van kapcsos zárójelen belül, akkor a változó használható a kapcsos zárójelen kívül is. De VIGYÁZZ! Bár ez igaz a függvényre is, de csak akkor, ha a függvény meg lett hívva. Ezért megint csak azt tanácsolom: kapcsos zárójelben definiált változókat ne akarjunk a kapcsos zárójelen kívül használni!!
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
// Futtasi hibat okoz, mert nincs definialva a 'valtozo', ki kell kommentelni
document.write("valtozo erteke eloszor: "+valtozo);
function valtozoErtekadas() {
valtozo = 12;
}
// Futtasi hibat okoz, mert nincs definialva a 'valtozo' hiaba van 'fentebb' definialva, ki kell kommentelni
document.write("valtozo erteke masodszor: "+valtozo);
valtozoErtekadas();
// itt mar kiirodik a 'valtozo' helyes erteke
document.write("valtozo erteke harmadszor: "+valtozo);
</script>
</body>
</html>
Út a teljes összeomláshoz:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
function Fuggveny1() {
var haveup = false;
var havelow = false;
var havelink = false;
var aminoindex = 1;
var iup, ilow;
var b, c, f;
b = c = a = f = 2;
}
function Fuggveny2() {
var haveup = false;
var havelow = false;
var havelink = false;
var aminoindex = 1;
var iup, ilow;
var b, c, f;
b = c = f = 2;
}
function Fuggveny3() {
var haveup = false;
var havelow = false;
var havelink = false;
var aminoindex = 1;
var iup, ilow;
var b, c, f;
b = c = f = 2;
}
</script>
<script type="text/javascript">
var a = 1;
Fuggveny1();
Fuggveny2();
Fuggveny3();
document.write("a erteke = "+a);
</script>
</body>
</html>
Egy másik példa:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
var message = "global";
function fv1() {
var message = "lokal";
document.write("fv1: "+message+"<br>");
}
function fv2() {
document.write("fv2: "+message+"<br>");
}
fv1();
fv2();
</script>
</body>
</html>
A this parancs az adott objektum tulajdonságait (változóit) tartalmazza. Arra kell vigyázni, hogy mindig tudnunk kell, hogy a this éppen milyen objektumra utal. A függvények önmaguktól még nem objektumok!
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
var message = "global";
function fv1() {
document.write("fv1: "+message+"<br>");
}
function fv2() {
this.message ="lokal";
document.write("fv2: "+this.message+"<br>");
}
function fv3() {
document.write("fv3: "+message+"<br>");
}
function fv4() {
document.write("fv4: "+this.message+"<br>");
}
fv1();
fv2();
fv3();
fv4();
</script>
</body>
</html>
Ahogy előbb látuk, a this mindig a teljes weboldal objektumára utalt. Hogyen érhető el, hogy egy függvény objektum legyen és rendelkezzen saját this hatáskörrel? Ehhez kell használni a new parancsot, ami egy objektumot hoz létre:
<html>
<head>
<title>Az elso fuggvenyunk</title>
</head>
<body>
<script type="text/javascript">
var message = "global";
function fv1() {
document.write("fv1: "+message+"<br>");
};
function fv2() {
this.message ="lokal";
document.write("fv2: "+this.message+"<br>");
};
function fv3() {
document.write("fv3: "+message+"<br>");
};
function fv4() {
document.write("fv4: "+this.message+"<br>");
};
function fv5(text) {
this.message = text;
document.write("fv5: "+this.message+"<br>");
};
function fv6() {
document.write("fv6: "+this.message+"<br>");
};
fv1();
fv2();
fv3();
fv4();
// objektum letrehozasa
var fvobjektum = new fv5("most adom");
fv6();
</script>
</body>
</html>