Szerkesztővita:KeFe/Tesztlapok/A HTML és a JavaScript

A HTML és a JavaScript

A honlapkészítés igen fontos részét jelentik a felhasználó reakcióit figyelő utasítások. Ezeket általában különféle, úgynevezett script nyelvek ismeretével és használatával kezelhetjük. Erre szolgál a JavaScript programozási nyelv is. Mint az előző mondatból már kiderült, a JavaScript egy script nyelv, amely leegyszerűsítve azt jelenti, hogy egy másik, önálló programozás egyszerűsített mása. Esetünkben a "szülőnyelv" a Sun Microsystems és a Netscape Communication Corporation által kifejlesztett Java. Ez egy külső értelmezőt használ a futásához, ezzel szemben a JavaScriptet a gépünkre telepített böngésző képes futtatni. Így a JavaScript parancsnyelvnek is nevezhető. Legelőször a Netscape 2.0 támogatta, majd a HotJava és a 3.0-s verziójától kezdve a Microsoft Internet Explorer is. A különböző verziók ismerői:

Böngésző neve Verzió Támogatott JavaScript verzió 1.0 1.1 1.2 1.3 Netscape Navigator 1.x N N N N 2.x I N N N 3.x I I N N 4.0 - 4.05 I I I N 4.06 - 4.7x I I I I 6.x I I I I Microsoft Internet Explorer 3.x I N N N 4.x I I I/R N 5 I I I N/R 6 I I I I Opera 3.x I I/R N N StarOffice 4 I I N N 5 I I I N I = igen N = nem R = részben

Ennek a nyelvnek az ismerete elsősorban arra tesz képessé bennünket, hogy oldalainkat interaktívvá tegyük, továbbá kezelni tudjuk a felhasználó különféle reakcióit. Ehhez a nyelv eseménykezelő függvényeit használhatjuk fel. Ezek ismertetése külön figyelmet igényel, így itt a HTML szempontjából különösen fontos utasítások bemutatására kell szorítkoznunk. Bővebben a NetOktató - avagy az Internet programozása című ingyenes internetes oktatócsomagban olvashatunk a nyelv használatáról. A továbbiakban majd láthatjuk azt is, hogy milyen hasznos is egy szövegformázó nyelv mellet egy objektumorientált nyelv alkalmazása. JavaScript utasításblokkunkat jól el kell különítenünk oldalaink HTML részétől. Erre nemcsak külön HTML kód szolgál - javasolt az utasításokat formailag és helyileg is elválasztani a hipertext elemektől. A nyelv HTML parancsszava a <SCRIPT> és </SCRIPT> tag, ahol jelezni kell a használt scriptnyelv típusát is; esetünkben: <SCRIPT LANGUAGE="JavaScript">. A JavaScript szó után, az idézőjelen belül megadható a nyelv verziója is, jelenleg az 1.0, az 1.1, az 1.2 és az 1.3 változatok alkalmazhatóak. Ha nem adjuk meg a verziószámot, akkor a böngészőnk által támogatott legújabb változatnak megfelelően történik az értelmezés. Mivel még mindig elég sok nem JavaScript kompatíbilis böngésző van használatban az internetezők körében, így az ebből következő problémák kiküszöbölésére JavaScript utasításainkat javasolt még külön a <SCRIPT> és </SCRIPT> pároson belül megjegyzés tagek() közé is zárni. (Lásd a példát is!) Szintúgy hasznos a <NOSCRIPT> parancs, melynek lezárója a </NOSCRIPT>. Ezekkel felkészíthetjük oldalainkat a nem JavaScript kompatíbilis böngészőkre (hasonló hatásmechanizmussal, mint azt a <NOFRAMES> utasításnál már láttuk). Legtöbbször JavaScript utasításblokkunkat a <HEAD> tagen belül szoktuk elhelyezni, még a <BODY> parancs előtt, ettől azonban mint azt látni fogjuk, el lehet térni. Fontos lehet ugyanis, hogy az oldal törzsében (BODY) hajtódjon végre egy utasításcsomag. Ilyen esetben a JavaScript kód közvetlenül a HTML részbe illeszthető. Ekkor is szükségesek a <SCRIPT>...</SCRIPT> utasításpárok. Ezek között aztán megadhatjuk a szükséges parancsokat (pl. JavaScript generálta szöveg beírása a HTML dokumentumba). A fentiek alapján tehát egy egyszerű szöveg kiíratása a következőképpen végeztethető el:

  <SCRIPT LANGUAGE="JavaScript">
  </SCRIPT>

A fenti példában a document.write() és a document.writeln() függvényeket használtuk fel adatok kiíratásához. A forrás második sora (var koszonto ...) egy változó deklarálását és alapérték megadását mutatja. Látható, hogy nem adtunk meg változó típust, azt ugyanis a JavaScript automatikusan megválasztja a változó értékének függvényében. Így egy korábbi szöveges változó minden további nélkül lehet ugyanazon programban egész vagy logikai (vagy lebegőpontos szám, tömb, objektum stb.) típus. A JavaScript szigorú objektumhierarchiára épül, a függvényeket, beépített változókat ezek ismeretében használhatjuk. Státusz sor kezelése A JavaScriptben több alternatíva is kínálkozik a böngészőablak állapotsorának (status - általában pl. a linkek URL-jét itt jelzi a böngésző) kezelésére. Szerkeszthetjük tartalmát, időzíthetjük változásait, figyeltethetjük értékeit.

Magyarázószöveg megjelenítése Általános szokás a hivatkozásoknál a linkelt fájlok elérési útjának elrejtése. Tudniillik a böngésző alapértelmezésben arra használja az állapotsorát, hogy ezen információkat megjelenítse. A JavaScript segítségével ez könnyedén megváltoztatható, méghozzá a window.status = "Státusz sor szövege"; metódussal. Vegyük észre az utasítás végén a ; jelet, mely minden C típusú nyelvnél (Java, JavaScript, Perl, PHP stb.) megszokott és kötelező sorlezáró. A JavaScript utasításaink végrehajtását általában valamely böngészőesemény bekövetkezéséhez kötjük. Linkek esetében ez lehet a már tárgyalt onMouseOver, onMouseOut, és az onClick utasítás által kezelt "egér az objektum felett", "egér elhagyta az objektumot", "kattintás az objektumon" esemény. Lássunk erre magyarázatképpen egy példát!

  <A HREF="oldal.html" TARGET="keret1" onMouseOver="fuggveny1()" oMouseOut="fuggveny2()" onClick="fuggveny3()">Link</A>

A fenti sorban a "fuggvenyX()" helyére bármilyen JavaScript utasítás írható, akár a státusz sort is megváltoztathatjuk így: window.status="Üzenet";return true". Ebben a parancsban a return true; részre mindenképpen szükség van, erről a NetOktató - avagy az Internet programozása címen olvashatunk bővebben. Térjünk vissza a függvényhívás szabályaihoz! A fuggveny() alakban történő hívás is jól mutatja, hogy szükség van egy ( és egy ) jelre az eljárás neve után. Ha a függvényünk rendelkezik paraméterekkel, akkor itt kell azok aktuális értékeit megadnunk, ugyanakkor a függvény elkészítésekor ugyanitt kell azok nevét feltüntetni. Így igen zavarosan hangzik, de bővebb magyarázatra ezen HTML ismertető keretein belül nem futja. Mégis magyarázatként álljon itt a következő példa:

  <SCRIPT LANGUAGE="JavaScript">
  </SCRIPT>
  [HTML rész]

  <A HREF="oldal.html" onMouseOver="fuggveny1('Egér a link fölött!',0)" onMouseOut="fuggveny2('Helló világ!')" onClick="fuggveny1('Nem fog megjelenni',2)"> Link</A>

Mindenképpen próbáljuk ki a fent említett példát, mert úgy könnyebb megérteni. Figyeljük meg a JavaScript feltételkezelését a fuggveny1() utasításblokkjában! A feltétel itt egy változó adott értékének vizsgálata; a == jel értékösszehasonlítást jelent: "ha a két oldal kölcsönösen egyenlő" (vö. var i = 13; értékadással!). Láthatjuk a példában azt is, hogy függvényeink utasításait a { és a } jelek közé kell zárnunk. A fuggveny2(uzenet); sor függvényhívást jelent (adott paraméterrel, mely itt uzenet értéke), hatására végrehajtódik a fuggveny2(parameter3){...} utasításblokk. Benyomódó gomb, képváltás Sok honlapon találkozhatunk az úgynevezett "benyomódó gomb" effektussal. Ezt a programozók a JavaScript képváltó képességének kihasználásával valósítják meg. Maga a kód igen egyszerű, mindössze két dolgot kell megadnunk: a lecserélendő képet és azt, amire le szeretnénk cserélni. Egy példán keresztül mindjárt érthetőbb:

  <SCRIPT LANGUAGE="JavaScript">
  </SCRIPT>

A fenti kód mindjárt két példával is szolgál. Az első hivatkozásnál onMouseOver eseményre a kép a masik_kep fájlra cserélődik, onMouseOut eseménynél mindez fordítva játszódik le. Figyeljük meg, hogy a HTML forrásban a kép rendelkezik egy azonosító névvel (kep_neve)! Ennél egyszerűbb, gyorsabb a kepcsere3() függvény. Ez leginkább sok kép váltogatása (például menü) esetén lehet szembetűnő. Itt az első paraméter a kép azonosítója, a második egy feltételkezeléssel végül a megfelelő egéresemény követésére használódik. A két példában jól látható, hogy kétféleképpen is azonosíthatjuk egy oldal képeit: saját nevük, illetve számazonosítójuk alapján. Ez utóbbi azonosítót a böngésző adja, mégpedig úgy, hogy nullától kezdődően megszámozza a képeket a forráskódban elfoglalt helyük alapján, fentről lefelé. Vegyük észre, hogy a fenti példában a kep_neve névazonosítójú objektum a 0. számú, ezért kell a másodikra 1, a harmadikra 2 számokkal hivatkoznunk. Érdemes a képváltásra épülő menüknél alkalmazni a fentebb megismert magyarázószöveg használatot, mivel előfordulhat, hogy a menüt alkotó fájlok valami miatt nem megjeleníthetőek - lehetetlenné téve ezzel az eligazodást. Ilyenkor nélkülözhetetlen a magyarázószöveg.

Példánkban egy link létrehozására volt szükségünk ahhoz, hogy a képhez kapcsolódó egéreseményeket kezelni tudjuk. A HTML régebbi verziói ugyanis még nem támogatják az <IMG> parancs opciójaként az egéresemény-kezelő JavaScript utasításokat. Ezzel szemben a HTML 4.0 már képes a következő sor megfelelő értelmezésére:

  <IMG SRC="egyik_kep" onMouseOver="kepcsere3(3,1)" onMouseOut="kepcsere3(3,0)">

Űrlapok és mezőik kezelése

Nagyon fontos részéhez érkeztünk a JavaScript gyorstalpaló ismertetésének. A következőkben megismerkedhetünk azzal, hogyan is lehet egy űrlap eleminek tartalmát, tulajdonságait, illetve az adatküldést manipulálni, kezelni JavaScript segítségével. Minden HTML formnak megadhatunk egy azonosító nevet (<FORM NAME="azonosito" ACTION="kuldes()">). Az előző kód például szolgál arra is, hogyan adható meg a küldéskor végrehajtandó JavaScript parancssor. A küldés JavaScript parancsa egyébként a submit() beépített függvény. Ezt a window.document.azonosito/forms[0].submit() sorral hívhatjuk. Itt is kétféle módon hivatkozhatunk a küldendő adatokat tartalmazó űrlapra. A szögletes zárójelben lévő érték ez esetben is a forrásban fentről lefelé számolt, 0-ról indult sorszámot jelenti. A form törlését (alapállapotra visszaállítását) a hasonlóképpen hívható reset() függvénnyel végezhetjük. Tanulmányozzuk a következő HTML kódot!

  <INPUT NAME="adat1" TYPE="TEXT" VALUE="Adat 1" SIZE="10">
  <INPUT NAME="gomb1" TYPE="BUTTON" VALUE="Küldés" onClick="window.document.forms[0].submit()">
  <INPUT NAME="jelolonegyzet1" TYPE="CHECKBOX">

  <SELECT NAME="valasztomenu" onChange="JavaScript utasítások">
    <OPTION VALUE="val1">Adat 1
    <OPTION VALUE="val2">Adat 2
    <OPTION VALUE="val3">Adat 3
  </SELECT>

A fenti adatokatra a következőképpen hivatkozhatunk: window.document.forms[0].azonosító.value. Itt az azonosító lehet adat1, gomb1, jelolonegyzet1, illetve valasztomenu. A kód a mezők aktuális értékét adja vissza (value = érték). A választómenü esetében - attól függően, hogy melyik elemet jelöljük meg - val1, val2, val3 lehet a visszakapott érték.

A fenti ismertető csak a HTML-hez tényleg nélkülözhetetlen JavaScript utasításokat írja le, a nyelv ennél sokszorta többre képes. Dinamikusan kezelhetjük vele oldalaink hátterét, link- és betűszínét, keretrendszereit. Lekérhetjük a pontos időt, a dátumot stb. Ezen és a további részek ismertetésére e rövid oktatóanyag kereteiből nem futja. Utoljára azonban említsük meg még a JavaScript időzítő függvényét! Ezt a window.setTimeout("fuggveny()",időkorlát) alakban hívhatjuk, és window.clearTimeout("fuggveny()") alakban szüntethetjük meg. Arra ad lehetőséget ez a parancs, hogy a paraméterként megjelöült függvényt az ezredmásodpercekben számított időkorlátnak megfelelően újrahívjuk. Remélem sikerült meggyőződni arról, hogy érdemes a JavaScripttel mélyebben is foglalkozni.

StyleSheet használata

Az Internet manapság egyre inkább arrafelé hajlik, hogy minél nagyobb hangsúlyt fektessen az úgynevezett Cascading StyleSheet-ek használatára. Ezek szép magyar neve Lépcsőzetes stílusdefiníciók. Ha megpróbáljuk értelmezni e két szót, hamar kiderül, mire is jók a StyleSheetek. Ezek az előre definiált formázások globálissá tehetik egyes formátumainkat, és hihetetlenül leegyszerűsítik, meggyorsítják munkánkat, sőt, megszépítik weblapjainkat! A nyelv szintaktikája igen egyszerű, már amennyiben nem nagyképűség külön nyelvnek nevezni (annak ellenére, hogy megérdemli). A HTML-hez igen szorosan kötődik, tulajdonképpen függ tőle. Adott HTML utasítások formázását végeztethetjük el vele az egész dokumentumban, sőt külön fájlba rakva a formázási utasításokat több dokumentumba is betölthetjük.

A StyleSheetek szöveges azonosítókra (pointerekre) épülnek, ezek HTML forrásbeli helye mutatja meg a formázandó részt. Bámulatos lehetőségeket nyújt, kedvünkre csinosítgathatjuk segítségével az eddig elérhetetlen HTML form elemeket (gombokat, jelölőnégyzeteket, adatmezőket), a böngésző görgetősávját, az aktuális egérmutatót, és akkor még csak a legizgalmasabbakat említettük. Természetesen megoldható egy helyen a linkek, táblázatok, bekezdések formázása, ahol lehet, egéreseményhez kötve. A Cascading StyleSheeteknek (röviden CSS) kiemelkedő szerepük van az egyre inkább népszerűsödő DHTML "nyelvben" a JavaScript 1.2-s és 1.3-as verziójával együtt. (A DHTML - Dynamic HTML sem nevezhető külön nyelvnek; nagyon leegyszerűsítve a LAYER és DIV használó honlapok összefoglaló neve. Bővebben a Néhány szó a DHTML-ről című részben!)

Egyetlen hátránya van csupán ezeknek a rendkívüli lehetőségeket rejtő StyleSheeteknek: csak kevés böngésző támogatja (a Microsoft Internet Explorer a 4.0-tól és a Netscape Navigator részben a 4.5-ös verzióktól). Mégis, mint azt majd látni fogjuk, mindenképpen érdemes használatunkba venni. Honlapunk CSS parancsait többféleképpen is elhelyezhetjük. Először is minden HTML elem rendelkezik a STYLE opcióval, mely után egy egyenlőségjellel kezdve megadhatók a formázó utasítások, pl:

  <A HREF="oldal.html" TARGET="keret2" onClick="fuggveny2()" STYLE="StyleSheet utasítások">

Emellett lehetséges a JavaScripthez hasonlatos HEAD tagben történő megadás, továbbá a külön fájlban való elhelyezés is. Az előbbi esetben a következő szintaxist kövessük:

  <STYLE TYPE="text/css">
    StyleSheet utasítások
  </STYLE>

Ha a CSS parancsokat külön fájlban szeretnénk elhelyezni (a legtöbb esetben ez a célravezetőbb), akkor a következőképpen járjunk el:

  <LINK REL="StyleSheet" HREF="css_fajl.css" TYPE="text/css">

Ezen módok valamelyikével sikeresen CSS utasítások köthetők HTML dokumentumunkhoz. A két utóbbi esetben azonban böngészőnk még nem tudja, hogy a megadott formázási utasításokat az oldal mely részén is végezze el. Az első esetben nyilvánvaló, hiszen ott az adott HTML parancsba illesztettük StyleSheet-ünket. A második és harmadik esetben szöveges mutatókra (pointerekre) lesz szükségünk. Ezeket meg kell adnunk a HTML tagen belül, így oldva meg a problémát. A szintaxis:

  <A HREF="oldal.html" TARGET="keret2" onClick="fuggveny2()" CLASS="StyleSheet mutató">

Hasonlítsuk össze a fenti sort a korábbi példával! Attól ez abban különbözik, hogy itt a CLASS (=osztály) szót használtuk. Ezen utasítás alkalmas arra, hogy megadja a CSS felhasználási helyét: itt tehát csak egy azonosító (mutató, pointer) szerepel, és nem pedig StyleSheet parancsok. De hogyan is építhető fel egy StyleSheet utasításcsoport? Kimondottan egyszerű, a hangsúly itt is azokon a bizonyos azonosítókon van (a következő példákban helykímélés végett közvetlenül egymás alatt adjuk meg a CSS és HTML parancsokat):

  <STYLE TYPE="text/css">
    .MUTATO
      {StyleSheet utasítások}

    B
      {StyleSheet utasítások}
  </STYLE>

  <A HREF="oldal.html" TARGET="keret2" onClick="fuggveny2()" CLASS="MUTATO">
  Formázott félkövér link</A>

Itt mindjárt két példát is láthattunk. Figyeljük meg, hogy a fenti magyarázatok alapján most duplán formáztunk egy szövegrészt! A Formázott félkövér link részre ugyanis egyaránt hat a link parancsában megadott, valamint a félkövér formátumhoz társított StyleSheet is. Ezt a duplázást csak a példa kedvéért követtük el, hiszen sokkal egyszerűbb a félkövér betű () utasítást a .MUTATO osztályán (CLASS) elvégezni. (Az említetteken felül létezik még néhány CSS megadási mód, ugyanakkor ezek a leggyakrabban használatosak.) Mielőtt rátérnénk a StyleSheet parancsainak tényleges bemutatására, meg kell még ismerkednünk a következőkkel:

1. A CSS színmegadási módja: angol név, hexadecimális színkód, RGB kód 2. Hosszúság megadása: pixel (képpont), hüvelyk, cm, mm, pont (1/72 hüvelyk), pica (12 pont) 3. Értékadás egy utasításnak: utasítás_neve: adott_érték; másik_utasítás: adott_érték

Cascading StyleSheet utasítások Amint fentebb már láttuk, a megadott pointer alá tartozó parancsokat egy tömbbe fogva ({ és } jelekkel határolva) kell megadnunk. Az egyes utasítás értékek az utasítások nevétől kettősponttal elválasztva kerülnek beállításra. Az egyes parancsok közé pontosvesszőt (;) kell tenni (pl. font-color: red; font-size: 8px). A betűtípus formázására a font-family: betu1, betu2, betu3... parancs képes, ahol egymás után, vesszővel elválasztva adhatjuk meg azokat a telepített betűtípusokat, melyeket használni szeretnénk honlapunkon. Az így összeállított listában balról jobbra próbálja megtalálni az adott típust a böngésző a felhasználó gépén; ha nem boldogul, a következőre ugrik. (Nem kötelező több megadása, de mindenképpen ajánlott.) A betű méretét a font-size: méretmértékegység formában adhatjuk meg. Ha a mértékegység képpont, akkor a px, pont esetén a pt, pica esetén a pc, valamint a cm, a mm és az in (inch = hüvelyk) rövidítések használatosak. Ügyeljünk rá, hogy az érték és a mértékegység közé ne tegyünk szóközt! A betű színét a color: szín paranccsal, vastagságát a font-weight: vastagság, stílusát (például dőlt) a font-style: dőlt stílus, az aláhúzást pedig a text-decoration parancsokkal változtassuk meg. Áttekintésképpen összefoglalva:

font-family: betűtípus neve (pl. Times New Roman, Arial, Verdana stb.) font-size: érték + mértékegység, %, xx-small, x-small, small, medium, large, x-large, xx-large - abszolút és relatív méret font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 - félkövér font-style: normal, italic, oblique - dőlt, oblique font-variant: normal, small-caps - kis kapitális (csupa nagybetű) text-decoration: none, underline, overline, line-through, blink - nincs, aláhúzott, felette vonal, áthúzott, villogó text-transform: none, capitalize, uppercase, lowercase - nincs, szavak első betűje nagy, minden szó minden karaktere nagy, minden karakter kicsi letter-spacing: érték + mértékegység - betűk közti távolság (ritkított, sűrített) word-spacing: érték + mértékegység - szavak közti távolság text-align: left, right, center, justify - szöveg igazítása balra, jobbra, középre, sorkizártan

Minden StyleSheet parancsra igaz, hogy nevében őrzi a beállítás hierarchikus helyét, pl: font-family - betűformázás, azon belül betűtípus. Ez azt is jelenti, hogy több font kezdetű utasítás helyett egyetlen font is elég: font: arial, verdana 12px red italic; text: right uppercase. Amint az látszik, az ilyen parancsösszevonásoknál a különböző értékek közé szóközt kell tenni. Ez ugyanakkor nem nagyon szerencsés, hiszen pl. egy normal esetén a böngésző nem feltétlenül tudja, hogy a font-variant, esetleg a font-weight utasítás értékéről van-e szó. A stíluslapok segítségével gyakorlatilag minden HTML elemet átszínezhetünk. Az új színek megadására négy alternatíva kínálkozik:

#rrggbb (pl. #00FF00 - zöld) - hexadecimális RGB kód #rgb (pl. #F00 - vörös) - "rövid" hexadecimális forma rgb(x,y,z) (pl. rgb(255,0,0) - vörös) - tízes számrendszerbeli RGB kód, ahol x, y, z 0 és 255 közötti egész szám rgb(x%,y%,z%) (pl. rgb(0%,0%,100%) - sárga) - százalék értékekkel, ahol 255 = 100% és x, y, z 0 és 100 közötti, egy tizedesjegyre kerekített szám

Valamely HTML elem hátterének színét a background-color: szín utasítással, háttérképét a background-image: url(eleresi_ut/fajlnev) paranccsal adhatjuk meg. Ez utóbbi használatakor szükségünk lehet az ilyenkor jól megszokott tapéta effektus kiküszöbölésére: a background-repeat: repeat, repeat-x, repeat-y, no-repeat sor nekünk megfelelő értékét beállítva mozaik, vízszintes (x tengely menti) tapéta, függőleges (y tengely menti) tapéta és középre helyezett (nincs mozaik) formát érhetünk el. Másik hasznos formázás lehet a background-attachment: scroll, fixed sorral elérhető, melynek hatására az oldal háttere görgethető (scroll) vagy rögzített (fixed). A hatás megegyezik az Internet Explorer <BODY BGPROPERTIES="FIXED"> HTML parancsával, de a CSS kóddal elvileg minden StyleSheet-támogató böngészőnek boldogulnia kell. A stíluslapokkal bevezették a szegélyrajzolás lehetőségét minden HTML objektum köré. Használatuk főképpen a form elemek és a táblázatok esetén ajánlott. Ennek színét a border-color: szín, vastagságát a border-width: vastagság mértékegységgel, formáját a border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset utasításokkal adhatjuk meg. Utóbbi esetben a forma lehet: pontozott, szaggatott, normál, dupla, groove, ridge, bemélyülő, kiugró. Tovább alakítható a keret a border-[HELY]-[TULAJDONSÁG] sor segítségével, ahol a [HELY] helyére a top, bottom, left, right értékek kerülhetnek (fenti, lenti, bal, jobb). Ezzel mind a négy szegély darab egymástól függetlenül beállítható. A [TULAJDONSÁG] helyére bármilyen fent tárgyalt utasítás kerülhet. Nem esett még szó a Cascading StyleSheetek eseménykezeléséről. Ezeket legjobban a linkek, hivatkozások esetében használhatjuk. Így az onMouseOver JavaScript eseménynek az A:hover, az onClick eseménynek az A:active parancs felel meg. Létezik még az A:visited utasítás is, mely a már meglátogatott linkekre vonatkozó formázási utasításokat tartalmazza. (Magyarázatképpen lásd a lenti példát!) Ez a rövid ismertető mutatja, mindenképpen érdemes behatóbban tanulmányozni, megismerni a StyleSheeteket. Ez az oldal ugyanis csak a legszükségesebbnek ítélt parancsokat taglalja. Ezeken túl még rengeteg lehetőséget rejtenek a stíluslapok. Utoljára még két "ínyencség", a görgetősáv és az egérmutatók formázása:

A görgetősáv részei BODY

{cursor: url(elérési_út/fájlnév), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help; scrollbar-arrow-color: szín; scrollbar-highlight-color: szín; scrollbar-face-color: szín; scrollbar-3dlight-color: szín; scrollbar-darkshadow-color: szín; scrollbar-shadow-color: szín; scrollbar-track-color: szín}

A képen jól láthatók a görgetősáv különböző részei. Az egérmutató formázása azonban magyarázatra szorul. Balról jobbra haladva: url, automatikus, kereszt, alapértelmezett, nyíl, mozgatás (keresztnyíl), K-i, ÉK-i, ÉNy-i, É-i, DK-i, DNy-i, D-i, Ny-i méretezés, szöveg, homokóra, segítség. Az itt felsorolt értékek valamelyike állíthatja be a dokumentum (vagy csak egy adott pl. bekezdés) egérmutatóját. Akár minden linkhez másik kurzort rendelhetünk. Fontos azonban, hogy URL-es megadás esetén, ha a böngészőnk nem támogatja ezt a módot vagy nem találja a szükséges fájlt, attól vesszővel elválasztva megadjunk másodlagos (harmadlagos, negyedleges stb.) lehetőséget is. Így ilyen esetben arra ugrik a böngésző. Pl. {cursor: url(normal.cur), url(animalt.ani), auto} sornál, amennyiben a normal.cur fájl nem található az animalt.ani, ha az sem, akkor az automatikus (adott helyen alapértelmezett, pl. linknél mutató kéz, szövegnél kurzor) egérmutató kerül megjelenítésre. De ez már tényleg csak meggy a torta habján.

<html>

<head> <title>StyleSheet használata - Példa</title>
</head>

</body> </html>

Multimédia a HTML dokumentumban
szerkesztés

A HTML formátumú szövegfájlban szerepelhetnek multimédia jellegű fájlokra történő utalások is, azonban az eredmény enyhén szólva kétséges! Íme néhány:

A <BGSOUND SRC="hangfájl.wav" LOOP="szám"> utasítás a letöltés közben lejátszandó hangeffektust határozza meg, mely a LOOP-ban megadott alkalommal ismétlődik.

A <SOUND SRC="hangfájl.wav"> utasítás hatására a böngésző megjelenít egy hivatkozást a lejátszandó hangeffektusra, amelyet aktiválva az adott hangfájlt lejátssza.

Mozgóképet tartalmazó fájl is elhelyezhető a HTML dokumentumban az <IMG DYNSRC="fájlnév.avi" LOOP="szám"> utasítással, amely az <IMG SRC=...> utasítással is kombinálható. (Ebben az esetben a mozgó képsorok lejátszása után a megadott kép jelenik meg a dokumentumban, ill. akkor is, ha a böngésző nem tudja a mozgóképet lejátszani.) Az opciók megegyeznek a hang- és képfájloknál alkalmazhatókkal.

A HTML-ben külön nem támogatott típusú fájlok beágyazhatók a dokumentumba az <EMBED SRC="fájlnév.kit" WIDTH="vszám" HEIGHT="fszám"> utasítással. Az így beágyazott objektumok saját megjelenítőprogramot igényelnek, amelyet a böngésző feladata meghívni.

Ez a böngészőprogram például az említetteket így jeleníti meg:

<BGSOUND SRC="h01.wav" LOOP="3">

A HTML és a JAVA

Mi az a JavaScript?

A programozási nyelvek fejlõdését figyelemmel kisérõ programozók fülében ismerõsen cseng a Java szó. A Java napjaink talán legígéretesebb programozási nyelve, melyet a Sun Microsystems és a Netscape Communications Corporation együtt fejlesztettek ki. A Java nyelv nem más, mint egy hatalmas, tisztán objektum-orientált programozási nyelv, melynek nagy ereje, hogy segítségével platformfüggetlen alkalmazások készíthetõk. A Java nyelven megírt programokat egy ún. köztes kódra (byte kód) kell lefordítani, melyek különbözõ platformokon, különbözõ operációs rendszerek alatt futtathatóak - egy értelmezõ program segítségével. A Java szóval napjainkban - a WWW világában - három területen találkozunk.

Egyrészt beszélünk Java programokról, mely programokat le kell fordítani és önállóan futnak. (Nem támaszkodnak más programokra.) A Java appletek (programocskák) - kis Java programok -, melyek a Java-t támogató böngészõkbõl futtathatóak. Ezek tehát felhasználják a böngészõk által nyújtott szolgáltatásokat. Az appleteket is le kell fordítani és - ahogyan azt már korábban bemutattam - ezek HTML dokumentumokból hívhatók. A JavaScript a Java nyelv "kis testvérkéje"- mondják sokan. A JavaScript-ek a HTML lap szövegébe épülnek be, csak a böngészõben képesek futni.

A JavaScript, mint neve is mutatja, egy script nyelv, amit legelõször a Netscape Navigator 2.0 támogatott. A JavaScript-eket HTML lapokba lehet beágyazni, a lappal együtt töltõdnek le, majd a böngészõ értelmezi és futtatja azokat. Hasonlít a Java-ra, de ugyanakkor sokkal kisebb, egyszerûbb, korlátozottabb mûködésû is annál. Nézzünk meg egy összehasonlító táblázatot arra vonatkozóan, hogy mik a fõbb hasonlóságok és különbségek a JavaScript és a Java appletek között: JavaScript Java applet A kliens értelmezi (interpretálja). A szerveren fordított - letöltés után - kliensen futó. Objektum-alapú. Beépített, kiterjeszthetõ objektumokat használ, de nincsennek osztályok és öröklõdés. Objektum-orientált. Az appletekben vannak osztályok és öröklõdés. A program beágyazódik a HTML dokumentumba. Az appletek a HTML lapból hívhatók meg, de azoktól elkülönülnek. A változók típusát nem kell deklarálni. (Nem típusos nyelv.) A változókat deklarálni kell. (Erõsen típusos nyelv.) Dinamikus kötés. Az objektum-hivatkozások ellenõrzése futásidõben történik. Statikus kötés. Az objektum-hivatkozásoknak már fordításkor létezniük kell. Nem tud önállóan a merevlemezre írni. Nem tud önállóan a merevlemezre írni.

A JavaScript-et azért fejlesztették ki, hogy az egyébként statikus lapokba dinamizmust vigyenek. Egyrészt látványosabbá tehetjük vele azokat (dinamikusan, futásidõben generálhatunk HTML lapokat), másrészt számos praktikus dologra használhatjuk fel (pl. jelszót kérhetünk a lapunk megtekintéséhez, vagy pl. ellenõrizhetjük az elküldendõ adatok helyességét még a kliens oldalon - hálózati erõforrásokat spórolva meg, stb).

A továbbiakban bemutatom a JavaScript mûködését, felépítését és az általa használt, beépített objektumokat.

JavaScript a HTML dokumentumban
szerkesztés

A JavaScript utasításoknak a SCRIPT elemben kell lenniük az alábbi módon:

<SCRIPT> JavaScript-utasítások </SCRIPT>

A tag-ek között akárhány JavaScript-utasítás lehet, ill. a JavaScript bárhol elhelyezhetõ a dokumentumban. A <SCRIPT> tag-ekbõl is bármennyi lehet.

A SCRIPT elem opcionális attribútuma LANGUAGE (a nyelv), melyben a script nyelv és ennek a verziószáma specifikálható. Pl.:

<SCRIPT LANGUAGE="JavaScript"> Ez egy Netscape 2.0-ás JavaScript <SCRIPT LANGUAGE="JavaScript1.1"> Ez pedig egy Netscape 3.0-ás JavaScript

A 3.0-ás Navigator mindkét típusú JavaScript-et futtatja, a 2.0-ás csak az elsõt.

Egy hasznos példa a LANGUAGE használatára:

<SCRIPT LANGUAGE="JavaScript"> // 1.0-ás függvények </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1"> // Újradefiniált függvények melyek 1.1-es JavaScript utasításokat is tartalmaznak // 1.1-függvények definíciója </SCRIPT>

A JavaScript elrejtése a megjegyzés tag-ek közé

Ha egy böngészõ nem ismeri a JavaScript-et, akkor a <SCRIPT> tag-ek közötti utasításokat kiírja a képernyõre - ami nagyon elcsúnyíthatja a megjelenítést. A probléma megoldása az, hogy elrejtjük az utasításokat a korábbi (Netscape Navigator 2.0 alatti) böngészõk elõl, az alábbi módon:

Egy nem JavaScript kompatibilis böngészõ nem érti a <SCRIPT> tag-et - ezért figyelmen kívûl hagyja azt -, így az összes utasítás egy megjegyzésbe kerül. Ezzel szemben pl. egy Netscape Navigator 2.0-ás böngészõ a <SCRIPT> tag-et követõ sort ignorálja, az utasításokat pedig végrehajtja.

Egy másik hasznos tag a <NOSCRIPT>, melynek segítségével kijelölhetõ a dokumentumnak egy olyan része, melyet csak azok látnak, akiknek a böngészõje nem JavaScript kompatibilis, vagy a böngészõben nincs engedélyezve a JavaScript-ek futtatása.

Mibõl épül fel a JavaScript nyelv?
szerkesztés

A JavaScript nyelv nagyon hasonlít a C++ nyelvre (a Java nyelv megalkotásakor a C++ nyelvbõl indultak ki). Sok hasonlóság mutatkozik mind a szintaktikát (utasítások formája, operandusok), mind a szemantikát illetõen. Aki ismeri a C, ill. a C++ nyelvet, sok ismerõs dolgot talál majd a következõ részben.

Értékek, változók és literálok

Értékek

Az alábbi típusú értékeket fogadja el a JavaScript:

Számok, melyek lehetnek egészek vagy valós számok. (Pl.: 23 vagy 6.452) Logikai értékek, true vagy false Stringek, pl. "Szia!" vagy 'Hello!' null, null érték

Változók

A JavaScript-ben a változókat nem kell deklarálni, és az egész típuskezelés nagyon flexibilis. A szükséges konvertálások automatikusan történnek.

A változó létrehozásánál - hogy biztosak legyünk abban, hogy egy új változót hozunk létre, nem egy már meglévõt módosítunk - ajánlott a var alapszó használata. Pl.:

var valtozo=28; valtozo="Ez most nem szam, hanem szöveg.";

A fenti két sor hibátlanul mûködik, a JavaScript megfelelõen konvertál, a valtozo-ban a szöveg lesz.

Néhány hasznos konvertáló függvény:

Az eval megkísérel kiértékelni egy szöveget, mint egy kifejezést. A parseInt egy szöveget egész számmá konvertál. A parseFloat egy szöveget lebegõpontos számmá kovertál, ha lehetséges.

A változónevek betûvel vagy "_" -jellel kezdõdnek és ezekkel vagy számokkal folytatódnak. A JavaScript megkülönbözteti a kis és nagybetûket, erre figyeljünk oda!

A függvényeken kívül létrehozott változók globálisak, az aktuális dokumentumon belül mindenhonnan elérhetõk. Ha függvényen belül definiálunk egy változót, akkor az lokális, csak a függvényen belül látható. Olyan lokális változó definiálásakor, amely globálisként már szerepel, a var alapszót kell használni.

Literálok

A literálok értékeket reprezentálnak a JavaScript-ben. Típusaik:

Egész számok Decimális Oktális (0-val kezdõdnek, a számjegyek 0-7-ig lehetnek) Hexadecimális (0x-el vagy 0X-el kezdõdnek, a számok számjegyekbõl (0-9-ig), és betûkbõl állhatnak(a-f ill. A-F)). Lebegõpontos számok A következõ részekbõl állhatnak: decimális egészbõl, decimális pontból, törtrészbõl és kitevõbõl. Pl.: 16.423, 16.423E-1 Logikai literálok A Boolean típusnak két literálja van: true és false Szöveg literálok Egy szöveg(string) literál vagy nem tartalmaz karaktert, vagy akárhány karaktert tartalmaz két ' vagy " jelek között. Speciális karaktereket is tartalmazhat egy string:
Karakter Jelentés \b backspace visszatörlés \f form feed lapdobás \n \new line új sor \r carrige return kocsi vissza, sor elejére \t tab tabulátor-pozíció
\\
\" \' backslash backslash karakter,ill. más speciális karakterek írása

Kifejezések és operátorok
szerkesztés

Kifejezések

Egy kifejezés literálok, változók, operátorok és kifejezések halmaza, melyek egy értéket határoznak meg. Ez az érték lehet szám, szöveg vagy logikai érték. Az alábbi típusú kifejezéseket ismeri a JavaScript:

Aritmetikai - az értéke szám Szöveg - szöveget vesz fel értékül Logikai - értéke true vagy false

Feltételes kifejezés

Szintaxisa: (feltétel) ? érték1 : érték2 Értéke a feltételtõl függõen vagy az érték1 (ha igaz), vagy az érték2 (ha hamis).

Operátorok

Vannak hozzárendelõ, aritmetikai, összehasonlító, bitenkénti, logikai, szöveges és speciális operátorok. Ezeket is feloszthatjuk egy vagy kétoperandusú operátorokra.

Egy oprendusú operátor használata:

operátor operandus

vagy

operandus operátor

pl.: i++, ++i

Két operandusú operátorhoz két operandus szükséges:

operandus1 operátor operandus2

pl.: x + y

A hozzárendelõ operátorok pl.: =,+=,*=,/=, stb. pl.: x+=2 (x-et növeli 2-vel)

Összehasonlító operátorok pl.: = =, !=, <, <=, >, >= pl.: x!=y (x nem egyenlõ y-al)

Aritmetikai operátorok pl.: +, -, *, /, %(modulusz), ++ pl.: x++ (x értékét növeli eggyel - inkrementáló operátor)

Logikai operátorok: && (logikai és),|| (logikai vagy)

String operátor: + pl.: nev=vezeteknev+' '+keresztnev

Az objektumok a JavaScript-ben

A JavaScript-ben az objektumok más objektumokból és változókból épülnek fel. Az objektumoknak - hozzájuk rendelt - függvényeik, más néven metódusaik vannak. Vannak elõre definiált objektumok (beépített objektumok), de mi is tudunk objektumokat létrehozni.

Általánosan egy objektum jellemzõjéhez a következõképpen férhetünk hozzá:

objektumNév.tulajdonságNév

Az objektum-neveknél és a tulajdonság-neveknél figyeljünk arra, hogy a JavaScript kis- és nagy betûre érzékeny. Egy tulajdonságot úgy definiálhatunk, ha egyszerûen értéket rendelünk hozzá. Példaként tegyük fel, hogy van már egy Szemely nevû objektum. Ekkor ehhez nev és kor jellemzõket az alábbi módon rendelhetünk:

Szemely.nev = "János" Szemely.kor = 23

Az objektumok olyanok, mint egy-egy asszociatív tömb, (egy tömb, melyben az elemeknek saját nevük van, így nem kell tudnom, hogy egy elem a tömben pontosan hanyadik; az értékéhez így is hozzáférhetek). Tehát egy elemhez így is hozzáférhetünk:

Szemely["nev"] = "János"

Fontos szabály, hogy a Netscape 2.0-ban egy tulajdonságot megcímezhetünk egyrészt a tulajdonság nevével, másrészt a "tömb"-ön belüli sorszámával is. A 3.0-ás böngészõben azonban, ha névvel inicializáltunk egy tulajdonságot, akkor arra mindig névvel kell hivatkozni. Hasonlóképpen kell eljárnunk, ha index-el inicializálunk. Ez alól a szabály alól csak a formok képeznek kivételt, mivel itt minkét módon címezhetük (névvel természetesen csak akkor, ha adtunk a formnak nevet).

Objektumokat mi is készíthetünk, ehhez azonban tudnunk kell, hogyan hozhatunk létre függvényeket.

Függvények

A JavaScriptek írásához meg kell vizsgálnunk azt, hogy hogyan lehet függvényeket létrehozni ill. hogyan lehet azokat meghívni. (A függvény-utasításoknak van egy csoportja, mely önálló feladatot lát el.) Egy függvényt a function kulcsszóval definiálhatunk, amit a függvény neve követ, ezután kerekzárójelek között, vesszõvel elválasztva az argumentumok, majd kapcsoszárójelek között utasítások következnek. Az így definiált mûveletsor a függvény meghívásakor hajtódik végre. A függvényt a függvény nevével és az ezt követõ - kerekzárójelek között felsorolt, vesszõvel elválasztott - paraméterekkel lehet meghívni. A függvényeket ajánlatos a fejben definiálni, mivel a dokumentum csak a fej letöltõdése után jelenik meg, így elkerülhetõ, hogy a felhasználó olyan függvényt aktivizáljon, ami még definiálatlan. Nézzünk egy példát az elmondottakra:

<HEAD> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY> <SCRIPT> udvozlet("látogató"); </SCRIPT> </BODY>

Itt tehát definiáltam egy udvozlet nevû függvényt - a fejben, ami a valaki paraméterben kapott szöveget (stringet) - az "Üdvözöllek a lapomon " mögé illesztve - kiírja. Látható a függvény definíció és a függvényhívás módja is. A szövegeket vagy " jelek, vagy ' jelek közé kell zárni. A függvények visszadhatnak egy értéket return utasítással, az alábbi formában: return érték; vagy return kifejezés;

A függvényben szerepel egy utasítás, mely jól szemlélteti a JavaScript objektum-orientáltságát. A document.write("..."); utasítás nem tesz mást mint meghívja a JavaScript egy beépített objektumának, a document-nek a write ún. elemfüggvényét, metódusát (az objektumon végrehajtható mûvelet).

A JavaScript ismeri a rekurziót, függvények meghívhatják saját magukat.

A függvények az átadott értékeket vagy a függvény definícióban szereplõ (formális) paramétereken keresztül, vagy az alábbi módon érhetik el:

függvénynév.arguments[i]

ahol a függvénynév az adott függvény neve, az i pedig a paraméter sorszáma (a számozás 0-tól indul). Az argumentumok száma az arguments.length változóból megtudható.

Új objektumok készítése

Egy új objektum elkészítéséhez két dologra van szükség:

1. Egy ún. konstruktor-függvényt kell írni, amely megadja az objektum-típus nevét, tulajdonságait és metódusait. 2. El kell készíteni az objektum egy példányát a new operátorral.

Készítsük el a szemely nevû objektum típusunkat a következõ módon:

function szemely(nev, kor, szulhely){

this.nev=nev this.kor=kor this.szulhely=szulhely }

A fent definiált objektum-típusból a new utasítással készíthetünk konkrét objektumot.

Pl.: peti=new szemely("Kis Péter",16,"Debrecen")

A this objektum a függvényben nem más, mint egy hivatkozás arra a konkrét objektumra, amelyet a new-val éppen most hozunk létre. Jelen pillanatban a this peti-t jelenti, így Péter megfelelõ jellemzõi eltárolódnak.

Egy objektum tulajdonsága lehet egy másik objektum is. Nézzünk erre is egy példát! Készítsünk egy szamla nevû objektumot, melynek a tulajdonosa egy szemely lesz.

function szamla(azonosito,tulajdonos){

this.azonosito=azonosito this.tulajdonos=tulajdonos }

Most hozzuk létre Péter számláját az alábbi módon:

szamla1= new szamla(2012,peti)

Figyeljük meg, hogy itt a peti egy objektum neve! Ezután a szamla1 tulajdonosát a következõ képp olvashatjuk ki:

szamla1.tulajdonos.nev (= Kis Péter)

Metódusok

A metódusok olyan függvények, amelyek objektumokhoz tartoznak. Egy metódus általában egy adott objektum-típusú objektummal dolgozik. A metódusok a megfelelõ objektumokhoz vannak hozzárendelve.

