HTML Form + JavaScript
Okt. 8-14
Határidő: Nov. 4.
Követelmények |
Laborházik |
Dokumentáció
E laborházi lényege:
- HTML Form elemek ismerete és használata
- kliens oldali JavaScript alapfokú ismerete és használata
Követelmények:
- Beküldendő csatolt állomány neve: W02_<sorszám>_<felhasználónév>.zip (Pl. W02_05_xy52142.zip)
- "Subject":W02_<sorszám> (pl. W02_05)
- A levél tartalma:
HTML oldal elérési útja (www.scs.ubbcluj.ro/~<felhasználónév>/<fantázianév>/<weboldal neve>)
hallgató neve, csoportja, a feladat száma és szövege
Laborházik:
Megj.: A feladat I. részében leírtak mindenkire vonatkoznak, a II. részben a feladat egyénre szabott része szerepel
(mindenki a sorszáma szerinti feladatot választja).
I.
- A felhasznált HTML oldal legyen érvényes a HTML 4.01 szigorú specifikációja szerint kódolva.
Szúrjuk be a HTML oldal elejére az alábbi sorokat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
A HTML oldal érvényességét leellenőrizhetjük pl. az alábbi web-helyen:
Markup Validation Service
-
Használjunk külön, .js kiterjesztésű szkript-állományt (is).
-
A JavaScript-es részt lássuk el megfelelőképpen kommentekkel!
-
JavaScript-et használva szúrjuk be a HTML oldal aljára, középe igazítva, az utolsó módosítás dátumát
(lásd: document.lastModified).
II.
-
Fényképalbum képeinek lejátszása
Szükséges: legalább 2 fényképalbum, albumonként min. 3 képpel.
Kérjük be HTML form segítségével az alábbi adatokat:
- fenyképalbum neve (legördülő listából legyen kiválasztható)
- megtekintés módja (rádiógomb csoport két értékkel: automatikus/kézzel irányított)
A kiválasztott fényképalbum képeit lehessen megtekinteni a kiválasztott mód alapján:
- automatikusan
- a képek lejátszása gombnyomásra induljon
- ekkor lehessen a lejátszás sebességét módosítani (növelni/csökkenteni bizonyos korlátok között)
- a lejátszás az album képei közt körkörösen haladva történjen (az utolsóról ismét az elsőre ugorjon)
vagy
- kézzel irányítva a lejátszást (előző/következő gombok segítségével)
- ekkor ne legyen látható az "előző" gomb az első kép esetén, illetve a "következő" gomb
az utolsó kép esetén.
Tipp: időzítésre a setTimeout használható.
-
Memóriajáték
Kérjük be HTML form segítségével az alábbi adatokat:
- négyzetrács mérete (a sorok illetve oszlopok számának minimális illetve maximális értéke rögzített.)
- játékos neve
Rajzoljunk ki egy nxm-es négyzetrácsot (ahol n és m a megadott sor- illetve oszlopszám), melynek mindenikében
ugyanaz a (pl. kérdőjelet ábrázoló) kép jelenik meg kezdetben.
A négyszetrácsban kép-párok vannak elrejtve (ezek pozícióját véletlenszerűen generáljuk), vagyis minden kép
pontosan kétszer jelenik meg a négyzetrácsban, de ezeknek a pozíciója a játékos számára nem ismert.
A játékos kattintással két különböző képet fordíthat fel egymás után (a kérdőjelre kattintva megjelenik az elrejtett
kép). Ha a két kép azonos, mindkettő látható marad mindvégig, különben visszafordulnak és ismét a kérdőjel lesz
látható.
Ha a játékosnak sikerült minden kép-párt megtalálnia gratuláljunk neki.
Tipp: véletlenszám generálása: Math.random segítségével.
-
Itt a piros hol a piros játék
Kérjük be HTML form segítségével az alábbi adatokat:
- játékos neve
- életkora
- mennyi pénze van...
- pénznem kiválasztása egy legördülő listából
Ellenőrizzük, hogy minden adat helyesen van megadva, illetve a játékot csak 18 éven felüli, egy bizonyos minimális
pénzösszeggel rendelkező egyénnek engedjük meg.
Ha megkezdődött a játék, jelenjen meg a játékos neve az oldal egy jól látható helyén.
A játékos 3 gomb közül választva tippelhet arra, hogy "hol a piros". Ha eltalálta a helyes
(véletlenszerűen generált) pozíciót, (a pénznemtől függő) x összeget nyer, különben kétszer annyit veszít.
A játék addig ismétlődik, míg a játékos meg nem unja ("meguntam" gombra kattintva) vagy a pénze a minimális alá
csökken.
Mindig legyen kiírva, hogy a játékosnak mennyi pénze maradt, illetve a nyerés vagy vesztés függvényében más-más kép
jelenjen meg.
Tipp: véletlenszám generálása: Math.random segítségével.
-
Teknőcidomítás
(Azért éppen teknőc, mivel a feladat a, főként -de nem kizárólag- gyerekek számára kitalált, LOGO programozási
környezet egy igen-igen leegyszerűsített HTML-es változata kíván lenni, de amúgy a rajzon szerepelhet a teknőcön kívül
bármi egyéb, pl. egy nyíl is.)
Egy x szer y-os "pálya" közepén jelenítsünk meg egy (alaphelyzetben balról-jobbra irányba néző) teknőcöt. A pálya szélei
legyenek láthatóak.
Egy Form-on keresztül az alábbiakat választhatjuk ki:
- a teknőc rajzol vagy nem rajzol (rádiógomb) - értsd: elmozdulás esetén nyomot (csíkot) hagy maga után vagy sem
(- opcionális: a teknőc "ceruzájának" a színe)
- egy legördülő lista, melyből a parancsot választhatjuk ki, majd a kiválasztott parancstól függően
egy második legördülő lista vagy szövegdoboz, melyben a parancs paraméterét adjuk meg
- a parancs az alábbi értékeket veheti fel:
- előre, hátra, jobbra fordul, balra fordul
- paraméter: - "előre" vagy "hátra" esetén a lépésszámot adjuk meg
- fordulás esetén pedig az elfordulás szögét választhatjuk ki (elég 90, 180, 270, de lehetnek 45 többszörösei is)
Ha a teknőc kifut a pályáról, jelenjen meg annak ellentétes oldalán.
A megadott parancsokkal tetszőlegesen mozgathassuk/rajzoltathassuk a teknőcöt, illetve egy gombra kattintva legyen
visszaállítható az alaphelyzet.
-
Szám kitalálósdi
Feladat: a játékosnak egy min. illetve max. érték közötti, vélrtlenszerűen generált számot kell kitalálnia korlátozott
idő alatt.
Kérjük be HTML form segítségével az alábbi adatokat:
- min. illetve max. érték
- játékos neve
- nehézség: 3 fokozat közül lehessen választani (rádiógomb)
A nehézségi fok növekedése abban áll, hogy kevesebb idő áll rendelkezésre, illetve hibás adat begépelése esetén
(nem szám vagy a min.-max. értéktartományon kívül eső érték megadása) nagyobb büntetés jár (levonás a hátralevő
időből).
A képernyőn jelenjen meg a hátralevő idő, amit másodpercenként frissítünk.
Minden egyes találat beírása után írjuk ki, hogy a szám, amit a játékosnak ki kell találnia kisebb vagy nagyobb-e,
mint a játékos által beírt tipp. Ha sikerült kitalálni a számot, gratuláljunk a játékosnak, egyébként "vígasztaljuk
meg" egy (adott képek közül) véletlenszerűen kiválasztott kép megjelenítésével.
A játékot lehessen újrakezdeni.
Tipp: időzítésre setTimeout, véletlenszám generálásra Math.random használható.
-
Az a) illetve b) pont egymástól független, de legyenek ugyanazon a HTML oldalon (vízszintes vonallal elválasztott külön részben):
a) Jelszó formátumának ellenőrzése.
Kérjünk be egy felhasználónevet és egy jelszónak szánt szöveget egy Form-on keresztül. Ellenőrizzük, hogy a begépelt
jelszó teljesíti-e az alábbi feltételeket, és ha nem, írjuk ki, hogy mi az, ami nem felel meg:
- legalább egy számjegy kell szerepeljen benne
- legyen benne legalább egy nagybetű illetve legalabb egy kisbetű
- legyen legalább 6 karakter hosszúságú
- 10 karakternél hosszabb nem lehet
Az ellenőrizhetőség kedvéért írjuk ki apró betűkkel a beírt felhasználónevet és jelszót.
b) Képvariációk
Az alábbi kép 4 különböző szakaszból áll: bal szél, jobb szél, felső szél, illetve alsó szél
Rajzoljunk ki egy üres fehér négyzetet, alá pedig a 4 elemnek megfelelő gombot (|,_ , stb.)
Mindenik gombnak két állapota lehet: lenyomva vagy felengedve (látszodjon a különbség). Kezdetben egyetlen
gomb sincs lenyomva (ezt jelenti az üres kép). A gombokat rákattintással
ki-be kapcsolhatjuk, és a gombok feletti négyzetben mindig a megfelelő kép jelenjen meg, aszerint, hogy melyik
elemek vannak bekapcsolva.
Hasznos hivatkozások: