onclick eseménykezelő megismeréseMinden feladatnál kövesd az alábbi lépéseket:
Fájlnév: 01_udvozlogomb.html
Készíts egy egyszerű weboldalt, amelyen egy címsor és egy gomb található!
A címsor szövege legyen: Webprogramozás
A gomb felirata legyen: Kattints ide!
Amikor a felhasználó a gombra kattint, jelenjen meg egy felugró üzenetablak a következő szöveggel:
„Üdvözöllek a webprogramozás órán!”
A felugró ablakot a felhasználó az OK gombra kattintva tudja bezárni.
Fájlnév: 02_nevbekeres.html
Készíts egy weboldalt, amelyen egy címsor és egy gomb található!
A címsor szövege legyen: Személyes üdvözlés
A gomb felirata legyen: Üdvözlés
Amikor a felhasználó a gombra kattint, jelenjen meg egy adatbekérő ablak a következő kérdéssel:
„Mi a neved?”
A felhasználó írja be a nevét, majd erősítse meg a bevitelt!
A program ezután jelenítsen meg egy személyre szabott üdvözlést.
Példa:
Ha a felhasználó a Péter nevet adja meg, a megjelenő üzenet legyen:
„Szia, Péter! Örülök, hogy itt vagy!”
A programnak a hiányzó névvel és a megszakított adatbevitellel is megfelelően kell foglalkoznia.
Fájlnév: 03_cimsor-modositasa.html
Készíts egy weboldalt, amelyen egy címsor és egy gomb található!
A címsor kezdeti szövege legyen: Ez az eredeti címsor.
A gomb felirata legyen: Címsor módosítása
Amikor a felhasználó a gombra kattint, a címsor szövege változzon meg a következőre:
A címsor megváltozott!
A módosítás közvetlenül a weboldalon történjen meg. Ehhez ne használj felugró üzenetablakot!
Fájlnév: 04_szoveg-megjelenitese.html
Készíts egy weboldalt, amelyen egy címsor, egy bekezdés és egy gomb található!
A címsor szövege legyen: Szöveg megjelenítése és elrejtése
A bekezdés tartalma legyen:
„Ez a bekezdés egy gomb segítségével elrejthető és megjeleníthető.”
A gomb kezdeti felirata legyen:
Szöveg elrejtése
A gomb megnyomásakor a bekezdés tűnjön el a weboldalról!
Amikor a bekezdés már nem látható, a gomb felirata változzon meg erre: Szöveg megjelenítése
Ha a felhasználó ismét a gombra kattint, a bekezdés jelenjen meg újra, a gomb felirata pedig változzon vissza „Szöveg elrejtése” szövegre.
A gomb tehát mindig az ellenkező műveletet ajánlja fel, mint amit a következő kattintás előtti állapotban végre lehet hajtani.
A láthatóságot a CSS display tulajdonságával szabályozhatod.
A bekezdés elrejtése:
szoveg.style.display = "none";
A bekezdés megjelenítése:
szoveg.style.display = "block";
A gomb feliratát a textContent segítségével változtathatod meg.
Figyelj arra, hogy a bekezdés és a gomb állapota mindig összhangban legyen!
Fájlnév: 05_hatter-szin.html
Készíts egy weboldalt, amelyen egy címsor és három gomb található!
A címsor szövege legyen:
Háttérszín-váltó
A három gomb felirata:
A gombok megnyomásakor a teljes weboldal háttérszíne változzon meg a megfelelő színre.
A három gomb ugyanazt a JavaScript-függvényt használja, de mindegyik más színt adjon át a függvénynek.
A háttérszín módosításához használd a document.body.style.backgroundColor tulajdonságot!
Mindhárom gomb a megfelelő színnel hívja meg ugyanazt a függvényt!
Fájlnév: 06_kattintasszamlalo.html
Készíts egy egyszerű kattintásszámláló weboldalt!
Az oldalon jelenjen meg egy címsor: Kattintásszámláló
A címsor alatt egy szöveg mutassa a kattintások aktuális számát. A számláló kezdeti értéke legyen 0.
A számláló alatt helyezz el egy gombot a következő felirattal: Növelés
Minden alkalommal, amikor a felhasználó a gombra kattint, a számláló értéke növekedjen eggyel.
A megváltozott érték azonnal jelenjen meg a weboldalon, anélkül, hogy az oldalt újra kellene tölteni.
Fájlnév: 07_szamlalo-vezerles.html
Fejleszd tovább az előző feladatban elkészített kattintásszámlálót!
Most egy olyan számlálót kell készítened, amelynek értékét három különböző gombbal módosíthatjuk.
Az oldalon jelenjen meg egy címsor: Számláló
A címsor alatt látható legyen az aktuális érték. A számláló kezdeti értéke továbbra is 0 legyen.
Helyezz el három gombot:
Minden gomb megnyomása után frissüljön a weboldalon megjelenő érték!
Fájlnév: 08_paros-vagy-paratlan.html
Készíts egy weboldalt, amely megállapítja egy egész számról, hogy páros vagy páratlan.
Az oldalon jelenjen meg egy címsor: Páros vagy páratlan?
A címsor alatt helyezz el egy beviteli mezőt a következő felirattal: Adj meg egy egész számot:
A beviteli mező mellett vagy alatt legyen egy gomb: Ellenőrzés
A felhasználó írjon be egy egész számot, majd kattintson a gombra!
A program vizsgálja meg a megadott számot, és jelenítse meg az eredményt a weboldalon.
Ha a szám páros, az eredmény legyen: A szám páros.
Ha a szám páratlan, az eredmény legyen: A szám páratlan.
Ha a felhasználó nem adott meg értéket, jelenjen meg egy figyelmeztetés.
Ha a megadott érték nem biztonságosan ábrázolható egész szám, vagy nem egész szám, a program kérjen megfelelő bemenetet.
A párosság vizsgálatához a maradékos osztás operátorát, vagyis a % jelet használjuk.
A beviteli mező értékét a .value tulajdonsággal kérheted le.
Fontos, hogy a beviteli mező értéke szövegként érkezik, ezért a számítás előtt számmá kell alakítani. Erre használható a Number():
const szam = Number(szoveg);
Az egész szám ellenőrzéséhez:
Number.isSafeInteger(szam)
Ez azt vizsgálja, hogy az érték biztonságosan ábrázolható egész szám-e a JavaScriptben.
Fájlnév: 09_szam-elojele.html
Készíts egy weboldalt, amely egy megadott szám előjelét vizsgálja meg.
Az oldalon jelenjen meg a következő címsor: Szám előjelének vizsgálata
A címsor alatt helyezz el egy beviteli mezőt a következő felirattal: Adj meg egy számot:
A mező mellett vagy alatt legyen egy gomb: Vizsgálat
A felhasználó írjon be egy számot, majd kattintson a gombra!
A program határozza meg, hogy a megadott szám pozitív, negatív vagy nulla.
Az eredményt a weboldalon jelenítsd meg.
A szám érvényességének ellenőrzéséhez használd a következőt:
Number.isFinite(szam)
Ez a metódus akkor ad true értéket, ha a megadott érték véges szám.
Fontos: Az üres beviteli mezőt még a Number() használata előtt ellenőrizd! Az üres szöveg számmá alakítva 0 értéket eredményezhet, így ellenőrzés nélkül a program tévesen nullának tekintheti az üresen hagyott mezőt.
Fájlnév: 10_osszeado.html
Készíts egy egyszerű összeadó programot!
Az oldalon jelenjen meg a következő címsor: Egyszerű összeadó
A címsor alatt helyezz el két beviteli mezőt.
Az első mező felirata legyen: Első szám:
A második mező felirata legyen: Második szám:
A beviteli mezők alatt helyezz el egy gombot: Összeadás
A felhasználó írjon be két számot, majd kattintson a gombra!
A program adja össze a két számot, és az eredményt jelenítse meg a weboldalon.
A megoldás egész és tizedes számokkal egyaránt működjön, és a negatív számokat is kezelje.
Ha a felhasználó valamelyik mezőt üresen hagyja, a program jelezze, hogy mindkét mezőt ki kell tölteni.
Ha elkészültél az alapfeladatokkal, próbáld meg továbbfejleszteni a programokat!
Egészítsd ki a kattintásszámlálót egy új gombbal, amelynek felirata „Csökkentés”!
A gomb csökkentse eggyel a számláló értékét, de az érték ne lehessen negatív.
Módosítsd a számlálóprogramot úgy, hogy az érték ne lehessen nagyobb 10-nél!
Ha a számláló eléri a 10 értéket, a növelőgomb ne növelje tovább az értéket!
Bővítsd a páros vagy páratlan programot úgy, hogy a felhasználó egymás után több számot is ellenőrizhessen anélkül, hogy újra meg kellene nyitnia az oldalt!
Egészítsd ki a szám előjelét vizsgáló programot úgy, hogy az eredmény színe is változzon!
Fejleszd tovább az összeadó programot úgy, hogy négy alapműveletet tudjon elvégezni:
Az osztásnál figyelj arra, hogy nullával ne lehessen osztani!