Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace:
tanszek:oktatas:web_technologia_alapjai:js

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:web_technologia_alapjai:js [2025/03/07 10:24] – [Feladat] kissatanszek:oktatas:web_technologia_alapjai:js [2025/03/10 17:50] (current) – kissa
Line 7: Line 7:
 JavaScript kódok beágyazhatóak HTML dokumentumba, a ''<script>'' elem segítségével: JavaScript kódok beágyazhatóak HTML dokumentumba, a ''<script>'' elem segítségével:
  
-<code html>+<sxh html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
Line 24: Line 24:
 </body> </body>
 </html> </html>
-</code>+</sxh>
  
 Ezen kívül külső fájlból is importálhatók: Ezen kívül külső fájlból is importálhatók:
  
-<code html>+<sxh html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
Line 43: Line 43:
 </body> </body>
 </html> </html>
-</code>+</sxh>
  
 ==== Fejlesztői konzol ==== ==== Fejlesztői konzol ====
Line 57: Line 57:
 A ''let'' kulcsszó használata esetén a változó a későbbiekben kaphat más értéket, míg ''const'' kulcsszó esetén az érték később nem változtatható. A ''let'' kulcsszó használata esetén a változó a későbbiekben kaphat más értéket, míg ''const'' kulcsszó esetén az érték később nem változtatható.
  
-<code javascript>+<sxh javascript>
 let x = 10; let x = 10;
  
 const pi = 3.14; const pi = 3.14;
-</code>+</sxh>
  
 ==== Primitív adattípusok ==== ==== Primitív adattípusok ====
Line 72: Line 72:
   * ''undefined'': a változó deklarált, de nem kapott még értéket   * ''undefined'': a változó deklarált, de nem kapott még értéket
  
-<code javascript>+<sxh javascript>
 let name = 'Béla'; // string let name = 'Béla'; // string
 let age = 15; // number let age = 15; // number
Line 78: Line 78:
 let email = null; let email = null;
 let phoneNumber = undefined; let phoneNumber = undefined;
-</code>+</sxh>
  
 ==== Elágazások ==== ==== Elágazások ====
Line 84: Line 84:
 Az elágazások segítségével a program különböző utakon haladhat előre, a megjelölt feltételek teljesülése esetén. Az elágazások segítségével a program különböző utakon haladhat előre, a megjelölt feltételek teljesülése esetén.
  
-<code javascript>+<sxh javascript>
 let age = 20; let age = 20;
  
Line 94: Line 94:
     console.log("Nyugdíjas");     console.log("Nyugdíjas");
 } }
-</code>+</sxh>
  
 ==== Ciklusok ==== ==== Ciklusok ====
Line 100: Line 100:
 A ciklusok lehetővé teszik a kód ismételt végrehajtását, amíg egy adott feltétel teljesül. A ciklusok lehetővé teszik a kód ismételt végrehajtását, amíg egy adott feltétel teljesül.
  
-<code javascript>+<sxh javascript>
 // for ciklus: számok kiíratása 0-4-ig // for ciklus: számok kiíratása 0-4-ig
 for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
Line 115: Line 115:
  
 console.log(factorial); console.log(factorial);
-</code>+</sxh>
  
 ==== Tömbök ==== ==== Tömbök ====
Line 122: Line 122:
 Ezek típusa nem kötött, egy tömb akár többféle adattípussal rendelkező értéket is tárolhat. Ezek típusa nem kötött, egy tömb akár többféle adattípussal rendelkező értéket is tárolhat.
  
-<code javascript>+<sxh javascript>
 const values = [ "red", "green", "blue", 0, 5, true ]; const values = [ "red", "green", "blue", 0, 5, true ];
-</code>+</sxh>
  
 +=== Tömb bejárása ciklusokkal ===
 +
 +== for-in ciklus ==
 +
 +A ''for-in'' ciklus a tömb indexeit járja be:
 +
 +<sxh javascript>
 +for (const index in values) {
 +    console.log(`Index: ${index}, Érték: ${values[index]}`);
 +}
 +</sxh>
 +
 +== for-of ciklus ==
 +
 +A ''for-of'' ciklus közvetlenül a tömb elemeit járja be:
 +
 +<sxh javascript>
 +for (const value of values) {
 +    console.log(`Érték: ${value}`);
 +}
 +</sxh>
 +
 +=== Transzformációs metódusok ===
 +
 +== map metódus ==
 +
 +A ''map'' metódus egy új tömböt hoz létre az eredeti tömb elemeinek módosításával:
 +
 +<sxh javascript>
 +const values = [ 'red', 'green', 'blue' ];
 +const uppercasedValues = values.map(value => value.toUpperCase());
 +console.log(uppercasedValues);
 +</sxh>
 +
 +== filter metódus ==
 +
 +A ''filter'' metódus egy új tömböt hoz létre az eredeti tömb azon elemeiből, amelyek megfelelnek egy feltételnek:
 +
 +<sxh javascript>
 +const numbers = [1, 156, 1499, 142, 111, 42];
 +const evenNumbers = numbers.filter(value => value % 2 == 0);
 +console.log(evenNumbers);
 +</sxh>
 ==== Függvények ==== ==== Függvények ====
  
