E laborházi lényege:
- (X)HTML Form elemek ismerete és használata
- kliens oldali JavaScript alapfokú ismerete és használata
Feltölteni két állományt kell:
- W02_nn_xxxxxxx.zip : a HTML oldalak, illetve .js állomány (képet csak akkor, ha nem túl nagy)
Az állomány mérete ne haladja meg a 2MB-ot
- W02_nn_xxxxxxx.txt : a web-oldal elérési útja,
illetve ebben is jelenjen meg a hallgató neve, a csoportja, a feladat száma és szövege.
ahol nn a feladat sorszámát jelzi, xxxxxxx pedig a felhasználóazonosítót.
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 oldal feleljen meg az XHTML 1.0 szigorú specifikációnak.
Szúrjuk be az XHTML oldal elejére az alábbi sorokat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A HTML oldal érvényességét leellenőrizhetjük pl. az alábbi web-helyen:
Markup Validation Service vagy WDG HTML Validator
-
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.
-
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 leegyszerűsített HTML-es változata kíván lenni, de amúgy a rajzon szerepelhet "stilizált teknőc", pl. egy nyíl.)
Egy canvas elemre rajzolt "pálya" közepén jelenítsünk meg egy (alaphelyzetben balról-jobbra irányba néző) teknőcöt.
Egy űrlapon (form) 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
- a teknőc "ceruzájának" a színe (legördülő listából)
- 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 inkább) 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 adhatjuk meg
Ha a teknőc kifut a pályáról, jelenjen meg annak ellentétes oldalán.
A megadott parancsokkal tetszőlegesen mozgathatjuk/rajzoltathatjuk a teknőcöt, illetve egy gombra kattintva legyen
visszaállítható az alaphelyzet.
-
Hatból négyet játék
Kérjük be XHTML űrlap (form) segítségével az alábbi adatokat:
- játékos neve
- életkora
Ellenőrizzük, hogy az életkor helyesen van megadva.
Ha megkezdődött a játék, jelenjenek meg a játékos adatai az oldal egy jól látható helyén.
A játék lényege a következő: a gép kiválaszt (véletlenszerűen generál) 6 megadott színből
4-et (egyik szín sem ismétlődhet), ezek sorrendjét is meghatározva. Ezt kell a játékos kitalálja.
A játékos tippel (pl. négy legördülő listából választja ki a színeket, de tetszés szerint másképp is megoldható), majd
a gép kiértékeli a tippet: megmondja, hogy hány pontatlan (a szín talál, de a pozíciója nem) illetve hány pontos találat
(a szín is és a pozíció is talál) van. A játékban hagyományosan fekete négyzet jelöli a pontatlan-, illetve fehér négyzet
a pontos találatokat (de ezt is megoldhatjuk tetszés szerint másképp).
Megj.:Lényeges, hogy a gép válaszából csak a helyes vagy helytelen találatok száma derül ki, az, hogy konkrétan melyik
színre vonatkozik, az nem.
Ha a játékos még nem találta ki a színeket a helyes sorrendben, akkor ismét tippelhet. A tippek és válaszok egymás alatt jelenjenek meg.
Max. 8-at tippelhet a játékos, ha nem sikerül kitalálnia a 4 színt a helyes sorrendben, akkor veszített, különben nyer.
A játék végén a gép az eredmény- (kitatlálta vagy sem, ha igen, akkor hány lépésből) és a játékos életkorától függően más-más szöveget írjon ki.
Tipp: véletlenszám generálása: Math.random segítségével.
-
Szövegszerkesztő
Legyen két szövegdoboz (textarea), az egyikbe szóközzel elválasztott szavakat írunk, ezek
lesznek a figyelt szavak. A másikba szöveget írunk. A második szövegdoboz
alatt megjelenik a beírt szöveg megfelelőképpen kiszínezve, a gépeléssel egyidőben, a következő szabály szerint: ha
a második szövegdobozba írt szövegben valamely szó (akár részszóként is)
szerepel az első szövegdobozban, akkor azt pirossal jelenítjük meg, a többi
karakter színe fekete.
Ha pl. az első szövegdobozban az aaa és aab szavak szerepelnek,
akkor az abaa szó nincs kiszínezve, míg az az aaab teljesen piros.
-
Kő, papír, olló játék
Kérjük be XHTML űrlap (form) segítségével az alábbi adatokat:
- játékos neve
- mennyi pénze van
Ha megkezdődött a játék, a játékos neve, illetve pénze legyen feltüntetve jól látható módon.
A játékos három megfelelő kép (kő, papír vagy olló) közül választva adja meg a saját tippjét, a gép pedig generálja a sajátját.
Miután valamelyik képre kattintottunk, csak a kiválasztott kép maradjon látható, illetve a gép tippje is váljon láthatóvá.
A nyertes fizet x összeget (a gép kezdeti pénzösszegét generáljuk véletlenszerűen). Az alábbi szabály adja meg, hogy ki a nyertes:
- ha a két fél tippje megegyezik, nem nyert senki
- a kő elcsorbítja az ollót (tehát a kő nyer)
- az olló elvágja a papírt (az olló a nyertes)
- a papír becsomagolja a követ (a papír nyer)
Tüntessük fel, hogy ki nyert, aktualizáljuk a játékos (és a gép) pénzösszegét, majd egy gombra kattintva folytathatjuk a játékot egy újabb fordulóval mindaddig,
amíg óhajtjuk, illetve mindkét félnek van pénze.
-
Az a) illetve b) pont egymástól független, de legyenek ugyanazon a XHTML
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 űrlapon (form) 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 (de ne csak számjegyekből álljon)vagy legyen benne nagy- és kisbetű is
- 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) Mandelbrot halmaz
Jelenítsük meg a Mandelbrot halmazt (lehetőleg felismerhető paramétertartományban), természetesen nem képből betöltve, hanem javascriptben kiszámítva.
-
Szöveg görgetése (scroll) vízszintes irányban
Legyen egy szövegdoboz (textarea), ahova beírunk egy szöveget (ezt a szöveget fogjuk a szövegdoboz alatt elhelyezett div elem által kijelölt területen
belül görgetni) és egy legördülő lista, amelyből kiválaszthatjuk a görgetés irányát (balra vagy jobbra).
Miközben beírjuk a szöveget, az elkezd a megadott irányba gördülni úgy, hogy ha rövidebb a szöveg, mint a görgetés
számára kijelölt div szélessége, akkor többször egymás után jelenik meg. Egy gomb megnyomásával újrakezdhető a görgetés.
A szöveg mindig a görgetésre szánt területnek a megadott iránnyal ellentétes oldalán indul és legyen olvasható.
Úgy kell műkodjon, mint a (nem standard!) marquee tag csak ebben az esetben egy div-ben
kell megjelenjen a görgetett szöveg.
Hasznos hivatkozások: