Int.techn Peldatar 0423

D U N A Ú J V Á R O S I FŐ I S K O L A

Hadaricsné Dudás Nóra Erzsébet főiskolai adjunktus

Váraljai Mariann főiskolai adjunktus

Internet technológiák

Példatár

2008

3

TARTALOMJEGYZÉK 1. HTML alapok gyakorlása ................................................................................................... 6

1.1.a. Feladat Szövegformázás, sortörés, új bekezdés, háttérszín ................................... 6 1.1.b. Feladat Szövegformázás, szövegigazítás, sortörés, új bekezdés, választóvonal, fejléc 6 1.2.a. Feladat Háttérkép, betűszín .................................................................................... 8 1.2.b. Feladat Betűméret, betűtípus, betűszín, kép beszúrás ............................................ 9 1.2.c. Feladat Szövegigazítás ......................................................................................... 10 1.2.d. Feladat Összetett feladat ...................................................................................... 11 1.3.a. Feladat Sorszámozás (számozott és számozatlan listák) ..................................... 12 1.3.b. Feladat Sorszámozás (definíciós lista) ................................................................. 14 1.3.c. Feladat Sorszámozás (definíciós és számozott lista) ........................................... 16 1.4.a. Feladat Egyszerű táblázat készítése. (keretvastagság, táblázat színe, szélessége, igazítása, cellák tartalmának vízszintes igazítása) ............................................................. 17 1.4.b. Feladat Egyszerű táblázat készítése. (táblázat címének vízszintes igazítása, cellák tartalmának függőleges igazítása) ...................................................................................... 18 1.4.c. Feladat Egyszerű táblázat készítése. (cellaegyesítés, cella háttérszíne, kép elhelyezése a táblázatba) .................................................................................................... 19 1.4.d. Feladat Egyszerű táblázat készítése. .................................................................... 19 1.4.e. Feladat Összetett táblázat készítése. .................................................................... 21 1.5.a. Feladat Hiperhivatkozások 1. ............................................................................... 22 1.5.b. Feladat Hiperhivatkozások 2. ............................................................................... 24 1.6. Feladat Tartalomjegyzék készítés. ....................................................................... 25 1.7.a. Feladat Térképkészítés 1. ..................................................................................... 27 1.7.b. Feladat Térképkészítés 2. ..................................................................................... 30 1.8.a. Feladat Keretek készítése 1. ................................................................................. 30 1.8.b. Feladat Keretek készítése 2. ................................................................................. 33 1.8.c. Feladat Keretek készítése 3. ................................................................................. 33 1.8.d. Feladat Keretek készítése 4. – Összetett feladat .................................................. 34 1.8.e. Feladat Beágyazott dokumentumok (Iframe) készítése ....................................... 36 1.9.a. Feladat Összetett feladat 1. .................................................................................. 37 1.9.b. Feladat Összetett feladat 2. .................................................................................. 40

2. CSS alapok gyakorlása ..................................................................................................... 41 2.1.a. Feladat Fejléc stílus – style paraméter használata ............................................... 41 2.1.b. Feladat Fejléc stílus – STYLE utasítás használata ............................................... 43 2.1.c. Feladat Fejléc stílus – külső stíluslap használata ................................................. 43 2.2.a. Feladat Szegély tulajdonságok 1. ......................................................................... 44 2.2.b. Feladat Szegély tulajdonságok 2. ......................................................................... 45 2.3.a. Feladat Táblázat formázása 1. .............................................................................. 46 2.3.b. Feladat Táblázat formázása 2. .............................................................................. 47 2.4.a. Feladat Lista formázása 1. ................................................................................... 50 2.4.b. Feladat Lista formázása 2. ................................................................................... 52 2.5.a. Feladat Táblázat és lista formázása ...................................................................... 53 2.5.b. Feladat Összetett feladat. ..................................................................................... 55

3. XHTML alapok gyakorlása .............................................................................................. 56 3.a. Feladat Összetett feladat ...................................................................................... 56 3.b. Feladat Keretek készítése – Összetett feladat ...................................................... 59

4. JavaScript alapok gyakorlása ........................................................................................... 65 4.1.a. Feladat Kiíratás a képernyőre (alert): ................................................................... 65 4.1.b. Feladat Adatbekérés, és kiíratás (prompt és document.write) ............................. 66

4

4.1.c. Feladat Kiíratás a képernyőre – Heron képlet ...................................................... 69 4.1.d. Feladat Adatbekérés és kiíratás; Math objektum – Heron képlet 2. .................... 69 4.1.e. Feladat Adatbekérés és kiíratás; Math objektum –kocka térfogata ..................... 70 4.1.f. Feladat Adatbekérés és kiíratás, Math objektum - körgyűrű ............................... 71 4.1.g. Feladat Adatbekérés és kiíratás, Math objektum – másodfokú ........................... 72 4.2.a. Feladat Függvények - összegzés, átlag ................................................................ 72 4.2.b. Feladat Függvények – összegzés; Math objektum ............................................... 74 4.2.c. Feladat Függvények – hatványozás; Math objektum ........................................... 76 4.2.d. Feladat Függvények - Mátrix ............................................................................... 77 4.3.a. Feladat Vezérlő szerkezetek (if…else); Pozitív-negatív? .................................... 79 4.3.b. Feladat Vezérlő szerkezetek (if…else) Pozitív-negatív 2. ................................... 80 4.3.c. Feladat Vezérlő szerkezet (if…else); Gondoltam egy számra… ........................ 81 4.3.d. Feladat Vezérlő szerkezet (if…else);Dolgozat kiértékelése ................................ 82 4.3.f. Feladat Ciklusok (for); Kamatos kamat ............................................................... 86 4.3.g. Feladat Függvények és vezérlő szerkezet- Fibonacci-sor .................................... 88 4.3.h. Feladat Ciklus és vezérlő szerkezet; Prímszámvizsgálat ..................................... 89 4.3.i. Feladat Vezérlő szerkezet (if-else); Kocka .......................................................... 90 4.4.a. Feladat Elődefiniált objektumok (tömbök) .......................................................... 91 4.4.b. Feladat Elődefiniált objektumok (Date); Mai nap ............................................... 92 4.4.c. Feladat Elődefiniált objektumok (Date); Aktuális dátum, pontos idő ................. 93 4.4.d. Feladat Elődefiniált objektumok (Date); 20 évvel ezelőtt ................................... 93 4.4.e. Feladat Elődefiniált objektumok (Date); naptár: aktuális hónap ......................... 94 4.4.f. Feladat Elődefiniált objektumok (Date); Napszak köszöntő ............................... 95 4.4.g. Feladat Elődefiniált objektumok (Date); Napszak: képekben ............................. 96 4.4.h. Feladat Elődefiniált objektumok (Date); Aktuális dátum és névnap ................... 97 4.4.i. Feladat Elődefiniált objektumok (Screen) ........................................................... 99 4.4.j. Feladat Elődefiniált objektum (Image); Képváltó ............................................. 100 4.4.k. Feladat Elődefiniált objektum (Image); Képnézegető ....................................... 101 4.4.l. Feladat Előző feladat továbbfejlesztése gombokkal (állandó képméret) ........... 102 4.5.a. Feladat Összetett feladat (összegzés és szorzatképzés) ..................................... 103 4.5.b. Feladat Összetett feladat (legkisebb és legnagyobb elem) ................................. 105 4.5.c. Feladat Összetett feladat (tömb, ciklus, függvény, min-max) ........................... 107 4.5.d. Feladat Összetett feladat (elemkeresés) ............................................................. 108 4.5.e. Feladat Összetett feladat (elemcsere) ................................................................. 111 4.5.f. Feladat Összetett feladat (tömb); Lottóprogram ................................................ 114 4.5.g. Feladat Összetett feladat (tömb, elemek sorrendbe) .............................................. 117 4.5.h. Feladat Összetett feladat (tömb, elemek sorrendbe, min-max) .............................. 117 4.6.a. Feladat Űrlap objektumok (Button); Új ablak megnyitás .................................. 118 4.6.b. Feladat Űrlap objektumok (Button); Üzenetablak ............................................. 119 4.6.c. Feladat Űrlap objektumok (Text); Összeg-szorzat ............................................ 120 4.6.d. Feladat Űrlap objektumok (text); Bruttó érték ................................................... 121 4.6.e. Feladat Űrlap objektumok (select); Új weblapok .............................................. 121 4.6.f. Feladat Események (képre mutatás eseménye) .................................................. 122 4.6.g. Feladat Űrlap elemek(text) – Fibonacci ............................................................. 123 4.6.h. Feladat Betűstílusok ........................................................................................... 124

5. Összetett gyakorló feladatok .............................................................................................. 126 5.1.a. Feladat Összetett gyakorló feladat – saját honlap .............................................. 126 5.1.b. Feladat Könyvelőprogram .................................................................................. 130 5.1.c. Feladat Autókereskedés ..................................................................................... 130 5.1.d. Feladat Befektetés .............................................................................................. 131

5

5.1.e. Feladat Mátrix .................................................................................................... 131 5.1.f. Feladat Könyvelőprogram .................................................................................. 131 5.1.g. Feladat Névnapok .............................................................................................. 131 5.1.h. Feladat Tömb - színház ...................................................................................... 131 5.1.i. Feladat Gépkocsi-tulajdonságok ........................................................................ 131 5.1.j. Feladat Magyarország városai ........................................................................... 132 5.1.k. Feladat Könyvelőprogram .................................................................................. 132 5.1.l. Feladat Idősebb? Fiatalabb? ............................................................................... 132 5.1.m. Feladat Véletlenszerű kiválasztás ...................................................................... 132 5.2.a. Feladat Saját honlap álláskeresés céljából ......................................................... 132 5.2.b. Feladat Személyes honlap hobbiból ................................................................... 132 5.2.c. Feladat Iskolája honlapja ................................................................................... 132 5.2.d. Feladat Állatkert honlapja .................................................................................. 133 5.2.e. Feladat Saját E- bolt készítése ........................................................................... 133

6

1. HTML alapok gyakorlása

1.1.a. Feladat Szövegformázás, sortörés, új bekezdés, háttérszín Készítsük el a következő ábrán látható HTML oldalt, mely Giovanni Pascoli: Sírás című négysorosát tartalmazza. Az oldal háttérszíne legyen világoszöld, a betűszín sötétkék. A cím félkövér, a vers maga dőlt betűtípusú legyen.

1.sz. ábra 1.1.a. feladat A feladat forrása:

1.1.b. Feladat Szövegformázás, szövegigazítás, sortörés, új bekezdés, választóvonal, fejléc Készítsük el a következő ábrán látható HTML oldalt, mely Pitagoraszról, és róla elnevezett tételről ill. annak megfordításáról szól röviden.

7

A feladat rövid leírása: A főcím a legnagyobb méretű fejléc stílus legyen. A hozzá tartozó bekezdés legyen sorkizárt igazítású. Majd következzen egy vízszintes választóvonal. A vonal alatti címsor kettes fejléc stílusú legyen. A második vonal 3-as méretű legyen. A további formázások értelemszerűek (dőlt, aláhúzott, stb.).

2.sz. ábra 1.1.b. feladat A szövegformázásnál ügyeljünk az egyes utasítások egymásba ágyazására. Pl.: <B> <I> <U> Állítás: </U></I> </B>

8

A feladat forrása:

1.2.a. Feladat Háttérkép, betűszín Az előző feladatot módosítsa úgy, hogy tegyen az oldalra háttérképet (Interneten keressen egy Pitagorasz képet). A kép színének megfelelően módosítsa a betűszínt úgy, hogy a szöveg jól olvasható maradjon.

Pl.:

<BODY background=pitagorasz.jpg text=yellow>

9

1.2.b. Feladat Betűméret, betűtípus, betűszín, kép beszúrás Az előző feladatot módosítsa úgy, hogy ne háttérképként tegyük a képet az oldalra, hanem egyszerűen helyezzünk fel egy képet a megfelelő helyre. Valamint az egyes bekezdésekre más és más betűméretet, betűtípust, és színt állítsunk be. A feladat rövid leírása: A főcím sötétzöld színű. Az alatta lévő bekezdés zöld színű, 4-es betűméretű és Arial Narrow betűtípusú. A bal margóhoz igazítva kerüljön egy 120x150-es képpont méretű kép, 3-as kerettel ellátva. Ha a képre visszük az egeret, jelenjen meg egy szállótipp. A következő címsor sötétkék szín, a hozzá tartozó bekezdés kék színű, 1-es betűméretű és Courier betűtípusú legyen. Az utolsó címsor szintén legyen sötétkék színű, az alatta lévő bekezdés pedig 4-es betűméretű, piros színű és Helvetica betűtípusú.

3.sz. ábra 1.2.b. feladat

10

A feladat forrása:

1.2.c. Feladat Szövegigazítás Az előző feladatot módosítsa úgy, hogy a második vonal alatti részt a következőképpen módosítsa: a címsor legyen középre igazítva, a hozzá tartozó bekezdés pedig jobbra igazítva.

11

1.2.d. Feladat Összetett feladat Készítse el az alábbi ábra szerinti HTML oldalt, mely a Naprendszer rövid általános jellemzését mutatja be. A feladat rövid leírása: Az oldal háttérszíne legyen világossárga, a betűszín barna. Az oldalra elhelyezett kép 250x180 képpont méretű, 20-as keretezésű, jobb margóhoz igazított legyen. A vízszintes ill. függőleges térköz legyen 20 képpontnyi. Készítsen szállótippet a képhez.

4.sz. ábra 1.2.d. feladat

12

1.3.a. Feladat Sorszámozás (számozott és számozatlan listák) Készítse el az alábbi ábra szerinti HTML oldalt, mely a biológia rendszertanát mutatja be. Az ábráról jól látszik, hogy a számozott ill. számozatlan listákat egyaránt alkalmaznunk kell. Sőt az állatvilág rendszertanánál a kettőt egymásba kell ágyazni. A betűszín legyen sötétkék.

5.sz. ábra 1.3.a. feladat

13

A feladat forrása:

14

1.3.b. Feladat Sorszámozás (definíciós lista) Készítse el az alábbi ábra szerinti HTML oldalt, mely Magyarország megyéit rendszerezi terület és megyeszékhely alapján.


15

A feladat forrása:

16

1.3.c. Feladat Sorszámozás (definíciós és számozott lista) Egészítse ki az előző feladatot úgy, hogy az egyes megyéket sorszámozza.

7.sz. ábra 1.3.c. feladat

17

1.4.a. Feladat Egyszerű táblázat készítése. (keretvastagság, táblázat színe, szélessége, igazítása, cellák tartalmának vízszintes igazítása) Készítse el az alábbi egyszerű táblázatot. A feladat rövid leírása: A táblázat címe és maga a táblázat háttérszíne legyen zöld, a betűszín a jól láthatóság kedvéért fehér. A táblázat középre igazított, 2 képpont a kerete, és 500 képpont széles. A táblázat első sorában lévő szavak maradjanak bal oldalon, a középső sor középre, a harmadik sor pedig legyen jobbra igazított.

8.sz. ábra 1.4.a. feladat A feladat forrás részlete:

18

1.4.b. Feladat Egyszerű táblázat készítése. (táblázat címének vízszintes igazítása, cellák tartalmának függőleges igazítása) Módosítsa az előző táblázatot a következő ábra alapján.

9.sz. ábra 1.4. b. feladat A feladat rövid leírása: A táblázat címe a táblázat felett és jobbra igazítva legyen. A táblázat színe, mérete, kerete, a betűszín, valamint a szavak igazítása nem változik. Az első cellában lévő alma szó 6-os betűméretű legyen. Az első sorban lévő szavak legyenek a felső kerethez igazítva, azaz függőlegesen fentre. A feladat forrás részlete:

19

1.4.c. Feladat Egyszerű táblázat készítése. (cellaegyesítés, cella háttérszíne, kép elhelyezése a táblázatba) Készítse el az alábbi egyszerű táblázatot. A feladat rövid leírása: A táblázat háttérszíne legyen világossárga. A cím félkövér, dőlt és jobbra igazított. Az első sor cellái legyenek egyesítve. A második sor első cellája lözépre igazított, a második balra. A harmadik sor első cellája jobbra igazított, háttérszíne (sötét) sárga, a második cella középre igazított.

10.sz. ábra 1.4.c. feladat A feladat forrás részlete:

1.4.d. Feladat Egyszerű táblázat készítése. Módosítsa az előző táblázatot a következő ábra alapján. A feladat rövid leírása: A HTML oldal háttérszín legyen világoszöld, a táblázat háttérszíne marad világossárga. A táblázat címe kék színű legyen, a többi rá vonatkozó formázás marad. A második sor első cellájába szöveg helyett egy kép kerüljön. Az utolsó sor első cellájában lévő szöveg színe zöld legyen.

20

11.sz. ábra 1.4.d. feladat A feladat forrás részlete:

21

1.4.e. Feladat Összetett táblázat készítése. Készítse el az alábbi ábrák szerinti táblázatot, mely a 9-12 évfolyam részére a történelem és állampolgári ismereteket rövid vázlatát mutatja be.

12.sz. ábra 1.4.e. feladat

13.sz. ábra 1.4.e. feladat

22

1.5.a. Feladat Hiperhivatkozások 1. Készítse el az alábbi ábrákon látható HTML oldalakat. A feladat rövid leírása: A főoldal a 14. sz. ábrán látható, mely egy rövid leírást ad a filozófia kifejezésről. Az oldalt célszerű index.html néven menteni, jelezvén, hogy ez a főoldal. Erről az oldalról két másik oldalra lehet ellátogatni két link segítségével. Egyrészt egy oldalra, mely filozófikus írásokat tartalmaz, ill. a Dunaújvárosi Főiskola honlapjára. Az első lehetőség választása után Voltaire: Cél, végső ok című írását lehessen elolvasni, és lehetőség nyíljon a főoldalra való visszalépésre.



23

A feladat forrás részletei: Index.html Az oldalra helyezett linkek színe alaphelyzetben zöld, a választás pillanatában sárga, és ha már választottuk, akkor kék színű legyen. Mindegyik hivatkozáshoz készüljön szállótipp is! A szöveg sorkizárt igazítású.

24

Köv.html A szöveg sorkizárt igazítású legyen, és ne feledkezzünk meg a visszalépést biztosító linkről sem!

1.5.b. Feladat Hiperhivatkozások 2. Módosítsa az előző feladatot úgy, hogy a Főiskola oldala egy új ablakban nyíljon meg. Amit módosítani kell: Az index.html oldalon elhelyezett második link a következőképpen nézzen ki: <A HREF="http://www.duf.hu" title="Dunaújvárosi Főiskola" target=blank> <I> <B>Dunaújvárosi Főiskola </B> </I> </A>

25

1.6. Feladat Tartalomjegyzék készítés. Készítse el az alábbi két ábrán látható HTML oldalt, mely egy egyszerű tartalomjegyzéket tartalmaz. Az egyes választási lehetőségek: Márai Sándor: A lustaságról; Hamvas Béla: Barátság és Pilinszky János: Az alázatról című rövid töredékei legyenek. Mindezeket az Interneten könnyedén megtalálhatja. A feladat rövid leírása: Az oldal háttérszíne legyen világossárga, a betűszín barna. Az oldal elejére kerüljön egy 3 választási lehetőségből álló, sorszámozott tartalomjegyzék. Bármelyiket választjuk a hozzá tartozó rövid töredék jelenjen meg a képernyőn, és legyen lehetőségünk a tartalomjegyzékbe való visszaugrásra. A hivatkozások színe legyen kék, ha éppen rákattintunk egy linkre, akkor sárga, ha pedig már választottuk valamelyiket, akkor piros színnel jelenítsük meg azt. A második töredékhez tartozó bekezdés betűtípusa legyen Arial, 4-es betűméretű. Ugyanebbe a bekezdésbe helyezzünk el egy képet, a bal margóhoz igazítva Hamvas Béláról. A vízszintes térköz 10 képpont, a kép kerete 3 képpont legyen, és szállótippet is készítsen a képhez.

16.sz. ábra 1.6. feladat

26

17.sz. ábra 1.6. feladat A feladat forrás részlete:

27

1.7.a. Feladat Térképkészítés 1. Készítse el az alábbi ábrákon látható HTML oldalakat. A feladat rövid leírása: Az első ábrán (terkep.html) egy Magyarország térkép látható. Ha a térképen Budapestre kattintunk, akkor egy újabb oldal (Bp.html) töltődjön be az előző helyére, mely Budapestről ad számunkra röviden információt. Terkep.html Tehát el kell helyezni egy képet (Mo.bmp) az oldalon, melynek egy része (kb. egy környi terület Budapest területe felett) hiperhivatkozásként fog funkcionálni. Ehhez meg kell keresni a kör középpontját (459,299) és meg kell határozni a kör sugarát (26). Így kijelöljük a hivatkozás területét (kör).

28

Bp.html Legyen az oldal háttérszín világoszöld, a betűszín sötétzöld, a betűtípus Verdana. A cím legyen 5-ös betűméretű és középre igazított. A további szövegrész normál betűméretű és sorkizárt. Kerüljön egy 200x150 képpontnyi kép (Dunáról) az oldalra a bal margóhoz igazítva. A vízszintes térköz 10, a függőleges 20 képpontnyi, a keret vastagsága 2 képpont. Készüljön a képhez szállótipp is. Az oldalról nyíljon lehetőség a visszalépésre az eredeti térképünkhöz.

18.sz. ábra 1.7.a. feladat –terkep.html

29

19.sz. ábra 1.7.a. feladat – Bp.html A feladat forrás részletei: Terkep.html

Bp.html

30

1.7.b. Feladat Térképkészítés 2. Folytassuk az előző feladatot. Válasszunk ki további két megyét, és ha azok területére kattintunk, akkor töltődjön be egy-egy oldal, melyek a megyék főbb jellegzetességeit mutatják be részletesen, képekkel illusztrálva. A megyék leírásában szerepeljenek a megyeszékhelyek megnevezései is. Ha azokra kattintunk, akkor új ablakokban jelenjenek meg a városok bemutatásairól szóló oldalak. 1.8.a. Feladat Keretek készítése 1. Készítse el az alábbi ábrákon látható HTML oldalakat. A feladat rövid leírása: Az ábrán a főoldal (index.html) látható. A dokumentum két egyenlő részre van bontva függőlegesen, és mindegyik oldalra egy-egy HTML dokumentumot töltünk be. Nevezetesen a bal.html és a jobb.html oldalakat. Tehát feladatunk, hogy elkészítsük külön-külön ezt a két oldalt, ill. a főoldalt.

31

20.sz. ábra 1.8.a. feladat A feladat forrás részletei: Index.html A főoldal mindkét részén a gördítősáv használata legyen letiltva.

Bal.html A háttérszín világossárga, betűszín barna. A cím középre igazított, a további szöveg sorkizárt igazítású, 4-es betűméretű, téglavörös színű.

32

33

Jobb.html A háttérszín világossárga, betűszín barna. A cím középre igazított, a további szöveg sorkizárt igazítású, 4-es betűméretű, barna színű. Helyezzünk egy képet is az oldalra, melyhez készítsünk szállótippet is.

1.8.b. Feladat Keretek készítése 2. Módosítsuk az előző feladatot úgy, hogy a két ablakrész között ne legyen választóvonal. Amit módosítani kell: Az index.html oldalon: <FRAME src="bal.html" frameborder=0 > <FRAME src="jobb.html" frameborder=0 > 1.8.c. Feladat Keretek készítése 3. Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az ábrán a főoldal (index.html) látható. A dokumentum két egyenlő részre van bontva függőlegesen, a jobb oldalon mindössze egy képet jelenítünk meg, a baloldalon pedig az előző példákban elkészített HTML oldalt. Annyi a különbség a

34

baloldalon az eddigiekhez képest, hogy vízszintes ill. függőleges margókat kell beállítani a szöveg körül. Bal ill. jobb oldalon 80 képpontnyit, a felső és alsó margó pedig 100 képpontnyi legyen.

21.sz. ábra 1.8.c. feladat A feladat forrás részletei: Jobb.html <FRAME src="bal.html" marginwidth=80 marginheight=100>

1.8.d. Feladat Keretek készítése 4. – Összetett feladat Készítse el az alábbi ábrákon látható HTML oldalakat. A feladat rövid leírása: Az első ábrán a főoldal (index.html) látható. A dokumentum három részre van bontva: vízszintesen 30%-70% arányban, az alsó ablakrész pedig függőlegesen fele-fele arányban. A felső ablakrészbe a rózsákról helyezzünk el egy HTML dokumentumot (felso.html). Az oldal háttérszíne világossárga, a betűszín zöld. A főcím barna színű legyen, és 1-es fejléc stílusú valamint középre igazított. A szöveg 4-es betűméretű, és középre igazított. A bal oldali ablakrészbe helyezett dokumentum (bal.html) jellemzői: Az oldal háttérszíne világossárga, a betűszín zöld. A főcím 1-es fejléc stílusú valamint középre igazított. A szöveg 4-es betűméretű, és sorkizárt. A „Rengeteg változata közül csak néhányat említünk...” sor piros színnel jelenjen meg az oldalon, valamint 4-es betűmérettel. Az alatta lévő felsorolás egy definíciós lista, melynek első két listaeleme hiperhivatkozásként funkciónál. Azaz, ha pl. a Landora rózsafajtára kattintunk, akkor egy másik oldal (landora.html) töltődjön be a baloldalra, mely a fajtára jellemző képet ill. egy visszalépésre szolgáló linket tartalmazzon.

35

A jobboldali ablakrészre (jobb.html) ugyanazok a beállítások jellemzőek, mint a baloldalira.



36

1.8.e. Feladat Beágyazott dokumentumok (Iframe) készítése Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az ábrán a főoldal (index.html) látható. A dokumentum egy rövid leírást tartalmaz a rózsákról, ill. egy beágyazott dokumentumot (bal.html) a tearózsákról és a vágórózsákról. A keret mérete legyen 400x500 képpontnyi, vízszintes maró 60, a függőleges margó 40 képpont.

24.sz. ábra 1.8.e. feladat A feladat forrás részlete: Index.html

37