Egy metódus készítéséhez tehát definiálnunk kell egy függvényt, majd hozzá kell rendelnünk a megfelelõ objektumunkhoz. A hozzárendelés szintaxisa a következõ:

objektum.metódusnév = függvénynév.

Ezt az objektum definíciójánál, annak függvényében kell megtennünk.

A metódus meghívása magától értetõdõen:

objektum.metódusnév(paraméterek)

Az elõbbi példához visszatérve készítsünk egy olyan metódust, melynek megadva egy szemely-t, kiírja annak a nevét.

function neve(){

document.write("A számla tulajdonosa: "+this.nev) }

Módosítani kell a szemely objektum típust:

function szemely(){ ...

this.neve=neve }

Ezek után következhet a metódus meghívása:

peti.neve()

Ez kiírja a böngészõbe, hogy "A számla tulajdonosa: Kis Péter".

Objektumok törlése

A 2.0-ás böngészõben minden objektum addig él, amíg az õt tartalmazó lap él. Az 1.1-es JavaScript-ben úgy lehet objektumot törölni, hogy az objektum-referenciát null-ra kell állítani.

Az utasítások

A JavaScript utasítások - ahogyan azt már korábban mondtam - nagyon hasonlítanak a C++ utasításaira. Ezeket az utasításokat felsorolás szintjén bemutatom, hogy azok is, akik kevésbé ismerik a C-t - de már programoztak valamilyen nyelven -, el tudják készíteni a saját kis scriptjeiket. Az utasítások után nem kell - de lehet - pontosvesszõt tenni (;) - egy kivétel van, amikor stringben vannak az utasítások (lsd. eseménykezelõknél).

A { } jeleket csak akkor kell használni, ha nem egy utasítást, hanem többet akarunk végrehajtani (utasítás blokk) A [ ] jelek közötti rész opcionális, elhagyható.

Feltételes utasítás

if (feltétel) { utasítások1 [} else { utasítások2 ]}

Ha igaz a feltétel, akkor az utasitások1 fut le; ha hamis a feltétel és van else, akkor az utasítások2 fut le, és ha hamis a feltétel és nincs else, akkor nem történik semmi.

Ciklusok

for ([inicializáló kifejezés] ; [feltétel] ; [ciklusváltozó módosítása]) { utasítások }

Végrehajtódik az inicializáló kifejezés; kiértékelõdik a feltétel, ha igaz, végrehajtódnak az utasítások; ha hamis a feltétel, akkor vége a ciklusnak; végrehajtódik a ciklusváltozó módosítása; újból kezdõdik a folyamat a feltétel kiértékelésétõl.

for (változó in objektum) { utasítások }

A változó sorra felveszi az objektum jellemzõit és ezekre az értékekre hajtódnak végre az utasítások.

while (feltétel) { utasítások }

Amíg a feltétel igaz, addig végrehajtódnak az utasítások.

continue és break

A continue utasítást ciklusokban lehet kiadni és hatására a for és a while 'ciklusa' megkezdi a következõ ciklust (mintha a ciklus utolsó utasítása után ugrana a vezérlés).

with

Hatáskörében alapértelmezett objektumot definiál.

with (objektum) { utasítások }

Az utasításokban ha nem egyértelmû egy objektumhivatkozás, akkor az objektum (with-beli objektum) egy tulajdonságának értelmezi a böngészõ az adott objektumothivatkozást.

Értelmezés sikertelen (formai hiba): {\displaystyle Megjegyzések}

A megjegyzéseket - mint a C++-ban - két féle képpen írhatunk.

// Így egy sort

/* Így pedig

több sort lehet megjegyzésbe tenni.*/

Események kezelése
szerkesztés

A JavaScript-re az eseményvezéreltség jellemzõ. Ez azt jelenti, hogy a kis programjaink a felhasználó bizonyos tevékenységeire válaszolva indulnak el. Esemény lehet az, ha felhasználó megnyom egy gombot, vagy ráviszi az egér mutatóját egy linkre, vagy betöltõdik a lapunk a böngészõbe és még sorolhatnám. A Netscape az egyes HTML elemeket újabb attribútumokkal bõvítette ki, mint pl. a név-vel (name), így mintegy objektumokká alakította õket, melyekre így a scriptekbõl hivatkozni lehet. A mi feladatunk, hogy ezekhez az elemekhez/objektumokhoz hozzárendeljük a megfelelõ eseményt, ill. az azt lekezelõ utasításokat. Így egy ún. eseménykezelõ-t definiálunk. Ezt könnyen meg is tehetjük a kibõvített eszközrendszer segítségével.

Az eseményeknek neveik vannak, mely nevek úgy keletkeznek, hogy az esemény angol neve elé odaírjuk az on szót. Így tehát van - csak, hogy néhányat kiemeljek - onClick (kattintottak), onChange (megváltozott), onLoad (letöltõdött) nevû eseménykezelõ. Ezekhez kell a megfelelõ utasításokat, vagy függvényt hozzárendelni.

Pl.: <form> <input type="button" value="OK" onClick="alert('Megnyomta a gombot!')"> </form>

A fenti példában tehát utasítottam a böngészõt, hogy ha valaki rákattint a gombra, akkor hozzon létre egy alert (figyelmeztetõ) ablakot a megadott felirattal. Az alert függvény egy elõre elkészített, beépített függvény, melyekrõl késõbb részletesen beszélek, most csak a példa kedvéért használtam. Figyeljük meg az idézõjelek és az aposztrófok használatát!

Természetesen egy-egy esemény nem alkalmazható minden objektumhoz. (Egy képet nem lehet kiválasztani úgy, mint egy legördülõ menü valamely elemét.) Az alábbi táblázatban megtalálhatóak az események és azok az objektumok, amelyekre alkalmazhatók: Esemény Mire alkalmazható Ekkor következik be Eseménykezelõ abort képek A felhasználó megszakítja a kép letöltését onAbort blur ablakok, frame-ek, és minden form elem A felhasználó elviszi a fókuszt az ablakból, a frame-bõl, vagy a form elemekrõl onBlur click gombok, radio gombok, check gombok, submit gombok, reset gombok, link-ek A felhasználó rákattint valamilyen form-elemre vagy linkre onClick change szövegmezõk, szöveg box, legördülõ menü A felhasználó megváltoztatja az elem értékét onChange error képek, ablakok A dokumentum vagy kép betöltése hibát okoz onError focus ablakok, frame-ek és minden form elem A felhasználó ráviszi a fókuszt az ablakra, a frame-re, vagy a form építõelemeire onFocus load a dokumentum body-ja A felhasználó letölti a dokumentumot onLoad mouseout szöveg box, kép, linkek A felhasználó lehúzza az egérmutatót az adott objektumról onMouseout mouseover linkek A felhasználó a link felett mozog az egérmutatóval onMouseover reset formok A felhasználó reset-eli a formot onReset select szövegmezõk, szövegboxok A felhasználó kiválaszt egy mezõt onSelect submit submit gomb A felhasználó megnyomja a submit gombot onSubmit unload dokumentum body-ja A felhasználó elhagyja a lapot onUnload

Nézzünk ezek használatára néhány példát! Próbáljuk ki ezeket!

<a href="#Nézzük" onMouseover="alert('Ez az onMouseover!')">Ez itt megmutatja, mit csinál az onMouseover.</a>

Ez itt megmutatja, mit csinál az onMouseover.

<form>

<select name="kereso" onChange="alert('Jó választás!')"> <option value=infoseek>InfoSeek <option value=webcrawler>Webcrawler </select>

</form>

