css és javascript programozás -...

Webszerkeszts, a web programozs alapjai

2. modul

CSS s JavaScript programozs

Az egsz leten t tart tanuls fejlesztse az intzmnyek kztti nemzetkzi egyttmkdssel

TMOP-2.2.4.-08/1-2009-0012

Szemere Bertalan Szakkzpiskola, Szakiskola s Kollgium

Szerkesztette: Ember Lszl

Lektorlta: Molnr Gbor

A kiadvny az INTER-STUDIUM - Az egsz leten t tart tanuls fejlesztse az intzmnyek kztti nemzetkzi egyttmkdssel cm,

TMOP-2.2.4.-08/1-2009-0012 szm projekt keretben kszlt.

A projekt az Eurpai Uni tmogatsval, a Trsadalmi Megjuls Operatv Program trsfinanszrozsval valsul meg

- 2010 -

Ember Lszl: CSS s JavaScript programozs

TARTALOMJEGYZK

1. Mi a CSS? .................................................................................................................................. 5 1.1 Trtnete .................................................................................................................................... 5 1.2 Feladata...................................................................................................................................... 5 1.3 Formzsi hierarchia .................................................................................................................. 6 1.4 A HTML korltai, s azok tlpse CSS segtsgvel............................................................... 6 2. A CSS ltrehozsnak mdjai.................................................................................................... 7 2.1 External Stylesheet ltrehozsnak mdja ................................................................................ 7 2.2 Internal Stylesheet ltrehozsnak mdja ................................................................................. 8 3. Inline style ltrehozsnak mdja .............................................................................................. 9 4. A CSS szintaxisa, kijellk, tulajdonsgok, rtkek................................................................... 9 5. Szelektorok, kijellk ................................................................................................................ 11 5.1 Elem neve alapjn trtn meghatrozs................................................................................ 11 5.2 ID (azonost) alapjn trtn meghatrozs .......................................................................... 12 5.3 CLASS (osztly) alapjn trtn meghatrozs ...................................................................... 12 5.4 Elhelyezkeds alapjn trtn meghatrozs ......................................................................... 12 5.5 Vegyes meghatrozs.............................................................................................................. 13 5.6 Pszeudo osztlyok, s elemek szerinti meghatrozs............................................................. 13 5.7 Attribtum szerinti meghatrozs............................................................................................. 14 6. Httr, szveg, bettpus formzs CSS-ben.......................................................................... 14 6.1 A HTML elemek httrnek belltshoz szksges tulajdonsgok...................................... 14

6.1.1 A httr szne: background-color ................................................................................ 14 6.1.2 A httrben elhelyezett kp (httrkp): background-image ...................................... 14 6.1.3 A httrkp ismtldse, s pozcija......................................................................... 14 6.1.4 Httrkp csatolsa az oldalhoz: background-attachment ......................................... 15

6.2 A szvegek s bettpus formzsa ........................................................................................ 16 7. Listaelemek, tblzatok............................................................................................................ 17 7.1 Listaelemek formzsa:............................................................................................................ 17 7.2 Tblzatok formzsa: ............................................................................................................. 18 8. Szegly, krvonal, marg, trkz ............................................................................................. 19 8.1 Szegly..................................................................................................................................... 20 8.2 Margk s trkzk .................................................................................................................. 21 9. Mretezs, kijelzs vezrls, elhelyezs ................................................................................. 22 10. Kpek, szvegek igaztsa....................................................................................................... 24 11. tltszsg ............................................................................................................................... 25 12. Teszt ......................................................................................................................................... 26 13. JavaScript trtnete, fejldse ................................................................................................. 27 14. Objektumorientltsg, objektumok ........................................................................................... 29 14.1 A JavaScript objektumainak tpusai ......................................................................................... 30 14.2 A JavaScript elre definilt objektumainak hasznlata ............................................................ 30

14.2.1 zeltl (s kiss elre szaladva) kt rdekes objektum............................................ 31 15. Adattpusok............................................................................................................................... 33 15.1 Sajt vltoz definilsa........................................................................................................... 34 16. Vltozk.................................................................................................................................... 34 17. Opertorok................................................................................................................................ 36 17.1 Aritmetikai opertorok............................................................................................................... 36 18. Logikai opertorok .................................................................................................................... 37 19. String opertorok ...................................................................................................................... 38 20. Tpusknyszerts .................................................................................................................... 38 21. Elgazsok ............................................................................................................................... 38 22. Ciklusok, eljrsok, tmbk...................................................................................................... 41

3


22.1 Ciklusok .................................................................................................................................... 41 22.2 Tmbk..................................................................................................................................... 42 22.3 Eljrsok, fggvnyek .............................................................................................................. 43 23. Teszt ......................................................................................................................................... 44 24. Alapobjektumok, fggvnyek ................................................................................................... 44 24.1 Fbb objektumok a JavaScriptben: .......................................................................................... 44 24.2 Regulris kifejezsek................................................................................................................ 46 25. Esemnyek............................................................................................................................... 47 25.1 Egr esemnyek....................................................................................................................... 48 25.2 Billentyzet esemnyek............................................................................................................ 48 26. Dokumentum esemnyek......................................................................................................... 48 26.1 Egyb esemnyek .................................................................................................................... 48 27. Dtum s id kezelse ............................................................................................................. 49 28. rlapkezels............................................................................................................................. 52 29. Dinamikus tartalom................................................................................................................... 56 29.1 Tartalom vltsa a lap jratltse nlkl .................................................................................. 56

4


1. Mi a CSS?

A CSS a Cascading Style Sheet rvidtse, mely annyit tesz 'Egymsba gyazott stluslapok'

A CSS a weblapok (vagy hasonlan strukturlt HTML, XHTML dokumentumok) stlusnak, kinzetnek meghatrozsra szolgl stlusler nyelv

A CSS egy szabvny melynek specifikcijt a W3C konzorcium felgyeli

1.1 Trtnete A CSS ltrejttnek oka a HTML ler nyelv hinyossga volt, miszerint a HTML fleg a dokumentum tartalmnak lersrt volt felels, annak formzsrt mr kevsb. A nvekv ignyek miatt a HTML 3.2-es verzijba mr bepltek formz TAG-ek, de ezek hasznlata bonyodalmas volt s semmikpp nem clratr. Szksg volt egy a HTML dokumentumtl fggetlen formzsi lehetsgre, melyekre tbb megolds is szletett. A legjobb megoldsnak mgis a CSS tnt. Az els verzi elkszletei 1994-1996 kz tehetk. Ezeket fleg kt ember vgezte, nv szerint Hkon Wium Lie s Bert Bos. Az vezetskkel 1996 decemberben megjelent a CSS1 azaz az els hivatalos verzi. 1998-ban a msodik verzi is elkszlt CSS2 nven. A CSS3 azaz a harmadik verzi fejlesztsei pedig mg a napokban is folynak. A CSS olyannyira fellkerekedett a HTML formzsi lehetsgein hogy a HTML 4.0 szabvnybl mr ki is kerltek ezek a formzst segt TAG-ek. gy pldul a jl megszokott FONT tag is rvnytelentett sttusz lett.

1.2 Feladata A CSS segtsgvel a kvetkez feladatokat oldhatjuk meg

Az elksztett stlusokat egy llomnyba tudjuk sszegyjteni (.css) Az gy elksztett stlusokkal tbb klnbz weblapot tudunk

felruhzni (egy CSS tbb weblap) Egy elksztett weboldal tbbfajta megjelenst tudjuk prezentlni

egyetlen hivatkozs megvltoztatsval (egy weblap tbb CSS) Tudunk igazodni a weboldal megnyitst vgz kliens szmtgp

paramtereihez (pl. felbonts, bngsz, nyelv) Interaktvabb tudjuk tenni a mr meglv weblapjainkat az egr s

billentyzet esemnyekre trtn stlusvltoztatssal Sok idt tudunk megtakartani, mivel a formzsokat vltoztats

esetn j esetben csak egy helyen kell mdostani

5

http://szotar.sztaki.hu/dict_search.php?M=1&O=HUN&E=1&C=1&A=0&S=H&T=1&D=0&G=0&P=0&F=0&MR=100&orig_lang=ENG%3AHUN%3AEngHunDict&orig_mode=1&orig_word=deprecated&flash=&sid=400bbbd9ed25e37309535f2ba6793020&vk=&L=HUN%3AENG%3AEngHunDict&W=%C3%A9rv%C3%A9nytelen%C3%ADtett


1.3 Formzsi hierarchia A stlusok elksztsnl s a formzsnl azokat a hierarchikat kell figyelembe vennnk melyek a HTML dokumentumra egybknt is rvnyesek. Minden egyes elem valamely szltl szrmazik s ezek az elemek rklhetik a szlk stlust, formzst. pl.:
A
bekezds mint ltjuk a hierarchia aljn tallhat s szleleme a cmsor s a is azaz maga a dokumentum. Ezektl a hierarchiktl elrni egyedi azonostk, jellk, s osztlyok segtsgvel lehet a CSS-ben. Ezek a ksbbiekben kifejtsre kerlnek.

1.4 A HTML korltai, s azok tlpse CSS segtsgvel A HTML ler nyelv hatra lnyegben ott tallhat, amikor is a weboldalunk tartalmt mr felptettk, s az abban tallhat elemek alapvet sorrendjt, hierarchijt belltottuk. A szl gyermek kapcsolatokat kialaktottuk. (pl. ......) A HTML dokumentumok ksztse sorn, a formzsra nem sok lehetsg van. Az gynevezett HTML elemek egyes tulajdonsgai br llthatak, s ezek segtsgvel tudjuk mdostani a weboldal kinzett, de ezek trhza szegnyes, s olykor az ignyek ezen bven tlmutatnak. Ilyen HTML alap formzsi lehetsg pldul a rendezs (ALIGN) mely sok elemhez meghatrozhat tulajdonsg. Ezek segtsgvel az elemek balra, jobbra, kzpre, esetleg sorkizrtt rendezhetk. Azonban ennek segtsgvel se tudjuk az elemeket bizonyos mrtkben balra vagy jobbra helyezni az oldalon. Pl.: left:50px; Vagy ugyangy jrhatunk az egyes elemek kls s bels marginak belltsval, melyhez a HTML nyelvben valljuk be kevs lehetsget kapunk, azonban a CSS segtsgvel szinte az sszes elemre bellthatjuk ezeket a tulajdonsgokat. Pl.: padding-bottom:5px; A mr emltett FONT elem tulajdonsgai pldul kimerlnek a bettpus, a mret s a szn tulajdonsgok belltsi lehetsgvel. A CSS a szvegek formzsra ennl jval tbb lehetsget knl. Pl. a kiskapitlis szveg: font-variant:small-caps;

6


CSS segtsgvel mg a jl megszokott balrl-jobbra, fentrl-lefel megjelensi struktrt is megbonthatjuk az egyes elemek pozcijnak konkrt megadsval, vagy a rtegek kezelsvel, s ezltal egyedi dizjnt alakthatunk ki. Pl.: position: absolute;

2. A CSS ltrehozsnak mdjai

Hrom fle mdon illeszthetnk stlust a weboldalunkhoz. Ezeket a stluslapokat klnbz nven lttk el, melyekre ezeken a neveken fogunk hivatkozni:

Inline Style elembe gyazott, vagy ms nven egy elemhez rendelt stlus egy konkrt HTML elemhez rendeljk hozz a HTML kdban

Internal Stylesheet bels vagy begyazott stluslap a HTML kd fejlcben (HEAD) helyezzk el

External Stylesheet kls stluslap egy kls llomnyban troljuk, melyre hivatkozunk a HTML kdban

Ezek prioritsa a fenti lista szerint pl fel, teht az Inline stlusnak van a legnagyobb prioritsa, s az External stluslapnak van a legkisebb prioritsa a hrom lehetsg kzl.

2.1 External Stylesheet ltrehozsnak mdja Ltrehozzuk a stlusokat s formzsokat tartalmaz llomnyt, melyet .CSS kiterjesztssel mentnk el. Erre az llomnyra fogunk hivatkozni a HTML kdjban a kvetkezkppen: Ezt a hivatkozst a HTML kd fejlcben, teht a HEAD rszben kell, hogy elhelyezzk. A hrom paramter jelentse:

REL: a kt dokumentum kzti kapcsolatot rja le. Jelen esetnkben ez kls stluslapot jell.

TYPE: a csatolt kls llomny MIME tpusa. Jelen esetnkben ez text/css, mely szvegfjlra utal.

HREF: a kls llomny elrsi tja. Jelen esetnkben ez az allomany.css mely a weblapunkkal megegyez mappban helyezkedik el, mivel nem adtunk meg az elrshez szksges ms hivatkozst, s gy relatv hivatkozsknt rtelmezdik. Ha az llomnyunk pl. egy mappval fentebb helyezkedik el akkor hivatkozhatunk r a href=../allomany.css paramterrel.

Ha olyan llomnyra hivatkozunk, mely nem tallhat a HTML nem fog hibt zenni,a lap betltdik s stlusok hinyban a lap eredeti formtumban fog megjelenni.

7