1.9.a. Feladat Összetett feladat 1. Készítse el az alábbi ábrákon látható HTML oldalakat. A feladat rövid leírása: A 25.sz. ábrán a főoldal (index.html) látható. Az oldal keretekből épül fel. A felosztást képfeliratok formájában láthatjuk. A felső ablakrészbe az Irodalmi kávéház kép kerül, mellé pedig egy csésze kávét ábrázoló kép. Az alatta lévő ablakrész bal oldalára kerülnek a linkek (képként készítsük el őket, hogy egyediek legyenek). Mindegyik linkhez készüljön szállótipp is. Ha valamelyikre rákattintunk, akkor a hozzá tartozó HTML oldal a jobb oldali ablakrészben jelenjen meg. Amíg nem választunk a baoldali listából, addig a jobb oldalon egy kávéházat ábrázoló kép legyen középre igazítva megjelenítve. A kép 640 px széles, 430 px magas legyen, és a függőleges térköz 40 px. Ehhez a képhez is készüljön szállótipp. (Lásd.: 25.sz. ábra.) Minden oldal háttérszín legyen világossárga.

25.sz. ábra index.html

85%, 15%

27%, 73%

25%, 17%

38

26.sz. ábra A jobboldali ablakrész tartalma változik. A kávéház és irodalom című oldalon jól látszik, hogy a cím középre igazított, a többi szövegrész pedig sorkizárt igazítású. Az oldal tartalmazzon egy képet, mely a Hungária kávéházat ábrázolja, és a bal margóhoz van igazítva. Készüljön a képhez szállótipp is. A kép szélessége és magassága 100 px, a vízszintes térköz 10 px, a függőleges térköz 20 px legyen. Az oldal háttérszíne világossárga, a betűszín gesztenyebarna. Ha a Versek a szeretetről című linket választjuk, akkor a jobb oldalon a versek.html töltődjön be, mely ismét linkeket fog tartalmazni. Ezek közül bármelyiket választjuk, a hozzá tartozó vers szintén a jobboldali ablakrészben jelenjen meg. Az oldal végén pedig adjunk lehetőséget a felhasználónak, hogy visszaléphessen a vers.html oldalhoz. Azaz adjunk újabb választási lehetőséget a versek közül.

39

27.sz. ábra versek_html

28.sz. ábra Ady.html

40

A verseket tartalmazó oldalon a betűtípus legyen Coronet típusú, a betűméret pedig 5-ös betűméretű. A versek legyenek középre igazítva. 1.9.b. Feladat Összetett feladat 2. Készítse el az előbbi HTML oldalakat, csak ne kereteket használjon, hanem táblázatok segítségével oldja meg a megjelenítést.

41

2. CSS alapok gyakorlása 2.1.a. Feladat Fejléc stílus – style paraméter használata Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Fejléc formázására hozzunk létre stílusokat. A style paraméter segítségével készítsük el az egyes stílusokat. Az egyes fejléc stílusok jellemzői a következők: <H1> - sötétzöld színű, 7-es betűméret, Arial betűtípus, középre igazított. <H2> - piros színű, 5-ös betűméret, Verdana betűtípus, jobbra igazított. <H3> - kék színű, 4-es betűméret, Courier betűtípus, balra igazított. <H4> - cyan színű, 3-as betűméret, Arial betűtípus, jobbra igazított. <H5> - burlywood színű, 2-es betűméret, clarendon betűtípus, balra igazított. <H6> - deeppink színű, 1-es betűméret, impact betűtípus, jobbra igazított.


42

A feladat forrás részlete:

43

2.1.b. Feladat Fejléc stílus – STYLE utasítás használata Készítse el az előző HTML oldalt, csak a style paraméter helyett használja a STYLE utasítást. A feladat forrás részlete: Fejlec.html

2.1.c. Feladat Fejléc stílus – külső stíluslap használata Készítse el az előző HTML oldalt, csak használjon külső stíluslapot (fejlec.css) a feladat megoldásánál. Azaz a fejléc formázásával kapcsolatos utasításokat külön állományba tesszük a tanultak alapján. Az állományt .css kiterjesztéssel mentsükl. A HTML dokumentumunkban (fejlec.html) erre az állományra hivatkozunk a LINK utasításban. A feladat forrás részlete: Fejlec.html

44

Fejlec.css H1 {size:7; color:darkgreen; font:arial; text-align=center} H2 {size:5; color:red; font:verdana; text-align=right} H3 {size:4; color:blue; font:courier} H4 {size:3; color:cyan; font:georgia; text-align=right} H5 {size:2; color:burlywood; font:clarendon} H6 {size:1; color:deeppink; font:impact; text-align=right} 2.2.a. Feladat Szegély tulajdonságok 1. Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az oldal két alfejezetéhez egy-egy rövid bekezdés tartozik. Ezen bekezdések keretezését állítjuk be CSS utasítások segítségével. Az első bekezdés köré egy rózsaszín dupla vonalakból álló keretet készítsünk. A másik bekezdés keretei a következők legyenek: Fent: sárga színű, folyamatos vastag vonal Lent: piros színű, pontozott vastag vonal Baloldalon: zöld színű, közepes vastagságú dupla vonal Jobb oldalon: kék színű, vékony domború vonal. Ez utóbbi bekezdéshez egyedi stílust készítsünk. Feltételezve, hogy az oldalra helyezett további valamennyi bekezdésre az első stílust alkalmazzuk, kivétel a második, aminek keretét egyedileg állítottuk be ilyenre.


45


2.2.b. Feladat Szegély tulajdonságok 2. Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az oldal egy egyszerű táblázatot tartalmaz, melynek kerettulajdonságait állítjuk be CSS utasítások segítségével. A keret színe minden oldalon legyen kék. A négy szegély vonalvastagsága sorra a következő: Fent: vékony Lent: közepes Baloldalon: vastag Jobb oldalon: vastag A keret (szegély) stílusa dupla vonal legyen. A táblázat szélessége 500 képpont, keretvastagsága 1 képpont. A táblázat háttérszín világoszöld, a betűszín fekete. A bal alsó cella háttérszíne sárga.


46


2.3.a. Feladat Táblázat formázása 1. Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az oldal egy egyszerű táblázatot tartalmaz, mely három európai folyó rövid jellemzését mutatja be. A táblázat főbb tulajdonságai: A címsor (1.sor) és az első oszlop háttérszíne kék. A táblázat háttérszíne világossárga. A képek legyenek középre igazítva, és mindegyikhez készüljön szállótipp is. A táblázat egyéb tulajdonságait CSS utasítások segítségével állítjuk be: A cím kerüljön baloldalra. A táblázat fejlécének és az egyes celláknak a keretvastagsága legyen 2 px, sima, sötétzöld színű vonal. A táblázat kerete (kék színű, 4 px, sima vonal) és a cellák keretei kerüljenek összevonásra.

47

32.sz. ábra 2.3.a. feladat A feladat forrás részlete:

2.3.b. Feladat Táblázat formázása 2. Készítse el az alábbi ábrán látható HTML oldalt. Az oldal egy egyszerű táblázatot tartalmaz, mely egy kalóriatáblázatot jelenít meg. A feladat rövid leírása: A táblázat tulajdonságait CSS utasítások segítségével állítjuk be: A táblázat fejlécének (első sor első két cella) a keretvastagsága legyen 4 px, sima, piros színű vonal.

48

A táblázat fejlécének (első sor második két cella) a keretvastagsága legyen 4 px, sima, narancssárga színű vonal. Egyedi stílussal készítsük el! A cellák kerete zöld színű, 2 px, sima vonal. A táblázat kerete (kék színű, 4 px, sima vonal) és a cellák keretei ne kerüljenek összevonásra. Csak a tésztákban található kalóriaértékek kerüljenek középre. Ezt szintén egyedi stílussal valósítsuk meg.



49

50

2.4.a. Feladat Lista formázása 1. Készítse el az alábbi ábrán látható HTML oldalt. Az oldalon két halas receptet mutassunk be röviden. A hozzávalókat listaszerűen soroljuk fel.


51

A feladat rövid leírása: Az oldal háttérszín világos kék, a betűszín kék. A listák formázását CSS utasítások segítségével valósítsuk meg. Az első lista címsora (Hozzávalók) kerüljön egy szintbe a listaelemekkel, a másodiké viszont kerüljön beljebb. Az első lista a,b,c sorszámozott legyen, a második egyesével sorszámozott. A harmadikat pedig számozatlan listának készítsük el, és az egyes listaelemek elé egy kép kerüljön. A feladat forrás részlete:

52

2.4.b. Feladat Lista formázása 2. Készítse el az alábbi ábrán látható HTML oldalt. Az oldal jogi ismereteket tárgyal felsorolás formájában.

35.sz. ábra 2.4.b. feladat A feladat rövid leírása: Az oldal háttérszín világos kék, a betűszín fekete. A jogi ismertek felsorolásában használt listákat egymásba kell ágyazni.

53


2.5.a. Feladat Táblázat és lista formázása Készítse el az alábbi ábrán látható HTML oldalt. A feladat rövid leírása: Az oldal egy egyszerű táblázatot tartalmaz, mely a szívinfarktus tüneteit és kezelési lehetőségeit mutatja be számunkra. A táblázat főbb tulajdonságai: A cím kerüljön középre, legyen kék színű, dőlt, és aláhúzott betűstílusú. A táblázatba helyezett szöveg piros színű legyen.

54

A kép listaelemként, és középre igazítva kerüljön a jobboldali cellába, melynek ne jelenjen meg a sorszámozása (CSS utasítás segítségével valósítsa meg!). Természetesen szállótipp is készüljön a képhez. A táblázat és listák egyéb tulajdonságait CSS utasítások segítségével állítjuk be: A táblázat celláknak a keretvastagsága legyen 2 px, sima, piros színű vonal. A táblázat kerete (piros színű, 3 px, sima vonal) és a cellák keretei ne kerüljenek összevonásra. Mindkét lista számozatlan lista legyen. Az egyik lista címsora kerüljön egy szintbe a listaelemekkel, a másiké viszont kerüljön beljebb.


55


2.5.b. Feladat Összetett feladat. Készítse el az 1.9.a. feladatban szereplő HTML oldalakat, csak ne kereteket használjon, hanem DIV utasítások és CSS segítségével oldja meg a megjelenítést.

56

3. XHTML alapok gyakorlása 3.a. Feladat Összetett feladat Készítse el a 2.d (Naprendszer) összetett feladatot, mely a Naprendszer rövid általános jellemzését mutatja be a HTML alapok gyakorlásánál látható külalakkal, de immár XHTML nyelven! Mivel a feladatot már egyszer HTML nyelven elkészítette, ezért a jegyzetben található XHTML szabályok segítségével, azok előírásainak betartásával (,melyek szükségesek, hogy egy HTML dokumentum XHTML nyelven is érvényes legyen) írja át az oldal forrását! Amennyiben nem készítette volna el már korábbi tanulmányai során a szóban forgó oldalt, most hozza létre, de szigorúan az XHTML szabályoknak megfelelően. A feladat elkészítése után végezzen az oldalon validitás-vizsgálatot. Ehhez segítség: http://validator.w3.org/ http://www.validome.org/validate A feladat rövid leírása:

− 1.-3. sor: A validitás vizsgálatához pontosan így adja meg a nyelvre DTD típusra utaló beállításokat! A Transitional DTD (átmeneti dokumentumok) használata akkor célszerű, ha az XHTML alkalmazása mellett kompatibilitást szeretnénk elérni a meglévő Weboldalakkal és a régebbi típusú böngészőkkel.

− Minden tag minden eleme kisbetűs!

− Szigorúan követi a <hmtl><head> és <body> szerkezetet!

− Minden értéket ”…” idézőjelek közé kell tenni, még a számokat is!

− Az igazításra nem jó a p align. Helyette a <div align=”…”> …</div> tag-párt kell használni! A <div> taget nem előzheti meg például a <font> tag.

− A képek esetén az <img> tag-en belül meg kell adni az alt tulajdonságot is és az egész tag önmagában záródik! <img src="naprend.jpg" alt="Naprendszer" border="20" align="right" width="250" height="180" hspace="20" vspace="20"/>

− A <p> tag sem maradhat lezáratlanul!

− A sortörés tag-je önmagában záródik: </br>

57

A forrásállomány:

58

Eredmény a validator.w3.org validátorral vizsgálva:

37.sz. ábra 3.a feladat – Validátor 1.

Vagy: Eredmény a validome.org/validate validátorral vizsgálva:

38.sz. ábra 3.a. feladat – Validátor 2.

59

3.b. Feladat Keretek készítése – Összetett feladat Készítse el a 8.d (Keretek- Rózsa) összetett feladatot, mely egy kereteket tartalmazó honlap, a HTML alapok gyakorlásánál látható külalakkal, de immár XHTML nyelven! Mivel a feladatot már egyszer HTML nyelven elkészítette, ezért a jegyzetben található szabályok segítségével, azok előírásainak betartásával (,melyek szükségesek, hogy egy HTML dokumentum XHTML nyelven is érvényes legyen) írja át az oldal forrását! Amennyiben nem készítette volna el már korábbi tanulmányai során a szóban forgó oldalt, most hozza létre, de szigorúan az XHTML szabályoknak megfelelően. A feladat elkészítése után végezzen az oldalon validitás-vizsgálatot. Ehhez segítség: http://validator.w3.org/ http://www.validome.org/validate A feladat rövid leírása: Az első ábrán a főoldal (index.html) látható. A dokumentum három részre van bontva: vízszintesen 30%-70% arányban, az alsó ablakrész pedig függőlegesen fele-fele arányban. A felső ablakrészbe a rózsákról helyezzünk el egy HTML dokumentumot (felso.html). A bal oldali ablakrészbe helyezett dokumentum (bal.html) és a A jobboldali ablakrészre (jobb.html) ugyanazok a beállítások jellemzőek. Mindkettőben van egy definíciós lista, melynek első két listaeleme hiperhivatkozásként funkcionál. Azaz, ha pl. a Landora rózsafajtára kattintunk, akkor egy másik oldal (landora.html) töltődjön be a baloldalra, mely a fajtára jellemző képet ill. egy visszalépésre szolgáló linket tartalmazzon. A feladat rövid leírása:

− 1.-3. sor: A validitás vizsgálatához pontosan így adja meg a nyelvre DTD típusra utaló beállításokat! A Frameset DTD (keretes dokumentumok) használata akkor célszerű, ha az XHTML alkalmazása mellet kompatibilitást szeretnénk elérni a HTML keretek alkalmazásával, amelyek a Weblapot keretekre (régiókra) osztják. Mivel az a honlap kereteket tartalmaz, ezért nem is lehetne más DTD típusdefiníciót megadni.

− Az előző feladatban leírt szempontok erre a dokumentumra is igazak, ismételje át azokat is! Valamit:

− A keretek megadásakor a <frame> tag is önmagában záródik: <frame src="felso.html" name="felso"/>

− A törzset, mely egy nem-keret-tulajdonság <noframe>…</noframe> tag-ek közé kell rakni!

60

Az index.html oldal forrásállománya:

Validitás-vizsgálat után (validator.w3.org):

39.sz. ábra 3.b. feladat – Validátor 1.

61

A felso.html oldal forrásállománya:



62

A bal.html oldal forrásállománya:



63

A jobb.html oldal forrása:



64

A bal oldali keretben megjelenő Landora rózsafajta nevére kattintva új ablakban megnyílik a rózsa képe. A forrása:

Ennek analógiájára formázza át a további három virágnévre kattintás eredményéül megnyíló HTML dokumentumokat XHTML-validdá!

65

4. JavaScript alapok gyakorlása 4.1. Adatbekérés és kiíratás 4.1.a. Feladat Kiíratás a képernyőre (alert): Készítsen egy olyan programot, mely kiszámítja egy négyzet kerületét és területét, ha az oldalhossz előre adott, a=5cm. Az eredményt egy üzenetablakban jelenítse meg! A feladat rövid leírása:

− Az egész szkriptet a HTML dokumentum törzsébe <body> kell elhelyezni a <script>…</script> tag-ek közé.

− A program elkészítéséhez három változóra van szükség. Az elsőben (a) tároljuk a négyzet oldalhosszát, a másodikban (k) a kerület, a harmadikban (t) pedig a terület értékét számítjuk ki.

− A kiszámított kerület és terület értékeket a feladatkiírásnak megfelelően egy üzenetablakban jelenjen meg, ehhez az alert( ) függvény használata szükséges.

− A függvényen belül több különböző dolgot is el lehet helyezni. Ilyenkor ügyelni kell arra, hogy a magyarázó szöveges részeket ”…” idézőjelek közé kell írni, hozzájuk a változókat pedig +…+ pluszjelekkel fűzzük!

− Mivel az eredmény több részből áll, ezeket tagolva jelenítse meg, azaz külön-külön sorban a kerületet és a területet, ezért az alert( ) függvényen belül a többsoros szöveg kiíratásának módja a \n speciális karakter használata, mely sortörést eredményez.

A forrásprogram:

66

A végeredmény megjelenítése:

43.sz. ábra 4.1.a. feladat megoldása

4.1.b. Feladat Adatbekérés, és kiíratás (prompt és document.write) Készítsen egy olyan HTML dokumentumot, mely a Hallgatói Bankfiók honlapját tartalmazza. Az oldalon kérje be a felhasználótól bankbetétjének értékét, írassa ki a kamat értékével együtt, majd számítsa ki és írja ki, hogy mennyi lesz a betét értéke egy év után a kamattal együtt! A továbbiakban azt is írassa ki, hogy mennyi lesz a betét kamattal megnövelt értéke 2,3,4 és 5 év elteltével! A feladat rövid leírása: Az oldal tartalmaz HTML karakter és háttérformázásokat, melyeket már korábbi tanulmányaik során elsajátítottak. Ismétlésül:

− A meta adatok a honlapról szolgáltatnak különböző információkat. Elhelyezésük mindig a fejrészben történik a <head>…</head> tag-ek között.

− 2. sor: meta name=”autor” lang=”hu” content=”hallgató” a magyar böngészőprogramoknak: a honlap készítője;

− 3. sor: ugyanez, de angol nyelvű böngészők esetén;

− 4. sor: meta name=”last update” content”2008.03.26” a böngészőprogramoknak: a honlap módosításának időpontja;

A következő rész a honlap külalakjának alapmegadását tartalmazzák: − 5. sor: a honlap betűinek alapjellemzői: alap betűtípus, alap betűszín,

alap betű méret

− 7. sor: <body bgcolor=silver> a honlap törzsének alap háttérszíne és <link=”red”> a „még nem látogatott” és <vlink=”blue”> a „már látogatott” linkek színei.

− 8.-9.-10. sor: különböző szintű fejléc stílusok megadása középre zárva, más-más színnel megjelenítve. Mindegyik után egy <br/> sortörés magában záródó tag található.

A JavaScript programrész következik: − 11. sor: a JavaScript programrész kezdete

− 12-15. sor: var kulcsszóval különböző változók megadása. (Van köztük töltött változó is!)

− 16. sor: prompt() függvény segítségével bekéri a gép előtt ülőtől a betét értékét,

67

− 17. sor: document.write() függvénnyel félkövér kiíratja azt kiemelve félkövérre és aláhúzottan formázva a felhasználó által megadott értéket!

− 18.sor: kamat2 változóba kiszámítani az egy éves kamat értékét a Math.round matematikai objektum kerekítést végző elemfüggvényével.

A továbbiakban az összetett feladat különböző részegységeinek számítása és képernyőre íratása következik.

A forrásprogram:

68

Eredmény: Adatbekérés prompt() függvénnyel:

44.sz. ábra A 4.1.b. feladat adatbekérő ablaka

A végeredmény (kamatos kamattal növelt értékek) kiíratása:

45.sz. ábra A 4.1.b. feladat végeredménye

69

4.1.c. Feladat Kiíratás a képernyőre – Heron képlet Készítsen egy olyan programot, mely kiszámítja egy tetszőleges háromszög területét a Heron képlet segítségével! Az oldalhosszúságok előre adottak: a=3cm, b=4cm, c=5cm, ezeket írassuk is ki, mielőtt kiszámolnánk az eredményt! Emlékeztetőül: A Heron képlet: ,ahol A végeredmény kiíratása:

46.sz. ábra A 4.1.c. feladat végeredménye

4.1.d. Feladat Adatbekérés és kiíratás; Math objektum – Heron képlet 2. Írja át a fenti programot úgy, hogy a bemenő adatokat a gép előtt ülőtől kérje be, majd azokkal számolja ki a háromszög területét! A feladat rövid leírása:

− Adatbekérés a változó létrehozásakor közvetlenül történjen a prompt() függvénnyel var a=window.prompt(”Adja meg a háromszög ’a’ oldalának hosszát!”,”3”); A prompt függvényen belül jelenleg két ”” idézőjelek közti rész van, melyeket egy , vesző választ el egymástól. Az első ” ” idézőjelek közti rész az adatbekérő ablakban megjelenő szöveg (kérés a felhasználó felé), a másik ” ” idézőjelek közti rész pedig egy előre megadott mintaérték (mely csak tájékoztató jellegű, milyen fajta adatot is vár a program, nem kötelező elfogadni, mást is meg lehet adni…)

− Ne felejtse el, hogy az adatbekérő ablak segítségével bekért adatokat egész számokká kell alakítani a félkerület számolása során!

− A Heron képlet megadásánál a gyökvonást a Math objektum sqrt() elemfüggvényével oldja meg, pl.: var t=Math.sqrt(s*(s-a)*(s-b)*(s-c));

− Kiíratást a document.write() függvénnyel oldja meg, például: document.write("A háromszög területe: T="+t+" cm<sup>2</sup>");

70

Eredmény adatbekérésre:

47.sz. ábra 4.1.d. feladat adatbekérő ablaka

A végeredmény hasonlóképpen néz ki, mint az 1.3. feladat esetén, ezért csak az újdonságként bevezetett adatbekérő ablak képét mutatja a feladatleírás. 4.1.e. Feladat Adatbekérés és kiíratás; Math objektum –kocka térfogata Adott egy kocka alakú vizes tartály, melybe egy szintén kocka alakú vastömböt helyeznek. Hány köbméter vizet fog kiszorítani a vastömb? Írjon egy olyan programot, melyben két egymásba helyezett kocka térfogata közti különbséget számítja ki! A két kocka élhosszait a felhasználótól kérje be egy adatbekérő ablak segítségével, majd írassa ki egymás alá a kockák élhosszait, térfogatukat, végezetül pedig kiemelve a térfogatok különbségét! A külalak is számít! A feladat rövid leírása:

− Fontos: mivel a feltétel vizsgálatról még nem volt szó, ezért hívja fel a figyelmet arra, hogy a tartály élhosszának nagyobbnak kell lenni a vastömbénél! Máskülönben negatív érték lesz az eredmény, ami ennél a fajta feladatnál nem megoldás!

− A térfogat számításoknál használja a Math objektum pow() elemfüggvényét, pl.: var v1=Math.pow(a,3);

71


48.sz. ábra 4.1.e. feladat adatbekérő ablakai

A végeredmény kiíratásra:

49.sz. ábra 4.1.e. feladat végeredményének kiíratása

4.1.f. Feladat Adatbekérés és kiíratás, Math objektum - körgyűrű Egy program segítségével határozza meg egy adott vastagságú körgyűrű területét! A számításhoz szükséges adatokat a gép előtt ülőtől kérje be egy adatbekérő ablak segítségével, majd írassa is ki azokat egymás alá. Továbbá írassa ki a részszámítások eredményeit is egymás alá, végezetül pedig kiemelve a körgyűrű területét! A külalak is számít! A feladat rövid leírása:

− A körgyűrű területét úgy tudjuk meghatározni, ha ismerjük a két egymást fedő koncentrikus kör sugarát. (Koncentrikusak a körök, ha a középpontjuk egy pontba esik).

− A feladat elvégzéséhez tehát két sugár értéket kell bekérni, majd kiszámolni külön-külön a két kör területét, végezetül pedig a két kör területének különbségét.

72

− Körökről lévén szó a területet a képlet segítségével kell kiszámítani. A szkriptben a Math objektum pow() elemfüggvényét és a PI elemváltozóját használja: var t1=Math.pow(r1,2)*Math.PI;

− A PI azonban egy végtelen tizedes tört, ezért kerekítsen két tizedes jegyre! A kiíratásnál használja a Math objektum round() elemfüggvényét! document.write(”A nagyobbik kör területe: ” + Math.round(t1*100)/100 + ” cm^2”+”<p>”);

4.1.g. Feladat Adatbekérés és kiíratás, Math objektum – másodfokú Készítsünk egy programot a másodfokú egyenlet megoldására. A tanultak alapján a lehetséges két gyök kiszámítása a megoldó-képlettel történjen:

és A feladat rövid leírása:

− A szkriptben használjuk a Math objektum pow()és sqrt() elemfüggvényeit!

− A megoldó-képletnek 3 féle eredménye lehet a diszkrimináns ( ) értékétől függően: ha D=0, akkor egy gyöke van: ; ha D>0, akkor két valós gyöke van: ; ha D<0, akkor nincs megoldás:

− Az a, b, c értékeket a gép előtt ülőtől kérje be egy-egy adatbekérő ablak segítségével, majd a megoldást egy üzenetablakban jelenítse meg!

4.2. Függvények 4.2.a. Feladat Függvények - összegzés, átlag Készítsen egy olyan programot, mely bekér a gép előtt ülőtől három egymástól különböző számot, majd saját függvény segítségével kiszámítja a számok összegét és átlagát, majd kiíratja az eredményeket a képernyőre! A feladat rövid leírása:

− 1. sor: A HTML dokumentum nyitó tag-je − 2. sor: A HTML dokumentum fej részének nyitó tag-je

− 3. sor: A HTML dokumentum címsorának megadása <title>…</title> tag-ek között

− 5. sor: A JavaScript rész kezdete − 6. sor: A függvényt mindig a HTML dokumentum fejében kell definiálni! A

szamol() függvény definiálása a függvényfej megadásával kezdődik: function szamol() , mely nem vár bejövő adatot.

− 7. sor: { a függvény törzse − 8.-9.-10. sor: A szamol() függvényben három számot kér be és rögtön ki

is íratja. Az adatbekérést a változó definiálásakor oldja meg adatbekérő

73

ablakkal: var a=window.prompt("Adja meg az 'a' számot!", "10");

− 11.-12. sor: a bekért értékek kiíratása magyarázó szöveggel: document.write(…);

− 13. sor: az osszeg változó létrehozása és számítása. Azonban mielőtt a számításra kerülne a sor a bekért számokat tartalmazó változókat (a,b,c) át kell alakítani egész számmá. Minderre azért van nagy szükség, mert amikor a három szám bekerült a számára deklarált (létrehozott) változóba, akkor szövegként viselkednek. Szövegként pedig nem lehet őket összeadni! Az egész számmá alakítás függvénye a parseInt(). var osszeg=parseInt(a)+parseInt(b)+parseInt(c);

− 14. sor: a kiszámolt összeg kiíratása a képernyőre.

− 15. sor: az atlag változó létrehozása.

− 16. sor: az atlag változó tartalmának kiíratása a képernyőre.

− 17. sor: } a szamol() függvény lába.

