Forrás:

Forrás: http://www.doksi.hu

A webprogramozás alapjai

A webprogramozás alapjai Főiskolai jegyzet Dr. Medzihradszky Dénes

Figyelem! A jegyzet nyers verzióját tartja kezében, amely még számos hibát tartalmazhat és további szerkesztést igényel! A frissített változatok az ILIAS-ban lesznek elérhetők, de az eredményes vizsgázáshoz ennek ismerete elegendő

1


A webprogramozás alapjai Tartalomjegyzék: 1.

Bevezetés ............................................................................................................................3

2.

1.1. A tantárgy célkitűzése.................................................................................................3 1.2. Követelmények ...........................................................................................................4 1.3. Az Internet és a web kialakulása, története .................................................................4 1.4. Nyílt forráskódú szoftverek, szabad szoftverek ..........................................................6 1.5. A World Wide Web Konzorcium (W3C) ...................................................................7 1.6. W3C Recommendations .............................................................................................8 1.7. Ellenőrző kérdések/feladatok....................................................................................10 Leíró nyelvek ...................................................................................................................11

3.

2.1. HTML .......................................................................................................................13 2.2. XHTML ....................................................................................................................14 2.3. XML .........................................................................................................................62 2.4. Ellenőrző kérdések....................................................................................................65 Webszerverek működése, a szerver oldal......................................................................66

4.

3.1. Az Apache projekt ....................................................................................................68 3.2. Erőforrások azonosítása, URL, URI .........................................................................69 3.3. Szerver oldali programnyelvek .................................................................................73 3.4. Ellenőrző kérdések....................................................................................................74 Kommunikáció a kliens és a szerver között ..................................................................75

5.

4.1. TCP/IP ......................................................................................................................78 4.2. HTTP ........................................................................................................................80 4.3. Ellenőrző kérdések....................................................................................................82 Webalkalmazások tervezése, megvalósítása..................................................................83

6.

5.1. Dizájn és áttekinthetőség ..........................................................................................84 5.2. Navigálás ..................................................................................................................84 5.3. CSS .........................................................................Hiba! A könyvjelző nem létezik. 5.4. Ellenőrző kérdések....................................................................................................85 Programozás JavaScript nyelven...................................................................................86

7.

6.1. A nyelv szerepe.........................................................................................................86 6.2. JavaScript a weboldalon ...........................................................................................88 6.3. Dokumentáció ...........................................................................................................90 6.4. Nyelvi elemek ...........................................................................................................91 6.5. Űrlapok és JavaScript .............................................................................................101 6.6. Menük .....................................................................Hiba! A könyvjelző nem létezik. 6.7. Ellenőrző kérdések..................................................................................................104 Összefoglalás ....................................................................Hiba! A könyvjelző nem létezik.

8.

Irodalomjegyzék, referencia táblázatok, szabványok ................................................105

2



1.

Bevezetés

1.1. A tantárgy célkitűzése A tantárgy célja, hogy a különböző informatikai háttérrel rendelkező hallgatóknak elméleti áttekintést adjon a webes információ-továbbítás technikáiról és a webes információ prezentálás korszerű módszereiről, a dinamikus webes alkalmazásokról és azok fejlesztési kérdéseiről. Az elméleti ismeretek mellett a tantárgy nagy súlyt fektet a gyakorlati készségek elsajátítására, az alkalmazás tervezésre és felépítésére, a számításban vehető eszközökre és azok megfelelő alkalmazására. A tantárgy oktatása során az előadások keretében feldolgozott alapvető webes ismeretek kiterjednek a webszerverek működésétől kezdve a webes technológiák során használatos leírónyelvek ismeretére és a szerver, valamint kliens oldali programnyelvek megismerésére is, ez utóbbi elemek közül csak egy kerül készség szintű elsajátításra, a többi esetében megelégszünk azok ismeretével, a tervezés során elengedhetetlen átfogó ismeretek elsajátítására. Az alkalmazás tervezés, fejlesztés után érdeklődő hallgatóknak az alapismeretek elsajátításán túl lehetőséget kívánunk biztosítani a több számítógépen futó alkalmazások, rendszerek alapjainak megismerésére, a gyakrabban alkalmazott módszerek ismeretére. Gyakorlati példákon keresztül tipikus technológiákat mutatunk be, kliens oldalon elsősorban a JavaScript nyelv nyújtotta lehetőségek köréből. A dokumentumokat formailag leíró nyelveken túl tárgyalásra kerülnek olyan alapismeretek is, mint például az XML nyelv és technológia. Ennek központi szerepe van a korszerű informatikai megoldásokban, legyenek azok elektronikus ügyviteli portálok vagy egyszerű szabványos dokumentumok. A szerver oldalon alkalmazható technológiákat a tantárgy keretében csak ismereti szinten sajátítják el a hallgatók, azok készség szintű megértése és alkalmazása további specializált tantárgyak keretében történik.

3


A webprogramozás alapjai 1.2. Követelmények A tananyag elsajátításához elengedhetetlenek a következők: Számítástechnikai alapismeretek, a számítógépes hálózatok működésének alapjai, valamint dokumentum kezelési alapok és készségek. A tantárgy során programozási feladatok megoldására kerül sor, ezért nélkülözhetetlen a C-típusú programnyelvekben (Java, C, C++, PHP) szerzett programozási jártasság, az objektum fogalmának ismerete és az objektumok kezelése, alkalmazása. Sok esetben hivatkozunk az Interneten fellelhető részletes dokumentációkra, forrásokra, például a leírónyelvek, a webes technológiák szabványaira, az ezekkel kapcsolatos ajánlásokra. A hivatkozott weboldalakon való tájékozódáshoz elengedhetetlenül szükséges az angol nyelv minimum olvasási-megértési szintű ismerete. weboldalakon találhatók meg. Ismertnek tételezzük fel a Programozási alapok tantárgyat, az ismétlések elkerülésére gyakran történik hivatkozás a tantárgy tankönyvében fellelhető ismeretekre.

1.3. Az Internet és a web kialakulása, története Az Internet nem más, mint az Amerikai Védelmi Minisztérium kutatóintézetében (Advanced Research Project Agency, ARPA) a hatvanas években kifejlesztett távolsági számítógép-hálózat, amely 1969 decemberétől állt az egyetemek és a kutatóintézetek rendelkezésére. Az Internet azóta óriási változáson ment keresztül, legalábbis ami kiterjedtségét, gyorsaságát, illetve tartalmát illeti. Kiterjedtségének drasztikus növekedése hátterében – ami az elmúlt 10 évet öleli fel – a számítógép-hálózatok fejlődése áll, hiszen az Internet tulajdonképpen számítógépek hálózata, az internetes tartalom pedig az ezeken a számítógépeken tárolt információk összessége. A World Wide Web (www) egy független projektnek indult az 1990-es évek elején az Európai Nukleáris Kutatási Szervezetnél (CERN), Genfben, ahol akkor Tim BernersLee dolgozott és az Ő agyában született meg az ötlet egy olyan világméretű információs bankról, amely az akkor már létező Internet, mint szuperhálózatot hardverként használva lehetővé tenné praktikusan végtelen mennyiségű információ elhelyezését és elérését. Az Internet hálózatába kötött számítógépek kommunikációja az IP-cím alapján – ami az egyes számítógépeket egyértelműen azonosítja –, és a http protokoll segítségével – ami a számítógépek közötti kommunikációs szabvány – történik.

4


A webprogramozás alapjai Internet cím, IP-cím: a számítógépekhez rendelt azonosítót IP-címnek (IP address) nevezzük. Az IP-cím egy 32 bites szám, amelyet a leggyakrabban az úgynevezett pontozott tízes formában (dotted decimal form) írunk le, azaz négy darab 0 és 255 közötti decimális számmal. Például: 62.213.7.84. Ez alapján egyértelműen azonosítható egy számítógép az interneten. Mivel az IP-címek emberi fogyasztásra teljesen alkalmatlanok (legalábbis nehezen memorizálhatóak), ezért szükség volt valami olyan azonosító megalkotására, amely az IPcímre épülve, tulajdonképpen ehhez kapcsolódóan névvel látja el az interneten elérhető, információkat tároló számítógépeket. Kialakították tehát a domén-neveket, amelyek általában értelmesebb rövidítések (például: gdf.hu). A domén-nevek felépítésénél ugyanúgy szükség volt az egyértelmű azonosíthatóságra, mint az IP-címek esetében. Ezért országjelzéssel és az adott szervezet megjelölésével is ellátták, a kettőt pedig egy pont választja el egymástól. A gépek IP-címeinek domén-névhez rendelését úgynevezett névszerverek végzik. Domén (domain): részterület vagy címterület, önálló, betűkkel jelölt részterület az interneten. Ennek a könnyebben olvasható és értelmezhető névrendszernek hátterében a gépek számára érthető IP-címrendszer áll. Az ilyen címterületek ismertető jele a címben olvasható .hu, .de, .ch országkódok, vagy az .edu, .gov, .com stb. szakterületi rövidítés. A 90-es évek elejére tehető az internet olyan mértékű elterjedése, ami már lehetőséget adott kereskedelmi célok megvalósítására. Innen ered az Egyesült Államok-béli domén nevekben a .com végződés, ami a commercial (kereskedelem) szóból származik. Az amerikai kormányzat például .gov (government = kormányzat), a felsőoktatás pedig .edu (education = oktatás) végződésű domén-neveket használ. A legelterjedtebbek mellett ma már lehetőség nyílik arra is, hogy magánszemélyek is bejegyeztethessék saját domén neveiket, végződésre való korlátozás nélkül. A domén név bejegyzéseket központilag tartják nyilván, egy világméretű „domén bankban”. Ha például holnaptól saját domén név alatt szeretnénk publikálni az Interneten, választhatjuk a következő nevet: „kattints.ide”, vagy „kovacs.hajnalka.hu” – feltéve, hogy a domén név még nem foglalt, vagyis még nem regisztrálta előttünk más. A regisztráció körül kialakult problémákból adódóan évekkel ezelőtt elindult a domén nevekkel való kereskedés, ami egyesek számára gyümölcsöző üzletággá nőtte ki magát. Például ha valaki a britneyspears.com domén nevet mondjuk 10 évvel ezelőtt bejegyeztette volna, mára dollármilliókat kérhetne érte. 5


A webprogramozás alapjai A példaként leírt címben a már ismert domén néven kívül megtalálható a „www” rövidítés, amely az Internet legsokoldalúbb szolgáltatása, a World Wide Web rövidítése. A „www” rendszerben minden dokumentumot vagy más objektumot az URL, vagyis az univerzális forrásazonosító jelöl. A „http” (HyperText Transport Protocol) a World Wide Web szolgáltatók egymáshoz és a felhasználókhoz való kapcsolásához használt rendszer, kommunikációs szabvány. A http szabvány segítségével tudunk az Interneten böngészve számítógépünkre dokumentumokat, weboldalakat letölteni, majd ezeket a böngészőnk automatikusan – külön utasítás nélkül – meg is jeleníti.

1.4. Nyílt forráskódú szoftverek, szabad szoftverek Az Internet – érthető módon – először az amúgy is számítógéppel foglakozók körében vált népszerűvé. A kezdetekben nem álltak még rendelkezésre a grafikus felületű böngészők, így az egyszerű http kliensek működtetése némi szakértelmet igényelt, a számítógép felhasználók pedig sokszor a saját igényeiknek megfelelően alakították a netet. Így nem meglepő, hogy az első kommunikációk tárgya maga a számítógép, a szoftverek voltak és az első információcserék szinte kivétel nélkül a szigorúan vett felhasználók érdeklődésének megfelelő volt. Egymás segítése sokszor vezetett szoftvercserékhez, amit egy-egy lelkes programozó megszerkesztett a saját használatára, hamarosan a terülten dolgozók köztulajdona lett. Mivel az Internet első felhasználói egyetemek, kutatóintézetek voltak, a többi tudományágban megszokott nyíltsággal cserélték ki az információkat, az eszközöket. Így keletkeztek a nyílt forráskódú, publikus szoftverek, ahol a szerzők pont azzal a céllal publikálták a forrást is, hogy az majd valaki tovább építheti, bővítheti és így az eredeti szerző is egy jobb változathoz juthat az idők során. Hasonló elveken alapultak az Internetet működtető elemek, a kliensek, a webszerverek, így végül nem csoda, hogy az olyan alapvető eszközök, mint például az Apache webszerver nyílt forráskódban terjedtek. Az sem volt egy utolsó szempont, hogy mivel a forráskód lefordítása és a működő szoftver előállítása azon a gépen történt, amelyen a futtatására sor került, lehetőség nyílt a géphez a lehető legjobban illeszkedő futtatható változatot előállítani. Ezzel szinte minden gépen egyedi szoftver született, amely maximálisan ki tudta használni az adott gép hardver lehetőségeit. Ennek jelentősége ma már erősen csökkent, a nagysebességű processzorok, a bőven és olcsón rendelkezésre álló memória miatt, de a szabadon felhasználható, nyílt forráskódú

6


A webprogramozás alapjai szoftverek – amelyek ma már szinte kivétel nélkül elérhetők úgynevezett bináris disztribúcióban – megmaradtak és jelentőségük a Linux terjedésével szintén növekszik.

1.5. A World Wide Web Konzorcium (W3C) A W3C megalapítására 1994 októberében került sor Tim Berners-Lee vezetésével, azzal a céllal, hogy a web ki tudja használni az összes lehetőségét közös protokollok és nyelvek kifejlesztésével. Az alapítók együttműködést hoztak létre a Massachusetts Institute of Technology (MIT) és a European Organization for Nuclear Research (CERN) között, amely együttműködést nagymértékben támogatta az U.S. Defense Advanced Research Project Agency (DARPA) és az Európai Közösség is. Ehhez később számtalan új tag csatlakozott, ma a tagok száma több százra tehető1. A közös protokollok és nyelvek biztosítják a web töretlen fejlődését és a kifejlesztett standardok teszik lehetővé az általános használatát, a különböző böngészők és webszerverek együttműködését. A W3C egy úgynevezett tagi szervezet, a tagok hozták létre és működtetik. Ez a szervezeti mód biztosítja, hogy egyetlen szervezet se nyerjen teljes kontrollt a web fölött, annak fontosságára való tekintettel. Tag nagyjából bármely szervezet lehet, egyetemek, kutatóintézetek, gazdasági szervezetek. A fő tevékenységi terület a web standardizálása, bár fontos megjegyezni, hogy itt nem kötelező standardokról van szó, hanem inkább ajánlásokról. Egész pontosan nem is standardokról, hanem ajánlásokról (recommendations) beszélünk. Ennek betartása nem kötelező, de mivel az összes számottevő szoftverfejlesztő cég is tagja a W3C szervezetének, az általuk közösen megfogalmazott ajánlások betartása számukra is célszerű, ha a web lehetőségeit maximálisan kihasználni tudó alkalmazásokat kívánnak kifejleszteni. A W3C céljai között szerepel, hogy a web minden felhasználó számára hozzáférhető legyen, tekintet nélkül a kulturális, képzettségi, képességi és erőforrás különbségekre. A célok között az is szerepel, hogy a web egyaránt használható legyen olyan személyek számára, akik különböző fizikai korlátokkal rendelkeznek, mint például csökkent látóképesség.

1

http://www.w3.org/Consortium/Member/List

7


A webprogramozás alapjai Munkája során a W3C több más standardokkal foglakozó szervezettel is kapcsolatot épített ki, mint például az Internet Engineering Task Force, befogadta és terjeszti a Wireless Application Protocols (WAP) Forum javaslatait és együttműködik az Unicode Consortiummal is. A W3C szervezetének jelenleg három intézmény ad otthont, ezek a következők: −

Massachusetts Institute of Technology az Egyesült Államokban.

−

A Francia Nemzeti Kutatóintézet Európában

−

Keio Egyetem Japánban

1.6. W3C Recommendations A W3C által végzett legfontosabb munka a web specifikációk (úgynevezett javaslatok) kidolgozása, ezek az alkalmazott nyelveket vagy a megfelelő protokollokat is jelenthetik. Általában idetartozik minden építőelem, amit a webfejlesztés során felhasználhatunk. Ezeknek kifejlesztése egy jól bevált eljárás keretében történik, amelynek lépései a következők: − a W3C-hoz benyújtásra kerül egy javaslat, ami többnyire egy jól megalapozott ötlet valamely területen; − a W3C egy Feljegyzést publikál, amely alapján a tagok áttanulmányozzák a javaslatot − a W3C létrehoz egy Munkacsoportot, amely tagokból és meghívott szakértőkből áll. A munkacsoport meghallgatja különböző társaságok és társszervezetek véleményét, megvitatja az így beérkezett javaslatokat és létrehoz egy Munkapéldányt; − a W3C publikálja a Munkapéldányt; − amennyiben jelentős új javaslatok nem érkeznek be, a W3C egy Javaslat jelöltet állít elő és közzéteszi; − ebből a W3C egy Javaslat tervezetet állít össze és benyújtja a tagságnak és az igazgatónak jóváhagyásra; − a tagság és az igazgató formális jóváhagyásával a W3C publikálja az új Javaslatot. Így végül amíg a W3C publikál egy új web standardot (javaslatot) látható, hogy a specifikáció az egyszerű ötlettől kiindulva egy nagyon alapos kidolgozáson és jóváhagyáson ment keresztül. A kidolgozók többnyire azok a szoftverfejlesztők és web-orientált cé-

8


A webprogramozás alapjai gek, egyetemek, kutatóintézetek, amelyek számára létkérdés az új web standard elfogadása és betartása. Nem csak ilyen nagyléptékű ajánlásokat tesz a W3C, ajánlásai sokszor tipp jellegűek és szórólapokon is megjelennek. Az egyik ilyen ajánlás az úgynevezett Web Accessibility Initiative, azaz Web Hozzáférhetőségi Kezdeményezés, amelynek célja, hogy weboldalunkat mindenki számára tegyük elérhetővé. Ennek rövid összefoglalója a következő2: Képek és animációk: Használjuk az alt attribútumot a képi információk szöveges leírására. Képrégiók kezelése: Használjunk kliens-oldali régiómegadást (a map címke segítségével) a kiemelendő képrészletekhez és társítsunk ezekhez szöveges leírást. Multimédia: Tegyük elérhetővé az audio anyag szöveges változatát (feliratos formában és külön állományként is), a videó anyagokról pedig készítsünk leírást. Hivatkozások: A hivatkozás szövegezése legyen olyan, hogy a szövegkörnyezetből kikerülve is utaljon a hivatkozás céljára. Kerüljük például a kattints ide típusú linkeket. Oldalszerkezet: Használjunk fejlécet, listákat, és következetes struktúrát. Amennyiben lehetséges, használjunk CSS-t a szerkezet és a stílus leírásához. Grafikonok és diagrammok: Készítsünk kivonatot, vagy használjuk a longdesc attribútumot. Szkriptek, appletek és plug-inek: Nyújtsunk alternatívát arra az esetre, ha az aktív elemeket a böngésző nem támogatja. Keretrendszer: Használjuk a noframes elemet és a tartalomra utaló keretneveket. Táblázatok: Készítsünk olyan megjegyzéseket, amelyek a sorról-sorra olvasáskor a megértést segítik , valamint készítsünk összegzést a táblázatok tartalmáról. Ellenőrizzük le a munkánkat. Használjunk ellenőrző eszközöket, kérdőíveket és a részletes útmutatókat.

2

Az egyes fogalmakat majd a teljes anyag elsajátítása során tisztázzuk, itt inkább az ajánlások átfogó

jellege a figyelemre méltó. A teljes kezdeményezés megtalálható a www.w3.org/WAI/ oldalon.

9


A webprogramozás alapjai 1.7. Ellenőrző kérdések/feladatok Mi a W3C szerepe az Internet fejlődése szempontjából? Mit jelent egy W3C Javaslat? Keressen a W3C weboldalán javaslatokat a HTML, XHTML és a CSS témában! Mit tartalmaz a Web Hozzáférhetőségi Kezdeményezés?

10



2.

Leíró nyelvek

Természetesen a HTML, mint leírónyelv sem egyszerre jött létre, hosszú időbe telt, míg a kezdetektől eljutottunk a mai szabványos HTML 4.01 verzióig vagy az XHTML nyelvig. Az egész egy betűszóval az SGML rövidítéssel kezdődött. Ezek a betűk az angol Standard Generalized Markup Language kifejezés - azaz szabványos általános leírónyelv kezdőbetűi és a HTML ősének tekinthető leírónyelvet azonosítják 1986-ból. Érdemes megfigyelni, hogy ez az ős sem igazán régi, bár húsz év az informatika világában egy korszakot jelent. Bár jól dokumentált volt és a nagyközönségnek is rendelkezésére bocsátották, továbbá precízen képes volt leírni a dokumentum tartalmát - itt még a hangsúly nem a formázáson volt! - továbbá rendelkezett azzal a behozhatatlan előnnyel, hogy független volt az eszköztől, nehézkessége miatt nem terjedt el kellően és méltán utálták a kor informatikusai. 1989-ben megérkezett az első HTML, az 1.0 változat Tim Berners-Lee szerkesztésében, amit jókora viták követtek, de 1993 márciusára már sikerült megállapodni mindenben és a szabványos HTML nyelv megszületett. Ez a "szülés" olyannyira sikeres volt, hogy a HTML nyelvet már értelmezni képes első böngésző, a Mosaic már az 1993. év őszére el is készült, és azóta útja ha nem is töretlen, de mindenképpen sikeres. Lehet, hogy Tim Berners-Lee neve ismerősen cseng - de ez nem meglepő! Ő javasolta az Internet www szolgáltatásának létrehozását és ő írta az első programokat ennek működtetésére. Érdemeiért 2004-ben lovaggá ütötték és az esemény kapcsán sokat cikkeztek az Internetről, www-ről. Ma kicsit sablonosan fogalmazva őt tekintjük az Világháló feltalálójának. Közben létrejött a W3 Konzorcium (persze e mögött is Tim Berners-Lee volt) és ez vezette a fejlesztéseket, a szabványosítást. Igyekeztek bővíteni a nyelv lehetőségeit és így

11


A webprogramozás alapjai áttörték az 1.0 változatban még szigorúan vett korlátot, hogy csak a tartalom leírására összpontosítanak. A HTML 2.0 változatát az Internet Engineering Task Force HTML Munkacsoport fejlesztette ki 1996-ban, de ez a változat már annyira elavult, hogy a böngészők már nem is kezelik. A HTML 3.2 változat már mint W3C Javaslat került kibocsátásra 1997 januárjában. Az előzőkhöz képest ez már jelentős előrelépést jelentett, hozzávettek olyan, széles körben elterjedt Netscape elemeket, mint a fontok, táblázatok, appletek és még több mást is. Az egyik igen jelentős, ám később sok zavart okozó elem a font címke volt, amely felrúgta az addig többé-kevésbé betartott szabályt, nevezetesen a tartalom és a prezentáció (stílus) szétválasztást. A formázást biztosító elemek bekerülésével már nem csak a tartalom, hanem a külalak is leírhatóvá vált. Ez a verzió túlélte a nagy böngészőháborút is, amikor a Netscape és a Microsoft egymással nem kompatíbilis elemeket szerkesztett bele - ezért van az még ma is, hogy figyelni kell, melyik böngészőre fejlesztünk, illetve a böngésző-függetlenséget csak különböző trükkökkel és sok extra munkával lehet biztosítani. A felmerülő problémák megoldására a HTML 4.0 változatot a W3C 1997 decemberében adta ki, amit néhány apróbb korrekció követett 1998 áprilisában. A legfontosabb eleme ennek a változatnak a stíluslapok hozzáadása volt, amellyel helyre kívánták állítani a tartalom és a külső megjelenés szétválasztását. Ez annyira sikeres volt, hogy a jelenleg is használt változat, a 4.01 csak apróbb javításokat tartalmazott és így 1999-re kialakult a végleges, ma is használatos változat. Így amit a következő oldalakon tanulni fog, az mind erre a változatra, pontosabban az ebből kifejlesztett XHTML nyelvre lesz igaz elsősorban - persze az elemek jó része a korábbi böngészőkkel is értelmezhető lesz. Ahhoz képest, hogy ennyi változatot élt át a HTML nyelv és milyen gyorsan változott, felmerülhet a kérdés, hogy mi a helyzet jelenleg. Nos a HTML nyelv fejlesztése leállt és a W3C ettől kezdve nem fejleszti tovább. Helyette azonban az XML elterjedésével párhuzamosan fellépett az igény egy szigorúbb követelményű, jobban értelmezhető leírónyelvre. Így tehát a fejlődés újabban más irányba megy már. Bevezették a kötöttebb szintaktikájú XHTML 1.0 nyelvet, amely sokkal szigorúbb elvárásokat testesít meg a kódszerkesztőtől, nem olyan "laza", mint a korábbi szabványok. Ez lényegében újraformálja a HTML nyelvet XML alapokon, és a jelenleg is érvényes változatra a W3C 12


