12 év web - 3. JavaScript Műveletek: Aritmetikai, Logikai és Relációs Operátorok

 JavaScript-ben különböző típusú operátorok állnak rendelkezésre, amelyek segítségével műveleteket végezhetünk. Ezek közé tartoznak az aritmetikai, logikai és relációs operátorok. Az alábbiakban bemutatjuk ezen operátorok használatát és funkcióikat.

3.1 Aritmetikai Operátorok

Az aritmetikai operátorok segítségével matematikai műveleteket végezhetünk. A leggyakoribb aritmetikai operátorok a következők:

• Összeadás (+): Két szám összeadására szolgál.
• Kivonás (-): Két szám kivonására szolgál.
• Szorzás (*): Két szám szorzására szolgál.
• Osztás (/): Két szám osztására szolgál.
• Maradék (%): Az osztás maradékát adja vissza.

Példa:

let a = 20;

let b = 10;

let sum = a + b; // 30

let difference = a - b; // 10

let product = a * b; // 200

let quotient = a / b; // 2

let remainder = a % b; // 0

3.2 Logikai Operátorok

A logikai operátorok a logikai értékekkel (true vagy false) végzett műveletekre szolgálnak. A legfontosabb logikai operátorok:

• ÉS (&&): Az operátor akkor ad vissza true értéket, ha mindkét operandus true.
• VAGY (||): Az operátor akkor ad vissza true értéket, ha legalább az egyik operandus true.
• NEGÁCIÓ (!): Az operátor inverz értéket ad, azaz true-t alakít false-ra és fordítva.

Példa:

let x = true;

let y = false;

let andOperation = x && y; // false

let orOperation = x || y; // true

let notOperation = !x; // false

3.3 Relációs Operátorok

A relációs operátorok a változók vagy értékek közötti összehasonlítást teszik lehetővé. Az alábbi relációs operátorok állnak rendelkezésre:

• Egyenlőség (===): Ellenőrzi, hogy két operandus értéke egyenlő-e és az adattípusuk is megegyezik.
• Nem egyenlőség (!==): Ellenőrzi, hogy két operandus értéke és/vagy adattípusa eltér-e.
• Nagyobb, mint (>): Ellenőrzi, hogy az első operandus nagyobb-e a másodiknál.
• Kisebb, mint (<): Ellenőrzi, hogy az első operandus kisebb-e a másodiknál.
• Nagyobb vagy egyenlő (>=): Ellenőrzi, hogy az első operandus nagyobb vagy egyenlő-e a másodiknál.
• Kisebb vagy egyenlő (<=): Ellenőrzi, hogy az első operandus kisebb vagy egyenlő-e a másodiknál.

Példa:

let a = 20;

let b = 10;

let isEqual = a === b; // false

let isNotEqual = a !== b; // true

let isGreaterThan = a > b; // true

let isLessThan = a < b; // false

let isGreaterOrEqual = a >= b; // true

let isLessOrEqual = a <= b; // false

Készítsd el az alábbi weboldalt:

1.) Feladat Leírása

1.     HTML és JavaScript Előkészítése:

• Hozz létre egy új HTML fájlt index.html néven.
• Az HTML fájlban készítsd elő a szükséges elemeket a JavaScript eredmények megjelenítéséhez.

2.     HTML Struktúra Létrehozása:

• Készíts egy HTML oldalt, amely tartalmaz egy div elemet az azonosítóval output. Ebben a div-ben fog megjelenni a JavaScript kód által generált eredmény.

3.     JavaScript Kód Megírása:

• Használj JavaScript-et az alábbi műveletek elvégzésére:
• Aritmetikai Műveletek: Add hozzá, vond ki, szorozd meg és oszd el az a és b változókat. Számold ki a maradékot is.
• Logikai Műveletek: Használj true és false értékeket, és végezz el logikai AND, OR, és NOT műveleteket.
• Relációs Műveletek: Használj összehasonlító operátorokat az a és b változók között (pl. egyenlőség, nagyobb, kisebb).

4.     Eredmények Megjelenítése:

• A JavaScript kódot úgy írd meg, hogy a műveletek eredményeit a HTML dokumentumban, az output azonosítójú div-ben jelenítse meg.

Minta: 

2.) Feladat: Bevásárlólista Kalkulátor

Feladat Leírása:

1. HTML és JavaScript Előkészítése:

   • Hozz létre egy új HTML fájlt index.html néven.
   • Az HTML fájlban készítsd elő a szükséges elemeket a JavaScript eredmények megjelenítéséhez.

2. HTML Struktúra Létrehozása:

   • Készíts egy egyszerű bevásárlólistát, ahol 3 termék ára és darabszáma jelenik meg.
   • Adj hozzá egy gombot "Kalkulálás" felirattal, amelyre kattintva a JavaScript elvégzi a számításokat.
   • Készíts egy div elemet, azonosítóval output, ahová a műveletek eredményei kerülnek megjelenítésre.

3. JavaScript Kód Megírása:

   • Definiáld a termékek árait és darabszámát JavaScript-ben (pl. egy kenyér ára 300 Ft, tejet 200 Ft-ért lehet venni, stb.).
   • A JavaScript kód segítségével számold ki a végösszeget aritmetikai műveletekkel (összeadás, szorzás).
   • Végezz el logikai műveleteket:
     • Ellenőrizd, hogy a bevásárlólista összértéke meghaladja-e az 1000 Ft-ot (logikai művelet).
     • Ha a lista értéke 500 Ft alatt van, jelezd, hogy "Még valamit kell vásárolnod" (logikai művelet).
     • Ha az összeg 500 Ft és 1000 Ft között van, jelezd, hogy "Majdnem megvan az 1000 Ft!" (relációs operátor).
     • Ha az összeg meghaladja az 1000 Ft-ot, írd ki, hogy "Megtetted a nagybevásárlást!".
   • Relációs operátorokkal hasonlítsd össze a termékek árait:
     • Melyik termék a legdrágább, melyik a legolcsóbb?

4. Eredmények Megjelenítése:

• Az eredményeket a output div-be jelenítsd meg, például így:
• "Az összes bevásárlási költséged: 1200 Ft."
• "Megtetted a nagybevásárlást!"
• "A kenyér a legdrágább termék, a tej a legolcsóbb."

Minta:

3.) Feladat: Bevásárlólista Kalkulátor (Felhasználói Bemenettel)

Feladat Leírása:

1. HTML Struktúra Létrehozása:

   • Készíts egy űrlapot, ahol a felhasználó megadhatja a termékek árait és darabszámát.
   • Hozz létre egy gombot "Kalkulálás" felirattal, amelyre kattintva a JavaScript elvégzi a számításokat.
   • Készíts egy div elemet, azonosítóval output, ahová a műveletek eredményei kerülnek megjelenítésre.

2. JavaScript Kód Megírása:

   • A felhasználótól kérd be a kenyér, tej és alma árait és darabszámát.
   • Számold ki a bevásárlás összértékét, és használd az aritmetikai, logikai, relációs műveleteket az eredmények megjelenítéséhez.
   • Jelezd, ha a vásárlás összege meghaladja az 10000 Ft-ot, vagy ha még nincs meg az 5000 Ft.

3. Eredmények Megjelenítése:

   • Az eredményeket a output div-be jelenítsd meg.