− 18. sor: a szkript (script) és a HTML dokumentum fej (head) lezárása − 19. sor a HTML dokumentum törzse (body) kezdete és az alap háttérszín

megadása. − 20. sor: újabb szkript rész kezdete.

− 21. sor: a szamol() függvény meghívása.

− 22. sor: újabb szkript rész lezárása. − 23. sor: a törzs lezárása − 24. sor: a HTML dokumentum lezárása.

A forrásprogram:

74

Eredmény: Adatbekérésre:

50.sz. ábra 4.2.a. feladat adatbekérő ablakai

A végeredmény kiíratása:

51.sz. ábra 4.2.a. feladat végeredményének kiíratása

4.2.b. Feladat Függvények – összegzés; Math objektum Készítsen egy olyan programot, mely bekér két számot a gépe lőtt ülőtől és egy saját készítésű függvény segítségével összeadja azokat, majd a végeredményt kiíratja a képernyőre! A feladat rövid leírása:

− Emlékeztetőül: az adatbekérő ablak segítségével bekért adatokat a későbbi számítások sikeres elvégzése érdekében át kell alakítani számmá! Jelen példa a parseFloat() függvényt tartalmazza, ami alkalmassá teszi a függvényt, hogy tizedes törtekkel is dolgozhasson!

− A függvény két különböző értékkel dolgozik.

75

A forrásprogram:


52.sz. ábra 4.2.b. feladat adatbekérő ablakai


53.sz. ábra 4.2.b feladat végeredményének kiíratása

76

4.2.c. Feladat Függvények – hatványozás; Math objektum Készítsen egy olyan programot, melyben egy saját függvénnyel köbre emeli a gép előtt ülőtől bekért számot, majd a számolás végeredményét egy másik saját készítésű függvénnyel kiíratja a képernyőre! A feladat rövid leírása:

− A JavaScriptben lehetőség van arra, hogy az egyik függvény használja a másikat. E feladatban két saját készítésű függvényt kell létrehozni kiiratas és hatvanyoz néven. A függvényeket a HTML dokumentum fejében definiáljuk.

− 5.-6.-7. sor: A szükséges változók létrehozása a honlap fej JavaScript programrészében. Mindegyik változó töltött, tehát kezdeti értékkel rendelkezik. A ’a’ változó értékét ráadásul egy adatbekérő ablak segítségével a gép előtt ülőtől várja a program.

− 8. sor: a kiiratas() függvény létrehozása. A feladata az lesz, hogy a megkapott adatot kiírja.

− 12. sor: létrehozzuk a hatvanyoz() függvényt,

− 14. sor: a hatvanyoz() függvény elvégzi a köbre emelést a megkapott alapszámon. A köbre emeléshez a Math objektum pow() elemfüggvényét használja!

− 15. sor: a hatvanyoz() függvény használja a kiiratas() függvényt a kapott eredmény kiíratásához.

− 18. sor: A hatvanyoz() függvény használata. Az általa szolgáltatott hatványt az eredmény változóba írja. S mivel a hatvanyoz() függvény használja a kiiratas() függvényt, az eredményét mindjárt ki is írja.

A forrásprogram:

77

A végeredmény (adatbekérés, majd kiíratás):

54.sz. ábra 4.2.c. feladat adatbekérése és végeredményének kiíratása

4.2.d. Feladat Függvények - Mátrix Készítsen egy olyan programot, mely sorra bekéri a gép előtt ülőtől egy 2x2-es mátrix elemeit. Az ily módon megadott elemeket tartalmazó mátrixot transzponálja és ki is íratja a képernyőre mind az eredeti, mind pedig a transzponált mátrixot. Végezetül pedig kiszámítja az eredeti mátrix determinánsát! A feladat rövid leírása:

− Mátrix: bármilyen számú, mennyiségű (i=1,2,…n; k=1,2,…m) téglalap alakú elrendezést. pl. i=2 és k=2 esetén:

− Mátrix transzponáltja: az eredeti mátrix sorait és oszlopait felcseréljük. − Determináns értéke: az eredeti mátrix főátlójában lévő elemek

szorzatából kivonjuk a mellékátlóban lévő elemek szorzatát. A fenti példának megfelelően:

− Mivel a feladat kiírása a gép előtt ülőtől várja az eredeti mátrix elemeit,

ezért a változó létrehozásakor kérje is be azokat: var A11 = prompt("Kérem A[1,1] értékét?", '1'); Ezt mind a négy elemre el kell végezni!

− Kell egy függvény a determináns értékének kiszámításához, melynek visszatérési értéke a számítás lesz: function determinans() { return A11*A22-A12*A21 };

− Kell egy függvény a transzponáláshoz. A transzponáláshoz segítségül: egy új változót kell bevezetni, mely átmeneti tároló funkcióját fogja betölteni, ugyanis a transzponálás során felcseréjük a sorokat és oszlopokat: function transzponal() { var c = A12; A12 = A21; A21 = c; };

78

− Végezetül kell egy függvény a kirajzoláshoz is! A mátrixok elemeit táblázatba kell foglalni és a táblázat megfelelő rovataiba kell kiíratni. A első sor elemeinek kiíratására példa: document.write("<table border=1 cellspacing=0 cellpadding=5>"); document.write("<tr>"); document.write("<td align=center>" + A11 + "</td>"); document.write("<td align=center>" + A12 + "</td>"); document.write("</tr>");

A végeredmény: Adatbekérésre:

55.sz. ábra 4.2.d. feladat adatbekérő ablaka


56.sz. ábra 4.2.d. feladat végeredményének kiíratása

79

4.3. Vezérlő szerkezetek 4.3.a. Feladat Vezérlő szerkezetek (if…else); Pozitív-negatív? Készítsen egy olyan programot, mely a gép előtt ülőtől bekér egy számot, majd megállapítja róla, hogy az adott szám pozitív, negatív, esetleg nulla-e és ezt egy üzenetablakban jeleníti meg! A feladat rövid leírása:

− A szkript jelenleg a HTML dokumentum törzsében található. − 7. sor: szam nevű változó létrehozása és adatbekérő ablak által kezdeti

érték adása − 8. sor: Feltételvizsgálat: a szam változó tartalma 0-nál nagyobb-e? − 9. sor: Ha a logikai vizsgálat eredménye a true (igaz) logikai érték, azaz

a megadott szám nagyobb 0-nál, akkor a végrehajtandó művelet ebben az esetben egy üzenetablakban történő kiíratás: „A szám pozitív!” szöveggel.

− 10. sor: Ha a logikai vizsgálat eredménye a false (hamis) logikai érték, akkor az else ágban megadott művelet végrehajtásra kerül a sor.

− 11. sor: Azonban az else ágban egy újabb logikai művelet áll, mely azt vizsgálja, hogy a szam változó tartalma 0-nál kisebb-e?

− 12. sor: Ha ennek a logikai vizsgálatnak az eredménye a true (igaz) logikai érték, azaz a megadott szám kisebb 0-nál, akkor a végrehajtandó művelet ebben az esetben szintén egy üzenetablakban történő kiíratás, de most „A szám negatív!” szöveggel.

− 13. sor: Ha a logikai vizsgálat eredménye a false (hamis) logikai érték, akkor az else ágban megadott művelet végrehajtásra kerül a sor.

− 14. sor: Az else ágban a végrehajtandó művelet ebben az esetben is egy üzenetablakban történő kiíratás, de végezetül „A szám 0!” szöveggel.

A forrásprogram:

80

A végeredmény egy lehetséges kimenete:

57.sz. ábra 4.3.a. feladat adatbekérése és végeredményének kiíratása

4.3.b. Feladat Vezérlő szerkezetek (if…else) Pozitív-negatív 2. Készítsen egy programot az összetett feltételvizsgálatra! Kérjen be a gép előtt ülőtől két számot, majd együttesen döntsön a számokról, hogy pozitívak-e, negatívak-e, esetleg 0-e mindkettő. (a többi lehetőséggel ebben a feladatban nem foglalkozunk.) A feladat rövid leírása:

− Összetett feltételek megadásánál logikai operátorokat is használhat. Az összetett feltétel ( ) zárójelek közé kell, kerüljön.

− Az összetett feltétel vizsgálatakor && logikai operátorokkal kapcsoljuk össze az egyes vizsgálandó feltételeket, pl: if((szam1>0) && (szam2>0))

A forrásprogram:

81

A végeredmény:

58.sz. ábra 4.3.b. feladat adatbekérése és végeredménye

További feladat: Folytassa a feladatot úgy, hogy a fentiekből kimaradt eseteket is megvizsgáltatja és kiíratja a nekik megfelelő szöveget! (ha az egyik nagyobb, mint a másik, stb…) 4.3.c. Feladat Vezérlő szerkezet (if…else); Gondoltam egy számra… Készítsen egy olyan programot, mely bekér a gép előtt ülőtől egy számot. A gép is generál véletlenszerűen egy számot 0 és 100 között. A program segítségével határozza meg, hogy melyik szám a nagyobb! Írassa ki a képernyőre a bekért számokat is és az összehasonlítás eredményét is!

82

A feladat rövid leírása:

− Ügyeljen arra, hogy a gép által megadott adatot a Math objektum random() elemfüggvényével hozza létre, majd a round() elemfüggvényével kerekítse egész számra! A random() elemfüggvény egy véletlen számot generál 0 és 1 között, ezért az általa visszaadott értéket meg kell szorozni 100-al, majd egészekre kerekíteni a round() elemfüggvénnyel: var szam2=Math.round(Math.random()*100);

A végeredmény:

59.sz. ábra 4.3.c. feladat adatbekérése és végeredményének kiíratása

4.3.d. Feladat Vezérlő szerkezet (if…else);Dolgozat kiértékelése Készítsen egy olyan programot, mely a gép előtt ülőtől bekéri a dolgozatának pontszámát (0 és 100 között), majd megvizsgálja, hogy az előre megadott ponthatárok közül melyikbe esik és kiíratja a megfelelő ponthatárhoz tartozó érdemjegyet! Ráadásul a kiírt érdemjegy betűszíne is változzon a következőképpen:

ponthatár érdemjegy kiíratás színe 0-59 elégtelen (1) piros 60-69 elégséges (2) kék 70-79 közepes (3) zöld 80-89 jó (4) lila 90-100 jeles (5) ciánkék

− A feladat megvalósításában, mint azt a alábbi képernyőterv is mutatja,

egy nyomógomb elhelyezése is szükséges. A jegyzetben az űrlap elemei témakör később következik, de a HTML-t oktató részben már volt szó róla. Jelen példában a cél, hogy a „Dolgozat értékelése” gombra kattintva a Click esemény onClick eseménykezelője elvégezze az általunk megadott műveletet, vagyis kiértékelje a dolgozatot. A megfelelő programrészt a törzs legvégére tegye, mint például: <form> <input type=button value="Dolgozat értékelése" onClick="ertekel()"> </form>

83

A végeredmény: Adatbekérés:

60.sz. ábra 4.3.d. feladat adatbekérése

A megfelelő eredmény kiíratása:

61.sz. ábra 4.3.d. feladat végeredményének kiíratása

84

4.3.e. feladat: Vezérlő szerkezet (if-else, case); Pénzváltás Készítsünk programot valutaváltásra. A program először kérje be a gép előtt ülőtől az Euró és az USA dollár értékét forintban, majd ezek alapján egy bekérő mezőbe begépelt összeget lehessen átváltani lenyíló listaablak segítségével.

− Célszerű a programot úgy kezdeni, hogy először a HTML dokumentum törzs részét készítjük el, mely tartalmazza a képernyőn megjeleníteni kívánt tájékoztató szövegeket, egy választólistát, valamint az eredmény kiíratásához egy bekérőmezőt.

− Majd következzék a JavaScript kód elkészítése: a gép előtt ülőtől egy adatbekérő ablak segítségével kérje be az aktuális Euró és dollár árfolyam értékét forintban, ezeket egy-egy változóba (fe, fd) helyezzük. Végül kiíratjuk az értékeket a képernyőre.

− Mindezek után egy függvényt –valt()- kell írnunk. Ennek segítségével tudjuk átváltani a bekért összeget. Átváltásnál 6db különböző lehetőség közül választhatunk a listánkból. A vizsgálat - hogy melyik lehetőséget választottuk - többágú (switch) elágazás készítését indokolja.

− Az if…else feltételes utasítást mindössze azért kell elkészíteni, hogy megvizsgálhassuk, hogy a gép előtt ülő váltandó összegként valóban számot írt-e be. Abban az esetben, ha nem szám a beírt összeg, akkor az átváltás lehetetlen: if (isNaN(document.vf.mit.value)) {...} else {...} Tehát amennyiben a megadott összeg szám, akkor megtörténik az átváltás, egyébként (else) ha nem szám, akkor a bekérő mező tartalmát törölni kell.

− A váltás eredményének kiíratásához is bekérő mezőt alkalmazunk. Ahhoz, hogy elkerüljük, hogy a gép előtt ülő bármit is gépelni tudjon ebbe a mezőbe, ezt le kell tiltani a számára. Ezt a readonly paraméterrel tehetjük meg.

