JavaSzkript definiálása és függvények hívása példával
James Hartman
⚡ Okos összefoglaló
JavaA szkriptfüggvények újrafelhasználható kódblokkokat csoportosítanak, amelyek csak meghívásra futnak, és ez az útmutató bemutatja, hogyan deklarálhatunk egyet, hogyan adhatunk át argumentumokat neki, és hogyan adhatunk vissza egy értéket a hívónak.
Miben található a funkció JavaForgatókönyv?
A függvények nagyon fontosak és hasznosak bármilyen programozási nyelvben, mivel újrafelhasználhatóvá teszik a kódot. A függvény egy olyan kódblokk, amely csak akkor hajtódik végre, ha meghívják. Ha van néhány sornyi kódod, amelyet többször is fel kell használni, létrehozhatsz egy függvényt, amely tartalmazza az ismétlődő kódsorokat, majd a függvényt bárhol meghívhatod.
A zárójelek között semmi sem fut önmagában. A böngésző a blokkot a megadott néven tárolja, és a kód csak akkor fut le, ha a név után zárójelek vannak, például myFunction()A funkciók tehát mindennek a középpontjában állnak. JavaForgatókönyv program, hogy a szkript él-e az oldalon belül vagy egy külső fájlban.
Hogyan hozzunk létre függvényt a JavaForgatókönyv
- Használja a kulcsszót funkció ezt követi a függvény neve.
- A függvény neve után nyissa meg és zárja be a zárójeleket.
- A zárójel után nyissa ki és zárja be a göndör zárójelet.
- A kapcsos zárójelek közé írja be a kódsorokat.
Syntax:
function functionname()
{
lines of code to be executed
}
Az alábbi példa definiálja myFunction() majd a következő sorban meghívja, így az üzenet azonnal megjelenik, amint az oldal betöltődik. Próbáld ki ezt magad:
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction()
{
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
Funkció érvekkel
Argumentumokkal rendelkező függvényeket is létrehozhatsz. Az argumentumokat zárójelben kell megadni.
Syntax:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Itt countVowels() fogadja a látogató által a promptba beírt nevet, végigmegy az egyes karaktereken, és kiírja, hogy hány magánhangzót tartalmaz a név. Próbáld ki ezt te is:
<html>
<head>
<script type="text/javascript">
var count = 0;
function countVowels(name)
{
for (var i=0;i<name.length;i++)
{
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
count = count + 1;
}
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
}
var myName = prompt("Please enter your name");
countVowels(myName);
</script>
</head>
<body>
</body>
</html>
JavaScript visszatérési értéke
Létrehozhat olyan JS-függvényeket is, amelyek értékeket adnak vissza. A függvényen belül a kulcsszót kell használni visszatérés ezt követi a visszaadandó érték.
Syntax:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
Ebben az utolsó példában returnSum() visszaadja az összeget a meghívott sornak, így az eredmény egy mondatba foglalható ahelyett, hogy a függvényen belül lenne kiírva. Próbáld ki ezt magad is:
<html>
<head>
<script type="text/javascript">
function returnSum(first, second)
{
var sum = first + second;
return sum;
}
var firstNo = 78;
var secondNo = 22;
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
</script>
</head>
<body>
</body>
</html>
Függvénytípusok a JavaForgatókönyv
A fenti három példa mind a klasszikus függvénydeklarációt használja, mégis modern JavaA Script számos más formát is kínál. Ezek főként abban különböznek, hogy a motor emeli-e fel őket, és abban, hogy mindegyik hogyan kezeli a this kulcsszó.
| Függvénytípus | Tipikus szintaxis | Amikor használják |
|---|---|---|
| Funkciónyilatkozat | függvény üdvözlet() { } | Nevezett, újrafelhasználható logika; a hatókörének csúcsára emelve |
| Függvénykifejezés | const köszönt = függvény () { }; | Függvény tárolása változóban; nem hoisted |
| Nyílfüggvény (ES6) | const köszönt = () => { }; | Rövid visszahívások; ezt a környező hatókörből örökli |
| Névtelen függvény | setTimeout(függvény() { }, 100); | Egyszeri logika átadva egy másik függvénynek |
| IIFE | (függvény () { })(); | Azonnal lefut, és a változóit privátként kezeli. |
| Visszahívás | items.forEach(mutasdElemet); | Egy másik függvénynek átadott és később meghívott függvény |
Megjegyzés a fenti példákhoz: a történelmi minták felhasználása var és a document.write(), és mindkettő továbbra is minden böngészőben fut. A jelenlegi gyakorlatban a változókat a következőképpen deklaráljuk: let or const és kinyomtatja a kimenetet a következőn keresztül: console.log() vagy beállítással textContent egy elemen, mert document.write() törli a már betöltött oldalt. type="text/javascript" Az attribútum a HTML5-ben szintén opcionális.
Függvényparaméterek, argumentumok és alapértelmezett értékek
A paraméterek a definícióban felsorolt helyőrző nevek, míg az argumentumok a függvény meghívásakor megadott valós értékek. countVowels(name) felett, name a paraméter, a promptba beírt szöveg pedig az argumentum.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- Egy argumentum nélküli paraméter a következő lesz:
undefinedkivéve, ha alapértelmezett értéket adunk meg,greetingitt. - A paraméterlista figyelmen kívül hagyja a plusz argumentumokat, de elérhetőek maradnak a
argumentsobjektum bármely nem nyíl függvényen belül. - Egy pihenési paraméter, amely így van megírva:
...valuesminden fennmaradó érvet egy valódi sor.
Funkciókör és emelés JavaForgatókönyv
Egy függvény megírásának helye határozza meg, hogy mit láthat és mikor hívható meg. Két szabály magyarázza meg szinte az összes meglepetést, amivel a kezdők találkoznak.
- Emelés: A függvénydeklarációk a szkript futása előtt a hatókörük elejére kerülnek, így meghívhatók a definíciójuk feletti sorban. A függvénykifejezések és a nyílfüggvények nem kerülnek fel a hatókörükbe, és hibát dobnak, ha korán hívják meg őket.
- Hatály: változók deklarálása
varegy függvényen belül láthatók a függvényben, mígletés aconstarra a blokkra korlátozódnak, amelyben helyezkednek el. Bármi, amit a függvényeken kívül deklarálunk, globális.
A magánhangzó-számláló ezt a gyakorlatban is mutatja. count változót a függvényen kívül deklaráljuk, így a hívás countVowels() ugyanazon az oldalon másodszor is folytatja az előző összeg hozzáadását a nulláról való újrakezdés helyett. A deklaráció függvényen belüli áthelyezése minden híváskor visszaállítaná azt.
Ezek az scoping A szabályok a szerveroldali kódra is átvihetők, ezért ugyanaz az érvelés érvényesül, amikor függvényeket írunk node.js, és miért jelenik meg olyan gyakran a függvények viselkedése a JavaForgatókönyv interjúkérdések.