A webprogramozás alapjai javaslat 2000. januárjában jelent meg. A szigorú szintaktika miatt alkalmas a mobilkommunikációban is, ahol a szűkös memória és képernyő lehetőségeket kell optimálisan kihasználni. A másik fejlődési irány az XML, amely viszont csak formájában hasonlít a HTML-re - ebből is látszik, hogy milyen zseniális ötlet volt a karakteres, olvasható tartalmi megjelenítés bevezetése - ám a technika nem az adat (dokumentum, szöveg) tartalmi, formai megjelenítését hivatott leírni, hanem tetszés szerint bővíthető címkéivel az adatok összefüggéseit írja le, az adatokat jellemzi. Például megmondja, hogy az adatként szereplő "hallgató" alatt diákot, rádióhallgatót vagy éppen az eszközt (fülhallgatót) értjük. Használatával az adatokhoz nem kell külön dokumentumot készíteni, amely ezt rögzíti, hanem az adatok továbbítására, tárolására szolgáló fájl is tartalmazza az információt. A fejlődés azonban nem állt meg a fentebb említett nyelveknél. Ma már a leírónyelvek egész családjáról beszélünk, amelyek azonos elveken, de egészen más dolgokat is "közölni" tudnak. Így például rendelkezésre áll a SMIL leírónyelv, amely segítségével multimédiás prezentációkat tudunk létrehozni, vagy a SVG (skálázható vektorgrafika, Scalable Vector Graphics), amely lényegében XML nyelv, de adottak a címkék és így az erre felkészített böngészőben grafikai elemeket lehet megjeleníteni a segítségével.

2.1. HTML A HTML nyelv alapeleme a címke, vagy angol nyelven a tag. Ezek nyitó (<) és záró (>) kacsacsőr, vagy "kisebb mint" illetve "nagyobb mint" jelek közé zárt egyszavas angol nyelvű dokumentum-elemnevek, vagy azok rövidítései (például címke jelzi, hogy a dokumentum törzse kezdődik. Minden, a dokumentumot alkotó szövegelem esetében meghatározzuk annak típusát (bekezdés, táblázat része, stb.) és megadjuk a dokumentumon belüli elhelyezkedését. A legutolsó HTML nyelvi változatban megadhatjuk a szövegelem külső megjelenését is, azaz betűtípusát, karakterét, színét, nagyságát is. A leírónyelvek jellegéből következik, hogy olyan módon kell a dokumentumon belül az egyes szövegrészek megjelenítését megadni, amely minden böngésző által egységesen értelmezhető. Ez a megadási mód a kérdéses szövegrész címkék közé zárása, egy nyitó és az ennek megfelelő zárócímke között. A nyitócímke belsejében különböző attribútumok helyezhetők el, ezek módosítják a megjelenítést, vagy az elem azonosítására szolgálnak. Példaként álljon itt egy HTML dokumentum részlete:

13


Ez a szövegrészlet Ariel betűtípussal, piros színnel, a böngésző által biztosított 1-6 skálán közepes méretű betűkkel és félkövér (bold) betűvel fog megjelenni. A szövegelem egy bekezdést (paragrafus) alkot, azaz új sorban kezdődik és az utána következő szöveg is új sorban lesz, kis helyköz kihagyással a sorok között

A címkék segítségével a táblázat, vagy a HTML űrlapok egyes elemeinek leírásától az egyszerű bekezdésekig sokféle elemet találunk, ezek közül a gyakrabban előfordulókat készség szintjén is ajánlatos ismerni, de gyakorlati célokra érdemes egy-egy bőséges referenciát kéznél tartani. Ez utóbbi lehet nyomtatott könyv, de a téma jellegének megfelelően az fájlban vagy az Interneten elérhető anyag a leginkább célravezető. Mivel a HTML nyelv értelmezése a böngésző feladata, nagy szerepe van a böngészőbe épített intelligenciának az esetleges nem szabályos leírás értelmezésében. Vannak továbbá olyan elemek is, amelyekre nem igaz a nyitó - záró címke pár és csak nyitócímkéje van. Ilyen a gyakrabban használtak közül a vízszintes vonal
, vagy a sortörés utasítás a
, illetve a képek megadására szolgáló elem. Ennek belsejében nagymennyiségű információt közölhetünk a kép megjelenítésével kapcsolatban, annak értelmezéséhez. Kötelezően meg kell adni a hivatkozott képfájl relatív elérési útját és nevét, de megadható a kép mérete, a képhez megjelenő szöveg, ami leggyakrabban a képet leíró szöveg és a látássérültek által használt böngészőprogramok ennek a leírásnak alapján tudják "felolvasni" a weboldalt. Ezzel azonban még messze vagyunk a HTML leírónyelv elsajátításától és bizonyos okoknál fogva nem is foglalkozunk vele többet. Az ok valójában egyszerű. Bár a HTML nyelv ma rendkívül népszerű, gyakran használt leírónyelv, a webes tartalmak leírásán kívül is, napjainkban már elavult. Szerencsére van helyette más és arról a másról a külső szemlélő nem is tudja eldönteni, hogy ez valóban egy másik leírónyelv!

2.2. XHTML Mi a HTML nyelv legfontosabb szerepe? Formázott megjelenítést biztosítani a dokumentumoknak úgy, hogy a formázást leíró kód standardizált legyen, azaz a különböző olvasó/értelmező programok egységes megjelenítést adjanak. Egyszerű feltétel, de nem könnyű megvalósítani. A HTML nyelv az Internet gyerekkorának nyelve és hasonlóan a gyerekekhez, sok mindent elnéztünk neki. Ehhez viszont szükséges volt az intelligens

14


A webprogramozás alapjai értelmezésre és mivel itt időnkét ki kellett találni a szerkesztő elképzelését, az nem mindig sikerült teljes mértékben. Bevezetésre került tehát az XHTML nyelv, amely ezeket a félreértelmezéseket hivatott visszaszorítani. A betűszó az EXtensible HyperText Markup Language szavakból készült, és célja a HTML helyettesítése, nyugodtan mondhatjuk, hogy kiszorítása. Ugyanakkor nem csak a neve csaknem azonos, hanem a nyelv is. Nyivánvaló, hogy úgy a legegyszerűbb egy népszerű dolog helyettesítése, ha azt mondhatjuk, az új gyakorlatilag ugyanaz, csak másképp hívjuk… Kijelenthetjük tehát, hogy az XHTML a HTML szigorúbb és tisztább változata, amelyben a HTML elemeket az XML (lásd később) eszközeivel írjuk le. Bár nevében szerepel az extended (kiterjesztett) szó, semmi kiterjesztés nincs a nyelvben a HTML nyelvvel összehasonlítva. A szigorúság annyit jelent, hogy minden címkét egyformán kezelünk, azaz nem alkalmazunk záróelem nélküli címkét. Amennyiben a címke tipikusan egysoros, itt is gondoskodunk a lezárás jelzéséről. Nem fedhetnek át a címkék, de (majdnem) tetszés szerint egymásba ágyazhatóak. Erre később majd a címkék tárgyalásánál láthatunk példákat. Nem tűnik túl lényegesnek, de az XHTML kódban minden címkenév kisbetűvel írandó és nem keverhető nagybetűs írásmóddal. Ennek oka egyszerűen az, hogy a leírásra használt XML nyelv kisbetű/nagybetű érzékeny több programozási nyelvhez hasonló módon és így az egységes írásmód ebből logikusan következik. Természetesen a böngésző egyaránt fel kell, hogy ismerje a nagybetűvel írt elemeket is, a régi HTML szabványok alkalmazhatósága miatt, de mi próbáljuk meg egységesen kisbetűvel szerkeszteni XHTML dokumentumainkat. Egy validálás azonnal jelezni fogja a keveredéseket! Néhány példa a címkékre és azok lezárására az XHTML nyelvben attribútumok nélküli többsoros címke, további címkéket tartalmazhat attribútumokat is tartalmazó többsoros címke, további címkéket, szöveget tartalmazhat attribútumokat is tartalmazó egysoros címke
attribútumok nélküli egysoros címke

15


A webprogramozás alapjai Természetesen az XHTML leírása is egy W3C Javaslat, annak első, 1.0 változata 2000ben került publikálásra és jelenleg már a 2.0 változat van kidolgozás alatt. Nézzük meg tehát, hogyan épül fel egy XHTML dokumentum, melyek a gyakrabban használt címkék és hogyan használjuk ezeket. Alább látható egy XHTML oldal kódja. Ha ezt a kódot beillesztjük egy szöveges fájlba és azt akarmi.html néven elmentjük, majd egy böngészőben megnyitjuk, csak annyit látunk belőle, hogy Feldolgozott XHTML kód. Bármely böngészőben azonban lehetőség van arra, hogy megtekintsük az oldal forrását, azaz az alábbi kód ismét megjelenik. Ez böngészőtől függő módon vagy a Jegyzettömb eszközzel jelenik meg (Internet Explorer), vagy specifikus, szintaktikailag kiemelt módon (Firefox). XHTML kódolás <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> Feldolgozott XHTML kód

Mi történik tulajdonképpen? A böngésző a megjelenítés előtt végigolvassa a szöveges kódot és végrehajtja az abban megadott utasításokat. Az első sor - több más között jelzi, hogy XHTML típusú dokumentumról van szó és ez a World Wide Web konzorcium által kiadott 1.0 XHTML verzió szerinti "Document Type Declaration, DTD", azaz dokument típus deklaráció szerint készült. Ebből a böngésző sokat megtud, például azt, hogyan kell kezelnie a dokumentumot, milyen régebbi verziókat és szabványokat vegyen figyelembe. A tényleges kód ez után jön és a html címke jelzi a dokumentum kezdetét, ami általában egy fejrésszel indul (head címke). A fejrészben ismét fontos információk találhatók a böngésző számára, de ezekből csupán a title címke által azonosított (a címkék felépítéséről majd később bőségesen lesz szó) szövegrész kerül meg-

16


A webprogramozás alapjai jelenítésre, ez a cím, ami a böngészőben az ablak legfelső keretében megjelenik. A meta címke sorából a böngésző megtudja, hogy milyen a tartalom - jelen esetben ez szöveges/html és egy nagyon fontos utasítás következik a böngészőnek: milyen karakterkészletet használjon a megjelenítéshez. A karakterkészlet fontossága nem hangsúlyozható eléggé! Az iso-8859-2 teszi például lehetővé a normál "ű" és "ő" betűk megjelenítését, más karakterkészletben a "kalapos" ű, ő jelenik meg. Fontos, hogy a helyes karakterkészlet legyen beállítva!3 A megjelenítendő információ és annak leíró kódja a body címke után következik, azaz itt a böngésző elolvassa a kódot és az utasításoknak megfelelő betűtípussal, nagysággal és színnel, illetve kiemeléssel jeleníti meg. Ez az, amit látunk is majd a böngésző felületén. Amennyiben új oldalra megyünk tovább - akár egy linket követve, akár új URL megadásával - a böngésző az aktuális ablakban az új oldalt értelmezi, azt jeleníti meg. Ne felejtsük el, hogy a megjelenítés mindig két dimenzióban történik, új oldalt - kivéve, ha új ablakot nyitunk - csak a régi helyére tölthet be a böngésző! Ahogy ez elvárható az XHTML nyelv esetében, a body részt lezárjuk () majd lezárjuk a dokumentumot magát is (). Az így elkészült jól formált dokumentum már egyszerűbb böngészőkkel is megjeleníthető. Fontos megjegyezni, hogy alapértelmezetten az XHTML oldalon belül nincs lehetőség a szöveg kliens oldalról történő megváltoztatásra, az XHTML nyelv önmaga nem rendelkezik ezzel a képességgel, mindig teljes dokumentum újraírásról lehet csak szó. Ugyanakkor az XHTML dokumentum minden eleme azonosítható a Dokumentum Objektum Modell segítségével és így külső programozói segédeszköz, a JavaScript nyelv alkalmazásával ezek az objektumok módosíthatók. Ez azonban már a dinamikus weboldalak területe és a jelen kurzusnak egy későbbi részében foglalkozunk majd vele. Így JavaScript alkalmazása nélkül böngészőnk csak akkor tudja módosítani az oldalt, ha megváltoztatott kóddal újra lekérjük azt a szerverről vagy újra behívjuk a böngészőnkbe (frissítés).

3

Sajnos jelenleg éppen egy átmeneti időszakot élünk, amikor egyrész már erősen terjed az unicode, azaz

a két bájton tárolt karakterkódolás, de még számtalan esetben a szoftverek nem ismerik vagy nem tudják jól megjeleníteni. Ezért egyenlőre törekedjünk a minimálisan jó karakterkészletre és csak akkor használjunk magasabb szintű karakterkészletet, ha megbizonyosodtunk az alkalmazott böngészők képességeiről.

17


A webprogramozás alapjai XHTML dokumentum – head elem

Lássunk hozzá a címkék módszeres megismerésének és kezdjük a sokszor elhanyagolt, ám rendkívül fontos head elem tanulmányozásával! Íme egy példa4, amelyben összezsúfoltunk miden fontosabb lehetőséget: A webprogramozás alapjai <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> <meta http-equiv="refresh" content="20" /> <meta name="keywords" content="webszerkesztés, XHTML, oktatás" /> <meta name="description" content="Tanulmányozzuk a head elemben megadható elemeket és azok szerepét" /> <meta name="author" content="Medzihradszky Dénes" /> <meta name="generator" content="Jegyzettömb" /> <script language="JavaScript1.2"> function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); }

Az első fontos dolog, amit észre kell vennünk, hogy a head elem belsejében újabb elemeket/címkéket hozhatunk létre! Ezt nevezzük az XHTML elemek egymásba ágyazhatóságának és szigorú szabályok vonatkoznak arra, hogy egy-egy elem belsejében milyen

4

A szövegben megadott példák általában az éppen tárgyalt területet emelik ki, ezért sohasem teljes do-

kumentum részletek. Így szándékosan hiányoznak belőlük azok az elemek, részletek, amelyek egy valós esetben nem hanyagolhatók el, de itt a példa kiemelése érdekében eltekintünk ezektől.

18


A webprogramozás alapjai más elemeket helyezhetünk el. Az elem belseje alatt természetesen a nyitó és a záró címke közötti dokumentumrészt értjük. A webprogramozás alapjai

A title címkék közé írt szöveg az egyetlen, ami látható a head elem belsejében leírtak közül, ez ugyanis a weboldal címe, ami megjelenik a böngésző felső keretén. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

A meta címkével jelölt elemnek nincs záró címkéje, csupán a címke belsejében, a "kacsacsőrök" között helyezhetünk el utasításokat a böngésző számára. Ahogy fentebb már láttuk, ez vonatkozhat a dokumentum tartalom típusára (szöveg/html), vonatkozhat a karakterek kódolására, hogy a megfelelő módon tudjuk megjeleníteni a karaktereket. Itt a karakterkódolásnak a legújabb módját mutatjuk be, az UNICODE alapú kódolást, ezért adtuk meg az UTF-8 karakterkészletet. <meta http-equiv="refresh" content="120" />

Szintén a meta elemekkel irányíthatjuk az oldal betöltését, újratöltését illetve másik oldalra ugrást is beállíthatunk. A fenti kód szerint a böngésző az oldalt 120 másodpercenként frissíti. Ennek akkor van például értelme, ha valahol dinamikus elemeket akarunk elhelyezni az oldalon vagy a szerveren változik meg rendszeresen a tartalom. A frissítés úgy dolgozik, mint egy időkapcsolt hiperlink, azaz a beállított idő elteltével a böngésző újra lekéri az oldalt a szerverről. Ha az oldal közben változott a szerveren, akkor az újat kapjuk meg, ha nem, a régi oldal lesz ismét betöltve. Ez viszont a böngészőt "nem érdekli" ő csak végrehajtja az utasítást… Erre jó példát találunk egyes weblapokon, ahol valamely időben változó folyamatot mutatnak be webkamerák segítségével és a szerveren rendszeres időközönként új képek jelennek meg. Ilyen például a jelenleg (2007 február) is működő Kilauea tűzhányó Puu Oo kráterének belsejét bemutató http://hvo.wr.usgs.gov/cam/index.htm weboldal, amely 180 másodperces frissítéssel dolgozik. Látogassa meg a linket és tekintse meg a weboldal forrását is - ugyanakkor érdemes elgondolkodni azon, hogy az Internet segítségével betekintést kaphat egy tűzhányó mindennapjaiba is. A Kilauea Hawaii szigetén található, hozzánk képest az időeltolódás 12 óra, azaz ne lepődjön meg, ha éjszakai képeket talál éppen! 19


A webprogramozás alapjai Egyes webmesterek előszeretettel alkalmazzák ezt a meta elemet a látogatók irányítására és rövid időt, vagy nulla időt beállítva más oldalakra küldik a szörfölőket. Erősen javasoljuk azonban, hogy ha valami rendkívüli oka nincs, ezt az új oldalra ugrást ne alkalmazzuk! Erre két nagyon jó ok is van: (1) ha rövid vagy nulla idővel átirányítunk, ott többé nem lehet visszafelé navigálni a vissza gomb segítségével, mert ugyan megtörténik a visszaugrás, de a beállított átirányítás miatt ismét visszadob a rendszer oda, ahonnan elindultunk; (2) a látogatókat általában rendkívül idegesíti, ha nem hagyjuk őket a kedvük szerint böngészni! A head elemen belül nincs korlátozva az információt hordozó meta elemek száma. Minden informatív meta elem egységesen egy name attribútumból és annak tartalmából (content) áll. Vannak szokásos attribútumok, mint például a "keywords" (kulcsszavak) és a "description" (leírás). Ezek tartalmazzák a kereséskor elsődlegesen figyelembe vett tartalmi információkat, így megadásukkal az indexelő robotok munkáját segítjük, tehát érdemes átgondoltan megadni.5 Ezeken túl tetszőleges name - content párokat hozhatunk létre egy-egy meta elemen belül. Gyakrabban alkalmazzuk a szerző nevének megadását, vagy megadjuk az XHTML kódot legyártó szoftvereszköz nevét és még számos egyéb információt közölhetünk a meta címke segítségével. Ezek természetesen nem kötelező elemek, csupán lehetőséget biztosítanak kereséshez, XHTML fájlok feldolgozásához. <script language="JavaScript1.2"> function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); }

A script nyitó és záró címke közé - a nevének megfelelően - úgynevezett szkripteket, azaz interpretált programozási nyelven írt kódokat helyezhetünk el. Ezeket nem csak a head elemen belül használhatjuk, hanem a bárhol a body elem belsejében. Jelentős különbség van azonban az elhelyezésben, mert a head részben nem történik megjelení-

5

Füllenteni azonban nem tanácsos! A modern keresőrobotok büntetőpontokat adnak - tehát hátrébb so-

rolnak - azért, ha a kulcsszavak között vagy a leírásban megadott szavak, kifejezések nem fordulnak elő az oldalakon!

20


A webprogramozás alapjai tés - azaz a programrészlet lefut, de nem produkál kimenetet - viszont a body belsejében megadott script elemben elhelyezett kód az adott pozícióban produkálhat látható kimenetet, ugyanis a szkriptek értelmezése és végrehajtása az XHTML oldal betöltésével egyidejűleg zajlik. A bemutatott példán egy JavaScript függvényt adtunk meg a script címkék között, amelyet a body elemen belül bárhonnan meghívhatunk a megfelelő paraméterekkel és egy új ablakot fog nyitni számunkra.

Szintén a head elemen belül hivatkozhatunk további dokumentumokra, amelyek az egész weboldalra vagy akár az egész webhelyre vonatkozó utasításokat tartalmazhatnak. Az első hivatkozás egy úgynevezett lépcsős stíluslapra ("Cascading Style Sheet, .css") történik, amelyen be lehet állítani az egész webhelyre érvényes betűtípust, betűméretet vagy beállítható az egyes XHTML elemek szokásostól eltérő megjelenítése is. A második hivatkozás viszont egy HTML oldalra történik, amelyet még külön névvel (az id attribútum értéke!) is azonosítunk. A stíluslapok a HTML szabvány 4.0 verziójával jelentek meg és rohamosan tért hódítottak. Segítségükkel egyszerűbb és főleg rugalmasabb módon történhet a nagyobb webhelyek külalakjának meghatározása és lehetőséget biztosítanak a változtatásokra is. Sok stílus-meghatározó attribútum és paraméter szerepét vették át, ezeket korábban csak a HTML kódból tudtuk állítani. Stílusokkal, stíluslapokkal részletesen majd egy későbbi fejezetben foglalkozunk. Ha már a stíluslapok előkerültek, nézzük meg, hogyan adhatunk meg az egész lapra érvényes stílust, anélkül, hogy az egyes XHTML elemek nyitó címkéjében kelljen megadni: <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt }

A fenti kódrészlet a head elemen belül elhelyezett style elem segítségével a body elemhez rendel hozzá 10 pont nagyságú Arial betűtípust. Ne keverjük össze még véletlenül

21


A webprogramozás alapjai sem az XHTML font címkéjén belül megadható betű tulajdonságokkal, sem a megadás formája, szintaktikája, sem az érvényességi köre nem hasonlít!

A fenti elem szokatlan formátumú, hiszen nem tartalmazza a szokásos szöveges nyitó záró címkéket. Szerepe is speciális, ez ugyanis nem címke, hanem egy megjegyzés, segítségével a böngésző által figyelembe nem veendő kommentárokat, megjegyzéseket helyezhetünk el az XHTML oldalon. Ez az elem sem korlátozódik a head elemre, bárhol alkalmazhatjuk az oldalon! Jelentősége akkor nő meg, ha hosszú és bonyolult XHTML oldalakat hozunk létre vagy ami szintén nem ritka, több személy dolgozik együtt egy oldalon és az ilyen beszúrt megjegyzésekkel nagymértékben segíthetjük egymás munkáját. Áttekinthetőbbé teszi az oldalakat és néhány év elteltével mi is hálásan fogadjuk majd, amikor bonyolult, több egymásba ágyazott táblázatot tartalmazó oldalunkat kell módosítani. Ne legyünk hát lusták, minden komolyabb szerkesztőeszközzel egyszerűen elkészíthetők ezek a megjegyzések és később sok munkát és fejtörést takarítanak meg számunkra. Az XHTML kódban a dokumentum típusleírásán kívül minden leíró vagy megjelenítésre váró információ egy-egy elemen belül helyezkedik el, az egyetlen megjegyzés kivételével. Így az oldal feldolgozásának sorrendjében folytatjuk az elemek tanulmányozását a body elemmel. XHTML dokumentum – body elem

Gyakorlatilag minden ezért az elemért van, hiszen az ebben közölt információ publikálása az egész megjelenítés célja. Magában a body elem nyitócímkéjében számos attribútum elhelyezhető. Ezek egyrészt az oldal formai megjelenítését (háttérszín, háttérkép, betűszín és egyéb színek) biztosítják és a body elem egészére hatnak, de az oldal betöltése, mint eseményhez kapcsolódó tevékenységek meghívása is az itt elhelyezett utasításokkal történik. Minden olyan esetben például, amikor az oldal betöltésekor egy ablak bukkan fel valamilyen információs tartalommal, itt, a body elem nyitócímkéjében elhelyezett utasítás hajtódik végre. A body elemen belül helyezkedik el minden olyan elem, amely az egyes dokumentumrészek megjelenítésre, vagy a dokumentum elrendezésére vannak hatással. Ezeket vizsgáljuk meg a következő fejezetekben.

22


A webprogramozás alapjai XHTML dokumentum – szövegtagolást biztosító elemek

A body elemen belül elhelyezhető elemek egyik csoportját alkotják az úgynevezett szövegtagolást biztosító elemek. Ezek felelősek a dokumentum szerkezetének kialakításáért. Vizsgáljuk meg a legfontosabbakat, de előre bocsátom, hogy nem foglalkozunk az összes elem összes attribútumával, mert ez messze meghaladná a jegyzet lehetőségeit. Bárki, aki webmesterségre adja a fejét, gondoskodjon megfelelő referencia anyagokról és azokban bármikor utána nézhet az adott elem összes alkalmazási lehetőségének.

A paragrafus, azaz bekezdés címkéi. Előtte-utána nagyobb hely marad ki és persze mindig új sort kezdünk ezzel az elemmel.
Az Internet népszerűsége rohamosan nő

A nyitó címke belsejében igazítási utasításokat helyezhetünk el, "left, right, center" értéket adva az "align" attribútumnak. Ugyancsak a nyitó címke belsejében elhelyezhetünk egyedi azonosítót is, amelynek segítségével az egész dokumentumban azonosíthatjuk az elemet és a "class" attribútumnak értéket adva az XHTML elemhez - azaz az elem által meghatározott dokumentumrészhez - stílusosztályt rendelhetünk. Ezzel állítható be a kérdéses dokumentumrész megjelenése. Az elemen belül egyéb elemeket is elhelyezhetünk, például szövegformázási, elhelyezési elemeket vagy akár táblázat elemet is.

Nagy szükség van jól képzett webmesterekre

A div elem nagymértékben hasonlít a paragrafusra, de nem visz be sortávolság növelést a szövegbe. Elsősorban akkor használjuk, ha a szövegre bekezdésváltás nélkül akarunk speciális formázást rákényszeríteni. A paragrafushoz hasonló módon a nyitó címke belsejében itt is elhelyezhetünk igazítást, azonosítást és hozzárendelhetünk stílusosztályt is.

23



Ez az XHTML elem a közrezárt dokumentumrészt egységesen kezeli és - részben böngésző beállítástól függő módon - behúzást végez a kérdéses dokumentumrészen.

Azonban itt még nem merülnek ki lehetőségei. Mint minden egységet képező elem esetében, ennek belsejében is elhelyezhetők egyéb elemek (például div, p) és a megjelenés ezek hatásainak az összessége lesz.


Itt például div elem segítségével középre igazítottuk a kiválasztott szövegrészt és a div elemen belül bekezdést is meghatároztunk. Ezek jelentősége ismét a stílusosztályok hozzárendelésénél és a szövegrészek egymáshoz viszonyított elhelyezésénél jelentkezik.

