Aki elkészült az Állateledeles projekt javításával is, és a Iskolai átlagszámító feladattal is, gyakorolja a javascriptet, mert felelés lesz belőle. A feladatot CSS GRID-el oldjátok meg, abból is fogok kérdezni, ha tanári gépnél.
Készíts javascripttel egy kis alkalmazást, egy jegyzettömböt.
Ebben a feladatban egy egyszerű HTML és JavaScript alapú vacsora foglalási rendszert kell létrehoznod, ahol a felhasználó megadhatja a nevét, kiválaszthat egy éttermet, valamint dönthet különböző szolgáltatások mellett, mint például vacsora típus és extra szolgáltatások. A végén a rendszer kiszámítja a teljes költséget és megjeleníti a foglalás részleteit.
Az eddigiekben számos megoldással ismerkedtünk, hogyan hajthatunk végre különféle műveleteket. A záródolgozat kimeneti követelménye, hogy az alkalmazásnak meg kell felelnie a RESTful API követelményeinek. A következőkben megnézzük, hogy melyek ezek a követelmények, melyet később a gyakorlatba is átültetünk.
A REST API egyértelműen elválasztja a klienst (például egy böngésző,
mobilalkalmazás vagy más API-felhasználó) és a szervert. A szerver nem tárol
kliens oldali állapotokat (stateless), csak válaszokat küld a kliens által
küldött kérésekre. Ez a felépítés biztosítja a feladatok tiszta
szétválasztását.
A RESTful API-k stateless-ek, ami azt jelenti, hogy minden egyes kérésnek
teljesnek kell lennie önmagában. A szerver nem tárolhat kliens oldali adatokat
egyik kéréstől a másikig. Minden kérésnek tartalmaznia kell minden szükséges
információt (pl. hitelesítési adatok, kliens állapot), hogy a szerver
megfelelően válaszolhasson.
A REST API-k az HTTP-t használják, és kihasználják az HTTP-szabvány által
biztosított metódusokat, például:
A RESTful API-kban minden erőforráshoz egy egyedi URL társul. Az URL-eket
úgy kell megtervezni, hogy könnyen érthetők és logikailag szervezettek
legyenek. Például:
Az URL-eknek az erőforrásokra kell utalniuk (pl. contacts, users, orders),
és azonosítókkal lehet konkrét erőforrásokra hivatkozni.
A RESTful API-k használják a HTTP válaszokban megadott állapotkódokat annak
jelzésére, hogy egy kérés sikeres volt-e, vagy hibába ütközött. Példák:
A RESTful API ideális esetben követi a HATEOAS elvet, ami azt jelenti, hogy
a válaszok tartalmaznak további hivatkozásokat más releváns erőforrásokra.
Például egy felhasználó lekérdezésére adott válasz tartalmazhat hivatkozásokat
a felhasználó névjegyeire vagy rendeléseire:
{ "id": 1, "name": "John Doe", "links": [ { "rel": "self", "href": "/users/1" }, { "rel": "contacts", "href": "/users/1/contacts" } ]}
A RESTful API-k általában JSON formátumban adnak vissza
adatokat, mivel ez egy könnyen olvasható és platformfüggetlen formátum. Azonban
XML, YAML vagy más formátumok is használhatók, attól függően, hogy mi szükséges
az alkalmazás szempontjából. A válaszok JSON formátuma például:
{ "id": 1, "name": "John Doe", "email": "john.doe@example.com"}
A RESTful API-k védelméhez HTTPS használata szükséges az
adatok titkosítása érdekében. Az API-k hozzáféréséhez szükség lehet
hitelesítésre, amelyet különféle módszerekkel lehet megvalósítani, például:
A RESTful API-kban a válaszok cache-elhetők, ha az erőforrások nem változnak
gyakran. A megfelelő HTTP cache fejlécek használata biztosítja, hogy a kliens
(pl. böngésző) helyi gyorsítótárából használhatja az adatokat, ami javítja a
teljesítményt és csökkenti a szerver terhelését. Például a Cache-Control fejléc:
Cache-Control: max-age=3600Az API-k folyamatos fejlesztése miatt fontos az API-k verziózása, hogy az új
fejlesztések ne törjék meg a régi implementációkat. Ez többféleképpen
valósítható meg, például az URL-ben:
/v1/contacts/v2/contactsA RESTful API-kban az idempotens műveletek olyan műveletek, amelyek
többszöri végrehajtása ugyanazt az eredményt adja. Például a GET
és DELETE műveletek idempotensek, mert bármennyiszer hajtjuk
végre őket, ugyanaz lesz az eredmény.
Egy REST API-nak tehát a következő elveket kell követnie:
Ha egy alkalmazás megfelel ezeknek a követelményeknek, akkor REST API-nak tekinthető.
Űrlap létrehozásakor, amikor e-mail címet kérünk be érdemes az <input type="email"> elem-et használni, hiszen ez is végez némi alapvető ellenőrzést a böngészőben, amikor az űrlapot elküldjük. Az alapvető ellenőrzés alatt azt értem, hogy azt vizsgálja, az email cím tartalmazza-e a @ karaktert, és utána van-e valamilyen domain név. Nem ellenőrzi azonban a domain végződés hosszát (mint pl. a .com vagy .org), sem a felhasználónév bonyolultságát. Tehát az olyan egyszerű címeket is elfogadhatja, mint például user@domain (bár a valóságban ez egy érvénytelen email cím lenne).
Ha az űrlapot próbálják elküldeni érvénytelen email cím formátummal, a böngésző automatikusan egy figyelmeztetést jelenít meg, általában egy felugró üzenet formájában (pl. "Kérjük, adjon meg egy érvényes email címet"). Ez a figyelmeztetés a böngésző nyelvének megfelelően jelenik meg, tehát automatikusan lokalizált üzeneteket kapunk.
Az olyan HTML5 attribútumok, mint a required, szintén működnek az email mezőknél. Ha hozzáadod ezt az attribútumot, akkor a böngésző nem engedi az űrlap beküldését, ha az email mező üres vagy nem megfelelő formátumú.
Az olyan attribútumok, mint a pattern és a maxlength, további ellenőrzéseket tesznek lehetővé, ha a beépített validáció nem elegendő.
Az <input type="email"> használata különösen hasznos mobil eszközökön, mivel sok mobilböngésző automatikusan egy olyan virtuális billentyűzetet jelenít meg, amely tartalmazza a @ és a pont karaktert, hogy megkönnyítse az email cím bevitelét.
"user+test@domain.com", érvényesnek tekinthetők.Bár a böngésző alapvető ellenőrzést végez, a JavaScriptes validációval pontosabb és testreszabottabb ellenőrzéseket végezhetsz, például:
.com végződések engedélyezése).<input type="email"> használata praktikus, mert alapvető validációt nyújt a böngésző szintjén, de ha összetettebb szabályokat szeretnél alkalmazni, akkor érdemes JavaScript alapú validációt is hozzáadni a pontosabb ellenőrzés érdekében, mint amit itt a példában láthatsz:A let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; sor egy reguláris kifejezés (regex), amelyet arra használunk, hogy egy email cím formátumát ellenőrizzük. Lássuk részletesen, mit jelent ez a kifejezés:
^: A kifejezés elején lévő ^ karakter azt jelenti, hogy a minta az adott sor elejéről kezdődik (tehát nem lehet más karakter az elején).
[a-zA-Z0-9._-]+:
a-z és A-Z), számokat (0-9), valamint a pontot (.), aláhúzást (_), és kötőjelet (-).@: Ez a karakter az email cím kötelező része, amely elválasztja a felhasználónevét és a domain nevet (pl. user@example.com).
[a-zA-Z0-9.-]+:
@ utáni rész. Tartalmazhat kis- és nagybetűket, számokat, pontot (.) és kötőjelet (-).\.: A \. egy speciális karaktert jelöl, itt konkrétan a pontot (.), mivel a reguláris kifejezésben a pont önmagában bármely karaktert jelölne. A \ jel használatával szó szerint a pontot keressük.
[a-zA-Z]{2,6}:
.com, .hu, .net, .info, stb.$: A dollárjel azt jelzi, hogy a minta a sor végére ér (nincs más karakter a végén).
Ez a reguláris kifejezés egy email címet keres, amely megfelel a következő mintának:
@ előtti részben.@ után következik egy domain név, amely kis- és nagybetűket, számokat, pontot és kötőjelet tartalmazhat..com vagy .hu) zárul./^[a-zA-Z]+$/).A test() metódus egy logikai értékkel tér vissza:
test() metódus azt ellenőrzi, hogy a email változó értéke megfelel-e az emailPattern reguláris kifejezésnek.test() true-t ad vissza, és megjelenik a "Érvényes email cím." üzenet.A PHP és AJAX (Asynchronous JavaScript and XML) egy hatékony módszer az aszinkron adatküldésre és -fogadásra, amely lehetővé teszi a weboldalak számára, hogy frissítsék az adatokat anélkül, hogy a teljes oldalt újra kellene tölteni. Ez javítja a felhasználói élményt, mivel a felhasználó valós időben kap visszajelzést, és gyorsabb adatfeldolgozás történik. Az AJAX használatával JavaScript segítségével küldhetsz adatokat egy szerverre (általában PHP-vel), majd a szerver visszaküldi a feldolgozott adatokat anélkül, hogy újratöltené az oldalt.
1. Az AJAX működése:
Az AJAX aszinkron adatküldést és fogadást tesz lehetővé a következő lépések
szerint:
2. AJAX használata JavaScript-ben:
Az AJAX lekérések megvalósítása JavaScript-ben többféle módon történhet. A
két legnépszerűbb módszer a XMLHttpRequest
objektum és a modern fetch()
API használata.
Példa egy egyszerű AJAX kérésre XMLHttpRequest-tel:
// Új XMLHttpRequest objektum létrehozásalet xhr = new XMLHttpRequest(); // A kérés konfigurálásaxhr.open('POST', 'backend.php', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // A kérés elküldése a szerver feléxhr.send('name=John&email=john@example.com'); // A válasz kezelésexhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // A válasz sikeresen megérkezett document.getElementById('result').innerHTML = xhr.responseText; }};Ebben a példában a JavaScript küld egy POST kérést a backend.php felé, amely adatokat dolgoz
fel, majd visszaküldi az eredményt, amely megjelenik az oldalon egy result ID-jú elemen.
A fetch() API egy
modernebb és egyszerűbb módszer az aszinkron kérésekhez.
// fetch() API használata POST kérés küldéséhezfetch('backend.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'name=John&email=john@example.com'}).then(response => response.text()) // A válasz feldolgozása textként.then(data => { document.getElementById('result').innerHTML = data;}).catch(error => console.error('Hiba:', error));A fetch() egyszerűbbé és
olvashatóbbá teszi az aszinkron kéréseket, és támogatja az ígéretek (promises)
használatát is.
A szerveroldali feldolgozáshoz általában PHP-t használunk. A PHP fogadja a
JavaScript által küldött adatokat (GET vagy POST kérés), majd feldolgozza
azokat (például adatbázisba mentés, adatlekérdezés), és visszaad egy választ a
JavaScript számára.
<?php// Adatok fogadásaif ($_SERVER['REQUEST_METHOD'] == 'POST') { $name = $_POST['name']; $email = $_POST['email']; // Adatfeldolgozás (pl. adatbázisba mentés) // ... // Válasz küldése a kliens felé echo "Az Ön neve: $name, email címe: $email";}?>
Ez a PHP kód fogadja a JavaScript által küldött name és email adatokat, majd visszaküldi a feldolgozott eredményt
a kliens oldal felé.
4. Gyakorlati példa PHP és AJAX integrációjára:
<form id="ajaxForm"> <label for="name">Név:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Beküldés</button></form> <div id="result"></div> <script src="app.js"></script>
document.getElementById('ajaxForm').addEventListener('submit', function(e) { e.preventDefault(); // Megakadályozza az űrlap hagyományos elküldését // Az űrlap adatainak összegyűjtése const formData = new FormData(this); // Aszinkron kérés küldése fetch('backend.php', { method: 'POST', body: formData }) .then(response => response.text()) .then(data => { // Az eredmény megjelenítése document.getElementById('result').innerHTML = data; }) .catch(error => console.error('Hiba:', error));});Ez a JavaScript kód megakadályozza az űrlap hagyományos beküldését, majd
AJAX kérést küld a PHP szervernek az űrlap adataival, és megjeleníti az
eredményt.
<?phpif ($_SERVER['REQUEST_METHOD'] == 'POST') { $name = htmlspecialchars($_POST['name']); $email = htmlspecialchars($_POST['email']); // Feldolgozás (pl. adatbázisba mentés) echo "Beküldött név: $name<br>"; echo "Beküldött email: $email";}?>
Ebben a példában a PHP fogadja a JavaScript által beküldött adatokat, és
megjeleníti azokat a böngészőben.
5. Hibakezelés AJAX kérések esetén:
Az AJAX kérések során fontos a hibakezelés is. A PHP hibás válaszai esetén a
JavaScript-ben fel kell készülni a hibák kezelésére, és megfelelő üzeneteket
kell megjeleníteni a felhasználónak.
Például a fetch() API-ban
a hibák kezelésére használhatjuk a .catch()
blokkot, amelyben a hálózati hibákat és más problémákat kezelhetjük:
fetch('backend.php', { method: 'POST', body: formData }).then(response => { if (!response.ok) { throw new Error('Hálózati hiba történt'); } return response.text();}).then(data => { document.getElementById('result').innerHTML = data;}).catch(error => { console.error('Hiba:', error); document.getElementById('result').innerHTML = 'Hiba történt az adatok beküldésekor.';});6. Biztonság AJAX használatakor:
Mivel az AJAX lehetővé teszi az adatokat aszinkron módon, ügyelni kell az adatok
biztonságos kezelésére:
Összefoglalás:
Az AJAX segítségével könnyen küldhetünk és fogadhatunk adatokat
PHP szerverrel anélkül, hogy újratöltenénk az oldalt. Ez a technika javítja a
felhasználói élményt és hatékonyabb adatfeldolgozást tesz lehetővé. A modern
böngészők támogatják az XMLHttpRequest
objektumot és a fetch()
API-t is, amelyekkel egyszerűen küldhetünk és fogadhatunk adatokat. Fontos
azonban a megfelelő biztonsági intézkedések bevezetése a PHP oldalon.
Készítsd el az alábbi feladatot:
Segítség a megoldáshoz:
<select> elemből választhat 3 különböző úti cél közül.Úti célok:
Biztosítás: 100$
Az ES6 (ECMAScript 6) számos újítást hozott a JavaScript nyelvbe, amelyek közül kiemelkednek a nyílfüggvények, a let és const változók, valamint a template literálok. Ezek az újítások könnyebbé, biztonságosabbá és olvashatóbbá teszik a kód írását. Lássuk részletesebben ezeket:
1. Nyílfüggvények
(Arrow Functions)
A nyílfüggvények rövidebb és olvashatóbb módját kínálják a
függvények deklarálásának. A hagyományos function szintaxis helyett egy nyilat
(=>) használunk. Előnyük továbbá, hogy az általuk használt this értéke nem
változik, mindig az adott kontextusra vonatkozik.
Szintaxis:
// Hagyományos függvény
function add(a, b) {
return a +
b;
}
// Nyílfüggvény
const add = (a, b) => a + b;
return és kapcsos
zárójel).return
kulcsszót:const multiply = (a, b) => {
const
result = a * b;
return
result;
};
Ha
a függvénynek egyetlen paramétere van, akkor a zárójeleket is elhagyhatjuk:
const square = x => x * x;
this viselkedése:A nyílfüggvények nem definiálnak saját this
értéket, hanem öröklik azt a környezetből, ahol létrehozták őket. Ez hasznos
lehet például aszinkron kódoknál, ahol a this
értéke változhat a hagyományos függvények esetén.
let és const változókAz ES6-ban a változók definiálására két új kulcsszót vezettek be: let és const.
Ezek a régi var kulcsszót váltják fel,
és számos előnnyel járnak, különösen a hatókör és újraértelmezés kezelésében.
letA let lokális blokk szintű
hatókörrel rendelkezik, vagyis csak abban a blokkban (kapcsos zárójelek között)
érhető el, ahol definiálták. Ez megakadályozza, hogy a kód különböző részeiben
véletlenül újraértelmezzünk egy változót, amely hibákhoz vezethetne.
let x = 10;
if (x > 5) {
let y =
20; // Ez a változó csak az if blokkban létezik
console.log(y); // 20
}
console.log(y); // Hibát dob, mert y nincs a
blokkon kívül
constA const a konstansok
deklarálására szolgál, vagyis olyan változókra, amelyek értéke nem
változtatható meg az inicializálás után. Fontos megjegyezni, hogy ez csak a
primitív értékekre igaz (szám, string, boolean), objektumok vagy tömbök esetén
az objektum tulajdonságai vagy a tömb elemei módosíthatók, de maga az objektum
nem.
const pi = 3.14159;
pi = 3; // Hibát dob, mert pi értéke nem
változtatható
const arr = [1, 2, 3];
arr.push(4); // Ez működik, mert az arr elemei
módosíthatók
A template literálok (más néven template stringek) egyszerűsítik a szövegek
kezelését és összefűzését. Az újfajta idézőjelek (`) segítségével változók és kifejezések közvetlenül
beilleszthetők a szövegbe a ${}
szintaxis segítségével.
const name = 'John';
const age = 30;
const message = `My name is ${name} and I am
${age} years old.`;
console.log(message); // My name is John and I am
30 years old.
A template literálokkal több soros szövegeket is könnyedén lehet kezelni
anélkül, hogy külön karaktereket kellene használni az új sorokhoz.
const multiLineText = `
This is a string
that spans across
multiple lines.
`;
console.log(multiLineText);
this értékét.let és const: blokkszintű hatókört biztosítanak,
így biztonságosabbak, mint a var.
A const változókat nem
lehet újraértékelni, míg a let változók
változtathatóak.Ezek az ES6 szintaxisbeli újítások jelentősen javítják a JavaScript kódolási
élményt és hatékonyságot, ezért elengedhetetlen ismerni őket modern JavaScript
projektek során.
Névtelen függvények olyan függvények, amelyeknek nincs nevük. Általában
akkor használjuk őket, amikor nem szükséges egy függvényt több helyen
újrahasználni. Gyakran találkozhatunk velük helyi változókhoz rendelve vagy
callback függvényként átadva.
const add = function(a, b) { return a + b;};console.log(add(5, 3)); // 8
Ebben a példában egy névtelen függvényt rendeltünk az add változóhoz, majd meghívtuk a
függvényt a változón keresztül. A névtelen függvények nem rendelkeznek saját
nevükkel, ezért csak azon a ponton érhetők el, ahol deklaráltuk őket.
Az arrow function (nyíl
függvény) a JavaScript ES6 verziójával került be a nyelvbe, és a függvények
írásának egy rövidebb, tisztább szintaxisú alternatíváját kínálja. Az arrow
function nemcsak a szintaxisában tér el a hagyományos függvényektől, hanem a
viselkedésében is, különösen ami a this
kontextust illeti.
1.
Rövidebb szintaxis Az
arrow function szintaxisa tömörebb és könnyebben olvasható, különösen akkor, ha
csak egy kifejezést kell visszaadni.
o Hagyományos
függvény:
const multiply = function(a, b) { return a * b;};o Arrow
function:
const multiply = (a, b) => a * b;
Az arrow function esetében a kifejezés
automatikusan visszatérési értékként (return) kerül kiértékelésre, ha nincs
kifejtve a függvénytörzs, és nincs szükség explicit return utasításra.
2.
Kompaktabb egyetlen paraméter esetén
Ha a függvény csak egy paramétert vesz át, akkor a zárójelek elhagyhatók.
const square = x => x * x;console.log(square(5)); // 25
3.
Implicit return Ha a függvénytörzs egy
egyszerű kifejezésből áll, nem szükséges a függvénytestet (görbe zárójeleket)
használni, és a return is
implicit (automatikus).
return használatára:const add = (a, b) => a + b;console.log(add(3, 7)); // 10
4.
Ha több utasítás van a függvénytörzsben, vagy explicit
logikát kell alkalmazni, akkor szükségesek a görbe zárójelek, és ebben az
esetben a return utasítás
már nem lesz implicit.
const addAndLog = (a, b) => { console.log(`Adding ${a} and ${b}`); return a + b;}; console.log(addAndLog(2, 5)); // "Adding 2 and 5", majd 7
5.
Nincs saját this kontextus
Az arrow function egyik legnagyobb különbsége a hagyományos függvényekhez
képest, hogy nem köt saját this kontextust.
A hagyományos függvényekben a this
a függvény meghívásának kontextusától függően változik, de az arrow function a
lexikális környezetéből örökli a this-t.
Ez azt jelenti, hogy az arrow function mindig azt
a this-t fogja használni,
ami a függvényt körülvevő kontextusban volt érvényes. Ez különösen hasznos
lehet például akkor, amikor objektumokon belül hívunk meg függvényeket, vagy
amikor egy callback függvényben szeretnénk használni a this-t.
o Példa:
Hagyományos függvény és this
viselkedése:
function Person() { this.age = 0; setInterval(function() { this.age++; console.log(this.age); }, 1000);} const p = new Person();// A `this` a setInterval-ben a globális objektumra fog mutatni (böngészőben: `window`), nem pedig a Person példányára.
function Person() { this.age = 0; setInterval(() => { this.age++; console.log(this.age); }, 1000);} const p = new Person();// A `this` most már a Person példányára mutat, így az `age` helyesen növekszik.
Mivel az arrow function nem rendelkezik saját this-szel, hanem a külső lexikális
környezetből veszi át, ez megoldja a this
kontextusproblémáját, amely gyakran előfordul aszinkron kódokban.
6.
Nem használható konstruktor függvényként
A hagyományos függvényekkel ellentétben az arrow function-t nem lehet
konstruktor függvényként használni. Ez azt jelenti, hogy nem lehet őket new operátorral példányosítani.
const MyFunction = () => {};const instance = new MyFunction(); // Hiba: Arrow function nem használható konstruktor függvényként
7.
Nincs arguments
objektum A hagyományos függvényekhez hasonlóan az arrow
function nem rendelkezik saját arguments
objektummal. Ha hozzáférésre van szükség a függvény argumentumaihoz, akkor a rest parameters (...args) használata ajánlott.
arguments helyett rest parameters
használatával:const sumAll = (...args) => args.reduce((sum, num) => sum + num, 0); console.log(sumAll(1, 2, 3, 4)); // 10
Az arrow function-ek nagyban egyszerűsítik a JavaScript kódot, különösen
akkor, ha rövid és egyszerű függvényeket kell írni. Azáltal, hogy nem köt saját
this-t, könnyebbé válik az
aszinkron kódok kezelése és a callback függvények kezelése. Fontos azonban
megérteni, hogy az arrow function nem helyettesíti teljesen a hagyományos
függvényeket, mivel bizonyos esetekben (pl. konstruktor függvények írásakor) a
hagyományos függvények továbbra is szükségesek.
A callback függvények olyan függvények, amelyeket egy másik függvény
paraméterként kap meg, és gyakran akkor hívják meg őket, amikor egy adott
esemény megtörténik, vagy amikor egy művelet befejeződik. A JavaScript
aszinkron természetéből adódóan a callback függvények rendkívül fontosak
például API hívások, fájlműveletek vagy egyéb időigényes feladatok kezelése
során.
function processData(data, callback) { console.log("Processing data..."); callback(data);} function logData(data) { console.log("Data:", data);} processData({ name: "John", age: 25 }, logData);
Ebben a példában a logData
függvényt adtuk át a processData
függvénynek callbackként. A processData
függvény az adatfeldolgozás után meghívja a callbacket, és átadja neki az
adatokat.
Az aszinkron műveleteknél a callback-ek különösen hasznosak. Például egy
adatbázis-lekérdezés vagy fájl beolvasása után callbacket használhatunk az
adatok feldolgozására.
setTimeout(() => { console.log("This runs after 2 seconds");}, 2000);Itt a setTimeout egy
aszinkron funkció, amely vár 2 másodpercet, mielőtt meghívja a callback
függvényt.
A JavaScriptben a függvények speciális objektumok. Ez azt jelenti, hogy
ugyanúgy, ahogyan egy objektumnak lehetnek tulajdonságai és metódusai, egy
függvénynek is lehetnek ilyen tulajdonságai. Mivel a függvények objektumok,
átadhatók más változóknak, tárolhatók tömbökben, és visszatérhetnek más
függvényekből is.
function greet() { console.log("Hello!");} greet.language = "English";console.log(greet.language); // English
Itt a greet egy függvény,
amelyhez hozzáadtunk egy language
tulajdonságot. Ez az egyedülálló tulajdonság lehetővé teszi, hogy függvényeket
dinamikusan bővítsünk.
A függvények átadhatók más függvényeknek paraméterként, vissza is adhatók
függvényekből, vagy akár tárolhatók tömbökben vagy objektumokban is.
function createMultiplier(multiplier) { return function(num) { return num * multiplier; };}const double = createMultiplier(2);console.log(double(5)); // 10
Ebben a példában a createMultiplier
egy függvényt ad vissza, amely a megadott számmal szorozza meg a paraméterét. A
függvények ilyen módon való kezelése rendkívül rugalmas lehetőségeket biztosít
a JavaScriptben.
Ez a három függvénytípus különböző helyzetekben és feladatokban rendkívül
hasznos lehet a JavaScript fejlesztés során.
Mi az a callback?
A callback egy függvény, amelyet egy másik függvény paramétereként adunk át. A
callback célja, hogy egy művelet befejezése után további kódot futtassunk.
Callback-eket gyakran használunk aszinkron műveletek, például hálózati kérések
vagy időzített feladatok kezelésére.
Hogyan működik?
Amikor egy aszinkron műveletet végzünk, például egy adat lekérdezést az
API-ból, nem várhatjuk el, hogy azonnal befejeződjön. Ehelyett, amikor az
adatokat betöltöttük, a callback függvény hívódik meg, amely a művelet
befejeződése után fut le.
Példa:
function fetchData(callback) { setTimeout(() => { console.log('Adatok betöltve'); callback(); // Callback meghívása }, 1000); // 1 másodperces késleltetés} function onDataLoaded() { console.log('A callback függvény végrehajtása');} // fetchData hívása a onDataLoaded callback-kelfetchData(onDataLoaded);
Magyarázat:
A fetchData függvény 1
másodpercet vár, majd kiírja, hogy "Adatok betöltve". Ezután meghívja
a callback függvényt, amely
a onDataLoaded-ként lett
átadva, így kiírja, hogy "A callback függvény végrehajtása".
Mi az a Promise?
A Promise egy objektum, amely egy aszinkron művelet jövőbeli eredményét vagy
hibáját képviseli. Három állapota van:
Hogyan működik?
A Promise-t akkor használjuk, amikor egy aszinkron műveletet szeretnénk
végrehajtani és kezelni szeretnénk a sikeres és sikertelen befejeződést is.
Példa:
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // Simulált siker if (success) { console.log('Adatok betöltve'); resolve(); // Promise teljesült } else { reject('Hiba történt'); // Promise elutasítva } }, 1000); });} // fetchData hívása és Promise kezelésefetchData() .then(() => { console.log('A Promise sikeresen teljesült'); }) .catch(error => { console.error('Hiba:', error); });Magyarázat:
A fetchData függvény egy új
Promise-t ad vissza. A setTimeout
után, ha a success érték true, akkor a Promise teljesül, és a .then() blokk fut le. Ha a success érték false, a Promise elutasításra kerül, és
a .catch() blokk fut le.
Mi az az async/await?
Az async és await a Promise-ek egyszerűsített
kezelési módjai. Az async
kulcsszó egy függvényt aszinkronnak jelöl, ami automatikusan egy Promise-t ad
vissza. Az await kulcsszó
pedig várakozik egy Promise teljesülésére, mielőtt tovább lépne a következő
sorra.
Hogyan működik?
Az async funkciók lehetővé
teszik, hogy az aszinkron kódot szinkronnak tűnő módon írjuk, ami olvashatóbbá
és karbantarthatóbbá teszi a kódot.
Példa:
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // Simulált siker if (success) { console.log('Adatok betöltve'); resolve(); // Promise teljesült } else { reject('Hiba történt'); // Promise elutasítva } }, 1000); });} async function loadData() { try { await fetchData(); // Várakozás a fetchData Promise-ra console.log('Az async/await sikeresen teljesült'); } catch (error) { console.error('Hiba:', error); // Hibakezelés }} // loadData hívásaloadData();
A loadData egy async függvény, amely az await kulcsszó segítségével várakozik a fetchData Promise-ra. Ha a Promise
teljesül, a következő sorok futnak le, ellenkező esetben a catch blokk kezelni fogja a hibát.
A feladat célja, hogy készíts egy egyszerű alkalmazást, amely bemutatja az
aszinkron JavaScript különböző módszereit. Az alkalmazásnak egy fiktív
adatfeldolgozó rendszert kell szimulálnia, amely adatokat tölt le egy
szerverről, és az adatokat feldolgozza.
Hozz létre egy js kiterjesztésű fájlt, az ellenőrzéshez, nyiss egy új
terminált, és a „node fájlod neve” paranccsal tudod ellenőrizni az eredményt.
Csak az aktuális mappád legyen megnyitva a vsc-ben.
1. Adatletöltés:
Készíts egy funkciót, amely szimulál egy aszinkron adatletöltést. Az
adatletöltést egy setTimeout-tal
kell szimulálni, amely 2 másodperc után visszaad egy adatobjektumot.
2. Adatok
Feldolgozása Callback-kel: Implementálj egy funkciót, amely a
letöltött adatokat feldolgozza, és az eredményt egy callback függvény
segítségével adja vissza.
3. Adatok
Feldolgozása Promises-szel: Implementálj egy funkciót, amely a
letöltött adatokat feldolgozza, és a Promise API-t használja a feldolgozott
adatok visszaadására.
4. Adatok
Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely az
async/await segítségével dolgozza fel az adatokat.
A feladat
végén az alkalmazás három különböző módon kell, hogy kiírja a feldolgozott
adatokat a konzolra:
A feladat célja, hogy gyakorold az aszinkron JavaScript technikák alkalmazását külső JSON API-val. A JSONPlaceholder API-t fogjuk használni, amely egy ingyenes, fiktív API, és lehetővé teszi, hogy különböző típusú JSON adatokat kérjünk le. A feladat során három különböző módszert fogunk használni az adatok feldolgozására: callback-eket, Promises-t és async/await-et.
Az adatok lekéréséhez használd az alábbi JSONPlaceholder API URL-t: https://jsonplaceholder.typicode.com/users
Külső Adatok Lekérése: Készíts egy JavaScript funkciót, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ról.
Adatok Feldolgozása Callback-kel: Implementálj egy funkciót, amely a lekért adatokat egy callback segítségével dolgozza fel, és a feldolgozott adatokat egy HTML táblázatban jeleníti meg.
Adatok Feldolgozása Promises-szel: Implementálj egy funkciót, amely a lekért adatokat Promises segítségével dolgozza fel, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.
Adatok Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely async/await használatával dolgozza fel az adatokat, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.
HTML és CSS Előkészítése:
JavaScript Implementáció:
fetchUsers függvényt, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ból.processUsersWithCallback függvényt, amely a lekért adatokat callback-kel dolgozza fel.processUsersWithPromise függvényt, amely a lekért adatokat Promises segítségével dolgozza fel..then() metódusában a HTML táblázatban jelenítse meg.processUsersWithAsyncAwait függvényt, amely async/await használatával dolgozza fel az adatokat..then() metódusában a HTML táblázatban jelenítse meg.HTML Táblázat Frissítése:
displayUsers függvényt, amely frissíti a HTML táblázatot a feldolgozott felhasználói adatokkal.Gombok Eseménykezelése:
P – Purpose / Cél Mit akarok elérni? Pontosan mire kérem az AI-t, és mire nem? I – Information / Információ Milyen adatokra, forrásokra...