Ha a másik elemet választjuk ki, bekövetkezik az change esemény.

Egyéb

A JavaScriptekben és a HTML dokumentumokban ékezetes betûket az ISO Latin-I karakterek kódjaival írhatunk. A szövegbe egy karakter helyet egy speciális karakersorozatot kell írni.

Pl.:

á = á Á= Á é = é í = í ö = ö õ = õ stb.
A CGI szkriptek szerepe
szerkesztés

Szerkesztése folyamatban...

<html>

<head> <title>A CGI szkriptek szerepe - Példa</title>
</head>

</body> </html>

Néhány szó a DHTML-ről
szerkesztés

Szerkesztése folyamatban...

<html>

<head> <title>Néhány szó a DHTML-ről - Példa</title>
</head>

</body> </html>

Honlapok közzététele a Weben

Ha már idáig jutott a tanulásban a kedves Olvasó, akkor bizonyára rendelkezik egy frissen elkészült honlappal, ami már csak arra vár, hogy végre felkerülhessen az Internetre. Nos ez a fejezet ezzel kapcsolatban szolgál néhány hasznos információval. Kész weblapjainkat egy Internethez csatlakoztatott számítógépen kell elhelyeznünk ahhoz, hogy az mások által is hozzáférhetővé váljon. Ez a számítógép lehet a saját gépünk, vagy éppen egy távoli szolgáltató szervere. Az előbbi esetben mindenképpen telepítenünk és konfigurálnunk kell gépünkre egy webszervert, amelynek mindaddig futnia kell, ameddig honlapunkat hozzáférhetővé akarjuk tenni. Ennek leállításakor az idegen számítógépről érkező hívás (a honlapunk letöltése, megnyitása) sikertelen, oldalaink nem elérhetőek. Ha tehát állandó hozzáférhetőséget kívánunk biztosítani, számítógépünknek folyamatosan üzemelnie kell. Ez még a kisebb probléma. A nagyobb az, hogy webszerverünket úgy kell beállítanunk, hogy az minél inkább ellenálljon az esetleges behatolási (támadási) szándékoknak; ezekről hallani eleget. Éppen emiatt javasolt egy szolgáltató szerverén elhelyezni honlapunkat. Erre rengeteg lehetőség kínálkozik - ingyenes és fizetős egyaránt. Nagyon széles szolgáltatási körrel rendelkező szerverek vannak csak Magyarországon, de természetesen külföldön is. Ide kapcsolósik, hogy egyes szolgáltatók az oldalaknak yújtott tárhely mellett gyakran e-mail postafiókot és domain nevet is ad, persze nem térítésmentesen. Érdemes részletesen tájékozódni a felhozatalban; ebben segít a Hasznos linkek című IV. függelék. A fent említett okokból csak a távoli szerveren törénő publikálással foglalkozunk a továbbiakban. Ha már rendelkezünk regisztrációval egy szerveren, azaz van hol elhelyezni honlapunkat, akkor ezt fájljaink feltöltésével tehetjük meg. Szokás ezt FTP-zésnek is nevezni, az ekkor használt internet protokoll nevéből (FTP: File Transfer Protocol). Legegyszerűbb dolgunk akkor van, ha rendelkezünk úgynevezett FTP programmal, amely hatalmas segítséget nyújt a publikálásban. Ennek beszerzéséhez a Hasznos linkek függelék ad útmutatót. Ha tehát van már ilyen programunk, akkor nyugodtan bízzuk magunkat rá: használatának ismeretében általában egyszerű windowsos kattint-húz módszerrel feltölthetünk adatokat. Legtöbbször a program két Windows Intézőhöz hasonlatos ablakot jelenít meg, egyikben gépünk fájljai és könyvtárai, a másikban az adott szerver könyvtárszerkezete. Példaként tekintsük a CoffeeCup cég letölthető ExpressoFTP programját!

A piros színnel karikázott gombra kattintva (Add FTP Server) adhatunk meg egy új szolgáltató címet, melyhez a későbbiekben a kékkel karikázott gomra kattintva (Connect) kapcsolódhatunk. Amikor új szervert adunk a listához, mindig kell adnunk a kapcsolatnak egy nevet (Name), illetve közölnünk kell a szolgáltató FTP címét (Hostname/Address). Lentebb a felhasználó nevünk (Username) és jelszavunk (Password) megadásával fejezhetjük be a beállítást. Ezután a kékkel karikázott gombra kattintva egy listában választhatunk a beállított szerverek között. A kék csíkkal jelölt helyen találjuk saját gépünk adatállományait (felül a könyvtárszerkezet, alatta a megnyitott mappa fájljai), a pirossal jelzett részben pedig - amennyiben már kapcsolódtunk a szerverhez - a szolgáltató által rendelkezésünkre bocsátott tárhely könyvtárrendszerét. Egyikből a másikba kattint-húz módszerrel mozgathatunk adatokat.

Hasonlóan egyszerű dolgunk van egy megfelelően új Windows Commander használatakor. Mivel ennek magyar nyelvű verziója is egészen biztosan letölthető, így erről csak annyit, hogy egy Új FTP kapcsolat gombbal új szervercímet adhatunk a programhoz, az FTP kapcsolódás gombbal pedig csatlakozhatunk szolgáltatónkhoz. (Használhatók természetesen a Parancsok menü megfelelő utasításai is.) Kapcsolódás után a szokásos használati utat követve egyik ablakból a másikba húzva FTP-zhetünk. Kissé bonyolultabb a helyzet, ha FTP programmal nem rendelkezzünk. De ekkor se essünk kétségbe, mert az újabb böngészők, típusuktól függetlenül, lehetővé teszik a fájlfeltöltést. Természetesen minden program más kezelést kíván, ugyanakkor általánosságban a következőkre érdemes figyelni: címként általában a felhasznalonev@szervercim forma használatos, példaként a www.freeweb.hu ingyenes tárhelyszolgáltató a felhasznalonev@ftp.freeweb.hu címen érhető el (a pontos elérhetőséget - FTP címet - mindig a szolgáltató adja meg); ügyeljünk a böngészőnk helyes beállításaira; ha Belépés megtagadva vagy Access denied/ Forbidden/Connection refused illetve hasonló hibaüzenetet kapunk, próbálkozzunk a felhasznalonev:jelszo@szervercim alakkal.

Sikeres kapcsolódás után Windows operációs rendszert használva a fájlokat például egy Windows Intézőből behúzva a böngészőablakba feltölthetjük azokat. Azonban ez is programfüggő. A Windows a 98-tól egyszerűen a Windows Intézőn keresztül is képes FTP parancsok fogadására, ez azonban nem sokkal precízebb, mint a böngészős módszer.

A fent leírtak Windows operációs rendszer használatakor alkalmazhatóak, azonban általában - például - Macintosh rendszer esetén is (elsősorban az FTP programoknál ismertetettek) helytállóak. Ha Linuxot használunk, sokkal egyszerűbb dolgunk van; ott elsősorban a Midnight Commander (mc) alkalmas ilyen célra (valójában majd' minden hálózaton és Interneten végzett tevékenység eredményesebb Linux használatával).

Amennyiben a fentiek figyelembevételével járunk el, jó eséllyel hajthatunk végre sikeres fájlfeltöltést, melynek köszönhetően weblapjaink mindenki számára hozzáférhetővé válnak az Interneten. Az egész honlapírásnak ez a legszebb pillanata, illetve az, amikor magunk is leellenőrizzük a Világhálón, hogy mit is alkottunk. (Semmiképpen ne feledjük el megtenni!) Fájljaink feltöltésekor mindig figyeljünk arra, hogy a szolgáltatónk által biztosított tárhelykeretet ne lépjük túl!

Új téma nyitása