<span> <span>Nagy szükség van jól képzett webmesterekre

Érdekes módon került bele ez a címke a HTML, majd innét az XHTML fegyvertárába. Míg a fentiekben tárgyalt elemek kisebb-nagyobb mértékben a szöveg elrendezését, megjelenítését is érintik, a span címkével jelölt elem kizárólag kiegészítő attribútumokkal hatásos, az elem szerepe önmagában csupán annyi, hogy ki tudjunk jelölni egy dokumentumrészletet, amelyre speciális, stíluslapokkal beállítható formázást akarunk ráhúzni. A jegyzetben már eddig is nagyon sokszor hivatkoztunk stílusokra, stíluslapokra, holott erről még nem beszéltünk részletesen. Belefutottunk abba az ördögi körbe, hogy az XHTML elemek átfogó ismerete nélkül még nem tudunk erről érdemben beszélni, hiszen ezek hatásaikat az elemeken át fejtik ki, ugyanakkor a stíluslapokban meghatáro24


A webprogramozás alapjai zott stílusokat az XHTML elemek nyitó címkéiben kell megadni. Egyenlőre állapodjunk meg abban, hogy a stílus egy, a webszerkesztők által megadható megjelenítési utasításcsoport, azaz formázás, és ennek létrehozásáról majd az XHTML elemek megismerése után tudunk érdemben beszélni, a jegyzet egy későbbi fejezetében.