− A karakterrel a HTML dokumentumunkban egy szóközt tudunk elhelyezni.

85

A forrásprogram:

86

A végeredmény:

62.sz. ábra 4.3.e. feladat végeredménye

4.3.f. Feladat Ciklusok (for); Kamatos kamat Készítsünk programot, mely a következő kamatos kamatszámítást végzi el: 2003. január 01-én lekötöttünk 100.000 Ft-ot 5 évre egy bankban. Két lehetőség közül választhatunk:

− -évi fix 10% (kamatos kamattal) − -változó kamatozás, az induló évben 12%-os (kamatos) kamattal,

melynek azonban évente 1.5 %-ot esett a hozama. A forrásprogram:

87

A végeredmény:

63.sz. ábra 4.3.f. feladat végeredménye

88

4.3.g. Feladat Függvények és vezérlő szerkezet- Fibonacci-sor Készítse el a Fibonacci-sort 100-ig! Eredete:

− Az eredeti probléma, amelyet Fibonacci kutatott (1202) arról szólt, hogy ideális körülmények között a nyulak milyen gyorsan, milyen rendszerességgel ellenek. Tegyük fel, hogy egy mezőn él egy újszülött nyúl pár, egy hím és egy nőstény. A nyulak egy hónapos korukra lesznek ivarérettek, így a második hónap végén már megszülethetnek az első kicsinyek. Tegyük fel, hogy a mi nyulaink soha nem halnak meg és hogy a nőstények mindig új párt ellenek ( 1 hímet és 1 nőstényt) minden hónapban, a második hónaptól kezdve.

− Fibonacci problémája: hány pár lesz egy éven belül? Az első hónap végén még csak 1 pár van. A második hónap végén születik 1 új pár, így most már 2 pár van. A harmadik hónap végén az eredeti nősténynek születik a második pár nyula, így már 3 pár lesz. A negyedik hónap végén az eredeti nősténynek lesz újabb kicsinye, a második hónapban született nőstény most elli az első kicsinyeit, így összesen már 5 pár nyúl van.

− Minden hónap elején a nyúlpárok száma: 1, 1, 2, 3, 5, 8, 13, 21, 34, ... A feladat rövid leírása:

− Ismétlésül: a Fibonacci-sor a következőképpen néz ki: 1, 1, 2, 3, 5, 8, stb… − Úgy képezzük, hogy kiindulásul adott az első két elem, az 1 és az 1,

képezzük az összegüket, ez lesz a Fibonacci-sor harmadik eleme (1+1=2); a sorozat immár: 1, 1, 2. A következő elem a sorban előtte levő két elem összege (1+2=3); a sorozat immár: 1, 1, 2, 3. A soron következő elem: 2+3=5, stb…