Line 131: Line 174:
 Lehetnek olyan eljárások, amik csak végrehajtanak egy feladatot, vagy akár olyanok is, amik visszatérési értékkel is rendelkezhetnek. Lehetnek olyan eljárások, amik csak végrehajtanak egy feladatot, vagy akár olyanok is, amik visszatérési értékkel is rendelkezhetnek.
  
-<code javascript>+<sxh javascript>
 function greet(name) { function greet(name) {
     console.log("Hello, " + name + "!");     console.log("Hello, " + name + "!");
Line 143: Line 186:
  
 console.log(square(2)); // 4 console.log(square(2)); // 4
-</code>+</sxh>
  
 ==== Objektumok ==== ==== Objektumok ====
Line 149: Line 192:
 Az objektumok kulcs-érték párokat tárolnak. A kulcsok szövegek (''name'', ''age'', ''male'', ''greet''), míg az értékek valamely primitív (pl. ''number'', ''string'', ''boolean'', ''null'', ''undefined'') vagy összetett (pl. ''Object'', ''Array'', ''Function'') adattípusba tartozhatnak. Az objektumok kulcs-érték párokat tárolnak. A kulcsok szövegek (''name'', ''age'', ''male'', ''greet''), míg az értékek valamely primitív (pl. ''number'', ''string'', ''boolean'', ''null'', ''undefined'') vagy összetett (pl. ''Object'', ''Array'', ''Function'') adattípusba tartozhatnak.
  
-<code javascript>+<sxh javascript>
 let person = { let person = {
     name: "John",     name: "John",
Line 158: Line 201:
     }     }
 }; };
-</code>+</sxh>
  
 ==== Feladat ==== ==== Feladat ====
-Készíts egy JavaScript programot, amely egy **számkitaláló játékot** valósít meg! A program véletlenszerűen generál egy számot 1 és 1 000 000 között, majd a játékos próbálja kitalálni azt. A tippek maximális száma 20. A program minden próbálkozás után visszajelzést ad:+Készíts egy JavaScript programot, amely egy **számkitaláló játékot** valósít meg! A program véletlenszerűen generál egy számot 0 és 1 000 000 között, majd a játékos próbálja kitalálni azt. A tippek maximális száma 20. A program minden próbálkozás után visszajelzést ad:
  
   * **„XY. tipp nem talált: A megoldás kisebb.”**, ha a tipp nagyobb a keresett számnál.   * **„XY. tipp nem talált: A megoldás kisebb.”**, ha a tipp nagyobb a keresett számnál.
   * **„XY. tipp nem talált: A megoldás nagyobb.”**, ha a tipp kisebb a keresett számnál.   * **„XY. tipp nem talált: A megoldás nagyobb.”**, ha a tipp kisebb a keresett számnál.
-  * **„Gratulálok, XY. lépésből eltaláltad!”**, ha a tipp helyes.+  * **„Gratulálok, XY lépésből eltaláltad!”**, ha a tipp helyes.
   * **„Sajnos ez most nem sikerült!”**, ha a játékos elérte a maximális próbálkozások számát, de nem találta el a számot.   * **„Sajnos ez most nem sikerült!”**, ha a játékos elérte a maximális próbálkozások számát, de nem találta el a számot.
  
 A játék akkor ér véget, amikor a játékos eltalálja a számot vagy eléri a tippek maximális számát. A játék akkor ér véget, amikor a játékos eltalálja a számot vagy eléri a tippek maximális számát.
  
-Az üzenetek kiírásához használd az [[https://developer.mozilla.org/en-US/docs/Web/API/Window/alert|alert()]], a tipp bekéréséhez használd a [[https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt|prompt()]] és [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt|parseInt()]] függvényeket. +  * Véletlenszám generáláshoz használd a [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values|Math.random()]] függvényt! 
- +  * Az üzenetek kiírásához használd az [[https://developer.mozilla.org/en-US/docs/Web/API/Window/alert|alert()]], a tipp bekéréséhez a [[https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt|prompt()]] és [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt|parseInt()]] függvényeket. 
-Ellenőrizd, hogy a felhasználó által megadott érték valóban szám-e! Amennyiben nem, a parseInt() függvény NaN (Not a Number) értékkel tér vissza, melyet az [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN|isNaN()]] függvénnyel szűrhetsz ki.+  * Ellenőrizd, hogy a felhasználó által megadott érték valóban szám-e! Amennyiben nem, a parseInt() függvény ''NaN'' (Not a Number) értékkel tér vissza, melyet az [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN|isNaN()]] függvénnyel szűrhetsz ki.
  
 Elkészült megoldásodat töltsd fel a GitHub repository-dba!  Elkészült megoldásodat töltsd fel a GitHub repository-dba! 
tanszek/oktatas/web_technologia_alapjai/js.1741343065.txt.gz · Last modified: 2025/03/07 10:24 by kissa