A Webfejlesztés blokk honlapja

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!

Megoldás

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!

Nem működő program

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!

Megoldás

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!

Megoldás

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!

Megoldás három függvénnyel

Megoldás egy függvénnyel

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.

Megoldás

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.)

Megoldás

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.

Megoldás

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ájl
A 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.

Megoldás

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.

Megoldás

Egy másik megoldás

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.

Megoldás

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!



Megoldás

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.

Megoldás

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!):

Megoldás