A CSS llomnyban helyezzk el a formzshoz szksges kivlasztkat, s a hozzjuk tartoz tulajdonsgokat, melyeknek szintaktikjt a ksbbiekben kifejtjk, de lssunk egy pldt: td{ padding-left:10px; margin-left:5px; background-color:#5656FF; } Ilyen s ehhez hasonl elemeket fog tartalmazni a CSS llomnyunk.

2.2 Internal Stylesheet ltrehozsnak mdja Az Internal Stylesheet abban klnbzik az elz megoldstl, hogy a fenti pldhoz hasonl elemeket nem egy kls llomnyban helyezzk el, hanem a HTML oldalunk fejlcbe (HEAD) rjuk. A fejlcbe rt begyazott stluslapokat a s a HTML elemek kz kell rnunk a kvetkezkppen: td{ padding-left:10px; margin-left:5px; background-color:#5656FF; } A tagok kz rt elemek szintaktikja megegyezik az External Stylesheet hasznlatakor ktelez szintaktikval, teht a CSS nyelv szintaktikjval. Arra figyeljnk, hogy ha hivatkozunk kls stluslapra is, s bels stluslapot is hasznlunk, akkor a elemet a el helyezzk el, klnben a kls stluslap fellbrlja a bels stlusainkat.

8


Azonban norml esetben, ha hasznljuk mindkt lehetsget az egyes objektumok tulajdonsgai a kvetkezkpp alakulnak:

A kls stluslapon megjellt, de a belsn nem megjellt tulajdonsgok rkldnek

A kls s a bels stluslapon is megjellt tulajdonsgok kzl a bels stluslapon megjellt tulajdonsg lesz az rvnyes

A bels stluslapon megjellt, de a kls stluslapon nem emltett tulajdonsg egyrtelmen a bels stluslapon megjellt formban lesz rvnyes

3. Inline style ltrehozsnak mdja

Ahogy azt emltettk, a legmeghatrozbb s prioritsban is ell ll tpusa CSS-ben az Inline style. Az egyes HTML elemekhez konkrtan feltntetett formzsi tulajdonsgok fellbrljk a kls vagy bels stluslapon meghatrozottakat. Hasznlata: Az egyes HTML elemek paramterlistjnak valamely rszben feltntetjk a STYLE kulcsszt melynek rtkeknt soroljuk fel az adott elemhez tartoz tulajdonsgokat s azok rtkeit. gyeljnk arra, hogy a felsorolt tulajdonsgokat s rtkeket tovbbra is a szintaktika szablyainak megfelelen kell feltntetnnk, mg akkor is, ha jelen esetben egy sorba rjuk az sszest. Plda: A fenti pldban ltszik, hogy a TD elemhez tartoz HTML attribtumok hasznlhatak tovbbra is az Inline style hasznlata mellett. Jelen esetben pl. a COLSPAN cellaegyests. A STYLE attribtum utn az idzjelek kz soroljuk fel a kvnt tulajdonsgokat. Arra figyeljnk, hogy ha hasznlunk a CSS leiratban is idzjelet, akkor ms tpust hasznljunk, mint amit a STYLE paramternl hasznltunk. Pl.:

4. A CSS szintaxisa, kijellk, tulajdonsgok, rtkek

A CSS szintaktikai szablya a kvetkez mdon pl fel: Szksgnk van egy gynevezett SELECTOR-ra, magyarul szelektor vagy kijell. Ez hatrozza meg mely elemekre fognak rvnyeslni a felsorolt tulajdonsgok. Ezek a kijellk sokflekppen plhetnek fel, melyeket ksbb sorolunk fel.

9


A kijell utn kapcsos zrjelek { } kztt soroljuk fel a tulajdonsg-rtk prosokat, mindegyiket egyenknt pontosvesszvel lezrva. Ez a szintaxis a begyazott s a kls stluslapra vonatkozik. Az Inline stlusnl a szelektorok s a kapcsos zrjelek nem hasznlhatk. ltalnos plda: SZELEKTOR {Tulajdonsg1:rtk; Tulajdonsg2:rtk;} Konkrt plda: H3 {color:yellow; background-color:#444F55;} Ezeket a blokkokat termszetesen lehet, s rdemes is a szerkeszts sorn gy formzni, hogy az olvashatbb, tlthatbb legyen. H3 {

color:yellow; background-color:#444F55;

} A kijellket megadhatjuk felsorolsknt is, azaz egy blokkhoz tartozhat tbb kijell is. Ezeket vesszvel elvlasztva kell megadnunk. H3, P, H1 { font-size:11px; } A tulajdonsgok mindegyike beptett tulajdonsg, melyek a nyelv rszei. Ismeretk szksges a formzsok elvgzshez, azonban a tulajdonsgok legtbbszr az angol megfeleljkkel azonos, ezrt elsajttsuk knny. Minden tulajdonsghoz meghatrozott rtkek tartozhatnak. Az rtkek a kvetkez tpussal rendelkezhetnek:

beptett rtk, konstans o sznek (red, blue, yellow, stb.) o rendezsek (center, right, left, stb.) o pozcik (absolute, relative, stb.) o szeglyek (dashed, solid, dotted, stb.) o stb.

numerikus rtk o font-weight:300;

10


numerikus rtk konkrt mrtkegysggel (itt gyeljnk arra, hogy az rtk s a mrtkegysg kztt ne legyen szkz!)

o left:50px; o font-size:2.5em; o width:50%;

szveges rtk o background-image:url('paper.gif');

sznkd o color:#f546f5;

Vannak esetek, amikor egyes tulajdonsgokhoz tbb rtket is rendelhetnk azokat szkzzel elvlasztva. Ilyen pl. mikor a keretek meghatrozsakor egyszerre adhatjuk meg azok mrett tpust s sznt: border:1px solid black; Vagy ilyen pldul mikor a fels, jobb oldali, als, s bal oldali margkat egyszerre hatrozzuk meg egy elemre: margin:10px 20px 30px 40px; Ezeknl a lehetsgeknl gyelnnk kell arra, hogy a sorrend kttt. A CSS nem kpes felismerni az rtkek felsorolsakor azok rendeltetst. A szintaktikai szablyokhoz tartozik mg a COMMENT-ek, azaz a megjegyzsek elhelyezsre vonatkoz szablyok. A CSS-ben a /* */ jellk kz rva helyezhetnk el megjegyzst a szvegben. s ahogy a plda is mutatja, egyes tulajdonsg-rtk prosok is gy elrejthetk a bngszk szmra. TD {

/*ez egy cella formzsa*/ background-color:green; /* color:red;*/ }

5. Szelektorok, kijellk

Hogy az egyes blokkok tulajdonsgai mely HTML elemekre vonatkoznak, azokat a kijellkkel tudjuk meghatrozni. Ezekre a kvetkez megoldsok lteznek:

5.1 Elem neve alapjn trtn meghatrozs Konkrtan megjelljk, azt a HTML elemet melyre a tulajdonsgokat akarjuk belltani. Ekkor az sszes, a dokumentumban tallhat hasonl elemre rvnyesl a formzs.

11


TD{color:green;} vagy TABLE{margin:0px;}

5.2 ID (azonost) alapjn trtn meghatrozs A HTML kdban az egyes elemek tagjaiban elhelyezhetnk egy ID attribtumot melynek rtkre ksbb a CSS llomnyban hivatkozunk a # jel segtsgvel. A szintaxis a kvetkez: HTML kd: CSS kd: #fontos{margin:1px;} Ekkor a formzs csak a fontos azonostval elltott elemekre lesz rvnyes. Pldnkban a feltntetett TABLE elemre. Habr az ID alap kijellst egyedi esetekre szoktuk hasznlni, amennyiben ez az azonost tbb elemre is be van lltva, gy azokra mindre rvnyes lesz a formzs.

5.3 CLASS (osztly) alapjn trtn meghatrozs Akrcsak az ID alap kijellsnl, itt is a HTML kdban helyeznk el egy jellt. Az elem attribtumai kz runk egy CLASS attribtumot melynek rtkre a CSS llomnyban hivatkozhatunk a pont rsjel segtsgvel a kvetkez mdon: HTML kd: CSS kd: .szines{color:red;} A formzs ekkor minden olyan elemre rvnyes lesz melynek osztlya szines, azaz attribtumai kztt megtallhat a CLASS=sznes. Pldnkban egy H3 cmsort ruhztunk fel az osztly tulajdonsggal, de ha a dokumentumban tallhat ms elem hasonl osztly elnevezssel (pl.: ), akkor arra is rvnyes lesz a formzs. Hogy ezt elkerljk lehetsgnk van konkrt HTML elemek osztlyaknt megjellni egy-egy blokkot a CSS llomnyban. H3.szines{color:red;} Ekkor mr csak a H3 cmsorokra lesz rvnyes a formzs, s azok kzl is csak arra melyben osztlyknt a szines osztly van megjellve.

5.4 Elhelyezkeds alapjn trtn meghatrozs Ilyenkor az alapjn trtnik a kivlaszts, hogy az adott HTML elem hol helyezkedik el a hierarchiban. Nzznk kt pldt:

12


TD P{padding-bottom:3px;} vagy DIV TABLE{border:1px solid black;}

Az els esetben a formzs csak azokra a P elemekre vonatkozik melyek valamely TD elemben lettek elhelyezve a HTML dokumentumban. A msodik esetben pedig csak azokra a TABLE elemekre vonatkozik, melyek valamely DIV elembe lettek gyazva. Ezek segtsgvel pldul szpen elklnthetjk azokat az elemeinket, melyeket tblzatban hasznlunk vagy azon kvl.

5.5 Vegyes meghatrozs Lehetsgnk van a mr megismert kijellsi mdok kombinlsra. Ekkor az egyes technikkat felhasznlva tudunk bonyolultabb kivlasztst eszkzlni. 1. plda: .szines TD{color:green;} Azokra a TD elemekre vonatkozik, melyek olyan elemen bell helyezkednek el a hierarchiban, amelyek a szines osztlyba tartoznak. Pl.: 2. plda: #fontos .szines{color:green;} Azokra az elemekre vonatkozik melyek a szines osztlyhoz tartoznak s olyan elemen bell helyezkednek el a hierarchiban melynek az azonostja fontos. Pl.: s gy tovbb. A lehetsgek szinte hatrtalanok.

5.6 Pszeudo osztlyok, s elemek szerinti meghatrozs Lteznek beptett osztlyok is a CSS-ben, s ezeket is vlaszthatjuk kijellnek, kettsponttal a megadott elem utn rva azt. Ilyenek pldul a hivatkozsra vonatkozak:

13


De ilyenek pldul a szvegtpus elemek pszeudo elemeinek formzsa is:

P:first-letter{color:red;} A bekezds els betjnek formzsa P:first-line{color:red;} A bekezds els sornak formzsa

5.7 Attribtum szerinti meghatrozs Ha nem akarjuk osztlyhoz ktni a kivlasztst, s mgis kln akarjuk vlasztani ugyanolyan tpus elemek formzst, akkor j megolds lehet az attribtum szerinti formzs. Sokszor hasznljuk pldul ezt az INPUT elem formzsnl, melynek tbb klnfle tpusa van, fggetlenl attl, hogy mind INPUT HTML tag.

input[type="text"]{font-size:14px;} Ez a formzs csak azokra az INPUT elemekre vonatkozik, melyeknek ltezik type=text attribtuma.

6. Httr, szveg, bettpus formzs CSS-ben

6.1 A HTML elemek httrnek belltshoz szksges tulajdonsgok

6.1.1 A httr szne: background-color

A tulajdonsg beptett sznazonostt, RGB-vel meghatrozott rtket vagy sznkdot kaphat rtkl. Lssunk erre hrom pldt:

TD{background-color:yellow;} TD{background-color:RGB(10,20,30);} TD{background-color:#FF54A6;}

6.1.2 A httrben elhelyezett kp (httrkp): background-image

rtke az URL metdus segtsgvel adhat meg, mely metdusnak szveges formban adjuk meg a kp helyt:

TD{background-image:URL(kiskutya.jpg);}

6.1.3 A httrkp ismtldse, s pozcija

14


A httrkp ismtldst a kvetkez tulajdonsg hatrozza meg:

background-repeat A tulajdonsg rtkei a kvetkezk lehetnek:

TABLE{background-repeat:repeat;} (ismtldik mindkt irnyban)

TABLE{background-repeat:no-repeat;} (nem ismtldik a kp)

TABLE{background-repeat:repeat-x;} (csak vzszintesen ismtldik)

TABLE{background-repeat:repeat-y;} (csak fgglegesen ismtldik)

A httrkp pozcijt pedig a:

background-position tulajdonsg lltja. rtke kt egymstl szkzzel elvlasztott konstans lehet, melyek kzl az els a fggleges pozcit (top, center, bottom), a msodik pedig a vzszintes pozcit (left, center, right) hivatott lltani. gy pldul egy httrkpet az elem kzpre gy helyezhetnk:

TABLE{background-position:center center;} a bal als sarokba pedig gy:

TABLE{background-position:bottom left;}

6.1.4 Httrkp csatolsa az oldalhoz: background-attachment

A tulajdonsg megadja, hogy a csatolt httrkp az oldal grdtsekor kigrdlhet-e az oldalon, vagy fix maradjon, fggetlenl az oldal terjedelmtl s pozcijtl.

BODY{background-attachment:fixed;} (A httrkp mozdulatlan marad)

BODY{background-attachment:scroll;} (A httrkp kigrdlhet)

15


6.2 A szvegek s bettpus formzsa A szvegek formzsra rengeteg lehetsgnk van. A kvetkezkben a teljessg ignye nlkl sorolunk fel pr pldt a fontosabbak s hasznosabbak kzl, mely pldkban a P bekezds elemre lltjuk a tulajdonsgokat. Szveg szne: P{color:#45466A;}

rtke a mr megismert sznrtkek valamelyike lehet Igazts: P{text-align:right;}

rtke lehet: center, left, right, justify (sorkizrt) Sortvolsg: P{line-height:4px;}

rtke lehet: %-os rtk a jelenlegi betmrethez kpest, konkrt mrtk, vagy numerikus rtk mely az aktulis betmrettel szorzdik fel (pl.: msfelenl: 1,5)

Betkz: P{letter-spacing:14px;} rtke az eredeti betkztl val eltrst jelzi

Behzs: P{text-indent:20px;} rtke lehet konkrt mrtk, vagy %-os rtk a szlelem mrethez kpest

Betmdosts: P{text-transform:uppercase;} rtke lehet: uppercase (nagybetst), lowercase (kisbetst), capitalize (szavak els betje nagy)

Kinzet: P{text-decoration:underline;} rtke lehet: underline (alhzott), overline (felhzott vonal), line-through (thzott)

Szkz: P{word-spacing:20px;} rtke az eredeti szkztl val eltrst jelzi

Bettpus: P{font-family:Arial,Helvetica,sans-serif;}

rtke egy bettpus pontos neve, vagy egy betcsald szabvnyos elnevezse

Betmret: P{font-size:120px;} rtke konkrt mrtk, %-os rtk a szlelem betmrethez kpest, vagy egy beptett konstans (x-small, small, medium, large, x-large, xx-large stb.)

A bet stlusa: P{font-style:italic;} Flkvrsg: P{font-weight:100;}

rtke lehet a bold, bolder, lighter konstansok egyike, vagy egy rtk 100-900-ig 100-as lptkkel mely a flkvrsg mrtkre utal

16


7. Listaelemek, tblzatok

7.1 Listaelemek formzsa: A listk gyakran hasznlatos elemek a HTML oldal ksztse sorn. Sokszor lehet szksgnk arra, hogy egy listnak az elemeit ne a beptett listaelem jellk vezessk be, hanem sajt egyni jellket vlasszunk, vagy pedig a beptettek kzl is valamelyik specilisra van szksgnk. Ezek belltsra a kvetkez tulajdonsgok adottak a CSS-ben: list-style-image Segtsgvel meg tudunk hatrozni egy kpet, melyet a CSS a listaelemek jellsre fog hasznlni. Hasznlata hasonl a background-image tulajdonsghoz. Pl.: UL.erdo{list-style-image:URL(fa.jpg);} Ha nincs a tarsolyunkban megfelel kp a listaelemek jellsre, akkor vlaszthatunk a beptett elemek kzl is: list-style-type Pl.: UL.fontos{list-style-type:circle;} A tulajdonsg rtkei a kvetkezk lehetnek: circle krk disc teltett krk square ngyzet armenian rmny szmozs decimal szmozott decimal-leading-zero szmozott bevezet nullkkal elltva georgian grz szmozs lower-alpha kisbets felsorols lower-greek kisbets grg ABC szerint lower-latin kisbets latin ABC szerint lower-roman kisbets rmai szmozs szerint upper-alpha nagybets upper-latin nagybets latin ABC szerint upper-roman nagybets rmai szmozs szerint

17


7.2 Tblzatok formzsa: Lehetsgnk van gy fejleszteni weboldalakat, hogy a tblzatokat teljes mrtkben elhagyjuk. Ezeket TABLELESS technolgiknak hvjk, s a tblzatok helyett ltalban a DIV s SPAN elemek segtsgvel ptik fel a dizjnhoz szksges szerkezetet, kinzetet.

Viszont, ha mi mgis tblzatokkal szeretnnk fejleszteni, akkor azok formzsra is idt kell fordtanunk, mivel a tblzatok bonyolultsga elg nagy. Egy egyszer tblzat is legalbb hrom tpus elembl ll: TABLE, TR, TD. Egy komolyabb tblzat ennek sokszorost is tartalmazhatja, s ahhoz, hogy ezeket ne kelljen egyesvel formznunk, jl elksztett szelektorokra lesz szksgnk a stluslapon.

Mivel a tblzatban lv elemek hierarchija lland, hiszen a TABLE kls elemben a sorokra vonatkoz TR elem tallhat mindig s azon bell tallhatak a TH vagy TD cellkat meghatroz elemek, radsul mindegyikbl annyi ahny cellt jelentnk meg, ezrt a helymeghatrozsos szelektorok nagyon jl hasznlhatak a tblzatok formzsnl.

TABLE.fontos TD { background-color:red; color:white; } Pldnk esetben a 'fontos' osztlyba tartoz tblk celli lesznek formzva. De ugyanilyen hasznos lehet, ha a tblzat minden elemre lltunk be rtkeket egyetlen szelektor felsorolssal: TABLE, TH, TD { border:2px dashed yellow; } Ha olyan tblzaton prbljuk ki a fenti belltst, amelyben valamely cella teljesen res akkor ltni fogjuk, hogy ezekhez a cellkhoz is megjelenik a szegly. Ennek belltsra az empty-cells tulajdonsg szolgl, melynek rtke vagy show (megjelent) vagy hide (elrejt).

18


Pldul gy kell elrejteni az res cellk szeglyt: TABLE { empty-cells:hide; } A nem res cellk szeglyei viszont mindenflekppen megjelennek, radsul mindegyiknek sajt szeglye van. Ha szeretnnk, hogy minden egyes cella csak egy kzs szegllyel rendelkezzen, akkor hasznljuk a kvetkez tulajdonsg-rtk prost: TABLE { border-collapse:collapse; } A tblzatban lv rtkek igaztsa vzszintes s fggleges irnyban is lehetsges. Ezekre a kvetkez tulajdonsgok llnak rendelkezsnkre: text-align vzszintes igazts, rtke lehet left, right, center vertical-align fggleges igazts, rtke lehet top, bottom, center

8. Szegly, krvonal, marg, trkz

Ahhoz, hogy megrtsk a HTML oldal elemeire bellthat szeglyeket, trkzket, s margkat, elszr meg kell rtennk, hogyan pl fel CSS-ben az egyes elemek szerkezete. A tnyleges tartalom kr milyen sorrendben s mdon plnek r az egyes tulajdonsgok. A lenti bra ezt hivatott szemlltetni:

A HTML elemek felptse a CSS szmra

Vegyk sorba ezeket a tulajdonsgokat.

19


8.1 Szegly

Egy elem szeglynek hromfajta tulajdonsgt llthatjuk be. A sznt, a stlust, s a vastagsgt. Ezeket a tulajdonsgokat be tudjuk egyszerre is lltani, de akr egyesvel is kln-kln a ngy oldalra. Pldul a szn belltshoz hasznlhatjuk a border-color tulajdonsgot de ha egyesvel szeretnnk akkor a border-left-color border-right-color border-top-color border-bottom-color kulcsszavakat vlasszuk, melyek sorrendben a bal, jobb, fels, s als szegly sznt lltjk be. Pldul az als keret vrs sznre lltva: TD{border-bottom-color:red;} A szegly vastagsgnl s stlusnl ugyanez a helyzet. A border-width s border-style tulajdonsgokba a jl ismert szavak kzbekelsvel az egyes oldalakat llthatjuk be. Pldul border-top-width (fels szegly vastagsga), vagy border-left-style (bal szegly stlusa). A szegly vastagsgt thin, medium, s thick konstansokkal bellthatjuk elre definilt mretekre, de konkrt rtket rva pontosan is meghatrozhatjuk. DIV{border-left-width:5px;} A szegly stlusnl nem csak ennyi lehetsg kzl vlaszthatunk. Kilenc fajta beptett stlus van. Ezek sorban a kvetkezk: none: nincs szegly dotted: pontozott dashed: szaggatott solid: egybefgg double: duplavonallal elltott s vannak mg az gynevezett 3D-s azaz hromdimenzis hatst kelt stlusok melyek a groove, ridge, inset, s outset. Ezek kinzetre hasonl szeglyszn mellett rdemes mind a ngy belltst kiprblni. Lssunk egy pldt is, mely a cella mind a ngy szeglyt szaggatottra lltja. TD{border-style:dashed;}

20


Ha tudjuk, hogy be szeretnnk lltani a szegly mindhrom tulajdonsgt egyszerre, akkor hasznljuk az sszevont belltst, ekkor csak a border, vagy border-left, border-right, border-top, border-bottom valamelyikt vlasszuk s kttt sorrendben rtkl adjuk neki szkzzel elvlasztva a vastagsgt, a stlust, s a sznt. Pldul a bal oldali szegly 3px vastagra, pontozottra s srgra lltva: TD{border-left:3px dotted yellow;} Ha mr megszoktuk ezt a sorrendet, akkor sajnos el is felejthetjk, mert a kvetkez tulajdonsgnl, nv szerint a krvonalnl hasonl sszevons esetn a sorrend sajnos a szn, stlus, mret lesz. Br fejlesztseink sorn sokkal kevesebbet fogunk tallkozni a krvonal hasznlatval, mint a szeglyekvel. A krvonal mindazonltal hasznos lehet egy-egy elem kiemelsre az oldalon. A krvonal a szegly kr vont vonal melynek stlusa pont ugyanazon rtkeket veheti fel mint a szegly. Pldul egy kk szn egybefgg 4px vastag krvonal a bekezdsen gy llthat be: P{outline:blue solid 4px;}

8.2 Margk s trkzk A margk s a trkzk belltsa br ms-mst jelent, hasznlatuk pontosan ugyangy mkdik. Hasonlan a szeglyekhez, itt is llthatjuk az sszes marg s trkz mrett, de llthatjuk egyesvel is a ngy oldalt. Margk esetben ezt a margin s a margin-left, margin-top, margin-right, margin-bottom, trkzk esetben pedig a padding, valamint a padding-left, padding-top, padding-right, padding-bottom tulajdonsgokkal llthatjuk be. Pldul egy DIV elem bal oldali margjt 5px jobb oldali trkzt pedig 10px mretre lltani gy tudjuk: DIV {

margin-left:5px; padding-right:10px;

} Ha egyszerre akarjuk belltani a ngy oldalt, akkor gyeljnk a sorrendre. Az egyes rtkeket szkzzel elvlasztva a kvetkez sorrendben kell megadni:

fels jobb oldali als bal oldali

21


Pldul: TD {

margin:10px 20px 30px 40px; padding:35px 15px 25px 30px;

} fels marg 10px, jobb marg: 20px, als marg:30 px, bal marg: 40px s hasonlan a trkz esetben.

9. Mretezs, kijelzs vezrls, elhelyezs

Az elemek mretezsnl vegyk figyelembe a mr megtanult struktrt, ahogy egy elem felpl. Nzzk meg jra az brt:

Egy elem szlessge s magassga belltsakor a CSS csak az elem tartalmnak sznt helyet mretezi. Egy elem vgleges vals mrett a hozz tartoz trkz, szegly s marg mrete is meghatrozza. Nzzk meg hogyan kell lltani egy elem mrett. Szlessg: width Magassg: height Pldul egy DIV elem 200px szlesre s 300px magasra lltva: DIV{width:200px;height:300px;} Azonban hogy ennek a tnyleges mrete mekkora a megjelenskor a fent felsorolt tnyezktl fgg. Pldul ha egy DIV szlessge 200px, a hozz tartoz marg 10px, a trkz 50px s a szegly 2px, akkor a tnyleges szlessge nem 200px lesz hanem 200+20+100+4 azaz 324px. Vegyk szre, hogy a marg, trkz s szegly rtkeket ktszer szmoltuk, hiszen a bal s jobb oldalon is hatst fejtenek ki. Ugyangy mkdik a magassg esetben is. A margk, trkzk, s szeglyek fels s als rtke is beleszmoldik a vgleges mretbe.

22


Mr tudjuk mekkora helyet foglal el az oldalunkon egy-egy elem, most nzzk meg hogyan tudjuk ezeket az elemeket elrejteni s megjelenteni, valamint teljesen eltntetni az oldalrl. A megjelensrt kt tulajdonsg a felels. A visibility s a display. Az els inkbb a lthatsgot a msodik pedig a megjelenst kezeli. A lthatsg kt rtket kpviselhet, vagy lthat vagy nem. Ezek a visible s hidden konstansokkal rhetk el. Pldul egy fent emltett DIV elemet el tudunk rejteni a kvetkez mdon: DIV{visibility:hidden;} Viszont, ez a mdszer br elrejti az oldalrl az elemet, nem szabadtja fel annak helyt. A fent kiszmolt helyignye megmarad, az oldal szerkezett tovbbra is befolysolja. Ahhoz, hogy az oldalrl teljesen eltnjn, ki kell kapcsolni a megjelentst. Erre val a mr emltett display tulajdonsg. Pldul a DIV elem megjelentsnek kikapcsolsa: DIV{display:none;} Ha mgis meg akarjuk jelenteni az elemet, akkor kt tpus kzl vlaszthatunk. DIV{display:inline;} DIV{display:block;} A kett kztt az a klnbsg, hogy mg az inline gy helyezi el az elemet, hogy a megjelents utn nem tr sort, a block bellts megteszi azt. Az inline hasznos lehet olyan HTML elemeknl, melyek automatikusan sort trnek, de mi nem szeretnnk ezt. Plddul a FORM tag vagy az LI tag. A block pedig pont az ellenkez esetben, azoknl a HTML elemeknl, amelyek alapbl nem trnek sort. Ilyen pldul a SPAN vagy az A tag. Ha gy dntnk, hogy megjelentjk az elemeinket, fontos hova helyezzk el ket. Az elemek norml esetben statikus pozcival rendelkeznek melyek automatikusan szmoldnak ki. Az elemek pozcijnak megvltoztatshoz a position tulajdonsgot kell j rtkkel felruhznunk, majd utna a left, right, top, bottom tulajdonsgokkal llthatjuk be az elem pontos helyt. Ezen tulajdonsgok rtkei az elem megadott szlnek tvolsgt jelentik a viszonytott elemhez kpest. Pldul a left:50px; azt jelenti, hogy az elem bal szle 50px-re helyezkedjen el a viszonytott elem bal szltl. Vagy pedig lehet auto rtk melynl a bngsz dnti el az egyes szlek helyzett, ha tudja. Az, hogy ppen mihez viszonytunk a position tulajdonsg rtke dnti el. Lssuk ezen lehetsgeket: DIV{position:fixed;bottom:20px;}

23


A fixed rtk esetn az elem helyzete a bngszablak szltl lesz szmtva, fggetlenl attl, hogy az oldalt elgrdtettk-e vagy nem. Jl hasznlhat pl. egy logo lland megjelentshez az oldal egy bizonyos pontjn. DIV{position:relative;left:-20px;} A relative rtk esetn az elem helyzete relatvan az eredeti pozcijtl lesz szmtva. Mint lthatjuk a pldbl a pozcik negatv rtkkel is rendelkezhetnek. DIV{position:absolute;top:30px;} Az absolute rtk esetn az elem helyzete relatvan az els olyan szlobjektum szltl lesz szmtva amelynek tlltottuk position tulajdonsgt msra mint statikus (static). Ha nincs ilyen, akkor maga a dokumentum lesz ez a szl objektum. Nha elkerlhetetlen hogy az egyes elemek fedsbe kerljenek. Addig-addig lltgatjuk azok helyzett, hogy az egyik eltakarja a msikat, vagy annak egy rszt. Hogy ilyenkor melyik elem kerl mgis feljebb a z-index tulajdonsg hatrozza meg. gy kell elkpzelni az elemeket, mintha kln rtegekre helyeznnk el ket. Minl nagyobb a z-index rtke annl magasabb rtegbe helyezkedik el. Teht egy kisebb z-index rtkkel rendelkez elemet elfed. DIV{position:absolute; left:40px; z-index:10;}

10. Kpek, szvegek igaztsa

Az elemek igaztsra mr tanultunk mdszereket, most foglaljuk ezeket ssze, valamint nzznk meg egy j lehetsget. Egy elemen bell, a kpek szvegek igaztst a mr megismert text-align s vertical-align tulajdonsgokkal tudjuk jobbra, balra, s kzpre helyezne, vzszintesen valamint fgglegesen. Msodik lehetsgnk hogy a mr megtanult marg tulajdonsgot kihasznlva helyeznk el egy elemet a szl objektum valamely rszre. A margnak rtkl adhatunk egy gynevezett auto rtket, mely a bngszre bzza az adott marg rtknek kiszmtst. Ezt kihasznlva pl. helyezznk minden irnybl kzpre egy elemet: DIV{margin:auto;} csak vzszintesen kzpre: DIV{margin-left:auto;margin-right:auto;}

24


vagy jobbra gy, hogy a bal oldali margt lltjuk automatikusra: DIV{margin-left:auto;} Harmadik lehetsgnk az elzekben tanult pozci (position) meghatrozsa. Ha gyesen hasznljuk a left, right stb. tulajdonsgokat, az elem a kvnt helyen jelenik majd meg. Negyedik lehetsgnk egy j tulajdonsg megismerst ignyli. Ez pedig a float. A float tulajdonsg lnyegben az elemek igazodst jelenti. A megjelentett elemek a bngszablak mrettl fggen megprblnak a megadott irnyba csoportosulni. Az irny ktfajta lehet, vagy bal: IMG{float:left;} vagy jobb: IMG{float:right;} Ha tbb elemre is belltjuk egyms utn ezeket a tulajdonsgokat, akkor sorban egyms utna prblnak az elemek igazodni a megadott irnyba. Nha viszont szksg van arra, hogy a soron kvetkez elemhez mr ne igazodjanak a float tulajdonsggal elltott elemek. Ekkor hasznljuk a clear utastst mely megtiszttja az elem adott oldalt. Az elem jobb oldalhoz nem engedlyezett az igazods: P{clear:right;} Az elem bal oldalhoz nem engedlyezett az igazods: P{clear:left;} Az elem egyik oldalhoz sem engedlyezett az igazods: P{clear:both;}

11. tltszsg

Br az tltszsg nagyon hasznos, s sok esetben jl mutat a weboldalunk bizonyos elemeire aktivlva, sajnos mg nem CSS szabvny. Jelenleg kt tulajdonsg is van a CSS-ben amely ezt hivatott lltani, radsul ezeknek rtktartomnya is eltr. Az els az opacity:rtk melynek rtke 0.0 s 1.0 kz eshet, gy, hogy 0.0 a teljesen tltsz a 1.0 pedig az egyltaln nem tltsz elemet eredmnyezi. A msik ilyen tulajdonsg a filter:alpha(opacity=rtk) melynl az rtk 0 s 100 kz esik hasonl rtelmezsben, miszerint a 0 a teljesen tltsz a 100 pedig az egyltaln nem tltsz elemet eredmnyezi.

25


A msodik megolds az Internet Explorer bngsz szmra rtelmezhet zenet, az els pedig pl. a firefox bngsz szmra. A CSS3 szabvnyban az els vltozat lesz az elfogadott. Ha azt akarjuk, hogy vlheten mindegyik bngsz rtelmezni tudja majd a belltsainkat, tltszsg esetn mindkt paramtert egyszerre hasznljuk, s egyenrtk rtkekkel ruhzzuk fel. Pl.: IMG { opacity:0.3; filter:alpha(opacity=30); } Mint pldnkban is ltjuk a tulajdonsgokat egy IMG azaz egy kp elemre lltottuk be. Ez nem vletlen. Ezeket az tltszsggal kapcsolatos effektusokat fleg kpekre, DIV elemekre lltjuk be. Kt okbl is. Elszr is mivel nem biztos, hogy minden bngsz minden esetben kpes az tltszsgot kezelni, nem szerencss szvegekre belltani az effektust, mivel rossz esetben olvashatatlann vlik a szveg. Msrszrl pedig a kpek, vagy a DIV s egyb blokk jelleg elemek htterbe helyezett kpek tltszv tve jl mutathatnak. Arra gyeljnk, hogy pl. egy DIV elemet tltszv tve nem biztos, hogy a benne megtallhat gyermek elemek is tltszv vlnak. Ezt a bngszk klnbzkpp kezelik!

12. Teszt

Komplex teszt vgrehajtsa a MOODLE e-learning keretrendszerben automatikus rtkelssel. Az rtkels tpusa: pontszmarnyos rtkels tfokozat skln rtkelve, rdemjegyekkel.

26


13. JavaScript trtnete, fejldse

A JavaScript trtnete egszen 1996-ig nylik vissza, szorosan sszekapcsoldva az ismert Netscape bngsz msodik verzijnak megjelenshez. A programnyelv ebben a bngszben jelent meg elszr. A nyelvet az akkor a Netscape-nl dolgoz Brendan Eich nev fejleszt ksztette. Eredetileg Mocha majd ksbb LiveScript nven futott, s csak ezutn kapta meg "vgleges" nevt, a JavaScriptet. Br elmletileg volt kze a nvadsnl a Java-hoz, fleg marketing okokbl, nagyon fontos hogy a JavaScript-nek semmi kze a Java-hoz. Vagy ahogy sok-sok JavaScript oktat knyv kezdi: JavaScript != Java. A nyelv ltrejttnek oka, hogy szksg volt egy olyan eszkzre, mellyel a megjelentett HTML, XML stb. oldalak programozhatv vlnak. Az egyes elemek kliens, avagy szerver oldalon mdosthatak lesznek az oldal betltse utn is. A nyelv alapja az gynevezett ECMA Script szabvny, amely sok szkriptnyelvnek az alapja. Annak vltozataira plve s kiegsztve a bngszben hasznos objektumok kezelsvel alakultak ki az egyes vltozatok. Ezeknek az objektumoknak a lersra val a DOM (Document Object Model). Nzzk, hogy plnek fel az egyes verzik:

JavaScript 1.0 1996-ban jelent meg a Netscape 2.0 bngszben, valamint ksbb az Internet Explorer 3.0-s verzijban. A korai ECMA Script szabvnyra s a DOM Level 0-ra plt a kpelemek kivtelvel. JavaScript 1.1 A Netscape 3.0 hasznlta. Alapja a korai ECMA Script s a mr teljes DOM Level 0. JavaScript 1.2 1997 jniusban jelent meg a Netscape 4.0-s verzijtl. Az ECMA Script szabvnyra s a DOM kiterjesztett vltozatra plt (DOM Level 0 + Proprietary DOM vagy Layers DOM), mely lerja hogy az egyes pozcionlt elemek s gyermek elemek stlust hogyan rhetjk el s vltoztathatjuk meg. JavaScript 1.3 1998 oktber. A Netscape 4.06-tl valamint az Internet Explorer 4.0-tl. A tovbbfejlesztett ECMA Script szabvnyra s persze a DOM kiterjesztett verzijra plt. JavaScript 1.4

27


Csakis a Netscape Server vltozathoz kszlt. (Server side JavaScript) JavaScript 1.5 2000 november. Az ECMA Script harmadik verzijra pl valamint a DOM W3C-re mely mr teljes egszben lerja az elemek kezelst, elrst, valamint az egyes elemek, objektumok ltrehozst, trlst, mdostst az oldal betltdse utn. Ezt a verzit lnyegben az sszes ma is hasznlt elterjedt bngsz tmogatja. A Netscape 6.0-s verzija, az Internet Explorer 5.5-tl napjainkig (ezekben a bngsz a Microsoft mr JScript-nek hvja), az ekkor megjelent Mozilla Firefox 1.0, az Opera 6.0-tl napjainkig, a Safari 3.0-tl napjainkig, s a Google Chrome. JavaScript 1.6, 1.7, 1.8, 1.8.1, 1.8.2, 1.9 Ezek a verzik mind csak az 1.5-s valamilyen fejlesztsei melyek csak a Mozilla Firefox j verziban jelentek meg vagy fognak megjelenni. Sorban az 1.5, 2.0, 3.0, 3.5, 3.6, 4.0. Ennek oka egyszer. A nyelv fejlesztje Brendan Eich ahogy a fejldsen is vgigkvethet elszr a Netscape-nl dolgozott, majd rszt vett a Mozilla Foundation megalaptsban, s a Mozilla fejlesztje lett, ahol napjainkban is tevkenykedik. JavaScript 2.0 A Mozilla ltal tervezett jvbeli kiads.

A JavaScript programnyelv elhanyagolhatatlann vlt. Aki szeretne weboldalakat fejleszteni, s azokat dinamikus oldalakk varzsolni, elkerlhetetlen, hogy megismerje s jl hasznlja a nyelvet. Ezt mg jobban megersti az a tny, hogy az AJAX (asynchronous JavaScript and XML) kifejlesztsvel jra kzpontba kerlt a JavaScript nyelv. Nem vletlen, hogy sok bngsz lasssgt, vagy ppen gyors mkdst a JavaScript feldolgoz motor okozza. Majdnem mindegyik weboldalon tallhat valamilyen kisebb, nagyobb szkript. A bngsznek az oldal megjelentsekor ezeket a programokat fel kell dolgoznia. Ennek sebessge kihat az oldal betltdsi idejre. A bngszk versenyben egyrtelmen azok az alkalmazsok ltszanak kiugran magas eredmnyeket elrni, akik jabb s jabb JavaScript motort hasznlva ezek feldolgozsi idejt cskkentik. Itt egy rgebbi diagram ennek bemutatsra:

28


forrs: ejohn.org

14. Objektumorientltsg, objektumok

A JavaScript a programoznak j nhny beptett objektumot biztost, amelyek mindegyiknek szmos elemvltozja s elemfggvnye van. Az objektumok elrst biztostanak a HTML dokumentumunk szinte minden fontosabb entitshoz, ugyanis a fontosabb, pl. a felhasznli bevitelt tmogat HTML tag-ekre most mr programbl is hivatkozhatunk, azaz a tag-ekkel definilt gombokat, szvegbeviteli sorokat vagy ablakokat immr JavaScript objektumokknt rhetjk el.

Ebben a tananyagrszben a kvetkezkrl lesz sz:

Melyek a JavaScript beptett objektumai, azok elemvltozi s elemfggvnyei?

Hogyan tegyk alkalmass a jl ismert HTML tag-eket arra, hogy JavaScript utastsokat hajtsanak vgre bizonyos esemnyek bekvetkezse esetn?

Hogyan nyerjnk ki rtkeket az rlapok elemeibl, pldul szvegbeviteli ablakokbl, egymst kivlt n. rdigomb-menkbl s igen/nem vlaszadsra (kipiplsra) alkalmas kapcsolkbl (checkbox)?

Hogyan hozzunk ltre s hogyan kezeljnk stringeket (string-objektumokat)?

29


Melyek azok a programoz ltal definilt gombok, amelyek JavaScript fggvnyek hvsra alkalmasak, azaz fggvnyleszt esemnyeket tudnak elidzni?

Hogyan tudjuk a matematikai fggvnyeket s konstansokat elrni?

14.1 A JavaScript objektumainak tpusai Az 1. bra tnteti fel a JavaScript ltal tmogatott objektumokat.

1. bra: A JavaScript objektumai

14.2 A JavaScript elre definilt objektumainak hasznlata

30


Nhny objektumot, mint pldul a Date s a Math , a JavaScript fordt eleve tartalmaz, gy ezeknek semmi kzk a HTML tag j paramtereihez, mg msok kapcsolatban vannak bizonyos HTML tag-ek paramtereivel. Pldul a szvegbeviteli sor objektum () lehetv teszi, hogy egy szvegbeviteli (input) sor tartalmra hivatkozhassunk. Az objektumok azonostsnak rdekben kt dolgot tettek:

Elszr is egy j name paramter kerlt szmos HTML tag-be azrt, hogy ezekre az objektumokra egyrtelmen hivatkozhassunk. Pldul a kvetkez HTML tag: Nem csupn egy szvegbeviteli sor, hanem egy szvegbeviteli objektum is.

Msodszor, a JavaScript a HTML rjnak megengedi, hogy az objektumok elemvltozit is elrje. Ezek az elemvltozk az objektumok bels adatstruktrjt valstjk meg.

Pldul a document nev objektumnak van egy bgColor nev elemvltozja, ami az aktulis dokumentum httrsznt adja meg.

14.2.1 zeltl (s kiss elre szaladva) kt rdekes objektum Checkbox (kapcsol) objektum Elemvltozk checked Egy igaz vagy hamis rtkkel tkrzi ez a tulajdonsg,

hogy a checkbox be van-e kapcsolva. defaultChecked A checkbox tulajdonsga, amely igaz vagy hamis

rtkvel azt adja meg, hogy volt-e a kapcsolnak CHECKED attribtuma.

form Az rlap neve, amelyben a checkbox tallhat. name A NAME attribtum rtke. type A TYPE attribtum rtke, ez itt checkbox. value A VALUE attribtum rtke.

31


Elemfggvnyek blur() Elveszi a beviteli fkuszt a checkboxrl. click() A checkboxra kattintst szimull, de nem hvja meg az

onClick esemnykezelt. focus() A checkbox megkapja a beviteli fkuszt. handleEvent() Meghvja a megadott tpus esemny kezeljt. Esemnykezelk onBlur A megadott esemnykezel akkor fut le, ha Blur

esemny kvetkezik be, azaz a checkbox elveszti a beviteli fkuszt.

onClick A megadott esemnykezel akkor fut le, ha Click esemny kvetkezik be, azaz a felhasznl rkattintott a checkboxra.

onFocus A megadott esemnykezel akkor fut le, ha Focus esemny kvetkezik be, azaz a checkbox megkapja a beviteli fkuszt.

Button (gomb) objektum Elemvltozk form Az rlap neve, amelyben a button tallhat. name A NAME attribtum rtke. type A TYPE attribtum rtke. value A VALUE attribtum rtke. Elemfggvnyek blur() Elveszi a beviteli fkuszt a buttonrl. click() A buttonra kattintst szimull, de nem hvja meg az

onClick esemnykezelt. focus() A button megkapja a beviteli fkuszt. handleEvent() Meghvja a megadott tpus esemny kezeljt. Esemnykezelk onBlur A megadott esemnykezel akkor fut le, ha Blur

esemny kvetkezik be, azaz a button elveszti a beviteli fkuszt.

onClick A megadott esemnykezel akkor fut le, ha Click esemny kvetkezik be, azaz a felhasznl rkattintott a buttonra. Ha az esemnykezel false rtkkel tr vissza, a bngsz nem kldi el a formot.

onFocus A megadott esemnykezel akkor fut le, ha Focus esemny kvetkezik be, azaz a button megkapja a beviteli fkuszt.

onMouseDown A megadott esemnykezel akkor fut le, ha MouseDown esemny kvetkezik be, azaz a felhasznl rkattint a

32


buttonra. Ha az esemnykezel hamisat ad vissza, a gomb nem nyomdik le.

onMouseUp A megadott esemnykezel akkor fut le, ha MouseUp esemny kvetkezik be, azaz a felhasznl felengedi az egr gombjt a button felett. Ha az esemnykezel hamisat ad vissza, az onClick esemnykezel nem hvdik meg.

15. Adattpusok

A JavaScript vltozi s konstansai alapveten hrom adattpust hasznlhatnak:

stringek: karakterlncok numerikus rtkek: egsz s vals szmok boolean: igaz vagy hamis logikai rtkek

A stringek karakterlncok, amelyeket egyszeres () vagy ktszeres () idzjelek kztt kell megadnunk. Stringek pl. Jancsika fut, 115,234 vagy a 4+2=9 is. Szmokat stringknt is trolhatunk, s ennek ellenre vgezhetnk velk matematikai mveleteket.

Ha a bngsz egy Gyernk\nszni! karakterlnccal tallkozik, azt kt sorban jelenti meg, mivel a stringben \n jsor karakter tallhat.

1. tblzat. Szvegformtum vezrl kdok

Kd Jelentse

\n j sor

\t Tabultor karakter

\r Kocsi vissza

\f Lapdobs

\a Hangjelzs

\b Backspace

Nyilvn hibsnak kell tekintennk a kvetkez kdot, hiszen az idzjelek nincsenek prban:

AStringem = Hibs

A numerikus rtkek (szmok) mind egsz (integer), mind pedig vals (floating point vagy real) szmok lehetnek.

Pldul 0, -55 s 59 egsz tpus, mg 25.43232, -0.3456 s 3.8E-6 vals szmok.

33


A boolean tpus (logikai) adatok csak true (igaz) illetve false (hamis) rtket vehetnek fel.

15.1 Sajt vltoz definilsa A JavaScriptben nem szksges a vltozk tpust megadnunk. A vltoznevek az angol ABC betjvel (a-z vagy A-Z) illetve alhzs karakterrel _ kell, hogy kezddjenek, majd betk, szmjegyek s jabb alhzs karakterek brmilyen kombincija szerepelhet a nvben.

atmenetiValtozo TalalatokSzama Ennyi_nap_van_a_honapban

A fentiek helyes vltoznevek. Hogyan lesznek ezek valban vltozk?

var atmenetiValtozo = -34.56;

var TalalatokSzama = 45;

Ennyi_nap_van_a_honapban = 30;

Ezek szerint a var kulcssz hasznlhat a vltozk definilsakor, de nem ktelez. Nem lehetnk azonban biztosak ekkor abban, hogy az Ennyi_nap_van_a_honapban vltozt korbban definiltuk-e, vagy ez csupn egy var nlkli definils.

Inkbb hasznljuk a var kulcsszt! Persze rtket nem felttlenl kell azonnal hozzrendelnnk a vltozhoz:

var ittCsupanDefinialunkErteketNemAdunk;

Mivel adattpust sem adtunk meg, gy ez egy homlyos vltozdeklarci.

A var kulcssz hasznlata egy fggvnytrzsben egybknt is ktelez, ha mr van ugyanolyan nev globlis vltoz, mint amilyet a fggvnyben hasznlni szeretnnk.

16. Vltozk

A JavaScript-ben a vltozkat ktflekppen hozhatjuk ltre. Vagy rtkadssal hozzuk ltre, vagy pedig a var kulcssz hasznlatval. Amikor a var kulcsszval hozzuk ltre a vltozt, nem ktelez neki kezdrtket adni. Pldul: var szoveg;

34


Ekkor a vltoznak, mint bizonyra sejtettk mg nem lesz rtke, de tpusa lnyegben mr lesz, mghozz a definilatlan tpus (undefinied). Ha rtkadssal hozzuk ltre a vltozt, akkor rendelkezni fog rtkkel is s az abbl kvetkeztetett tpussal is. Pldul: szoveg=Kis Pista vadszni ment; A vltoz neve szoveg, rtke Kis Pista vadszni ment, tpusa pedig string. A var kulcssz hasznlata mellett tbb vltozt is felsorolhatunk, valamint ekkor is adhatunk meg kezdrtket a vltoznak mghozz tbbfle mdon. var a=0; var a,b=0.56; var a,b=0,c=0; var a,b=c=0; var tomb=[]; var tomb=[6,89]; var tomb=new Array(); var barmi=new Object(); A JavaScript nem ersen tpusos nyelv ezrt a vltozk tpusa akr menet kzben is vltozhat a programunk futsa sorn. Nzzk meg a kvetkez pldt: var s=Hell; document.write(s); s=6+4; document.write(s); s=s+1; document.write(s); A vgeredmny a kpernyn: Hell1011 Az s vltoz az els rtkads utn string tpus vltozknt jtt ltre. Majd amikor az jabb rtkadst vgrehajtottuk rajta mr numerikus rtket kpviselt. Ezutn mr vgrehajthattunk rajta aritmetikai mveletet is. Mi lehet egy vltoz rtkadsnl a jobb oldalon: Numerikus rtk: var a=5.4; Szveg: var a=Lajos; Logikai rtk: var a=true; Tmb: var a=new Array(5,6,7); Objektum: var a=document.urlap; Fggvny rtke: var a=osszead(a,b);

35


Fggvny maga: var a=function (){ alert(Hell);} Az utols rtkads rdekes megolds. Ha kiratjuk az a vltoz rtkt document.write(a); akkor ezt kapjuk: function(){ alert(Hell);} Ha viszont hivatkozunk r a vltoz nevvel s a fggvny hvskor megszokott kt zrjellel a(); akkor az alert metdus jut rvnyre s a fggvny vgrehajtdik

17. Opertorok

Az opertorok olyan programnyelvi elemek melyek elvgzik a mveletek vgrehajtst. Tbb csoportba sorolhatjuk ket aszerint, hogy milyen mveleteket vgeznek. Els ilyen csoport az aritmetikai opertorok, azaz a matematikai mveletekhez szksges opertorok. Mieltt felsorolnnk az aritmetikai opertorokat, mindenekeltt kell megemlteni a rtkad utasts opertort, magt az egyenlsg jelet. Az egyenlsgjel ktoperandus opertor, mely a bal oldalt ll, rtket trolni kpes operandusba betlti a jobb oldaln ll kifejezs rtkt. Pl.: x=5;

17.1 Aritmetikai opertorok A pldk miatt emltsk meg hogy az "a" vltoznk jelenlegi rtke 5. opertor plda j eredmny sszeads: + a=a+4 9 Kivons: - a=a-3 2 Szorzs: * a=a*4 20 Oszts: / a=a/2 2.5 Maradkszmts: % a=a%4 1 Inkrementls: ++ a++ 6 Dekrementls: -- a-- 4 Bizonyos kifejezsekben lehetsgnk van tbb opertor sszevonsra: a=a+4; a+=4; a=a-4; a-=4; a=a*4; a*=4; a=a/4; a/=4; a=a%4; a%=4; A kvetkez csoport az sszehasonlt opertorok. Ezeket az opertorokat a logikai kifejezsekben hasznljuk. Segtsgkkel olyan kifejezseket kszthetnk, melynek eredmnye a logikai IGAZ vagy HAMIS lesz.

36


A pldk miatt emltsk meg hogy az "a" vltoznk jelenlegi rtke 10. opertor plda eredmny Egyenl: == a==10 igaz Pontosan egyenl: === a==="10" hamis (rtket s tpust is vizsgl) Nem egyenl != a!=10 hamis Nagyobb mint: > a>10 hamis Kisebb mint: < a= a>=10 igaz Kisebb vagy egyenl:


A tagads mindig ellenkezjre lltja az eredeti rtket. IGAZ-bl HAMIS lesz s fordtva, HAMIS-bl IGAZ. Bitszint mveletekhez szksges opertorok (az rtk kettes szmrendszerbeli alakjnak bitjein hajtdik vgre a mvelet): Bitenknti tagads: ~ Bitenknti VAGY: | Bitenknti S: & Bitenknti kizr vagy (XOR) ^ Bitenknti eltols balra: >

19. String opertorok

String tpus rtkek, azaz szvegek sszefzsre is hasznlunk opertort. Ekkor hasonlan az aritmetikai sszeadshoz a + jelet hasznljuk, de abban az esetben, ha a kt operandus egyike string, a vgeredmny a kt rtk sszefzsbl ll karaktersorozat lesz. alma+krte = almakrte 46 + 57 = 4657 46 + 57 = 4657 46 + 57 = 103 Hell+(5>4) = Hell true

20. Tpusknyszerts

A JavaScript esetben knny az tmenet a vltoz tpusok kztt. Ha a feldolgoz kirtkel egy kifejezst, akkor az albbi szablyok szerint jr el: Tevkenysg...................................... Eredmny szm s szveg sszeadsa ................... a szm a szvegbe pl logikai rtk s szveg sszeadsa ......... a logikai rtk a szvegbe pl szm s logikai rtk sszeadsa............ a logikai rtk a szmba pl

21. Elgazsok

JavaScript-ben az elgazsok hasonlan sok ms programnyelvhez valamilyen feltteltl fgg utastsok vgrehajtst jelentik. Ehhez a JavaScript-ben, kt utasts ll rendelkezsnkre. Az els az IF utasts. Segtsgvel ktirny elgazst hozhatunk ltre a programunkban, vagy egymsba gyazsuk esetn akr tbb irnyt is. Az utasts szintaktikja a kvetkezkppen nz ki:

38


if (felttel) {

utastsok } Ez a norml eset. Ekkor a felttelben kirtkelt kifejezs IGAZ volta esetn vgrehajtdnak a blokkjelek {} kzti utastsok, HAMIS esetn pedig azokat tugorja a program, teht nem kerlnek vgrehajtsra. Ez br ktirny elgazs, HAMIS felttel esetn nem trtnik semmi az elgazson bell. Ha szeretnnk, hogy HAMIS felttel esetn is hajtsunk vgre utastsokat hasznlnunk kell az ELSE kifejezst, mely hasznlatakor az IF utasts szintaktikja a kvetkezkpp vltozik: if (felttel) {

utastsok }else {

utastsok } Az els blokkjelek kzti utastsok IGAZ felttel esetn a msodik blokkjelek kzti utastsok pedig HAMIS felttel esetn hajtdnak vgre. Pldul: if (kor


Ekkor az else if kifejezs az egyb esetben ha mondatnak felel meg s jra kt irnyra bontja szt a programunk vgrehajtst. A msodik utasts melyet megemltnk az elgazsok tmakrben a SWITCH lesz. A SWITCH utasts segtsgvel egy vagy tbbirny elgazst hozhatunk ltre. Fleg akkor szoktuk hasznlni, ha az IF ELSE utasts mr nem elegend a feladat elvgzshez, vagy az azzal val megolds tl bonyolult lenne. A SWITCH utasts szintaktikja a kvetkez: switch (kifejezs){ case rtk1:

utastsok1 break; case rtk2: utastsok2 break; default: utastsok3 } Elsnek a zrjelek kz rt kifejezs rtkeldik ki. Itt ltalban egy vltozt szoktunk szerepeltetni, melynek aktulis tartalma fogja eldnteni a program tovbbi haladsi irnyt. A kifejezs rtkt sszehasonltja a program az egyes esetek (case) rtkeivel sorban. Ha valamelyik eset (case) rtke megegyezik a kifejezs rtkvel akkor az abba foglalt utastsok vgrehajtdnak, majd tovbb halad a program. A break; utasts azrt szksges az egyes esetek lezrsaknt, hogy a program ne haladjon tovbb a kvetkez gra. Ha pl. az els eset rtke megegyezne a kifejezs rtkvel, s az els eset vgn nem hasznlnnk a break; utastst, akkor a program vgrehajtsa a kettes esettel folytatdna. Ha egyik eset rtke sem felel meg a kifejezs rtknek, akkor a program a default; gat clozza meg vgrehajtsra, mr amennyiben szerepel ilyen a switch-ben, ugyanis hasznlata nem ktelez. Ha nem rtunk ilyen gat akkor a program tovbbhalad a switch utni els utastsra. Nzznk egy konkrt pldt: switch (a+b) { case 4: uzenet=az sszeg 4; break; case 5: uzenet=az sszeg 5; break; case 6: uzenet=az sszeg 6; break;

default: uzenet=az sszeg nem 4, nem 5 s nem 6; }

40


22. Ciklusok, eljrsok, tmbk

22.1 Ciklusok Ha ugyanazon, vagy hasonl programrszleteket ismtelnnk kell a programunkban akkor valszn azokat egy jl szervezett ciklusba illeszthetjk. Ngyfle ciklusfajtt ismer a JavaScript. Kettt a while utasts kettt pedig a for utastssal rhatunk le. Vegyk ket sorba. A for utasts olyan esetekben hasznlhat hatkonyan, amikor tudjuk, hogy a ciklus hnyszor fog vgrehajtdni, vagy legalbbis ez az rtk valahol megtallhat lesz a program vgrehajtdsa kzben. Szintaktikja a kvetkez: for (vltoz=kezdrtk ; felttel ; vltoz=vltoz+rtk){ ...utastsok... } A vltozt ciklusvltoznak hvjuk. A ciklusvltoz felvesz egy kezdrtket, a felttelben a ciklus megvizsglja minden egyes lps eltt hogy a ciklusvltoznk rtke mg megfelel-e, ha igen, akkor vgrehajtja az utastsokat majd nveli a ciklusvltoz rtkt a megadott rtk-kel. A felttelt ciklusban maradsi felttelnek hvjuk, hisz amg igaz addig fogja vgre hajtani a ciklus az utastsokat. Lssunk egy konkrt pldt, egytl tzig a szmok sszege: var ossz=0; for (var i=1 ; i


A while utastssal megvalstott ciklusok lnyege, hogy elre nem tudjuk hny lpst kell vgrehajtania a ciklusnak. while (felttel) { ...utastsok... } A while utasts utn szerepl felttelnk lesz a ciklusban maradsi felttel, azaz amg a felttel igaz a ciklus futni fog. A for ciklushoz hasonlan ez is egy ell tesztels ciklus, azaz minden lps eltt megvizsglja a felttelt s csak akkor hajtja vgre az utastsokat ha a felttel mg mindig IGAZ. Ennek a ciklusnak ltezik hasonl de htul tesztels vltozata is. Ez pedig a do while. do{ ...utastsok... }while (felttel) Ekkor az utastsok egyszer biztosan vgrehajtdnak majd minden lps utn a felttel kirtkeldik, s ha igaz akkor lp jra az utastsokra a program.

22.2 Tmbk A tmbk, azaz a tbb rtkkel rendelkez vltozk ltrehozsa: var vltoznv = new Array(); vagy var vltoznv = new Array(rtk1, rtk2, rtk3); vagy var vltoznv = [rtk1, rtk2, rtk3]; a ltrehozs utn a tmb egyes elemeire a vltoznv[sorszm] -al hivatkozhatunk. Pldul: var tomb = new Array(70, 60, 98, 77, 48, 56); document.write("n 19"+tomb[1]+"-ban szlettem"); Arra gyeljnk, hogy mint sok ms programnyelvben a JavaScript-ben is az indexels 0-tl kezddik, teht a fenti pldban az "n 86-ban szlettem" fog megjelenni. Ugyangy kezeljk, ha pl. rtket akarunk adni valamelyik elemnek: tomb[0]=120;

42


Ha olyan elemnek adunk rtket, amely mg nem ltezik a tmbben, akkor automatikusan ltrejn. Pldul egy 3 elem tmb esetn melyben van 0., 1., s 2. elem, ha rtket adunk a 6.-nak akkor lesz 0.,1.,2. s 6. elemnk, teht 4 elem tmbnk lesz. A fenti pldnl maradva: tomb[6]=110; ekkor a tmbnkbe a kvetkez elemek lesznek: 70, 86, 98, 110 amelyek sorszma 0,1,2,6 A tmbk elemeire nemcsak egyesvel kell hivatkoznunk, hanem nha vgig kell jrnunk azokat. Erre val a mr tanult FOR IN szerkezet. Elz pldnkra alapozva: for (srsz in tomb) { document.write("n "+tomb[srsz]+"-ban szlettem"); }

22.3 Eljrsok, fggvnyek Eljrsokra s fggvnyekre akkor van szksg, amikor valamely megoldst, programrszletet szeretnnk tbbszr is vgrehajtani. Az ezekbe megrt programrszleteket hvhatjuk kisebb programoknak is, vagy ismertebb nven alprogramoknak. Eljrsokat s fggvnyeket a function kulcsszval deklarlunk a JavaScriptben. function eljrsnv(paramter1, paramter2....) { ...utastsok... } A zrjelek kzti paramterek szma lehet 0 is de abban az esetben is ki kell rnunk a zrjelet. Az eljrsra a nevvel hivatkozhatunk. Az eljrsban lv utastsok csak akkor hajtdnak vgre, ha az eljrst meghvta valamely msik alprogram vagy maga az alprogram, vagy egy esemny. Pldul: function koszones(){ document.write("J NAPOT"); } Ezzel deklarltunk egy eljrst. Erre valahol hivatkoznunk kell majd a kvetkezkppen: koszones();

43


Ha hasznlunk paramtereket akkor figyeljnk arra, hogy a paramterek mint vltozk, csak az adott alprogramban hasznlhatk. Nevt gy adjuk meg, hogy az ne tkzzn semelyik fprogrambeli globlis vltoz nevre mert az flrertsekhez vezethet. function osszead(a,b) { document.write(a+b); } szam1=5; osszead(szam1, 66); Ennek eredmnye 71 lesz mivel az alprogramban az "a" vltoz rtke a szam1 vltoztl ered, azaz 5, a "b" vltoz rtke pedig a 66 literlbl ered. Az eljrsok onnantl vlnak fggvnny, hogy eredmnyt kzlnek, azaz van visszatrsi rtkk. Mivel van visszatrsi rtkk, gy a hvs helyn is rtket kpviselnek s szerepelhetnek pl. rtkad utasts jobb oldaln. A visszatrsi rtket a return kulcssz utn rjuk. Arra gyeljnk, hogy a return utasts azonnal visszalpteti a programot a hvs helyre, teht az alprogramban utna lv utastsok mr nem hajtdnak vgre. A fenti plda jra csak most fggvnnyel (az ZENET mr nem fog kirdni a kpernyre): function osszead(a,b) { return a+b; document.write("zenet"); } szam1=5; document.write(osszead(szam1, 66));

23. Teszt

24. Alapobjektumok, fggvnyek

24.1 Fbb objektumok a JavaScriptben: Array tmbkezels String szvegkezels Math matematikai objektum Date dtumkezels (kln tmakrben foglalkozunk vele) RegExp regulris kifejezsek kezelse

44


Fontosabb fggvnyek, tulajdonsgok: Math objektum Pl: Math.PI; PI rtkvel tr vissza Kerektsek: Math.round(a); szablyos kerekts Math.ceil(a); felfel kerekts Math.floor(a); lefel kerekts Hatvnyozs: Math.pow(a,b); a szmot b hatvnyra emeli Gykvons: Math.sqrt(a); a szmbl gykt von Vletlenszm: Math.random(); egy vletlenszmot generl 0 s

1 kztt, ha ms intervallumbl szeretnnk szorozzuk fel s kerektsk

Maximum kivlaszts: Math.max(a,b,...); kivlasztja a paramterek

rtkeibl a legnagyobbat Minimum kivlaszts: Math.min(a,b,....); kivlasztja a paramterek

rtkeibl a legkisebbet String objektum: var s="Ez egy szveg"; Karakter egy pozcin: s.charAt(pozci); a pozcin lv karaktert adja vissza az s vltoz rtkbl Karakter cserje: s.replace(eredeti szveg, j szveg); Az s rtkben az eredeti szvegrszletet az jra cserli s az j szveget adja vissza Megjegyzs: az eredeti szveg lehet regulris kifejezs is, s ahogy sok fggvnynl itt is sokkal hatkonyabban lehet azzal megoldani a feladatokat. Szveg feldarabolsa: s.split(elvlaszt, maximum elemszm); Az elvlaszt alapjn sztbontja az s rtkt. Ha megadjuk a maximum elemszm rtkt, akkor annl tbb elemet nem hoz ltre a fggvny. Ha elhagyjuk, akkor az egsz szveget feldarabolja. A fggvny rtke a szvegrszek lesznek vesszvel elvlasztva. Kisbetsts: s.toLowerCase(); Nagybetsts: s.toUpperCase();

45


Array objektum: var tomb=new Array(); Elem hozzadsa a tmb vgre: tomb.push(j elem); Elem hozzadsa a tmb elejre: tomb.unshift(j elem); Utols elem lekrdezse s eltvoltsa: tomb.pop(); Els elem lekrdezse s eltvoltsa: tomb.shift(); Elemek sorrendjnek megfordtsa: tomb.reverse(); Elemek rendezse: tomb.sort(); Tmb rszletnek lekrdezse: tomb.slice(mettl, meddig); A msodik paramter elhagyhat, ilyenkor az els paramter rtktl a tmb vgig kapjuk meg az elemeket.

24.2 Regulris kifejezsek A regulris kifejezsek karaktersorozatok. Olyan maszkok melyek specilis paramterek alapjn el tudjk dnteni egy szvegrl hogy mely elemei hasonltanak a maszkra. A regulris kifejezsek segtsgvel sszehasonltsokat vgznk. A regulris kifejezs elemei: A regulris kifejezseket legegyszerbben gy rhatjuk le, ha a // jelek kz rjuk ket. A / jelek utn mr csak a mdost paramtereket tntethetjk fel. Ezek: g Globlis keress. Az sszes lehetsget megkeresi. i Kis-nagybetre nem rzkeny keress. m Tbbsoros keress. A // jelek kz rhat elemek: szveg A szveget egy az egyben keresi [xyz] A szgletes zrjelben felsorolt karakterek, vagy

tartomnyok megltt keresi [^xyz] A kalapjel utn ll karaktereken, vagy tartomnyokon

kvli rtkeket keresi [vz|vas|vg] A lehetsgek valamelyikt keresi . A pont helyettest brmilyen karaktert. Ha tnyleg a pont

karaktert keressk tegyk el a \ jelet. \. \w Alfanumerikus karaktereket keres belertve az alhz jelet is \W A nem alfanumerikus karaktereket keresi \d Szmokat keres \D A nem szmokat keresi \s Az gy nevezett whitespace karaktereket keresi. Szkz, j sor, tabultor stb.

46


\S A nem whitespace karaktereket keresi \b Sz elejn vagy vgn keresi a karaktersorozatot \B A karaktersorozatot a szban keresi, nem az elejn vagy a vgn \n j sor karaktert keres \r A kocsivissza karaktert keresi \t A tabultor karaktert keresi Mdostk: + Minimum egy tallatot keres * Nulla vagy tbb tallatot keres ? Nulla vagy egy tallatot keres {h} h hossz sorozatt keresi a karaktereknek {h,} minimum h hossz sorozatt keresi a karaktereknek $ A szveg vgn keres ^ A szveg elejn keres. Nem szabad sszetveszteni a [] kzti

kalapjellel Pldk a szvegkezel MATCH fggvny segtsgvel bemutatva: Email cm ellenrzse: var regkif=/\w[\w|.]*@\w[\w|.]*\.\w+/; document.write(email.value.match(regkif)); TAJ szmhoz hasonl 000-000-000 formtum ellenrzse: var regkif= /\d{3}-\d{3}-\d{3}/; document.write(email.value.match(regkif)); Bonyolultnak tnhet els rnzsre, de ha vgignzzk tbbszr egyesvel, akkor rjvnk a nyitjra.

25. Esemnyek

Az esemnyek olyan elemek a JavaScriptben melyeket a bngsz vagy a felhasznl aktivl. Ha megtrtnik egy ilyen esemny, a JavaScript szleli azt. Mindegyik a JavaScript ltal ismert esemnyhez llthatunk be valamilyen mveletet, melyet csak akkor fog vgrehajtani a program, ha az esemny tnylegesen be is kvetkezik. Az esemnyfigyelket s az esemnyek hatsra vgrehajtd utastst (legtbbszr egy eljrshvst) a HTML elemek attribtumai kz helyezzk el. Ekkor lnyegben azt is meghatrozzuk, hogy melyik HTML elem esemnyeit figyeljk. Pldul egy rlap gombjn figyeljk az egrkattintst:

47


Az esemnyeket csoportba bonthatjuk az alapjn, hogy mivel kapcsolatos.

25.1 Egr esemnyek

onmouseover az egrkurzor az aktulis elem felett ll onmouseout az egrkurzor az aktulis elem felett llt s

elmozdult rla onmousemove az egr megmozdult onmousedown az egr gombja le lett nyomva az elem felett llva onmouseup az egr gombja el lett engedve az elem felett llva onclick kattintottak az egrrel az elemre ondblclick duplt kattintottak az egrrel az elemre

25.2 Billentyzet esemnyek onkeypress egy gombot lenyomtak, vagy nyomva tartottak onkeydown egy gombot lenyomtak onkeyup egy gombot felengedtek

26. Dokumentum esemnyek

onload az aktulis oldal vagy kp betltdtt onunload az oldalt elhagyta a felhasznl onerror hiba trtnt a dokumentum vagy a kp betltdsekor

26.1 Egyb esemnyek onabort a kp betltse megszaktva onblur az elemrl lekerlt a fkusz onfocus az elemre r kerlt a fkusz onchange az elem rtke megvltozott onresize az elemet tmreteztk (pl. ablak) onselect a szveget kijelltk Ezeket az esemnykezelket felhasznlva tehetjk az oldalunkat dinamikusabb, interaktvabb. Nzznk nhny pldt: Az oldal betltdsekor dvzljk a felhasznlt:

48


Az oldal elhagysakor elksznnk: Kp cserje ha az egr kurzor felette ll:

27. Dtum s id kezelse

A dtum s id kezelsre a JavaScript-ben egy beptett objektum ll a rendelkezsnkre. Ez a DATE objektum. Segtsgvel lekrdezhetjk az aktulis dtumot s idt, hozhatunk ltre j dtumid tpus vltozkat, s mveleteket vgezhetnk velk. Az egyik legegyszerbb mvelet az aktulis dtum s id lekrdezse. Ehhez a DATE objektumot kell csak meghvni, mint metdust, a kvetkezkppen: document.write(Date()); gy pl. kiratjuk az aktulis dtumot Ugyanez vltozval: var d=new Date(); document.write(d); Ekkor a vltoz mr egyben dtum tpus is lesz, s tartalmazni fogja az aktulis dtumot s idt. Hozhatunk ltre gy is dtum tpus vltozt, hogy annak rtkt mi hatrozzuk meg: var d=new Date(dtum szvegesen megadva) var d=new Date(v, hnap, nap, ra, perc, msodperc, ezredmsodperc); var d=new Date(msodperc) 1970.01.01-tl eltelt msodpercek szma pldk a fenti sorrendet alapul vve: var d=new Date("2010/03/10 13:00:33"); var d=new Date(2003,0,20,12,10,33,0); ahol a msodik paramter a hnap 0-tl szmozdik var d=new Date(1034555444045); A dtum tpus vltozkkal a beptett metdusok segtsgvel tudunk mveletek vgezni, valamint azok rtkeit megvltoztatni, lekrdezni.

49


rtkek lekrdezse: var d=new Date(); d.getFullYear(); az vet adja vissza ngy szmjeggyel d.getMonth(); a hnapot adja vissza 0-11-ig d.getDate(); a hnap napjt adja vissza 1-31-ig d.getDay(); a ht napjt adja vissza 0-6-ig d.getHours(); az rt adja vissza 0-23-ig d.getMinutes(); a percet adja vissza 0-59-ig d.getSeconds(); a msodpercet adja vissza 0-59-ig d.getTime(); 1970. janur 1-tl eltelt msodpercek szmt adja vissza Pldul az aktulis dtum kiratsa az ismert formtumban, pontokkal elvlasztva: var d=new Date(); document.write(d.getFullYear()+.+(d.getMonth()+1)+.+d.getDate()); rtkek belltsa: var d=new Date(); d.setFullYear(v); az vet llthatjuk be d.setMonth(hnap); a hnapot llthatjuk be 0-11-ig d.setDate(nap); a hnap napjt llthatjuk be 0-31-ig d.setHours(ra); az rt llthatjuk be 0-23-ig d.setMinutes(perc); a percet llthatjuk be 0-59-ig d.setSeconds(msodperc); a msodpercet llthatjuk be 0-59-ig d.setTime(msodperc); 1970. janur 1-tl eltelt msodpercekkel megadva llthatjuk be a dtumot szmt adja vissza Az rtkeket szrmaztathatjuk a vltoz eredeti rtkbl is. gy hasznljuk az rtk lekrdez s bellt metdusokat is. Pldul a d ltal trolt dtumhoz hozzadunk 3 napot. d.setDate(d.getDate()+1); vagy 52 percet: d.setMinutes(d.getMinutes()+52);

50


Csalka lehet, hogy a setMinutes paramtere gy tlpheti a megadott 59-es hatrrtket, de a JavaScript szerencsre ezeket lekezeli, s automatikusan tlltja az j dtum sszes rtkt, pldul ra, nap, hnap stb. vltsokat. Ehhez a tmakrhz kapcsoldik az idzts tmakre. Sokszor elfordul, hogy egy esemnyt, utastsok vgrehajtst, csak bizonyos id mltn szeretnnk vgrehajtani, vagy bizonyos idkznknt. A setTimeout utasts segtsgvel ezek nagyon egyszeren megoldhatk. Szintaktikja: setTimeout(kdrszlet, ezredmsodperc); Ha a JavaScript ehhez az utastshoz r automatikusan elkezdi visszaszmllni az ezredmsodperc paramterben megadott idt s ha az id lejr a httrben vgrehajtja a kdrszlet paramterben megadott utastsokat mely ltalban egy fggvnyhvs. Pldul egy 10 msodperces ksleltetssel megjelen felugr ablak amiben dvzljk a felhasznlt: function udv() { alert(dvzllek); } setTimeout(udv(),10000); Idkznknt vgrehajtott utastsokat gy tudunk vele megoldani, hogy a meghvott fggvnyben jra aktivljuk az idztt, gy jra s jra meghvdik a fggvny a belltott idkznknt. Pldul egy visszaszmll ksztse: var szamlalo=10; function szamol(){ document.dobozform.doboz.value=szamlalo; if (szamlalo!=0){ szamlalo--; setTimeout('szamol()',1000); }else{ alert("BUMMMMMM!"); } }

51


Az oldal betltdsekor meghvdik a szamol() fggvny, s amg a szmll nem lesz nulla jra s jra meghvja magt pontosan 1 msodperces idkznknt.

28. rlapkezels

Amikor egy rlapot ksztnk weboldalunkra a HTML elemek segtsgvel, azokat az elemeket fogjuk kivlasztani az adatok bekrshez, amelyek a legjobban passzolnak az adott rtk tpushoz. Plddul jelszavaknl jelszmez, vlasztsi lehetsgeknl rdigomb, s gy tovbb. Azonban nagyon sok olyan adat van, melyekhez nem tudunk kln elemet megjellni s egyszeren szveges adatknt kezeljk ket. Ilyenek pldul a felhasznlnevek, email cmek, dtum adatok stb. A JavaScript nagyon j eszkz lehet arra, hogy az rlapadatokat mieltt tadjuk egy programnak feldolgozsra, mg megvizsgljuk s validljuk, azaz eldntsk, hogy szmunkra az adatok megfelelek, avagy nem. Elszr is, hogyan tudjuk megoldani, hogy az rlap elkldse eltt valamely alprogramunk mg megvizsglja az adatokat: Ez esetben a meghvott alprogram IGAZ vagy HAMIS visszaadott rtktl fgg, hogy az rlap vgl elkldsre kerl vagy nem. Mit vizsglunk: Az egyes rlapelemek vizsglathoz el kell rnnk azok rtkeit JavaScriptbl. Vagy azonostkkal ltjuk el ket s az alprogramon bell annak segtsgvel talljuk meg, function vizsgal(){

var elem=document.getElementById("doboz");

} Az elem nev vltoz egy objektum lett mely a szveges dobozunkra hivatkozik. vagy mivel az rlapunkon gyis tbb elem lesz, a msik lehetsg, hogy tadjuk a vizsgal() fggvnynknek magt az rlapot s annak elemeit pedig a nevkre hivatkozva rjk el.

52


53


A substr(kezdpozci,hossz) a kezdpozcitl, hossz hosszan kivgja a szvegrszletet s azt adja vissza rtkl. document.write(s.substr(3,3)); eredmny: paj Pldul email cm egyszer ellenrzse ezek segtsgvel: function vizsgal(urlap){ var elem=urlap.email;

if (elem.value.indexOf("@")


Ha szeretnnk a felhasznlnak jelezni, melyik rlapelem a hibs egyszeren a CSS segtsgvel vltoztassuk meg a httrsznt: urlap.email.style.backgroundColor='yellow'; Hasznos lehet mg egy szmll ksztse mely mutatja, hogy hny karaktert tttnk le pldul egy TEXTAREA elemben. function szamol(area){ document.getElementById("szamlalo").value=(area.value.length); }

29. Dinamikus tartalom.

29.1 Tartalom vltsa a lap jratltse nlkl Egy HTML oldal betltsekor a bngsz az adott HTML kdot rtelmezve megjelenti az abban felsorolt elemeket a megadott sorrendben s kialaktja az oldal szerkezett. Ha a betlts utn az oldal tartalma nem vltozik, akkor statikus lapnak nevezzk. Sok weboldalnl szerver oldali kdok dntik el a HTML kd felptst, de a vgeredmny a bngszben akkor is egy statikus weblap lesz. Akkor neveznk egy weboldalt dinamikusnak, ha a tartalma, szerkezete vltozik a felhasznl beavatkozsra, vagy brmilyen ms esemny hatsra. Mivel JavaScript-bl elrjk a HTML elemeket, mint objektumokat, lehetsgnk van azok rtkeit is a kdbl megvltoztatni. Nzznk meg pr ilyen megoldst: A kp elem A kp elem egyik legfontosabb attribtuma az src, azaz a kp elrsi tja. Ennek a paramternek a vltoztatsval dinamikusan tudjuk az adott kp - vagy inkbb nevezzk a kp troljnak forrst megvltoztatni.

Bvebb tartalom megvltoztatshoz hasznljuk a DIV elemeket, vagy gyis mondhatnnk dobozokat.

56


A DIV elem A DIV elemeknek van egy tulajdonsguk, mellyel a sajt bels tartalmukra hivatkozhatunk. Ez az innerHTML. Ennek rtkt megvltoztatva magt a DIV tartalmt vltoztathatjuk meg. Nzznk egy egyszer pldt a hasznlatra: function mutat(sorszam){ var elem=document.getElementById("cikkdoboz"); switch (sorszam){

case 1:elem.innerHTML="

Ez az els cikk szvege lesz, melyben HTML elemeket is feltntethetnk, hogy formzzuk a megjelen szveget.

";

break; case 2:elem.innerHTML="

Ez a msodik cikk szvege

lesz, ide is rhatunk HTML elemeket akrcsak az elshz.

";

break; } } Els cikk Msodik cikk

A mkdse egyszer. A HTML elemek kz elhelyeznk egy kitntetett DIV elemet. Adunk neki egy azonostt. Pldnk esetben ez cikkdoboz. Bellthatunk neki egy kis stlust a megtanult CSS segtsgvel, majd valamilyen esemny hatsra - jelen esetben kt klnll szvegre val kattints meghvunk egy eljrst, mely megkeresi a kitntetett elemet, s a sorszmtl fggen vltoztatja meg az innerHTML tulajdonsg rtkt. A lap tartalma, ezltal dinamikusan fog vltozni.

CSS segtsgvel A CSS-bl tanultak alapjn tudjuk, hogy egy HTML elem egyik tulajdonsga a megjelense. Ezt a display CSS tulajdonsg trolja. Egy elem stlust JavaScriptbl pedig az elem style mezjn keresztl rjk el. Pldul egy doboz azonostval elltott elem display CSS mezjt gy rjk el: var elem=document.getElementById(doboz); elem.style.display=none; gyeljnk arra, hogy az rtkek idzjelbe kerljenek. Jelen esetnkben a doboz megjelenst kikapcsoltuk. Ez alapjn mr elkszthet a fenti pldhoz hasonl, cikkek dinamikus vltst megvalst kd. Lssuk ezt:

57


var maxcikk=3; function mutat(sorszam){ for (var i=1; i

css és javascript programozás -...

Documents