<pre> és Ha már korábban megpróbálkozott HTML, vagy XHTML szerkesztéssel, valószínűleg már rájött arra, hogy a szövegrészek tagolása nem történhet meg szóközök, tabulátorok beütésével – ezeket szöveges dokumentumokban sem illik alkalmazni, de azért sokszor előfordul - mert az XHTML értelmezője nem veszi figyelembe az egynél több szóközt, a tabulátorral meg egyáltalán nem foglalkozik – egész pontosan egyszerű szóköznek tekinti. Vannak azonban olyan esetek, amikor szükség van egy dokumentumrészlet eredeti formájában történő visszaadására. Ezt a feladatot látja el a pre elem. Megőrzi az összes eredeti formázást, a szöveg elrendezését. Ne feledjük azt sem, hogy a Világháló legszorgalmasabb látogatói, felhasználói a számítógépes szakemberek, programozók, és kicsit a saját szükségleteik szerint alakították a HTML, majd ebből átvéve az XHTML kódot is. Ezért vezették be a code elemet, amely ugyan böngésző függő módon, de egységes kinézetet ad az egyes programkódoknak, amelyeket a Világhálón közreadnak. Gyakran közöltek/közölnek programkódokat, ahol az áttekinthetőség kedvéért szigorúan strukturálni kell a forráskódot, erre pedig kiválóan alkalmas a pre elem. Nézzük meg ezek használatát a gyakorlatban egy Java programrészlet példáján! (A programrészlet egyébként nem tárgya a webprogramozás oktatásnak, csupán ez akadt a kezembe, amikor programozási példát kerestem a code elem használatára.) XHTML elemek <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> 25 Forrás: http://www.doksi.hu A webprogramozás alapjai //ez a kódrészlet elemben van public class HelloWorldApp { public static void main(String[] args){ System.out.println("Szia vilag"); } } <pre> //ez a kódrészlet <pre> elemben van public class HelloWorldApp { public static void main(String[] args){ System.out.println("Szia vilag"); } } A kétféle kód szinte teljesen azonos, annyi különbséggel, hogy a pre elemen belül nem használunk címkét – ez az elem jelzi a böngészőnek, hogy a feldolgozás során itt új sort kell kezdeni - és mégis sortöréseket tapasztalunk majd a böngészőben történő megjelenítéskor. A pre elem minden esetben pontosan úgy jeleníti meg a közézárt szöveget, ahogyan az a forráskódba belekerül. Ezeket az elemeket ismertetve egyúttal kihasználjuk a lehetőséget, hogy bemutassuk a speciális karakterkódok használatát. Mindkét elemben a kacsacsőröket a megfelelő kódokkal adtuk meg (e nélkül a böngésző címkének értelmezné a code vagy a pre szavakat!) és a code elemben még az idézőjel helyett is annak speciális HTML kódja áll. A böngészőben a következőt láthatjuk: 26 Forrás: http://www.doksi.hu A webprogramozás alapjai A pre elem hűen megőrizte a szöveg tabulálását, betűméretét és típusát és áttekinthetőbb a programkód, mint a korábban megismert formázások esetében. A code elem esetében a betűtípus az elemre jellemző úgynevezett proporcionális font lett, de a szöveg elrendezését nem őrizte meg. Érdemes megjegyezni hát, hogy ha el akarjuk kerülni az XHTML formázásokat, használjunk pre elemeket az XHTML kódban a szövegelrendezés megoldására. Van persze hátulütője is, mert amennyiben a szöveg nem fér el a böngészőablakban, nem törik a kerethez és egyszerűen levágja az ablak jobb széle, amelyben megjeleníteni akarjuk. Próbálja ki, hogy a pre elemben elhelyezett szöveget a böngészőjében megjelenítve a jobb oldali ablakkeretet húzza beljebb, mint a szöveg jobb széle! Mit tapasztal? Ez és az utána következő elem különleges abban az értelemben, hogy a meta címkéhez hasonlóan nincs záró párja, csupán egy nyitó címkéből áll, az XHTML esetében kötelező zárást a címke belsejében hajtjuk végre. A meta elemmel szemben azonban a br esetében semmiféle attribútumot nem lehet elhelyezni a címke belsejében, ez mindig önmagában áll. Neve az angol "break" (törés) szó rövidítése, és funkciója is ez, sortörést helyez el a szövegben. Nem azonos a p "paragrafus, bekezdés" elem által generált új sor kezdéssel, mert ez a sortörés nem jár a sortávolság növekedésével. Minden olyan esetben ezt használjuk, ahol tömör felsorolásra van szükségünk, vagy éppen a szöveg tago- 27 Forrás: http://www.doksi.hu A webprogramozás alapjai lása igényli a sortörést. Ha figyelmesen megtekinti a korábbi kódrészleteket, talál bennük bőven ilyen elemet. Ez az elem a br elemhez hasonlóan "magányos" és feladata érdekes módon nem a szöveg megjelenésének beállítása, hanem egy vízszintes vonal ("horizontal row") elhelyezése a szövegrészek között. Ez még abból az időből maradt fenn a HTML szabványban, amikor a képmegjelenítés gyerekcipőben járt. Ma már nem nagyon használják a színes weblapok világában, de egyszerűbb esetekben, ahol a szöveges információ a lényeg, egyszerű alkalmazni. Az alábbi kód egy 2 képpont vastag, árnyékolás nélküli, kék színű, az oldal háromnegyedét kitevő, szimmetrikusan középre igazított vonalat határoz meg: A csoportosítás szempontjából ide tartozna a táblázat is, amely elvileg a szövegrészek elrendezését hivatott megoldani, de ennek fontossága miatt egy külön fejezetben foglalkozunk majd vele. XHTML dokumentum – szövegformázást biztosító elemek Elérkeztünk az egyik legfontosabb XHTML címke pároshoz, a font elemhez. Ennek segítségével állíthatjuk be a szöveg betűtípusát, színét, nagyságát. Maga a font elem persze erre önmagában nem alkalmas, a fenti címkepáros csupán kijelöli azt a tartományt a szövegben, amelyre a paraméterekkel (attribútumokkal) megadott formázások vonatkoznak. Egy teljes formázáshoz az alábbi font elemre van szükség: Erre vonatkozik a formázás Látható tehát, hogy megadhatjuk a betűtípust (font) magát (face attribútum), a betűszínt (color attribútum) és a betűméretet (size attribútum) - ez utóbbit a HTML-ben kifejlesztett speciális hétfokozatú skálán, amelyben a "2" méret felel meg körülbelül a szöveg28 Forrás: http://www.doksi.hu A webprogramozás alapjai szerkesztőkben alkalmazott, a nyomdászoktól átvett pontskálán a "10" méretnek. Felmerülhet rögtön az a kérdés, hogy miért adunk meg rögtön háromféle betűtípust? Ennek oka az, hogy nem tudhatjuk előre, milyen fontkészlettel rendelkezik a böngészőprogram, amelyik megjeleníti majd az oldalunkat. Ezért először az "Arial" típusú fontot javasoljuk, ha ez nem áll rendelkezésre, akkor a "Helvetica" fontot (hasonlít az Arialhoz) és ha egyik sem áll rendelkezésre, akkor bármilyen, nem talpas fonttal jelenítse meg az oldalt6. Később még sokat foglalkozunk majd a fontok, stílusok használatával, mert a weboldalak, mint kiadványok megjelenését jelentősen befolyásolja a fontválasztás. A szín és a méret megadása egyszerűen átlátható, a színeknél a gyakoribb színeket angol nyelvi megfelelőjükkel adhatjuk meg, illetve a később tárgyalt színkódokat is használhatjuk és ez utóbbival sokkal finomabb színárnyalatokat is meghatározhatunk. A hx címke a heading elemet vezeti be, ahol az x az 1-6 tartományba eső számot jelent. Ez az XHTML elem egyszerű méretformázást tesz lehetővé, úgynevezett címsorokat határoz meg, ahol az "1" számmal jelölt címsorral jár a legnagyobb betűméret, míg a "6" számmal jelölthöz tartozik a legkisebb (ez egy elég komoly ellentmondás, amikor épp most volt szó arról, hogy a méretmegadáshoz speciális, hétfokozatú skálát kell használni az XHTML szerkesztésben, de hát ez a hagyomány). Ugyanakkor viszont, ha megelégszünk ezzel a formázással, gyorsan, kevés kóddal meghatározhatók a betűméretek. Nézzünk rá egy példát, hogyan néznek ki az így meghatározott címsorok a böngészőben: 6 A szövegszerkesztő programok, mint a Word, az OpenOffice szövegszerkesztője, vagy bármely magasabb szintű szerkesztőprogram számos nyomdaipari szakkifejezést vett át. Ezeket a programokat - pontosabban ezek nagyobb testvéreit, az úgynevezett kiadványszerkesztő (DTP, azaz DeskTop Publishing) programokat intenzíven használja a nyomdaipar - gondoljunk csak arra, mennyivel könnyebb a szedés művelete szoftver segítségével, mint kézzel - és ezért a szövegszerkesztők, de még a HTML/XHTML szerkesztők is illeszkednek a nyomdaipar nyelvezetéhez. Alapvetően két gyakori fontcsaládot különböztetünk meg, a talpas fontokat, ahol a betűk mindegyike a lefelé futó vonalak, szárak végén talpszerűen kiszélesedik (például Times) illetve a talp nélkülieket, ahol a szár lefutása egyenes, nincs kiszélesedő talp (Arial). 29 Forrás: http://www.doksi.hu A webprogramozás alapjai A megjelenítést pedig a következő kód végzi: Címsorok <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> címsor 1 címsor 2 címsor 3 címsor 4 címsor 5 címsor 6 Látható, hogy minden címsor, az eltérő méret ellenére egységesen félkövér stílussal jelenik meg. Ez a formázási utasítás tehát lehetőséget nyújt gyors és egyszerű stílusbeállításokra, érdemes megjegyezni! 30 Forrás: http://www.doksi.hu A webprogramozás alapjai Most, hogy már szó került a félkövér betűstílusról, tanuljuk meg ennek közvetlen beállítását is a b (bold, azaz félkövér) elemen keresztül. Amit a fenti címke pár közé írunk, az félkövéren fog megjelenni, az egyéb beállítások figyelmen kívül hagyásával. Ezt az elemet szintén gyakran használjuk, ha valamit ki akarunk emelni a weboldalon. Ha kipróbálja az itt megadott kódokat, hamar rájön arra, hogy az egyes formázási utasítások nem kapcsolják ki a már beállított stílust, így ezek összeadódnak és a megjelenítés ezek együttes hatása szerint történik meg. Természetesen az azonos hatást kiváltó elemek nem fokozzák egymás hatásait, azaz a hx elemmel beállított címsorra hiába húzunk rá még egy b elemet, ettől a betű megjelenítés nem lesz kétszer olyan vastag. A másik szintén gyakran használt stílusformázó elem, a nyomdaiparból átvett, dőlt betűs szedésre utal az i elem (italic, azaz dőlt betűvel szedett). Használata pontosan megegyezik az előző bekezdésben bemutatott b elem használatával, de természetesen itt már igaz az együttes hatás, ha például mindkettőt használjuk, akkor félkövér dőlt betűs szedést kapunk. <sup> és <sub> Gyakran előfordul, hogy szeretnénk valamit alsó vagy felső indexbe tenni és erre az XHTML éppen úgy lehetőséget biztosít, mint a Word szövegszerkesztő, illetve mondhatjuk, hogy bármely komolyabb szövegszerkesztő. Ezt a célt szolgálja ez a két elem. Amint az a névből ki is található, a sup elem a "superscript" angol szó (a.m. "felső írás") rövidítése, míg a sub elem a "subscript" ("alsó írás") rövidítése. Ezen elemek használatával tudunk például egy kémiai képletet összehozni, vagy a matematikában a hatványozást tudjuk így ábrázolni. 31 Forrás: http://www.doksi.hu A webprogramozás alapjai Az ábrán látható szövegmegjelenítés mögött az alábbi XHTML kód áll: alsó és felső index <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> <style type="text/css"> font-family: Arial, Helvetica, sans-serif; font-size: 10pt} --> A mészkő (kémiai nevén kalcium-karbonát) tapasztalati képlete: CaCO<sub>3 A 10 hatványai: 10<sup>2 = 100 10<sup>3 = 1000 10<sup>4 = 10000 10<sup>5 = 100000 10<sup>6 = 1000000 32 Forrás: http://www.doksi.hu A webprogramozás alapjai , <small> , <strong> Valószínűleg most már elért arra a szintre, hogy komolyabb magyarázat nélkül, csupán a címkék nevéből kitalálja ezek hatását. Nem véletlen a leíró nyelvek népszerűsége, mert a forrás elolvasása önmagában is informatív és utal a dokumentum szerkezetére illetve a dokumentum egyes részeinek formai megjelenítésére. Ezek a címkék ismét azt a törekvést testesítik meg, hogy gyakoribb stílusokat egyszerűen lehessen beállítani. Ezeknek az elemeknek egységesen az a legértékesebb tulajdonsága, hogy mindig az aktuális betűmérethez igazodva csökken illetve nő a méret. Nézzünk rájuk egy-egy példát: Az eddig tanultak alapján egyszerűen átlátható a kód ehhez a megjelenítéshez, már valószínűleg Ön is megírhatná. Lássuk együtt a teljes kódot: small - big - strong <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" /> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt} 33 Forrás: http://www.doksi.hu A webprogramozás alapjai <small>Ezt a szöveget small elembe tettük. Ezt viszont big elembe! <strong>Íme a strong elem hatása! XHTML dokumentum – kép elem Az ember erősen vizuális beállítottságú, szemünk az elsődleges érzékszervünk. Egész kultúránk, életünk szempontjából az információközlés legfontosabb formája az ábrázolás, a képi információ közlése. Ahogy hangulati hatásokban, érzelmekben a zene, a dallam szerepe tekinthető elsődlegesnek, az oktatás, tanítás során a reál ismeretek átadása képek, ábrák nélkül – ha nem is lehetetlen – nagyon megnehezül. A képek azonban informatikai szempontból nem gazdaságosak, adatként tárolva túlságosan sok helyet igényelnek és így átvitelük is időigényes. Ez azonban részben a képtömörítő eljárásoknak (gif, jpg, png) köszönhetően, részben a hardverek fejlődésének és így a sávszélesség korábban elképzelhetetlen megnövekedésének köszönhetően napjainkban már nem jelent korlátot. Ahogy a technikai lehetőségek kialakultak, a webes dokumentumok fontos eleme lett a kép. Nem csak az információközlésre használjuk azonban, hanem a weboldalak esztétikai megjelenítésére, az ember művészi ambícióinak kielégítésére is. Ma már elképzelhetetlen egy, a nagyközönségnek szóló weboldal grafikai elemek nélkül. Így a web dokumentumok leírónyelvébe is bele kellett építeni a képmegjelenítési lehetőségeket. Ennek XHTML kódja a következő: Látható, hogy ismét egysoros címkével van dolgunk, ahol a címkén belül számos fontos attribútum található. A címke egy kép forrásfájlt ad meg, amelyet a böngésző címke dokumentumon belüli elhelyezkedése alapján a címke helyén jelenít meg. A forrás természetesen hivatkozhat abszolút vagy relatív elérési úttal a megjelenítendő képre, így tetszőleges URI adható meg. Alapértelmezetten a relatív hely az img elemet tartalmazó fájltól számítódik, a gyökérkönyvtárig visszalépkedhetünk az elérési úttal. A beilleszt- 34 Forrás: http://www.doksi.hu A webprogramozás alapjai hető képfájlok típusa a böngésző megjelenítési lehetőségeitől függ, általában gif7, jpg vagy png típusú képfájlok jeleníthetők meg. Az alt attribútum valóban egy alternatív lehetőséget kínál fel, itt a kép rövid leírása adható meg. Ezt két okból is ajánlatos megtenni. Az első, hogy ennek megadásával - ha magának a képnek a megjelenítése nem sikerül- a böngésző a kép helyén a leírást jeleníti meg, így a felhasználó nem csak azt látja, hogy hiányzik egy kép, hanem információt kap a hiányzó kép tartalmáról is. A második ok még jelentősebb, sőt validálási szempontból nélkülözhetetlen is az alt attribútum kitöltése. A látáscsökkent vagy látássérült felhasználók számára készült felolvasóprogramok a képi információ helyett az alt attribútum tartalmát olvassák fel és csak így biztosítható, hogy ezek a felhasználók is közel teljes képet kapjanak az oldalról. Íme egy példa: A szélesség és magasság megadása a legtöbb HTML/XHTML szerkesztőeszköz esetében automatikus, azaz a kép beillesztésekor nem csak a relatív elérési út kerül bele, hanem a méretinformáció is. Ez azonban felülbírálható, mert a képet a böngésző nem az eredeti méretben, hanem az itt megadott méretben fogja megjeleníteni. Ennek különleges jelentősége van a grafikai elemeken alapuló dizájn esetén. A képek, mint információ-hordozók eredeti jelentősége mellett nagyon sokszor alkalmazzuk a képeket, mint dizájn elemeket. Egy mai, grafikailag is igényes weboldal megszerkesztése első lépésben a grafikus feladata, aki képként készíti el a weboldalt, megteremtve a szöveges elemek számára is a megjelenítéshez szükséges helyet, megtervezve a betűtípust, háttérszínt és minden egyebet. Ezt követően az így elkészített kép alapján a grafikai szerkesztőprogram állítja elő az XHTML kódot a képet kisebb részekre bontva és azokat egymáshoz illesztve például táblázat segítségével. A legenerált kód persze még korrekciókra szorul, a generált képelemeket a webszerkesztésben jártas grafikus a megjelenítés szempontjából átvariálhatja. Azok az elemek, ahol szöveg lesz, természe- 7 A gif (Graphical Interchange Format) képtípus licensszel védett, így törvényes használata a licensz meg- szerzését igényli. Érdekessége, hogy ezzel a képtípussal úgynevezett animált képek is létrehozhatóak, azaz a megfelelő szerkesztőeszközzel előállíthatók több képből álló sorozatok, amelyeket a böngésző a bele kódolt gyakoriságnak megfelelően váltogat és így mozgóképi hatások érhetők el. A jpg és a png szabadon felhasználható. 35 Forrás: http://www.doksi.hu A webprogramozás alapjai tesen nem képként, hanem szerkeszthető felületként kerülnek a kódba, a szükséges színbeállításokat a generálás során előállított színkódok biztosítják. Az img elemekben hivatkozott képek pixelre pontosan illeszkednek, tehát két egymás mögött elhelyezkedő elem képe egységes kép látszatát kelti, ha például a képek magassága azonos volt. Amennyiben függőlegesen illeszkednek a képek, a táblázat segít, itt ugyanis az egyes cellákban elhelyezett képek a megfelelő cellabeállítások mellett szintén pontosan illeszkednek. Erre majd a táblázat tárgyalásánál térünk ki részletesen. XHTML dokumentum – kép részekre bontása, a map elem Bizonyos értelemben ez az elem is a képekhez tartozik, legalább is szoros kapcsolatban van velük. A map elem segítségével egy adott kép "feltérképezhető" azaz meghatározott darabokra bontható és az egyes darabokhoz különböző linkek kapcsolhatók. Vegyük például a következő megjelenésű képet, amelyen a piros téglalaphoz, a kék körhöz és a zöld sokszöghöz egyaránt egy-egy link kapcsolódik. Íme egy ilyen felbontott kép hivatkozása és a képhez kapcsolódó map elem kódja. Kattintson a kép egyes részeire a linkekhez <map id="navkep" name="navkep"> 36 Forrás: http://www.doksi.hu A webprogramozás alapjai <area shape="rect" coords="2,2,119,104" href="piros.html" target="_blank"> <area shape="circle" coords="240,54,44" href="kek.html" target="_blank"> <area shape="poly" coords="137,112,205,130,206,197,53,198" href="zold.html" target="_blank"> Látható a kódból, hogy az alapul szolgáló tetszőleges kép kiegészül egy usemap attribútummal, amelyben hivatkozunk a képet használó map elem azonosítójára. Ez az azonosító a jelenleg is folyó HTML – XHTML átalakulás miatt, a teljes böngésző kompatibilitás elérése érdekében mind a map elem name és id attribútumában szerepel. Különböző alakú területeket jelölhetünk ki, a formának megfelelő minimális koordináták megadásával. Így a téglalap esetében (rect) a bal felső és a jobb alsó sarok koordinátáit adjuk meg, a kör esetében a középpont koordinátáit és a kör sugarát, sokszög esetén viszont nincs más lehetőség, mint az összes csúcspont megadása koordinátákkal. Behoztunk viszont egy új attribútumot a target megadásával. Ez az attribútum valójában a href attribútum kiegészítése és az adja meg, hogy a hivatkozott oldal hova töltődjön be – ebben az esetben a _blank érték egy új ablak (üres ablak = blank) megnyitását és a hivatkozott fájl oda történő betöltését írta elő. XHTML dokumentum – táblázat elem Az információk áttekinthető elrendezésének egyik fő formája a táblázatos elrendezés. Ezzel egyértelműen meghatározható vizuális eszközökkel, hogy mely adatok tartoznak össze. Azt is rögtön meg kell jegyeznünk, hogy ez csak a vizuális összerendezést biztosítja, a táblázatos formában feltüntetett adatok lényegi összefüggéseit az XHTML eszközeivel nem tudjuk leírni. Egy táblázat általánosságban címsorból és adatsorokból áll, az előbbi tartalmazza az adatok megnevezését, az adatsorok viszont az adatok egyes előfordulásainak értékeit tartalmazzák. Egy tipikus táblázat leírása az XHTML eszközeivel magába foglalja a táblázat deklarálását és a teljes táblázatra vonatkozó attribútumok megadását a táblázat nyitócímkéjén belül, a címsor kijelölését és a címsor celláinak megadását, majd sorokat és a sorokon belül táblázat cellákat határozunk meg. Az alábbi kód egy olyan táblázat XHTML kódja, amely három oszlopból áll, a címsorból alatt két sora van, a táblázat középre rendezett a képernyőn és a teljes képernyő felét 37 Forrás: http://www.doksi.hu A webprogramozás alapjai foglalja el. Minden táblázat cellában a lényegi információ a cella határától számítva minden irányban 6 pixelre kezdődik és a táblázat sorai és oszlopai között nincsenek szegélyek, azaz egész pontosan a szegélyek vastagsága zéró értékű. balszélső cím cella középső cím cella jobbszélső cím cella balszélső cella középső cella jobbszélső cella balszélső cella középső cella jobbszélső cella Ennek a kódnak a böngészőben a következő a megjelenítése: 38 Forrás: http://www.doksi.hu A webprogramozás alapjai Rögtön látható, hogy a kódban megadott táblázatfej és táblázat törzs formázást is biztosít, egész pontosan a táblázat fejen belül megadott (table header) címkék közé írt szöveg félkövéren jelenik meg, míg az adatsorok (table data) címke párjai az oldal alapvető betűtípusát használják. Az is látható, hogy a félkövér betű mellett a címsor cellákban egy automatikus középre rendezés is történik. Ez így együtt gyors formázást biztosít és a legtöbb esetben elég is a jól áttekinthető táblázatos megjelenítéshez. Természetesen a táblázatok kódjában a (table head) és a (table body) megkülönböztetése nem szükségszerű, ezek nélkül is jó táblázatokat lehet készíteni. Az alábbi kód a fenti táblázat kétsoros változata, ahol nincs címsor megadva: balszélső cella középső cella jobbszélső cella balszélső cella középső cella jobbszélső cella Az adatok rendezése mellett a táblázatos elrendezés hasonlóan fontos szerepe az oldalak szerkezetének biztosítása. Az egyes oszlopok pixelben kifejezett pontos mérete is megadható, képeket belehelyezve a cellák mintegy kimerevíthetők, a képek mérete adja a cella pontos méretét is, így tetszőleges oldalszerkezet elkészíthető. A keretes elrendezésekkel szemben ezek jobban navigálhatók és így rendkívül népszerűek minden olyan esetben, ahol a grafika jelentős szerepet tölt be az oldalon. Nem csak a szigorúan vett cellákkal lehet dolgozni, mind vízszintes, mind függőleges irányban a cellák egyesíthetőek és így mindenféle elrendezés megvalósítható. 39 Forrás: http://www.doksi.hu A webprogramozás alapjai egyesített sorok egyesített oszlopok A táblázatban 1 pixeles szegélyt állítottunk be a láthatóság érdekében és két újabb HTML/XHTML entitással, speciális kóddal ismerkedtünk meg, az í a hosszú í helyett áll és az entitás a nem sortörő szóközt (non-breaking space) jelenti. Ez utóbbi nélkül a böngészőben megjeleníteni kívánt táblázat üres cellái (karaktert/képet nem tartalmazó cellák) nem jelennek meg megfelelően. XHTML dokumentum – felsorolás elem Ez az elem a nevének és a rövidítésnek megfelelően egy listát jelenít meg. Egyszerű felsorolás lesz az eredmény, ahol a sorok mind külön-külön jelennek meg, de mivel a böngésző nem tudja eldönteni, mit is akarunk, sorszámozott vagy csak bekezdésekből álló listát, csupán a felsorolást jeleníti meg8. 8 Ez nem teljesen igaz az Internet Explorer esetében, mert a beleépített szabályok szerint a külön nem deklarált típusú listát ez a böngésző felsorolás-jellegű listának tekinti és ennek megfelelően jeleníti meg. Ezen persze lehet vitatkozni, hogy meddig menjen el a böngésző a feltételezésekben… 40 Forrás: http://www.doksi.hu A webprogramozás alapjai A képen látható listának a HTML kódja így néz ki (a lista elemeiként megadott szöveg illusztrációs célokat szolgál ☺): Mi kell ahhoz, hogy valaki jó webmester legyen? Fantázia Szorgalom Az internet ismerete Készség a tanulásra Ez azonban nem elégít ki minket, mert ilyen elrendezést a elem segítségével is előállíthatunk, semmi "listaszerű" nincs benne. Alapvetően kétféle listát használunk a dokumentumokban, ezek mindegyike előállítható a leírónyelv eszközeivel. Az első esetben karakterekkel kiemelt listát készítünk. Ez már megfelel a követelményeknek, a felsorolás elemei bekezdéssel és karakterrel kiemeltek, a felsorolás bevezető sora is kiemelt, a sortávolság növekedett. Nézzük meg az XHTML kódot: Mi kell ahhoz, hogy valaki jó webmester legyen? Fantázia Szorgalom 41 Forrás: http://www.doksi.hu A webprogramozás alapjai Az internet ismerete Készség a tanulásra Itt már nem csak listaelemeket, hanem egy egész, úgynevezett rendezetlen listát ("unordered list", ul) határoztunk meg. Elemei a már korábban megismert címkével kijelölt listaelemek és mivel "rendezetlen", a bevezető karakter alapértelmezetten egy teli kör (Ugye már nem is kell külön említenünk, hogy ez is megváltoztatható stíluslapok segítségével? ☺) Természetesen arra is van lehetőség, hogy számozott, azaz rendezett listát ("ordered list", ol) hozzunk létre, ehhez csupán a listát meghatározó HTML elemet kell megváltoztatni. Íme a kódja: Mi kell ahhoz, hogy valaki jó webmester legyen? Fantázia Szorgalom Az internet ismerete Készség a tanulásra 42 Forrás: http://www.doksi.hu A webprogramozás alapjai XHTML dokumentum – színek a weboldalon Színek sokfelé szerepelhetnek egy weboldalon, akár betűszínként, akár háttérszínként. Háttérszíne sok elemnek lehet, így megállapítható háttérszín az egész oldalra a body elem nyitó címkéjén belül, de bármelyik táblázat cellára is megállapítható egyedi szín. Ezek természetesen egymást felülírják, alapvetően a gyerekobjektumra megállapított háttérszín felülírja a szülőobjektumra megállapított színeket. Kétféle módon adhatunk meg színértéket az egyes elemekre, használhatjuk az alapvető képernyőszínek angol elnevezéseit, mint például yellow, red, green, magenta vagy ezek módosított neveit (lightblue, lightgreen, stb.). Ennél pontosabban adhatjuk meg a színeket, ha az additív színkeverést használva minden szín esetében azok három bájton ábrázolt hexadecimális kódját adjuk meg karakteres formában. Ennek pontos szerkezete a következő: #vörös_komponens zöld_komponens kék_komponens (szóközök nélkül!) Azaz például #CC6633, ami egy világos barna szín kódja. Fontos, hogy a kód mindig hat karakteres formában legyen megadva, vezető nullákkal ha szükséges, mert kevesebb karakter esetében nem várt színeket kaphatunk. A böngésző ugyanis az előrébb levő komponensekhez két-két karaktert olvas ki… A színek megfelelő alkalmazása grafikai-tipográfiai hozzáértést igényel. Általában elmondható, hogy a világos háttéren sötét betűk jobban olvashatók, mint fordítva. Ha mindenképpen muszáj sötét háttéren például fehér betűket alkalmazni, akkor a jobb olvashatóság érdekében sokszor érdemes félkövér betűket használni, hogy ugyanazt a kontrasztot elérjük. Hasonló megfontolásokból ilyen esetekben érdemes az egyenes lefutású, azaz sans serif betűket választani sötét háttér előtt. XHTML dokumentum – keretek (frame, iframe) A leíró nyelvek fejlődése érdekes görbén ment át az elmúlt években. A kilencvenes évek közepén, végén nagyon népszerű volt az úgynevezett keretes elrendezés, ami először tette lehetővé, hogy a weboldalt ne kelljen teljes mértékben frissíteni az új dokumentumrészek betöltése esetén, hanem csak a változó részt kelljen lekérni a szerverről. Ez nagymértékben gyorsította a lekéréseket, mivel az oldal jelentős fájlméretű statikus grafikai elemeit csak egyszer kellett letölteni, és ez a korlátozott sávszélességet figyelembe véve nagy előny volt. A sávszélességek azonban nagyságrendekkel bővültek és a 43 Forrás: http://www.doksi.hu A webprogramozás alapjai keretes rendszerek nem bizonyultak egyszerűnek a navigáció szempontjából, a keresőrobotok számára nehezen voltak követhetők a linkek a kereteken át. Ennek következtében visszatértek a táblázatos elrendezések, ahol ugyan a táblázat elemeit újra le kellett kérni a szerverről, - de ezt részben a kliens tároló rendszere, a cache tárolja – ugyanakkor a mai sávszélességek esetében nem okoz problémát a letöltés. Nagy előny továbbá az egyszerű navigáció és így a keresés számára teljes mértékben rendelkezésre álló oldalak adta információáramlás. A teljesség érdekében vizsgáljuk meg a keretes rendszerek felépítését és működését. Az alábbi kódból látható, hogy egy speciális weboldalról van szó, amely a html nyitó- és zárócímkék között a már megszokott head és body elemek helyett egy úgynevezett keretkészletet (frameset) tartalmaz. A keretkészlet nyitó címkéjében adhatjuk meg, hogy az oldalt függőlegesen (cols, azaz oszlopok) vagy vízszintesen (rows, azaz sorok) kívánjuk felosztani. Az alábbi felosztást értelmezve a teljes képernyőt (egészen pontosan az ablakot!) három oszlopra osztottuk, amelyek közül az első kettő az ablak 25-25 százalékát teszi ki, a harmadiknak jut a maradék (*). Az így felosztott ablak három részére egyegy keretet definiálunk és megadjuk a keretet kitöltő HTML/XHTML fájl relatív elérési útját és nevét. Ebből már látható, hogy az egyes XHTML fájlok egyenként cserélhetők, a target = "_self" meghatározás a linkekben az adott fájl helyére tölti be az új oldalt9. Nem elég persze, ha csak oszlopokra vagy csak sorokra tudjuk osztani az ablakot. Keretkészletet viszont elhelyezhető a keretkészleten belül is és ilyenkor a keretkészlet veszi el egy-egy keret helyét. Könnyen belátható, hogy a klasszikus fejléc, jobb vagy bal 9 És rögtön itt van az első komoly probléma! Mivel a részoldalon olyan fájlokra is hivatkozhatunk, azokra mutató linket is elhelyezhetünk, amelyeket nem az így rendelkezésre álló korlátozott helyre szántak, teljesen el lehet rontani az oldal kinézetét. 44 Forrás: http://www.doksi.hu A webprogramozás alapjai oldali statikus rész és érdemi rész elrendezésű weboldalakon minimum két, egymásba ágyazott keretrendszert kell létrehozni az alábbiak szerint. Keretrendszerek <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> <noframes> Érdekességként megjegyezzük, hogy a legtöbb szerkesztőprogram automatikusan beilleszt egy olyan kódot is, amit értelmezni tudnak azon böngészők, amelyek a keretrendszereket nem képesek kezelni (<noframes> ). Ilyen azonban ma már csak elvétve akad. Viszonylag jól működő keretes alkalmazást általában úgy érdemes megvalósítani, hogy a bal oldali mezőben egy menüt helyezünk el, a felső rész a folyamatosan szükséges információ és a törzsmező a bemutatásra váró információ helye. Ilyen lehet például egy oktatóprogram elrendezése, a fejlécben az oktatási anyagra, a belépett hallgatóra vonatkozó információ és a bal oldali oszlopban a navigálást biztosító tartalomjegyzék. Ehhez hasonló elrendezésű az ILIAS elektronikus tananyag felülete is. Egy különleges keretbeillesztést tesz lehetővé az úgynevezett iframe elem, amely az inline frame rövidítése. Itt is megadhatjuk azt a forrásfájlt, amelynek tatalma a keretben megjelenik, és megadhatjuk a keret méretét, tovább sok egyéb tulajdonságát. Ezzel 45 Forrás: http://www.doksi.hu A webprogramozás alapjai mintegy ablakot hozhatunk létre az ablakon belül, de mégis viszonylag egyszerű a kód és jól átlátható. <iframe src ="iframe.html" width="200" height="100"> Az XHTML lehetőségeinek csak egy részét érintettük, de már ez is bőven elég az alapvető munkákhoz. Speciális feladatokat további speciális elemekkel is megoldhatunk, de nem árt tanulmányozni, hogy az egyes böngészők a különleges elemeket hogyan kezelik. Hogyan állítható elő egy XHTML oldal? Itt az ideje, hogy a sok elméleti ismeret után megismerkedjünk egy XHTML oldal gyakorlati elkészítésének menetével - előre bocsátjuk, hogy kezdetben csak egyszerű szerkezetű oldalakat fogunk készíteni és majd ismereteink gyarapodásával jutunk el a bonyolultabb oldalakhoz. Többféle megközelítés lehetséges. Mivel az XHTML oldal lényegében speciális kódokkal leírt szöveges dokumentum, az XHTML címkék ismeretében bármilyen egyszerű szövegszerkesztő program - például Windows Jegyzettömb - segítségével megírható a kódja és a böngésző ennek megfelelően meg fogja jeleníteni. Fontos, hogy csak egyszerű szövegszerkesztő alkalmazható, amely nem használ formázási utasításokat, mert ezeket a böngésző nem képes értelmezni. Egy .doc fájlt például csak úgy tud a böngésző "megjeleníteni", hogy meghívja a kliens gépen található Word programot. Megoldhatjuk a dolgot úgy is, hogy Word program segítségével megírjuk a kódot majd a fájlt egyszerű szövegfájlként mentjük el. Ilyenkor a Word "elfelejti" a beállított formázásokat és csak a karaktersorozatokat adja vissza, amelyet viszont már a böngésző értelmezni képes. Ugyanakkor a Word vagy az Excel is alkalmas HTML elkészítésére, sőt a PowerPoint dokumentum kimenete is lehet HTML, de ne feledjük, ezekben az esetekben az Office programcsomagjába beépített fordítóprogramok állítják elő az XHTML kódot. Ehhez a megfelelő programokból egyszerű módon a mentés html formában menüpontot kell 46 Forrás: http://www.doksi.hu A webprogramozás alapjai kiválasztani. Ezeket ki lehet próbálni, most csak annyit mutatunk be, hogyan néz ki egy alapvető HTML kód Word 97 programból előállítva, azaz .html formába elmentve10: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <META NAME="Generator" CONTENT="Microsoft Word 97"> <TITLE>Feldolgozott HTML kód Feldolgozott HTML kód Az rögtön látható, hogy a kód nem XHTML kompatibilis, az egyes címkék nagybetűsek, egyes attribútumok nem kerültek idézőjelek közé. Ez nem túl meglepő, hiszen a Word 97 idején még nem volt elfogadott az XHTML nyelv. Egyébként sok változás nem tapasztalható, a HTML címkék ugyan nagybetűsek - ez teljesen mindegy a böngésző szempontjából, mert a HTML nyelv szintaktikája nem különbözteti meg a kis- és nagybetűket - de kisebb formai változtatásokkal egyértelmű a kód. A generátor program beszúrt viszont egy plusz meta sort, ez az előállítóra utal, és a megjelenítendő szöveget paragrafusnak tekinti, ezért helyezte el a "" paragrafus nyitó és " " paragrafus záró címkék közé. Általában elmondható, hogy Word-ből kiindulva nincs annyi befolyásunk a keletkező kódra, mint az erre a célra készült szerkesztőprogramok esetében (például PHP Designer, Dreamweaver, Frontpage és társai). 10 Nem véletlenül választottam egy régi Word programot. A jelenlegi Word 10 verzió nagyon hosszú és szinte áttekinthetetlen kódot generál, stílusokat állít be és statisztikai infromációkat közöl a HTML fájlról. Így egy tízsoros HTML kód Wordből lementve 10-15 kilobájt méretű fájlt hoz létre – tessék kipróbálni és megtekinteni az így előállított forrást! 47 Forrás: http://www.doksi.hu A webprogramozás alapjai A Jegyzettömb, mint HTML/XHTML szerkesztő eszköz Szöveges fájlt a lehető legegyszerűbb szerkesztőeszközzel is megírhatunk, persze ehhez a teljes kód ismerete szükséges, hiszen semmi segítséget nem kapunk. Gyakorlásnak azonban mindenképpen jó lesz. Ebben a fejezetben szinte kizárólag a Jegyzettömböt használjuk szerkesztőeszközként és böngészőjével (Internet Explorer, Firefox, stb.) fogja ezeket megjeleníteni, ezért a következőket javasoljuk: Hozzon létre egy webprog elnevezésű mappát/könyvtárat a számítógépe merevlemezén (C meghajtó) amiben elkészített fájljait tárolja. Készítsen parancsikont a Jegyzettömbhöz az Asztalra, hogy gyorsan el tudja érni - persze csak akkor, ha nincs más egyéb, már beállított ikonja, és már kezdődhet is a gyakorlati munka. Az is egyszerűsítheti a munkáját, ha a Start menüből elérhető Futtatás parancsra kattint és a felbukkanó ablakban beírja: notepad. Az Enter leütése máris elindítja a Jegyzettömböt és a Futtatás a legördülő menüjében meg is őrzi a parancsot a továbbiakban. Először is próbáljuk ki, mi az a minimális kód amit egy böngésző megjeleníteni képes! A megnyitott szerkesztőprogramban a felkínált új dokumentumba írja be a következőket: Minimális HTML kód Az egyes sorokat nem feltétlenül kell egymáshoz képest eltolni a megadott módon, ezt csak az áttekinthetőség miatt csináltuk. Az üres karaktereket és a sortöréseket a böngésző az értelmezéskor nem veszi figyelembe, de a kód olvashatósága miatt ajánlatos áttekinthető szerkezetet létrehozni a fájlban. Mentse el a dokumentumot például minimalis.html néven! A Windows rendszer - beállítástól függően - nem feltétlenül jeleníti meg a fájl kiterjesztéseket, illetve a fájlt készítő programra jellemző kiterjesztést sokszor önkényesen hozzáragasztja a fájl nevéhez mentéskor. Így könnyen előfordulhat, hogy akaratlanul is minimalis.html.txt néven kerül mentésre az fentiek szerint előállított fájl. Ennek elkerü- 48 Forrás: http://www.doksi.hu A webprogramozás alapjai lésére a mentéskor "minimalis.html" formában, idézőjelek között írja be a fájlnevet és akkor az operációs rendszer nem illeszt hozzá semmiféle további kiterjesztést! Nyissa meg a böngészőjét és hívja be az így elkészített fájlt (Fájl → Megnyitás → Tallózás → válassza ki a minimalis.html fájlt → OK) - meg fog jelenni a "Minimális HTML kód" szöveg a böngésző ablakában! Ezzel megszületett első .html dokumentuma - ha történetesen korábban még egyáltalán nem foglalkozott webszerkesztéssel. A korábban bemutatott HTML kódokkal összehasonlítva látható tehát, hogy a fájl keretének megadása bőven elég a megjelenítéshez. A böngésző eléggé "intelligens" ahhoz, hogy ha nem adunk részletes utasítást a formátumra, akkor alapértelmezett formátumokat állít be és azokat használja fel a megjelenítéshez. A minimálisnak tekinthető kód egy nyitó címkével kezdődik és záró címkével végződik. Ezen belül két részt lehet elkülöníteni, a nyitó-záró pár közé kerül minden, amit nem akarunk megjeleníteni (kivéve a címet!), és úgynevezett metaadat vagy csupán a böngésző számára szóló utasítás, és a nyitó-záró pár közé kerül minden, amit látni és láttatni kívánunk. Próbálja ki, hogy meddig lehet egyszerűsíteni a kódot! Fokozatosan hagyja el az egyes címke párokat és hívja be a böngészőbe az így előállított fájlokat! Bármilyen következtetésre is jutott ezen feladat elvégzése során, a továbbiakban azért maradjon meg a kiindulási minimális szerkezetnél, hogy jobban át tudja tekinteni az elkészített kódrészleteket! A címkék természetesen nem lehetnek ékezetesek és adottak egy-egy HTML/XHTML verzióban. Jelentését ismernünk kell az eredményes munkához még akkor is, ha szerkesztőprogramot használva ezeket már nem saját kezűleg gépeljük majd be a kód létrehozásához. A vázat alkotó címkéket fentebb már részleteztük, most csak annyival egészítjük ki, hogy míg a , nyitó címkék belsejében nem helyezhetünk el attribútumokat (paramétereket), a nyitó címke belsejében gyakran helyezünk el paramétereket, amelyek megadják a dokumentum szöveges részének a megjelenítését. Ilyen lehet a háttérszín, szövegszín, háttérként szolgáló képre történő hivatkozás, stílusbeállítás és még sok mindent más. Általánosságban teljes szövegtörzsre (teljes oldalra) vonatkozó tulajdonságokat határozhatunk meg ebben a címkében. 49 Forrás: http://www.doksi.hu A webprogramozás alapjai Írja át a fenti minimalis.html fájlban a body címkét, adjon hozzá paramétereket! Ehhez a következőképpen kell módosítani a kérdéses sort: majd mentse el és hívja be ismét a böngészőbe! Ha történetesen még nyitva van a böngésző az előző feladat után, akkor a Fájl → Szerkesztés menüpontból szintén el lehet érni az alapértelmezett HTML szerkesztőprogramot (ez például az én gépemen a Jegyzettömb) és máris szerkeszthető a HTML dokumentum forrása. Valószínűleg nem lepődött meg nagyon, hogy sárga alapon piros betűkkel írt szöveget kapott. A HTML leírónyelv egyik nagy előnye, hogy minimális angol nyelvtudással is el lehet igazodni a kódban, mert eléggé "beszédesek" az egyes elemek, a paraméterek. Egyúttal azt is megtanulta, hogy minden paramétert/attribútumot úgynevezett név = "érték" pár formában kell megadni, mintegy értéket adva a megfelelő paraméternek. Speciális karakterek a weboldalakon A figyelmes olvasóban valószínűleg már fel is merült, hogy ha a kacsacsőröket a címkék elkülönítésére használjuk, akkor hogyan lehet ezeket megjeleníteni? Honnan tudja azt a böngésző, hogy mi most nem címkehatárolóként, hanem karakterként akarjuk használni, például egy matematikai egyenlőtlenség jelölésére? Nos természetesen erre is van megoldás és mivel nem csak ezekkel kapcsolatban merült fel a probléma, a megoldás is általános. Az XHTML leírónyelvben az alap ASCII-tól eltérő karaktereket kódolva adhatjuk meg és ezt a szabványos kódolást mindegyik böngésző megérti és kódtáblázattól függetlenül egységesen jeleníti meg. Az egységes megjelenítésben az "&" jel és a ";" jel között írjuk le a karaktert, azaz szerkezete a következő: &karakterleírás; Így a "<" jel szabványos kódja "<" azaz az angol "less than" (kisebb, mint) rövidítés és ennek megfelelően a ">" jel kódja ">" azaz "greater than" (nagyobb, mint) lesz. Talán már a szerkesztéseknél megfigyelte, hogy hiába üt be több üres karaktert, ennek semmi hatása nincs a megjelenítésben, ugyanis a böngésző figyelmen kívül hagyja az egynél több üres karaktert. A fenti logikát folytatva az időnként szükséges több üres karaktert az kóddal vihetjük be. A leírás a "non-breaking space" szavak kezdőbetűit rejti, azaz olyan üres karakter, amelynél nincs sortörés. Azt már biztosan megfigyelte, hogy a hosszú sorok minden további nélkül törnek a megjelenítéskor, erre nem kell külön figyelmet fordítani a HTML kódban, akárcsak szövegszerkesztésnél. 50 Forrás: http://www.doksi.hu A webprogramozás alapjai Egyes speciális jeleknek szintén megtalálható a kódmegfelelője, így például a szerzői jogot jelző (copyright) "" jel vagy a regisztrált áruvédjegy "" jele az "©" illetve az "®" kódokkal vihető be! Számunkra talán legfontosabb viszont az ékezetes betűk kezelése! Ez sok webmester számára kínos és kellemetlen kötelesség és azt is megfigyelheti az Interneten a magyar nyelvű oldalak között böngészve, hogy sokszor - még az igényesebb portálokon is! nem törődnek vele. A baj okozói az "ő" és az "ű" betűink. Sajnos általános megoldás még nincs, ezek szép megjelenítése csak a megfelelő kódlapok megadásával lehetséges, illetve meg kell várnunk az UTF-8 kódolás elterjedését . Addig sem árt azonban tudni, hogyan kell magyar ékezetes betűkódokat létrehozni. Összesen négy leírást alkalmazunk, az "uml" a kettőspontot, az "acute" a jobbra dőlő vesszőt, a "tilde" a hullámvonalat és a "circ" a kalapot jelenti. Az összeállításhoz a kezdő "&" karakter után a módosítani kívánt alapkaraktert - például "a" vagy "A" - adjuk meg és ezt követi a módosítójel leírása, ami esetünkben az "acute" majd a kódot a pontosvessző zárja. Az alábbi táblázatban láthatók a magyar ékezetes betűk HTML kódjai (ismét megjegyezzük, hogy az "ő" és "ű" esetében a probléma nem oldható meg kielégítő módon: Á - Á á - á É - É é - é Í - Í í - í Ó - Ó ó - ó Ö - Ö ö - ö Õ - Õ õ - õ Ú - Ú ú - ú Ü - Ü ü - ü Ű - Û ű - û Jegyezze meg a következő, nem túl értelmes elnevezésű gép nevét: Árvíztűrő tükörfúrógép. Használni ugyan sohasem fogja ☺, de a név tartalmazza az összes magyar ékezetes karaktert. Ha ki akar próbálni egy kódtáblázatot vagy beállítást, ennek segítségével ellenőrizheti az ékezetes karakterek megjelenését. Szinte minden nyelvben találhatók ilyen könnyen megjegyezhető kifejezések vagy mondatok, amelyek szerepe a karakterek tesztelése, kipróbálása. Többségük még az írógép korából maradt ránk, amikor például a betűk tisztaságát, a billentyűk akadálymentes működését próbálták ki a segítségükkel. Így az angol nyelvterületen a "the quick brown fox jumps over the lazy dog" mondatot használják ilyen célokra. 51 Forrás: http://www.doksi.hu A webprogramozás alapjai Felmerülhet a kérdés, hogy mi van akkor, ha a fenti kódokban használt "&" ("ampersand") karaktert akarjuk megjeleníteni? Természetesen erre is találtak megoldást, ennek HTML/XHTML kódja az "&" karaktersorozat és az idézőjelet is leírhatjuk az """ kóddal. Tovább is bonyolíthatjuk életünket, mert másféle, nehezebben megjegyezhető, de egységes kódolási rendszer is létezik. Ebben az ASCII kódokat használjuk fel, a HTMLben már megismert "&"kezdő és ";" lezáró karakterek között, ahol az ASCII kódszámot egy "#" kettős kereszt (hashmark) karakterrel kezdjük. Ebben a rendszerben a "<" jelölése például "<", míg a ">" jelölése ">". Dedikált HTML/XHTML szerkesztőprogramok Ha a böngészőnkben meghívjuk a www.google.com keresőprogramot és a részletes keresésnél a kifejezésre keresésnél beírjuk a html editor szöveget, egymillió feletti találatot kapunk. Még a html ide (integrated developer environment) kifejezésre is sok tízezer találat érkezik. Természetesen ez nem azt jelenti, hogy több tízezer eszköz van forgalomban, de azért tudjuk, hogy rengeteg eszköz áll rendelkezésünkre. Ezek 98 százaléka csak színezni tudja a kódot, nem tud grafikus alapon kódot beilleszteni, és csak néhány tíz van, amelyek a kész kódot grafikusan módosítani is tudják. A gyakorlatokon a PHP Designer 2005 (szabadon használható) szerkesztőeszközt használjuk, ez letölthető a www.medzi.hu helyről is. Van ennél újabb változata is, a PHP Designer 2007 szintén letölthető az eredeti MPSoftware weboldalról, de ennek már nem minden változata szabad szoftver. Neve alapján elsősorban PHP programozásra dolgozták ki, de jól használható HTML esetén is. Az egyszerűbb HTML kódokat nem tudja beilleszteni automatikusan (bekezdés, betűformázás), de a bonyolultabb esetekben, mint például képek, táblázatok, űrlapok és űrlapelemek, a beillesztéshez sok segítséget kapunk. A weboldalak megjelenítése Egyszerű HTML, XHTML fájlokat a böngészőben megnyitva megtekinthetünk, a megnyitás során a böngésző értelmezi a HTML kódot és az eredményt írja ki a képernyőre. Ilyenkor a kód természetesen nem jelenik meg, csak a kódok által leírt szövegelrendezést, formázást láthatjuk. Minden böngésző ugyanakkor lehetőséget biztosít a kód megtekintésére, általában az operációs rendszerben található alapvető szerkesztőprogram 52 Forrás: http://www.doksi.hu A webprogramozás alapjai meghívásával. A Firefox esetében ez nem a Jegyzettömb, hanem egy beépített egyszerű szerkesztőeszköz és ezért a kód színezve, jól áttekinthetően jelenik meg. Általában a szerkesztőeszközök rendelkeznek egyszerűbb vagy bonyolultabb megjelenítő funkcióval is. Van, amikor az alapértelmezett böngészőt hívják meg, és van olyan eszköz, amely saját beépített böngészővel rendelkezik. Ez persze nem jelenti azt, hogy a szerkesztőeszközhöz külön böngészőprogramot írnak, az esetek legnagyobb részében valamely nyílt forráskódú böngésző beépítéséről van szó. Így a PHP Designer esetében az elkészített weboldalak megtekinthetők előnézetben a szerkesztőprogram ablakában, de ez nem azonos funkcióit tekintve egy teljes értékű webszerver biztosította megjelenéssel. Ahhoz, hogy a weboldal egy valódi webszerverről letöltve jelenjen meg, szervergépre van szükségünk. Szerencsére ehhez nem kell dedikált gép, a saját gépünkre is feltelepíthetünk webszervert amely a gép beépített domain nevén (localhost és az ennek megfelelő IP cím, a 127.0.0.1) keresztül érhető el és ettől kezdve a böngésző szabályosan, a http protokollon keresztül éri el a webszerver gyökérkönyvtárában elhelyezett fájlokat és onnét tölti le a kért weboldalakat. A gyakorlatok során az AppServ programcsomag által 53 Forrás: http://www.doksi.hu A webprogramozás alapjai biztosított Apache webszerver lesz a webkiszolgálónk és ennek c:\AppServ\www könyvtára lesz a gyökérkönyvtár. Egy távoli webszerver eléréséhez ugyanakkor megfelelő fájlfeltöltési protokollra (ftp, sftp, stb.) van szükség, de ezt például a Totalcommander fájlkezelő szoftver beépítetten biztosítja a kliens oldalon, míg a szerver gépekre biztosított belépési lehetőség magába foglalja a szerverre történő fájlfeltöltés engedélyezését is. Minden szerverüzemeltető maga szabja meg, hogy a gépre történő fájlfeltöltés milyen protokoll mellett és milyen szabályok alapján történik, ezért erre általános szabályok nem adhatók meg. Adatok formai leírása és összekapcsolása A HTML, XHTML elsődleges feladata a dokumentum jellegű adatok, vagy a dokumentum formába hozható adatok megjelenítése. A web és a HTML népszerűségét előmozdító nagy találmány viszont a hiperlink volt, amely lehetőséget biztosít egyes szövegrészek és a hozzájuk tartozó információ összekapcsolására az egész World Wide Web keretében, azaz mind a dokumentumon belül, mind az egyes dokumentumok között. Logikus követelmény, hogy például egy tartalomjegyzék esetében a tartalomjegyzék által jelölt fejezetekre lehessen ugrani adott dokumentumon belül. Erre szolgál az úgynevezett "named anchor" (megnevezett horgony) elem és az erre mutató hiperlink. Linkek szerepe <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> <strong>Tartalomjegyzék Bevezetés Specifikáció Tervezés Fejlesztési dokumentáció Felhasználói kézikönyv Bevezetés fejezet Specifikáció fejezet 54 Forrás: http://www.doksi.hu A webprogramozás alapjai Tervezés fejezet Fejlesztési dokumentáció fejezet Felhasználói kézikönyv fejezet Látható a kódból, hogy a Tartalomjegyzék egyes fejezetcímeire hiperlinket állítottunk be, ahol a href attribútum egy azonosítót tartalmaz és ez az azonosító az egyes fejezetcímek előtt álló megnevezett horgony name attribútumával van kapcsolatban. Így a böngésző a hiperlinkre kattintva a dokumentum hivatkozott részletét fogja az aktív ablakba betölteni, azaz addig görgeti a dokumentumot, amíg a kérdéses rész az ablakba kerül. Ez kétségkívül nagyon elegáns megoldás a lapozásra… A hiperlink azonban nem csak a dokumentumon belül, hanem a dokumentumok között is működik és ebben az esetben a hivatkozott dokumentum relatív elérését (ha a webhelyen belül van) vagy az abszolút elérését kell megadni (teljes URI) ha a webhelyen kívül van. A két lehetőség kombinálható is, azaz megadhatjuk a dokumentumot tartalmazó fájl nevét, elérési útját és megadhatjuk a dokumentumon belül a hivatkozott részt is. A fenti "szakdolgozat" Felhasználói kézikönyv fejezetére kívülről, a weben keresztül például a következő módon hivatkozhatunk: Felhasználói kézikönyv Ebben az esetben nem egyszerűen a hivatkozott weblap egésze, annak első részével az ablakban fog megjelenni, hanem a weblap betöltése mellett a böngésző a hivatkozott részig fogja görgetni a dokumentumot az aktív ablakban. Adatok továbbítása XHTML űrlapokkal A web népszerűségének növekedésével igény mutatkozott arra is, hogy különböző adatokat tudjunk a weblapok segítségével felvinni a szerverre, ahol majd az erre a célra elkészített szerver oldali programok, alkalmazások az adatokat fel is tudják dolgozni. Ez a feldolgozás lehet egyszerű adatrögzítés is adatbázisokban, de akár repülőgépes helyfoglalás is, vagy bármely más elektronikus ügyintézés. Ehhez több dolgot kellett megteremteni, mind a kliens oldalon, mind a szerver oldalon. 55 Forrás: http://www.doksi.hu A webprogramozás alapjai − Adatokat általában űrlapok segítségével veszünk fel, tehát a HTML/XHTML nyelv kell, hogy rendelkezzen olyan elemekkel, amelyek a böngészőnek űrlap és adott űrlapobjektumok megjelenítéséhez adnak utasítást. Ezek az űrlapelemek dinamikus felületek a képernyőn. − A kliens csak kéréseket intézhet a szerverhez, ezért a szerverre történő adatküldéshez a kliens csak a http protokoll segítségével tudja elküldeni az adatokat, egész pontosan fogalmazva a kliens mindig lekér egy weboldalt a szerverről és a kéréshez mellékelhet adatokat. − A http protokoll csak karakteres adatokat képes továbbítani név-érték párok formájában, tehát az összes elküldendő adat esetében vagy maga az adat karakteresen reprezentálható kell legyen, vagy ennek megfelelő formába kell hozni. Ez a referencia jellegű adatoknál megoldható például szerializálás11 segítségével. − Meg kellett oldani a böngésző (kliens) oldalon, hogy az űrlap elküldésére kiadott parancs (submit típusú gomb a HTML kódban) működtetése esetén az űrlap objektum összes gyerekobjektuma (az űrlapelemek) felvegye a bevitt értéket és ezeket egy metódus a http kérésbe csomagolja. Ez a feladatot egy JavaScript metódus (submit() függvény) látja el a kliens oldalon, ami hozzá lett kötve a submit típusú gomb onClick eseményéhez. − Végül a szerver oldalon meg kellett oldani, hogy a http kérésben érkező karakteres név-érték párokból valódi változók jöjjenek létre a szervergép memóriájában. Ezeket a változókat ezután a szerver oldali alkalmazás fel tudja dolgozni, a szükséges műveleteket el tudja rajtuk végezni. Azok számára, akik fel akarják használni a HTML/XHTML nyújtotta lehetőségeket, elegendő az űrlapok, űrlapobjektumok működésének ismerete azonban, mert a fentebb felsorolt műveletekért a böngésző és a szerver oldali operációs rendszer felelős. Ismerjünk meg tehát az űrlapok működését, működtetését az XHTML kód szintjén. Az űrlap XHTML kódja: 11 A szerializálás alatt olyan átalakítást értünk, amely például egy tömb típusú változó esetében létrehoz egy karakteres leírást a tömb szerkezetéről, amit majd a fogadó oldal képes visszalakítani a tömb típusú változóvá. Hasonló módon megoldható például egy objektum továbbítása is karakteres formában. 56 Forrás: http://www.doksi.hu A webprogramozás alapjai A form címkék határolják be az űrlap objektumot, a nyitó és záró elemek közé írt beviteli mezők alkotják az űrlap törzsét. A nyitó címke action attribútuma adja meg, hogy mit is csináljon az űrlap az adatokkal, azaz hová továbbítsa, adott esetben milyen lapot kér le. Ez a hivatkozás lehet relatív, mint a fenti esetben, ekkor a böngésző az űrlapot tartalmazó laphoz képest meghatározott elérési úton küldi el a kérést és az adatokat a megadott lapnak, de lehet abszolút is, ebben az esetben az itt megadott URI alapján történik a http kérés. Fontos megjegyezni, a kérés nem törődik azzal, hogy a megadott lap tud-e bármit is kezdeni az adatokkal! Ha a kért weboldal tartalmaz szerver oldali kódot, amely ezeket feldolgozza, akkor az adatok feldolgozásra kerülnek. Az action attribútum azonban nem csak weblap címeket tartalmazhat, hanem megadhatunk itt végrehajtható programokat is. Ha azok a webszerver által biztosított speciális mappában helyezkednek el, akkor a webszerver biztosítja az átküldött név-érték párok feldolgozását az úgynevezett Common Gateway Interface (cgi)12 segítségével és ezeket az adatokat a megcímzett program mint parancssori paramétereket kapja meg. E-mail küldés űrlappal Ebben az attribútumban hivatkozhatunk a mailto protokollra is egy e-mail cím megadása mellett. Ebben az esetben a böngésző a kliens gépen található alapértelmezett levelezőprogramot nyitja meg és annak törzsébe bemásolja az űrlap objektumok név-érték pár formában megadott adatait. Abban az esetben, ha az így e-mail küldésre használt űrlapra felvett adatokat szabályos e-mail üzenetként akarjuk elküldeni, nem mindegy, hogy milyen nevet adunk az egyes beviteli mezőknek! Az e-mail üzenetek ugyanis szabványos elnevezésű mezőkből állnak és ha az űrlap beviteli mezők nevei ezekkel megegyeznek, akkor a mezőelnevezések alapján a levelezőprogram ezeket a megfelelő email mezőkhöz veszi fel. Az alábbi HTML kód esetében egy szabványos e-mail üzenet áll össze: 12 Ezekről egy külön fejezetben lesz majd szó. 57 Forrás: http://www.doksi.hu A webprogramozás alapjai E-mail form Másolatot kap: Titkos másolatot kap: Tárgy: Az üzenet törzse: A fenti kód végrehajtása esetén a böngésző nem a szerverhez fordul, hanem a kliens gépen jelenik meg az alábbi e-mail küldő ablak: 58 Forrás: http://www.doksi.hu A webprogramozás alapjai A method attribútum értéke GET vagy POST lehet. A GET metódus használata esetén az adatok, a név-érték párok az URI-hez kapcsolva jelennek meg a böngésző lokátor sorában és a http kérés fejlécében kerülnek elküldésre. Ebben az esetben természetesen bárki láthatja az adatokat és például egy jelszó beviteli mező esetében hiába jelennek meg csillagok a bevitel során, itt a jelszó mező neve és a jelszó látható lesz. Ez a beviteli módszer azonban tökéletesen megfelelő például keresések esetében, amikor nincs értelme az űrlap mezőiben amúgy is látható kereső kifejezés, kulcsszó titkolására és jó szolgálatot tesz a fejlesztés során is, mert egyszerűen ellenőrizhető a segítségével az űrlap működése. A POST metódus esetében az adatok, a név-érték párok a http kérés törzsében kerülnek továbbításra és értelemszerűen nem láthatók a böngészőben. Így jelszavak, rejtett adatok továbbítása esetében ezt ajánlatos választani. A form nyitócímke többi attribútuma részben önmagában is értelmezhető, részben más elemek esetében már volt szó róluk. Fontos viszont, hogy megismerjük a szabványos űrlap elemeket és azok kódját. Egysoros szövegmező, karakterek bevitelére szolgál. A számértékek is karakteres formában kerülnek továbbításra, azok megfelelő értelmezése a szerver oldal feladata. Többsoros szövegmező. Érdemes megfigyelni, hogy ez az elem nem egyszerű input elem, hanem olyan HTML/XHTML objektum, amely az értékét a nyitó és zárócímkék közé kerülő karakterekként veszi át. Ide kerül majd a bevitelre szánt szöveg Egysoros szövegmező, rejtett információ, mint például a jelszó bevitelére szolgál. A leütött karakterek helyett csillagok jelennek meg. 59 Forrás: http://www.doksi.hu A webprogramozás alapjai Rádiógomb csoport. A csoport tagjainak a name attribútuma azonos, így biztosítjuk a csoportba tartozást. Az egyik kiválasztásával a radiogomb névhez a megfelelő érték rendelődik, amit az egyes gombok value attribútumában adunk meg. Amennyiben nem adunk meg value attribútumot, a rákattintás az "on" értéket másolja be a name attribútum értékeként. Ha azt akarjuk, hogy alapértelmezetten ki legyen választva az egyik, akkor a checked = "checked" attribútum-érték párt is el kell helyezni az alapértelmezett rádiógomb kódjában13. Jelölőmező, működése sokban azonos a rádiógomb működésével, például abban az esetben, ha a value attribútum nincs megadva. Ha azt akarjuk, hogy alapértelmezetten a doboz be legyen jelölve, itt is meg kell adni a checked attribútumot, a rádiógombhoz hasonló módon. Ha a name attribútum azonos értéket kap, azaz több jelölődoboznak azonos nevet adunk, akkor több, azonos nevű név-érték pár kerül továbbításra. Ennek feldolgozása már a szerver oldali programnyelvtől függ. Legördülő lista, jelen esetben egy országnév lista jelenik meg. Az option elemek közötti rész az egyes sorok ablakban megjelenő címkéje, a value attribútumban pedig a továbbítandó hozzátartozó értéket adhatjuk meg, ebben az esetben például az ország kódját. <select name="orszaglista" /> 13 Ez az XHTML követelménye. HTML kód esetében elég a checked szó beillesztése a kódba, de az XHTML nem engedi az úgynevezett rövidített attribútumok használatát. 60 Forrás: http://www.doksi.hu A webprogramozás alapjai Ez az űrlapelem fájlok feltöltésére szolgál, egy tallózási lehetőséget biztosít a fájlok kiválasztásához. A kiválasztott fájl neve is a szerverre kerül, ennek alapján azonosítható a fájl. Ez a mező nem jelenik meg a böngésző ablakában, rejtett információk továbbítására szolgál. Ez az információ elrejtés messze nem teljes, hiszen a weblap kódjában ott van az információ. Csupán arra szolgál a beviteli mező. hogy ne zavarjuk a felhasználót olyan adatok megjelenítésével, amit nem szerkeszthet a felületen. Természetesen a leíró nyelvekhez értő felhasználó számára nem okozna problémát az információ forráskódban történő szerkesztése. Egyszerű, felirat nélküli nyomógomb, amely a jelen kód mellett nem csinál semmit. Ha feladatot akarunk adni ennek a gombnak, hozzá kell rendelni egy eseménykezelőt (például onClick) és meg kell írni az esemény kódját a kliens oldalon futtatható programnyelv segítségével, ami többnyire JavaScript. Ez a gomb alapértelmezetten a submit() függvényt hívja meg rákattintás hatására, azaz elküldi azon űrlap adatait, amelyhez tartozik a gomb. Ez a gomb a reset() függvényt hívja meg az aktuális űrlap esetében. A függvényt az űrlap gyerekobjektumokon végighaladva az egyes objektumok value attribútumaiban található értékeket adja az elemeknek, így helyreállítja a betöltéskor kapott űrlap alaphelyzetet. 61 Forrás: http://www.doksi.hu A webprogramozás alapjai Ez az elem egy képet állít be a submit gomb felirata helyett, azaz annak funkcióit (űrlap elküldése) egy gombként viselkedő kép látja el. Elsődleges jelentősége a dekoráció, funkcionálisan nem különbözik a submit gombtól. 2.3. XML Az XML az a mágikus szó, amelyről mindenki hallott már de kevesek vannak tisztában használatával és jelentőségével. Ez a technika a legősibb információközlést, a karakteres adattovábbítást emeli strukturált, magas szintre és így az alkalmazások közötti adatátadásban kulcsszerepet játszik. Előfutára és őse az SGML (Standard Generalized Markup Language), amelynek talán legnépszerűbb és legismertebb alkalmazása a HTML, az adatok megjelenítésének verhetetlen eszköze. Ugyanakkor az XHTML, amely a HTML szigorúan szabványosított, modern változatának tekinthető, az XML egyik praktikus alkalmazása lett. A világ nem állt meg itt és ma már a 3D grafikát leíró nyelvek is ugyanezt a technikát kezdik követni. Az XML nem törődik az adatok megjelenítésével, csupán azok összefüggéseit, egymáshoz való viszonyukat írja le szigorúan karakteres eszközökkel. Ebből logikusan következik, hogy az XML elsődleges területe az adattovábbítás. Kijelenthetjük, hogy szinte bármilyen adat átvihető karakteres formában, még a tipikus bináris adatok esetében (standardizált képfájlok, hang és videofájlok) is megvan az a lehetőség, hogy karakteres referenciát biztosítsunk az adatra és a tényleges adatátviteltől elválasztva oldjuk meg ezek célba juttatását. Az Internet és a szélessávú kapcsolatok terjedésével általában nincs is szükség a tényleges bináris adatátvitelre, elég annak URI azonosítóját célba juttatni. Emlékeztetőül álljon itt egy XML fájl szerkezete, amely egy irodaház helyiségleltárát írja le. Az alábbi fájl adatokat gyűjt össze és rendszerezett szerkezetben mutatja be ezeket. 62 Forrás: http://www.doksi.hu A webprogramozás alapjai <epulet> <szint id="1" elnevezes="félemelet"> 3 2002 <ertek penznem="HUF">12000 2 2003 <ertek penznem="HUF">6000 1 2000 <ertek penznem="HUF">18000 2 2002 <ertek penznem="HUF">12000 2 2003 <ertek penznem="HUF">6000 2 2005 200000 63 Forrás: http://www.doksi.hu A webprogramozás alapjai Az XML nyelv egyik kevésbé ismert ám nagyon elterjedt alkalmazása a szoftverek paramétereinek beállítására használt, vagy a futási körülményeket, figyelembe veendő adatokat meghatározó konfigurációs fájlok. Az alábbi példa a JBuilder lib könyvtárában található library fájlok egyike, amely az egyik osztálykönyvtár, stílusosan az XML feldolgozáshoz szükséges eszközöket tartalmazó Xerces könyvtár elemeit írja le. A Xerces.library fájl tartalma: Xerces <path>[xercesImpl.jar] <path>[xerces.jar] <path>[xmlParserAPIs.jar] <source> <path>../extras/xerces/src <documentation> <path>../extras/xerces/docs/javadocs/api <path>../extras/xerces/docs/javadocs/dom3-api <path>../extras/xerces/docs/javadocs/xerces2 <path>../extras/xerces/docs/javadocs/xni <path>../extras/xerces/docs/javadocs/other A NetBeans Java szerkesztőeszközben is az egyes modulok betöltését, beállításait xml fájlokban adják meg. Az alább következő fájl tartalma a NetBeans HTML szerkesztő modulját állítja be. <module name="org.netbeans.modules.html.editor"> <param name="autoload">false <param name="eager">false 64 Forrás: http://www.doksi.hu A webprogramozás alapjai <param name="enabled">true <param name="jar"> modules/org-netbeans-modules-html-editor.jar <param name="release">1 <param name="reloadable">false <param name="specversion">1.5.21 2.4. Ellenőrző kérdések 65 Forrás: http://www.doksi.hu A webprogramozás alapjai 3. Webszerverek működése, a szerver oldal Az Internetes weboldalak esetében a kliens számítógép (ezen fut a böngészőnk) egy-egy fájlt kér le, annak az egész Internetes hálózaton egyedi azonosítója alapján. Ezt a fájlt, pontosabban annak HTML nyelven kódolt forrását a megfelelő webszervert üzemeltető számítógép fogja elküldeni. Bár egyszerű szöveges fájlról van szó, ez azonban számunkra szinte érthetetlen. A kliens gépünkön futó böngészőprogram viszont értelmezni tudja a kódokat és a készítője szándéka szerint megjeleníti az oldalt. Vannak olyan esetek is, ahol nincs kódolás, ilyenkor a böngésző, a kliens intelligenciáján múlik, hogy meghívja a megfelelő olvasóprogramot (például Word vagy más hasonló dokumentumszerkesztő) és megjelenítse a kért dokumentumot. Minden más esetben, ha ez az intelligencia nem került beépítésre, a böngésző automatikusan letöltésre kapcsol és az URL alapján azonosított fájl letöltését kínálja fel a kliensgépre. Innét már a felhasználó egyéni döntése, hogy mi történik a következőkben a letöltött állománnyal, milyen alkalmazást, szoftvert használ az állomány megjelenítésére, megtekintésére. Virtual hosting A HTTP protokoll magába foglalja a virtuális gép fogalmát, ahol egyetlen HTTP szerver több gazdagépet is képviselhet ugyanazon IP címen. Egy DNS szerver számos különböző gazdagép nevet (domén nevet) rendelhet hozzá ugyanazon IP címhez. Amikor egy HTTP kliens adott gazdagépnek kérést küld, a DNS szervert használja fel arra, hogy a domén névnek megfelelő IP címet megtalálja és a kérést erre az IP címre küldi. A HTTP/1.0 protokollban a domén név nem került bele a HTTP üzenetbe, ez elveszett, miután a IP címet feloldotta a DNS szerver és ezt megküldte a kliens gépnek. Ez tehát azt jelentette, hogy ha egynél több erőforrás helyezkedett el az IP cím által azonosított szerveren, a szerver nehézségekbe ütközött volna, hogy beazonosítsa, melyik erőforrás készlet melyik domén névhez tartozik. 66 Forrás: http://www.doksi.hu A webprogramozás alapjai Azonban a HTTP/1.1 kérések továbbítják a domén nevet is a kérésben (általában ez egy Host fejlécben történik). Így a domén név jelenléte az üzenetben képessé teszi a HTTP szervert arra, hogy a különböző gazdagép/domén neveket tartalmazó kéréseket a megfelelő erőforráshoz irányítsa minden egyes gazdagép/domén esetében. A HTTP ezen képességét nevezzük virtuális gazdagépnek. Webszerver felépítése A fentebb vázolt felállás egy speciális kliens-szerver rendszer, ahol a rendszer két öszszetevőjének tevékenységi köre - bár kliensből akárhány lehet, ezek mind ugyanazt képesek elvégezni - szigorúan meghatározott. Az ábrán jól látható az is, hogy a webszerver, - amennyiben nem egyszerű oldal lekérésről van szó – a megfelelő üzleti logika alkalmazásával dinamikusan reagálni is képes az egyes kérésekre, az elküldött adatok, vagy más külső tényező figyelembe vételével. Az egyik, leggyakrabban használt webszerver jelenleg az Apache webszerver, ismerkedjünk meg ennek rendkívül érdekes hátterével is. 67 Forrás: http://www.doksi.hu A webprogramozás alapjai 3.1. Az Apache projekt Az Internet kialakulásakor a hálózat szervereit futtató gépek szinte kizárólag úgynevezett nagygépek voltak, mainframe komputerek, amelyek az egyéb feladatok mellett felvállalták a levelezés és a webhelyek tárolásának feladatait is. Ezek UNIX, majd később Linux alapon dolgoztak és logikus volt, hogy az első webszervereket ezekre az operációs rendszerekre készítették el. Maga a honlap (home page) neve is abból származott, hogy ezek az intézményi szintű nagygépek egy-egy, több lapból álló, de mégis egyetlen webhelyet tartottak fent, amelynek indítólapja volt az angol tartalomjegyzék szóból származó nevű index.html fájl. A UNIX, majd Linux filozófiának fontos eleme volt a szabad hozzáférhetőség és általában nyitott a szabad szoftverek világa felé. Ennek következtében számos fejlesztés végeztek (szoftverek, osztályok és csomagok) különböző nyitott projektek keretében. Ezek talán legismertebbje az Apache projekt. Kezdetben volt az Apache webszerver14, a webszerverek ősatyja és még ma is életképes leszármazottja. Ennek elterjedésével először modulok, eszközök készültek hozzá, szintén a szabad szoftverek leveinek megfelelően (GNU licensz) majd a fejlesztőcsapat nagyobb lélegzetű vállalkozásba fogott és létrehozta a webszerver nevével fémjelzett projektet. Ez ma már hatalmasra nőtt, jelenleg közel 30 Apache projekt létezik az Apache Software Foundation keretén belül (www.apache.org). Érdekességképpen álljon itt egy táblázat ezekről: HTTP Server Forrest Logging TCL Ant Geronimo Lucene Tomcat APR Gump Maven Web Services Beehive iBATIS MyFaces XML Cocoon Incubator Perl XMLBeans DB Jakarta Portals XML Graphics 14 Nevének több magyarázata létezik. Az egyik szellemes magyarázat szerint semmi köze sincs a híres indiántörzshöz, hanem az "a patchy server" szavakból lett összevonva és kissé átalakítva. Azaz olyan szoftvert jelöl, amely modulokból, "foltokból" áll. 68 Forrás: http://www.doksi.hu A webprogramozás alapjai Directory James SpamAssassin Excalibur Lenya Struts Egyes projektek a fejlődés során kikerülnek a rendszerből és saját útra térnek, ilyen például az XML feldolgozáshoz szükséges Javás eszközöket kifejlesztő Xerces projekt is. Az Apache Software Alapítvány (ASF) szervezeti, jogi és pénzügyi támogatást biztosít nyílt szoftver projektek széles körének. Az Alapítvány jól megalapozott keretet biztosít a szellemi tulajdonhoz és a pénzügyi támogatásokhoz, amelyek egyidejűleg csökkentik a résztvevők potenciális jogi szerepét. Együttműködő fejlesztési folyamatban az Apache projektek kereskedelmi szintű, szabadon hozzáférhető szoftver termékeket hoznak létre, amelyek a felhasználók nagy közösségét vonzzák. A pragmatikus Apache licensz az összes, gazdasági és egyéni felhasználónak egyszerűvé teszi az Apache termékek telepítését. Korábban ezt a szervezetet mint az Apache Csoportot ismerték, de az Alapítvány tagsági alapon szerveződött, non-profit társaságként lett regisztrálva annak érdekében, hogy az Apache projektek az egyénileg vállalkozó önkéntesek közreműködési lehetőségein túl is működőképesek legyenek. Azok az egyének, akik kimutatták elkötelezettségüket az együttműködés keretében végzett nyílt forráskódú szoftverfejlesztésre az alapítványi projektekben, tagságot nyerhetnek az ASF-ben. Az egyén akkor kaphatja meg a tagságot, ha a már meglévő tagok többsége jelöli őt és jóváhagyja a kinevezését. Így az ASFt az a közösség irányítja, amelyet közvetlenül szolgál – a projektjein belül együttműködő személyek. 3.2. Erőforrások azonosítása, URL, URI Az egyik legfontosabb kérdés az erőforrások egyedi azonosítása a hálózatos rendszerekben, így például az Interneten. Általánosságban ez az URI (Universal Resource Identifier) alapján történik, amely alatt bármely olyan karakterláncot értünk, amely egy erőforrás azonosít. Ennek speciális megvalósítása az URL (Uniform Resource Locator), amely létező erőforrást azonosít a hálózaton annak elhelyezkedése (címe) alapján. Belátható, hogy a hétköznapi gyakorlatban a kettő egymástól nem független és ezért bárhogy nevezhetnénk, de szakmai szempontból megkülönböztetjük az erőforrás azonosítót 69 Forrás: http://www.doksi.hu A webprogramozás alapjai és annak helyét, hiszen az esetek jelentős részében nem annak helye, hanem az erőforrás maga a lényeges. A hely pedig bármikor megváltozhat, de nagy gondot okozna, ha emiatt nem találnánk meg az erőforrást. Az URI és az URL koncepcióját az Internet Társaság és az IETF (Internet Engineering Task Force) RFC 2396 azonosítószámú dokumentuma rögzíti, ezen belül az Uniform Resource Identifiers (URI) általános szintaxisát Internethez méltó módon a következő URI azonosítja: http://www.ietf.org/rfc/rfc2396.txt. Egy URL a HTTP (vagy HTTPS) esetében általában három vagy négy elemből áll: Protokoll (schema): A protokoll azonosítja azt a szabályrendszert, amelyet az erőforrás eléréshez használni kell az Interneten. Ez leggyakrabban a http protokoll, amely SSL nélkül nem biztonságos, vagy a HTTPS protokoll, amely már magába foglalja az SSL-t is. A legtöbb banki rendszer csak biztonságos, HTTPS kapcsolaton át érhető el. Gazdanév vagy domén név (host): Ez azonosítja azt a gazdát (host), amely az erőforrást tárolja. Ilyen lehet például a www.weblabor.hu. A gazda nevében egy szerver biztosítja a szolgáltatásokat, de a gazda és a szerver között nem szükségszerű az egy-azegyben való megfeleltetés. Adott szervergépen, amelyet az IP cím alapján találunk meg a neten, több gazda, azaz domén is elhelyezkedhet. Erre kiváló példa a webhely üzemeltetés, amikor bárki elhelyezheti saját tárhelyét egy szolgáltató szerverén a megfelelő díjazás ellenében, de nem minden doménhez tartozik egyedi szervergép. A medzi.hu, az sdp-city.hu, a pepint.hu, a stylo.hu, a brusszelimagyarok.com és még sok másik domén például fizikailag mind a 82.79.96.173 IP címmel azonosított számítógépen található. A http kéréseket a gazdagép a 80-as porton, vagy kapun fogadja. Ezt a böngésző alapértelmezettnek kezeli, azaz a http kéréshez automatikusan hozzáteszi a megfelelő portszámot. Amennyiben más kaput rendeltünk a webszerverhez, vagy más szolgáltatást akarunk használni, a portszámot meg kell adni az URI/URL-ben. Egy Java alapú webszerver, az Apache Tomcat a kéréseket például a 8080-as porton fogadja, a nagyon népszerű MySQL adatbázis kezelő pedig a 3306-os kapun fogadja a kéréseket. Elérési út (path): A domén név vagy gazdanév egy adott könyvtárat, a gyökérkönyvtárat azonosítja a szerver számítógépen. Ettől a könyvtártól kiindulva az elérési út azonosítja azt a specifikus erőforrást – például weboldalt – amit el akarunk érni. Ennek megadása teljes mértékben megegyezik a számítógépek elérési útjainak megadásával, így mindenki számára ismertnek tételezhető fel. 70 Forrás: http://www.doksi.hu A webprogramozás alapjai Lekérdezési karakterlánc (query string): Valójában nem is lekérdezésről van szó, hanem a http kéréshez tartozó adatok helye. A HTTP protokoll a lekért erőforrások mellett adatok átvitelére is képes, ezeket az adatokat a megcímzett erőforrás kapja meg és szerveroldalon feldolgozhatók. Az egyszerű protokoll csak karaktersorozat formájában tudja szállítani az adatokat, egészen pontosan név-érték párok formájában. Az ezekből összefűzött, továbbításra kész karakterlánc a lekérdezési karakterlánc, amely az URIhoz kapcsolva látható a böngésző lokátor sorában (címsorában) is. Szerkezete szigorúan rögzített, az erőforrás azonosítótól a kérdőjel karakter választja el, és az egyes név-érték párokat az angol "and" karakter, a & választja el. Így az URI/URL könnyen feldolgozható, a ? mentén szétszedhető adatokra és erőforrás azonosítóra, majd az adatokat képviselő karakterlánc szétszedhető név, érték párokra és átadható a kért erőforrásnak. Ilyen adattovábbítás működik például egy Google keresésénél, figyeljük meg, hogyan alakul ki a lekérdezés egy egyszerűbb részletes keresésnél. Az alábbi URL egy adatokkal kiegészített kérés, három adat kerül továbbításra, egy webhely azonosító, egy keresés azonosító és egy "from" nevű adat, amely azt tartalmazza, honnét érkezett az illető az oldalra: http://www.designers.hu/request.php?SiteID=11&SearchID=26&from=google A szabályos teljes URI/URL tehát a következő elemekből épül fel: protokoll: http:// protokoll + domén név: http://akarhol.hu protokoll + domén név + portszám: http://akarhol.hu:8080 protokoll + domén név + portszám + elérési út: http://akarhol.hu:8080/fomappa/almappa/fooldal.html protokoll + domén név + portszám + elérési út + lekérdezési karaktersorozat: http://akarhol.hu:8080/fomappa/almappa/fooldal.html?nev=Hugó&allatfaj=viziló Hosszabb weboldalak a jobb tájékozódás érdekében szegmentálhatók. Ebben az esetben az egyes részek egyedileg is azonosíthatóak úgynevezett horgonyok (anchor) segítségével és ez az URL-ben is jelölhető a kettős kereszt használatával az alábbi módon: http://budapestzoo.hu/allatok/fooldal.html#vizilo Ebben az esetben a fenti weboldalra jutó látogató nem az oldal tetejét látja a böngészőben, hanem a böngésző rögtön a hosszú weboldal aljára, a vízilovakhoz ugrik. 71 Forrás: http://www.doksi.hu A webprogramozás alapjai Nem csak a HTTP protokollt használhatjuk azonban, és más protokollok esetében lehetnek eltérések, vagy nem értelmezett elemek az URL-ben. Így például FTP (File Transfer Protocol, fájlátviteli protokoll) esetében nincs értelme az adattovábbításnak sem a szegmentálásnak és csak fájlok nevei adhatók meg, mint erőforrás azonosítók. Azonosítás, üzenetfogadás Az URL - Uniform Resource Locator15 - vagy az újabban használt URI - Uniform Resource Identifier16 - tökéletesen egyedi mutatót biztosít a teljes Interneten egy meghatározott erőforráshoz (resource). Ez az erőforrás lehet egyszerű, mint például egy fájl vagy egy mappa, de hivatkozhat egy bonyolultabb objektumra is, mint például egy adatbázis lekérés vagy egy keresőmotor. Ennek elérésére a számítógép IP címe szolgál ami a névszerverekben tárolt információk alapján egyértelműen megfeleltethető az egyes domén neveknek, továbbá a doménon belül - ez általában egy könyvtárnak felel meg az azonosított számítógépen - az egyes almappák és végül a fájlok egyedi nevéből képezzük az URI-t. A névszerver vagy domain névszerver (DNS) feladata, hogy az adott hálózati szegmensen összekapcsolja a nevekkel jellemzett doméneket és a számítógépet azonosító IP címet. Kérésre - ismét egy szerver! - megmondja, hogy a keresett nevű domén melyik gépen, annak melyik könyvtárától kiindulva található meg. Országonként hierarchikus felépítésben helyezkednek el a névszerverek, ugyanakkor bárki telepíthet névszervert a saját gépére. Természetesen az Internetes forgalom címfeloldását végző névszerverek ismerik egymást és a hálózaton egymással kommunikálva képesek végül a fizikai címet megadni. Egy számítógép több szervert is futtathat, bizonyos határok között akárhány szervert, amelyeket egymástól a port (azaz kapu) különböztet meg. A port azonosító biztosítja, hogy az üzenet a megfelelő szerverhez jusson el a számítógépen. A számítógépes szaknyelvben démonnak nevezik azokat az alkalmazásokat, amelyek egy-egy porton figyelve fogadják a beérkező kéréseket, üzeneteket. Ezért az egyes szerveroldali alkalmazások kapcsolattartó részét is démonnak nevezzük. Ha beletekintünk valamely alkalmazás bin vagy lib könyvtárába és ott d-re végződő programfájlt találunk, akkor nagy valószínű- 15 http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Demo/url-primer.html 16 http://www.ietf.org/rfc/rfc2396.txt 72 Forrás: http://www.doksi.hu A webprogramozás alapjai séggel megtaláltuk a kapcsolattartásért felelős elemet (például mysqld a MySQL adatbázis-kezelő kapcsolattartó démonja és httpd a http kéréseket fogadó webszerver (Apache) démonja. Amint ezt feltételezhetően már tapasztalatból tudja, az IP cím tetszés szerint beállítható. A számítógépek megkülönböztethetőségét a fizikai szinten a hálózati kártyának a gyártók által garantált egyedi azonosítószáma (hardware address vagy rövidítve HW Address) biztosítja. Így például a 00:0C:76:94:A9:0E hexadecimális számmal azonosított hálózati kártya az Interneten a 82.79.96.167 IP címmel rendelkező számítógépben található a jegyzet írásának időpontjában. Ebből az állításból az is következik persze, hogy a hálózati kártya gyártók sehol ezen a Földön nem gyárthatnak két azonos HW Address értékkel rendelkező alkatrészt és persze folyamatosan kommunikálniuk kell, megegyezve egymás között a felhasználandó azonosítószámok tartományairól. Bőven van tartalék, mert a hexadecimális elrendezés miatt 2566 darab, azaz kereken 280000 milliárd egyedi hálózati kártya gyártható le. Vessük össze ezt a Föld jelenlegi lakosságával, ami ma 6 milliárd ember! Az IP cím persze csak akkor tölti be feladatát, ha valóban egyedi és ki tudjuk szűrni az emberi tévedést, tehát lehetőleg ne a számítógép kezelője állítgassa. A cél az, hogy egyegy szolgáltatói alhálózaton belül gépi megoldással biztosítsuk az egyediséget. Ezt a szerepet töltik be a DHCP alapú rendszerek, ahol a kiosztást a DHCP szerver végzi és tartja nyilván, ez a szoftvereszköz tartja nyilván a már kiosztott címeket és ezek fizikai azonosításához feljegyzi a kérdéses gép hardvercímét is a saját adatbázisában. 3.3. Szerver oldali programnyelvek Ahhoz, hogy dinamikusan frissüljenek a weblapok - például az adatok változásának megfelelően - elengedhetetlen, hogy a webszerver ne egyszerűen a tárolt lapokat küldje le a böngészőnek, hanem ezeket a lapokat dinamikusan állítsa elő. Ez gyakorlatilag anynyit jelent, hogy a HTML/XHTML forráskódot kell előállítani, vagy esetleg csak egy sablonhoz képest módosítani az adatoknak megfelelően. Fájlokat bármely programnyelv elő tud állítani, tehát nem tűnik lehetetlennek a kérés. A korai próbálkozások idején ezeket a HTML fájlokat teljes egészében szerver oldali programok segítségével írták, de a grafikus tartalmak megnövekedésével és a bonyolultság növekedésével már az a helyzet alakult ki, hogy néhány százaléknyi dinamikus tar- 73 Forrás: http://www.doksi.hu A webprogramozás alapjai talomért az egész oldalt újra és újra elő kellett állítani a HTTP kérés befutása esetén. Több próbálkozás történt, hogyan lehetne összeépíteni a dinamikus tartalmat és a statikust és a megoldást olyan programnyelvek jelentették, amelyek egyrészt mint szkript nyelvek lehetővé tették a vizuális szerkesztést a statikus tartalom mellett, másrészt az ezeket a programnyelveket értelmező interpreter képes volt csak a dinamikus tartalomnak megfelelő részek értelmezésére és a leküldésre kerülő fájlban az összeillesztésére. Jelenleg a szerver oldal talán legnépszerűbb nyelve egyszerűsége miatt a PHP, de igen jelentős a szerepe az ASP-nek és a Java nyelvnek is, ez utóbbi esetében a JSP technológiát lehet ezen a szinten említeni. Ez a két utóbbi nyelv számos szerver oldali objektumot tud kezelni és így az alkalmazásukkal gyorsabban lehet megoldani a feladatokat – természetesen ehhez megfelelő képzettséggel kell rendelkezni. Mindezen nyelvek esetében közös, hogy az erre felkészített webszerver a lekért fájlról első lépésben eldönti, hogy csak statikus tartalmat hordoz, vagy dinamikus elemek, részletek is vannak benne. Ha a tartalom csak statikus, akkor kiszolgálja, ha dinamikus részt is tartalmaz, akkor a fájlt először átadja a megfelelő feldolgozó programnak, konténernek, ahol a dinamikus tartalmaz reprezentáló kódrészletek kerülnek feldolgozásra. Amennyiben a dinamikus tartalom HTML/XHTML kimenetet generál, ez bekerül a fájlba és ezzel kiegészítve kerül le a klienshez. Az is előfordulhat persze, hogy a dinamikus tartalom valamilyen kimenet nélküli üzleti logikát tartalmaz, vagy például adatfelvitel végez. Ebben az esetben maximum egy értesítés kerül leküldésre, a felhasználó tájékoztatására. 3.4. Ellenőrző kérdések 74 Forrás: http://www.doksi.hu A webprogramozás alapjai 4. Kommunikáció a kliens és a szerver között Az architektúrák tárgyalása során kiderült, hogy az elosztott rendszerek csak igen ritka esetekben használnak közös memóriát, így az adatok memórián keresztül történő átadása nem lehetséges. Ezért a kommunikáció az üzenetátadás szintjére szorul vissza, azonban ez sem egyszerű, mert az üzenetküldő és az üzenetfogadó meg kell egyezzen az üzenet pontos szerkezetében is egymás között. A leggyakrabban persze nem kétoldalú egyezkedésről van szó, hanem olyan általános és szabványosított rendszerről (üzenetszerkezetről), amit a kommunikáció bármely résztvevője megért és magára nézve kötelezőként ismer el. A jegyzetnek nem célja, hogy átfogó hálózati ismereteket adjon, hiszen ezt más tantárgyak már megtették. Mégis érdemes néhány gondolat erejéig átismételni, és egy-két speciális területen elmélyíteni ezeket az ismereteket, hogy könnyen elsajátíthatók legyenek a tananyag hálózatos ismeretekre támaszkodó részei. Kezdjük tehát az összes hálózati kommunikáció alapjait képező OSI modell felidézésével és a hálózati protokollokkal. Az OSI modell és rétegei Az Open Systems Interconnection Reference Model, azaz az OSI modell teljes mértékben lefedi a kommunikáció szintjeit. Szerzői abból indultak ki, hogy a kommunikáció egyes szintjeit elvi alapon elkülönítették, így hét szintet jelöltek ki, és minden szintnek jól körülhatárolható felelősségeket adtak meg. A szintek között a kommunikáció (vertikális kommunikáció) szabványosított felületeken át (interfész) történik és a közvetlen kapcsolatért felelős legalsó, úgynevezett fizikai réteg az egyetlen, amely közvetlen horizontális kommunikációt is végre tud hajtani. Réteg elnevezése A kapcsolatot létesítő protokoll 7 alkalmazási alkalmazási protokoll 6 megjelenítési megjelenítési protokoll 75 Forrás: http://www.doksi.hu A webprogramozás alapjai 5 viszony viszonyprotokoll 4 szállítási szállítási protokoll 3 hálózati hálózati protokoll 2 adatkapcsolati adatkapcsolati protokoll 1 fizikai fizikai protokoll A fizikai hálózat (hardver) Az OSI modell rétegei Egy alkalmazás szintű üzenet elküldése ebben a rendszerben úgy történik, hogy az adott folyamat összeállítja az üzenetet, azt átadja az alkalmazási rétegnek, és ez a szoftver hozzátesz egy fejlécet, amely saját magára utal és több-kevesebb "használati utasítást" tartalmaz, majd átadja a lentebb elhelyezkedő rétegnek. Ott ugyanez történik, míg a rétegspecifikus fejlécekkel ellátott üzenet elérkezik a fizikai réteghez, ahol megtörténik az üzenet elektromos jelek formájában történő elküldése. A fogadó oldalon ugyanennek az üzenet becsomagolásnak a fordítottja zajlik, az egyes rétegek a nekik szánt fejlécek alapján járnak el és továbbadják az így feldolgozott üzenet a felettük álló rétegnek, míg ismét eljutunk az alkalmazás szintig. Itt a kapcsolódó folyamat (például szerver vagy kliens) szoftver szinten feldolgozza az üzenetet és ha válaszol rá, azt ugyanezen az úton elindítja visszafelé. Az alsó három réteg szerepe markánsan szétválik. A fizikai réteg felel a jelszintű kommunikációért, a hardver elemek szabványaiért. A felette elhelyezkedő adatkapcsolati réteg definiálja az adatkereteket, a hibák felfedéséért és sok esetben a javításáért is. A hálózati réteg szerepe a hálózati kommunikáció meghatározása, ezért működése jelentősen eltér helyi hálózaton vagy például az Interneten. Míg a helyi hálózatnál a broadcast módszer tökéletesen megfelelő (kiküldjük az üzenetet minden gépre és az illetékes elkapja) a nagytávolságú hálózat esetén már szükség van útvonalválasztásra is, ami ennek a rétegnek az egyik szolgáltatása. Az üzenetküldés protokolljai közül a jól ismert IP protokoll tartozik ehhez a réteghez. A szállítási réteg elsődleges szerepe a kommunikáció megbízhatóságának megteremtése, ezért jellegében másként, mintegy interfészként működik a felsőbb rétegek és az alsó három között. Az alkalmazásfejlesztők számára ez a réteg biztosítja azt a "csőpostát" (pipeline) amelybe töltött üzenetek a fogadó végen sértetlenül megérkeznek. Ennek megvalósítása történik ebben a rétegben, amelynek legismertebb és a hálózati kommu76 Forrás: http://www.doksi.hu A webprogramozás alapjai nikációban leggyakrabban használt protokollja a TCP (Transmission Control Protocol, átvitelvezérlő protokoll). A gyakorlatban szinte mindenütt TCP/IP protokollról beszélünk, érdemes megjegyezni, hogy a név két szorosan összedolgozó, ám függetlenül is működőképes rétegprotokollt jelez. Az UDP, az Universal Datagram Protocol lényegében egy kismértékben módosított IP Protocol. Fontosságának megfelelően a TCP protokollt is fejlesztik, újabb változata a tranzakciós TCP, amely a kapcsolat felépítésétől kezdve a válasz fogadásán keresztül a kapcsolat lezárásáig mindent együtt kezel. A felsőbb rétegek határai nem minden esetben élesek, azaz különböző rendszerekben az egyes feladatok összecsúszhatnak, vagy a réteghatárok eltolódhatnak. Így a viszony és a megjelenítési réteg protokolljai gyakran összeolvadnak és az elosztott alkalmazások esetében ezt a köztesréteg protokoll helyettesíti. Ezek a protokollok testesítik meg a köztesréteg szolgáltatásokat és ezek az általános célú protokollok, amelyeket különböző alkalmazások egyaránt használnak. Így alakult ki a köztesréteg szerepe az elosztott alkalmazásokban, mint magas szintű kommunikációs szolgáltatásokat nyújtó réteg. Ezekből négyet emelünk ki, a távoli eljáráshívást, a távoli objektumhívást, az üzenetorientált kommunikációt és az adatfolyam orientált kommunikációt. Az OSI modell megvalósulása TCP/IP esetén Ahhoz, hogy két pont közötti kommunikáció létrejöhessen, és a két végponton elhelyezkedő alkalmazás vagy eszköz megértse egymást, standard protokollokra van szükség, amit mindkét kommunikáló oldal értelmezni tud. Az internetes (webes) alkalmazások esetében a hálózati kommunikációt többnyire a TCP/IP protokoll biztosítja, de bizonyos esetekben az erre ráépülő HTTP protokoll biztosítja az adatforgalmat. Ez utóbbi nagy előnye, hogy mivel karakterek átvitelére képes, kötött formátumban, alkalmazható egyes tűzfallal védett rendszerek esetében is. Fontosságuk miatt ismerkedjünk meg ezekkel kicsit részletesebben, de előtte áttekintésképpen álljon itt az említett protokollok elhelyezkedése az OSI modellben. réteg sorszáma réteg elnevezése protokoll 7 alkalmazási HTTP 6 megjelenítési 5 viszony 77 Forrás: http://www.doksi.hu A webprogramozás alapjai 4 szállítási TCP 3 hálózati IP 2 adatkapcsolati 1 fizikai A webes alkalmazásokban gyakrabban használt protokollok elhelyezkedése az OSI modell szerint. 4.1. TCP/IP A TCP/IP protokoll az Internet, a böngésző-szerver kapcsolat, a HTTP kérések általános kommunikációs protokollja, de más alkalmazások - például a levelezés - is használja ezt a protokollt. A TCP/IP protokoll jelenleg a legelterjedtebb standard. Gyakran beszélünk a TCP/IP protokollcsaládról, amelyen belül számos specializált protokoll található: − TCP (Transmission Control Protocol) alkalmazások közötti kommunikációt biztosító protokoll, amely állandó kapcsolatot igényel a két alkalmazás között. Felépítéséhez a kommunikációt kezdeményező alkalmazás kapcsolatkérést küld egy pontos címmel rendelkező számítógép (alkalmazás) felé, majd "kézfogás" (handshaking) után a full duplex módon üzemelő kommunikáció az egyik fél kapcsolat bontásáig marad fenn. − UDP (User Datagram Protocol) kisebb adatcsomagok átvitelét biztosító protokoll. Egyszerűbb a TCP-nél, nincs állandó kapcsolat a küldő és a fogadó között. Egyszerű adattovábbításkor használják, például mérőberendezés jelének az elküldésekor. − IP (Internet Protocol) adatcsomagok továbbításán alapuló, kapcsolat nélküli protokoll. Feladatai közé tartozik a csomagok útválasztása is (routing). Az OSI modell kapcsolati rétegének megfelelő szintű protokoll. − DHCP (Dynamic Host Configuration Protocol) dinamikus IP cím kiosztást biztosító protokoll. Feladata az alhálózaton található számítógépek ellátása IP címekkel a TCP/IP alapú kommunikáció céljára. Bár a címkiosztás dinamikus, azaz az IP cím hozzárendelés esetleges, beállítható úgy is, hogy adott 78 Forrás: http://www.doksi.hu A webprogramozás alapjai hálózati kártyához (hardvercím, azaz HW Address) az alhálózatban mindig azonos IP cím tartozzon. Így akár szerver is üzemeltethető DHCP címkiosztás mellett. Egyre több Internet szolgáltató használja ezt a rendszert, mert így a hálózatban működő gépek egyértelműen azonosíthatóak. − ICMP (Internet Control and Message Protocol) az esetleges hibaüzeneteket és statisztikai adatokat szolgáltató protokoll. − HTTP (Hyper Text Transfer Protocol) végzi a webböngésző és a webszerver közötti kommunikációt, amelynek során alkalmazás szinten fejléccel ellátott üzenetek (fájlok) kerülnek átvitelre. A fejlécben tárolt információ írja le a HTTP kérésre leküldött fájl feldolgozásának/értelmezésének módját, de ez nem azonos a head elemben kódolt információval. − HTTPS (secure HTTP) a fentivel megegyező feladatokat lát el, de a kommunikációt biztonságos csatornán végzi, ezért alkalmas a HTTP protokollhoz kapcsolódó bizalmas adatok továbbítására. Ezt a protokollt használják például elektronikus banki rendszerekben vagy hitelkártya tranzakcióknál, de a MS Outlook webes hozzáférése is ezzel a protokollal megy. − SSL (Secure Sockets Layer) protokollt használunk adatok titkosításánál és azok biztonságos átvitelénél. − SMTP (Simple Mail Transfer Protocol) az egyik leggyakrabban alkalmazott levelezési protokoll. Csak szöveges átvitelt biztosít, ezért bináris adatok/tartalom átvitelénél a MIME protokollra támaszkodik. Leggyakrabban az elektronikus levelek elküldésénél alkalmazzuk, amikor a szolgáltatónk SMTP szerverére juttatjuk el először a leveleinket az megíráshoz használt kliensprogramból és a továbbítást már a szerver végzi. Letöltéshez általában a POP vagy IMAP protokollokat használjuk. − MIME (Multi-purpose Internet Mail Extensions) feladata a bináris adatok (kép, hang vagy videofájlok, objektumok) szöveges információba történő átkódolása, hogy az SMTP protokoll már kezelni tudja. − IMAP (Internet Message Access Protocol) protokollt alkalmazunk az e-mail üzeneteink letöltésére abban az esetben, ha lehetőséget akarunk biztosítani a felhasználónak az üzenetek szerver oldali tárolására és/vagy megtekintésére. Ezzel a protokollal már a szerveren törölhetjük a nem kívánt e-mail üzeneteket, azaz kiváló eszköz a levélszemét kiszelektálására. 79 Forrás: http://www.doksi.hu A webprogramozás alapjai − POP (Post Office Protocol) egyszerű e-mail letöltő protokoll. Amikor a postafiókunkat biztosító szerverhez POP protokollal csatlakozunk, az összes levelünket letölti a kliens gépen futó levelezőprogram megfelelő mappáiba. Szerver oldali szelektáláshoz az IMAP protokoll ajánlott. − FTP (File Transfer Protocol) - régebben az egyik legnépszerűbb protokoll volt, de még ma is sokan használják fájl letöltésekhez. Szerver oldalon azonban nem túl biztonságos, ezért vagy dedikált szerveren helyezik el, vagy helyette biztonságos letöltéseket nyújtó SCP protokollt támogató és/vagy SSHt (Secure Shell) használó programokat alkalmaznak (WinSCP), amelyek már biztonságos csatornán kommunikálnak a szerverrel. Ezekkel mint SFTP (Secure File Transfer Protocol) is találkozhatunk. − LDAP (Lightweight Directory Access Protocol) protokollt alkalmazunk, amikor az Interneten a felhasználókról - e-mail postafiók tulajdonosokról - és az e-mail címükről keresünk információkat. Ez fontos lehet egy olyan alkalmazás esetén, amikor adatbevitelnél le akarjuk ellenőrizni a beírt e-mail cím hitelességét. A fentebb felsoroltakon kívül még van néhány, talán kevésbé fontos protokollja a TCP/IP protokollcsaládnak, de ezek részletes ismertetése túlmutat a jegyzet keretein. Az érdeklődőknek ajánlom az Internet keresését a Google segítségével, ahol a "TCP/IP protocol family" kereső kifejezésre mintegy ezer találat adódik jelenleg (2007. január) 4.2. HTTP A HTTP alkalmazás szintű protokoll, amely a TCP/IP protokollt használva egyszerű szöveges információ átvitelére alkalmas. A HTML vagy az XML leírónyelveket alkalmazva ez szöveges információ azonban biztosítani képes az adatok és a böngészőben az egyes grafikus elemek megjelenítését, valamint a strukturált adatok (akár teljes adatbázisok) átvitelét is. A jelenleg általánosan használt verziója a HTTP/1.117, amely több 17 HTTP/1.1 szabvány leírása: RFC 2616, Hypertext Transfer Protocol - HTTP/1.1, megtalálható a következő helyen: http://www.ietf.org/rfc/rfc2616.txt 80 Forrás: http://www.doksi.hu A webprogramozás alapjai funkcionalitást biztosít mint a korábbi és esetenként még előbukkanó HTTP/1.018. A számunkra talán legfontosabb különbség, hogy az újabb verzió a fejlécben átviszi a megcímzett domén (host) nevét is, ami lehetőséget biztosít egy IP cím alatt több webhely üzemeltetésére (virtual host, később részletesebben tárgyaljuk). Értelemszerűen a kliens és a szerver azonos HTTP verziót kell, hogy használjon és ez a kérés vagy a válasz első sorában meg is kell adniuk. A HTTP kérést a kliens indítja a névvel ellátott domén felé, amely egy szerveren helyezkedik el. Ennek célja erőforrásokhoz való hozzájutás a szerveren. A kérés megvalósításához a kliens az URI alapján állítja össze az információt, ami az erőforrás eléréséhez kell. Egy megfelelően összeállított HTTP kérés a következő elemeket tartalmazza: 1. Kérés sora 2. HTTP fejlécek sorozata, vagy más néven fejléc mezők 3. Amennyiben szükséges, az üzenet törzse. Mindegyik HTTP fejléc után egy soremelés következik, az utolsó fejléc után egy további soremelésnek kell következnie, hogy üres sor maradjon. Az üzenet törzse csak ezután kezdődhet. A kérés sora legalább három elemből áll. Először meg kell határozni a kérés módját, ami egyszavas parancs a szerver felé, hogy mit csináljon az erőforrással. Másodszor meg kell adni az URI-ból az elérési utat, ami az erőforrást határozza meg a szerveren. Harmadszor meg kell adni a HTTP verziószámát, amit a kliens alkalmazott az üzenet összeállítása során. Erre egy példa a következő kérés sor: GET /konyvtar/archivum/index.html HTTP/1.1 A kérés sor tartalmazhat még adatokat az ismert név-érték párok formájában és az URI egyéb komponenseit is, amennyiben ez egy abszolút elérési út. Ha a protokoll verziója 18 HTTP/1.0 szabvány leírása: RFC 1945, Hypertext Transfer Protocol - HTTP/1.0, megtalálható a következő helyen: http://www.ietf.org/rfc/rfc1945.txt 81 Forrás: http://www.doksi.hu A webprogramozás alapjai 1.1, akkor vagy itt, az URI-ben vagy egy külön Host fejlécben kell a domén információt hordoznia. A HTTP fejlécek a fogadó oldalt látják el információval a küldőről, a kommunikáció módjáról, nyelvi megkötésekről, frissítési információkról. Az alábbi fejlécek például megkötik, hogy csak német vagy francia nyelvű lehet az erőforrás és csak akkor kéri a kliens, ha azt tavaly december 6. óta módosították. Accept-Language: fr, de If-Modified-Since: Fri, 10 Dec 2006 11:22:13 GMT Hálózat, IP cím, alhálózat, alhálózati maszk, router (útválasztó) - ezek a kifejezések gyakran előfordulnak hálózati alkalmazások esetén. Tekintsük át röviden, mi mit jelent ebben a rendszerben. A hálózat egyaránt jelent LAN-t és Internetet, ez utóbbi, mint a hálózatok hálózata a legnagyobb részben helyi hálózatokból épül fel. A LAN és a világ többi része közötti kapcsolatot a router biztosítja, amely az alhálózati maszk segítségével különbséget tud tenni a helyi hálózat és az ezen kívül elhelyezkedő gépek között. Az alhálózati maszk egy, az IP címmel azonos felépítésű cím, amelyben az egyes mezőkben beállított értékek - összevetve a címzésben megadott IP címmel - adják meg a számítógép hovatartozását és így az útválasztás irányát is. Egy példán szemléltetve, a 192.168.1.25 IP cím és a 255.255.255.0 alhálózati maszk együtt egy olyan számítógépet határoz meg, amely a 192.168.1 doménen belül helyezkedik el - azaz az Internet kikerülésével a LAN hálózaton keresztül közvetlenül elérhető - és a helyi hálózat 25-ös azonosítószámú gépe. Ezzel szemben a 192.168.2 kezdetű IP címről a router rögtön tudja - az alhálózati maszkkal összevetve, - hogy nem található a LAN hálózaton belül, azaz az ide irányuló kérést a belső hálózaton kívülre kell továbbítani. 4.3. Ellenőrző kérdések 82 Forrás: http://www.doksi.hu A webprogramozás alapjai 5. Webalkalmazások tervezése, megvalósítása Mind minden mérnöki munkánál, itt is a tervezéssel kell kezdeni. Még egyszerűbb webhelyek esetében sem árt végiggondolni a teljes alkalmazást, mielőtt nekivágunk. Az első a pontos specifikáció meghatározása. Mit akarunk elérni, kinek akarjuk a webhelyet prezentálni? A webes alkalmazások esetében különös jelentősége van a felhasználó barátságnak, mert nem nagyon van lehetőség részletes kézikönyvek áttanulmányozására az alkalmazás futtatása közben. Publikus webhelyek esetében semmi befolyásunk nincs a látogatókra, nem taníthatjuk be a felhasználókat, mindenkinek magának kell eligazodnia a weboldalakon. Ezért a szoftver ergonómia jelentősége rendkívül megnő. Honlapok, webhelyek, portálok Ez a három kifejezés erősen összemosódik és nehéz határokat hűzni közöttük. Aki készíti az alkalmazást, az szereti felturbózni a munkáját, tehát a honlapot webhelynek és a webhelyet portálnak fogja nevezni, de ezen nem kell meglepődni. A szakirodalomban azonban a portál fogalmat fenntartják azon bonyolultabb webhelyekre, amelyeket az egyes felhasználók a saját elképzelésük szerint alakíthatnak, testre szabhatnak. Ilyen portál az ILIAS rendszer, de a PHPNuke,a Drupal és még sok más hasonló rendszer is ide számítható. Webhelyként hivatkozunk a weblapok azon összességére, amelyek mögött dinamikus rendszer van, lehetőleg adatbázisban tároljuk az információt és mind a feltöltés, mind a megjelenítés dinamikus rendszereken át megy. Architektúrák, rétegek és komponensek Egy ismert felosztás szerint egyrétegű, kétrétegű és háromrétegű alkalmazásokat különböztetünk meg. Rétegnek akkor nevezhetünk egy komponenst, ha feladatában önálló és bizonyos határok között cserélhető, a rendszer egészét egy-egy rétegének megváltoztatása nem befolyásolja. Amennyiben az egyes rétegek különböző számítógépeken helyezkednek el, már elosztott rendszerekről kell beszélnünk. Ilyen rendszer lehet egy alkalmazás és a távoli adatbázis szerver közötti kapcsolat, vagy egy kliens-szerver rend83 Forrás: http://www.doksi.hu A webprogramozás alapjai szer is. Többrétegű alkalmazások esetén az elosztott rendszer több egyedi számítógépet is magába foglalhat, ennek tipikus példája egy olyan webes alkalmazás, ahol a böngészőt futtató kliens gép kéréseivel távoli webszerverhez fordul, az viszont a kérés teljesítése során, a hivatkozott szerver oldali program végrehajtása közben (dinamikus weboldal) egy harmadik gépen tárolt, az alkalmazás futtatásához szükséges adatbázist igyekszik elérni. Elvben ugyan több réteg is bevezethető, de a gyakorlatban csak az egyes fenti rétegek bizonyos fokú megosztása kerül megvalósításra, így ezek több rétegbe sorolása felesleges. Egy kivétel azonban lehet, és ez a nagyfokú mesterséges intelligencia alkalmazása. Az itt szükségessé váló fokozott számításigény megkövetelhet különálló, erre specializált komponenst, amely így külön réteget alkothat. 5.1. Dizájn és áttekinthetőség Mint művészi alkotás, ennek is divathullámai vannak és gyorsan változnak az elvek, hogy mikor milyen alkalmazást illik készíteni. Alapvető viszont, hogy néhány olyan alkalmazás mellett, ahol a művészi teljesítmény az egyetlen követelmény, az áttekinthetőség a legfontosabb szempont – feltéve, hogy a weblapunkat azzal a céllal készítettük, hogy sokan megtekintsék. Nem ajánlatos, hogy a grafika elnyomja az információtartalmat és persze az eltérő ízlésvilág miatt nem lehet olyan webhelyet alkotni, amely mindenki számára egyformán vonzó. Így érdemes a művészi teljesítményt a háttérbe szorítani és az információ közlésre koncentrálni – ha fontos a művészet, akkor ezt képgalériákban lehet legjobban publikálni. 5.2. Navigálás Talán ezzel lehet a legjobban megdobni egy webhelyet, ha alaposan átgondoljuk a navigálás lépéseit, a várható látogatóközönség igényét. Nem csak a logikus oldalról-oldalra navigálás a lényeges, hanem a közvetlen eljutás is a legfontosabb lapokra. Sohase arra gondoljunk, hogy mi, akik ismerjük az oldal szerkezetét, mennyire igazodunk el rajta, hanem gyűjtsük be olyanok véleményét, akik nem gyakorlott internetezők. A gombok, linkek és képlinkek egyaránt jók, de minden ilyen elemnek megvan a maga helye, nem érdemes összekeverni. Gombokkal érdemes megoldani a navigációt a hivatalos tartal- 84 Forrás: http://www.doksi.hu A webprogramozás alapjai maknál és ne feledjük el, hogy a linkek a maguk adatátviteli lehetőségeivel egyszerű és elegáns megoldásokat biztosítanak. 5.3. Ellenőrző kérdések 85 Forrás: http://www.doksi.hu A webprogramozás alapjai 6. Programozás JavaScript nyelven 6.1. A nyelv szerepe A JavaScript programnyelvet a weblapok dinamikus kezelhetősége, interaktivitása érdekében fejlesztették ki és jelenleg a legnépszerűbb szkriptnyelv az interneten, amelyet sok millió weblapon használnak. Más szkriptnyelvek is rendelkezésre állnak, mint például a Visual Basic módosításával kialakított VBscript, de ezek népszerűsége jelentősen elmarad mögötte. Az általános hiedelemmel ellentétesen nem a Java nyelv módosításával készült, hanem egy teljesen önálló fejlesztés eredménye – az igaz viszont, hogy mind a Java nyelv, mind a JavaScript nyelv C-típusú nyelv, így a hasonlóság a közös ősnek tulajdonítható. A nyelv a kliens oldalon működik, a böngésző futtatja és így lehetőséget biztosít kliens oldali feladatok ellátására, mint például az űrlapok ellenőrzése, a böngésző lekérdezése, vagy kliens oldalon dinamikus tartalom létrehozására. Ez utóbbi esetben például lehetőséget biztosít nagyobb, algoritmusokkal leírható táblázatok megjelenítésére anélkül, hogy a táblázat teljes XHTML kódját le kellene tölteni, vagy megvalósíthatók képcserék, az egérmutató mozgását érzékelő és arra reagáló események is. Gyakorlatilag az összes ma használatos böngésző támogatja a JavaScript nyelvet. Nevének megfelelően a JavaScript kód olvasható karakteres utasítás sorokból áll, ezek a HTML/XHTML oldalba beágyazhatók és a kódot a böngésző értelmezi (interpretálja, innét az interpretált nyelv elnevezés). Ennek megfelelően a JavaScript kód az oldal letöltése után, a böngésző által kerül értelmezésre – az ehhez szükséges interpretert tehát a böngésző biztosítja – és az így előállított kimenet az oldal szerves részét képezi. Amennyiben ez a kimenet például XHTML kódot hoz létre, akkor a böngésző ezt meg is jeleníti a szerverről letöltött statikus XHTML kóddal együtt. A JavaScript nyelv objektum alapú programnyelv és a közhiedelemmel ellentétben nem egy egyszerű, bárki által alapszinten és könnyen használható nyelv. Egy-két szükségszerű korlátozástól eltekintve segítségével bármilyen program megvalósítható a haszná- 86 Forrás: http://www.doksi.hu A webprogramozás alapjai latával. Vannak JavaScript nyelvű játékprogramok éppúgy, mint komolyabb logikát igénylő alkalmazások és grafikai megoldások. A nyelvből hiányzik azonban a fájlkezelés és ennek logikus következményeként az adatbázis kezelés megvalósíthatósága is. Mivel egy letöltött weblapnál nem lehet előre eldönteni, hogy annak mi lehet a tartalma kódszinten, értelemszerűen nem engedhető meg semmi olyan programnyelvi elem, ami a gyanútlan kliens gépen fájlokat, adatbázisokat tudna kezelni, módosítani, hiszen ezzel mintegy kinyitnánk a gépünket bárki számára az Interneten keresztül. A fenti állítással – ti. nem tekinthető minimális tudással, bárki által programozható, egyszerű nyelvként a JavaScript – látszólag ellentmond az a tény, hogy az Interneten számos JavaScript kódrészlet található és a szerzői jogok tiszteletben tartása mellett szabadon felhasználható. A kellően dokumentált kódrészletek – amelyekben például megjegyzésként ott szerepel az összes, a beillesztéskor elvégzendő módosítás leírása is – ugyan egyszerűen beilleszthetők, de a kódrészletek megírása profi programozói feladat. Nem véletlen, hogy álláskeresésnél a webes területeken a JavaScript ismerete komoly előny lehet. Az elmúlt néhány évben a JavaScript szerepe jelentősen megnőtt, mert az AJAX technológia terjedésével lehetővé vált a kliens oldalon teljes értékű, dinamikusan kezelhető felületek létrehozása. Ennek segítségével a háttérben kérés küldhető a szerver felé, anélkül, hogy a kéréssel frissítenénk az oldalt, vagy arról egy másik oldalra lépnénk át. A kérésre kapott válasz a JavaScript segítségével feldolgozható (megjegyezzünk, hogy például az URI-hez fűzött adatok, a név-érték párok minden további nélkül feldolgozhatók JavaScriptből) és ezek felhasználásával az oldal egyes részei frissíthetők, felülírhatók. Ennek részletei azonban egy külön tantárgyat igényelnének. Összefoglalva tehát a JavaScript nyújtotta lehetőségek a következők: − A több helyen, katalogizált webtárakban fellelhető JavaScript kódrészletek lehetőséget biztosítanak arra, hogy a programozáshoz csak minimálisan értő webfejlesztő is be tudjon illeszteni dinamikus tartalmat a fejlesztés alatt álló oldalára. Ezt segítik a komolyabb fejlesztői eszközök által felkínált kódrészletek is, ahol csak a beállításokat kell elvégezni. 87 Forrás: http://www.doksi.hu A webprogramozás alapjai − JavaScript segítségével dinamikusan felépíthetők a weboldal egyes részei, ahol a szerkezet algoritmizálható. Például egy szorzótábla kirakása néhány soros kóddal megoldható a kliens oldalon. − A JavaScript segítségével a HTML/XHTML oldal objektumaihoz kapcsolható eseményekre reagálni tudunk a megfelelő kódrészlet (függvény) meghívásával. − A HTML/XHTML dokumentum objektum modelljét kihasználva a JavaScript segítségével az egyes elemek olvashatók és írhatók. − A JavaScript lehetőséget biztosít arra, hogy egy űrlap mezőit az elküldés előtt ellenőrizzük, különböző számításokat elvégezzünk és/vagy meggyőződjünk a bevitt adatok formai megfelelőségéről. − A kliens oldalon futó JavaScript képes a böngésző felismerésére, a szükséges információ lekérdezésére, így a böngésző típusának megfelelő kódot tudunk biztosítani a leküldéshez, illetve a böngésző által kezelhető eseményeket, megoldásokat tudunk kiválasztani. 6.2. JavaScript a weboldalon A JavaScript kód a weboldalba illeszthető, ezért a HTML/XHTML elemek között található <script> címkék határozzák meg a kód helyét az objektum modellben. A címke pár elhelyezhető a elemen belül, ebben az esetben a webfejlesztő felelőssége, hogy az itt megadott JavaScript kód ne tartalmazzon látható kimenettel rendelkező kódot, mint például kiíró utasítást. Ebben a részben célszerűen csak deklarálásról legyen szó, például egy függvény vagy változók megadásáról. Mivel a head elem kiolvasása és végrehajtása megelőzi a body elemét, az itt megadott JavaScript függvények már az egész oldalon ismertek és elérhetők. Az itt elhelyezett, a fenti szabályoknak megfelelő kód csak akkor kerül végrehajtásra, ha az adott függvényt meghívjuk. JavaScript az oldalon <script type="text/javascript"> var uzenet = "A document.write() függvény a JavaScript kiíró utasítása"; 88 Forrás: http://www.doksi.hu A webprogramozás alapjai function tajekoztatas(uzenet) { document.write(uzenet); } // A tajekoztatas(uzenet) függvényt a body elemen belül bárhonnan meghívhatjuk A body elemen belül tetszőleges helyen és tetszőleges számban elhelyezhetünk script elemeket, amelyek viszont akkor kerülnek végrehajtásra, ha a böngésző a feldolgozás során az elemhez ér. Az itt megadott JavaScript kód tehát azonnal végrehajtódik az oldal betöltése során, külön meghívás nélkül. Természetesen egy itt deklarált függvényt éppúgy meg kell hívni, mint a head elemben elhelyezettet, azonban a függvény csak a megadás helyétől lesz elérhető a kódban. A fenti példa ismeretében például a következő JavaScript kód jelenhet meg a body elemben: <script type="text/javascript"> var uzenet = "Aktuális üzenet"; function tajekoztatas(uzenet) { document.write(uzenet); } Ennek kimenete az uzenet változóba bevitt szöveg megjelenítése ott, és úgy, ahogyan ezt az XHTML elemek meghatározzák. Lehetőség van arra is, hogy a JavaScript kódot egy külső fájlban helyezzük el. Erre akkor lehet szükség, ha a kódot több oldalon is fel akarjuk használni és annak esetleges módosításait ebben az esetben nem kell az összes alkalmazási helyen végrehajtani. A kód egyszerű szöveges fájlban helyezkedik el és a script elem nyitó címkéjében hivatkozunk rá. Hagyományosan az ilyen fájl kiterjesztése .js, utalva a tartalomra, de bármilyen kiterjesztésű fájl használható. Ebben a fájlban szigorúan csak JavaScript utasítások helyezhetők el, HTML/XHTML elemek nem. 89 Forrás: http://www.doksi.hu A webprogramozás alapjai JavaScript az oldalon <script type="text/javascript" src="uzenet.js"> Az uzenet.js fájl tartalma: var uzenet = "A document.write() függvény a JavaScript kiíró utasítása"; function tajekoztatas(uzenet) { document.write(uzenet); } // A tajekoztatas(uzenet) függvényt a body elemen belül bárhonnan meghívhatjuk Látható, hogy minden érdemi kód a külső fájlban van és ez a kód a script elem belsejébe mintegy bemásolódik a fájlra való hivatkozással. Ne feledjük el két fontos dolgot! − A JavaScript nyelvet a böngésző értelmezi ezért ha a böngészőben ezt a lehetőséget kikapcsoljuk, a JavaScript kód élettelen lesz és semmit sem hajt végre. − A JavaScript kód publikus, ott van a weboldal forrásában. Ezért semmivel sem lehet megakadályozni, hogy valaki belenyúljon, átírja, módosítsa vagy akár teljesen kiiktassa. Így a később tárgyalásra kerülő kliens oldali ellenőrzések nem biztonságosak, azokat feltétlenül követnie kell szerver oldali ellenőrzésnek. Arra viszont kiváló a JavaScript, hogy meggyorsítsa az űrlapok ellenőrzését, mert nem kell minden hiba esetében megvárni a szerver válaszát. 6.3. Dokumentáció Mivel a JavaScript kód publikus, az ezen a nyelven írt forráskódok is szükségszerűen publikusak, bárki számára megismerhetők, értelmezhetők. Ennek következtében a nyelv rendkívül népszerű és számos oktató jellegű program, dokumentum született az évek során. Számos könyv is készült mind magyar, mind idegen nyelven. Mivel azonban a böngészők értelmezik, az egyes böngészőgyártók sokszor különböző speciális elemeket is belevittek, amit csak az adott böngésző képes kezelni. Mindezek miatt egyrészt nehéz 90 Forrás: http://www.doksi.hu A webprogramozás alapjai egységes szerkesztőrendszert létrehozni, kevés olyan IDE található, amely valóban alkalmas emelt szintű fejlesztési munkára és tesztelésre, másrészt a JavaScrip esetén fokozott igény van a dokumentáció folyamatos tanulmányozására, hogy a böngészőspecifikus elemeket figyelembe tudjuk venni. Ezért érdemes kéznél tartani olyan kézikönyveket, amelyek a forráshoz nyúlnak vissza és az eredeti nyelvi specifikációkat tartalmazzák. Ilyen például a http://developer.mozilla.org/en/docs/JavaScript linken található dokumentáció, amely az alapvető, úgynevezett core JavaScript leírást tartalmazza. 6.4. Nyelvi elemek A JavaScript strukturális nyelvi elemei a C-típusú nyelvi háttérnek megfelelően jelentős mértékben megegyeznek a Java nyelvi elemeivel, ezért ebben a fejezetben csak az eltérésekre hívjuk fel a figyelmet, nem ismételjük a máshol már elsajátított ismereteket. Változók A JavaScript nem típusos nyelv, ezért az egyes változók deklarálásakor nem kel típust megadni, a változó típusa a belevitt érték típusának megfelelően változik. Változót deklarálhatunk a var kulcsszóval, de a változó nevének egyszerű leírása is létrehozza a változót, azaz a var valtozo; var valtozo = "érték"; valtozo = "érték"; kifejezések egyenértékűek a változó létrehozása szempontjából. A pontosvessző kitétele nem kötelező a sorok végén, kivéve, ha egy sorban több utasítást is leírunk. Gyakorlati okokból azonban erősen ajánlott megszokni a pontosvessző, mint utasítás lezáró jel használatát. A változó érvényességi köre a deklarálás helyétől függ, ha metóduson (függvényen) belül deklaráljuk (lokális változó), akkor csak annak belsejében lesz elérhető, a függvény lefutásával a változó értéke elvész. Azonos nevű változók különböző függvényekben egymástól függetlenül létezhetnek. A függvényeken kívül deklarált változók érvényességi köre az egész oldal, akkor jön létre, amikor a kód végrehajtás a változó deklarálásához és az oldal bezárásával a változó értéke elvész. Az ilyen "globális" változót az oldal összes függvénye el tudja érni. 91 Forrás: http://www.doksi.hu A webprogramozás alapjai Nyelvi szerkezetek A feltételes szerkezetek (if, if...else, if...elseif...else, switch szintaxisa és működése teljes egészében megegyezik a Java nyelvnél tanultakkal. Az aritmetikai, értékadó, összehasonlító, logikai operátorok hasonlóképpen azonosak és a Java esetében megismert feltételes operátor is megtalálható a JavaScript nyelvben. Az iterációk esetében is fennáll ez az azonosság, a JavaScript is ismeri a for, a while és a do…while ciklusokat. Amennyiben a ciklus futását meg akarjuk szakítani itt is rendelkezésünkre áll a break és a continue utasítás. Az előbbi az egész ciklus elhagyja és a program végrehajtás a ciklus utáni első utasításnál folytatódik, míg az utóbbi csak az aktuális lépés futását szakítja meg és a végrehajtás a következő ciklussal folytatódik. Egy speciális ciklus-szerű nyelvi szerkezet a for…in utasítás, amely segítségével végiglépkedhetünk egy tömb értékein, vagy egy objektum tulajdonságain és mindegyik elemen elvégezhetünk azonos műveleteket. Ennek egy példája a következő kód: JavaScript az oldalon <script type="text/javascript"> var honapok = new Array("január", "február", "március", "április"); var honap; for (honap in honapok) { document.write(honapok[honap] + " "); } A break szerepet kap a switch szerkezetben is, ha nem akarjuk, hogy a végrehajtás a belépési blokk utáni blokkban folytatódjon, a break utasítás segítségével tudjuk ezt megakadályozni. 92 Forrás: http://www.doksi.hu A webprogramozás alapjai Metódusok, függvények A JavaScript esetében kiterjedtem használunk metódusokat, amelyek eljárások vagy függvények lehetnek. A metódusok esetében – a JavaScript automatikus típusválasztásának megfelelően – nincs lehetőség a visszatérési típus megadására, ezt a programozónak kell figyelemmel kísérnie a kódírás során. A beépített metódusok esetében a JavaScript megőrzött annyi strukturális vonást, hogy számos függvény és eljárás nem tartozik egyik objektumhoz sem, illetve olyan objektumhoz tartozik, amely példányosítása nélkül is meghívható az adott metódus. Így egy kevert, részben strukturális, részben objektum-orientált nyelv áll előttünk. Ezekre például szolgálhat három, gyakran használt metódus, amelyek figyelmeztetést, megerősítést vagy változó értékadást végeznek az oldalon. Általában figyelmeztetésre használjuk az alert box-ot, ezt a modális ablakban megjelenő értesítés dobozt, amit csak az OK gombra kattintva lehet elhagyni. Szintaxisa a következő: alert("figyelmeztetés a felhasználó számára");19 Ez valójában a window objektum alert metódusa, de mivel az oldalon mindig a window objektumon belül vagyunk, nem kell külön megadni. Választási lehetőséget nyújt a felhasználó számára a szintén modálisan megjelenő confirm box, amit a felhasználó vagy az elfogadás OK gombjával, vagy a mégse gombra kattintva tud elhagyni. Amennyiben a felhasználó az OK gombra kattintott, a függvény visszatérési értéke true lesz és ez feldolgozható egy szelekció feltételében. Logikus, hogy a mégse gombra kattintva a visszatérési érték viszont false lesz, így ezzel két lehetőség között választhat a felhasználó. A szintaxisa a következő: confirm("Valóban befejezi a teszt kitöltését?"); A prompt box egyszerű értékadási lehetőséget biztosít egy-egy változónak, amely értéket az oldal betöltése során akarjuk feldolgozni. Itt is lehetőség van választásra, amenynyiben a felhasználó nem akar adatot megadni, úgy a mégse gombra kattintva hagyja el 19 A JavaScript sztring kezelése érdekes, mert akár az egyszeres idézőjel, azaz az aposztróf, akár a kettős idézőjel használható a sztring behatárolására. Ha az egyik féle idézőjellel kezdünk, a másik minden további nélkül használható a szringen belül, és az értelmező nem veszi sztring határnak. 93 Forrás: http://www.doksi.hu A webprogramozás alapjai ez a modális ablakot és ebben az esetben a prompt függvény visszatérési értéke null lesz, pontosabban az értékre váró változó kap null értéket. A szintaxis a következő: prompt("valtozo_nev", "beviteli_ertek"); Ennek megjelenése az oldalon a következő: Eseménykezelés A JavaScript használatával lehetőségünk nyílik dinamikus weboldalak létrehozására, és ehhez biztosít eszközöket a JavaScript az eseménykezelők biztosításával. Ezek észlelik az eseményeket, amelyek lehetnek egéresemények, billentyűesemények és az oldal betöltésével, az oldalon való navigálással kapcsolatos események is. Tipikus események lehetnek például egy weboldalon: • egérkattintás, • egér mozgatása valamely kiemelt pont fölé az oldalon, • beviteli mező kiválasztása vagy elhagyása egy XHTML űrlapon, • űrlap elküldése, alaphelyzetbe állítása, • weblap, vagy kép betöltődése 94 Forrás: http://www.doksi.hu A webprogramozás alapjai A cél az, hogy az észlelt eseményhez20 megfelelő függvényeket kapcsoljunk és az adott függvény végrehajtását az esemény bekövetkezte indítsa meg. Az onLoad és az onUnload események akkor keletkeznek, amikor a felhasználó akciójának következtében egy oldal betöltődik, vagy éppen elhagyjuk az oldalt. A gyakorlatban az onLoad eseményt érdemes kihasználni a böngésző típusának ellenőrzésére és az így nyert információ alapján a megfelelő weboldal változatot lehet betölteni a felhasználó számára. Hasonlóképpen ha valami nagyon fontos dologra akarjuk felhívni a felhasználó figyelmét, akkor az oldal betöltődése során felbukkanó ablakban helyezhetjük el az információt. Ezzel azonban óvatosan kell bánnunk, mert sok esetben bosszantó lehet a sok felbukkanó ablak. Az onUnload esemény viszont hasznos lehet olyan esetben, ha valamilyen kapcsolatot kell megszüntetni a felhasználó távozása esetén (kilépés kezelése). Űrlapokkal kapcsolatosan a leggyakrabban kihasznált három esemény az onFocus, az onBlur és az onChange. Ezekhez köthetők a különböző validáló függvények, amelyek feladata a kliens oldali beviteli ellenőrzés. Az onFocus akkor jön létre, ha belépünk egy űrlapelembe, az onBlur az elhagyásakor aktiválódik – ez természetesen azzal jár, hogy valamely másik elembe lépünk át – és az onChange minden olyan lépésre aktiválódik, amikor az űrlapelem tartalmaz megváltozik, azaz például a szövegbevitel közben minden karakter leütésére is. Az események az egyes objektumokhoz köthetők, például a következő kóddal: Ebben az esetben a célszerűen a head elemben deklarált emailEllenorzes() függvény hívódik meg, amely lehet egyszerű figyelmeztetés is, de az e-mail cím nem megfelelősége miatt vissza is vihet a mezőbe. Erre később láthatunk majd példát az űrlapok JavaScript alapú ellenőrzése során Az onSubmit esemény segítségével az űrlap összes mezőjét ellenőrizhetjük, persze ehhez meg kell írni az egyes űrlapmezők specifikus ellenőrző függvényeit. Az eseményt az űrlap objektumhoz kapcsoljuk, azaz az űrlap elem nyitó címkéjén belül helyezzük el a következő módon: 20 A JavaScript által feldolgozható teljes esemény referenciát a következő helyen találhatja meg: http://www.w3schools.com/jsref/jsref_events.asp 95 Forrás: http://www.doksi.hu A webprogramozás alapjai A submit esemény bekövetkeztekor az eseményhez kapcsolt függvény meghívásra kerül és csak akkor zajlik le az űrlap adatok elküldése – azaz a http kérés összeállítása – ha az esemény által aktivált függvény true értékkel tér vissza. Ellenkező esetben a submit nem zajlik le, így a függvényt úgy kell összeállítanunk, hogy mindenképpen boolean értékkel térjen vissza. Igen gyakran használjuk az egérmozgás eseményeit a weblapok dinamizmusának biztosítására, itt elsősorban a különböző animációk létrehozására. Mindenki tapasztalt már olyan jelenséget, hogy az egérkurzor mozgatása során egy felirat, vagy kép megváltozik és amikor az egér "odébbáll", visszaáll az eredeti helyzet. Ezt az onMouseOver és az onMouseOut eseményekhez kapcsolt függvények biztosítják, a következők szerint: A fenti kód egy olyan hiperlink kódja, ahol a link fölé kerülő egér kiváltotta esemény hatására az eredeti kép helyett (eredeti.jpg) egy másik kép (aktiv.jpg) töltődik be, míg az egérmutató távozása esetén az eredeti kép áll helyre. Ehhez két pixelre azonos méretű képre van szükség, hogy az oldal nem mozduljon el, és kihasználtuk a dokumentum objektum modell által biztosított images tömböt. Mivel az oldalon a kód értelmezése sorrendjében ez a kép az első, így a tömb első eleme is ez a kép lesz, és a tömb minden eleméhez tartozik egy src attribútum, amely a képfájl nevét és elérési útját tartalmazza. Ezt változtatva a JavaScript segítségével a kép is megváltozik. Az események egy speciális csoportját képezik az időzítő események. Sok esetben szükséges lehet a dinamikus tartalom megjelenítése érdekében, hogy egyes JavaScript függvények időben egymás után, és/vagy adott rendszerességgel kerüljenek meghívásra. Erre mutatunk be egy példát az alábbiakban, ahol a rendszeresen meghívott függvény a rendszeridőt olvassa le és írja ki, ezzel mintegy órát működtetve a weblapon. 96 Forrás: http://www.doksi.hu A webprogramozás alapjai Digitális óra <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> <script language="JavaScript" > var kezdIdo = new Date(); var kezdet = kezdIdo.getTime(); var setting = 500; function dig_ora() { most = new Date(); ora = most.getHours(); if (ora < 10) ora = "0" + ora; perc = most.getMinutes(); if (perc < 10) perc = "0" + perc; mperc = most.getSeconds(); if (mperc < 10) mperc = "0" +mperc; var msg = ora+":"+perc+":"+mperc ; document.oraform.ora.value=msg; setTimeout("dig_ora()",1000); } Hogyan készítsünk valódi órát? A kódból látható, hogy a dig_ora() függvény egy időkiírást hoz létre, miután a Date objektumtól elkéri a szükséges adatokat és ezt az idő sztringet az űrlap ora nevű szövegmezőjébe írja be, kihasználva az objektum value tulajdonságának módosíthatóságát. A működtetés a setTimeout() függvény feladata, az első paramétere annak a függvénynek a neve, amelyet meg kell hívni, a második paraméter az időintervallum két meghívás között, milliszekundumokban megadva. Magát a dig_ora() függvényt az onLoad 97 Forrás: http://www.doksi.hu A webprogramozás alapjai eseményhez kapcsoltuk, azaz az oldal betöltésével indul és utána a függvényhívások rekurzív módon zajlanak, azaz magából a lefutó függvényből hívódik meg újra, a beállított késleltetéssel. JavaScript objektumok A JavaScript erejét a benne megvalósított objektumok és az általa elérhető objektumok adják. A teljes objektumreferencia, az egyes JavaScript verziók és az általuk ismert metódusok részleteiben megtalálhatók a referenciákban. Itt most csak a legfontosabb metódusokat és tulajdonságokat említjük meg, hogy elősegítsük a tájékozódást az objektumok között. String objektum Karaktersorozatok, sztringek kezelésére szolgál, a létrehozása, működése nagyon hasonlít a Java String objektum működéséhez. A length tulajdonság az egyik leggyakrabban lekérdezett tulajdonság, a tárolt sztring hosszát adja vissza. A toUpperCase() metódus A match() metódus a sztring nagybetűs reprezentációját adja vissza. egy meghatározott sztring értékre kereshetünk rá a tárolt sztringen belül. Az indexOf() metódus egy megadott sztring (karakter) első előfordulásának a pozicióját adja vissza a tárolt sztringben. A replace() metódus karaktereket helyettesíthetünk a tárolt sztringben megadott karakterekkel. Date objektum A Date objektum dátumokkal és időpontokkal való munkát tesz lehetővé. Amennyiben nem adunk meg kezdőértéket, automatikusan az aktuális dátumot és időpontot tárolja. Ezeket az értékeket a megfelelő formában kiolvashatjuk a Date objektum által biztosított metódusok segítségével. A getTime() metódus az eltelt időt képes visszaadni egy meghatározott alapértéktől számítva. A getFullYear(), getMonth(), getDate() metódusok, sorrendben megfeleltetve, a beállított dátum objektumnak megfelelő év, hónap és nap értékeket adják vissza. Mindig tart98 Forrás: http://www.doksi.hu A webprogramozás alapjai suk szem előtt az objektumreferenciát, mert például a logikusnak látszó getDay() függvény a hét napját adja vissza szám formájában és nem a hónap napjait! Két dátum objektum össze is hasonlítható, mert az objektum tetszés szerinti dátumra állítható rá és így például vizsgálható, hogy a beállított dátumhoz képest hány nap van még hátra, vagy hány nap telt el a kijelölt időponttól. Array objektum Ez a JavaScript nyelvben használt tömb, de kezelése és működése inkább a Java-ban megismert Vector objektumhoz hasonlít. Nem egyszerű változó, hanem objektum, a megfelelő metódusokkal felszerelve. A for…in utasítás kapcsán már találkoztunk vele, létrehozása az objektumokkal azonos módon a new kulcsszóval történik. A concat() metódus két array objektum összekapcsolására szolgál. A sort() metódus egy array objektum elemeinek a sorba rendezésére szolgál. Nem csak az alapvetően elvárható, számok esetén növekvő érték szerinti és sztringek esetén az abc szerinti sorba rendezés oldható meg, hanem megadható az a függvény is, amely az egyes elemek egymáshoz való viszonyát megállapítja. Ez hasonlóan működik, mint a Java compareTo() metódusa, csak itt a konténer ismeri a sorba rendezés feltételét és nem az objektum. A push() és pop() metódusok segítségével az array objektumhoz elemeket adhatunk és elemeket távolíthatunk el. Működésük nagymértékben analóg a Java Vector objektuma add() és remove() metódusával. Boolean objektum Szerepe speciális, fő feladata, hogy tetszés szerinti nem boolean típusú értéket Boolean értékké tudjunk alakítani. Létrehozása a new kulcsszóval történik, értéke mindenképpen false, ha nincs kezdőértéke, vagy van, de a kezdőérték 0, negatív szám, null, üres sztring, false, nem meghatározott (undefined)21 vagy nem szám (NaN). Az egyéb esetekben az érték true. Math objektum 21 Akkor lehet egy változó értéke undefined, ha még nem kapott értéket. Ilyen például egy űrlap első betöltése esetén az összes, value attribútummal nem rendelkező mező értéke. 99 Forrás: http://www.doksi.hu A webprogramozás alapjai Ismét egy különleges objektum, nem kell létrehozni, nem tárol semmit, csak a matematikai függvények, konstansok, összefüggések megvalósítására szolgál. Gyakrabban használjuk a random(), max(), min(), vagy round() metódusát, ezek neve egyértelműen jelzi a mögöttük meghúzódó funkciókat. Az alábbi példakód egy, a megadott számtartományban véletlen egész számot generáló függvényt mutat be. function vszam(elso, utolso){ return Math.floor(Math.random() * (utolso-elso+1)) + elso; } Böngésző objektumok Nem csak a JavaScript saját objektumai állnak rendelkezésre, hanem a böngésző által biztosított objektumok is. Ezek segítségével a környezetről, a böngésző működéséről kaphatunk adatokat. Értelemszerű, hogy ezek az objektumok a legkevésbé szabványosak, hiszen minden böngésző gyártó többé-kevésbé a saját elképzeléseit építette bele ezekbe az objektumokba. Öt ilyen objektumot különböztetünk meg, a hierarchia csúcsán a window objektum áll, amely a JavaScript hierarchiájának a legfelső szintjén helyezkedik el. Ez az objektum egy böngészőablakot képvisel és automatikusan jön létre, amikor egy body vagy frameset elem végrehajtásra kerül. A navigator objektum a kliens gépen futó böngészőről tárol információt. Ezt kell lekérdeznünk, ha a böngészők eltérő tulajdonságait figyelembe akarjuk venni, hogy az eltérések ellenére is azonos megjelenésű és működésű weblapokat tudjunk létrehozni. A screen objektum a kliens gép képernyőjét képviseli és arról rendelkezik információkkal. Lekérdezésével megállapítható, hogy a kliens milyen felbontásban, milyen képernyő beállításokkal dolgozik és lehetőséget biztosít a weboldalak testre szabására. A history objektum a böngésző ablakához kapcsoltan a meglátogatott weboldalak URIjeit tartalmazza. Ez teszi lehetővé a visszalépést egy már korábban meglátogatott weboldalra és amíg a böngésző példány fut a history-ban hivatkozhatók a meglátogatott oldalak, a sorrendjük alapján. Például visszaugorhatunk tetszés szerinti számú lapot. A location objektum viszont az éppen aktuális URI-ről tárol információt, amire az ismételten elküldött http kérések során van szükség. JavaScript segítségével. A location ob100 Forrás: http://www.doksi.hu A webprogramozás alapjai jektum reload() vagy replace() függvényei segítségével egy új oldalt tudunk betölteni az aktuális helyére, ha ezt a lefuttatott ellenőrzés szükségessé teszi. A document objektum és gyerekobjektumai A HTML/XHTML Dokument Objektum Modellt és annak objektumait, a document objektumot és gyerekobjektumait a böngésző biztosítja. Ez az objektum modell platform és nyel független, bármely programozási nyelv, mint például a Java, JavaScript és VBScript egyaránt hozzáférhet ezekhez. Az objektum faszerkezetét a böngésző állítja fel a leírónyelv szabályai alapján. Ezen keresztül az összes XHTML elem elérhető, elérhetők azok attribútumai és az értékként szolgáló karakteres részek, szövegek is. Ez a tartalom, mint az objektumok tulajdonságai, módosíthatók, de maguk az objektumok is törölhetők vagy új objektumok adhatók a modellhez. Ezeken keresztül biztosítható az XHTML dinamikussága. Gyerekelemnek tekinthető az összes XHTML elem, amely meghatározásra került az XHTML Javaslatban. Mivel az elemek a name és jelenleg egyre inkább az id attribútumaikon keresztül egyértelműen azonosíthatók, az egyes objektumok a document objektum getElementById() metódusán keresztül kezelhetők, értékük kiolvasható vagy módosítható a teljes hierarchia ismerete nélkül. Az alábbi utasítás például egy szladatum azonosítóval rendelkező beviteli mezőbe állítja be a mai dátumot, a konkatenálással (összefűzéssel) megadott formátumban. <script language="javascript1.2"> mainap = new Date(); dstring = mainap.getFullYear() + "/" + (mainap.getMonth()+1) + "/" +mainap.getDate(); document.getElementById("szladatum").value = dstring; 6.5. Űrlapok és JavaScript A korábbiakban már néhány példában látható volt, hogy a JavaScript kezelni képes az űrlap objektumokat a többi objektumhoz hasonló módon. A legnagyobb jelentősége 101 Forrás: http://www.doksi.hu A webprogramozás alapjai azonban a JavaScript nyelvnek, hogy segítségével kliens oldali ellenőrzések végezhetők. Az alábbi gyakorlati példában többféle ellenőrzés látható, amit az egyes űrlapmezők esetén a JavaScript végrehajt. Nem csak ellenőrzés van azonban, hanem a külön megírt ellenőrző függvények – a moduláris programozás miatt ezek tetszés szerint cserélhetők, csak az a lényeg, hogy egy boolean visszatérési értéket hoznak létre – a mező elhagyása után az onBlur eseményhez kapcsoltan lefutnak, és amennyiben nem jó az érték, a felhasználót a select() metódus visszaviszi a rosszul kitöltött mezőbe. Praktikusan addig nem lehet továbblépni, míg a kitöltés nem tökéletes – vagy a JavaScripthez értő felhasználó ki nem kapcsolja a kódban az ellenőrzést. Érdemes megfigyelni még, hogy az objektumon, azaz a beviteli mezőn belül a mező objektumra egyszerűen a this lokális referenciával hivatkozhatunk, így nincs szükség az objektummodell elemeit külön azonosítani. Űrlap ellenőrzés JavaScript függvények segítségével <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> <script language="Javascript1.2"> var neve; function joirszam(irszam) { if (!isNaN(irszam)) return true; else return false; } function jologin(login) { if (login.length >= 6) return true; else return false; } function joemail(email) { if ((email.lastIndexOf('@') == -1) || (email.length < 6)) return false; 102 Forrás: http://www.doksi.hu A webprogramozás alapjai else return true; } function jojelszo(jelszo) { if (jelszo.match('[0-9]')) return true; else return false; } Honnan tudjuk, hogy jó értéket vittek be? 103 Forrás: http://www.doksi.hu A webprogramozás alapjai login jelszó irányítószám email cím Természetesen számos egyéb ellenőrzés lehetséges, nagyon jól működnek viszont a formai ellenőrzésben az úgynevezett reguláris kifejezés alapján történő összehasonlítások. Ezekkel tetszés szerinti maszk készíthető el és finom különbségek is kiszűrhetők a bevitt értékekben. Az így előkészített adatok gyorsabban feldolgozhatók, mert csak a kifejezetten rosszindulatú felhasználó által szándékosan elkövetett hibákat kell már csak kiszűrni a szerveroldalon. 6.6. Ellenőrző kérdések 104 Forrás: http://www.doksi.hu A webprogramozás alapjai 7. Irodalomjegyzék, referencia táblázatok, szabványok Az alábbiakban hivatkozunk néhány olyan táblázatra, ajánlásra, amelyet a webprogramozás, a webes alkalmazások elkészítése során jól lehet használni referenciaként. Ezek mindegyike az Interneten megtalálható, mi több, onnét gyűjtöttük össze a címeket is. Fontos megjegyezni, hogy a többé-kevésbé hivatalos lelőhelyek tartalmazzák mindig az aktuális változatokat, ezért amennyiben kritikus alkalmazásuk, mindig az eredeti táblázatokat használják és az itt közreadottakra csak mint gyors, tájékoztató információ támaszkodjanak. Felhasznált irodalom: Neil Bradley: Az XML kézikönyv. Új, átdolgozott kiadás. Szak kiadó Angster Erzsébet: Objektumorientált tervezés és programozás. 1. kötet. 4Kör Bt. Virginia DeBolt: HTML és CSS webszerkesztés stílusosan. Kiskapu kiadó Michael Moncur: Tanuljuk meg a JavaScript használatát. Kiskapu kiadó http://www.w3schools.com http://www.w3c.org http://developer.mozilla.org/en/docs/JavaScript http://www.apache.org/ http://www.mozilla.com/en-US/firefox/ http://weblabor.hu/ referencia táblázatok: HTML DOM referencia: http://www.w3schools.com/htmldom/dom_reference.asp JS objektum referencia: http://www.w3schools.com/jsref/default.asp CSS2 referencia: http://www.w3schools.com/css/css_reference.asp 105 Forrás: http://www.doksi.hu A webprogramozás alapjai core JavaScript referencia: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference DOM referencia: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference 106

balszélső cím cella	középső cím cella	jobbszélső cím cella
balszélső cella	középső cella	jobbszélső cella
balszélső cella	középső cella	jobbszélső cella

Forrás:

Recommend Documents

címsor 1

címsor 2

címsor 3

címsor 4

címsor 5

címsor 6