Fájlnév: 11_szamologep.html
Készíts egy egyszerű, böngészőben működő számológépet!
A weboldal tetején jelenjen meg a következő címsor: Egyszerű számológép
A címsor alatt helyezz el két számbeviteli 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 négy gomb jelenjen meg:
A felhasználó írjon be két számot, majd válassza ki a kívánt műveletet!
A program hajtsa végre a kiválasztott műveletet, és jelenítse meg az eredményt a weboldalon.
A műveletek végrehajtásához ugyanazt a JavaScript-függvényt használd! A függvénynek paraméterként add át, hogy melyik műveletet kell elvégeznie.
A négy gomb ugyanazt a függvényt hívja meg, de különböző paraméterekkel.
Például:
<button onclick="szamol('+')">Összeadás</button>
<button onclick="szamol('-')">Kivonás</button>
<button onclick="szamol('*')">Szorzás</button>
<button onclick="szamol('/')">Osztás</button>
A függvény a paraméter alapján dönti el, melyik műveletet kell végrehajtania.
Ehhez használd a switch szerkezetet!
Az eredményt egy HTML-elem textContent tulajdonságának módosításával jelenítheted meg.
Figyelj arra, hogy az osztásnál külön ellenőrizd a második számot! Ha az nulla, jeleníts meg hibaüzenetet, és ne végezd el az osztást.
Fájlnév: 12_betumeret.html
Készíts egy weboldalt, amelyen a felhasználó három előre meghatározott betűméret közül választhat.
A weboldal címsora legyen: Betűméret-beállítás
A címsor alatt helyezz el egy bekezdést a következő szöveggel:
„Ennek a szövegnek a betűméretét a gombokkal változtathatod.”
A bekezdés alatt három gomb jelenjen meg:
A gombok megnyomásakor a bekezdés betűmérete változzon meg.
A Kicsi gomb 12 képpontos, a Normál gomb 20 képpontos, a Nagy gomb pedig 32 képpontos betűméretet állítson be.
A változtatás azonnal történjen meg, az oldal újratöltése nélkül.
A betűméretet a style.fontSize tulajdonsággal módosíthatod.
Például:
document.getElementById("szoveg").style.fontSize = "20px";
A függvénynek paraméterként is átadhatod a méretet:
function betumeretBeallitasa(meret) {
document.getElementById("szoveg").style.fontSize =
meret + "px";
}
Fontos: A CSS fontSize tulajdonságánál a méretet megfelelő mértékegységgel kell megadni. Ezért fűzzük hozzá a számhoz a "px" szöveget.
Fájlnév: 13_karakterszamlalo.html
Készíts egy weboldalt, amely megszámolja a felhasználó által beírt szöveg karaktereit.
A weboldal címe legyen: Karakterek megszámlálása
A címsor alatt jelenjen meg a következő felirat: Írj be egy szöveget:
A felirat alatt helyezz el egy több soros szövegbeviteli mezőt!
A mező alatt legyen egy gomb: Karakterek számlálása
Amikor a felhasználó a gombra kattint, a program számolja meg a beírt szöveg karaktereit, majd jelenítse meg az eredményt.
A program két értéket jelenítsen meg:
A második érték számításakor a program hagyja figyelmen kívül a szóközöket, a sortöréseket és más, szóköznek számító karaktereket.
A szövegbeviteli mező tartalmát a következőképpen kérheted le:
const szoveg = document.getElementById("szoveg").value;
A szöveg hosszának meghatározása:
const osszesKarakter = szoveg.length;
A szóközjellegű karakterek eltávolításához használd a replace() metódust:
const szokozNelkul = szoveg.replace(/\s/g, "").length;
A kifejezésben:
\s a szóközjellegű karaktereket jelöli.g azt jelenti, hogy a keresés az összes előfordulásra kiterjed."" üres szöveggel helyettesíti a megtalált karaktereket.A program ezután megszámolja a megmaradt karaktereket.
Fontos: A JavaScript length tulajdonsága nem minden esetben egyezik meg az ember által érzékelt karakterek számával. Bizonyos speciális Unicode-karakterek több UTF-16-kódegységből állnak, ezért a length értéke nagyobb lehet az általunk egyetlen karakternek érzékelt jel hosszánál.
Fájlnév: 14_jelszo-lathatosag.html
Készíts egy weboldalt, amelyen a felhasználó megadhat egy jelszót, és igény szerint megjelenítheti vagy elrejtheti a beírt karaktereket.
A weboldal címe legyen: Jelszó megjelenítése
Az oldalon jelenjen meg egy jelszóbeviteli mező a következő felirattal: Jelszó:
A mező alatt helyezz el egy gombot: Jelszó megjelenítése
A beviteli mező kezdetben rejtse el a begépelt karaktereket.
Ha a felhasználó a gombra kattint, a beírt jelszó legyen olvasható.
Ekkor a gomb felirata változzon meg erre: Jelszó elrejtése
Ha a felhasználó ismét a gombra kattint, a karakterek váljanak újra rejtetté, és a gomb felirata változzon vissza.
A jelszóbeviteli mező típusát a type tulajdonság határozza meg.
A password típus elrejti a beírt karaktereket, míg a text típus láthatóvá teszi őket.
Például:
jelszo.type = "text";
A jelszó elrejtéséhez:
jelszo.type = "password";
Fájlnév: 15_hatralevo-karakterek.html
Készíts egy karakterkorláttal rendelkező szövegbeviteli mezőt!
A weboldal címe legyen: Hátralévő karakterek
Az oldalon jelenjen meg a következő címsor: Karakterkorlát
A címsor alatt helyezz el egy feliratot: Maximum 100 karakter:
A felirat alatt legyen egy több soros szövegbeviteli mező, amelybe a felhasználó legfeljebb 100 karaktert írhat.
A mező alatt jelenjen meg egy tájékoztató szöveg: Hátralévő karakterek: 100
Amikor a felhasználó elkezd gépelni, a program folyamatosan számolja ki, hogy hány karaktert írhat még be.
A tájékoztató szöveg minden változtatáskor automatikusan frissüljön.
Ehhez ne használj külön gombot!
Az onclick esemény a kattintásra reagál.
Az oninput esemény ezzel szemben akkor fut le, amikor a felhasználó megváltoztatja a beviteli mező értékét, például gépeléssel vagy szöveg beillesztésével.
Ezért a feladatban az oninput esemény a megfelelő választás.
A HTML-elem például így nézhet ki:
<textarea
id="szoveg"
maxlength="100"
rows="5"
cols="40"
oninput="karakterekFrissitese()"
></textarea>
A beírt szöveg hosszát a length tulajdonsággal kérheted le.
A hátralévő karakterek számát az alábbi képlettel számíthatod ki:
Hátralévő karakterek = 100 − beírt karakterek száma
JavaScriptben:
const hatralevo = 100 - szoveg.length;
Ezután a textContent segítségével frissítsd a tájékoztató szöveget!
Ha elkészültél az alapfeladatokkal, próbáld meg önállóan továbbfejleszteni a programokat!
Egészítsd ki a számológépet egy új művelettel, amely kiszámítja a két megadott szám átlagát!
A számítás eredménye ugyanazon a helyen jelenjen meg, ahol a többi művelet eredménye.
Bővítsd a betűméret-beállító programot egy számbeviteli mezővel, amelyben a felhasználó maga adhatja meg a kívánt betűméretet!
A megadott méretet a program alkalmazza a betűméretre.
Ügyelj arra, hogy csak érvényes, pozitív méretet lehessen beállítani!
Fejleszd tovább a karaktereket megszámláló programot úgy, hogy a következő adatokat is megjelenítse:
Határozd meg, hogyan fogod kezelni az üres szöveget, a többszörös szóközöket és az írásjeleket!
Egészítsd ki a jelszóbeviteli mezőt egy ellenőrzéssel!
A program jelezze, ha a jelszó:
Az ellenőrzés eredménye jelenjen meg a jelszómező alatt!
Fejleszd tovább a karakterkorlátot kezelő programot!
A hátralévő karakterek száma:
Figyelj arra, hogy a szín a felhasználó gépelése közben automatikusan változzon!