Ahogyan azt Spányik tanár úr az elmúlt évben többször is hangsúlyozta, a modern weboldalak három jól elkülöníthető rétegből épülnek fel. Ezek közül természetesen a legfontosabb a tartalmi rész, amit – az oldal struktúrájával együtt – az XHTML leírónyelvben „fogalmazunk meg”. Ezt az XHTML állományt úgy kell felépítenünk, hogy ha úgy adódik – például azért, mert olyan böngészőben nézik meg, amelyik nem támogatja a kaszkád stíluslapokat –, akár önállóan is megállja a helyét. Ezt követi az oldal kinézetének, dizájnjának kialakítása, amelynek elsősorban az a feladata, hogy a tartalmat, illetve az oldal funkcionális és egyéb részeit (például a fejlécet, láblécet, menüt stb.) megfelelően elkülönítse, a böngészőben megjelenő oldalt áttekinthetővé, fogyaszthatóvá és nem utolsósorban széppé tegye.
Több magyar nyelvű JavaScript-tankönyv közül választhatunk, az alapokat mindegyikben megtaláljuk
Miután mindezzel megvagyunk, elkezdhetjük szabályozni oldalunk viselkedését. Az esetek jelentős részében ez a különféle felhasználói tevékenységek (le)kezelését jelenti (például hol járt az egérkurzor, hova kattintottak, milyen gombot nyomtak meg stb.), de sokszor használjuk arra is, hogy egyszerűbbé tegyük az XHTML-kód írását, megkíméljük magunk számos felesleges kód, kódrészlet beszúrásától, valamint a JavaScript segítségével kijavíthatjuk, egész pontosan „áthidalhatjuk” a böngészők, jellemzően az Internet Explorer néhány hibáját, hiányosságát.
Programok a kliens oldalon
Amikor az ún. webprogramozásról vagy internetes programokról beszélünk, akkor mindenképpen külön kell választanunk azokat a programokat, amelyek a szervereken, és azokat, amelyek a felhasználók számítógépén található kliensalkalmazásban, jellemzően egy webböngésző-szoftveren belül futnak. Előbbiekkel, vagyis a szerveroldali programokkal most nem foglalkozunk (a későbbiekben is csak egy-egy kevésbé fontos téma erejéig térünk ki ezekre), egyelőre megmaradunk saját gépünk környezetében, sőt, a kliensalkalmazások közül is kizárólag a böngészőkre koncentrálunk a továbbiakban.
Az angolul alapszinten értőknek a legegyszerűbb a W3Schools.com-on kezdeni az ismerkedést az alapokkal
A weboldalak viselkedését nagyon sokféle programnyelven szabályozhatjuk (Java, ActionScript, VBScript, Visual Basic, C# stb.), azonban ezek szinte mindegyikéhez valamilyen kiegészítőt kell letöltenünk, kell letöltenie a felhasználóknak. Így például az ActionScript nyelven megírt programunk csak azokon a számítógépeken (vagy tenyérgépeken) fog futni, amelyiken tulajdonosa telepítette a Flash (megfelelő verziószámú) bedolgozómodulját. Illetve hiába a leggondosabban megtervezett és kivitelezett Java-alkalmazás, ha a felhasználó számítógépén nincs telepítve a Java-futtatókörnyezet (Java Runtime Environment). Hasonlóképpen a C#-ban vagy Visual Basicben írt silverlightos programból sem lát mindaddig semmit az oldalunkra látogató, amíg le nem tölti és el nem indítja a Microsoft Flash-konkurensének telepítőjét. Ugyanakkor létezik egy olyan szkriptnyelv, amit – ahogyan azt a webböngészőknél sajnos megszokhattunk többé-kevésbé – minden, vagy inkább fogalmazzunk úgy, hogy legtöbb modern webböngésző-program támogat: ez pedig a JavaScript.
Egy kis történelem
A JavaScriptet eredetileg Brendan Eich, az egykoron szebb napokat látott Netscape Communications mérnöke fejlesztette ki. A programnyelv neve eredetileg Mocha volt, amelyet előbb LiveScriptre, majd JavaScriptre módosították. Ez utóbbi változás – nem véletlenül – egybeesett a Netscape és a Sun együttműködési megállapodásával, amelynek keretében például a Netscape Navigatorba bekerült a natív Java-támogatás. A JavaScript 1.0 1995 decemberében debütált a 2.0B3-as verziószámú Netscape Navigatorban. Annak ellenére, hogy sokan azt hiszik, a Java és a JavaScript alapvetően nem rokon nyelvek, bár mindkettő alapja a C-szintaxis, és a JavaScript-viszonylag sok nevet és névkonvenciót átvett a Javából.
A JavaScript gyorsan nagy népszerűségre tett szert kliensoldali szkriptnyelvként, így szinte természetesnek tűnt, hogy az akkoriban élesedő „első böngészőháborúban” a Microsoft szinte azonnal kifejlesztette saját változatát, a nem túl fantáziadúsan elkeresztelt JScriptet, amely az 1996 augusztusában kiadott Internet Exlorer 3.0-ban jelent meg először.
A HTML Goodies oldalon a kezdők és haladók egyaránt találnak hasznos írásokat
A Netscape Communications, elkerülendő a „dialektusok” elszaporodását, 1996 novemberében benyújtotta a JavaScriptet az Európai Számítógépgyártók Szövetségének (European Computer Manufacturers Association, ECMA) szabványosításra. A szabvány első változatát végül is 1997 júniusában fogadták el az ECMAScript néven. Az ECMAScriptet az azt követő két évben kétszer is átszerkesztették kisebb-nagyobb mértékben, így az aktuális változat az 1999 decemberében kiadott ECMA-262 Edition 3, más néven JavaScript-1.5, amit valamivel később a Nemzetközi Szabványügyi Szervezet (ISO) is jóváhagyott ISO/IEC 16262:2002 számon.
A böngészők azóta is ezt a szabványt támogatják – helyenként „gyártófüggő nyelvjárásokkal” fűszerezve. Természetesen a nyelv fejlesztése nem sem állt meg, a Firefox 3.0-s verziója például már a JavaScript 1.8-at, sőt a 3.1 a JavaScript 1.9-et támogatja, azonban ezek a változatok, így a bennük támogatott funkciók nem tekinthetőek hivatalosnak. A következő hivatalos verzió, az ECMA-262 Edition 4, vagy más néven ECMAScript Harmony tervei már az ECMA előtt vannak, így várhatóan idén vagy a jövő évben már akár JavaScript 2.0-ban is elkészíthetjük programjainkat.
Programozási alapok
A Weboldalkészítő suli elindítását hosszas tervezés és elhúzódó beszélgetések előzték meg – a kényszerítő intézkedések más lapra tartoznak, az a (fő)szerkesztő privilégiuma. E beszélgetések egyik témája többek között az volt, hogy egy cikksorozat keretében felvállalhatunk-e programozás-oktatást. Valóban onnan kell-e indítanunk a JavaScripttel történő ismerkedést, hogy mik azok a változók, operátorok, utasítások, függvények, ciklusok stb., és ennek tükrében csak erre rászánni két-három hónapot (és akkor igencsak rohamléptekben haladtunk)? Vagy feltételezhetjük azt, hogy aki szeretne JavaScript-programokat írni, az már tisztában van legalább a programozás alapjaival, de legalábbis hajlandó más forrásból utánanézni ezeknek? Mi ez utóbbi mellett döntöttünk, azzal a kitétellel, hogy – főként az elején – egyszerűbb, könnyen áttekinthető és megérthető szoftvereket fogunk bemutatni. Ráadásul reményeink szerint már ezekből is látni fogjuk, hogy néhány kis alkalmazás segítségével mennyivel egyszerűbbé, és sok esetben látványosabbá tehetjük oldalainkat.
A Smashing Magazine gyakran gyűjt össze linkeket különféle hasznos oldalakra
Szerencsére magyar nyelven is elérhető számos könyv a könyvesboltokban, amelyek különböző mélységig merülnek el a JavaScript rejtelmeiben. Ráadásul, ahogyan azt fentebb már említettük, a JavaScript 1.5 szabvány idén lesz tízéves, így az alapok elsajátítására tényleg szinte mindegyik könyv alkalmas. Azt azért fontos megemlítenünk, hogy ez tényleg csak az alapokra igaz. Ugyanis ahogyan a másik két „matuzsálem”, a január 26-án 9. születésnapját ünneplő XHTML és a májusban 11 éves CSS esetében, úgy a JavaScriptnél is jól megfigyelhető, hogy az évek során egyre több és több lehetőséget találnak bennük meg weboldalkészítők és a webes programozók. Így ami egy 2-3-5 évvel ezelőtti könyvben modern megoldásnak tűnt, az ma már lehet, hogy elavult, maradi.
Az angolul értők valamivel jobb helyzetben vannak, a weben számtalan jó alapozó tanfolyam található. Ezek közül kiemelnénk két kedvencünket, a HTML Goodies-t, ahol nemcsak a kezdők, de a haladó(bba)k is számos hasznos és érdekes írást találhatnak, és az egyik, ha nem a legszínvonalasabb webes szabványokat oktató oldalt, a W3schools.com-ot, amit nemcsak online tankönyvként, hanem referenciaként is használhatunk munkáink során.
Mire kell nekünk JavaScript?
Ahogyan azt korábban már többször említettük, a JavaScript segítségével oldalunk viselkedését változtathatjuk meg.
Ha engedélyezett a JavaScript-programok futása, az egérkurzor alatti hír háttere megváltozik, és vékony szürke keretet kap
Kezdetekben ez például azt jelentette, hogy amikor a felhasználó a képekből összeállított menü egyik eleme fölé vitte az egeret, akkor annak megváltozott a képe, a böngésző státussorában vagy a címsorában feliratokat animáltak, vagy ami sajnos sokáig nagy kedvenc volt, az egérkurzort valamilyen animált szöveg, esetleg újra és újra kirajzolt analóg óra követte. Az előbbihez – mint azt a LoremIpsum MMIX honlapján is jól látszik – ma már nem használunk JavaScriptet, sokkal kényelmesebb ugyanezt CSS-sel megoldani, míg utóbbiakról szerencsére leszoktak a fejlesztők, csak nagy ritkán találkozhatunk ilyenekkel.
Mielőtt „érzékeny területre” vinnénk az egérkurzort, oldalunk kódjában semmi változás nem látszik
De akkor mire is kell nekünk JavaScript, mire fogjuk használni mondjuk a konferenciánk weboldalán? Például arra, hogy
- oldalunk továbbra is 100%-ig szabványos maradjon, ugyanakkor meg tudjuk oldani, hogy az oldalunkról kimutató linkek új ablakban, új fülön nyíljanak meg;
- regisztrációs űrlapunkat csak megfelelően kitöltve küldhetik el a jelentkezők, ne maradhassanak kitöltetlenül olyan mezők, amiket kötelező megadni, ne lehessen (formailag) hibás e-mail címet megadni;
- a jelentkezettek listáját ugyan (egyelőre) kézzel fogjuk frissíteni, de hadd ne nekünk kelljen a páros-páratlan sorok színezésével foglalkoznunk – ahogyan azt egy korábbi Mesterfogások cikkünkben bemutattuk;
- ugyanezen listát – már csak egészségvédelmi okok miatt is, azaz lustaságból – alapvetően a jelentkezések sorrendjében fogjuk rendezni, de lehetővé tesszük, hogy a felhasználó átrendezhesse vezeték- és keresztnév, város vagy cégnév szerint;
- kijavítsuk az Internet Explorer azon hibáját, hogy a stíluslapokat nemcsak kicsit másként, de helyenként hiányosan értelmezi, így többek között, hogy a hover pszeudoosztályt csak linkelemeken kezeli, vagy nem veszi figyelembe a megadott max-width értékeket.
Amint a hír fölé ér az egér, a ‹div› új stílussal lesz gazdagabb
De mindezeken túl azt is megnézzük majd, hogyan jelölhetjük linkjeink típusát (honlapon kívülre mutató link, PDF, XLS, DOC állományokra mutató linkek stb.), miként tudjuk hosszúra nyúlt oldalainkat áttekinthetőbbé tenni, miként oldhatjuk meg egyszerűen, hogy a felhasználó kényelmes betűméretet választhasson magának, sőt, még a „nyomtatható változat” is új értelmet fog nyerni hamarosan. Vagyis biztosak lehetünk benne, hogy a böngészők JavaScript-értelmezőjét sem fogjuk munka nélkül hagyni.
Amikor az egér elhagyja a ‹div›-et, a háttér színe átlátszóvá változik
Mielőtt azonban mindenki nagyon belelkesedne, hogy milyen sok mindenre alkalmas a JavaScript, mi mindenre tudjuk majd használni, mindenképpen el kell mondanunk, hogy sohasem hagyatkozhatunk csak és kizárólag a JavaScriptre. Oldalaink tervezésekor mindig vegyük figyelembe, hogy a böngészők mintegy öt százalékában valamilyen okból nem fognak futni az általunk megírt JavaScript-programok. Korábban ennek az öt százaléknak a nagyobbik része az elavult böngészőkkel internetezőknek volt köszönhető, míg ma inkább az a jellemző, hogy a felhasználó biztonsági okokból vagy csak egyszerű óvatosságból letiltja a különféle szkriptek, így a JavaScript-programok futását. Például a weben sajnos nagyon sok olyan oldallal – sokszor hivatalos oldallal is – találkozhatunk, amelyek menüje JavaScript-alapú (vagy eleve a JavaScript írja bele a HTML-kódba a menüt, vagy a JavaScriptre bízták a különféle almenük megjelenítését), így a felhasználók egy jelentős része nem tudja az oldalt (normálisan) használni.
A ‹noscript› elemen belüli szöveg csak akkor jelenik meg, ha a letiltották a JavaScript-programok futását, vagy a böngésző nem támogatja a JavaScriptet
Ha már mindenképpen ragaszkodunk a JavaScript nyújtotta előnyökhöz, és – minden javaslatunk ellenére – oldalunk használatának alapfeltétele a JavaScript-programok futásának támogatása (tiltásának megszüntetése), annyit azért tegyünk meg, hogy erről ‹noscript› ‹/noscript› tagek közé írt szövegben értesítjük az oldalunkra látogatókat. Az itt elhelyezett szövegeket csak azok fogják látni, akik böngészője nem támogatja vagy éppen tiltja a JavaScript-programok futását – vagy azok, akik éppen oldalunk kódját nézegetik.
A JavaScript helye
Ha valaki az alant következő részt ismerősnek találja, az azt jelenti, hogy nemcsak elolvasta, de többé-kevésbé meg is jegyezte mindazt, amit Balázs a Weboldalkészítő suli hatodik leckéjében írt arról, hogyan kerül a stíluslap a weboldalba. Ez nem a véletlen – vagy a Copy-Paste – műve, hanem azért van, mert nagyon sok a hasonlóság a stílusok és a JavaScript-kódok beillesztése között.
A HTML-elemekbe közvetlenül írhatunk JavaScript-kódokat – de lehetőleg mellőzzük ezt a megoldást
A közvetlen (vagy a szokásos terminológiával: inline) módon beillesztett kódok esetén az (X)HTML-dokumentumban az adott címke attribútumaihoz hozzáadunk egy vagy több újat. Az attribútum neve attól függ, hogy az illető elemnél milyen egér- vagy billentyűzetesemények megtörténtekor akarunk bizonyos JavaScript-kódokat lefuttatni. Így például ha bizonyos utasításokat akkor kell végrehajtani, amikor az egér az elem fölé ér, akkor az attribútum neve onmouseover lesz; ha akkor, amikor távozott az egér az elem fölül, akkor az onmouseout–ot kell használnunk. Ha pedig a kódnak akkor kell lefutnia, amikor rákattintottak az elemre, akkor természetesen az onclick attribútumba kell írnunk a megfelelő kódot. De ugyanígy indíthatunk JavaScript-kódokat billentyűeseményekre, ráadásul külön figyelve a gombok lenyomását (onkeydown), felengedését (onkeyup), illetőleg lenyomását és felengedését (onkeypress), de például úgynevezett elemek (szövegmező, kapcsoló, lista stb.) esetében még arra is figyelhetünk, hogy ezeket mikor jelölik ki (focus), mikor lépnek ezekről tovább (onblur) vagy például mikor változnak meg (onchange).
Mindez nagyon szép, mindez nagyon jó, mindez – amennyire csak lehetséges – kerülendő. Hasonlóan stílusokhoz, az (X)HTML-dokumentum címkéihez lehetőleg ne adjunk attribútumként JavaScript-kódokat.
Egy (kis) fokkal jobb, de még mindig nem az igazi megoldás, amikor úgynevezett beágyazott (embedded) kódokat, kódrészleteket használunk. A JavaScript-kódokat beágyazásnál ‹script›‹/script›, egész pontosan ‹script type="text/javascript"› ‹/script› címkék közé kell írnunk. A régebbi böngészők miatt érdemes magát a kódot a HTML-értelmező számára láthatatlanná tenni azzal, hogy a címkéket „megfejeljük” a HTML-megjegyzések kódjával, vagyis a JavaScript-utasításokat az alábbi módon „bekeretezni”:
‹script type="text/javascript"›‹!—
...
--›‹/script›
Ugyanis egyes régebbi böngészők, miután nem tudnak mit kezdeni a ‹script›‹/script› címkékkel, az ezek között található részt megpróbálják HTML-kódként értelmezni, és miután ez nem igazán fog sikerülni, egyszerűen kiírják szövegként az oldalra.
Egy fokkal jobb, de még mindig nem az igazi a beágyazott JavaScript
Ilyen beágyazott JavaScript-kódokat nemcsak a ‹head› ‹/head› részben helyezhetünk el, hanem bárhol a ‹body›-n belül is. Ez utóbbiakat a böngészők az oldal betöltésekor folyamatosan dolgozzák fel, így akár azt is megoldhatjuk, hogy egyes JavaScript-utasítások, funkciók, programok, már az oldal betöltődése előtt lefussanak, ezzel esetleg módosítva akár magát az oldalt is. Például így tüntethetünk el, vagy pont ellenkezőleg, jeleníthetünk meg egyes oldalrészeket abban az esetben, ha a felhasználó böngészőjében engedélyezett a JavaScript-programok futása.
A stíluslapokhoz hasonlóan a legszebb megoldást a csatolt JavaScript-állományok jelentik
Mindezen előnyök ellenére azt javasoljuk, hogy amennyire csak lehetséges, kerüljük a beágyazott JavaScript-kódokat, és – a stíluslapokhoz hasonlóan – használjunk csatolt (linked) JavaScript-állományokat. Ezeket az állományokat – eltérően a CSS-ektől – nem ‹link› tagekkel kell az (X)HTML-dokumentumokhoz csatolni, hanem majdnem ugyanolyan ‹script›-ekkel, mint amilyeneket a beágyazásoknál (nem) használunk. Az eltérés mindössze annyi, hogy a ‹script› címkén belül egy src attribútummal megadjuk a JavaScript-programo(ka)t tartalmazó állomány elérési útját, és hogy maga az elem üresen marad. Nagyon fontos, hogy eltérően a ‹head›-en belül található többi üres elemtől (pl. ‹meta›, ‹link›), a ‹script› elemnél nem használhatjuk a rövid formulát, a végére mindenképpen ki kell tennünk ‹/script› lezáró elemet.
Diszkrét linkelés
A következő leckében elkezdjük oldalunkat JavaScriptből alakítgatni – a lehető legdiszkrétebben. Ennek során először is megnézzük, hogy tudjuk pótolni a linkek XHTML-ben száműzött target attribútumát, hogyan díszíthetjük fel – némi CSS-segítséggel – a különféle linkeket a hozzájuk illő ikonokkal.
Cikkünk példái (a Lorem Ipsum Konferencia nyitóoldala) letölthetők innen!
