Datasheet
Year, pagecount:2010, 22 page(s)
Language:Hungarian
Downloads:177
Uploaded:December 04, 2012
Size:750 KB
Institution:
-
Comments:
Attachment:-
Download in PDF:Please log in!
Comments
No comments yet. You can be the first!
What did others read after this?
Content extract
JAVASCRIPT ALAPVETÉS Ebben az anyagban a kliensoldali Javascripttel foglalkozok, ami a HTML-be ágyazott szkriptnyelv. A kódok sorozata a script, scriptekből gyakorlatilag bármennyit bárhol elhelyezhetünk a dokumentumban. Ezek segítségével űrlapokra bevitt adatokat ellenőrizhetünk, vagy dinamikusan változtathatjuk a weblap elemeit (pl. egy felirat fölé vitt egér hatására megváltozik a felirat színe, vagy kicserélünk egy képet) Ezek a scriptek a HTML-dokumentum részei, a böngésző kezeli őket. A scriptek lehetnek − a fejben (<head>): ekkor betöltéskor a böngésző átugorja őket, és csak akkor hajtja végre az utasításaikat, ha kell (pl. rákattintottunk egy feliratra) − a törzsben (<body>): ekkor már betöltéskor végrehajtja (pl. egy felirat színe folyamatosan változik) Egy scriptegység felépítése: <script type="text/javascript"> <!-Ide jönnek pontosvesszővel befejezve (ez nem mindig kötelező, de sose
árt) a parancsok, változók, függvények (szövegek ” ” vagy ’ ’ között) // --> </script> Mivel nem minden böngésző rendelkezik JavaScript interpreterrel, célszerű a kódokat ezek elől „elrejteni” (szerencsére az ilyenek egyre kevesebben vannak). Erre szolgál az előző példában a 2 és az 5 sor Ezen kívül lehetnek még apró scriptek a tagekben (és ekkor a szövegek ’ ’ között!), pl: <p onclick="this.stylecolor= red; document.bodystylebackgroundColor=#a05000; "> szöveg </p> A fenti kód eredménye: ha a szövegre kattintunk, piros lesz a betűszín és barnás a dokumentum háttere. A ; után nem muszáj sort törni, de nem is baj. Látható, hogy a parancsok sorozata ” ” között szerepelt Kommentek: − // után a sor többi része megjegyzésnek minősül − /* és / között egy- vagy többsoros megjegyzés helyezhető el Objektumok: Az előző példából is látható, hogy a piros betűszín nem csak úgy
lóg a levegőben, hanem nagyon határozottan az érintett elem (this) stílusának (style) színe (color). Ugyanígy a háttérszín is a dokumentum (document) törzsének (body) stílusának (style) háttérszíne (backgroundColor). Ebben a példában két objektum szerepelt (this és document), és ezeknek a jellemzőit határozzuk meg rendszerbe foglalva. Nagyon egyszerűen: az objektum egy olyan valami, aminek mindenféle jellemzője van. A jellemzők lehetnek tulajdonságok (pl. stílus) vagy metódusok, azaz események (pl kattintás vagy betöltés) A jellemzőknek adhatunk értéket (pl. a stílusnál színt vagy a kattintáshoz egy figyelmeztető ablakot) A jellemzők jellemzőit ponttal választjuk el (épp úgy, mint ahogy Pascalban a rekordoknál!). Rengeteg jellemző van, szerencsére a SharePoint Designer súg, pl. a document után felajánlja a lehetőségeket. Fontos: a kis- és nagybetűk számítanak! Feladatok: 1. Készíts egy weblapot választható
háttérszínnel! A háttérszín váltását a megfelelő feliratra való kattintás váltsa ki! A következő részlet valósítja meg a HTML-kódban: <body> <h1>1. feladat</h1> <p>Válassz háttérszínt!</p> <p onclick="document.bodybgColor=#55dd88">zöld</p> <p onclick="document.bodystylebackgroundColor=#5588dd">kék</p> </body> Látható, hogy a bekezdések szerves része a kattintásra való reagálás, még a tag-en belül található. Szintén érdemes észrevenni, hogy a színkódot a kettőskeresztjével együtt egy ’ ’-párba tettük, ez fontos. Feltűnhetett, hogy két különböző kód is ugyanazt valósította meg: • Az első változat értelme: a törzs (body) alanyi jogon is rendelkezik a háttérszín jellemzővel, ezt akkor bgColornak hívjuk (emlékezz: <body bgcolor=#554422>). Ez a változat kevésbé általános, ráadásul a második változat felülírja, utána már
hiába próbálunk rá kattintgatni, csak egy hasonló típusú paranccsal használható oda-vissza. • A második változatnál a törzset (body) szokványos Windows-objektumként kezeljük, aminek vannak stílusjellemzői, ezek közül egy a háttérszín. Ez az általános megoldás, szövegeknél, gomboknál, képeknél ugyanígy használható. 2. Helyezd el a weblapra a fejgif képet, és oldd meg, hogy ha fölé viszed az egeret, elpiruljon, majd ha az egér továbbmegy, megint kifehéredjen! A fej alapszíne legyen fehér, az oldal hátterétől függetlenül. A szükséges HTML-kód: <img src="fej.gif" style="background-color:#ffffff" onmouseover="this.stylebackgroundColor=#ff2211" onmouseout="this.stylebackgroundColor=#ffffff"/> A kód csak a könnyebb olvashatóság kedvéért van tördelve, az egész egy tag-en belül található. Az onmouseover azt jelenti, hogy az egér az elem (a kép) fölött van, az onmouseout azt, hogy
távozott. 3. Oldd meg, hogy az előző feladatban szereplő fej kétszer akkorára nőjön, ha rákattintunk! Az előző tag-et egyetlen paranccsal kell kiegészíteni: onclick="this.width=thiswidth*2" Érdemes észrevenni, hogy • elég az egyik méretet változtatni, a másik vele nő (a height is ugyanilyen jó lett volna) • a width már nem a stílus része, hanem helyből jellemzi a képet. Ha bizonytalan vagy, hogy style vagy nem style, akkor ötletet adhat a bal alsó sarokban található objektumjellemzők ablak. Ha ott látható a jellemző, amit keresel, akkor nem style 4. Vegyél fel egy szöveget a weblapra, és oldd meg, hogy ha fölé visszük az egeret, akkor a weblap háttere lila, az általános szövegszín sárga, az egér alatti szöveg pedig zöld alapon barna színű legyen! Ha a szövegre rákattintunk, mindegyik előbb említett szín helyett jelenjen meg valami más, és nőjön meg a szöveg betűmérete! Ha távozunk az egérrel, álljon vissza
minden a szokásos színekre. Itt már elég sok minden furakodik a szegény <p> tag-be: <p style="color: #000000; background-color: #FFFFFF; " onmouseover="document.bodystylebackgroundColor=#aa11bb; document.bodystylecolor=#aabb11; this.stylebackgroundColor=#55dd22; this.stylecolor=#445511" onclick="document.bodystylebackgroundColor=#00FFFF; document.bodystylecolor=#00ff00; this.stylebackgroundColor=#FF00FF; this.stylecolor=#0000ff; this.stylefontSize=larger" onmouseout="document.bodystylebackgroundColor=#FFFFFF; document.bodystylecolor=#000000; this.stylebackgroundColor=#FFFFFF; this.stylecolor=#000000">Színváltó szöveg</p> Az előzőek alapján ez érthető, a betűméret változtatása az egyetlen új dolog. Régebben a honlapokon konkrét betűméretek szerepeltek, most azonban egyre inkább viszonyméretet adunk meg (xx-small, small, large, ). Ennek az egyik oka, hogy teljesen különböző a felhasználók
monitorának felbontása és a felhasználók látása is. A másik ok az, hogy a weblapok felépítésénél a betűméret a szöveg lapon belüli fontosságát mutatja, ezért egymáshoz viszonyított méreteket adunk meg. 5. Készíts dinamikusan változó gombot, amely másképp néz ki, ha fölé visszük az egeret, ha lenyomjuk, ha felengedjük, ha elhagyjuk! A gomb megnyomása után változtassa meg a weblap címsorát a „Megnyomtad a gombot!” szövegre! Az előzőek után egyszerű a feladat: <img src="alapgomb.gif" onmouseover="this.src=celba vettelgif" onmousedown="this.src=lenyomtalgif" onmouseup="this.src=felengedtelgif" onmouseout="this.src=szabad vagyokgif" onclick="document.title=Megnyomtad a gombot!"/> Mivel a kép elsőrendű jellemzője a forrás (src), a weblapnak pedig a címsor (title), ezért a hivatkozás rövid. 6. Állíts be egy képet úgy, hogy a képernyő adott pozíciójában
jelenjen meg, legyen színes kerete, ha pedig rákattintunk, kerüljön egy másik pozícióba, változzon meg a keret színe, és a hozzá tartozó kurzor legyen eltérő a szokásostól! A feladat két részből áll, egyrészt alap stílusbeállításokra van szükség, másrészt scriptre: <img src="fej.gif" height="100" style="border-style: solid; border-width: 2px; border-color: #FFFF00 #FF00FF #800000 #FF0000; position: absolute; top: 300px; left: 300px" this.stylecursor=help; this.styleborderColor=#fa3388; this.styleleft=’600px’"/> Fontos: ahhoz, hogy a pozíciót megadhassuk, először abszolút helyzetűre kell állítani a képet (position: absolute)! Ez egyébként a scriptrészben is állítható. A kurzor típusát megint szöveggel adjuk meg, az, hogy konkrétan hogyan fog kinézni a help típusú kurzor, az operációs rendszertől függ. 7. Vegyél fel egy szöveget félkövéren, csupa kisbetűvel szedve, első sorát
beljebb húzva, a normálnál nagyobb szótávolsággal, súgóbuborékkal! Kattintásra változzon meg a mérete, a behúzás mértéke, kerüljön a képernyő egy adott pozíciójába, villogjon, legyen kiskapitális, a szavak közti távolság csökkenjen, a betűk közötti nőjön! A kód lehet például: <p title="ez a súgó" style="font-weight: bold; text-transform: lowercase; text-indent: 100px; word-spacing: 4em; " onclick="this.stylefontWeight=normal; this.stylefontSize=35px; this.styletextIndent=400px this.styleposition=absolute this.styletop=200px;"> this.styletextDecoration=blink; this.stylefontVariant=small-caps; this.styleletterSpacing=12em; this.stylewordSpacing=02em Ez a szöveg meg fog változni.</p> Érdemes észrevenni, hogy a stílusbeállításoknál használt kifejezések kötőjel nélkül, belső nagybetűvel egy az egyben használhatók a kódban! A title szövegnél a súgóbuborékot jelenti. 8. Vegyél fel egy
képet és egy szöveget, majd érd el, hogy a szövegre kattintva a kép 100 pixel szélességű legyen! Eddig hivatkoztunk a weblap (document) jellemzőire, illetve az érintett elemre (this). Most egy olyan elemre kell utalnunk, amely a szöveghez semmilyen módon nem kapcsolódik, és vele egyenrangú. A megoldás egyszerű: lássuk el névvel a képet, utána már emlegethetjük: <p><img src="fej.gif" name="kep"/></p> <p onclick=”kep.stylewidth=100px">Menj össze, te kép!</p> Fontos: az elemek neve nem lehet szám (max a 2. karaktertől kezdődően szerepelhetnek számjegyek)! 9. Vegyél fel két, egymást részben takaró képet, és oldd meg, hogy amelyikre rákattintunk, az kerüljön fölülre! A megoldáshoz a stílus z-index összetevőjét kell felhasználni. A feladat megoldható úgy is, hogy a képek z-index-ét növeli a kattintás (amelyiknek nagyobb a z-indexe, az van fölül). Ennél elegánsabb megoldás,
ha a képeket névvel látjuk el, és a kattintás mindkét kép zindexét változtatja: <img src= "fak.bmp" width= "200" style= "position: absolute; top: 50px; left: 50px" name="egyik" onclick="egyik.stylezIndex=2; masikstylezIndex=1"/> <img src= "gyerekek.jpg" width= "200" style= "position: absolute; top: 0px; left: 0px" name="masik" onclick="egyik.stylezIndex=1; masikstylezIndex=2"/> 10. Készíts „menekülő” képet, ami az ablak egy véletlenszerű helyére vándorol, ha fölé ér az egér! Ehhez a feladathoz már kell a matematikai eszköztár, amit a Math.parancs szintaktikával érhetünk el. A Math.random() parancs itt is egy >=0, <1 valós számot generál, ezt beszorozva a képernyő méretével kapjuk meg a kívánt pozíciót. A program a valós számot automatikusan konvertálja egésszé. A képpozíciót pixelben adjuk meg, ehhez a kapott
véletlenszámot meg kell toldani a „px” taggal (és ettől már szöveggé is vált). <img src= "celba vettel.gif" style= "position: absolute; top: 200px; left: 300px" onmouseover="this.styleleft=Mathrandom()*1000+px; this.styletop=Mathrandom()*600+px" onclick="alert(Ez sikerült, gratulálok!)"/> A style attribútum összetevői: Az összeállítás nem teljes, nem is használható minden jellemző minden elemnél, de bőven lehet belőle bogarászni. Az inherit beállítás majdnem minden esetben lehetséges, ez azt jelenti, hogy örökli a fölötte levő szint beállításait (pl. a bekezdések automatikusan öröklik a body beállításait) Az inheritet a táblázatban külön nem tüntettem fel. Az attribútumok nevét scriptben kötőjel helyett belső nagybetűvel írjuk, ahogy arra már utaltam az előző feladatokban. Tehát pl a font-family új alakja: fontFamily név lehetséges értékek jelentés betűtípus font-family
a betűtípus neve, ha több is megfelel, azok vesszővel elválasztva font-size xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, adott érték (ekkor a mértékegység lehet px, pt, cm, mm, em, %, stb) normal, bold, lighter, bolder, adott érték italic, normal, oblique (ez is dőlt) normal, small-caps (kiskapitális) capitalize (minden szó első betűje nagybetű), lowercase (csupa kisbetű), none, uppercase (csupa nagybetű) font-weight font-style font-variant text-transform color hexadecimális kóddal, pl. #ff54a2 vagy rgb-kóddal, betűtípus-család, ha nem a normált akarjuk használni (a ritka típusokkal érdemes vigyázni, nem biztos, hogy ismeri a böngésző betűméret a betűk vastagsága betűstílus variáció a szöveg betűinek megjelenítése (függetlenül az eredeti nagy- és kisbetűktől) betűszín text-decoration pl. rgb(20,42,200) vagy névvel, pl red – a neveket ld. külön underline (aláhúzás), overline
(föléhúzás), line-through (áthúzás), blink (villog), none (semmi) a betűk díszítése elhelyezés line-height vertical-align text-align text-indent white-space word-spacing letter-spacing position z-index width height top bottom left right visiblility display normal, adott érték (mértékegység mint a betűméretnél) baseline (a normál szöveg alapvonala, ez alá nyúlik pl. a p szára), bottom (a normál szöveg alja), middle (közép), sub (alsó index), super (felső index), text-bottom (a normál szöveg alá), texttop (a normál szöveg fölé), top (teteje), adott érték (mértékegység szokásos) center, justify, left, right adott érték normal (csak egy szóközt hagy, tördeli a sorokat), pre (minden szóköz megmarad, sortörés a forrás alapján), nowrap (csak egy szóköz marad, nincs sortörés akkor se, ha kilóg a képernyőről), pre-wrap (a szóközök megmaradnak, a sorok törnek), preline (csak egy szóköz marad, sortörés szükség szerint
és a forrás alapján) normal, adott érték (mértékegység szokásos, ez az érték hozzáadódik az alapértelmezett távolsághoz) normal, adott érték (mértékegység szokásos, ez az érték hozzáadódik az alapértelmezett távolsághoz) absolute (adott pozícióban, és ha benne van egy másik, nem static beállítású egyedben, akkor ahhoz képest), fixed (az ablak egy megadott pontján), relative (a normál helyzetéhez képest), static (a normál helyén van, korábbi beállítás felülírására jó) auto (a forrásban szereplő sorrend szerint, az utoljára megadott elem lesz legfelül), adott érték (negatív is lehet, a nagyobb látszik) auto, adott érték auto, adott érték auto, adott érték auto, adott érték auto, adott érték auto, adott érték visible (látható), hidden (nem látható, de ott van), collapse (dinamikus táblázatoknál van jelentősége, más esetben ugyanaz, mint a hidden) block (egy téglalap alakú terület, faltól-falig, előtte
és mögötte sortörés), inline (nincs új sorban, csak annyi helye van, amennyit elfoglal), inline-block (nincs új sorban, de ha többsoros, eltolja a szomszéd sorokat – mint a szöveggel egy sorba tett kép), inline-table, list-item (kis hely előtte a listajelnek), run-in (ha utána block van, ez belelóg), none (egyáltalán meg sem jelenik), table sormagasság függőleges elhelyezés igazítás első sor behúzás a szóközök kezelése (sorozatos szóköz esetén mi a teendő, enged-e sortörést) a szavak közti távolság a betűk közti távolság pozíció (ez kell, ha az alakzatot arrébb akarjuk rakni) ha két elem legalább részben ugyanott van, melyik takarja a másikat szélesség magasság teteje alja bal oldal jobb oldal az elem láthatósága (a nem látható elem átlátszó, de ott van, változtathat más elemek pozícióján) milyen jellegű területet foglaljon el az elem (táblázatként viselkedik), table-caption, table-cell, table-column,
table-columngroup, table-footer-group, tableheader-group, table-row, table-rowgroup left, none, right both (egyik oldalon sem), left, none (sehol sincs tiltás – bárhol lehet!), right float clear cursor auto (a böngésző határozza meg), crosshair (célkereszt), default (az alapértelmezett), eresize (jobbra – keletre mozdító), help, move (mozgató), n-resize (balra – nyugatra mozdító), ne-resize (jobbra fel – északkeletre mozdító), nwresize (északnyugat), pointer (mutató), progress (félig foglalt), s-resize (dél), seresize (délkelet), sw-resize (délnyugat), text (szövegkurzor), w-resize (nyugat), wait (foglalt) visible (a tartalom túlnyúlhat), auto (a böngésző állítja be, általában görgetősávval), scroll (görgetősávval érhető el a tartalom), hidden (a túlnyúló tartalmat levágja) auto (nincs vágás), rect(top, right, bottom, left) – ekkor a zárójelben a téglalap sarkait kell megadni overflow clip körbefuttatás melyik oldalán
nem engedünk más alakzatot körbefutni az elem fölött megjelenő egér típusa (a konkrét kinézet az aktuális oprendszer-beállítástól függ) ha nem fér el a tartalom a területen (pl. nem törhető szöveg egy téglalapban), mit csináljon az elem széleit levágja-e háttér background-color background-image mint a color értékei none, elérési útvonal background-repeat backgroundattachment background-position no-repeat, repeat, x-repeat, y-repeat fixed, scroll háttérszín háttérkép (ez a háttérszín fölött van) ismétlődik-e a háttérkép rögzítve van-e a háttér vízszintesen: center, left, right, adott érték függőlegesen: bottom, center, top, adott érték a háttérkép elhelyezése (a két irány szóközzel elválasztva) dashed (szaggatott vonal), dotted (pontsor), double (duplavonal), groove (vésett), hide (nincs, kivéve, ha ez ütközne a táblázat egyéb szegélyeivel), inset (bemélyesztett), outset (kiemelkedik), none (nincs),
ridge (domború), solid (folytonos vonal) a szegély stílusa thin (vékony), medium (közepes), thick (vastag), adott érték szegélyvastagság mint a többi color szegélyszín adott érték a szegélyen belüli kihagyott hely a szegélyen kívüli kihagyott hely szegély border-style (ha nem egyforma az egyes oldalakon: bordertop-style, borderleft-style, borderbottom-style, border-right-style) border-width (ha nem egyforma az egyes oldalakon, az előzőhöz hasonlóan) border-color (ld. előző eset) padding (vagy padding-top, ) margin () adott érték, auto lista list-style-type list-style-image list-style-position felsorolásnál: disc (pötty), circle (karika), square (négyzet) számozott listánál: decimal (arab számok), decimal-leading-zero (arab számok 0-val kezdve, pl. 01, 02), lower-roman (római számok kisbetűvel), upper-roman (római számok), lower-greek (görög betűk: alpha, beta, ), lower-latin (kisbetűk), upper-latin (nagybetűk), armenian
(örmény számok), georgian (gótikus számok: an, ban, gan, ), lower-alpha (kisbetűk), upper-alpha (nagybetűk), none none, adott hivatkozás inside (kicsit belelóg a szövegbe), outside (teljesen kilóg a szöveg elé) a felsorolásjel fajtája, nem biztos, hogy minden böngészőben megjelennek a különlegességek (pl. örmény) a felsorolásjel, ha saját kép a felsorolásjel helyzete a szöveghez képest táblázat table-layout empty-cells auto (a tartalomhoz szabja automatikusan a böngésző), fixed (a tartalom nem befolyásolja az oszlopok szélességeit) collapse (az oszlopok szegélyei egy vonalba esnek, cellaegyesítéssel lehet változtatni), separate (minden cellának külön állítható a szegélye) adott érték, szóközzel elválasztva a vízszintes és függőleges távolság, ha nem egyforma – csak ha a border-collapse beállítása separate! hide (nem mutatja), show (van szegély és háttér) caption-side bottom (alul), top (fölül – ez az
alapértelmezett) border-collapse border-spacing az oszlopok szélességének beállítása a táblázat szegélyei egybe tartoznak-e a cellák szegélye közötti távolság kirajzolja-e az üresen hagyott cellák szegélyét és hátterét a táblázat felirata hol van A színek elnevezése: 16 alapszín van, amelyeket minden böngésző biztosan ismerni fog, ezek láthatók az oldalsó táblázatban. Ezen kívül számos más színt is használhatunk név szerint, ezeket általában értik a böngészők, de nem érdemes rá mérget venni. A függelékben megtalálható a listájuk. Szöveg ki-be: − − − − document.write(”szöveg”); Az idézőjelbe tett szöveget kiírja a képernyőre ott, ahol a parancs megjelenik. A parancs HTMLkódot állít elő, a szöveg minden további nélkül tartalmazhat tag-eket, például: document.write("hahó<br>hahó<p align=center><font color=#ff00ff>hahó"); A zárójelben több különböző szöveg is
szerepelhet, ekkor ezeket + jellel vagy vesszővel kapcsoljuk össze, például: document.write(”A legnagyobb szám: ”+NumberMAX VALUE); alert(”szöveg”); Egy dialógusablakot nyit a megadott szöveggel, alatta egy OK gombbal. Sortörés: confirm(”szöveg”); Az előzőhöz hasonló dialógusablak, de OK (=true) és Cancel (=false) gomb is van benne. Logikai értékkel tér vissza, tehát rá lehet kérdezni, pl.: var folytassam=confirm(”Folytassam?”); prompt(”kiírandó szöveg”, ”alapértelmezett szöveg”); Dialógusablak szövegdobozzal. A szövegdobozban az alapértelmezett szöveg jelenik meg, ez lehet üres string is. A parancs visszatérési értéke a felhasználó által begépelt szöveg (és ha Cancel-t nyomott, akkor null), pl.: var nev=prompt(”Mi a neved?”, ””); Az utolsó három parancs a Window objektumhoz tartozik, tehát igazán szabályosan pl. windowalertként kellene írni Ez elhagyható, mivel a window az alapértelmezett
objektum Változókezelés: A változók nevében jellemzően betű, aláhúzás, számjegy (ez csak a 2. karaktertől kezdve) szerepel, a kis- és nagybetűk különböznek. A változókat dinamikusan használhatjuk, tetszőleges célra, a szükséges típuskonverzió a legtöbbször automatikus. Megadásuk: − implicit módon: valahol a script közepén értéket adunk neki (hiába csábító, kevésbé ajánlott, mert szinte biztosan meg fogsz róla feledkezni valahol!!!) − explicit módon: deklarációs utasításban, var-ral kezdve. Ekkor nem kell megadni a típusát, sőt helyből kezdőértéket is adhatunk neki. Az egyes változók között vessző van, a blokk végén pontosvessző. Például: var szamlalo, nev=”Sárika”, fiatal e=true; Értékadás: − simán = jellel (pl. a=7) − +=, -=, *=, /= egy betűvel is változtat (pl. a+=6 ugyanaz, mint a=a+6) Típuslekérdezés: typeof parancs, eredménye mindig egy string, mégpedig „number”, „string”,
„boolean”, „undefined” vagy „object” (ez Null és objektum esetén). Pl typeof a és typeof(a) is helyes, mindkettő eredménye „number”. Algoritmuselemek: Feltételek Eredményük true (=1) vagy false (=0). Akár szöveget vagy számot is lehet feltételként használni, ekkor üres string, 0 karakter és 0 mint szám jelenti a false-t, az összes többi true. A sima = jel értéket ad, ebből következően összehasonlításra nem alkalmas. Helyette több lehetőség is van: − == egyenlő, akár típuskonverzióval, tehát pl. ”3”==3 eredménye true − != nem egyenlő, típuskonverzióval sem. − <, >, <=, >= szokás szerint − === szigorúan egyenlő, a típusnak is meg kell egyezni, tehát pl. ”3”===3 eredménye false − !== szigorúan nem egyenlő, tehát a típusuk vagy az értékük eltér. Az egyenlőséges összehasonlításoknak csak akkor van értelmük, ha azonos objektumokra hivatkoznak, különben mindig false lesz az eredmény.
Logikai műveletek: − &&: AND − ||: OR − !: NOT Az && és az || is rövidzár kiértékelésű, tehát ha a feltétel első része már meghatározza az eredményt, a többi részt ki sem értékeli (ellentétben például a Pascallal). Elágazások Kétágú: if (feltétel) parancs; else parancs; Egy-egy ágban több parancs is szerepelhet, ekkor { (=begin) és } (=end) jelek határolják a blokkot. Többágú: switch (kifejezés) { case érték1: parancs; case érték2: parancs; default: parancs; } Kiértékeléskor megkeresi az első megfelelő értéket, és az utána következő utasításokat hajtja végre. Ha ezek után talál még egy megfelelő értéket, akkor az ahhoz tartozókat is (ellentétben a Pascallal, ahol csak az első jó ágat vette figyelembe!). Ha mindenképpen azt akarjuk, hogy csak egy ágat válasszon, akkor mindegyik ág utolsó parancsának a break;-et kell írni, ezzel kilép a szerkezetből. A default ág akkor következik, ha
egy érték sem felel meg. Ez az ág elhagyható Az értékek lehetnek számok, stringek vagy logikai értékek, a típusuknak nem feltétlenül kell egyezni. Ciklusok Számlálós: for (mettől; meddig; hogyan változik) { utasítás(ok); } A zárójelben a számláló változó nevének és megfelelő értékeinek kell szerepelni. A változót nem kell külön definiálni. A következő példa a 11-nél kisebb kettőhatványokat írja ki egymás alá: document.write("<p>"); for (szam=1; szam<11; szam=szam*2) document.write(szam, "</p><p>"); Elöltesztelős: while (feltétel) { utasítás(ok); } Az előző példa ezzel megvalósítva: document.write("<p>"); szam=1; while (szam<11) { document.write(szam, "</p><p>"); szam=szam*2; } Hátultesztelős: do { utasítás(ok); } while (feltétel) Az előzőhöz hasonló, de az utasítások egyszer mindenképpen lefutnak. A feltétel itt is a bennmaradás
feltétele (ellentétben pl. a Pascallal) For-in: Egy objektum tulajdonságait tudja kilistázni, például a kicsit később, az objektumok kezelésénél szereplő menu objektumra eresztve: for (valtozo in menu) document.write(”Név: ”, valtozo, ” – Érték: ”, menu[valtozo], <br>”); És ha a menu helyett a menu.leves-re eresztjük ugyanezt, akkor a leves tulajdonságait listázza ki Ez az egész tulajdonképpen azért működik, mert a JavaScript az objektumokat gyakorlatilag tömbként kezeli, ahol a tulajdonságok neve felel meg a sorszámnak, vagyis a menu.desszert ugyanazt jelenti, mint a menu["desszert"]. Függvények function függvénynév(paraméterek) { utasítások } Paramétereket nem kötelező megadni, zárójelet viszont kötelező kitenni. Ha szeretnénk, hogy egy függvény valamilyen értéket adjon vissza, a return parancsot kell használni. Pl. function otszor(szam) { return szam*5; } ezt később pl. egy a=otszor(10) típusú
parancsban használhatjuk (itt az a értéke 50 lesz) Ha nincs return parancs, a függvény nem ad vissza értéket, eljárásként lehet használni. A függvény belsejében létrehozott változók csak addig léteznek, amíg a függvény le nem fut. Elemi adattípusok: Number A számokat dupla lebegőpontos formában tárolja (legnagyobb érték: 1.7976931348623157*10308, legkisebb érték: 5*10-324), nem számít, hogy egész vagy tört. A nem egész értékek megjelenése: lehet benne tizedespont (nem vessző!) vagy kis vagy nagy e betű, ami után a normálalak tíz-hatványának a kitevője található. Néhány megjelenési forma: 72.7 .73 7e2 81E-8 Műveletek: − +, -, *, / a szokásos módon, két értékkel (pl. a+8) − % maradék (pl. 24 % 5 =4) − - előjel − -- (csökkentő) és ++ (növelő), egy változóval. A műveleti jel a változó előtt vagy mögött lehet, de összetett kifejezésnél nem ad azonos eredményt. Például, ha az a értéke eredetileg 7, akkor
a következő két példában 8-ra fog növekedni, de a kifejezések értéke: (a++)*3 esetén 21, (++a)3 esetén viszont 24. Number néven létezik egy előre definiált objektum is, aminek a tulajdonságait és metódusait elérhetjük, sőt a számváltozóinkra minden különösebb fájdalom nélkül használhatjuk (de ettől a számváltozóink nem igazán válnak objektumokká!). Az objektum jellemzőit lásd egy kicsit később String Ez akárhány karakterből állhat (nem karaktertömb), ’ vagy ” határolja. Ha a szövegben szeretnénk ’-t vagy ”-t vagy -t szerepeltetni, elé egy -t kell beszúrni. Pl: ’You’re beautiful’ vagy ’C:\alma’ Természetesen itt is használható az üres string: ’’ vagy ”” Két szöveg összefűzése + jellel történik, akkor is, ha az egyik szám. Pl ”alma”+” körte”= ”alma körte”, és 1978+” január”=”1978 január”. Ilyenkor a számot automatikusan szöveggé konvertálja Két szöveg szorzása is
lehetséges, ha mindkettő számnak felel meg, ekkor automatikusan számmá konvertál. Pl ”3”*”2”=6, ”3””kettő”=NaN. Így például szöveget számmá konvertálhatunk, ha megszorozzuk 1-gyel. A karakterek sorszámozása 0-val kezdődik! String néven is szerepel egy előre definiált objektum, amelynek a tulajdonságait és metódusait a Numbernél látottakhoz hasonlóan használhatjuk: − length: a szöveg hossza (pl. ha s=”Alma”, akkor slength=4) − charAt(szám): a szöveg szám-adik karaktere (pl. scharAt(2)=”m”) − indexOf(karakter): a karakter pozíciója a stringen belül (pl. sindexOf(”m”)=2) − substring(honnan, meddig): a string része (pl. ssubstring(2,4)=”lma”) − toLowerCase(): csupa kisbetű lesz (pl. stoLowerCase()=”alma”) − toUpperCase(): csupa nagybetű lesz (pl. stoUpperCase()=”ALMA”) Boolean Két értékkel rendelkezik: true és false Undefined Egyetlen értéke: undefined. Jelentése: ha egy változó nem
létezik, vagy nem kapott még kezdőértéket, akkor az értéke undefined. Null Egyetlen értéke: null, ez azt jelöli, hogy hiányzik egy érték (nem 0-t) Globális (minden egyéb objektumnál használható) metódusok szintaktika isFinite(kifejezés) isNaN(kifejezés) Number(objektum) parseFloat(szöveg) parseInt(szöveg) String(objektum) jelentés meghatározza, hogy a kifejezés egy véges, valódi számnak felel-e meg logikai értéket ad vissza, aszerint, hogy a változó értéke NaN-e (pl. az isNaN(a/0) eredménye true) az objektum értékét számmá konvertálja, pl. Number(’12’) értéke 12, Number(true) értéke 1 a szöveget lebegőpontos valós számmá alakítja a szöveget egész számmá alakítja az objektum értékét szöveggé alakítja jellemző értékek (properties) szintaktika Infinity NaN undefined jelentés a pozitív vagy negatív végtelent jelképező szám Not a Number = nem szám. Pl ha nullával osztjuk az a-t, az értéke NaN lesz A NaN
nem egyenlő semmilyen számmal, sőt (!) önmagával sem ha egy változó nem kapott értéket, ez az értéke A Number objektum metódusai szintaktika toExponential() toFixed(hány jegy) toPrecision(hossz) toString() valueOf() jelentés a számot normálalakra hozza, pl. a=12 esetén az atoExponential() értéke 1.2e+1 a számot hány jegy+1 tizedesjegyű alakra hozza a számot hossz hosszúságúra alakítja, ha a hossz kisebb a tizedespont előtti jegyek számánál, normálalak lesz, pl. a 123-ból hossz=1 esetén 1e+1, hossz=2 esetén 12, hossz=4 esetén 12.30 a számot szöveggé alakítja (pl. a=123 után az atoString() értéke „123”) a Number objektum értékét adja vissza, kerekítés nélkül jellemző értékei (properties) szintaktika MAX VALUE MIN VALUE NEGATIVE INFINITY POSITIVE INFINITY jelentés a legnagyobb ábrázolható szám (pl. a document.write(NumberMAX VALUE); parancs kiírja a képernyőre: 1.7976931348623157e+308) a legkisebb ábrázolható szám a
plusz végtelent jelentő speciális érték a mínusz végtelent jelentő speciális érték A String objektum metódusai szintaktika charAt(hányadik) charCodeAt(hányadik) jelentés a szöveg hányadik karaktere pl. ha s=”Alma”, akkor scharAt(2)=”m” a szöveg hányadik karakterének Unicode-ja, pl. scharCodeAt(2) értéke 109 concat(szöveg, a paraméterként adott szövegeket hozzáfűzi az eredetihez, a + jelhez szöveg,) hasonlóan, pl. sconcat(’ körte’) értéke ’Alma körte’ fromCharCode(szám, a számot mint Unicode értéket karakterré konvertálja, pl. a szám,) String.fromCharCode(109, 100) értéke ’md’ indexOf(karakter) a karakter első előfordulási helye a stringen belül (pl. sindexOf(”m”)=2) lastIndexOf(karakter) a karakter utolsó előfordulási helye a stringen belül match(kifejezés) replace(kifejezés, mire) search(kifejezés) slice(hány) split(elválasztó, hány rész) substr(honnan, hányat) substring(honnan, meddig)
toLowerCase() toUpperCase() valueOf() kilistázza a szövegnek azokat a részleteit, amelyekre ráillik a kifejezés – a kifejezés egy reguláris kifejezés, pl. ha b=’kameraman’, akkor a b.match(/[ma]+/g) eredménye am,ama (vagyis minden olyan részlet a szövegből, amely a-kat és/vagy m-eket tartalmaz) a kifejezés szövegrész összes előfordulását mire cseréli, pl. b.replace(/[ma]+/g, újszöveg) eredménye ’kújszövegerújszövegn’ a kifejezés első előfordulásának pozícióját adja vissza, pl. b.search(/[ma]+/g) értéke 1 lesz a szöveg első hány karakterét levágja, pl. bslice(3) eredménye ’eraman’ a szöveget hány rész darabra vágja az elválasztó karakter mentén – ha az elválasztó hiányzik, egy darabban marad a szöveg, ha a hány rész, akkor minden lehetséges részt megad, pl. bsplit(a,2) eredménye ’k,mer’ a string honnan-adik karakterétől kezdve hányat karakternyi szöveget kivesz ,pl. bsubstr(1,4) eredménye ’amer’ a
string honnan-adik karakterétől kezdve a meddig-edik karakteréig kivesz pl. bsubstring(1,4 eredménye ’ame’ csupa kisbetű lesz, pl. stoLowerCase()=”alma” csupa kisbetű lesz, pl. stoUpperCase()=”ALMA” a String objektum értékét adja vissza jellemző értékei (properties) length szintaktika jelentés a szöveg hossza (pl. ha s=”Alma”, akkor slength=4) A Math objektum metódusai szintaktika Math.abs(szám) Math.acos(szám) Math.asin(szám) Math.atan(szám) Math.atan2(x,y) jelentés a szám abszolútértéke megadja, hogy a szám minek a koszinusza (radiánban) megadja, hogy a szám minek a szinusza (radiánban) megadja, hogy a szám minek a tangense (radiánban) az (x,y) pontba mutató helyvektor x-tengellyel bezárt szögét adja vissza radiánban Math.sin(szög) a szög szinusza Math.cos(szög) a szög koszinusza Math.tan(szög) a szög tangense Math.ceil(szám) felső egészrész Math.floor(szám) alsó egészrész Math.round(szám) kerekítés
Math.max(szám1, szám2, a számok közül a legnagyobb, ha egy szám sincs a zárójelben, az eredmény NEGATIVE INFINITY ) Math.min(szám1, szám2, a számok közül a legkisebb, ha egy szám sincs a zárójelben, az eredmény POSITIVE INFINITY ) Math.exp(szám) eszám Math.log(szám) ln szám Math.pow(alap, kitevő) alapkitevő Math.sqrt(szám) a szám gyöke Math.random() véletlenszám 0 és 1 között Math.toSource() eredménye a ’Math’ string jellemző értékei (properties) szintaktika jelentés Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1 2 Math.SQRT2 az e értéke, kb. 2718 ln2, kb. 0693 ln10, kb. 2302 log 2 e, kb. 1442 log 10 e, kb. 0434 π, kb. 3142 az ½ gyöke, kb. 0707 a 2 gyöke, kb. 1414 A Date objektum A Date objektum eléréséhez létre kell hoznunk egy dátum típusú változót (objektumot), ezt a new Date() paranccsal érhetjük el. A megadott paraméterektől függően több eredmény lehet: − d=new Date() eredménye az
aktuális dátum, pl. Tue Oct 19 2010 22:04:42 GMT+0200 − d= new Date(szám), ekkor a szám ezredmásodpercet jelent, a 0 értéke Jan 01 1970 01:00:00, negatív számok is megadhatók, egy nap 86 400 000 ezredmásodperc − d=new Date(szöveg), ekkor a szöveg úgy nézzen ki, mint az első példa eredménye − d= new Date(év, hónap, nap, óra, perc, másodperc, ezredmásodperc), pl. d=new Date(1978, 1, 13, 4) eredménye Mon Feb 13 1978 04:00:00 GMT+0100 – nem muszáj mindenkit megadni metódusai szintaktika getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() parse() setDate() setDay() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() jelentés visszaadja a nap hónapon belüli sorszámát, pl. dgetDate() eredménye 13
visszaadja a nap héten belüli sorszámát, ahol 0=vasárnap, 1=hétfő, , pl. d.getDay() eredménye 1 négy jegyre adja meg az évet, pl. dgetFullYear() eredménye 1978 megadja az órát 0-23, pl. dgetHours() eredménye 4 megadja az ezredmásodpercet 0-999 megadja a perceket 0-59 megadja a hónapot 0-11, pl. dgetMonth() eredménye 1 megadja a másodperceket 0-59 megadja, hány ezredmásodperc telt el 1970. január 1 óta, pl dgetTime() eredménye 256 186 800 000 megadja, hány perc az eltérés a helyi és az egyetemes idő (GMT) között, pl. d.getTimezoneOffset() eredménye -60 az egyetemes idő szerinti értékeket adják vissza, ugyanúgy működnek, mint az előzők egy szöveggel megadott dátumot feldolgoz, és kiszámítja, hány ezredmásodperccel volt 1970. január 1 után, pl a Dateparse(Mon Feb 13 1978 04:00:00 GMT+0100) eredménye 256 186 800 000 beállítják a dátum adott értékét, pl. a dsetDate(17) parancs 13-adika helyett 17-edikét állítja be az egyetemes
idő szerinti értékeket állítják be setUTCDay() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() a dátumot szöveggé alakítja, pl. dtoDateString() eredménye Mon Feb 13 1978 toLocaleDateString() a dátumot a területi beállításnak megfelelő formátumban írja ki, pl. d.toLocaleDateString() eredménye 1978 február 13 toLocaleTimeString() a dátum idő részét írja ki a helyi beállítások szerint, pl. a d.toLocaleTimeString() eredménye 4:00:00 toLocaleString() dátum és idő helyi formátumban, pl. 1978 február 13 4:00:00 toString() a dátum szöveggé alakítva, pl. Mon Feb 13 1978 04:00:00 GMT+0100 toTimeString() a dátum idő része szövegként, pl. 04:00:00 GMT+0100 toUTCString() egyetemes idő szerint, pl. Mon, 13 Feb 1978 03:00:00 GMT UTC(év, hónap, nap, a megadott dátum az egyetemes idő szerint hány ezredmásodperccel volt óra, perc, több 1970. január 1-énél másodperc,
ezredmásodperc) valueOf() az értéket adja vissza, az eltelt ezredmásodperceket, pl. dvalueOf() eredménye 256 186 800 000 Feladatok: 11. Kérj be egy számot, és ellenőrizd, hogy szám-e! c=prompt("Adj meg egy számot"); c=Number(c); if (isNaN(c)) { document.write("ez nem szám!") } else { document.write(c); } Persze a Number(c) parancs helyett vehettük volna a szám abszolút értékét, beszorozhattuk volna 1-gyel, vagy adhattunk volna bármilyen parancsot, ami csak számmal működik. Érdekesség, hogy ha számként a –Infinity értéket adjuk meg, azt el fogja fogadni. Ha ezt el akarjuk kerülni, az isNaN(c) helyett az isFinite(c) parancs kell – ez csak véges értékeket fogad el. 12. Kérj be egy számot, és ellenőrizd, hogy adott határok közötti szám-e! do { jo=false; c=prompt("Adj meg egy számot"); c=Number(c); if (isNaN(c)) { alert("ez nem szám!"); } else { if ((c<10) || (c>100)) { alert("Nem jó az
értéke!"); } else { document.write(c); } jo=true; } } while (!jo) 13. Kérd be egy ember születési idejét, majd állapítsd meg, hogy hány napos! function szambeker(also, felso, szoveg) { do { jo=false; c=prompt(szoveg); c=Number(c); if (isNaN(c)) { alert("ez nem szám!"); } else { if ((c<also) || (c>felso)) { alert("Nem jó az értéke!"); } else { jo=true; } } } while (!jo); return c; } ev=szambeker(1900, 2010, "Add meg az évszámot!"); honap=szambeker(1, 12, "Add meg a hónap sorszámát!"); nap=szambeker(1, 31, "Add meg a napot!"); most= new Date(); kor=(most.getFullYear()-ev)*365+(most.getMonth()-honap)*31+(most.getDate()nap); alert(kor); Mivel többször is ugyanazt a műveletet kell végrehajtani, célszerű definiálni egy függvényt a feladatra. Az aktuális dátumot a Date objektum felhasználásával lehet feldolgozni. 14. Kérj be egy számot, majd váltsd át kettes, illetve tizenhatos
számrendszerbe! 15. Kérj be egy számot, majd váltsd át tetszőleges alapú számrendszerbe! szam=prompt("Adj meg egy számot!"); alap=prompt("Add meg a kívánt alapot!"); ujszam=""; do { maradek=szam % alap; hanyados=Math.floor(szam / alap); ujszam="("+maradek+")"+ujszam; szam=hanyados; } while (hanyados>0) alert(ujszam); Mivel itt nincs egészosztás (eleve egész típus sincs), ezért a lefele kerekítést érdemes használni. A zárójelek azért szükségesek, hogy tíznél nagyobb alapokkal is gond nélkül lehessen dolgozni. 16. Kérj be egy hexa színkódot, majd írd ki a kódnak megfelelő színben! do { 1)) hexa=false; kod=prompt("Add meg a hexa kódot!"); if ((kod.length>6) || (kodsearch(/[g-z]+/)>-1) || (kodsearch(/[G-Z]+/)>{ } else { } alert("nem hexa"); hexa=true; } while (!hexa); while (kod.length<6) { kod=kod+0; } document.write("<font color=#", kod,
">", kod); A kod.search parancs paramétere egy reguláris kifejezés, a paraméterezésnek pl a http://w3schools.com/jsref/jsref obj regexpasp vagy a http://progkorinfeltehu/regkifhtm oldalon lehet utána nézni. Itt most a /[g-z]+/ azt jelenti, hogy legalább egyet tartalmaz a g és z közötti betűk közül 17. Kérd be egy ember nevét és születési idejét, állapítsd meg, hogy hány órás, az óráinak a számát váltsd át tizenhatos számrendszerbe, majd az így kapott hexa kódnak megfelelő színnel írd ki a nevét! 18. A felhasználó adja meg egy derékszögű háromszög két befogójának a méretét, a program számítsa ki az átfogót, a háromszög területét és a szögeit! 19. Kérd be egy másodfokú egyenlet együtthatóit, majd számítsd ki a megoldásokat, arról is tájékoztasd a felhasználót, ha nincs megoldás, vagy ha csak egy van! 20. Vegyél fel egy képet, amelyre ha rákattintunk, egy ablakban megjelenik a mérete és a
pozíciója! 21. Vegyél fel egy képet, amely mindig 100 pixellel jobbra megy, ha rákattintunk! Ehhez a feladathoz már változókat kell használni, mivel a kép bal sarkának a helyét nem egyszerűen számmal, hanem szöveggel adjuk meg (this.styleleft=’100px’) A megoldás nem túl bonyolult, először le kell vágni a ’px’ részt, utána úgy változtatjuk a számot, ahogy akarjuk, majd megint hozzá kell passzítani a ’px’ tagot: <img src="fej.gif" onclick="this.styleposition=absolute; a=this.styleleft; phelye=a.indexOf(p); b=a.substring(0,phelye); b=b*1+100; a=b+px; this.styleleft=a "/> Talán feltűnt, hogy a b értékét megszoroztuk 1-gyel a növelés előtt. Erre azért van szükség, mert a b típusa alapvetően szöveg, és a +100 parancs a 100-at szövegként fűzi utána. A 100100px pedig nem könnyen ábrázolható Az 1-gyel való szorzás megoldja a kérdést, mert az számmá változtatja a b-t. 22. Vegyél fel egy képet, amely
minden kattintásra véletlenszerűen lép bármelyik irányba +-100 pixellel! 23. Érd el, hogy egy kép folyton kövesse az egeret! Ez már egy összetett függvényrendszer lesz: function init(){ if(window.addEventListener){ document.bodyaddEventListener(mousemove,curPos,false) } else { if(window.attachEvent){ document.bodyattachEvent(onmousemove,curPos); } } obj=document.getElementById(info); } function curPos(event){ wpozicio=event.clientX + (documentdocumentElementscrollLeft ? document.documentElementscrollLeft : document.bodyscrollLeft) hpozicio=event.clientY + (documentdocumentElementscrollTop ? document.documentElementscrollTop : document.bodyscrollTop); document.images[0]styleposition=absolute; document.images[0]styleleft=wpozicio+10+px; document.images[0]styletop=hpozicio+20+px; } if(window.addEventListener){ window.addEventListener(load,init,false); } else { if(window.attachEvent){ window.attachEvent(onload,init); } } 24. Vegyél fel egy képet, amelynek a szegélye
dupla olyan vastag lesz, ha rákattintunk! 25. Olvass be egy szöveget, majd írasd ki csupa nagybetűvel! 26. Olvass be egy hexadecimális színkódot, majd a neki megfelelő színben írd ki! 27. Vegyél fel egy szöveget, amire ha rákattintunk, a felhasználó megadhatja a betűk és a háttér színét valamint a betűméretet, majd a szöveg változzon is meg eszerint! 28. Addig kérj be számokat, amíg az összegük el nem ér egy előzetes küszöbértéket! 29. Kérj be 3 számot, és állapítsd meg, hogy lehet-e belőlük háromszöget készíteni! 30. Kérd be egy általános háromszög három oldalát, majd számold ki a kerületét, a területét és a szögeit! 31. Szúrj be egy képet a weblapra, mondjuk az elején már megismert fejet, és oldd meg, hogy ha rákattintunk, nőjön meg a mérete 10%-kal, de csak akkor, ha így még nem haladja meg a 800 képpontos szélességet. Ha meghaladná, csökkenjen 10%-kal, egészen 100 képpontig, mert akkor megint kezdjen
nőni. 32. Szúrj be egy képet, amit az egérrel üldözhetünk: ha fölé visszük az egeret, arrébb ugrik, de sose nyúlik túl az ablakon. Ha mégis sikerül rákattintani, gratulál 33. Készíts matek-tesztet: egy ablakban írj ki két véletlenszámot, köztük egy műveleti jellel, majd ellenőrizd le a felhasználó eredményét! 34. Az előző matektesztet több nehézségi szinttel oldd meg (könnyű: max 10 számok, közepes: max 100, nehéz: max 1000). 35. Az előző matekteszt adott számú kérdést tegyen fel, majd közölje az összesített százalékos eredményt 36. Olvass be egy számot hibaellenőrzéssel (szám-e, és ha igen, megadott korlátok közé esik-e) 37. Olvass be n db számot, majd ezeket egymás mellé írd ki! 38. Olvass be n db számot, majd ezeket akkora méretben írd ki, amekkorák a számok! 39. Olvass be egy szöveget, és számold meg, hányszor szerepel benne egy adott betű! 40. Olvass be egy szöveget, és tüntesd el belőle a
szóközöket! 41. Olvass be egy szöveget, és tüntesd el belőle a felesleges szóközöket! 42. Olvass be egy szöveget, és az első karakterétől függően csupa kis- vagy csupa nagybetűvel írd ki! 43. Olvass be egy szöveget, majd írasd ki úgy, hogy minden szó nagybetűvel kezdődik! 44. Olvass be egy szöveget, majd írasd ki úgy, hogy minden pont után nagybetűvel kezdődjön a szöveg! 45. Olvass be egy szöveget, és mondd meg, melyik volt a leghosszabb szó! 46. Olvass be egy szöveget és egy szövegrészletet, majd a szöveget úgy írd ki, hogy a szövegrészlet mindenhol csupa nagybetűvel, félkövéren legyen szedve! 47. Olvass be egy szöveget, majd írasd ki úgy, hogy a leghosszabb szó (ha több van, mindegyik) csupa nagybetűvel szerepeljen! 48. Kérj be számokkal egy dátumot, majd írd ki hagyományosan, a hónap nevét szöveggel megjelenítve 49. Értelmezz egy egyjegyű számokat tartalmazó műveletsort, amit a felhasználó gépelhet be 50. Az
előző feladatban szereplő műveletsor tartalmazhat zárójeleket is Tömbkezelés A JavaScriptben a tömbök dinamikusak, a hosszuk akár futás közben is változhat, elemeik lehetnek elemi adatok, objektumok vagy akár más tömbök is, vegyesen. Tömb létrehozása: − var hetek= new Array(52); - csak az elemszámot adjuk meg, elemek majd később. Ilyenkor, amikor egyetlen paramétert adunk meg, az automatikusan a tömb elemszáma lesz, nem az egyetlen eleme. var akarmi=new Array (1, "Józsika", "bambuszrügy", false); vagy var akarmi=new Array [1, "Józsika", "bambuszrügy", false]; - mindkét esetben egy négyelemű tömböt hoztunk létre, teljesen különböző típusú elemekkel. Tömbtulajdonságok: − A tömbelemek indexelése 0-val kezdődik, az indexet szögletes zárójelbe írva érhetjük el az elemeket, pl. akarmi[2]="bambuszrügy" − A tömb elemszáma a length tulajdonság, pl. akarmilength=4 Ezt át is
állíthatjuk, pl az akarmi.length=10; parancs után a használható legnagyobb index 9 lesz Bár a tömb hosszát átállítottuk, a memóriában nem foglal több helyet, mert csak a már megadott elemek számítanak. − join(): a tömbelemeket stringgé alakítja és egyetlen szöveggé fűzi össze. Ha nem adunk meg paramétert, akkor vesszővel választja el az elemeket (var vesszos= akarmi.join(); eredménye: vesszos="1, Józsika, bambuszrügy, false"), ha adunk, akkor azzal (var kotojeles=akarmi.join(" – ") eredménye: kotojeles="1 – Józsika – bambuszrügy – false") − toString(): ugyanaz, mint a paraméter nélküli join − reverse(): megfordítja az elemek sorrendjét − sort(): minden elemet stringgé alakít, és ábécé szerint rendezi őket − concat(új elemek): a paraméterként megadott elemeket hozzáfűzi a tömb végéhez pl. akarmi=akarmi.concat(5, true, "hahó"); − slice(honnan, meddig): a tömb résztömbjét
veszi ki, a második paraméterhez tartozó elem már nem fog az új tömbben szerepelni. Pl: kicsi=akarmislice(2,4); eredménye kicsi=("bambuszrügy", false). Ha csak egy paramétert adunk, akkor onnan az összes elem az új tömbbe kerül. − pop(): eltávolítja a tömb utolsó elemét, pl. utolso=akarmipop(); eredményeként az utolso-ba kerül a "hahó", a tömb eggyel rövidebb lesz − push(új elem): az új elemet a tömb végéhez illeszti − shift(): eltávolítja a tömb első elemét − unshift(új elem): új elemet szúr a tömb elejére Többdimenziós tömböket egydimenziós tömbök tömbjeként adhatunk meg: − a new parancs többszöri használatával, pl. var nagytomb= new Array(5); for (szam=0; szam<nagytomb.length; szam++) nagytomb[szam]=new Array(6); egy 5*6-os, elemek nélküli kétdimenziós tömböt definiál − az elemek felsorolásával, pl. var kistomb= [ [1, 2, 5], [3, 9, 2], ]; egy 3*2-es, elemekkel feltöltött tömböt ad
meg. Egy példa: szorzótábla elemeit tárolja az előbb megadott nagytomb-ben, és ki is íratja: for (sor=0; sor<nagytomb.length; sor++) { for (oszlop=0; oszlop<nagytomb[sor].length; oszlop++) nagytomb[sor][oszlop]=sor*oszlop; } for (sor=0; sor<nagytomb.length; sor++) { for (oszlop=0; oszlop<nagytomb[sor].length; oszlop++) document.write(nagytomb[sor][oszlop]=sor*oszlop, " "); document.write("<br>"); } − Objektumok létrehozása és kezelése Magányos objektum Amikor egy új objektumot hozunk létre, a new parancsot használjuk. Ez alapértelmezés szerint egy teljesen üres objektumot hoz létre, típus és tulajdonságok nélkül. Pl: var menu=new Object(); Az új objektum tulajdonságainak a száma dinamikus, bármikor bővíthető és csökkenthető. Új tulajdonságot úgy hozunk létre, hogy értéket adunk neki, pl.: menu.nev=”hétfő”; menu.leves=”húsleves”; menu.foetel=”cordon bleu”; menu.desszert=”somlói
galuska”; A tulajdonságok tulajdonságát is megadhatjuk, pl. menufoetelhus=”disznó”; És az objektum egyik tulajdonsága minden további nélkül lehet egy újabb objektum, amit az eddigiekhez hasonlóan kezelünk, pl. menu.leves = new Object(); menu.levesvega e = false; menu.levesar=500; A leves és a főétel között alapvető különbség lesz: a leves objektummá vált, a tulajdonságait a for-in ciklussal listázhatjuk, a főétel viszont nem, a for-in ciklus nem fogja kiadni a disznót! Egy objektumtulajdonság törlése: delete menu.desszert; Objektum mint szervezési eszköz FÜGGELÉK A színek fantázianevei Ahogy azt már az elején írtam, rengeteg színt használhatunk név szerint, ezeket általában értik a böngészők, de nem érdemes rá mérget venni. Először egy visszafogottabb lista: Majd egy kevésbé visszafogott:
árt) a parancsok, változók, függvények (szövegek ” ” vagy ’ ’ között) // --> </script> Mivel nem minden böngésző rendelkezik JavaScript interpreterrel, célszerű a kódokat ezek elől „elrejteni” (szerencsére az ilyenek egyre kevesebben vannak). Erre szolgál az előző példában a 2 és az 5 sor Ezen kívül lehetnek még apró scriptek a tagekben (és ekkor a szövegek ’ ’ között!), pl: <p onclick="this.stylecolor= red; document.bodystylebackgroundColor=#a05000; "> szöveg </p> A fenti kód eredménye: ha a szövegre kattintunk, piros lesz a betűszín és barnás a dokumentum háttere. A ; után nem muszáj sort törni, de nem is baj. Látható, hogy a parancsok sorozata ” ” között szerepelt Kommentek: − // után a sor többi része megjegyzésnek minősül − /* és / között egy- vagy többsoros megjegyzés helyezhető el Objektumok: Az előző példából is látható, hogy a piros betűszín nem csak úgy
lóg a levegőben, hanem nagyon határozottan az érintett elem (this) stílusának (style) színe (color). Ugyanígy a háttérszín is a dokumentum (document) törzsének (body) stílusának (style) háttérszíne (backgroundColor). Ebben a példában két objektum szerepelt (this és document), és ezeknek a jellemzőit határozzuk meg rendszerbe foglalva. Nagyon egyszerűen: az objektum egy olyan valami, aminek mindenféle jellemzője van. A jellemzők lehetnek tulajdonságok (pl. stílus) vagy metódusok, azaz események (pl kattintás vagy betöltés) A jellemzőknek adhatunk értéket (pl. a stílusnál színt vagy a kattintáshoz egy figyelmeztető ablakot) A jellemzők jellemzőit ponttal választjuk el (épp úgy, mint ahogy Pascalban a rekordoknál!). Rengeteg jellemző van, szerencsére a SharePoint Designer súg, pl. a document után felajánlja a lehetőségeket. Fontos: a kis- és nagybetűk számítanak! Feladatok: 1. Készíts egy weblapot választható
háttérszínnel! A háttérszín váltását a megfelelő feliratra való kattintás váltsa ki! A következő részlet valósítja meg a HTML-kódban: <body> <h1>1. feladat</h1> <p>Válassz háttérszínt!</p> <p onclick="document.bodybgColor=#55dd88">zöld</p> <p onclick="document.bodystylebackgroundColor=#5588dd">kék</p> </body> Látható, hogy a bekezdések szerves része a kattintásra való reagálás, még a tag-en belül található. Szintén érdemes észrevenni, hogy a színkódot a kettőskeresztjével együtt egy ’ ’-párba tettük, ez fontos. Feltűnhetett, hogy két különböző kód is ugyanazt valósította meg: • Az első változat értelme: a törzs (body) alanyi jogon is rendelkezik a háttérszín jellemzővel, ezt akkor bgColornak hívjuk (emlékezz: <body bgcolor=#554422>). Ez a változat kevésbé általános, ráadásul a második változat felülírja, utána már
hiába próbálunk rá kattintgatni, csak egy hasonló típusú paranccsal használható oda-vissza. • A második változatnál a törzset (body) szokványos Windows-objektumként kezeljük, aminek vannak stílusjellemzői, ezek közül egy a háttérszín. Ez az általános megoldás, szövegeknél, gomboknál, képeknél ugyanígy használható. 2. Helyezd el a weblapra a fejgif képet, és oldd meg, hogy ha fölé viszed az egeret, elpiruljon, majd ha az egér továbbmegy, megint kifehéredjen! A fej alapszíne legyen fehér, az oldal hátterétől függetlenül. A szükséges HTML-kód: <img src="fej.gif" style="background-color:#ffffff" onmouseover="this.stylebackgroundColor=#ff2211" onmouseout="this.stylebackgroundColor=#ffffff"/> A kód csak a könnyebb olvashatóság kedvéért van tördelve, az egész egy tag-en belül található. Az onmouseover azt jelenti, hogy az egér az elem (a kép) fölött van, az onmouseout azt, hogy
távozott. 3. Oldd meg, hogy az előző feladatban szereplő fej kétszer akkorára nőjön, ha rákattintunk! Az előző tag-et egyetlen paranccsal kell kiegészíteni: onclick="this.width=thiswidth*2" Érdemes észrevenni, hogy • elég az egyik méretet változtatni, a másik vele nő (a height is ugyanilyen jó lett volna) • a width már nem a stílus része, hanem helyből jellemzi a képet. Ha bizonytalan vagy, hogy style vagy nem style, akkor ötletet adhat a bal alsó sarokban található objektumjellemzők ablak. Ha ott látható a jellemző, amit keresel, akkor nem style 4. Vegyél fel egy szöveget a weblapra, és oldd meg, hogy ha fölé visszük az egeret, akkor a weblap háttere lila, az általános szövegszín sárga, az egér alatti szöveg pedig zöld alapon barna színű legyen! Ha a szövegre rákattintunk, mindegyik előbb említett szín helyett jelenjen meg valami más, és nőjön meg a szöveg betűmérete! Ha távozunk az egérrel, álljon vissza
minden a szokásos színekre. Itt már elég sok minden furakodik a szegény <p> tag-be: <p style="color: #000000; background-color: #FFFFFF; " onmouseover="document.bodystylebackgroundColor=#aa11bb; document.bodystylecolor=#aabb11; this.stylebackgroundColor=#55dd22; this.stylecolor=#445511" onclick="document.bodystylebackgroundColor=#00FFFF; document.bodystylecolor=#00ff00; this.stylebackgroundColor=#FF00FF; this.stylecolor=#0000ff; this.stylefontSize=larger" onmouseout="document.bodystylebackgroundColor=#FFFFFF; document.bodystylecolor=#000000; this.stylebackgroundColor=#FFFFFF; this.stylecolor=#000000">Színváltó szöveg</p> Az előzőek alapján ez érthető, a betűméret változtatása az egyetlen új dolog. Régebben a honlapokon konkrét betűméretek szerepeltek, most azonban egyre inkább viszonyméretet adunk meg (xx-small, small, large, ). Ennek az egyik oka, hogy teljesen különböző a felhasználók
monitorának felbontása és a felhasználók látása is. A másik ok az, hogy a weblapok felépítésénél a betűméret a szöveg lapon belüli fontosságát mutatja, ezért egymáshoz viszonyított méreteket adunk meg. 5. Készíts dinamikusan változó gombot, amely másképp néz ki, ha fölé visszük az egeret, ha lenyomjuk, ha felengedjük, ha elhagyjuk! A gomb megnyomása után változtassa meg a weblap címsorát a „Megnyomtad a gombot!” szövegre! Az előzőek után egyszerű a feladat: <img src="alapgomb.gif" onmouseover="this.src=celba vettelgif" onmousedown="this.src=lenyomtalgif" onmouseup="this.src=felengedtelgif" onmouseout="this.src=szabad vagyokgif" onclick="document.title=Megnyomtad a gombot!"/> Mivel a kép elsőrendű jellemzője a forrás (src), a weblapnak pedig a címsor (title), ezért a hivatkozás rövid. 6. Állíts be egy képet úgy, hogy a képernyő adott pozíciójában
jelenjen meg, legyen színes kerete, ha pedig rákattintunk, kerüljön egy másik pozícióba, változzon meg a keret színe, és a hozzá tartozó kurzor legyen eltérő a szokásostól! A feladat két részből áll, egyrészt alap stílusbeállításokra van szükség, másrészt scriptre: <img src="fej.gif" height="100" style="border-style: solid; border-width: 2px; border-color: #FFFF00 #FF00FF #800000 #FF0000; position: absolute; top: 300px; left: 300px" this.stylecursor=help; this.styleborderColor=#fa3388; this.styleleft=’600px’"/> Fontos: ahhoz, hogy a pozíciót megadhassuk, először abszolút helyzetűre kell állítani a képet (position: absolute)! Ez egyébként a scriptrészben is állítható. A kurzor típusát megint szöveggel adjuk meg, az, hogy konkrétan hogyan fog kinézni a help típusú kurzor, az operációs rendszertől függ. 7. Vegyél fel egy szöveget félkövéren, csupa kisbetűvel szedve, első sorát
beljebb húzva, a normálnál nagyobb szótávolsággal, súgóbuborékkal! Kattintásra változzon meg a mérete, a behúzás mértéke, kerüljön a képernyő egy adott pozíciójába, villogjon, legyen kiskapitális, a szavak közti távolság csökkenjen, a betűk közötti nőjön! A kód lehet például: <p title="ez a súgó" style="font-weight: bold; text-transform: lowercase; text-indent: 100px; word-spacing: 4em; " onclick="this.stylefontWeight=normal; this.stylefontSize=35px; this.styletextIndent=400px this.styleposition=absolute this.styletop=200px;"> this.styletextDecoration=blink; this.stylefontVariant=small-caps; this.styleletterSpacing=12em; this.stylewordSpacing=02em Ez a szöveg meg fog változni.</p> Érdemes észrevenni, hogy a stílusbeállításoknál használt kifejezések kötőjel nélkül, belső nagybetűvel egy az egyben használhatók a kódban! A title szövegnél a súgóbuborékot jelenti. 8. Vegyél fel egy
képet és egy szöveget, majd érd el, hogy a szövegre kattintva a kép 100 pixel szélességű legyen! Eddig hivatkoztunk a weblap (document) jellemzőire, illetve az érintett elemre (this). Most egy olyan elemre kell utalnunk, amely a szöveghez semmilyen módon nem kapcsolódik, és vele egyenrangú. A megoldás egyszerű: lássuk el névvel a képet, utána már emlegethetjük: <p><img src="fej.gif" name="kep"/></p> <p onclick=”kep.stylewidth=100px">Menj össze, te kép!</p> Fontos: az elemek neve nem lehet szám (max a 2. karaktertől kezdődően szerepelhetnek számjegyek)! 9. Vegyél fel két, egymást részben takaró képet, és oldd meg, hogy amelyikre rákattintunk, az kerüljön fölülre! A megoldáshoz a stílus z-index összetevőjét kell felhasználni. A feladat megoldható úgy is, hogy a képek z-index-ét növeli a kattintás (amelyiknek nagyobb a z-indexe, az van fölül). Ennél elegánsabb megoldás,
ha a képeket névvel látjuk el, és a kattintás mindkét kép zindexét változtatja: <img src= "fak.bmp" width= "200" style= "position: absolute; top: 50px; left: 50px" name="egyik" onclick="egyik.stylezIndex=2; masikstylezIndex=1"/> <img src= "gyerekek.jpg" width= "200" style= "position: absolute; top: 0px; left: 0px" name="masik" onclick="egyik.stylezIndex=1; masikstylezIndex=2"/> 10. Készíts „menekülő” képet, ami az ablak egy véletlenszerű helyére vándorol, ha fölé ér az egér! Ehhez a feladathoz már kell a matematikai eszköztár, amit a Math.parancs szintaktikával érhetünk el. A Math.random() parancs itt is egy >=0, <1 valós számot generál, ezt beszorozva a képernyő méretével kapjuk meg a kívánt pozíciót. A program a valós számot automatikusan konvertálja egésszé. A képpozíciót pixelben adjuk meg, ehhez a kapott
véletlenszámot meg kell toldani a „px” taggal (és ettől már szöveggé is vált). <img src= "celba vettel.gif" style= "position: absolute; top: 200px; left: 300px" onmouseover="this.styleleft=Mathrandom()*1000+px; this.styletop=Mathrandom()*600+px" onclick="alert(Ez sikerült, gratulálok!)"/> A style attribútum összetevői: Az összeállítás nem teljes, nem is használható minden jellemző minden elemnél, de bőven lehet belőle bogarászni. Az inherit beállítás majdnem minden esetben lehetséges, ez azt jelenti, hogy örökli a fölötte levő szint beállításait (pl. a bekezdések automatikusan öröklik a body beállításait) Az inheritet a táblázatban külön nem tüntettem fel. Az attribútumok nevét scriptben kötőjel helyett belső nagybetűvel írjuk, ahogy arra már utaltam az előző feladatokban. Tehát pl a font-family új alakja: fontFamily név lehetséges értékek jelentés betűtípus font-family
a betűtípus neve, ha több is megfelel, azok vesszővel elválasztva font-size xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, adott érték (ekkor a mértékegység lehet px, pt, cm, mm, em, %, stb) normal, bold, lighter, bolder, adott érték italic, normal, oblique (ez is dőlt) normal, small-caps (kiskapitális) capitalize (minden szó első betűje nagybetű), lowercase (csupa kisbetű), none, uppercase (csupa nagybetű) font-weight font-style font-variant text-transform color hexadecimális kóddal, pl. #ff54a2 vagy rgb-kóddal, betűtípus-család, ha nem a normált akarjuk használni (a ritka típusokkal érdemes vigyázni, nem biztos, hogy ismeri a böngésző betűméret a betűk vastagsága betűstílus variáció a szöveg betűinek megjelenítése (függetlenül az eredeti nagy- és kisbetűktől) betűszín text-decoration pl. rgb(20,42,200) vagy névvel, pl red – a neveket ld. külön underline (aláhúzás), overline
(föléhúzás), line-through (áthúzás), blink (villog), none (semmi) a betűk díszítése elhelyezés line-height vertical-align text-align text-indent white-space word-spacing letter-spacing position z-index width height top bottom left right visiblility display normal, adott érték (mértékegység mint a betűméretnél) baseline (a normál szöveg alapvonala, ez alá nyúlik pl. a p szára), bottom (a normál szöveg alja), middle (közép), sub (alsó index), super (felső index), text-bottom (a normál szöveg alá), texttop (a normál szöveg fölé), top (teteje), adott érték (mértékegység szokásos) center, justify, left, right adott érték normal (csak egy szóközt hagy, tördeli a sorokat), pre (minden szóköz megmarad, sortörés a forrás alapján), nowrap (csak egy szóköz marad, nincs sortörés akkor se, ha kilóg a képernyőről), pre-wrap (a szóközök megmaradnak, a sorok törnek), preline (csak egy szóköz marad, sortörés szükség szerint
és a forrás alapján) normal, adott érték (mértékegység szokásos, ez az érték hozzáadódik az alapértelmezett távolsághoz) normal, adott érték (mértékegység szokásos, ez az érték hozzáadódik az alapértelmezett távolsághoz) absolute (adott pozícióban, és ha benne van egy másik, nem static beállítású egyedben, akkor ahhoz képest), fixed (az ablak egy megadott pontján), relative (a normál helyzetéhez képest), static (a normál helyén van, korábbi beállítás felülírására jó) auto (a forrásban szereplő sorrend szerint, az utoljára megadott elem lesz legfelül), adott érték (negatív is lehet, a nagyobb látszik) auto, adott érték auto, adott érték auto, adott érték auto, adott érték auto, adott érték auto, adott érték visible (látható), hidden (nem látható, de ott van), collapse (dinamikus táblázatoknál van jelentősége, más esetben ugyanaz, mint a hidden) block (egy téglalap alakú terület, faltól-falig, előtte
és mögötte sortörés), inline (nincs új sorban, csak annyi helye van, amennyit elfoglal), inline-block (nincs új sorban, de ha többsoros, eltolja a szomszéd sorokat – mint a szöveggel egy sorba tett kép), inline-table, list-item (kis hely előtte a listajelnek), run-in (ha utána block van, ez belelóg), none (egyáltalán meg sem jelenik), table sormagasság függőleges elhelyezés igazítás első sor behúzás a szóközök kezelése (sorozatos szóköz esetén mi a teendő, enged-e sortörést) a szavak közti távolság a betűk közti távolság pozíció (ez kell, ha az alakzatot arrébb akarjuk rakni) ha két elem legalább részben ugyanott van, melyik takarja a másikat szélesség magasság teteje alja bal oldal jobb oldal az elem láthatósága (a nem látható elem átlátszó, de ott van, változtathat más elemek pozícióján) milyen jellegű területet foglaljon el az elem (táblázatként viselkedik), table-caption, table-cell, table-column,
table-columngroup, table-footer-group, tableheader-group, table-row, table-rowgroup left, none, right both (egyik oldalon sem), left, none (sehol sincs tiltás – bárhol lehet!), right float clear cursor auto (a böngésző határozza meg), crosshair (célkereszt), default (az alapértelmezett), eresize (jobbra – keletre mozdító), help, move (mozgató), n-resize (balra – nyugatra mozdító), ne-resize (jobbra fel – északkeletre mozdító), nwresize (északnyugat), pointer (mutató), progress (félig foglalt), s-resize (dél), seresize (délkelet), sw-resize (délnyugat), text (szövegkurzor), w-resize (nyugat), wait (foglalt) visible (a tartalom túlnyúlhat), auto (a böngésző állítja be, általában görgetősávval), scroll (görgetősávval érhető el a tartalom), hidden (a túlnyúló tartalmat levágja) auto (nincs vágás), rect(top, right, bottom, left) – ekkor a zárójelben a téglalap sarkait kell megadni overflow clip körbefuttatás melyik oldalán
nem engedünk más alakzatot körbefutni az elem fölött megjelenő egér típusa (a konkrét kinézet az aktuális oprendszer-beállítástól függ) ha nem fér el a tartalom a területen (pl. nem törhető szöveg egy téglalapban), mit csináljon az elem széleit levágja-e háttér background-color background-image mint a color értékei none, elérési útvonal background-repeat backgroundattachment background-position no-repeat, repeat, x-repeat, y-repeat fixed, scroll háttérszín háttérkép (ez a háttérszín fölött van) ismétlődik-e a háttérkép rögzítve van-e a háttér vízszintesen: center, left, right, adott érték függőlegesen: bottom, center, top, adott érték a háttérkép elhelyezése (a két irány szóközzel elválasztva) dashed (szaggatott vonal), dotted (pontsor), double (duplavonal), groove (vésett), hide (nincs, kivéve, ha ez ütközne a táblázat egyéb szegélyeivel), inset (bemélyesztett), outset (kiemelkedik), none (nincs),
ridge (domború), solid (folytonos vonal) a szegély stílusa thin (vékony), medium (közepes), thick (vastag), adott érték szegélyvastagság mint a többi color szegélyszín adott érték a szegélyen belüli kihagyott hely a szegélyen kívüli kihagyott hely szegély border-style (ha nem egyforma az egyes oldalakon: bordertop-style, borderleft-style, borderbottom-style, border-right-style) border-width (ha nem egyforma az egyes oldalakon, az előzőhöz hasonlóan) border-color (ld. előző eset) padding (vagy padding-top, ) margin () adott érték, auto lista list-style-type list-style-image list-style-position felsorolásnál: disc (pötty), circle (karika), square (négyzet) számozott listánál: decimal (arab számok), decimal-leading-zero (arab számok 0-val kezdve, pl. 01, 02), lower-roman (római számok kisbetűvel), upper-roman (római számok), lower-greek (görög betűk: alpha, beta, ), lower-latin (kisbetűk), upper-latin (nagybetűk), armenian
(örmény számok), georgian (gótikus számok: an, ban, gan, ), lower-alpha (kisbetűk), upper-alpha (nagybetűk), none none, adott hivatkozás inside (kicsit belelóg a szövegbe), outside (teljesen kilóg a szöveg elé) a felsorolásjel fajtája, nem biztos, hogy minden böngészőben megjelennek a különlegességek (pl. örmény) a felsorolásjel, ha saját kép a felsorolásjel helyzete a szöveghez képest táblázat table-layout empty-cells auto (a tartalomhoz szabja automatikusan a böngésző), fixed (a tartalom nem befolyásolja az oszlopok szélességeit) collapse (az oszlopok szegélyei egy vonalba esnek, cellaegyesítéssel lehet változtatni), separate (minden cellának külön állítható a szegélye) adott érték, szóközzel elválasztva a vízszintes és függőleges távolság, ha nem egyforma – csak ha a border-collapse beállítása separate! hide (nem mutatja), show (van szegély és háttér) caption-side bottom (alul), top (fölül – ez az
alapértelmezett) border-collapse border-spacing az oszlopok szélességének beállítása a táblázat szegélyei egybe tartoznak-e a cellák szegélye közötti távolság kirajzolja-e az üresen hagyott cellák szegélyét és hátterét a táblázat felirata hol van A színek elnevezése: 16 alapszín van, amelyeket minden böngésző biztosan ismerni fog, ezek láthatók az oldalsó táblázatban. Ezen kívül számos más színt is használhatunk név szerint, ezeket általában értik a böngészők, de nem érdemes rá mérget venni. A függelékben megtalálható a listájuk. Szöveg ki-be: − − − − document.write(”szöveg”); Az idézőjelbe tett szöveget kiírja a képernyőre ott, ahol a parancs megjelenik. A parancs HTMLkódot állít elő, a szöveg minden további nélkül tartalmazhat tag-eket, például: document.write("hahó<br>hahó<p align=center><font color=#ff00ff>hahó"); A zárójelben több különböző szöveg is
szerepelhet, ekkor ezeket + jellel vagy vesszővel kapcsoljuk össze, például: document.write(”A legnagyobb szám: ”+NumberMAX VALUE); alert(”szöveg”); Egy dialógusablakot nyit a megadott szöveggel, alatta egy OK gombbal. Sortörés: confirm(”szöveg”); Az előzőhöz hasonló dialógusablak, de OK (=true) és Cancel (=false) gomb is van benne. Logikai értékkel tér vissza, tehát rá lehet kérdezni, pl.: var folytassam=confirm(”Folytassam?”); prompt(”kiírandó szöveg”, ”alapértelmezett szöveg”); Dialógusablak szövegdobozzal. A szövegdobozban az alapértelmezett szöveg jelenik meg, ez lehet üres string is. A parancs visszatérési értéke a felhasználó által begépelt szöveg (és ha Cancel-t nyomott, akkor null), pl.: var nev=prompt(”Mi a neved?”, ””); Az utolsó három parancs a Window objektumhoz tartozik, tehát igazán szabályosan pl. windowalertként kellene írni Ez elhagyható, mivel a window az alapértelmezett
objektum Változókezelés: A változók nevében jellemzően betű, aláhúzás, számjegy (ez csak a 2. karaktertől kezdve) szerepel, a kis- és nagybetűk különböznek. A változókat dinamikusan használhatjuk, tetszőleges célra, a szükséges típuskonverzió a legtöbbször automatikus. Megadásuk: − implicit módon: valahol a script közepén értéket adunk neki (hiába csábító, kevésbé ajánlott, mert szinte biztosan meg fogsz róla feledkezni valahol!!!) − explicit módon: deklarációs utasításban, var-ral kezdve. Ekkor nem kell megadni a típusát, sőt helyből kezdőértéket is adhatunk neki. Az egyes változók között vessző van, a blokk végén pontosvessző. Például: var szamlalo, nev=”Sárika”, fiatal e=true; Értékadás: − simán = jellel (pl. a=7) − +=, -=, *=, /= egy betűvel is változtat (pl. a+=6 ugyanaz, mint a=a+6) Típuslekérdezés: typeof parancs, eredménye mindig egy string, mégpedig „number”, „string”,
„boolean”, „undefined” vagy „object” (ez Null és objektum esetén). Pl typeof a és typeof(a) is helyes, mindkettő eredménye „number”. Algoritmuselemek: Feltételek Eredményük true (=1) vagy false (=0). Akár szöveget vagy számot is lehet feltételként használni, ekkor üres string, 0 karakter és 0 mint szám jelenti a false-t, az összes többi true. A sima = jel értéket ad, ebből következően összehasonlításra nem alkalmas. Helyette több lehetőség is van: − == egyenlő, akár típuskonverzióval, tehát pl. ”3”==3 eredménye true − != nem egyenlő, típuskonverzióval sem. − <, >, <=, >= szokás szerint − === szigorúan egyenlő, a típusnak is meg kell egyezni, tehát pl. ”3”===3 eredménye false − !== szigorúan nem egyenlő, tehát a típusuk vagy az értékük eltér. Az egyenlőséges összehasonlításoknak csak akkor van értelmük, ha azonos objektumokra hivatkoznak, különben mindig false lesz az eredmény.
Logikai műveletek: − &&: AND − ||: OR − !: NOT Az && és az || is rövidzár kiértékelésű, tehát ha a feltétel első része már meghatározza az eredményt, a többi részt ki sem értékeli (ellentétben például a Pascallal). Elágazások Kétágú: if (feltétel) parancs; else parancs; Egy-egy ágban több parancs is szerepelhet, ekkor { (=begin) és } (=end) jelek határolják a blokkot. Többágú: switch (kifejezés) { case érték1: parancs; case érték2: parancs; default: parancs; } Kiértékeléskor megkeresi az első megfelelő értéket, és az utána következő utasításokat hajtja végre. Ha ezek után talál még egy megfelelő értéket, akkor az ahhoz tartozókat is (ellentétben a Pascallal, ahol csak az első jó ágat vette figyelembe!). Ha mindenképpen azt akarjuk, hogy csak egy ágat válasszon, akkor mindegyik ág utolsó parancsának a break;-et kell írni, ezzel kilép a szerkezetből. A default ág akkor következik, ha
egy érték sem felel meg. Ez az ág elhagyható Az értékek lehetnek számok, stringek vagy logikai értékek, a típusuknak nem feltétlenül kell egyezni. Ciklusok Számlálós: for (mettől; meddig; hogyan változik) { utasítás(ok); } A zárójelben a számláló változó nevének és megfelelő értékeinek kell szerepelni. A változót nem kell külön definiálni. A következő példa a 11-nél kisebb kettőhatványokat írja ki egymás alá: document.write("<p>"); for (szam=1; szam<11; szam=szam*2) document.write(szam, "</p><p>"); Elöltesztelős: while (feltétel) { utasítás(ok); } Az előző példa ezzel megvalósítva: document.write("<p>"); szam=1; while (szam<11) { document.write(szam, "</p><p>"); szam=szam*2; } Hátultesztelős: do { utasítás(ok); } while (feltétel) Az előzőhöz hasonló, de az utasítások egyszer mindenképpen lefutnak. A feltétel itt is a bennmaradás
feltétele (ellentétben pl. a Pascallal) For-in: Egy objektum tulajdonságait tudja kilistázni, például a kicsit később, az objektumok kezelésénél szereplő menu objektumra eresztve: for (valtozo in menu) document.write(”Név: ”, valtozo, ” – Érték: ”, menu[valtozo], <br>”); És ha a menu helyett a menu.leves-re eresztjük ugyanezt, akkor a leves tulajdonságait listázza ki Ez az egész tulajdonképpen azért működik, mert a JavaScript az objektumokat gyakorlatilag tömbként kezeli, ahol a tulajdonságok neve felel meg a sorszámnak, vagyis a menu.desszert ugyanazt jelenti, mint a menu["desszert"]. Függvények function függvénynév(paraméterek) { utasítások } Paramétereket nem kötelező megadni, zárójelet viszont kötelező kitenni. Ha szeretnénk, hogy egy függvény valamilyen értéket adjon vissza, a return parancsot kell használni. Pl. function otszor(szam) { return szam*5; } ezt később pl. egy a=otszor(10) típusú
parancsban használhatjuk (itt az a értéke 50 lesz) Ha nincs return parancs, a függvény nem ad vissza értéket, eljárásként lehet használni. A függvény belsejében létrehozott változók csak addig léteznek, amíg a függvény le nem fut. Elemi adattípusok: Number A számokat dupla lebegőpontos formában tárolja (legnagyobb érték: 1.7976931348623157*10308, legkisebb érték: 5*10-324), nem számít, hogy egész vagy tört. A nem egész értékek megjelenése: lehet benne tizedespont (nem vessző!) vagy kis vagy nagy e betű, ami után a normálalak tíz-hatványának a kitevője található. Néhány megjelenési forma: 72.7 .73 7e2 81E-8 Műveletek: − +, -, *, / a szokásos módon, két értékkel (pl. a+8) − % maradék (pl. 24 % 5 =4) − - előjel − -- (csökkentő) és ++ (növelő), egy változóval. A műveleti jel a változó előtt vagy mögött lehet, de összetett kifejezésnél nem ad azonos eredményt. Például, ha az a értéke eredetileg 7, akkor
a következő két példában 8-ra fog növekedni, de a kifejezések értéke: (a++)*3 esetén 21, (++a)3 esetén viszont 24. Number néven létezik egy előre definiált objektum is, aminek a tulajdonságait és metódusait elérhetjük, sőt a számváltozóinkra minden különösebb fájdalom nélkül használhatjuk (de ettől a számváltozóink nem igazán válnak objektumokká!). Az objektum jellemzőit lásd egy kicsit később String Ez akárhány karakterből állhat (nem karaktertömb), ’ vagy ” határolja. Ha a szövegben szeretnénk ’-t vagy ”-t vagy -t szerepeltetni, elé egy -t kell beszúrni. Pl: ’You’re beautiful’ vagy ’C:\alma’ Természetesen itt is használható az üres string: ’’ vagy ”” Két szöveg összefűzése + jellel történik, akkor is, ha az egyik szám. Pl ”alma”+” körte”= ”alma körte”, és 1978+” január”=”1978 január”. Ilyenkor a számot automatikusan szöveggé konvertálja Két szöveg szorzása is
lehetséges, ha mindkettő számnak felel meg, ekkor automatikusan számmá konvertál. Pl ”3”*”2”=6, ”3””kettő”=NaN. Így például szöveget számmá konvertálhatunk, ha megszorozzuk 1-gyel. A karakterek sorszámozása 0-val kezdődik! String néven is szerepel egy előre definiált objektum, amelynek a tulajdonságait és metódusait a Numbernél látottakhoz hasonlóan használhatjuk: − length: a szöveg hossza (pl. ha s=”Alma”, akkor slength=4) − charAt(szám): a szöveg szám-adik karaktere (pl. scharAt(2)=”m”) − indexOf(karakter): a karakter pozíciója a stringen belül (pl. sindexOf(”m”)=2) − substring(honnan, meddig): a string része (pl. ssubstring(2,4)=”lma”) − toLowerCase(): csupa kisbetű lesz (pl. stoLowerCase()=”alma”) − toUpperCase(): csupa nagybetű lesz (pl. stoUpperCase()=”ALMA”) Boolean Két értékkel rendelkezik: true és false Undefined Egyetlen értéke: undefined. Jelentése: ha egy változó nem
létezik, vagy nem kapott még kezdőértéket, akkor az értéke undefined. Null Egyetlen értéke: null, ez azt jelöli, hogy hiányzik egy érték (nem 0-t) Globális (minden egyéb objektumnál használható) metódusok szintaktika isFinite(kifejezés) isNaN(kifejezés) Number(objektum) parseFloat(szöveg) parseInt(szöveg) String(objektum) jelentés meghatározza, hogy a kifejezés egy véges, valódi számnak felel-e meg logikai értéket ad vissza, aszerint, hogy a változó értéke NaN-e (pl. az isNaN(a/0) eredménye true) az objektum értékét számmá konvertálja, pl. Number(’12’) értéke 12, Number(true) értéke 1 a szöveget lebegőpontos valós számmá alakítja a szöveget egész számmá alakítja az objektum értékét szöveggé alakítja jellemző értékek (properties) szintaktika Infinity NaN undefined jelentés a pozitív vagy negatív végtelent jelképező szám Not a Number = nem szám. Pl ha nullával osztjuk az a-t, az értéke NaN lesz A NaN
nem egyenlő semmilyen számmal, sőt (!) önmagával sem ha egy változó nem kapott értéket, ez az értéke A Number objektum metódusai szintaktika toExponential() toFixed(hány jegy) toPrecision(hossz) toString() valueOf() jelentés a számot normálalakra hozza, pl. a=12 esetén az atoExponential() értéke 1.2e+1 a számot hány jegy+1 tizedesjegyű alakra hozza a számot hossz hosszúságúra alakítja, ha a hossz kisebb a tizedespont előtti jegyek számánál, normálalak lesz, pl. a 123-ból hossz=1 esetén 1e+1, hossz=2 esetén 12, hossz=4 esetén 12.30 a számot szöveggé alakítja (pl. a=123 után az atoString() értéke „123”) a Number objektum értékét adja vissza, kerekítés nélkül jellemző értékei (properties) szintaktika MAX VALUE MIN VALUE NEGATIVE INFINITY POSITIVE INFINITY jelentés a legnagyobb ábrázolható szám (pl. a document.write(NumberMAX VALUE); parancs kiírja a képernyőre: 1.7976931348623157e+308) a legkisebb ábrázolható szám a
plusz végtelent jelentő speciális érték a mínusz végtelent jelentő speciális érték A String objektum metódusai szintaktika charAt(hányadik) charCodeAt(hányadik) jelentés a szöveg hányadik karaktere pl. ha s=”Alma”, akkor scharAt(2)=”m” a szöveg hányadik karakterének Unicode-ja, pl. scharCodeAt(2) értéke 109 concat(szöveg, a paraméterként adott szövegeket hozzáfűzi az eredetihez, a + jelhez szöveg,) hasonlóan, pl. sconcat(’ körte’) értéke ’Alma körte’ fromCharCode(szám, a számot mint Unicode értéket karakterré konvertálja, pl. a szám,) String.fromCharCode(109, 100) értéke ’md’ indexOf(karakter) a karakter első előfordulási helye a stringen belül (pl. sindexOf(”m”)=2) lastIndexOf(karakter) a karakter utolsó előfordulási helye a stringen belül match(kifejezés) replace(kifejezés, mire) search(kifejezés) slice(hány) split(elválasztó, hány rész) substr(honnan, hányat) substring(honnan, meddig)
toLowerCase() toUpperCase() valueOf() kilistázza a szövegnek azokat a részleteit, amelyekre ráillik a kifejezés – a kifejezés egy reguláris kifejezés, pl. ha b=’kameraman’, akkor a b.match(/[ma]+/g) eredménye am,ama (vagyis minden olyan részlet a szövegből, amely a-kat és/vagy m-eket tartalmaz) a kifejezés szövegrész összes előfordulását mire cseréli, pl. b.replace(/[ma]+/g, újszöveg) eredménye ’kújszövegerújszövegn’ a kifejezés első előfordulásának pozícióját adja vissza, pl. b.search(/[ma]+/g) értéke 1 lesz a szöveg első hány karakterét levágja, pl. bslice(3) eredménye ’eraman’ a szöveget hány rész darabra vágja az elválasztó karakter mentén – ha az elválasztó hiányzik, egy darabban marad a szöveg, ha a hány rész, akkor minden lehetséges részt megad, pl. bsplit(a,2) eredménye ’k,mer’ a string honnan-adik karakterétől kezdve hányat karakternyi szöveget kivesz ,pl. bsubstr(1,4) eredménye ’amer’ a
string honnan-adik karakterétől kezdve a meddig-edik karakteréig kivesz pl. bsubstring(1,4 eredménye ’ame’ csupa kisbetű lesz, pl. stoLowerCase()=”alma” csupa kisbetű lesz, pl. stoUpperCase()=”ALMA” a String objektum értékét adja vissza jellemző értékei (properties) length szintaktika jelentés a szöveg hossza (pl. ha s=”Alma”, akkor slength=4) A Math objektum metódusai szintaktika Math.abs(szám) Math.acos(szám) Math.asin(szám) Math.atan(szám) Math.atan2(x,y) jelentés a szám abszolútértéke megadja, hogy a szám minek a koszinusza (radiánban) megadja, hogy a szám minek a szinusza (radiánban) megadja, hogy a szám minek a tangense (radiánban) az (x,y) pontba mutató helyvektor x-tengellyel bezárt szögét adja vissza radiánban Math.sin(szög) a szög szinusza Math.cos(szög) a szög koszinusza Math.tan(szög) a szög tangense Math.ceil(szám) felső egészrész Math.floor(szám) alsó egészrész Math.round(szám) kerekítés
Math.max(szám1, szám2, a számok közül a legnagyobb, ha egy szám sincs a zárójelben, az eredmény NEGATIVE INFINITY ) Math.min(szám1, szám2, a számok közül a legkisebb, ha egy szám sincs a zárójelben, az eredmény POSITIVE INFINITY ) Math.exp(szám) eszám Math.log(szám) ln szám Math.pow(alap, kitevő) alapkitevő Math.sqrt(szám) a szám gyöke Math.random() véletlenszám 0 és 1 között Math.toSource() eredménye a ’Math’ string jellemző értékei (properties) szintaktika jelentés Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1 2 Math.SQRT2 az e értéke, kb. 2718 ln2, kb. 0693 ln10, kb. 2302 log 2 e, kb. 1442 log 10 e, kb. 0434 π, kb. 3142 az ½ gyöke, kb. 0707 a 2 gyöke, kb. 1414 A Date objektum A Date objektum eléréséhez létre kell hoznunk egy dátum típusú változót (objektumot), ezt a new Date() paranccsal érhetjük el. A megadott paraméterektől függően több eredmény lehet: − d=new Date() eredménye az
aktuális dátum, pl. Tue Oct 19 2010 22:04:42 GMT+0200 − d= new Date(szám), ekkor a szám ezredmásodpercet jelent, a 0 értéke Jan 01 1970 01:00:00, negatív számok is megadhatók, egy nap 86 400 000 ezredmásodperc − d=new Date(szöveg), ekkor a szöveg úgy nézzen ki, mint az első példa eredménye − d= new Date(év, hónap, nap, óra, perc, másodperc, ezredmásodperc), pl. d=new Date(1978, 1, 13, 4) eredménye Mon Feb 13 1978 04:00:00 GMT+0100 – nem muszáj mindenkit megadni metódusai szintaktika getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() parse() setDate() setDay() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() jelentés visszaadja a nap hónapon belüli sorszámát, pl. dgetDate() eredménye 13
visszaadja a nap héten belüli sorszámát, ahol 0=vasárnap, 1=hétfő, , pl. d.getDay() eredménye 1 négy jegyre adja meg az évet, pl. dgetFullYear() eredménye 1978 megadja az órát 0-23, pl. dgetHours() eredménye 4 megadja az ezredmásodpercet 0-999 megadja a perceket 0-59 megadja a hónapot 0-11, pl. dgetMonth() eredménye 1 megadja a másodperceket 0-59 megadja, hány ezredmásodperc telt el 1970. január 1 óta, pl dgetTime() eredménye 256 186 800 000 megadja, hány perc az eltérés a helyi és az egyetemes idő (GMT) között, pl. d.getTimezoneOffset() eredménye -60 az egyetemes idő szerinti értékeket adják vissza, ugyanúgy működnek, mint az előzők egy szöveggel megadott dátumot feldolgoz, és kiszámítja, hány ezredmásodperccel volt 1970. január 1 után, pl a Dateparse(Mon Feb 13 1978 04:00:00 GMT+0100) eredménye 256 186 800 000 beállítják a dátum adott értékét, pl. a dsetDate(17) parancs 13-adika helyett 17-edikét állítja be az egyetemes
idő szerinti értékeket állítják be setUTCDay() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() a dátumot szöveggé alakítja, pl. dtoDateString() eredménye Mon Feb 13 1978 toLocaleDateString() a dátumot a területi beállításnak megfelelő formátumban írja ki, pl. d.toLocaleDateString() eredménye 1978 február 13 toLocaleTimeString() a dátum idő részét írja ki a helyi beállítások szerint, pl. a d.toLocaleTimeString() eredménye 4:00:00 toLocaleString() dátum és idő helyi formátumban, pl. 1978 február 13 4:00:00 toString() a dátum szöveggé alakítva, pl. Mon Feb 13 1978 04:00:00 GMT+0100 toTimeString() a dátum idő része szövegként, pl. 04:00:00 GMT+0100 toUTCString() egyetemes idő szerint, pl. Mon, 13 Feb 1978 03:00:00 GMT UTC(év, hónap, nap, a megadott dátum az egyetemes idő szerint hány ezredmásodperccel volt óra, perc, több 1970. január 1-énél másodperc,
ezredmásodperc) valueOf() az értéket adja vissza, az eltelt ezredmásodperceket, pl. dvalueOf() eredménye 256 186 800 000 Feladatok: 11. Kérj be egy számot, és ellenőrizd, hogy szám-e! c=prompt("Adj meg egy számot"); c=Number(c); if (isNaN(c)) { document.write("ez nem szám!") } else { document.write(c); } Persze a Number(c) parancs helyett vehettük volna a szám abszolút értékét, beszorozhattuk volna 1-gyel, vagy adhattunk volna bármilyen parancsot, ami csak számmal működik. Érdekesség, hogy ha számként a –Infinity értéket adjuk meg, azt el fogja fogadni. Ha ezt el akarjuk kerülni, az isNaN(c) helyett az isFinite(c) parancs kell – ez csak véges értékeket fogad el. 12. Kérj be egy számot, és ellenőrizd, hogy adott határok közötti szám-e! do { jo=false; c=prompt("Adj meg egy számot"); c=Number(c); if (isNaN(c)) { alert("ez nem szám!"); } else { if ((c<10) || (c>100)) { alert("Nem jó az
értéke!"); } else { document.write(c); } jo=true; } } while (!jo) 13. Kérd be egy ember születési idejét, majd állapítsd meg, hogy hány napos! function szambeker(also, felso, szoveg) { do { jo=false; c=prompt(szoveg); c=Number(c); if (isNaN(c)) { alert("ez nem szám!"); } else { if ((c<also) || (c>felso)) { alert("Nem jó az értéke!"); } else { jo=true; } } } while (!jo); return c; } ev=szambeker(1900, 2010, "Add meg az évszámot!"); honap=szambeker(1, 12, "Add meg a hónap sorszámát!"); nap=szambeker(1, 31, "Add meg a napot!"); most= new Date(); kor=(most.getFullYear()-ev)*365+(most.getMonth()-honap)*31+(most.getDate()nap); alert(kor); Mivel többször is ugyanazt a műveletet kell végrehajtani, célszerű definiálni egy függvényt a feladatra. Az aktuális dátumot a Date objektum felhasználásával lehet feldolgozni. 14. Kérj be egy számot, majd váltsd át kettes, illetve tizenhatos
számrendszerbe! 15. Kérj be egy számot, majd váltsd át tetszőleges alapú számrendszerbe! szam=prompt("Adj meg egy számot!"); alap=prompt("Add meg a kívánt alapot!"); ujszam=""; do { maradek=szam % alap; hanyados=Math.floor(szam / alap); ujszam="("+maradek+")"+ujszam; szam=hanyados; } while (hanyados>0) alert(ujszam); Mivel itt nincs egészosztás (eleve egész típus sincs), ezért a lefele kerekítést érdemes használni. A zárójelek azért szükségesek, hogy tíznél nagyobb alapokkal is gond nélkül lehessen dolgozni. 16. Kérj be egy hexa színkódot, majd írd ki a kódnak megfelelő színben! do { 1)) hexa=false; kod=prompt("Add meg a hexa kódot!"); if ((kod.length>6) || (kodsearch(/[g-z]+/)>-1) || (kodsearch(/[G-Z]+/)>{ } else { } alert("nem hexa"); hexa=true; } while (!hexa); while (kod.length<6) { kod=kod+0; } document.write("<font color=#", kod,
">", kod); A kod.search parancs paramétere egy reguláris kifejezés, a paraméterezésnek pl a http://w3schools.com/jsref/jsref obj regexpasp vagy a http://progkorinfeltehu/regkifhtm oldalon lehet utána nézni. Itt most a /[g-z]+/ azt jelenti, hogy legalább egyet tartalmaz a g és z közötti betűk közül 17. Kérd be egy ember nevét és születési idejét, állapítsd meg, hogy hány órás, az óráinak a számát váltsd át tizenhatos számrendszerbe, majd az így kapott hexa kódnak megfelelő színnel írd ki a nevét! 18. A felhasználó adja meg egy derékszögű háromszög két befogójának a méretét, a program számítsa ki az átfogót, a háromszög területét és a szögeit! 19. Kérd be egy másodfokú egyenlet együtthatóit, majd számítsd ki a megoldásokat, arról is tájékoztasd a felhasználót, ha nincs megoldás, vagy ha csak egy van! 20. Vegyél fel egy képet, amelyre ha rákattintunk, egy ablakban megjelenik a mérete és a
pozíciója! 21. Vegyél fel egy képet, amely mindig 100 pixellel jobbra megy, ha rákattintunk! Ehhez a feladathoz már változókat kell használni, mivel a kép bal sarkának a helyét nem egyszerűen számmal, hanem szöveggel adjuk meg (this.styleleft=’100px’) A megoldás nem túl bonyolult, először le kell vágni a ’px’ részt, utána úgy változtatjuk a számot, ahogy akarjuk, majd megint hozzá kell passzítani a ’px’ tagot: <img src="fej.gif" onclick="this.styleposition=absolute; a=this.styleleft; phelye=a.indexOf(p); b=a.substring(0,phelye); b=b*1+100; a=b+px; this.styleleft=a "/> Talán feltűnt, hogy a b értékét megszoroztuk 1-gyel a növelés előtt. Erre azért van szükség, mert a b típusa alapvetően szöveg, és a +100 parancs a 100-at szövegként fűzi utána. A 100100px pedig nem könnyen ábrázolható Az 1-gyel való szorzás megoldja a kérdést, mert az számmá változtatja a b-t. 22. Vegyél fel egy képet, amely
minden kattintásra véletlenszerűen lép bármelyik irányba +-100 pixellel! 23. Érd el, hogy egy kép folyton kövesse az egeret! Ez már egy összetett függvényrendszer lesz: function init(){ if(window.addEventListener){ document.bodyaddEventListener(mousemove,curPos,false) } else { if(window.attachEvent){ document.bodyattachEvent(onmousemove,curPos); } } obj=document.getElementById(info); } function curPos(event){ wpozicio=event.clientX + (documentdocumentElementscrollLeft ? document.documentElementscrollLeft : document.bodyscrollLeft) hpozicio=event.clientY + (documentdocumentElementscrollTop ? document.documentElementscrollTop : document.bodyscrollTop); document.images[0]styleposition=absolute; document.images[0]styleleft=wpozicio+10+px; document.images[0]styletop=hpozicio+20+px; } if(window.addEventListener){ window.addEventListener(load,init,false); } else { if(window.attachEvent){ window.attachEvent(onload,init); } } 24. Vegyél fel egy képet, amelynek a szegélye
dupla olyan vastag lesz, ha rákattintunk! 25. Olvass be egy szöveget, majd írasd ki csupa nagybetűvel! 26. Olvass be egy hexadecimális színkódot, majd a neki megfelelő színben írd ki! 27. Vegyél fel egy szöveget, amire ha rákattintunk, a felhasználó megadhatja a betűk és a háttér színét valamint a betűméretet, majd a szöveg változzon is meg eszerint! 28. Addig kérj be számokat, amíg az összegük el nem ér egy előzetes küszöbértéket! 29. Kérj be 3 számot, és állapítsd meg, hogy lehet-e belőlük háromszöget készíteni! 30. Kérd be egy általános háromszög három oldalát, majd számold ki a kerületét, a területét és a szögeit! 31. Szúrj be egy képet a weblapra, mondjuk az elején már megismert fejet, és oldd meg, hogy ha rákattintunk, nőjön meg a mérete 10%-kal, de csak akkor, ha így még nem haladja meg a 800 képpontos szélességet. Ha meghaladná, csökkenjen 10%-kal, egészen 100 képpontig, mert akkor megint kezdjen
nőni. 32. Szúrj be egy képet, amit az egérrel üldözhetünk: ha fölé visszük az egeret, arrébb ugrik, de sose nyúlik túl az ablakon. Ha mégis sikerül rákattintani, gratulál 33. Készíts matek-tesztet: egy ablakban írj ki két véletlenszámot, köztük egy műveleti jellel, majd ellenőrizd le a felhasználó eredményét! 34. Az előző matektesztet több nehézségi szinttel oldd meg (könnyű: max 10 számok, közepes: max 100, nehéz: max 1000). 35. Az előző matekteszt adott számú kérdést tegyen fel, majd közölje az összesített százalékos eredményt 36. Olvass be egy számot hibaellenőrzéssel (szám-e, és ha igen, megadott korlátok közé esik-e) 37. Olvass be n db számot, majd ezeket egymás mellé írd ki! 38. Olvass be n db számot, majd ezeket akkora méretben írd ki, amekkorák a számok! 39. Olvass be egy szöveget, és számold meg, hányszor szerepel benne egy adott betű! 40. Olvass be egy szöveget, és tüntesd el belőle a
szóközöket! 41. Olvass be egy szöveget, és tüntesd el belőle a felesleges szóközöket! 42. Olvass be egy szöveget, és az első karakterétől függően csupa kis- vagy csupa nagybetűvel írd ki! 43. Olvass be egy szöveget, majd írasd ki úgy, hogy minden szó nagybetűvel kezdődik! 44. Olvass be egy szöveget, majd írasd ki úgy, hogy minden pont után nagybetűvel kezdődjön a szöveg! 45. Olvass be egy szöveget, és mondd meg, melyik volt a leghosszabb szó! 46. Olvass be egy szöveget és egy szövegrészletet, majd a szöveget úgy írd ki, hogy a szövegrészlet mindenhol csupa nagybetűvel, félkövéren legyen szedve! 47. Olvass be egy szöveget, majd írasd ki úgy, hogy a leghosszabb szó (ha több van, mindegyik) csupa nagybetűvel szerepeljen! 48. Kérj be számokkal egy dátumot, majd írd ki hagyományosan, a hónap nevét szöveggel megjelenítve 49. Értelmezz egy egyjegyű számokat tartalmazó műveletsort, amit a felhasználó gépelhet be 50. Az
előző feladatban szereplő műveletsor tartalmazhat zárójeleket is Tömbkezelés A JavaScriptben a tömbök dinamikusak, a hosszuk akár futás közben is változhat, elemeik lehetnek elemi adatok, objektumok vagy akár más tömbök is, vegyesen. Tömb létrehozása: − var hetek= new Array(52); - csak az elemszámot adjuk meg, elemek majd később. Ilyenkor, amikor egyetlen paramétert adunk meg, az automatikusan a tömb elemszáma lesz, nem az egyetlen eleme. var akarmi=new Array (1, "Józsika", "bambuszrügy", false); vagy var akarmi=new Array [1, "Józsika", "bambuszrügy", false]; - mindkét esetben egy négyelemű tömböt hoztunk létre, teljesen különböző típusú elemekkel. Tömbtulajdonságok: − A tömbelemek indexelése 0-val kezdődik, az indexet szögletes zárójelbe írva érhetjük el az elemeket, pl. akarmi[2]="bambuszrügy" − A tömb elemszáma a length tulajdonság, pl. akarmilength=4 Ezt át is
állíthatjuk, pl az akarmi.length=10; parancs után a használható legnagyobb index 9 lesz Bár a tömb hosszát átállítottuk, a memóriában nem foglal több helyet, mert csak a már megadott elemek számítanak. − join(): a tömbelemeket stringgé alakítja és egyetlen szöveggé fűzi össze. Ha nem adunk meg paramétert, akkor vesszővel választja el az elemeket (var vesszos= akarmi.join(); eredménye: vesszos="1, Józsika, bambuszrügy, false"), ha adunk, akkor azzal (var kotojeles=akarmi.join(" – ") eredménye: kotojeles="1 – Józsika – bambuszrügy – false") − toString(): ugyanaz, mint a paraméter nélküli join − reverse(): megfordítja az elemek sorrendjét − sort(): minden elemet stringgé alakít, és ábécé szerint rendezi őket − concat(új elemek): a paraméterként megadott elemeket hozzáfűzi a tömb végéhez pl. akarmi=akarmi.concat(5, true, "hahó"); − slice(honnan, meddig): a tömb résztömbjét
veszi ki, a második paraméterhez tartozó elem már nem fog az új tömbben szerepelni. Pl: kicsi=akarmislice(2,4); eredménye kicsi=("bambuszrügy", false). Ha csak egy paramétert adunk, akkor onnan az összes elem az új tömbbe kerül. − pop(): eltávolítja a tömb utolsó elemét, pl. utolso=akarmipop(); eredményeként az utolso-ba kerül a "hahó", a tömb eggyel rövidebb lesz − push(új elem): az új elemet a tömb végéhez illeszti − shift(): eltávolítja a tömb első elemét − unshift(új elem): új elemet szúr a tömb elejére Többdimenziós tömböket egydimenziós tömbök tömbjeként adhatunk meg: − a new parancs többszöri használatával, pl. var nagytomb= new Array(5); for (szam=0; szam<nagytomb.length; szam++) nagytomb[szam]=new Array(6); egy 5*6-os, elemek nélküli kétdimenziós tömböt definiál − az elemek felsorolásával, pl. var kistomb= [ [1, 2, 5], [3, 9, 2], ]; egy 3*2-es, elemekkel feltöltött tömböt ad
meg. Egy példa: szorzótábla elemeit tárolja az előbb megadott nagytomb-ben, és ki is íratja: for (sor=0; sor<nagytomb.length; sor++) { for (oszlop=0; oszlop<nagytomb[sor].length; oszlop++) nagytomb[sor][oszlop]=sor*oszlop; } for (sor=0; sor<nagytomb.length; sor++) { for (oszlop=0; oszlop<nagytomb[sor].length; oszlop++) document.write(nagytomb[sor][oszlop]=sor*oszlop, " "); document.write("<br>"); } − Objektumok létrehozása és kezelése Magányos objektum Amikor egy új objektumot hozunk létre, a new parancsot használjuk. Ez alapértelmezés szerint egy teljesen üres objektumot hoz létre, típus és tulajdonságok nélkül. Pl: var menu=new Object(); Az új objektum tulajdonságainak a száma dinamikus, bármikor bővíthető és csökkenthető. Új tulajdonságot úgy hozunk létre, hogy értéket adunk neki, pl.: menu.nev=”hétfő”; menu.leves=”húsleves”; menu.foetel=”cordon bleu”; menu.desszert=”somlói
galuska”; A tulajdonságok tulajdonságát is megadhatjuk, pl. menufoetelhus=”disznó”; És az objektum egyik tulajdonsága minden további nélkül lehet egy újabb objektum, amit az eddigiekhez hasonlóan kezelünk, pl. menu.leves = new Object(); menu.levesvega e = false; menu.levesar=500; A leves és a főétel között alapvető különbség lesz: a leves objektummá vált, a tulajdonságait a for-in ciklussal listázhatjuk, a főétel viszont nem, a for-in ciklus nem fogja kiadni a disznót! Egy objektumtulajdonság törlése: delete menu.desszert; Objektum mint szervezési eszköz FÜGGELÉK A színek fantázianevei Ahogy azt már az elején írtam, rengeteg színt használhatunk név szerint, ezeket általában értik a böngészők, de nem érdemes rá mérget venni. Először egy visszafogottabb lista: Majd egy kevésbé visszafogott:
When reading, most of us just let a story wash over us, getting lost in the world of the book rather than paying attention to the individual elements of the plot or writing. However, in English class, our teachers ask us to look at the mechanics of the writing.