− A megvalósítás kezdetleges formáját fogja ez a feladat megadni, ugyanis előre megadta a feladat, hogy 100-ig írassa ki. (mivel azonban a sor egy eleme nem biztos, hogy pont a 100, így az if feltételt <100-ig megadva utolsó eredményül lehet, hogy 100-nál nagyobb számot kapott, hisz az előtte levő már vizsgált szám még kisebb volt…

A végeredmény: Gombra kattintással kezdődik:

64.sz. ábra A 4.3.g. feladat kiinduló képernyője

89

A végeredmény:

65.sz. ábra 4.3.g. feladat végeredménye

4.3.h. Feladat Ciklus és vezérlő szerkezet; Prímszámvizsgálat Készítsen olyan programot, mely a gép előtt ülőtől bekér egy egész számot, majd megvizsgálja, hogy prímszám-e. Az eredményt üzenetablakban írassa ki! Amennyiben a megadott szám nem prímszám, az üzenetablakban az is jelenjen meg, hogy mennyivel osztható! A forrásprogram:

90

A végeredmény:

66.sz. ábra 4.3.h. feladat végeredménye

4.3.i. Feladat Vezérlő szerkezet (if-else); Kocka Fejlessze tovább az 1. 5. feladatot, melyben azt kellett kiszámolni és képernyőre íratni egy program segítségével, hogy hány köbméter vizet fog kiszorítani egy kocka alakú vastömb egy kocka alakú tartályból. A két kocka élhosszait a felhasználótól kérje be egy adatbekérő ablak segítségével, majd írassa ki egymás alá a kockák élhosszait, térfogatukat, végezetül pedig kiemelve a térfogatok különbségét! Vizsgáltassa meg, hogy a bekért értékek egymáshoz képest mekkorák. A logikai vizsgálat kedvező eredményekor írassa ki a képernyőre az eredményt az 1. 5. feladat megvalósításának megfelelően. A kedvezőtlen esetekben egy-egy üzenetablakban írassa ki, hogy a vastömb nem fér bele a tartályba

91

4.4. Elődefiniált objektumok 4.4.a. Feladat Elődefiniált objektumok (tömbök) Készítsen egy olyan programot, mely 5 tanuló nevét és életkorát tartja nyilván. Minden egyes ember nevét és életkorát a gép előtt ülőtől kérje be egy-egy adatbekérő ablak segítségével, felváltva, majd az egész nyilvántartást írassa ki a képernyőre táblázatos formában. (a táblázat szegélye és rácsvonalai ne legyenek megjelenítve!) A feladathoz használjon for ciklust és tömböt! A forrásprogram:

92

A végeredmény:

67.sz. ábra 4.4.a. feladat adatbekérése és végeredménye

4.4.b. Feladat Elődefiniált objektumok (Date); Mai nap Készítsen egy olyan rövid programot, mely kiírja a képernyőre az aktuális nap nevét! A feladat rövid leírása:

− A feladat megoldásához a Date objektum getDay() elemfüggvényét használjuk, mely a hét aktuális napját kérdezi le.

− A napok neveit egy tömbben tárolja a program (vasárnappal kezdődően). A forrásprogram:

A végerdemény:

68.sz. ábra 4.4.c. feladat végeredménye

93

4.4.c. Feladat Elődefiniált objektumok (Date); Aktuális dátum, pontos idő Készítsen egy olyan programot, mely kiírja az aktuális dátumot és a nap nevét, valamint a pontos időt! A forrásprogram:

A végeredmény:


4.4.d. Feladat Elődefiniált objektumok (Date); 20 évvel ezelőtt Készítsen egy olyan programot, mely kiírja, hogy 20 évvel ezelőtt milyen évszámot írtunk! A feladat rövid leírása:

− A feladat megoldáshoz a Date objektum setYear() és getYear() elemfüggvényeire van szükség. A setYear() az aktuális év beállítása, a getYear() pedig az aktuális év lekérdezése

− A szkriptben el kell helyezni a következőket: most = new Date(); most.setYear(88);

94

Ev = most.getYear(); if(Ev < 100) Ev+=1900;

− A kiíratás végezetül táblázatba foglalva történjen. A végeredmény:

70.sz. ábra 4.4.d. feladat végeredménye

4.4.e. Feladat Elődefiniált objektumok (Date); naptár: aktuális hónap Készítsen egy olyan programot, mely kirajzolja a képernyőre az aktuális hónap naptárlapját (táblázatos formában), kiemelve az aktuális napot (lásd. az alábbi ábra)! A feladat rövid leírása:

− Szükség lesz két tömbre, melyekben a hét napjainak rövidítéseit és a hónapok neveit tárolja a program.

− Létre kell hozni a Date objektumot: var d=new Date()

− Tárolni kell az adott évszámot, hónapot, aktuális hónapot, adott napot és az aktuális napot: var ev=d.getFullYear(); var ho=d.getMonth(); var aktho=d.getMonth(); var nap=d.getDate(); var hetnapja=d.getDay();

− Majd a dátum objektumban tárolt dátumot meg kell változtatni az adott hónap első napjára: d.setDate(1); d.setMonth(ho);

− Létre kell hozni egy újabb változót (például naptar néven) melybe a kiíratandó naptár kerül táblázatba foglalva és kiíratva a megfelelő rovatokba a megfelelő napokat (H, K, Sze, Cs, P, Szo, V) dátumnapokat.

− Gondoskodjon a táblázatban az üres rovatokról is: naptar+=”</tr><tr>”

− A következő lépés a naptra változó kibővítése az adott hónap napjaival. (ciklussal, mely végigmegy a hónap napjain!) var ig=d.getDay()-1; if(d.getDay()==0); id=6; for(i=0;i<ig;i++) naptar+=”<td> </td>”

− Megadni, hogy ha hétfő, akkor új sorba kerüljön, majd eldönteni, hogy milyen nap van ma és az aktuális naphoz érve más háttérszínnel (például

95

zölddel) árnyékolni azt. Máskülönben a háttér legyen fehér. Vasárnaphoz érve zárja le a sort! Ezek után léptesse a dátumot a következő napra és zárja le a táblázatot!

− Az utolsó részfeladat az elkészített naptár képernyőre íratása. A végeredmény:


4.4.f. Feladat Elődefiniált objektumok (Date); Napszak köszöntő Készítsen programot, mely a napszaknak megfelelően üdvözli a gép előtt ülőt.

− -0-8 óráig: Jó reggelt! − -8-12 óráig: Jó napot! − -13-17 óráig: Kellemes délutánt! − -17-23 óráig: Jó estét!

A feladat rövid leírása:

− A program elkészítéséhez szükséges a Date objektum get.Hour elemfüggvényének használata: nap = new Date(); ora = nap.getHours();

− valamint olyan feltétel vizsgálatok, melyek a fenti időtartamokra vagy kapcsolatokat tartalmaznak, például: if ((ora==0) || (ora==1) || (ora==2) || (ora==3) || (ora==4) || (ora==5) || (ora==6) || (ora==7) || (ora==8)) document.write("Jó reggelt!");

96

A végeredmény 22:46-kor:


4.4.g. Feladat Elődefiniált objektumok (Date); Napszak: képekben Készítsen programot, mely a napszaknak megfelelő képet jelenít a HTML dokumentumon belül. Reggel olyan képet, mely a reggelhez kötődik, délben olyat, mely déli időpontra utal, este pedig esti képet ábrázol. A feladat rövid leírása:

− A megoldást jelen példában külső JavaScript program hívással oldja meg. A napszakKepValtas.js nevű állomány egy JavaScript állomány, melyben a napszak vizsgálata és a vizsgálat eredményének megfelelő képváltás történik:

A forrásprogram részlete:

97

A feladat rövid leírása: − Ehhez készíteni kell egy HTML dokumentumot, benne

<script>…</script> tag-ek között megadni a JavaScrpitet tartalmazó fájl elérését: <script type="text/javascript" src="napszakKepValtas.js">

4.4.h. Feladat Elődefiniált objektumok (Date); Aktuális dátum és névnap Készítsen egy olyan programot, mely kiíratja a képernyőre a pontos dátumot (év, hónap, nap) a napot betűkkel is, valamint az aznapi névnapot! A feladat rövid leírása:

− Az adott dátum névnapjainak felvétele sajnos hosszabb időt vesz igénybe, mert magunknak kell összegyűjteni és havonként tömbbe írni. Ráadásul a februári szökőévet is számon kell tartani.

− A változók megadása és z év-hónap-nap függvényeit külön JavaScript fájlban tároljuk, majd a HTML dokumentumban külső szkriptként hívjuk meg.

− A HTML dokumentumban történik az aktuális dátum és návnap kiíratása. A forrásprogram egyik része:

98

…

99

A forrásprogram másik része:

A végeredmény:


4.4.i. Feladat Elődefiniált objektumok (Screen) Kérdezze le egy program segítségével, a képernyőn megjelenő ablak jellemzőit (magassága, szélessége) és a képernyő jellemzőit (felbontása, színmélysége)! Az eredményt írassa ki a képernyőre! A forrásprogram:

100

A végeredmény:

74.sz. ábra 4.4.i. feladat végeredménye

4.4.j. Feladat Elődefiniált objektum (Image); Képváltó Készítsen egy képnézegető programot, mely képeket jelenít meg a képernyőn, 2 másodpercenként váltva őket. A képeket gyűjtse össze egy külön mappába (ennek neve legyen kepek), hogy a program azok közül válogathasson! A képek nevei sorra kep_0.jpg, kep_1.jpg, stb… legyen! A feladat rövid leírása:

− 4.sor: a képek darabszámának megadása a ksz változó segítségével − 5. sor: kep tömb megadása − 6.-11. sor: a kep tömb feltöltése a kepek mappában levő képekkel for

ciklus segítségével − 11. sor: a képváltás függvénye − 13. sor: a kep tömb mérete a max változóba kerül. − 14. sor: i változó létrehozása, majd − 15.-19. sor: ciklus segítségével megadni, hogy jelenleg hányadik kép

látható a képernyőn (i változó tartalma) − 20.-22. sor: 2 másodpercenkénti váltás (képcsere) − 25.-26. sor: annak megadása, hogy a lap betöltésekor induljon az első

kép megjelenítése, majd a váltások… A forrásprogram:

101

4.4.k. Feladat Elődefiniált objektum (Image); Képnézegető Készítsen egy olyan képnézegető programot, mely egy képet jelenít meg a képernyő közepén, alatta egy „előző” és egy „következő” linkkel. Alapértelmezetten legyen egy kép kezdő képnek beállítva, majd a linkekre kattintva jelenítse meg a tárolt képek közül a soron következőt, vagy az előtte levőt! A forrásprogram:

102

A végeredmény:

75.sz. ábra 4.4.k. feladat végeredménye

4.4.l. Feladat Előző feladat továbbfejlesztése gombokkal (állandó képméret) Fejlessze tovább a 4.4.k. feladatot úgy, hogy a megjelenített kép alatt ne egy-egy link legyen, hanem nyomógombok, melyekre kattintva lehet a képek közt előre-hátra lapozni. A megjelenített képek mérete állandó legyen, majd úgy is, hogy mérethűen jelenjenek meg a képek! A feladat rövid leírása:

− A forrásprogram ugyanaz, mint az előző feladatnál, annyi különbséggel, hogy a HTML dokumentum törzsébe ne két linket, hanem két nyomógombot helyezzen el a következők alapján: <input type= button value ="vissza" onClick="elozo()"> <input type= button value ="következő" onClick="kovetkezo()">

− Érdemes lenne felhívni a figyelmet, ha a képek sorában a legutolsóhoz ért a megjelenítés, hogy már nincs több kép. Ehhez egy újabb függvény megadására van szükség (az elozo() és a kovetkezo() függvények után, de még a </script> tag elé): function checkIt(val) { var jo = aktualis+val; if (jo < 0) alert("Nincs több ezelőtt!"); else if (jo> keptar.length-1) alert("Nincs több ezután"); else document.jscriptimg.src = keptar[jo]; aktualis = jo;}

103

4.5. Összetett feladatok Ez a rész néhány nélkülözhetetlen algoritmussal ismerteti meg a felhasználót. Az algoritmus nem más, mint részfeladat, mely ismerete nélkül sokkal nehezebb lenne elkészíteni egyes összetettebb programot. A továbbiakban különböző példák mutatják meg az:

− összegzés, − szorzatképzés, − legkisebb és legnagyobb elem megkeresését, − adott elem megkeresését, − két listaelem cseréjét és − egy lista elemeinek sorrendbe való rendezését.

A feladatok összetettek, tömböket, függvényhívásokat, ciklusokat tartalmaznak. 4.5.a. Feladat Összetett feladat (összegzés és szorzatképzés) Készítsen olyan árukészlet-nyilvántartó programot, mely egy tömbben tárolja –az egyszerűség kedvéért- 4 áru nevét. Az egyes áruk raktáron lévő mennyiségét a gép előtt ülőtől kérje be, majd írassa ki a képernyőre az össz darabszámot, a mennyiségek átlagát! A feladat rövid leírása:

− A feladat elkészítéshez ismerni kell a tömböket, ciklusokat és feltételes utasításokat!

− Az öszegzés: ha egy lista elemeinek összeadásához szükség van egy változóra, melyben az összeget tárolja a program. Ezen változó kezdeti értéke nulla (0), majd egy ciklus „végigjárja” a listát és egyesével hozzáadja a változó pillanatnyi tartalmához az éppen soron következő listaelemet.

− A szkript a HTML dokumentum törzsében van. − 4. sor: az aru nevű változó létrehozása: töltött tömbváltozó, melynek

elemeit előre megadtuk. − 5. sor: a penz nevű változó létrehozása: tömbváltozó, de csak az

elemszámát adtuk meg. − 6. sor: a penz nevű változóhoz tartozó értékeket, azaz a tömb elemeit a

gép előtt ülőtől kérjük be a beker() nevű saját függvény segítségével. − 8. sor: for ciklus megadása a tömb elemeinek bekéréséhez − 10. sor: a penz tömbváltozó elemeinek bekérése sorra egymás után − 13. sor: osszegzes() nevű függvény létrehozása − 15. sor: egy osszeg nevű változó létrehozása. Ebben a változóban kerül

tárolásra a penz tömb elemeinek összege − 16. sor: for ciklus az összegzéshez − 18. sor: az összegzés megadása; egyúttal ehhez a bekért tömbelemek

értékeit a parseInt() függvénnyel egész számokká alakítása. − 20.-21. sor: az összeg kiíratása a képernyőre. A két külön sorban írt

document.write() utasítás használata nem indokolt, csak példa arra, hogy így is lehet…

− 23. sor: atlag() nevű függvény létrehozása

104

− 25. sor: egy osszeg nevű változó létrehozása. Ebben a változóban kerül tárolásra a penz tömb elemeinek átlaga. (A változó névegyezése nem tévedés, mégsem jelenti ugyanazt a változót, ugyanis ez egy lokális változó;csak az adott függvényen belül érvényes!)

− 26. sor: for ciklus az összegzéshez

− 29. sor: az átlag megadása; egyúttal ehhez a bekért tömbelemek értékeit a parseInt() függvénnyel egész számokká alakítása.

− 31.-32. sor: az átlag kiíratása a képernyőre. (Az összeghez hasonlóan itt sem indokolt a két külön sorban írt document.write() utasítás használata…)

− 34. sor: Végezetül a 6. sorban létrehozott beker() függvény meghívása következik, mely felöleli az egész eddig munkát.

− 37. -38. sor: Az osszegzes() és atlag() függvények meghívása, aminek hatására az eredményeik megjelennek a képernyőn.

A forrásprogram:

105

A végeredmény: Az adatbekérések sorra adatbekérő ablakokban, mint például az első termék esetén:

76.sz. ábra 4.5.a. feladat adatbekérő ablaka

A gép előtt ülő által megadott szendvics, bukta, kávé és üdítő termékek napi bevételeinek összegzése, valamint az átlagbevétel képernyőre íratása:

77.sz. ábra 4.5.a. feladat végeredménye

4.5.b. Feladat Összetett feladat (legkisebb és legnagyobb elem) Készítsen egy olyan programot, mely nyilvántartja a havi bevételt! A hónapok neveti és a bevételeket egy tömbben tárolja. A havi bevételeket kérje be a gép előtt ülőtől, majd keresse ki közülük a legkisebbet és a legnagyobbat. A legkisebb bevételt zöld színnel, a legnagyobbat pedig piros színnel írassa ki a képernyőre! Mindezek után még számítsa ki az éves bevételt is (a bevételek összesenje) és írassa ki azt is a képernyőre kék színnel! A feladat rövid leírása:

− Minimum-maximum kiválasztás olyan algoritmus, mely az adott listaelemek közül egyszerű összehasonlítással kikeresi a legkisebbet, vagy legnagyobbat.

− A legnagyobb elem megkeresésének kiinduló állapota az a feltételezés, mely szerint az első listaelem a legnagyobb. Ezek után elemről-elemre haladva a program megvizsgálja, hogy van-e a listában nála nagyobb. Ha talál nála nagyobbat, akkor ezt fogja a továbbiakban legnagyobbként kezelni és megőrizni ennek értékét és helyét (pozícióját) a listában. A vizsgálat egészen a lista utolsó eleméig folytatódik.

106

− A legkisebb elem kiválasztása hasonlóképpen történik, annyi különbséggel, hogy a feltételezés most az, hogy az első elem a legkisebb.

A forrásprogram:

107

Az eredmény:

78.sz. ábra 4.5.b. feladat adatbekérése és végeredményének kiíratása

4.5.c. Feladat Összetett feladat (tömb, ciklus, függvény, min-max) Fejlessze tovább a 4. a. feladatot úgy, hogy 5 nevet és életkort kérjen be a gép előtt ülőtől majd írassa ki a képernyőre táblázatos formában és mindezek után keresse meg és írassa ki a legfiatalabb és legidősebb ember nevét és életkorát! A végeredmény: Adatbekérésre:

79.sz. ábra 4.5.c. feladat adatbekérő ablakai

108

A végeredmény:


4.5.d. Feladat Összetett feladat (elemkeresés) Készítsen olyan programot, melyben a gép előtt ülőtől automatikusan bekér 5 különböző gyümölcsnevet és hozzá az áraikat, majd egy bekérő mező segítségével bekér egy gyümölcsnevet, aminek az árára kíváncsi. Ha az adott gyümölcs szerepel a listában, akkor egy üzenetablakban kiírja a program, hogy hányadik elem a keresett gyümölcsnév és mennyit kell érte fizetni. Amennyiben a gyümölcsnév nem szerepel a listában, akkor egy üzenetablak tájékoztasson róla! A legvégén ellenőrzésképp írassa ki az összes bekért gyümölcsnevet és áraikat! A feladat rövid leírása:

− A keresési eljárás rendezetlen lista esetén a lineáris keresés. A listában elemről-elemre haladva megvizsgálja, hogy a keresett érték megegyezik-e a soron következő listaelem értékével. Ha megtalálja a keresett értéket, akkor már nem kell tovább folytatni a vizsgálatot. Amennyiben elért a lista végére, kijelenthető, hogy a keresett elem nem szerepel a listában!

109

A forrásprogram:

110

A végeredmény:

81.sz. ábra 4.5.d. feladat adatbekérése

82.sz. ábra 4.5.d. feladat végeredménye 1.

Amennyiben a keresett név nem szerepel a gép előtt ülő által felvett listában, a következő üzenetablak jelenik meg:

111

83.sz. ábra 4.5.d. feladat végeredménye 2.

4.5.e. Feladat Összetett feladat (elemcsere) Készítsen olyan programot, mely a gép előtt ülőtől bekéri 5 hallgató nevét és hozzá a szakjukat is, majd a nevek szerint növekvő sorrendben kiíratja azokat táblázatos formában!

− A rendezési algoritmusoknál nélkülözhetetlen eljárás a két listaelem cseréje. A fenti feladat során buborék-rendezést hajt végre a program. A lista elemeit elemről-elemre páronként összehasonlítja, egészen a legutolsó elemig folytatva azt. Ha a vizsgált pár elemei egymáshoz képest nem növekvő sorrendben vannak, akkor a két elemet felcseréli. A folyamatot mindaddig ismétli, míg van mit felcserélni és az ismételt végignézések száma nem haladja meg az elemszám-1 értéket. A legegyszerűbb példa rá:

− Adott két változó: a és b, valamint egy s segédváltozó, az átmeneti tárolás céljából. Legyen a=3 és b=5 A csere a következők szerint megy végbe:

)3()5()3(

=→==→==→=

bsbabasas

• Az elemcsere általános leírása: [ ]

[ ] [ ][ ] silista

ilistailistailistas

=++=

=

11

112

A forrásprogram:

113

A végeredmény:

84.sz. ábra 4.5.e. feladat adatbekérése

114

A végeredmény az elemcsere után:


4.5.f. Feladat Összetett feladat (tömb); Lottóprogram Készítsünk lottóprogramot! A program a gép előtt ülőtől kérjen be 5 különböző számot (ha véletlenül azonosat ír be a felhasználó, akkor ismételje meg a szám bekérését). Majd hasonlítsa össze a gép által sorsolt nyerőszámokkal a bekért számokat! A feladat rövid leírása:

− 3. sor: a találatok számának tárolására szolgáló változó (tal) létrehozása − 4. sor: A számítógép előtt ülő tippjeinek tárolására szolgáló tömb

létrehozása − 5. sor: A számítógép által kisorsolt találatok tárolására szolgáló tömb

létrehozása. − 6. sor: Két azonos szám tippelését, vagy kisorsolását nem engedő

függvény létrehozása. − 12. sor: Ha még nincs ilyen szám… akkor vizsgálja a következő elemet a

tömbben. − 18.-21. sor: Rendezési szempont megadása (növekvő sorrendben)

115

− 22. sor: A gép előtt ülő tippjeit bekérő függvény létrehozása. − 27.-29. sor: csak 1 és 90 közötti számok tippjét fogadja el, ha még nem

volt ilyen tipp korábban. − 32. -37. sor: A tömb elemeinek kiíratására egy függvény létrehozása − 38.-47. sor: A lottószámok sorsolása − 48.-54. sor: A találatok számának megállapítására egy függvény

létrehozása − 55.-64. sor: A gép előtt ülő által megadott tippek és a számítógép által

kisorsolt számok kiíratásának függvénye. − 65.-67. sor: sorra a függvények meghívása

A forrásprogram:

116

117

A végeredmény:


4.5.g. Feladat Összetett feladat (tömb, elemek sorrendbe) Készítsünk olyan programot, melyben a gép előtt ülőtől bekérünk 5 rendszámot és hozzá 5 autó márkát. Rendezzük a bekért adatokat márkanév szerint csökkenő sorrendbe. 4.5.h. Feladat Összetett feladat (tömb, elemek sorrendbe, min-max) Készítsünk olyan programot, amely a gép előtt ülőtől bekéri 6 dolgozó nevét, és a fizetésüket. Majd csökkenő sorrendbe rendezi névsor szerint az adatokat. Végezetül kikeresi és megszámolja a 70 000 Ft-nál nagyobb keresettel rendelkező dolgozókat.

118

4.6. Űrlap objektumok 4.6.a. Feladat Űrlap objektumok (Button); Új ablak megnyitás Készítsen olyan programot, mely kiindulásként csak egyetlen nyomógombot rajzol a képernyőre „Új ablak” felirattal. A gombra kattintva nyíljon meg egy úja ablak, melyben a HTML dokumentum egy képet és egy „Ablak bezárása” feliratú gombot tartalmaz. Az „Ablak bezárása” gombra kattintva az új ablak záródjon be! Az első forrásprogram:

A végeredmény: A kiinduló ablak:

87.sz. ábra 4.6.a. feladat kiinduló ablaka

A második forrásprogram:

119

A végeredmény: Az új ablak:

88.sz. ábra 4.6.a. feladat végeredménye

4.6.b. Feladat Űrlap objektumok (Button); Üzenetablak Készítsen egy olyan programot, mely kiindulásként csak egyetlen nyomógombot rajzol a képernyőre „Kattints a nyomógombra!” felirattal. A gombra kattintás eseménye egy üzenetablak megjelenése legyen „Rákattintottál a gombra!” felirattal. A végeredmény:

89.sz. ábra 4.6.b. feladat végeredménye

120

4.6.c. Feladat Űrlap objektumok (Text); Összeg-szorzat Készítsen egy olyan programot, mely segítségével bekér két számot a gép előtt ülőtől egy-egy bekérő mező (Text) segítségével. Alattuk legyen egy nyomógomb Számol felirattal, melyre kattintva egy üzenet ablakban megjelenik a két szám összege és szorzata. A feladat rövid leírása:

− A text objektum segítségével történik az adatbekérés, de előtte a script részbe létre kell hozni a szamol() nevű saját függvényt, melyben egyrészt el kell végezni az egészre kerekítést, majd az összegzés és szorzat műveleteit, és a kiíratást egy üzenetablakban.

− A text bekérő mezőt a HTML dokumentum törzsében a <form>…</form> űrlap tag-ek között kell elhelyezni, akárcsak a gombra kattintás eseményét, a szamol() függvény meghívását.

A forrásprogram:

A végeredmény:


121

4.6.d. Feladat Űrlap objektumok (text); Bruttó érték Készítsen olyan programot, mely egy-egy text –bekérő- mezőben bekéri a gép előtt ülőtől a nettó értéket és a százalékot, majd egy gombra kattintva –szintén text mezőben- kiíratja a bruttó értéket! A végeredmény:

91.sz. ábra 4.6.d. feladat végeredménye

4.6.e. Feladat Űrlap objektumok (select); Új weblapok Készítsen olyan programot, mely egy választólistát (select) tartalmaz kedvenc weblapjairól. A választás eredményéül (onChange) a kiválasztott weblapot olvassa be ugyanebbe az ablakba oly módon, hogy a listaelemek értéke az adott weblap url-címe legyen. A forrásprogram:

122

A végeredmény:


4.6.f. Feladat Események (képre mutatás eseménye) Készítsen olyan programot, mely indításakor egy kép jelenik meg a HTML oldalon, majd egy a kép átvált egy másik képre, ha az egérmutatóval rámutat a gépe lőtt ülő. Ráadásul a képre kattintva egy újabb kép jelenik meg az előző helyett, mely azonban eltűnik és helyére a korábbi kép jelenik meg, ha az egérmutató már nem rá mutat. A képek jelen példában smiley1.gif, smiley2.gif, smiley3.gif. A forrásprogram:

A végeredmény (a betöltött kép, rámutatás előtt):

93.sz. ábra 4.6.f. feladat végeredménye 1.

123

A végeredmény (rámutatáskor):


A végeredmény (képre kattintás után):


4.6.g. Feladat Űrlap elemek(text) – Fibonacci Készítse el az 2. e. feladatban szereplő Fibonacci-sor kiíratását úgy, hogy a gép előtt ülőtől kérje be a sor elemszámát egy text mezőben, majd Enter hatására írassa ki a sor elemeit rendre egymás alá. A feladat megoldásához tömb használatára, továbbá függvényre és a document objektum ismeretére is szükség van. A végeredmény:

96.sz. ábra 4.6.g. feladat végeredménye

124

4.6.h. Feladat Betűstílusok Készítse el az alábbi honlapot! Használjon betűstílusokat! A feladat rövid leírása: A használt betűsablonok:

− Étlap: <h1 align=center><span style="width: 500; height: 50; font-size: 24pt; font-family: Arial Black; color: #8B008B; Filter: Blur(Add = 1, Direction = 125, Strength = 10)"> É T L A P</span></h1><p>

− Gizi néni kifőzdéje: <h2><u><center><span style="width: 500; height: 50; font-size: 20pt; font-family: Verdana; color: yellow; Filter: Glow(Color=#0000FF, Strength=10)">Gizi néni kifőzdéje</span></center></u></h2>

− Mucsaröcsögei vendéglő: <span style="width: 357; height: 40; font-size: 16pt; font-family: Arial Black; color: #8B008B; text-align: center; Filter: Mask(Color=#FF0000)"> Mucsaröcsögei vendelgő </span><p> <basefont face=Arial color=blue size="+2">

− Bed&Breakfast: <center><i><span style="width: 500; height: 50; font-size: 24pt; font-family: Arial Black; color: #FFA500; Filter: Wave(Add=0, Freq=2, LightStrength=5, Phase=5, Strength=5)">"Bed-and-Breakfast"</span></i></center>

− Heti ajánlat: <table border=2 align=right units=pixel bgcolor=aqua cellpadding=8 height=100 weight=100> <caption><h2><span style="width: 500; height: 50; font-size: 24pt; font-family: Arial Black; color: silver; Filter: DropShadow(Color=#FF0000, OffX=4, OffY=4, Positive=1)">Heti ajánlat</span></caption>

125

A végeredmény:


126

5. Összetett gyakorló feladatok 5.1.a. Feladat Összetett gyakorló feladat – saját honlap Készítsen el saját honlapját a következők alapján. Az oldal egy olyan HTML és XHTML valid oldal legyen, melybe JavaScript programrészekkel az alábbi feladatokat valósítja meg:

− A honlap tetején középre igazítva egy olyan szöveg jelenik meg, mely a színét meghatározott időközönként változtatja.

− Alatta egy vízszintes tagolóelem helyezkedik el. − Kicsit lejjebb, szintén középre zárva, a mai dátumot íratja ki. − A következő rész két képet tartalmaz (funkciója nincs, hacsak nem a

megjelenést annak vesszük), közte egy pár soros szöveg, saját magáról, majd 5 képből álló díszítőelem következik. Egy idézet is kapjon helyet alattuk!

− A lap bal szélén gombsor legyen lehelyezve egymás alá, melyekre kattintva új ablakban megnyílik egy másik weblap. (…lehet ez egy saját készítésű oldal, vagy egy másik személy, cég honlapja…) A VISSZAJELZÉS gombra kattintva egy saját űrlap jelenjen meg új ablakban, mely tartalmaz text, texarea, checkbox, vagy radio elemeket és submit, valamint reset gombokat!

− A gombsor mellett tagolja két részre a felületet. Az egyikben egy futó reklám ablakot helyezzen el, mely adott méretű és a benne elhelyezett tetszőleges szövegtartalom alulról fölfele gördül. A másik részben pedig az öröknaptár programja legyen.

− Alattuk szintén két részre tagolva a felületet, a bal oldaliban egy animált gif képre kattintva új ablakban megnyílik a saját maga által készített képgaléria, a másik oldalon egy többszintű felsorolással kedvenc dolgairól adjon minimális információkat. Úgy oldja meg ezt a részt, hogy a kedvencek neve linkként létezzen és rájuk kattintva új ablakban megnyílik egy –egy létező weblap.

− Végezetül írassa ki az utolsó módosítás dátumát!

127

A színváltós szöveg kódja:

Az aktuális dátum kiíratásának kódja:

Példa kódrészlet egy gombra: <p><a href="feedback.htm"><button>VISSZAJELZÉS</button></a></p>

128

Eredménye új ablakban:

98.sz. ábra 5.1.a. feladat űrlap oldala

A futó reklámablak kódja:

129

Az öröknaptár programrészlete, mely a HTML dokumentum <head> fej részében kap helyet:

A kedvencek felsorolásának kódja:

130

A fenti honlap megjelenése:

99.sz. ábra 5.1.a feladat végeredménye

5.1.b. Feladat Könyvelőprogram Készítsünk mini könyvelőprogramot, mely kérje be az ösztöndíjunkat, a szociális támogatásunkat, szülői támogatásunkat és egyéb kereseteinket. Kérdezze meg, hogy mennyit költünk szállásra, utazásra, étkezésre, könyvekre, szórakozásra. Ezután számolja ki külön a bevételt, a kiadást, és a megtakarítást. 5.1.c. Feladat Autókereskedés Készítsünk programot, mellyel egy autókereskedésben vásárolható gépkocsik legfontosabb adatait (típus, szín, évjárat, rendszám) és a nettó áraikat lehet

131

nyilvántartani. Minden adatot a gép előtt ülőtől kérje be a program. Számolja ki egyenként az autók eladási árát, ha az ÁFA 25%-os. 5.1.d. Feladat Befektetés Készítsünk olyan programot, mely bekér egy befektetni kívánt összeget a felhasználótól és 9,5 %-os kamatláb mellett kiszámolja az elkövetkező 6 évre a kamatokkal megnövelt öszeget. Évenkénti bontásban irassuk ki az eredményt a képernyőre. 5.1.e. Feladat Mátrix Készítsünk programot, mely egy 4x3-es mátrix elemeit a felhasználótól kéri be, majd elkészíti a mátrix transzponáltját. Az eredeti mátrixot is írassuk ki a képernyőre, a transzponált mátrix mellett. 5.1.f. Feladat Könyvelőprogram Készítsünk programot, mely segítségével ki tudjuk íratni egy legördülő listából (választólistából) választott (1 és 10 közötti) számnak megfelelő szorzótáblát. 5.1.g. Feladat Névnapok Készítsünk programot, mellyel 6 májusi és 6 júniusi névnap adatait lehet bekérni vegyesen (névnap, hónap, nap). Ezeket írassuk ki a képernyőre. Majd keresse ki a legelső júniusi és a legutolsó májusi névnapot, és jelenítse meg ezek adatait a képernyőn. 5.1.h. Feladat Tömb - színház Készítsünk programot, mely bekér a gép előtt ülőtől 5 színházi előadás legfontosabb adatát (előadás címe, rendező, kezdési időpont, nettó ár), és írassa ki a képernyőre az adatokat. Az árak esetében a bruttó árat (12 %-os ÁFÁ-val növelt ár) is írassa ki! Majd vizsgálja meg, hogy lesz-e 19 órási előadás, valamint keresse meg a legolcsóbb ill. a legdrágább előadást a listából. 5.1.i. Feladat Gépkocsi-tulajdonságok Készítsünk programot, mely bekér a gép előtt ülőtől 2 autó legfontosabb adatait (rendszám, típus, szín, nettó ár), és írassa ki a képernyőre az adatokat bruttó árakkal együtt. Majd számítsa ki a két autó nettó ill. bruttó árának összegét. Végezetül vizsgálja meg, hogy melyik autó az olcsóbb.

132

5.1.j. Feladat Magyarország városai Készítsünk programot, mely bekér a gép előtt ülőtől 5 magyaroszági városnevet, és a városokban mért hőmérsékleteket (csak egy átlag hőmérsékletre vagyunk kíváncsiak). Az adatokat jelenítse meg a képernyőn. Majd vizsgálja meg, hogy melyik városban mérték a leghidegebbet, ill. a legmelegebbet. 5.1.k. Feladat Könyvelőprogram Készítsünk programot, mely bekér a gép előtt ülőtől 5 számot, illetve a géppel is kiválasztat 5 számot (1 és 120 közötti) véletlen számot. Adja össze külön-külön az 5-5 számot, és írassa ki a két összeget a képernyőre tájékoztató szövegekkel együtt. Majd vizsgálja meg, hogy melyik összeg értéke a nagyobb. 5.1.l. Feladat Idősebb? Fiatalabb? Készítsünk programot, mely bekér a gép előtt ülőtől 10 ember nevét és életkorát. Majd vizsgáljuk meg, mely emberek fiatalabbak 50 évnél, és melyek idősebbek 50 évnél, vagy éppen 50 évesek. Külön csoportba írassuk ki őket a képernyőre. 5.1.m. Feladat Véletlenszerű kiválasztás Készítsünk programot, mely bekér a felhasználótól 10 nevet és életkort. Valamint a géppel is kiválasztat egy számot (0 és 100 között). A bekért adatokat, és a kiválasztott számot írassuk ki a képernyőre. Majd vizsgáljuk meg, hogy a bekért listában szerepel-e olyan életkorú ember, ami megegyezik a gép által kiválasztott számmal. Ha igen egy üzenetablakban irassuk ki a nevet és az életkort, ha nem arról is küldjünk egy üzenetablakban megjelenített üzenetet. 5.2.a. Feladat Saját honlap álláskeresés céljából Készítse el saját honlapját álláskeresés céljából (Személyes adatok, iskolai végzettség, szakmai tapasztalatok, egyéb témaköröket jelenítsen meg)! Mindent, ami e jegyzetben megtalálható tartalmazzon a honlap. 5.2.b. Feladat Személyes honlap hobbiból Készítse el saját honlapját (hobbi, iskola, zene, stb. témaköröket jelenítse meg)! Mindent, ami e jegyzetben megtalálható tartalmazzon a honlap. 5.2.c. Feladat Iskolája honlapja Készítse el volt iskolája honlapját! A honlap szerkezeti felépítését táblázat segítségével készítse el.

133

5.2.d. Feladat Állatkert honlapja Készítsen egy állatkert, vagy botanikus kert számára honlapot! A honlap szerkezeti felépítését keretek segítségével készítse el. 5.2.e. Feladat Saját E- bolt készítése Készítsen saját kereskedése számára honlapot! A honlap szerkezeti felépítését keretek segítségével készítse el.

Documents

Int.techn Peldatar 0423