Javascript I.
Eseménykezelés, függvények, változók, operátorok, vezérlési szerkezetek, űrlap kezelés
Megjegyezzük, hogy (1) a feladatokhoz megadott megoldásaink nem minden esetben
a "legszebb", legelegánsabb megoldások. Ennek oka az, hogy törekedtünk
arra, hogy a megoldásokban ne használjunk mást, mint amiket az órákon megtanítunk,
és a fóliákon megtalálható. (2) A feladatokhoz több megoldást is adunk. Némelyik már kezd elavulni, de
egyelőre
még
fennhagyjuk, mert még van, aki használja.
1. Készítsünk honlapot, amin van egy gomb "Nyomd meg ezt a gombot!" felirattal! Ha a gombot megnyomjuk, akkor ugorjon fel egy üzenetablak "Lenyomtad ezt a gombot!" üzenettel!
2. Találd meg, miért nem működik a program, mi a hiba benne. Készítsünk honlapot, amin van egy gomb "Nyomd meg ezt a gombot!" felirattal! Ha a gombot megnyomjuk, akkor ugorjon fel egy üzenetablak "Lenyomtad ezt a gombot!" üzenettel!
3. Készítsünk honlapot, mely kiírja a lap utolsó módosításának idejét, weblapunk címét (title), és az URL címét!
4. Készítsünk JavaScript kódot, mely az oldal betöltődésekor felpattanó köszöntő ablakkal fogad, majd bekéri a felhasználó nevét, és korát (alapértelmezett érték 20 év legyen), és kiírja az oldalra!
5. Írjunk JavaScript kódot, melyben a dokumentum hátterének színe megváltozik (zöld / piros / fehér), ha rákattintok a megfelelő gombra, vagy az egeret a megfelelő link fölé húzom! A színkódok: fehér: #ffffff, piros: #ff0000, zöld: #00ff00. Táblázat segítségével osszuk el a linkeket és a gombokat az oldalon!
6. Írjunk programot, amely választási lehetőséget biztosít egy felbukkanó ablakban: piros hátteret akarok-e. Nemleges válasz esetén zöld háttér választását kínálja fel.
7. Írjunk programot, mely bekéri az időt (feltesszük, hogy az időt egész órában adja be a felhasználó: 1,2..24). A program a beadott számtól függően írja ki: jó napot / jó reggelt / jó estét. Megállapodás szerint reggel: 6-10, este: 22-6 óráig tart. (A programot a későbbiekben tovább fogjuk fejleszteni úgy, hogy ne a felhasználónak kelljen megadni az időt, hanem a program maga állapítsa meg a rendszeridőből.)
8. Írjunk programot, mely kiírja a "1. címsor, 2. címsor, stb" szövegeket egymás alá 6-1 nagyságú "h1, h2, ..." tagekkel.
9. Írjunk 10*10-s szorzótáblát: Egy lehetséges output :
Megoldás
10. Készítsd el a fólián található EventListener-es feladatot. A javascript fájlokat külön fájlba tedd.
Html fájlA javascript fájl
11. Írjunk formot, melyen két gomb van: +/- felirattal, melyekre kattintva egy textboxba írt szám nagyságát növeljük/csökkentjük 1-gyel.
12. Két textboxban kérjünk be valós számokat, listából választhassuk a 4 alapműveletet. Az eredményt egy textboxban szeretnénk látni a "Számolj" gomb lenyomásakor. 0- val osztást nem engedünk.
13. Írjunk programot, melyben a "kedvenc keresőim" című listából választhatunk: Google/Bing/Wolfram Alpha. A megfelelő listaelemet kiválasztva, és egy gombra kattintva a megfelelő weblap töltődjön be az ablakba.
14. Írjunk formot, ami bekéri a nevünket, az életkorunkat és a nemünket! A "Mehet" gomb megnyomásakor egy JavaScript függvény írja ki a megadott adatokat!
15. Írjunk formot melyben az űrlapokra vonatkozó ismereteket ellenőrizzük
le! A "Mehet" gomb megnyomásakor egy JavaScript függvény ellenőrizze le a
válaszokat! Minden feladat 1 pontos. Egy üzenetablakban írjuk ki, hogy hány
pontot ért el a látogató a lehetséges 4-ből, és ha maximálisat, akkor egy
újabb üzenetablakban írjuk ki, hogy "Gratulálok"!
A javascript és css kódokat külön fájlba írjuk.
Ha kész vagyunk a megoldással, gondoljuk meg, hogy tesztet a valós életben
is érdemes-e Javascript nyelven írni.
Megoldás
16. Írjunk formot, amely bekéri a nevünket, és kétszer a jelszavunkat! Addig ne engedjük elküldeni a formot, amíg a három mező valamelyike üres, a két jelszó nem egyezik, a jelszó 8 karakternél rövidebb! A javascript kódot külön fájlba írjuk
Megoldás, js és html kód külön fájlban
Régebbi megoldás, js és html egy fájlban
17. Írjunk formot, amely bekér egy emailcímet! Ellenőrizzük le, hogy a két textbox egyike se legyen üres, az emailnek bekért karaktersorozat belsejében szerepel-e a "@" karakter és .hu, vagy .com-ra végződik! A javascript kódot külön fájlba írjuk.
18. Írjunk formot, amelyen található gomb lenyomására kiírjuk a termék árát a megfelelő szövegdobozba. A javascript kódot külön fájlba írjuk.
Ehhez az árak (Nem valósak!):
- Nokia: 3000 (Ft)
- Samsung: 4000
- LG: 5000
- a darabszámmal értelemszerűen szorzódik az alapár
- MMS: 1000
- Bluetooth: 1500
- Sztereo: 2000
- Megjegyzés: feltételezzük, hogy a felhasználó nem ír bele a szövegdobozba magától árat, csak a gombnyomásra kerül bele ár.