Kimenet: Az eloállított véletlen értéket ábrázoló kép.
Változók: Random szám 1 és 6 között, String típusú tömb 6 elemmel
Algoritmus: Feltöltjük az imgsrc tömböt a képek nevével, majd az eloállított véletlenszám segítségével kiválasztjuk azt a tömbelemet, amellyel a HTML dokumentumban megjelenített kép lecserélheto. A sikeres megoldáshoz a DOM modell felépítését kell megismernünk.
Eseménykezelés: Az onclick esemény bekövetkezésekor végrehajtandó utasításokat a changeImage() függvényben rögzítjük.
Az alábbiakban rendszerezzük a megoldáshoz szükséges ismereteket. A platformfüggetlen megoldás elkészítéséhez gyakorlatilag egy böngészo programra, és esetleg egy egyszerubb editorra van szükség. A lecke mintaprogramjai a böngészoben kipróbálhatók és módosíthatók a forráskód alatti "Próbáld ki! »" gombra kattintás után. Alea iacta est.
Hogyan épül fel egy HTML dokumentum?
Elöszőr gondoljuk át a programozási környezet jellemzőit. A böngészők HTML kódokat jelenítenek meg. A HTML
nyelvet azonban még nem tekintjük programnyelvnek, mert csupán a
tartalmi elemek megjelenítéséhez szükséges információkat írja le.
Vizsgáljuk meg HTML dokumentum szerkezetét. Mindig <html> és a </html> tagek (HTML utasítások) között találhatók a tartalmi elemek. A <head>
és a </head> között a dokumentum meta (leíró) információi
szerepelnek. Az itt található adatok nem jelennek meg a böngészőben,
mivel a dokumentum tulajdonságairól adnak információt a böngészőnek és a
robotoknak. A dokumentum tartalmi része a <body>
és a </body> tagek között található. Egy HTML dokumentumban
szöveg, kép, hang és mozgókép jeleníthető meg. Készítéséhez
használhatunk egyszerűbb texteditort (pl. notepad, notepad++), vagy HTML
fejlesztő programot (pl. Adobe Dreamweaver, CoffeeCup).
Beküldhető feladatok:
A fenti minta tanulmányozása után készítsetek egy bemutatkozó HTML dokumentumot, amelyben megjelenik a csapat neve, az iskolájának neve, a felkészítő tanár neve, valamint külön fényképek minden csapattagól, amik felett a nevek is megjelennek. A honlapon jelenjen meg az is, hogy mikor készítettétek el a feladatot (dátum).
100|2 pont
Keressetek pár olyan oldalt, ami a GIMP képszerkesztő funkcióival foglalkozik. Készítsetek egy HTML dokumentumot, amely ezek linkjeit tartalmazza.
10|2 pont
A HTML oldalon a <form>
és a </form> tagek által közrefogott űrlapról tudunk adatokat
beolvasni. Az adatok bekérésének leggyakrabban használt utasítása az <input> tag.
<Experts only!> Pusztán
az ügyfél-kiszolgáló architektúra megértésének kedvéért, szánjunk pár
percet a szerver oldali adatfeldolgozást végző PHP kód áttekintésére is.
Figyeljük meg, hogy az űrlap <form> tagja rendelkezik egy action
attributummal, amelyben megadhatjuk, hogy milyen kódot hajtson végre a
szerver az "Elküld" gomb lenyomását követően. Az űrlapmezők adatait a
$_POST tömbben fogadja a szerver.
A fenti kód a szerveren fut, a böngésző csak a futtatás eredményét
kapja vissza. Ugye észrevetted, hogy itt a <?php és ?> jelölések
között jelentek meg a PHP utasítások. Ha szeretnéd kipróbáni a szerver
oldali programozást, akkor telepíts a számítógépedre egy WAMP szervert vagy regisztrálj egy ingyenes webtárhelyet, ám a JavaScript programozáshoz erre egyenlőre nem lesz szükséged. </Experts only!>
Ha a HTML kódban számításokat akarunk végezni, vagy néhány feltétel
teljesülését szeretnénk megvizsgálni, vagy esetleg utasításokat
többször végrahajtani, akkor bizony adat- és vezérlőszerkezetekre lesz
szükségünk. Nos, a HTML ezen hiányosságát pótolhatjuk például JavaScript kódok beágyazásával. Ilyenkor a <script> és a </script> tagek közé írjuk a JavaScript utasításokat, melyeket a böngésző program fog értelmezni és végrehajtani.
Az alábbi program például az aktuális dátum megjelenítésére szolgál. A megjelenítést egy létrehozott függvény végzi el, ami akkor kerül meghívásra, amikor valaki a gombra kattint. A függvény megkeresi azonosító alapján az oldal egy bekezdését, és azt módosítja. További infó a dátumokról itt.
Beküldhető feladatok:
Jelenítsétek meg a dáumot tövv különböző formátumban is (év-hónap-nap, nap-hónap-év, hónap-nap-év).
10|2 pont
Készítsetek egy oldalt, ahol egy gomb lenyomására a gomb alatt megjelenik egy link a Bakonyi Bitfaragó Bajnokság oldalára.
A változót névvel azonosított memóriaterületnek tekintjük, különböző
értékek tárolásának illetve feldolgozásának az eszköze. A változókat a var
kulcsszó után deklaráljuk. Értékadó kifejezésekben az egyenlőségjel bal
oldalán álló változó veszi fel a jobb oldalon álló kifejezés értékét. A
kifejezések kiértékelését a JavaScript értelmező végzi el. Az eredmény a
kifejezésben használt változók és a kijelölt műveletek jellegétől
függően leggyakrabban szám, szöveg vagy logikai típusú.
Ha megegyező típusú adatok sorozatát szeretnénk feldolgozni (pl.
osztályzatok, hőmérséklet, bevételek, kiadások), akkor tömbösíthetünk,
vagyis egy közös azonosítóval hivatkozhatunk az adatsorozatra, miközben
annak elemeit sorszámmal jelöljük. Tömb deklarálása az Array() kulcsszóval történik.
Billentyűzetről a legegyszerűbben a prompt() metódussal kérhetünk be adatot:
Beküldhető feladatok:
Készítsetek egy programot, amely bekér 7 egész értéket. Ezeket tároljátok el egy tömbben. A program ezután jelenítse meg a három, páratlan indexszel rendelkező elem összegét.
100|2 pont
Kérjetek be egy lebegőpontos számot, majd jelenítsétek meg az egészre kerekített értékét.
Meghatározott logikai feltételek teljesülése esetén a
vezérlőszerkezetekkel tudjuk szabályozni az utasítások végrehajtásának
sorrendjét. A struktúrált programban alapvetően három vezérlőszerkezet
használatos: szekvencia, szelekció, iteráció. Figyeljük meg a
mintapéldákban a vezérlőszerkezetek egymásba ágyazódását!
Szekvencia
Szekvencia (utasításblokk) esetén az utasítások a programba írt sorrendjük szerint hajtódnak végre.
Beküldhető feladatok:
A program oldjon meg másodfokú egyenletet: Kérjen be 3 számot (a, b, és c), majd a megoldóképletet alkalmazva adja meg mindkét eredményt.
100|2 pont
A program olvasson be 4 számot, majd az összes lehetséges módon vonjon ki egy számot egy másikból, és jelenítse meg az eredményt (12 lehetőség lesz). Pl. ha a számok 1, 3, 6, és 10, akkor ilyen sorok jelenjenek meg: 1-3=-2 3-1=2 10-3=7 ...
100|2 pont
Szelekció
Szelekcióhoz (elágazás) már olyan utasításokat használunk, amelyek valamilyen logikai kifejezés értékétől függően eltérő utasításblokkot hajtanak végre. Megvalósításához használhatjuk az if (logikai kifejezés){ } utasítást.
Beküldhető feladatok:
A Bitek világában az tanítás szigorúan életkorhoz van kötve. Mindenki pontosan 6 évesen kezdi az általános iskolát, pontosan 14 évesen a középiskolát, és pontosan 18 évesen érettségizik. Készítsetek egy programot, ami bekér egy életkort, és kiírja hogy azzal az életkorral egy bitdiák az iskola előtt jár, az általános iskolában, a középiskolában, vagy a középiskola után.
100|2 pont
Készítsetek egy programot, amely bekér 3 számot, és kiírja őket csökkenő sorrendben.
100|2 pont
Iteráció
Az iteráció (ismétlődés, ciklus) teszi lehetővé bizonyos feltételek
teljesülése esetén egy utasításblokk többszöri végrehajtását. Ilyenkor a
ciklusmagban használt változók értéke feladattól függően folyamatosan
változhat. Az while (logikai kifejezés){ } elöltesztelő ciklusnál az ismétlési feltételeket a ciklus mag előtt allítjuk be, míg a do { } while (logikai kifejezés) hátultesztelő
ciklus esetén a ciklusmag utasításblokkját követően. Létezik még az
úgynevezett növeknényes ciklusszervező utasítás a for (ismétlések) { }.
Itt az ismétlések tényleges számát már a ciklus indulásakor meg kell
adnunk. Figyeljük meg az alábbi mintaprogramban az iterációk
felépítését.
Gondoltam egy számot: A program kigondol egy számot
egy és tíz között, majd megkérdezi tőlünk, hogy vajon melyikre gondolt.
Ezt addig teszi, amíg ki nem találjuk. A probléma megoldására while
ciklust és if elágazást használunk. Figyeljétek meg a véletlen egész értékek generálásának módját. Az eredmény lehet 1 is és 10 is.
Beküldhető feladatok:
Készítsetek egy programot, amely bekér egy számot, majd megjelenít minden 400-nál kisebb számot, ami osztható a bekért számmal.
1000|2 pont
Készítsetek egy programot, amely egy 20 elemű tömböt feltölt véletlen számokkal. A generálás után jelenítséget meg a generált számokat, valamint az köztük fellelhető legnagyobb értéket is.
1000|2 pont
A háromszög-számokat úgy lehet generálni, hogy elindulunk a 0-tól, hozzáadunk 1-et, majd minden alkalommal eggyel többel növeljük a számot, mint azelőtt (1-gyel, majd 2-vel, majd 3-mal, stb.). Így a következő sorozat jön ki: 0, 1, 3, 6, 10, 15, 21, 28, ... Készítsetek egy programot, ami felsorolja az 1000-nél kisebb háromszög-számokat.
A függvény névvel azonosított utasításcsoport. Általában akkor
alkalmazzuk, amikor ugyanazokat a műveleteket kell a program különböző
részein elvégezni, esetleg más-más adattal. A function
kulcsszó után az általunk magadott néven lesznek elérhetőek az utasítás
zárójelek { } között megadott utasítások. Ha a függvény
utasításainak adatot szeretnénk átadni, akkor a függvény neve után
zárójelben megadott úgynevezett attribútumokkal tehetjük meg. A függvény
hívása nevének és attribútumainak megadásával történik.
Beküldhető feladatok:
A tükörszavak olyan szavak, amelyek visszafelé olvasva is ugyanúgy néznek ki (pl.: görög, kerek). Készítsetek egy programot, amely egy bekért szóról eldönti, hogy az tükörszó-e. Az ellenőrzést egy függvény valósítsa meg. A program egy gomb megnyomására kérjen be egy szót, és arra írja ki, hogy tükörszó-e.
1100|2 pont
Készítsetek egy függvényt, amely kap kettő szót, és eldönti, hogy a rövidebb szó benne van-e karakterről karakterre a másikban. (pl. az "alma" szó része az "almapüré" és a "vadalma" szavaknak, de nem része az "almás" szónak. A megvalósításhoz készítsetek egy függvényt. A program egy gombra kattintva kérjen be két szót, majd írja ki hogy a rövidebb része-e a hosszabbnak.
1100|2 pont
Készítsetek egy függvényt, amely a paraméterben megkapott tömbből felsorolja a páratlan elemeket a tömbben lévő sorrendjük szerint, majd a páros elemeket fordított sorrendben. Töltsetek fel egy 15 elemű tömböt véletlenszerű értékekkel, jelenítsétek meg az elemeket sorrendben, majd hívjátok meg rá a függvényt.
1100|2 pont
Eseménykezelés
A program működése közben a kezelőfelületről illetve a kommunikációs felületről érkező események
üzeneteit folyamatosan dolgozza fel, így a külső (egérről vagy
billentyűzetről érkező) és a belső (timertől vagy más működő
folyamatoktól érkező) események befolyásolják a futását.
A külső események érzékelésekor az operációs rendszer üzenetet küld
annak az ablaknak, amelyen az esemény bekövetkezett. Az alkalmazás
fogadja az üzenetet, és végrehajtja az eseményhez rendelt utasításokat.
Ilyen események lehetnek az egérkattintás, az egérkurzor valamelyik
dokumentumelem feletti állapota stb.
Szintén külső események vezérlik az űrlapmezők kitöltését, vagy az alábbi kő-papír-olló játékot is.
Gondoltad volna, hogy a timer bekapcsolását követően, akár egy négy soros függvénnyel már digitális órát
lehet megjeleníteni? Ezt a belső időzítést a továbbiakban természetesen
más rendszeresen ismétlődő tevékenységek elvégzéséhez is használhatjuk.
Beküldhető feladatok:
Készítsetek egy honlapot, amin rövid meséket lehet megtekinteni. A holnapon legyen három mesecím. Ha valamelyikre rákattintunk, akkor alul jelenjen meg a mese szövege. Legalább az egyik mese mellé legyen egy kép is.
1100|2 pont
Készítsetek programot, amelyben egy hosszú szöveg egy 30 karakter széles helyen fényreklám-szerűen, ismétlődően mozog. Legyen az oldalon egy gomb, amire kattintva megfordul a szöveg mozgásának iránya, újra rákattinta pedig visszafordul.
1100|2 pont
Készítsetek egy honlapot, amin egy táblázat található. Oldjátok meg, hogy a táblázat egyes cellái fölé húzva az egeret, a cella legyen más színű, de csak addig, amíg az egér fölötte van.
A leckében tárgyaltak összefoglalásaként nézzük meg az eredeti feladat néhány lehetséges megoldását.
Kockadobás szelekció használatával
Kockadobás tömb használatával
Kockadobás iteráció használatával
Egy kis kiegészítés
Egyéb beviteli mezők, és kezelésük
A HTML-ben több lehetőség is rendekezésre áll felhasználói bemenetre. A különböző fajta beviteli mezők között szereplnek szöveget, számot kezelőek, jelölőnégyzetek.
Az alábbi mintaprogram bemutatja egy pár ilyen mezőnek a kezelését javascript segítségével.
Kedves Bakonyi Bitfaragók!
Elérkeztünk az első kirándulásunk
végére. Nagy utat tettünk meg a bitek birodalmában, de reméljük a
bemutatott minták felhasználásával már érdekes megoldásokat tudtok adni
az első forduló feladványaira. Tökéletes program ugyan nem létezik, de
nagyon jó megközelítéssel érhetünk el egy kifogástalannak tartott
állapotot.
Beküldhető feladat:
Annak érdekében, hogy egy kaputelefonon ne lehessen kikövetkeztetni a kódot a gombok megviseltsége alapján, bizonyos helyeken már bevezették a digitális kaputelefont, amelyen a számok sorrendje mindig más. A feladat egy ilyen kaputelefon szimulálása.
A honlapon jelenjen meg egy táblázat, benne a 10 számmal, megfelelő elrendezésben (3 sor 3 gombbal, és egy alul középen).
A számok sorrendje véletlenszerű legyen.
A honlap érzékelje a számok bevitelét (a számra kattintva azt beveszi). 4 számjegy bevitelét engedje, az lesz egy kód. Több lenyomást ne engedélyezzen.
Ha a felhasználó jó kódot ütött be, akkor jelezze az oldal, hogy az ajtó kinyílt, egyébként figyelmeztessen a rossz kódra. (A helyes kód legyen 8336.)
Legyen alatta egy gomb, amelynek megnyomására új, véletlenszerű sorrend generálódik, és az eddig beütött kód is újraindul.