A függvények a JavaScript egyik legfontosabb elemei, amelyek lehetővé teszik, hogy egy adott kódrészletet többször újrahasználjunk a programunkban. A függvények segítségével moduláris, tisztán felépített és könnyen karbantartható kódot írhatunk.
Függvények Definiálása
Egy függvényt a function
kulcsszóval hozunk létre. A függvényeknek lehetnek paraméterei, amelyek
bemenetként szolgálnak, és egy függvény visszatérhet egy értékkel, amelyet a return utasítással adunk meg.
Függvény szintaxisa:
function functionName(parameter1, parameter2) { // Kódrészlet, amelyet a függvény végrehajt let result = parameter1 + parameter2; return result; // Visszatérési érték}- functionName:
A függvény neve, amelyet használunk a hívásához.
- parameter1,
parameter2: A függvény bemeneti paraméterei. Ezek
opcionálisak, és tetszőleges számú lehet belőlük.
- return
result: A függvény visszatérési értéke. Ez az érték az,
amit a függvény visszaad a hívás helyén.
Függvény hívása
A függvény meghívásakor a függvény nevére hivatkozunk, és átadjuk a
szükséges paramétereket.
let sum = functionName(5, 10);console.log(sum); // 15
Paraméterek Kezelése
A paraméterek azok az értékek, amelyeket a függvény a híváskor fogad. Ezeket
a függvényen belül változóként használhatjuk. Ha egy függvény több paramétert
is fogad, azokat vesszővel választjuk el.
Példa:
javascript
Kód másolása
function multiply(a, b) { return a * b;}let product = multiply(4, 5);console.log(product); // 20
Visszatérési Érték
A függvények visszaadhatnak egy értéket a return
kulcsszó segítségével. A visszatérési érték lehet egy egyszerű adat (pl. szám,
string), de lehet egy komplex objektum is.
Példa:
function greet(name) { return "Hello, " + name + "!";} let greeting = greet("Anna");console.log(greeting); // "Hello, Anna!"
Példa: Függvények használata a gyakorlatban
Feladat:
Készíts egy HTML oldalt, amely bemutatja a függvények különböző
felhasználási módjait. Hozz létre egy egyszerű számológépet, amely összead,
kivon, szoroz és oszt két számot, valamint egy üdvözlő függvényt, amely egy név
alapján személyre szabott üzenetet ad vissza. Másold be az alábbi kódot és
egészítsd ki:
<!DOCTYPE html><html lang="hu"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Függvények Példák</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .output { margin-top: 20px; } .section { margin-bottom: 40px; } .section h2 { color: #007BFF; } </style></head><body> <h1>Függvények Példák - JavaScript</h1> <div class="section"> <h2>Számológép Függvények</h2> <p>Adj meg két számot, majd kattints az egyik gombra a művelet végrehajtásához.</p> <input type="number" id="num1" placeholder="Első szám"> <input type="number" id="num2" placeholder="Második szám"> <button onclick="calculate('add')">Összeadás</button> <button onclick="calculate('subtract')">Kivonás</button> <button onclick="calculate('multiply')">Szorzás</button> <button onclick="calculate('divide')">Osztás</button> <div id="calcOutput" class="output"></div> </div> <div class="section"> <h2>Üdvözlő Függvény</h2> <input type="text" id="name" placeholder="Név"> <button onclick="greetUser()">Üdvözlés</button> <div id="greetOutput" class="output"></div> </div> <script> // Függvény a műveletekhez // Függvény az üdvözléshez </script></body></html>
Feladatleírás:
- Számológép
függvények: Hozz létre egy függvényt, amely két számot
fogad paraméterként, és elvégzi rajtuk az alapvető aritmetikai műveleteket
(összeadás, kivonás, szorzás, osztás). A függvény adja vissza az
eredményt, amelyet jeleníts meg a HTML oldalon.
- Üdvözlő
függvény: Írj egy függvényt, amely egy név paramétert
fogad, és visszaad egy üdvözlő üzenetet. Hívd meg ezt a függvényt, és a
visszatérési értéket jelenítsd meg a HTML oldalon, amikor a felhasználó
beír egy nevet és rákattint az "Üdvözlés" gombra.
Ez a feladat segít megérteni a függvények alapjait, a paraméterek kezelését,
valamint a visszatérési értékek használatát.
Nincsenek megjegyzések:
Megjegyzés küldése