Mester Gyula 2003 Internet

Átírás

1

2 Internet Windows környezetben A HTML nyelv alapjai Kliensoldali programozás Szerveroldali programozás XML WAP

3 Bevezetés Alapfogalmak Az Internet főbb szolgáltatásai Windows környezetben

4 1.1. Bevezetés Az Internet számítógépekből kötötti kapcsolatból áll, amely számítógépeket egy TCP/IP nevű hálózati protokoll köt össze számitógép - világhálózatba. Feladata emberek és intézmények közötti hatékony kapcsolattartás, információk tárolása és kicserélése.

5 Föbb tulajdonságai: szabad (országhatárok nélküli) információcserét biztosít, mindenki számára hozzáférhető, rugalmas megbízható és dinamikusan fejlődő rendszer, világhálózat (hálózatok hálózata), számítógép és szoftver független. aktuális, gyors és naprakész információt biztosít, minden hálózati csomópont (node) az Interneten egyenrangú.

6 Az Internet története Az Internet története az 1960-as évek elején kezdődött az USA Védelmi Minisztériuma által finanszírozott kutatási program keretén belül. A projekt neve kezdetben ARPANET volt. ARPA - Advanced Research Projects Agency ban az ARPANET áttér a TCP/IP-re és ettől kezdve használjuk za Internet kifejezést. Az első európai Internet - szolgáltató az 1980-as évek elején kezdte meg a működését.

7 Az Internetet a továbbiakban az oktatási - kutatási szféra fejlesztette, később kereskedelmi célokból fejlődőtt tovább (1992, CERN, WWW, Tim Berners-Lee). Az Internet igazi fejlődése 1993 után indult el világszerte a WEB technológia kifejlesztése után. Magyarország: 1988 posta, 1993 HBONE gerinchálózat kiépítésének a megkezdése, 1996 Sulinet.

8 1.2. Alapfogalmak TCP/IP protokoll IP cím Az Internet kapcsolat megvalósitásának lehetőségei Helyi hálózatok Helyi hálózatok bekapcsolása az Internetbe Hálózati eszközök Intranet Kliens, szerver és proxy

9 1.2.1 TCP/IP protokoll A TCP/IP protokoll (Transmission Controll Protocol /Internet Protocol) az egyik számítógépről a másikra eljuttatandó információhalmazt csomagokra bontja és indítja a cél felé. A csomagok célba jutásáról és összeillesztéséről is a TCP/IP protokoll gondoskodik.

10 1.2.2 IP cím Egy TCP-IP alapú számítógép hálózatban minden egyes számítógépnek egyedi azonosítója van, amelyet IP címnek (IP address) nevezünk. Feladata, hogy a szállítási szintű protokollok által előállított csomagokat a fejrészben megadott című számítógépekhez továbbítsa nagy kiterjedésű hálózaton belül is.

11 Az IP cím egyetlen 32 bites szám, az egyszerűbb használat érdekében 4 darab 8 bites részre szokták szétválasztani, amelyeken belül értékek fordulnak elő. Ezeket a számokat egymástól ponttal elválasztva decimális formában alkalmazzák. IP cím példa:

12 Az IP cím két részből áll: Az első a helyi hálózat azonosítója, amelyhez a csomópont (node) tartozik, A második ezen helyi hálózaton belül a csomópontot jelöli. Az Internet használatához tehát a számítógépünkön be kell állítani az IP címet (IP address). Fontos megjegyzés: A számítógépek IP címeinek az egész Interneten belül egyedinek kell lennie!

13 Ezért a helyi hálózatok IP címének első néhány bitjét külső szolgáltató határozza meg. Hierarchia szerint A, B és C osztályú címek kerülnek kiosztásra. Világméretekben az InterNIC (InterNetwork Information Center) felügyelete alá tartozik az IP címek kiosztása, 32 bites címekkel 3.7 miliárd csomópont azonosítható.

14 Az Interneten minden IP címhez hozzárendelnek egy nevet, ez a hivatkozási név a Domain neve a számitógépnek. Példa: = maugli.vts.su.ac.yu A névhierarchia az Internet tartománynév rendszere - DNS. DNS Domain Name System

15 A Domain név általános (hierarchikus) felépítése: gép.részleg.intézmény.ország és jobbról balra kell kiolvasni.például: szef.u-szeged.hu hu azt jelenti, hogy a számítógép a magyarországi számítógépek csoportjához tartozik, ezek a kétbetűs végződések mindig valamilyen országra utalnak (Németország- de, Olaszország - it, egyedül az USA -nak nincs ilyen végzödése). u szeged a Szegedi Tudományegyetem jelölése, szef pedig a Szegedi Élelmiszeripari Főiskolai Kar jelölése.

16 Domain névszabályok A név min. 2 és max. 24 karakterből álljon, (ajánlott 5 10 karakter), A latin ABC (ékezet nélküli) kisbetűi (a-z), kötőjel (-), Numerikus karakterek (0-9), A név elején és végén csak betű vagy numerikus karakter állhat. Az Interneten ugyanannak a domain névnek csak egy gazdája lehet!

17 A legfelsőbb szintű DOMAIN nevek az USA - ban com ipari/üzleti felhasználó, edu egyetemek, oktatási intézmények gov kormányhivatalok, net hálózati szolgáltatók, org szervezetek.

18 1.2.3 Az Internet kapcsolat megvalósitásának lehetőségei bérelt vonal, kapcsolt vonal (dial-up), modem, ISDN, DSL, kábelnet, szatelit kapcsolat, mobil kapcsolat, WAP, GPRS Az Internetet internetszolgáltatón keresztül érhetjük el. Magyarországon jelenleg 111 internetszolgáltató van bejegyezve (2002 es adat).

19 A legegyszerübb otthoni kapcsolat rendszerű (dial up) internetezés esetében szükségünk van egy: telefonvonalra és számítógépre modemre. Az internetszolgáltatóval megkötött szerződés és útmutató alapján kapunk egy: telefonszámot (amin elérhetjük az internetszolgáltató számítógépét), felhasználói nevet (username), és jelszót (password).

20 1.2.4 Helyi hálózatok Helyi hálózat - nak (LAN - Local Area Network) nevezzük azokat az egymással összekötött számítógépeket, amelyek egy épületben vannak és egy intézményhez tartoznak. Az alapértelmezett átjáró (default gateway) egy számítógép, amely a külső hálózatoknak szóló csomagokat továbbitja rendeltetési helyüknek megfelelően, vagyis összekapcsolja a helyi hálózatot az Internettel.

21 1.2.5 Helyi hálózatok bekapcsolása az Internetbe Feltételek: szerződésmegkötés internetszolgáltatóval, hivatalosan regisztrált IP cim és domain név bejegyzése, hálózati adminisztrátor kirendelése, fizikai kapcsolat létesitése, internet Szerver instalálása, eszközök konfigurálása.

22 1.2.6 Hálózati eszközök Router Amikor két különböző hálózaton elhelyezkedő számítógép egymással komunikációt folytat, akkor a hálózatokat összekötő berendezések, a forgalomirányító (router) által felépített kapcsolatot használják. A router a hálózat olyan aktiv eleme, amely több hálózati csatolót tartalmaz, melyek mindegyike más hálózathoz kapcsolódik.

23 Hub elágaztat, erősít, jelet formál, tápfeszültséget igényel. Switch elágaztat, programozható és ethernet szinten forgalmat irányít. Repeater jelismétlő alacsony szinten elektromos jelek ismétlését végzi. Bridge két hálózatot alacsonyabb szinten összekötő eszköz.

24 1.2.7 Intranet Intranet-té alakul át egy helyi hálózat, ha az Internet protokollokat (TCP/IP) használja és a helyi szerver Internet jellegű szolgáltatásokat nyujt. Az Intranet tehát egy intézmény saját belső jellegű számítógép hálózata, amely Internet - szoftver segítségével működik.

25 1.2.8 Kliens, szerver és proxy A kliens gép az a számítógép, amely egy szerver egy ismert portjához szolgáltatás igénybevétele céljából kapcsolódik. A szerver olyan számítógép, amely szolgáltatás nyujtása céljából egy TCP-portot egy kliens számítógéppel összeköt. A proxy olyan számítógép, amely csatornát bíztosít a helyi hálózatban (LAN) elhelyezkedő számítógép internetkapcsolatai számára.

26 Kliens-szerver-proxy architektúra Kliens Kliens Proxy Internet Szerver Kliens

27 A proxy feladatai: megkönyíteni a betárcsázást az internetszolgáltatóhoz, a kliensgépek internetre irányuló kérelmeinek a figyelése.

28 A kliens/szerver alkalmazásmodell egy kétrétegű szolgáltatásalapú architektúra a felhasználó számitógépe és a szerver között. Működési folyamata a felhasználó kérésére indul be. A kliens program a felhasználó számitógépén fut elindithat különböző funkciókat (adatok kérése megjelenitése stb.) és kapcsolatot létesit a szerver programmal. A szerverporgram a szerveren fut és több felhasználót is kiszolgál. Kliens/szerver architektúra vázlata

29 Kliens/Szerver architektúra User TCP/IP protokoll Server Kliens program - kapcsolatot létesit a szerver programmal - adatbevitel - kérésinditás - válaszfogadás. Szerver program egyidejûleg több klienst is kiszolgál.

30 Az Internet szolgáltatásainak a használatához, tehát operációs rendszerünknek, megfelelő programot (kliens alkalmazást) kell futatnunk, illetve a hálózathoz kapcsolódó olyan kiszolgálóra (szerver) kell belépnünk felhassználóként (user) amelyen keresztül az adott szolgáltatás elérhető.

31 1.3 Az Internet főbb szolgáltatásai elektronikus levelezés Fejrész A levél szövege WORLD WIDE WEB WWW URL Keresőszerverek FTP File Transfer Protocoll Anonymous FTP szolgáltató Telnet A HTTP protokoll

32 elektronikus levelezés Az elektronikus levelezés az Internet legrégebbi és legelterjedtebb szolgáltatása. Az az elektronikus levél. Szöveges üzenetek küldése ( 7 bites adatátvitel a magyar ékezetes betük nem férnek el 7 biten kódolva!) és 8 bites adatok küldése fájl alakban (képek, zene, videoállomány, programok).

33 Az elektronikus levelezés előnyei: A levelezés sebessége, az írott üzenet leggyorsabb továbbítási módja, helyettesítheti a többi komunikációs eszköszt (fax, hagyományos levél), Az elektronikus levél továbszerkeszthetősége, Adatbázisok- és fájl archivumok használati lehetősége.

34 Az elektronikus levelezés használatához egy levelezőprogramra van szükségünk. Ma a legnépszerübb levelezőprogramok a következők: Microsoft Outlook, Microsoft Outlook Express. Netscape Mail. Eudora. A levél küldésére akkor kerül sor, ha a feladó és a cimzett is rendelkezik elektronikus postafiókkal.

35 A levelező rendszerek fontosabb funkciói: levelezőprogram elindítása, levelek elolvasása, automatikus válaszlehetőség (replay), nekünk küldött levelek továbbítása más címre (forward), levelek kinyomtatása. levelek megörzése saját postafiókunkban, levelek törlése, levelek szerkesztése, levelek elküldése, kilépés a levelezőprogramból.

36 Az elektronikus levelek két részből állnak: Fejrész elektronikus boríték, egy részét a feladó, a többit a levelezőprogram tölti ki. Tartalmazza: A feladó (legfontosabb adat) és a címzet E mail címét (felhasználóinév@domain). A levél elküldésének a dátumát (date), a levelezőszoftver automatikusan illeszti a levélhez, A levél tárgyát (subject), amely röviden és tömören utal a levél tartalmára (nem kötelező kitölteni).

37 Az E mail cím az angol ábécé betüit tartalmazhatja, valamint a számjegyeket és pontot. Szóköz nem fordulhat elő, a végén nincs pont! A fejlécben a címzet a: To: felhasználóinév@domain alakban szerepel. Amig a feladó címét a: From: felhasználóinév@domain sor tartalmazza, amely válaszadáskor elérhető.

38 Cc: (Carbon Copy) nyilt másolat azt jelenti, hogy ki kap másolatot a levélböl (kitöltése nem kötelező). A cc: mezőbe vesszővel elválasztott több címet is írhatunk. Bc: (Blind Copy) rejtett másolat ugyanazt a célt szolgálja mint a Cc: csak ilyenkor az eredeti címzett nem látja, hogy kinek küldtünk még levélmásolatot.

39 A levél szövege Tartalmazza az általunk megírt szöveget, melyet a szövegszerkesztöbe gépelünk bele. A levél tartalmát csatolással (Attachment - szöveg, kép, hang) is megoldhatjuk vagy kibővíthetjük. A legtöbb levelezőprogram lehetővé teszi az aláirás (signature) fájl létrehozását. Tartalmazza: a feladó nevét, titulussát, intézménynévet és elérési adatokat. Megjegyzés: Célszerű a levelezőprogramok címjegyzékét (Address Book) használni, amelybe levelezőpartnereink címét tárolhatjuk.

40 1.3.2 WORLD WIDE WEB WWW Az Internet leggyorsabban fejlődő legnépszerűbb szolgáltatása. Grafikus, gyors mozgást és keresést lehetővé tévő felület, amelyel dokumentumokat (szöveg, kép, grafika, mozgókép, hang) nézhetünk meg az Interneten. A hypertext formátumú dokumentum oldalak között egyszerűen lehet lépdelni, azokon böngészni. A különböző dokumentumok kapcsolata link ek révén valósúl meg.

41 A hypertext koncepción alapuló webet a svájci CERN laboratoriumában fejlesztette ki Tim Berners Lee, Kezdetben a weblapok csak formázott szöveget és hiperlinkeket tartalmaztak. A WWW: kliens-szerver modell alapján működő rendszer, hypertext kapcsolatokat használ, URL segítségével. A weben található dokumentumok eléréséhez webböngészőt használunk. Microsoft Internet Explorer. Netscape.

42 Jelenleg (2003) a böngészőpiac több mint 95 százalékát a Microsoft Internet Explorer birtokolja. A weben minden egyes dokumentumot egy címmel azonosítunk. A dokumentum elérésére a webböngészőnk megfelelő mezőjébe beírjuk a keresett dokumentum webcímét. HTML (HyperText Markup Language) a web programozási nyelve. JavaScript, VBScript és a PHP nyelvek lehetővé tették az interaktív tartalom kialakítását.

43 1.3.3 URL Az Universal Resource Locator rővidítése. Az URL meghatározza a céldokumentum pontos elérési útvonalát és formátumát. Példa: Mindel weboldal előtaggal kezdődik. A az ún. subdomain név..hu ez a domain névnek országot jelölő része.

44 1.3.4 Keresőszerverek A kersett információ megtalálására a weben a keresőszerverek segítenek. Ismertebb keresőszerverek: Google Yahoo Altavista Origo

45 1.3.5 FTP File Transfer Protocoll A FTP az Interneten történő állományátvitel szabványos formája. Alkalmazásával fájl átvitel lehetséges egy távoli és egy helyi számítógép között. Ismernünk kell az FTP szerver IP címét, amihez a saját számítógépünket akarjuk kapcsolni. Nagyobb adatátviteli sebességet és folyamatos on line kapcsolatot igényel.

46 Szöveges vagy bináris állományok átvitele lehetséges. A kapcsolat egy ftp programmal lehetséges, ahol meg kell adni az FTP-szerver címét. Ha a kapcsolat létrejött, a program kéri az azonosítót és jelszót. A fájl letöltésére szükséges a fájl pontos helyének ismerete (könyvtár, alkönyvtár, fájlnév).

47 Anonymous FTP szolgáltató Az Anonymous FTP szolgáltató account nélküli nyilványos hozzáférést biztosit. Az ilyen számitógépekre az anonymus azonosító szó begépelésével kell bejelentkezni. Jelszóként a saját címünket adjuk meg, ezután láthatjuk a gép könyvtárát és megkezdőthet a fájlátvitel. Anonymus FTP szolgáltató példák: ftp.bme.hu ftp.sztaki.hu

48 1.3.6 Telnet Távoli számitógépek szolgáltatásainak elérésére szolgáló protokoll. Lehetővé teszi a bejelentkezést egy távoli számitógépre és ha van felhasználói jogosultságunk az erőforrásait használni. Nagyobb adatátviteli sebességet és folyamatos on line kapcsolatot igényel. Ha van felhasználói jogosultságunk (account) módunkba van a távoli gép erőforrásait úgy használni mintha egy terminálja előtt ülnénk. Igy a távoli számitógépen programokat futtathatunk és a képernyön megjelenő információkat tölthetünk le (download).

49 1.3.7 A HTTP protokoll A HTTP (Hypertext Transfer Protocol) szinkron kérés-válasz műkődést megvalósító protokoll, TCP protokoll felett működik. A HTTP-csomag féjlécből és adattartalomból áll. Minden kérésre egy és csakis egy válasz érkezik. Kétféle HTTP csomagot különböztetünk meg: kérelmet és választ. A HTTP - csomag blokk sémája a következő ábrán látható:

50 IP- fejléc TCP- fejléc Adattartalom 1.3 ábra A HTTP - csomag blokk sémája

51 Mester Gyula 2003 A HTML nyelv alapjai

52 2. A HTML nyelv alapjai 2.1 Bevezetés 2.2 Alap HTML tag-ek 2.3 A HTML dokumentumok alapszerkezete 2.4 Szövegformázó elemek Karakter formázó HTML tag-ek Sor és bekezdés formázó HTML tag-ek 2.5 Listák létrehozása Egyszerű listák Sorszámozott lista 2.6 Képek beágyazása 2.7 Hiperhivatkozások létrehozása 2.8 Táblázatok létrehozása 2.9 HTML keretek 2.10 Kérdőívek Objektumok beágyazása 2.12 Scriptek 2.13 Stíluslapok 2.14 Statikus Web oldalak

53 2.1 Bevezetés Az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML összes lehetőségét felhasználva jól megszerkesztett weboldalakat hozhatunk létre. A HTML (Hypertext Markup Language, 1989) az SGML (Standard Generalized Markup Language, 1986.) nyelvből ered. Eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki. Idők folyamán multimédiális tartalommal dinamikusan fejlődött tovább. Jelenleg a HTML 4.01 verziónál tartunk.

54 2.2 Alap HTML tag-ek A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML tag"-eket formázóutasításokat. Ezeket az utasításokat a böngészőprogram értelmezi és végrehajtja. A HTML dokumentum elemekből áll, minden elemnek van nyitó és záró tag-je, amelyek szöveget fognak körül. Példa HTML elemre: <title> Szeged </title>

55 A HTML dokumentumban a szövegblokkot tehát két tag veszi körül, az első tag-et nyitó tag-nek a befejezőt pedig záró tag-nek nevezzük. A HTML tag szintaktikailag egy kisebb jel < (vagy </ ) és egy nagyobb jel > közötti azonosítóból áll. Példa HTML tag-re: <head> A záró tag azonos azonosítója (</title>) megegyezik a hozzátartozó nyitó tag (<title>) azonosítójával, a különbség csak abból áll, hogy a kisebb jelet egy perjel követi (</).

56 A HTML dokumentum <html> nyító tag-el kezdödik és a </html> záró tag-gel záródik. A dokumentum látható része a <body> és a </body> tag pár között helyezkedik el. A nyitó tag-ek a tag-azonositón kivűl különféle attribútum értéket is tartalmazhatnak: attribútum= érték alakban! Az attribútumokkal tovább szabályozhatjuk a körülfogott szöveg formázását. A továbbiakban a nyitó tag-eket az attribútumokkal adjuk meg.

57 Fontos megjegyzés: A HTML programban a HTML elemek egymásba ágyazhatók, de egymást nem lapolhatják át! Ez azt jelenti, hogy az utoljára megnyitott utasítást kell legelőször lezárnunk. Jó példa: Rossz példa: <azonosító1> <azonosító2> Szövegrész tartalom </azonosító2> </azonosító1> <azonosító1> <azonosító2> Szövegrész - tartalom </azonosító1> </azonosító2>

58 2.3 A HTML DOKUMENTUMOK ALAPSZERKEZETE Egy tetszőleges dokumentumot az tesz HTML dokumentummá, hogy a <html> nyító tag és a </html> záró tag öleli körül. Egy HTML dokumentum három szerkezeti egységre bontható: Az első rész arról ad információt, hogy a dokumentumunk a HTML nyelv melyik verziójában íródott. Példa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

59 A következő példa esetében ezt bemutatjuk, a többi példákánál viszont, az egyszerűség kedvéért, az első résztől eltekintünk. A második rész egy fejléc elem: <head>... </head> amely olyan információkat tartalmaz, amelyek az egész dokumentumra vonatkoznak. A <head> és a </head> fejléc tag-ek között helyezzük el a: <title>... </title> elemet melynek szöveges tartalma a böngésző címsorában jelenik meg (nem a Web lapon!).

60 A harmadik rész a dokumentum törzse test elem: <body {alink, background, bgcolor, link, onload, onunload, text, vlink}>... </body> ide kerül az a tartalom, amelyet meg szeretnénk jeleníteni a böngészőkben.

61 Példa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>feladat_01</title> </head> <body> Ez egy HTML dokumentum </body> </html>

62 Az előbbi példánál jól látható a három szerkezeti egység: Az első két sor a dokumentum típusát jelzi. A fejrész a <head> és </head> tag- ek között található. A dokumentum törzse pedig a <body> és </body> tag- ek között helyezkedik el. A dokumentum típus jelzése után egy <html> tag jelzi a dokumentum kezdetét, melynek záró tag- je az utolsó tag a HTML dokumentumban (</html>). A következő ábra a fenti kódrészlet eredményét mutatja za IE 6.0 böngészőprogramban. Feladat 01.ppt

63

64 2.4 SZÖVEGFORMÁZÓ ELEMEK A HTML dokumentumokban az információ egyik fő hordozója a szöveg. Formázására számos elem létezik, melyeket 2 csoportba sorolhatjuk: Karakter formázó HTML tag-ek, Sor és bekezdés formázó HTML tag-ek.

65 2.4.1 Karakter formázó HTML tag-ek Szöveges dokumentumok kezelésénél igen fontos feladat a szövegek formázása. E feladat elvégzésére a HTML nyelvben számos tag áll rendelkezésünkre. A fontok beállitására a <font> tag-ket használjuk. <font {size,color,face}> </font> size- attribútum a font relatív nagyságát adja meg, color- attribútum meghatározza a font szinét, face- attribútum a font betűtípussát határozza meg (pl. Ariel, Courier). Feladat 02.ppt

66

67 Félkövér karaktereket a: <b> </b> Dőlt karaktereket az: <i> </i> Aláhúzott karaktereket az: <u> </u> Áthúzott karaktereket a: <strike> </strike> Alsó indexet a: <sub> </ sub > felső indexet pedig a: <sup> </ sup > elemek segítségével tudunk létrehozni. Feladat 03.ppt

68

69 2.4.2 Sor és bekezdés formázó HTML tag-ek A HTML nyelv a < p {align}> tag-et használja a paragrafus (bekezdés) létrehozására. Az új paragrafus előtt üres sort hagy. Megjegyzés: A < p > tag használata esetében a záró paragrafustag felírása nem kötelező! A < br {clear}> tag soremelési tag záró tag nélkül. Amikor a WWW megjelenítő egy <br> elemhez ér, akkor az utána következő szöveget új sorban a bal margónál kezdi. Feladat 04.ppt

70

71 A HTML nyelvben 6 szint létezik a fejlécek jelölésére. A fejlécek megjelenítésekor nincs megadva pontosan a betűtípús és a fontméret, ezért a különböző böngészők másként jelenítik meg azokat. Az elsőszintűfejléc jelenik meg legnagyobb, a hatodik szintű fejléc pedig a legkisebb betűmérettel. A: <hx {align}>...</hx> tag ahol x egy szám 1 és 6 között a fejlécet jelöli. A <hx> tag alkalmazása után üres sor következik. Feladat 05.ppt

72

73 A <pre {width}> </pre> elem segítségével előre formázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük a HTML dokumentumba. Vonalakat a <hr>...</hr> tudunk létrehozni. <hr {size, width, color, align}> elem segítségével A size és width attribútumokkal a vonal relativ hosszát és pixelben mért vastagságát adhatjuk meg. Feladat 06.ppt

74

75 A sorformázó elemekkel létrehozott szövegblokkot az align attribútum segitségével: jobbra align= right, balra align= left és középre align= center igazíthatók. A <center> </center> elem közé írt szöveg az ablakban középre igazítva jelenik meg. Feladat 07.ppt

76

77 2.5 Listák létrehozása A HTML nyelvben: egyszerű és sorszámozott listát használunk, melyek egymásba ágyazhatók így komplex listák hozhatók létre Egyszerű listák Akkor használjuk, ha nincs szükség a listaelemek számozására. A listát: <ul {compact, type} > </ul> elemmel tudjuk megnyitni (Unordered List).

78 Az <ul> nyitó tag lehetséges attribútumai a következők (default disc ): < ul type ="square"> < ul type ="circle"> < ul type ="disc"> A Listaelemeket <li {type, value} > </li> elemmel tudjuk elhelyezni a listában bajusz mögött (List Item).

79 Egyszerű listát tehát az alábbi módon készíthetünk: <ul> <li>első elem <li>második elem <li>harmadik elem </ul> Az <ul> jelzi, hogy rendezetlen lista (ul = unordered list) kezdődik, az <li> a lista egy elemét jelöli (li = list item), a rendezetlen listát egy </ul> zárja le. Az eredmény: első elem második elem harmadik elem Feladat 08.ppt

80

81 2.5.2 Sorszámozott lista Sorszámozott listát akkor használunk, ha szükséges a listaelemek számozása. A sorszámozott listát: <OL {compact, start, type} > </OL> elemmel valósithatjuk meg (Ordered List). Type attribútummal megadható a sorszámozás tipúsa (default 1,2,3) : < ol type ="a,b,c,... "> < ol type = A,B,C,... "> < ol type = I,II,III,... "> < ol type =" i,ii,iii, "> < ol type =" 1,2,3... ">

82 A rendezett listánál az <ul> helyett <ol> (ol = ordered list) kerül: Egyszerű listát tehát az alábbi módon készíthetünk <ol> <li>első elem <li>második elem <li>harmadik elem </ol> Az eredmény: 1. első elem 2. második elem 3. harmadik elem Feladat 09.ppt

83

84 2.6 Képek beágyazása A képek beágyazására az: < img {align, alt, border, height, hspace, ismap, longdesc, src, name, usemap, vspace, width}> elem szolgál (záró tag nélkül). Több attribútuma is van tehát, például: src- a képfile helyét (URL-jét) tartalmazza, height- megadja a kép magasságát képpontokban, width- a kép szélleségét adja meg képpontokban, border-képkeret vastagsága képpontokban.

85 Ha a képfile a HTML dokumentummal megegyező könyvtárban található, akkor csak a filenevet kell megadnunk. Példa: guru.gif Ha a képfile a HTML dokumentumhoz képest egy másik könyvtárban található, akkor a filenevet egy útvonallal kell kiegésziteni. Példa: images/guru.gif Ha a képfile egy másik Web cimen található, akkor a teljes http cimet kell megadnunk. Feladat 10.ppt (

86

87 2.7 Hiperhivatkozások létrehozása A hiperhivatkozások létrehozására az: <a {acceskey, charset, cords, href, hreflang, name, onblur, onfocus, rel, rev, shape, tabindex, target, type}> </a> elemet használjuk. A nyitó tag legfontosabb attribútuma a href (hypertext reference), ami azt a Web címet azonositja, ahová a hiperhivatkozás aktivizálása esetében kell elugrania a böngészőnek. Tehát a szövegmezőre rákattintva a href-ben megadott Web címre kerülünk. Feladat 11.ppt

88

89 2.8. Táblázatok létrehozása Egy HTML táblázatot a: <table {align, bgcolor, border, cellpanding, cellspacing, frame, rules, summary, width } > </table> elemmel hozunk létre. A táblázat egészére érvényes egyes attribútumokat a nyitó <table> tag-ben adjuk meg: - border keretméret, (alapértelmezett értéke 0), - cellpadding pixelekben meghatározza az üres hely nagyságát a cellákon belül az adatok körül (alapértelmezett értéke 2),

90 - bgcolor háttérszinszín, - cellspacing meghatározza az üres hely nagyságát a cellák, valamint a cellák és a külső táblakeret között (alapértelmezett értéke 2), -width táblázatméret, értékét pixelben és %-ban is megadhatjuk. Egy HTML táblázat táblázatsorokból és cellákból áll. A táblázatsorokat a: <tr {align, bgcolor, char, charoff, valign} > </tr> elemmel hozunk létre és ezek között kell az adott táblázatsor egyes celláit meghatározni.

91 A táblázatcellákat a: <td {abbr, align, axis, bgcolor, char, colspan, headers,height, id, nowrap, rowspan, scope, valign,width}> </td> elem segitségével hozunk létre. A rowspan és a colspan attribútumok segitségével sorokat és oszlopokat lehet összevonni egy táblázatban! A cellák tartalmazhatnak szöveget, képet, de akár egy új táblázatot is. A táblázatnak a <caption {align} > </caption> elemmel címet adhatunk amely a táblázat felett jelenik meg. Feladat 12.ppt

92

93

94 HTML táblázatok programtörzse 1 sor és 2 cella: <body> <table> <tr> <td> </td> <td> </td> </tr> </table> </body> 2 sor és 2 cella: <body> <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> Feladat 13.ppt

95

96

97 A táblázat fejlécének létrehozására a: < thead {align, char, charoff, valign}> </thead> elem szolgál. A fejlécben lévő adatok félkövér karakterekkel íródnak ki. A táblázat láblécének létrehozására a: < tfoot {align, char, charoff, valign}> </tfoot> elem szolgál. A láblécben lévő adatok is félkövér karakterekkel íródnak ki. A táblázat törzsét: < tbody {align, char, charoff, valign}> </tbody> elemmel hozhatjuk létre (a lábléc után kell megadni) Feladat 14.ppt

98 A <colgroup {align, char, charoff, span, valign, width}> </colgroup> elem segitségével a táblázat több oszlopát tudjuk egyszerre létrehozni. Az itt megadott attribútumok az összes létrehozott oszlopra érvényesek! A <col {align, char, charoff, span, valign, width} > </col> elem segítségével megadhatjuk a táblázat egy oszlopát a < colgroup {align, char, charoff, span, valign, width} > </ colgroup > elemen belül.

99 A <th {abbr, align, axis, bgcolor, char, charoff, colspan, headers, height, id, nowrap, rowspan, scope, valign, width} > </th> elemet használjuk a cella megadására, ha azt akarjuk, hogy a cella ugy viselkedjen mintha fejléc lenne. A cella szövege félkövér lesz. Példa: <tr><th> Fejléc </th></tr> A HTML táblázatok egymásba ágyazhatók, egy cellába elhelyezhető egy másik táblázat tartalma is. Összetett Web lapot megjelenithetünk táblázatként is.

100

101 2.9 HTML keretek A HTML keretek alkalmazásával a Web lapot részekre (régiókra) oszthatjuk. A régiókban egy egy önálló HTML dokumentum tartalmát jeleníthetjük meg. A keretek alkalmazása akkor célszerű, ha a Web oldal egyes részeinek a tartalma nem változik (igy akkor nem kell mindig újra tölteni). A HTML kereteket az ún. frameset dokumentumban <frameset {cols, onload, rows, unload}> </ frameset > elem segitségével adjuk meg. Meghatározza a keretek számát és méretét.

102 A <frameset> tag használata esetében nem használhatunk <body> tagot! A <frameset> nyitó tag cols attribútumában az egyes keretek szélessége (% -ban vagy pixelben) adható meg. A <frame {cols, onload, rows, unload} > </ frame> elem szolgál a tényleges kerettartalmak megadására. Egy <frameset> elem annyi <frame> elemet tartalmaz, ahány részre osztottuk a Web oldalt.

103 Az <iframe {frameborder, height, longdesc, marginheight, marginwidth, name, scrolling. scr, width} > </ iframe> elem Web oldalon belüli keret létrehozását teszi lehetővé. Felhasználható egy HTML oldal beágyazására egy másik HTML oldalba. Feladat 15.ppt

104

105

106 2.10 KÉRDŐÍVEK A kérdőívek (szövegablakok, adat- és jelszóbeviteli mezők, gombok, választógomb csoportok) a párbeszédet teszik lehetővé. Minden űrlap elem a: <form {accept, accept-chareset, action, enctype, method, name, onreset, onsubmit, target}> </ form> elem között kell, hogy elhelyezkedjen amely a kitöltendő ürlap tartalmát jelöli ki. A tartalmat az action attribútumban megadott program dolgoza fel.

107 Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni akkor ezt a: <select {disabled, multiple, name, onblur, onchange, onfocus, size, tabindex}> <select> és az: <option {disable, label, selected, value}> < /option > elem párral tudjuk megtenni. A <select>... </select> elem jelzi a lista kezdetét, alapbeállitásban egy legördülő menüt eredményez. Minden választási lehetőség lejátszására a multiple attribútumot használjuk.

108 A <select> listába az <option> </option> elem segitségével tudunk elemeket elhelyezni. Egyszerű gombot a: <button {acceskey, disabled, name, onblur, onfocus, tabindex, type, value} >... </button> elem segitségével tudunk létrehozni. A gombhoz scripteket rendelhetünk, melyek gombnyomással aktiválódnak. Feladat 16.ppt

109

110 Az adatbeviteli mezőket az: <input {accept, accesskey, align, alt, checked, disabled, ismap, maxlength, name, onblur, onchange, onfocus, onselect, readonly, size, scr, tabindex, type, type="button, type="checkbox, type="file, type="hidden, type="image, type="password, type="radio, type="reset, type="submit, type="text, usemap, value} >... </input> elemmel hozhatjuk létre. A type attribútum határozza meg tehát a beviteli mező fajtáját (text, password, file, stb.). A <textarea {accesskey, cols, align, disabled, name, onblur, onchange, onfocus, onselect, readonly, rows, tabindex} >... </textarea> elemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. Feladat 17.ppt

111

112 Az információk csoportosítására a: <fieldset>... </fieldset> elemet használjuk, mely tagok közötti szövegblokkot a böngésző (a többi szövegtől elkülönítve) bekeretezve jeleníti meg. A: <legend {accesskey, align} >... </legend> elem alkalmazásávala keret bal felső szélén címkeszöveget is írhatunk. A mezők a: <label {accesskey, for, onblur, onfocus} >... </label> elemmel felíratozhatók. Feladat 18.ppt

113

114 2.11 OBJEKTUMOK BEÁGYAZÁSA Egy HTML dokumentum multimediális tartalommal (ActiveX komponensek, applet-tek, kép, videó és hangállomány) rendelkezhet. Az objektumok beágyazására az: <object {align, archive, classid, codebase, codetype, data, declare, height, hspace, name, standby, tabindex, type, usemap, vspace, width}>... </object> elemet használjuk.

115 A grafikus objektumokat részekre bonthatjuk, e részekhez kapcsolatok rendelhetők (mappolás). A <map {name}>... </map> elem segítségével megvalósíthatjuk azt, hogy egy kép bizonyos részei önálló hyperlink-két viselkedjenek. Az: <area {accesskey, alt, coords, href, nohref, onblur, onfocus, tabindex, target, title} >... </area> elem segítségével a képet tetszőleges részekre feloszthatjuk és minden ilyen részhez egy egy hyperlink-et hozzárendelünk.

116 2.12 SCRIPTEK Scripteknek azokat a kis programokat nevezzük, amelyek a HTML oldalakkal együtt, vagy azokba ágyazva töltődnek le a kliens számítógépére. A scripteket a böngészőprogramok futtatják. A HTML dokumentum fejlécében a: <script {charset, defer, language, scr, type} >... </script> elemet használjuk a script kód elhelyezésére. Segítségükkel futatni tudjuk a JavaScript, JScript és VBScript programokat.

117 Nem minden böngésző támogatja a scriptek használatát. Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a elem. <nonscript>... </nonscript> Az elem nyitó és záró tag- ek közé szöveges megjegyzést tehetünk. Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a scriptet.

118 2.13 STÍLUSLAPOK A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet) specifikációt. Alapvető célja: bevezetni a stíluslapok alkalmazását a HTML dokumentum formázási utasításai helyet, szétválasztani a HTML dokumentum tartalmi részét a megjelenítési stíluselemektől. A stíluslapokat a HTML dokumentum fejrészében a < style {media, type} >... < /style> elem segítségével definiáljuk.

119 A type attribútum a stíluslapra történő hivatkozás formáját adja meg (text/css). A következő egyszerű példa három stílusdefiniciót tartalmaz amelyek a font típusára, színére és nagyságára vonatkozik alkalmazva a br, pre és code tagokra. <style type="text/css"> <!-- br {font-face: arial; color: black; font-size: 12px"} pre {font-face: arial; color: red; font-size: 18px"} code {font-face: courier; color: blue; font-size: 15px"} --> </style> A továbbiakban bemutatjuk a HTML nyelv 4.0 verziójának össz elemeit.

120

121 2.14 Statikus Web oldalak A Web oldalak fejlesztésének első időszakában csak statikus Web oldalakkal találkozhattunk. A statikus Web oldal egy egyszerű szövegszerkesztőben megírt,.htm (vagy.html) kiterjesztésű HTML kódrészletböl ált. A Web oldal tartalma (szöveg, kép, linkek) változatlan maradt, függetlenül attól, hogy ki, mikor és milyen módon látogat el a Web oldalra. A statikus Web oldal lekérésének és megjelenítésénak a folyamata a következő ábrán látható.

122 (1) A HTML dokument szerkesztése Web szerver (3) A Web szerver kiválasztja a.htm fájlt (4) A Web szerver a HTML dokumentumot a böngészõ felé küldi (2) A felhasználó lekéri a Web lapot A felhasználó számítógépe (5) A böngészõprogram értelmezi a HTML dokumentumot és megjeleníti a képernyõn

123 DHTML JavaScript programozás Mester Gyula 2003 Kliensoldali programozás

124 3.1 DHTML A kliensoldali programozás esetében a programok (JavaScript, Java-appletek) az ügyfél számítógépén, a böngésző segítségével hajtódnak végre. A HTML nyelv alkalmazásának kezdetén a kliens számítógépen a felhasználó egy statikus jellegű dokumentumot kapott. Csak a felhasználó általi (billentyűzettel-egérrel történő) beavatkozás hatására a szerver és kliens számítógépek közötti információcsere tette lehetővé a dokumentum változását.ez lelassította a Web lapok olvasását! A Microsoft és Netscape ezért kidolgozta az un. W3C szabványt a dinamikus HTML DHTML alkalmazására.

125 A dinamikus HTML vagyis DHTML alkalmazása esetében a HTML dokumentum minden egyes eleme egyedi azonosítóval beazonosítható és kliensoldi : Java (Jscript és JavaScript) vagy Visual Basic alapú (VBScript) scriptek segítségével programozható. A kliensoldali scriptek olyan programrészletek amelyek forrásnyelvi alakban a HTML dokumentum keretében töltődnek le a felhasználó számítógépére.

126 A scripteket a böngészőprogram hajtja végre. A végrehajtás bekövetkezhet: egérmozgatás a HTML dokumentum objektumára, egérkattintás, vagy a HTML dokumentum letöltése miatt. Fontos megjegyzés: A böngészőprogramnak tudnia kell interpretálni az alkalmazott script nyelv utasításait. A továbbiakban röviden a DHTML programozását JavaScriptben tekintjük át.

127 3.2 JavaScript programozás Bevezetés Utasítások JavaScript operátorok Változók Vezérlőszerkezetek Feltételes utasítások Elágazások - a switch struktúra Ciklusszerkezetek Függvények Objektumok és metódusok A document objektum A navigator objektum A location tulajdonságadat Az alert függvény A prompt függvény

128 3.2 JavaScript programozás Bevezetés A JavaScript nyelv a Javán alapul (nem részhalmaza), közvetlenül a HTMldokumentumba épűl be és a webböngésző értelmezi. A JavaScripteket a böngészőprogram hajtja végre (scripting engine). A JavaScript első neve Live Script volt.

129 A Netscape a 2.0 verziótól kezdte alkalmazni. Az Internet Explorer a 3.0 verziótól támogatja a JavaScript használatát. A Microsoft Jscript néven fejlesztett ki egy Java nyelvre épűlő implementációt. A két Java nyelv alapú script némileg eltér egymástól. Fontosabb Web címek:

130 A JavaScript program csak mint forrásálllomány áll rendelkezésünkre és az éretelmező-interpreter segítségével hajtjuk végre. Az értelmező a JavaScript forrásállomány beolvasását, fordítását és végrehajtását sorról - sorra hajtja végre. A JavaScript programoknak vannak előnyeik és hátrányaik: - Előnynek számít a JavaScript programok platformfüggetlensége, könnyű átvitele egyik gépről a másikra. - Hátránynak számít a programfuttatás lasúbbsága (az értelmező miatt) és a JavaScript progamok forrásállományának a szerzői jogi védelme (mivel a programokat nem gépi kódban hanem forrásállományban publikálják).

131 Bemutatjuk, a teljesére való törekvés nélkül, hogyan kell egyes nyelvi elemeket használni a JavaScriptben. Kliensoldali JavaScript elhelyezésére a HTML dokumentumban a <SCRIPT>... </SCRIPT> elemet használjuk, amely közzé írjuk a JavaScript forrásnyelvű szöveget. A nyitó SCRIPT tag Language attribútumában kell megadni a használt JavaScript nyelvet. Példa: <SCRIPT LANGUAGE="JavaScript > A forrásprogram szövegét célszerű egy HTML kommentbe elhelyezni a JavaScriptet esetlegesen nem támogató böngésző miatt.

132 A JavaScript programok közvetlen elhelyezése a HTML dokumentumban nem célszerű abban az esetben ha nagy, komplex, vagy többször ismétlődő JavaScript programokat használunk. Ilyen esetben jobb megoldás az ha a JavaScript programokat külön fájlokban tároljuk és a SCRIPT nyitó tag SRC attribútuma segítségével egyszerűen beolvassuk a HTML dokumentumban. A JavaScript program fájl neve.js kiterjesztésű! Példa: <SCRIPT LANGUAGE="JavaScript" SRC= </SCRIPT>

133 Utasítások A JavaScript-ben általában egy utasítás egy sor (egy sorba több utasítás is írható, de a programkód érthetősége miatt ezt célszerű elkerülni). A JavaScript utasítások végére pontosvesszőt kell helyezni. Az utasítások közé vagy az utasítások végére kommenteket is elhelyezhetünk. JavaScript-ben a: - dupla perjel (//) az egysoros komment jele. - a többsoros komment jele pedig /* komment */.

134 JavaScript operátorok Operátoroknak nevezzük a különféle műveleti jeleket, amelyek összekapcsolják a változókat, konstansokat stb. A JavaScriptben használható aritmetikai operátorok a következők: JavaScript operátor Összeadás Kivonás Szorzás Osztás Inkrementálás Dekrementálás Modulus (osztás maradéka) Negatív előjel A művelet jelentése + - * / + + % -

135 A JavaScript-ben használható relációs operátorok a következők: JavaScript operátor A művelet jelentése Egyenlő = kisebb < nagyobb > nem egyenlő!= kisebb vagy egyenlő <= nagyobb vagy egyenlő >=

136 A JavaScript-ben használható logikai operátorok a következők: JavaScript operátor A művelet jelentése Negáció Logikai ÉS művelet Logikai VAGY művelet! && Példák a logikai operátorok használatára: a1=true && true // t && t returns true o2=false true // f t returns true n1=!true //!t returns false

137 Változók A JavaScript program az adatokat változókban tárolja. A változók az alkalmazás futatása alatt változtatják értéküket. A JavaScript-ben a változók deklarációjának (nem kötelező) a kulcsszava a var. A változó neve: csak betűvel kezdődhet és nem egyezhet meg a JavaScript foglalt szavaival (pl. if, then, for, next). A változó nevének hosszúsága nincs korlátozva.

138 A változónak hatféle adattípusa lehet: Szám típusú akkor lesz ha különféle számadattípus értékét vesz fel az értékadás során. String típusú lesz a változó, ha feltöltjük szöveges adattal. A Boolean típusú változók True vagy False értéket vehetnek fel. A Null adattípus a semmit jelenti. Az undefid változó még semmilyen értéket nem kapott. Objektum

139 A változó nevének megválasztásánál a JavaScript érzékeny a kisbetű/nagybetű különbségére, tehát megkülönbözteti a kisbetű/nagybetű használatát. A JavaScript nyelvben a deklarációs utasításban kezdőértéket is adhatunk a változónak. Lehetővé teszi a tömbök használatát.

140 Vezérlőszerkezetek A vezérlőszerkezetek segítségével meghatározhatjuk az utasításoknak eredeti végrehajtási sorrendjét. A JavaScript nyelv vezérlőszerkezetei a következők: Feltételes utasítások, Elágazások, Ciklusok, Kilépő utasítások.

141 Feltételes utasítások Feltételes utasítások segítségével a JavaScript programban lehetőség van, bizonyos feltételek teljesítése esetében egy vagy több utasítás végrehajtására. A feltételes utasítások általános alakja: if (feltétel) { utasítások1 } [else { utasítások2 }]

142 A feltétel rendszerint egy összehasonlítás, amelynek van numerikus értéke. A JavaScript ezeket az értékeket true vagy false értékként értelmezi. Ha a feltétel eredménye True, akkor az utasítások végrehajtódnak. Minden feltételt zárójelbe kell tenni! Példák egyágú feltételes szelekcióra egy vagy több utasítással: If (a>10) { b= a+1; }

143 If (a<10) { b= a-1; c=a+b; } A kétágú szelekció azt jelenti, hogy ha igaz egy adott feltétel, akkor a hozzá kapcsolódó utasítást hajtjuk végre, egyébként egy másikat (az else magyar jelentése: egyébként).

144 A JavaScript először a feltétel feltétel tejesítését vizsgálja, ha értéke false, akkor vizsgálja a következő feltételt, ha annak értéke is false, vizsgálja a következő feltételt és így tovább. Ha megtalálta az első true értékű feltételt, akkor végrehajtja a hozzá tartozó utasítást. Ha nem talál egy true értékű feltételt sem, akkor az else ághoz kerül a vezérlés. A következő két példa az if... else blokk használatát mutatja be:

145 Többirányú feltételes elágazás: Kétirányú feltételes elágazás: if (a<10) { b= a+1; } else { b= 0; } if (a=10) { b= a+1; } else (a>10) { b= 0; } else { b = a+2; A switch struktúrát többágú szelekció esetében használjuk. A switch utasítás általános alakja: }

146 Elágazások A switch struktúra A switch struktúrát többágú szelekció esetében használjuk. A switch utasítás általános alakja: switch (kifejezés){ case érték1: utasítások; break; case érték2: utasítások; break;... default: utasítások; }

147 Jelentések: switch: kapcsol; case: eset; break: megtörés; default: alapértelmezés. A switch utasítást a JavaScript programunkban akkor alkalmazzuk, ha egy kifejezés jól meghatározott, különálló értékeire szeretnénk bizonyos utasításokat végrehajtani. A switch utasítás struktúrája a következő: Az utasítás feje, amely tartalmazza a switch kulcsszót és zárójelben egy kifejezést, és Egy blokk amely akárhány esetet tartalmazhat, az eseteket a case kulcsszó vezeti be, az utolsó eset a default (alapértelmezett) eset.

148 A switch struktúra szabályai: A kifejezés tetszőleges kifejezés. Az érték egyetlen érték amely csak konstans kifejezés lehet. Minden eset után pontosan egy érték adható meg. Ennek az értéknek egyenlőn ek kell lennie a kifejezéssel. Az esetek sorban egymás után kerülnek a végrehajtásra, ezt csak a break utasítás bírálja felül. Ha egyik eset sem igaz, akkor a default utasítás hajtódik végre.

149 Példa a switch utasítás alkalmazására: switch (c) { Case 1 a = x + y; break; Case 2 a = x y; break; default: alert Nincs megoldás }

150 Ciklusszerkezetek A JavaScript programban az utasítások ismételt végrehajtására a ciklusszerkezetek szolgálnak. A JavaScript többek között, a következő típusú ciklusszerkezet alkalmazását támogatja: for do... while A for ciklusszerkezet Ha ismerjük, hogy egy utasítást hányszor kell végrehajtani, akkor a for léptető ciklusszerkezetet használjuk. A léptető ciklust egy elöltesztelő ciklus valósítja meg.

151 A for ciklusszerkezet általános alakja: for ([ inicializálás ]; [feltétel ]; [léptetés ]) { utasítások } A for utasításnak van egy feje és egy blokkja. A zárójeles fejrésznek további három része van:

152 az inicializálás részben megadható egy vagy több utasítás, veszővel elválasztva, a feltétel részben megadható egy feltétel, amely a ciklus elején kiértéklődik (a ciklusváltozót vizsgálja). Ha a feltétel teljesül a ciklus újból végrehajtódik, egyébként a vezérlés a for utáni utasításra kerül, a léptető rész előrébb viszi a ciklust, a léptető utasítás a ciklusmag végén minden alkalommal végrehajtódik.

153 Példa a for ciklusszerkezetre : for (var i = 0; i < 100; i++) { n += i myfunc(n) }

154 A do while ciklusszerkezet A do...while ciklusszerkezetet akkor használjuk, amikor nem tudjuk előre megmondani, hogy az utasításblokk hányszor kerüljön végrehajtásra. Egy numerikus feltétel kiértékelésétől függően folytatja az utasítások esetleges újbóli végrehajtását (egy kifejezés true vagy false értékéhez kötődik a futatás folytatása).

155 A hátultesztelő do... while ciklusszerkezet általános alakja: do utasítások while (feltétel); A hátultesztelő do... while ciklusszerkezet a while kulcsszót használja, ahol az utasításblokk a feltétel = true értéke esetében kerül végrehajtásra.

156 A hátultesztelő do... while ciklusszerkezet utasításai tehát a feltétel kiértékelésének az eredményétől hajtódnak vagy nem hajtódnak végre, de egyszer biztosan végrehajtásra kerül az utasításblokk, mivel a kiértékelésre mindig csak az utasításblokk végrehajtása után kerül sor. Példa a do while ciklusszerkezet alkalmazására: do { i+=1 document.write(i); } while (i<5);

157 Függvények A JavaScript nyelv alkalmazása áttekinthetőbb, rövidebb és strukturáltabb ha a logikailag összetartozó programrészeket függvényekben foglaljuk össze. A függvények használatának másik nagy előnye az, hogy a függvényeket a JavaScript programban többször, különféle paraméterrel hívhatjuk, ezáltal nem kell ugyanazokat a programrészeket feleslegesen kis változtatással többször leírni. A JavaScript függvényeket a program deklarációs részében kell megadni.

158 Az függvények definíciójában a paramétereket formális, a függvényeket hívó utasításban szereplő paramétereket aktuális paramétereknek nevezzük. A formális és aktuális paramétereknek számban, típusban és megadási sorrendben meg kell egyezniük. A JavaScript-ben a függvény egy olyan alprogram, amely meghíváskor a nevével ad vissza értéket a hívó programnak. A függvény felépítésének általános formája: function name (arglist){ utasítások }

159 name A function függvény neve, megadása szükséges. arglist (opcionális) - a function függvény meghívásakor elküldött változok listáját reprezentáló argumentumok, melyeket vesszővel választunk el egymástól. A function függvények meghívási módja: name (arglist)

160 Példa: A square függvénynek az lesz a feladata, hogy az x értéknek meghatározza a négyzetét: function square (x) { return x * x } A függvény meghívása: square (10) A függvény futási eredménye tehát 100.

161 3.2.7 Objektumok és metódusok Egy metódus alkalmazásánál az objektum neve és a metódus neve közé pontot kell tenni (Pl. document.write) és az utasítást pontosvesszővel zárjuk. Néhány fontosabb DHTML objektummodell objektumának rövid bemutatása. A document objektum A böngésző ablakban megjelenő HTML dokumentumot tartalmazza. Legfontosabb metódusai a dokumentum tartalmának módosítását szolgálják.

162 Például a document.write metódus alkalmazása segítségével komplett HTML elemeket építhetünk be a dokumentumba. A write metódus egyetlen HTML paramétert vár string formában. A következő példa forrásszövege egy document objektumot (document.write metódust) tartalmaz amely segítségével szöveget írunk ki a képernyőre. Feladat 19.ppt

163

164 A navigator objektum a felhasználó által használt böngészőről szolgáltat információt. Az így kapott információ a navigator objektum tulajdonságadataiból olvasható ki. Pl.: appname - a böngésző neve, appversion - a böngésző platformja és verziója. A következő példa forrásszövege egy: document objektumot (document.write metódust) és navigator objektumot (appname és appversion tulajdonságadatokkal) tartalmaz, melyek segítségével kiírjuk a képernyőre a használt böngésző típusát. Feladat 20.ppt

165

166 A location tulajdonságadat az ablakban éppen látható dokumentum forrásáról szolgáltat adatokat. A következő példa bemutatja a fájl pontos elérési URL útvonalát. Feladat 21.ppt

167

168 Az alert függvény A JavaScript nyelv nagyszámú beépített függvénnyel rendelkezik. Például az alert függvény segítségével egyszerű üzenetet küldhetünk a böngészőbeprogramba. Példa: alert( Folytatás esetén nyomja meg az OK gombot. ); A prompt függvény interaktív lehetőséget ad arra, hogy elemi adatot kérjünk be a felhasználótól. Példa: Dokument.write ( Üdvözöljük ); Felhasználó_neve = prompt ( Írja be a nevét:, anonymus ); A következő példa bemutatja a web lap utolsó szerkesztési dátumát. Feladat 22.ppt

169

170 Alapfogalmak Windows Web szerverek Programozás VBScriptben ASP scriptek Mester Gyula 2003 Szerveroldali programozás

171 4.1 Alapfogalmak A szerveroldali programozás (Server-Side Scripting) esetében a szerveroldali scriptek a Web szerveren futnak le és dinamikus HTML oldalakat hoznak létre. Az egyik legelterjedtebb szerveroldai programozási technológia az ASP - Active Server Pages. Az ASP a Microsoft technológiája (1996), úgy tervezték, hogy a Web oldalak tartalma minden új beolvasás esetében megváltozhat. Alapelve: a Web oldalba olyan programkódot építünk be, amely a szerveroldalon lefut mielőtt a felhasználó böngészője beolvassa a Web lapot.

172 A szerveroldali programozás előnye könnyen megérthető a következő példából: Célkitűzés: az aktuális dátum leolvasása a Web lapról. Statikus HTML oldalon minden nap be kell írni az aktuális dátumot. Az ASP technológia lehetővé teszi egy script megírását amely a beolvasott Web lapon megjeleníti az aktuális dátumot. Mielőtt a felhasználó beolvassa a Web lapot, a szerver lefutatja a scriptet és így a beolvasott Web lapon mindig az aktuális dátum jelenik meg.

173 A szerveroldali programozás több szempontból is előnyös a Web fejlesztő számára: 1. A szerveroldali scriptek fejlesztése teljesen függetlenek a felhasználó által alkalmazott böngészőtől. 2. Így a szerveroldali scripteket olyan programnyelvben is fejleszthetjük amelyt a felhasználó böngészője nem támogat. 3. A szerveroldali scriptek forrásnyelvi változata nem olvasható a felhasználó böngészőjében. Ez fontos momentum a forrásnyelvi változat védettsége szempontjából.

174 4. A letöltendő HTML dokumentum mérete csökken (mivel a böngészőben csak a szerveroldali scriptek végrehajtási eredménye látszik). Így a Web oldal beolvasása is gyorsabb. 5. Egy szerveroldali komponenes alkalmazásával leolvashatjuk a felhasználó gép operációs rendszerét és böngészőprogramját, így a szerveroldalról leküldött HTML dokumentum a kliens gép környezetére alakítható. 6. Az ASP fájl az adatbázis szerverről adatbázist használhat fel a megjelenítendő Web lap feldolgozására.

175 4.2 Windows Web szerverek Az ASP szerveroldali technológia. Az ASP program futatása szempontjából szükségünk van egy Web szerverre. A Windows aplikációk esetében rendelkezhetünk a következő szerverekkel: Personal Web Server, vagy Internet Information Server.

176 4.3 Programozás VBScriptben Az ASP, hasonlóan a kliensoldali alkalmazásokhoz: Visual Basic alapú (VBScript) vagy Java (Jscript és JavaScript) scriptek segítségével programozható. Az alapvető különbség a script tag szintaktikai leírásában van.

177 Mivel a VBScript a legelterjedtebb programozási script az ASP alkalmazásoknál (kb. 70 %), bemutatjuk a továbbiakban, a teljesére való törekvés nélkül, hogyan kell egyes nyelvi elemeket használni a VBScriptben. A VBScript nyelv a Visual Basic nyelv részhalmazát tartalmazza és az Internet Explorer böngészőprogram támogatja.

178 Utasítások A VBScriptben: Általában egy utasítás egy sor (egy sorba több utasítás is írható, de a programkód érthetősége miat ezt célszerű elkerülni). Nincs külön utasítás-végjel. A megjegyzés (komment) jele az aposztróf ( ), a megjegyzéseket tehát a ( ) karakterrel kezdjük. Például: kirajzolás

179 VBScript operátorok Operátoroknak nevezzük a különféle műveleti jeleket, amelyek összekapcsolják a változókat, konstansokat stb. A VBScriptben használható aritmetikai operátorok a következők: VBScript operátor Összeadás Kivonás Szorzás Osztás Egészosztás Hatványozás Modulus (osztás maradéka) Negatív előjel String konkatenálás A művelet jelentése + - * / \ ^ Mod - &

180 A VBScriptbenn használható relációs operátorok a következők: VBScript operátor Egyenlő kisebb nagyobb nem egyenlő kisebb vagy egyenlő nagyobb vagy egyenlő Objektum ekvivalencia A művelet jelentése = < > <> <= >= Is

181 A VBScriptbenn használható logikai operátorok a következők: VBScript operátor Negáció Logikai ÉS művelet Logikai VAGY művelet Logikai ekvivalencia Logikai implikáció Logikai kizáró vagy A művelet jelentése Not AND OR Eqv Imp Xor

182 Változók A VBScript program az adatokat változókban tárolja. A változók az alkalmazás futtatása alatt változtatják értéküket. A változó neve: csak betűvel kezdőthet, nem lehet 255 karakternél hosszabb és nem egyezhet meg a VBScript foglalt szavaival (pl. If, Then, For, Next). A változó nevének megválasztásánál a VBScript nem érzékeny a kisbetű/nagybetű különbségére. Minden változó Variant adattípusú.

183 Egy Variant változó za értékadáskor: különféle számadattípúst vehet fel (Single Precision, Double Precision, Byte, Integer, Long, Currency), feltölthetjük szöveges adattal (String), dátumértékkel (Date/Time), logikai adattal (Boolen) és hozzárendelhetünk objektumot (Object) is. A VarType függvény segítségével bármikor lekérdezhetjük a változó pillanatnyi Variant adattípusát. Kezdőértéket a változónak csak külön utasításban adhatunk meg.

184 A változók deklarációjának a kulcsszava a Dim, amelyet a változó neve követ. Általános alakja: Dim változónév Például: - Dim robot - robot = SCARA Lehetővé teszi a tömbök használatát, a változónév mögé helyezet zárójelpár közzé kell megadni a dimenzióinformációt. Például: - Dim Henger (12) - Henger (0) = 25 A tömbelemek nulláról indulnak.

185 Vezérlőszerkezetek A vezérlőszerkezetek segítségével meghatározhatjuk az utasításoknak eredeti végrehajtási sorrendjét. A VBScript nyelv vezérlőszerkezetei a következők: Feltételes utasítások, Elágazások, Ciklusok.

186 Feltételes utasítások Feltételes utasítások segítségével a VBScript programban lehetőség van, bizonyos feltételek teljesítése esetében egy vagy több utasítás végrehajtására. A feltételes utasítások általános alakja: If feltétel Then [utasítások] [ElseIf feltétel-n Then [elseif utasítások]] [Else [else utasítások]] End If

187 A feltétel rendszerint egy összehasonlítás, amelynek van numerikus értéke. A VBScript ezeket az értékeket Tru vagy Fals értékként értelmezi. Ha a feltétel eredménye Tru, akkor a Then kulcsszó utáni utasítások végrehajtódnak. Példák egyirányú feltételes elágazásra egy vagy több utasítással: If a>10 Then b= a+1 Ha csak egyetlen utasítás végrehajtását kötöttük a feltételhez, akkor egy sorba is írhatjuk, de ekkor az End If elmarad! If a<10 Then b= a-1 c=a+b End If

188 Az If Then Else utasításblokkot akkor használjuk, ha különböző utasításcsoportokat határozunk meg, de ezek közül csak egynek a végrehajtását engedélyezzük. A VBScript előszőr a feltétel feltétel tejesítését vizsgálja, ha értéke Fals, akkor vizsgálja a következő feltételt, ha annak értéke is False, vizsgálja a következő feltételt és így tovább. Ha megtalálta az első Tru értékű feltételt, akkor végrehajtja a hozzá tartozó utasítást. Ha nem talál egy Tru értékű feltételt sem, akkor az Else ághoz kerül a vezérlés.

189 A következő két példa az If... Then... Else blokk használatát mutatja be: Kétirányú feltételes elágazás: If a<10 Then b= a+1 Else b= 0 End If Többirányú feltételes elágazás: If a=10 Then b= a+1 Else b= 0 Else b= a+2 End If

190 Elágazások A Select Case struktúra A Select Case struktúra az If... Then... Else blokkal egyezző szolgáltatást nyújt,de hatákonyabb és áttekinthetőbb módon. A Select Case utasítással könnyen megoldhatjuk a VBScript programunk többirányú elágazását. A Select Case utasítás általános alakja: Select Case tesztkifejezés [Case tesztlista-n [utasítások-n]]... [Case Else tesztlista-n [elses utasítások-n]] End Select

191 A Select Case struktúra egy tesztkifejezéssel dolgozik, amelyet a struktura elején kiértékel. A kiértékelés eredményét összehasonlítja a Case struktúra teszlistájával (amely egynél több elemet is tartalmazhat) és az egyezőségtől függően végrehajtja a megfelelő Case-hez tartozó utaítást.

192 Példa a Select Case utasítás alkalmazására: Select Case c Case 1: a = x + y Case 2: a= x -y Case Else: MsgBox Nincs megoldás End Select

193 Ciklusszerkezetek A VBScript programban az utasítások ismételt végrehajtására a ciklusszerkezetek szolgálnak. A VBScript többek között, a következő típusu ciklusszerkezet alkalmazását támogatja: For... Next Do... Loop

194 A For... Next ciklusszerkezet Ha ismerjük, hogy egy utasítást hányszor kell végrehajtani, akkor a For... Next ciklusszerkezetet használjuk. A For...Next ciklusszerkezet általános alakja: For számláló = kezdőérték To végérték [Step lépésköz] Next [utasítások] [Exit For] [utasítások] A számláló, a kezdőérték, a végérték és a lépésköz mind numerikus értékek.

195 A számláló határozza meg a az utasítások végrehajtásának a számát a kezdőértéktől, a végértékig a lépésköz függvényében. Ha nem adjuk meg a lépésközt, akkor anak értéke alapértelmezés szerint 1 lesz. A For... Next ciklusszerkezet működése: 1. A számláló értéke felveszi a kezdőértéket. 2. Végrehajtja az utasításokat. 3. Ellenörzi, hogy a számláló értéke nagyobb e a végérték értékénél. Ha igen, akkor kilép a ciklusból. 4. Növeli a számláló értékét a lépésköz értékével (vagy 1-gyel). 5. Ismétli a 2. és 4. közötti lépéssorozatot.

196 Példa a For...Next ciklus egymásba ágyazására: For I = 1 To 10 For J = 1 To 10 For K = 1 To Next Next Next Számolt ciklusutasítás : For szam = 0 To 9 Step 1 osszeg = osszeg + szam Next

197 A Do... Loop ciklusszerkezet A Do... Loop ciklusszerkezetet akkor használjuk, amikor nem tudjuk előre megmondani, hogy az utasításblokk hányszor kerüljön végrehajtásra. Egy numerikus feltétel kiértékelésétől függően folytatja az utasítások esetleges újbóli végrehajtását (egy kifejezés True vagy False értékéhez kötődik a futtatás folytatása). Kétféle, elöltesztelő és hátultesztelő Do... Loop ciklusszerkezetet használunk, amelyeket ugyancsak további 2 csoportra osztjuk fel.

198 Elöltesztelő Do... Loop ciklusszerkezet Az egyik elöltesztelő Do... Loop ciklusszerkezet a While kulcsszót használja, ahol az utasításblokk a feltétel = Tru értéke esetében kerül végrehajtásra. Az másik elöltesztelő Do... Loop ciklusszerkezet az Until kulcsszót használja, ahol az utasításblokk a feltétel = False értéke esetében kerül végrehajtásra. Az elöltesztelő Do... Loop ciklusszerkezet utasításai tehát a feltétel kiértékelésének az eredményétől hajtódnak vagy nem hajtódnak végre (előfordulhat, hogy az utasításblokk egyszer sem kerül végrehajtásra).

199 Ha egyszer végrehajtódik az utasításblokk, akkor a vezérlés visszakerül a Do While utasítássorra, ahol elkezdődik a feltétel újbóli kiértékelése. Az elöltesztelő Do... Loop ciklusszerkezet általános alakjai tehát: Do [While feltétel (= Tru)] Loop [utasítások] [Exit Do] [utasítások] Do [Until feltétel (= False)] [utasítások] [Exit Do] [utasítások] Loop

200 Hátultesztelő Do... Loop ciklusszerkezet Az egyik hátultesztelő Do... Loop ciklusszerkezet a While kulcsszót használja, ahol az utasításblokk a feltétel = Tru értéke esetében kerül végrehajtásra. Az másik hátultesztelő Do... Loop ciklusszerkezet az Until kulcsszót használja, ahol az utasításblokk a feltétel = False értéke esetében kerül végrehajtásra. A hátultesztelő Do... Loop ciklusszerkezet utasításai tehát a feltétel kiértékelésének az eredményétől hajtódnak vagy nem hajtódnak végre, de egyszer biztosan végrehajtásra kerül az utasításblokk, mivel a kiértékelésre mindig csak az utasításblokk végrehajtása után kerül sor.

201 A hátultesztelő Do... Loop ciklusszerkezet általános alakjai tehát: Do [utasítások] [Exit Do] [utasítások] Loop [While feltétel (= Tru)] Do [utasítások] [Exit Do] [utasítások] Loop [Until feltétel (= False)]

202 Példák a Do... Loop ciklusszerkezet alkalmazására Elöl tesztelő feltételes ciklusok: Do While szam < 50 Loop osszeg = osszeg+szam szam = szam + 1 Do Until szam = 50 Loop osszeg = osszeg+szam szam = szam + 1

203 Procedúrák A VBScript nyelv alkalmazása áttekinthetőbb, rövidebb és strukturáltabb, ha a logikailag összetartozó programrészeket modulokba foglaljuk össze, amelyeket procedúráknak hívunk. A procedúrák használatának másik nagy előnye az, hogy a procedúrákat a VBScript progamban többször, különféle paraméterrel hívhatjuk, ezáltal nem kell ugyanazokat a programrészeket feleslegesen kis változtatással többször leírni. A VBScriptben kétfajta procedúra írható: SUB procedúrák, és FUNCTION procedúrák.

204 A SUB procedúrák és a FUNCTION procedúrák közötti fő különbség a következő: más a meghívás módja, a SUB procedúra nem ad vissza értéket. A SUB procedúrákat és a FUNCTION procedúrákat a VBScript program deklarációs részében kell megadni. A procedúrák definíciójában a paramétereket formális, a procedúrákat hívó utasításban szereplő paramétereket aktuális paramétereknek nevezzük. A formális és aktuális paramétereknek számban, típusban és megadási sorrendben meg kell egyezniük.

205 A SUB procedúrák A SUB procedúrák felépítésének általános formája: Sub name (arglist) Utasítások End Sub name A Sub procedúra neve, megadása szükséges. arglist (opcionális) - a Sub procedúra meghívásakor elküldött változok listáját reprezentáló argumentumok, melyeket veszővvel választunk el egymástól. Az SUB procedúrák meghívására két lehetőségünk van: - Eljárásnév (arglist) vagy - Call Eljárásnév (arglist)

206 A FUNCTION procedúrák A VBScriptben a FUNCTION procedúra egy olyan alprogram amely meghíváskor a nevével ad vissza értéket a hívó programnak. A függvény felépítésének általános formája: Function name (arglist) Utasítások End Function arglist (opcionális) - a Function procedúra meghívásakor elküldött változok listáját reprezentáló argumentumok, melyeket veszővvel választunk el egymástól.

207 A FUNCTION procedúrák meghívására két lehetőségünk van: name (arglist) Call name (arglist) vagy Példa: A Cube függvénynek az lesz a feladata, hogy az x értéknek meghatározza a köbét: Function Cube (x) Cube = x ^ 3 End Function A függvény meghívása: Cube (10) Az alprogram futási eredménye tehát 1000.

208 Az MsgBox függvény A VBScript nyelv is nagyszámú beépített függvénnyel rendelkezik. Például az MsgBox (üzenetablak) függvényt akkor használjuk ha a felhasználónak szánt rövid üzenetet szeretnénk a képernyőn megjeleníteni. A felhasználó az üzenet elolvasása utón egy parancsgombb megnyomásával jelezheti a válaszát. Az MsgBox függvény szintaktikája a következő: MsgBox(prompt[, buttons][, title][, helpfile, context]) Az MsgBox (üzenetablak) függvény második argumentumában megadott konstansok révén adott nyomógombokkal felszerelt üzenetdobozt állíthatunk elő.

209 A buttons argumentum első paramétercsportjának a bemutatása: Konstans vbokonly vbokcancel vbabortretryignore vbyesnocancel vbyesno vbretrycancel Érték A következő gombokat jeleníti meg OK OK és Cancel Abort, Retry, és Ignore Yes, No, és Cancel Yes és No Retry és Cancel Az MsgBox függvény visszaadott értéke a felhasználó által lenyomot nyomógomb azonosítója lesz.

210 4.4 ASP scriptek Ha az adott script tag tartalmazza a RUNAT=Server attribútum beállítást akkor a program csak a szerveren fog lefutni, így csak a programfutás által kapott HTML elemek kerülnek le a felhasználó böngészőjébe. Az ASP fájl kiterjesztése:.asp. A HTML kód és az ASP script megfelelő módon kombinálható. A nyitó SCRIPT tag LANGUAGE attribútumában kell megadni a használt Script nyelvet. Pl.: <SCRIPT Language VBScript Runat = Server >

211 A <% és a %> kódjelek között script tag nélküli szerveroldali (un. in-line) scriptet is írhatunk. A következő példa egy <% és a %> jel között script tag nélküli szerveroldali in-line scriptet mutat be, amely a beolvasott Web lapon megjeleníti az aktuális dátumot. Mielőtt a felhasználó beolvassa a Web lapot, a Personal Web Server lefutatja a scriptet és így a IE böngésző által beolvasott Web lapon mindig az aktuális dátum jelenik meg. Feladat 23.ppt Megjegyzés: A Notepad-ban írt scriptek forrásnyelvi változata nem olvasható a böngészőben, rejtett a szerveren, itt csak bemutatjuk!

212 Asp program amely a Web lapon mindig az aktuális dátumot jeleníti meg

213 A szerveroldali scriptek szerveroldalon meghívható függvényeket és eljárásokat is definiálhatnak. A Request objektum segítségével azok az információk érhetők el, amelyek a bögészőből érkeztek a Web szerver felé. A böngészőben egy HTML ürlapot töltünk ki és egy Submit gomb lenyomása után a szerveren egy ASP fájlt indítunk el. A Response objektum Write metódussával lehet szöveget és HTML elemet beépíteni a felhasználó felé leküldendő dokumentumba.

214 A következő példa esetében a böngészőben egy HTML ürlapot töltünk ki és egy Submit gomb lenyomása után a szerveren egy ASP fájlt indítunk el. Tehát két kódrészletet kell elkészíteni: Az egyik kódrészlet a HTML űrlapra vonatkozik, A másik kódrészlet az ASP fájt tartalmazza. A két kódrészlet tehát a következő:

215 HTML űrlapra vonatkozó kódrészlet: <html> <head><title>basic Form</title></head> <body> <h1>basic Input Form</h1> <form action="ch07_basicform_process.asp" method=post> Keywords: <input type="text" name="txtkeywords" size="20"><p> <input type="submit" name="cmdsubmit" value="submit"> </form> </body> </html>

216 Tehát a következő ábrán látható, böngészőben megjelenő, egyszerű ürlapról van szó, a felhasználó általi kitöltése után lenyomjuk a Submit (küldés) gombot, így egy ASP fájlt hívunk meg.

217 Az ASP fájlra vonatkozó kódrészlet <html> <head> <title>basic Form Response</title> </head> <body> <h1>basic Form - Response</h1> You entered these keywords: <% = Request.Form("txtKeywords") %> <p> </body> </html>

218 Az ASP fájlra vonatkozó kódrészlet áttanulmányozása után megállapítható, hogy az ASP kód csak a következő sor: <% = Request.Form("txtKeywords") %> Az ürlapadat feldolgozására mehívott ASP fájlban a Request objektum segítségével lehet a kapott adatokat elérni. A Form gyüjtemény tartalmazza a felhasználó közvetlen begépelése által ürlapba beírt össz adatokat. A Submit gomb lenyomása utáni Web szerver válasza a következő oldalon látható:

219 A Web szerver válaszának bemutatása:

220 Alapfogalmak Az első XML dokumentum bemutatása Az XML szintaktikai szabályai Az XLM dokumentum létrehozása és megjelenítése Hibajelzések Az XLM dokumentum megjelenítése stíluslapok alkalmazásával Mester Gyula 2003 Az XML nyelv alapjai

221 5.1 Alapfogalmak Az XML az Extensible Markup Language (Kiterjeszthető jelölő nyelv) szavak rövidítését jelenti. Az XML egy jelölő nyelv, amely nem határozza meg: a nyelv jelölőelem-készletét (tag set) és nyelvtanát sem, ezért teljes mértékben kiterjeszthető (innen ered a neve is!).

222 Ez tulajdonképpen a különbség lényege a HTML nyelvhez viszonyítva, amely nem kiterjeszthető. Az XML az SGML (Standard Generalized Markup Language, 1986.) nyelvből ered. Az XML az adatformátumok használatánál biztosítja a teljes hordozhatóságot. Az Internet Explorer 5.0 böngészőprogram, vagy újabb változatai, támogatják az XML technológiát.

223 Az XML technológia szabványosításával a W3C, vagyis a World Wide Web Consortium foglalkozik, webcíme: óta a W3C-nál az XML hivatalos specifikáció lett. A teljes XML 1.0 specifikáció megtalálható következő webcímen: Az XML kiváló magyarázó szöveggel ellátott dokumentációja megtalálható következő webcímen:

224 3.1. ábra Az XML architektúra

225 5.2 Az első XML dokumentum bemutatása Hasonlóképpen mint a HTML nyelv esetében, egy XML kódrészlet megírására a Notepad használata is elégséges : Először írjuk meg a megfelelő HTML kódrészletet, amely a böngészőben megjeleníti Mester Tibor nevét: <html> <head> <title>name</title> </head> <body> <p>mester Tibor</p> </body> </html> Ugyanezt a célt XML kódrészlettel a következőképpen valósítjuk meg: <?xml version="1.0"?> <name> <first>tibor</first> <last>mester</last> </name>

226 A Notpad-ben megírt xml kódrészletet felírjuk name.xml néven és megnyitjuk az IE 5.x böngészőben, ekkor a következő dokumentumot kapjuk meg: <?xml version="1.0"?> - <name> <first>tibor</first> <last>mester</last> </name> Az így megkapott információ félkövér fekete színű betűkkel íródik ki, egyben utal a névre és vezetéknévre is (ami a HTML esetében hiányzik!)

227 Az előbbi példából látható, hogy egy XML dokumentum két részre osztható: 1. A fejlécre <?xml version="1.0"?> A fejléc az XML dokumentum kezdetén található, információt szolgáltat az XML értelmező és alkalmazás számára, hogy hogyan kezelje a dokumentumot. 2. A tartalomra, amely maga az XML adat - <name> <first>tibor</first> </name> <last>mester</last>

228 5.3 Az XML szintaktikai szabályai Az XML dokumentumban a gyökér elem a legmagasabb szintű elem, példánkban: <name>... </name>. Az össz többi elemet a gyökér elembe kell beágyazni. Minden elem kell, hogy tartalmazzon nyitó- és záró jelölőelemet, tehát minden megnyitott elemet be kell zárni! Pl.: <first>tibor</first>

229 Az elemeket szabályosan kell beágyazni, tehát egy elem nyitó - és a záró jelölőelemét egy elemben kell elhelyezni. Itt következik egy nem jól formázott XML kódrészlet: <tag1> <tag2> </tag1> </tag2> Az XML elem neve betűvel vagy aláhúzással kell kezdődnie. PL.: <last>mester</last>

230 Az elem nevek nem tartalmazhatnak beágyazott szóközöket. Itt következik egy nem jól formázott XML kódrészlet: <last name>mester</last name> Az XML elemnevek érzékenyek a kis és nagybetűkre. Itt következik egy nem jól formázott XML kódrészlet: <LAST>Mester</last>

231 A nyitó - és a záró jelölőelem neve megegyező kell, hogy legyen (lásd a fenti példákat). Egy nyitó és egy záró jeelölőelem között tetszőleges számú további elemet vagy szöveges adatot helyezhetünk el. A komment jele: <! > A jól formázott XML dokumentum betartja az összes XML szintaktikai szabályt! A fentiek alapján megállapítható, hogy kis számú, egyszerű és jól érthető XML szintaktikai szabályokról van szó!

232 3.2. ábra XML adattípus modell

233 5.4 Az XLM dokumentum létrehozása és megjelenítése Kezdjük el egy alapvető szerkezeteket tartalmazó de jól formázott robotechnikai irodalmáttekintést tartalmazó XML dokumentum vizsgálatát Robotechnika néven. A fejlécben található sor: <!-- File Name: Robottechnika.xml --> komment jellegű. A mi példánkban a gyökér elem a: <Robottechnika>... </Robottechnika> amely befoglalja az XML dokumentumban lévő összes többi elemet.

234

235 A következő XML kódrészlet elemeinek a neveit, betartva az XML szintaktikai szabályait szabadon választottuk: <BOOK> <TITLE>Intelligens robotok es rendszerek</title> <AUTHOR>Mester Gyula</AUTHOR> <PRINTED>Szabadka</PRINTED> <PAGES>236 oldal</pages> <DATE>2002</DATE> </BOOK> A következő oldalon látható az IE5.0 böngészőben megjelent Robottechnika nevű XML dokumentum (ugyanúgy nyitottuk meg mint egy HTML dokumentumot):

236

237 Az elem nevek előtti jeleket egérgombnyomás segítségével + jelre lehet változtatni (és vissza). Tegyük meg ezt a Robottechnika gyökér elem nevével és a következő eredményt kapjuk a böngészőben: <?xml version="1.0"?> <!-- File Name: Robottechnika.xml --> +<Robottechnika> Az XML technnológia alkalmazható kliensoldali és szerveroldali programozásnál is.

238 5.5 Hibajelzések Mielőtt az Internet Explorer 5.x böngészőprogram az XML dokumentumot megjeleníti a képernyőn, az XML értelmező (parser) segítségével megvizsgálja, hogy a dokumentum jól formázott e, vagyis megfelel e az XML specifikációnak. Ha az értelmező hibát talál, akkor az XLM dokumen-tum helyet a hibaüzenet jelenik meg a képernyőn. Tegyük fel, hogy az elöző XML kódrészlet a következő szintaktikai hibát tartalmazza: <TITLE>Intelligens robotok es rendszerek</title> igy a képernyőn a következőhibaüzenet jelenik meg:

239

240 5.6 Az XLM dokumentum megjelenítése stíluslapok alkalmazásával A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet) specifikációt. Alapvető célja: bevezetni a stíluslapok alkalmazását a XML dokumentum formázási utasításai helyet, szétválasztani a XML dokumentum tartalmi részét a megjelenítési stíluselemektől. A stíluslapokat a HTML dokumentum fejrészében a következő módon definiáljuk: <?xml-stylesheet type="text/css href="stíluslapfájlnév.css"?>

241 Szerkesztjük meg a következő stílusfájlt Robottechnika01.css néven. Írjuk be az XML dokumentum fejlécébe a következő utasítást: <?xml-stylesheet type="text/css" href="robottechnika01.css"?> Írjuk fel a robotechnikai irodalmáttekintést tartalmazó XML dokumentumot Robotechnika01 néven. A következő oldalon látható a böngészőben megjelent stíluslapot alkalmazó Robotechnika01 nevű XML dokumentum.

242

243

244

245 A WAP architektúra WML alapfogalmak Kártyacsomag/Kártya struktúra A WML dokumentum struktúrája A szöveg formázása Linkek létrehozása Képek beillesztése a WML dokumentumba WML táblázatok létrehozása Mester Gyula 2003 WAP

246 6.1 A WAP architektúra A WAP-architektúra (Wireless Application Protocol) kiterjeszti a hagyományos vezetékes internetmodellt a vezeték nélküli eszközökre is (mobiltelefon). Hardver szempontból a hagyományos vezetékes modellhez viszonyítva szükség van: mobil készülékre, vezeték nélküli hálózatra és WAP átjáróra (gateway).

247 A WAP-átjáró egy interfész a vezeték nélküli hordozóhálózat és a vezetékes internet között, a WAP-böngészők számára hozzáférést biztosít a hagyományos HTTP szerverekhez. A WAP-böngésző hasonlít a HTTP böngészőre és WML nyelvet használ. A WAP-böngészők az URL megadásával férnek hozzá a WML (Wireless Markup Language)és a WML Script tartalmához.

248 mobil készülék WAP-böngészõ Kliens Hordozható hálózat Wap-átjáró Internet Szerver Kliens WAP architektúra

249 A WML kártyacsomagot ad meg. A kártyacsomag a kártyák együttese. Egy kártya pedig egy képernyő tartalmát mutatja a WAP böngészőben. Ha a kártya adatmenyisége nem fér el a WAP böngésző képernyőjén, akkor a felhasználó gördítés útján férhet hozzá a további adatokhoz.

250 6.2 WML alapfogalmak A WML nyelv az XML nyelvből származik. A WML dokumentum fejlesztője lényegében kártyacsomagot hoz létre. Egy kártya a WAP böngészőben egy virtuális oldalnyi információt tartalmaz. A WML dokumentum gyökéreleme a <wml> elem amely kötelezően tartalmaz egy vagy több <card> (kártya) elemet. A < card > elem a WAP böngésző által megjelenítendő virtuális oldalnyi információt megadására szolgál, tartalmazhat szöveges információkat, képeket, táblázatokat, linkeket, stb.

251 A kártya tartalma túllépheti a képernyőn lévő sorok vagy oszlopok számát. A komment jele: <! > Hasonlóképpen mint a HTML és XML nyelv esetében, egy wml kódrészlet megírására a Notepad használata is elégséges. A Notpad-ben megírt wml kódrészletet felírjuk name.wml néven és megnyitjuk az M3GATE böngészőben. Fontosabb web címek:

252 6.3 Kártyacsomag/Kártya (Deck/Card) struktúra Mivel a mobil eszközök kis képernyője nem teszi lehetővé nagyobb adatmennyiség egyidejű megjelenítését kialakították a kártyacsomag/kártya (Deck/Card) struktúrát. A kártyacsomag (Deck) magába foglalja a kártyákat és lehetővé teszi azok egyidejű letöltését a készülékre. A felhasználó böngészés közben a kártyák (és kártyacsomagok) között mozog.

253 Deck Card - 1 A Kártyacsomag/Kártya (Deck/Card) struktúra Card - 2 Card - 3

254 6.4 A WML dokumentum struktúrája A WML dokumentum szerkezetileg három részre osztható: 1. Az első rész a dokumentum típus leírás. Ez a rész jelzi a böngészőnek, hogy a dokumentum a WML melyik verziójában lett írva. Példa: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN "

255 2. A második rész a kártyacsomag megadása. A kártyacsomag kezdetét a : <wml {class, id, xml:lang}> végét a </wml> tag jelzi. A kártyacsomag tartalmazhat egy fejrészt, mely a HTML- hez hasonlóan olyan információkat tartalmaz, melyek az öszes card- ra érvényesek. A fejrészt a: <head {class, id}> és a </head> tag-ek között kell megadni.

256 Példa: <head> <access domain="star.com"/> <meta name="author" content="the Star" /> </head> Az <acces> elem segítségével szabályozhatjuk, hogy ki férhet hozzá az aktuális kártyacsomaghoz. Csak a kártyacsomag fejrészében szerepelhet: <acces {class, domain, id, path}>

257 Az előbbi példánál az acces elem: <access domain="star.com"/> csak a "star.com" domén számára teszi lehetővé a hozzáférést. A <meta> elem használatával a WAP-kliensnek küldhetünk metaadatokat, csak a kártyacsomag fejrészében szerepelhet: meta {class, content, forua, http-equiv, id, name, sheme}/> Példa: <meta name="author" content="the Star" />

258 A kártyacsomag tartalmazhat továbbá egy <template {class, id, onenterforward, onenterbackward, ontimer}>... <template/> elemet amely a kártyáinak alapértelmezett viselkedését határozza meg. 3. A harmadik rész a kártya megadása. A kártyacsomag több kártyát is tartalmazhat. A kártya kezdetét a : <card {class, id, newcontent, onenterforward, onenterbackward, ontimer, ordered, title, xml:lang}> végét a </card> tag jelzi. Példa:

259 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "- //WAPFORUM//DTD WML 1.1//EN" " xml"> <wml xml:lang="hu"> <template> <!-- megjegyzések --> </template> <card id="elso" title="elsõ CARD"> <p> Ez az elsõ CARD </p> </card> </wml>

260 6.5 A szöveg formázása A <p {align, mode, xml:lang, id, class}> elem (paragraph) a WML-es szövegelrendezés alapeszköze, a bekezdések létrehozására szolgál. A bekezdéseket a böngésző mindig új sorba írja és a bekezdések között mindig nagyobb sorközt hagy ki. Minden <card> elem tartalmaz legalább egy <p> elemet. Attribútumai: align, mode, xml:lang, id, class.

261 Az align attribútum már ismert értékei: align= left (alapértelmezett) align= center align= right A mode attribútummal megadjuk a bekezdés módját, értékei: wrap (tördelés), amely alapértelmezett, vagy nonwrap (tördelés nélkül). mode= wrap alapértelmezett a szövegben sortörésre kerül sor valahányszor eléri a képernyő jobb szélét. mode= nonwrap a szöveg egyetlen sorban íródik ki.

262 A <br {xml:lang, id, class}> elem sortörésre használható. A következő egyszerű példán látható egyetlen kártyából álló egyszerű WML dokumentum, a <wml>, <p> és <card> elemek attribútumok nélküli használatával: <wml> <card> <p>hello, world </p> < /card > </wml> A következő példán látható az align alkalmazása és a M3Gate böngésző általi bemutatása

263 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "- //WAPFORUM//DTD WML 1.1//EN" " wml_1.1.xml"> <wml> <card id="card1" title="card 1"> <p align="left"> Szabadkai </p> <p align="center"> Muszaki </p> <p align="right"> Foiskola </p> </card> </wml>

264 A szövegformázó elemek A WML kártyán a szöveg megjelenítését számos szövegformázó elem segítségével alakíthatjuk: A <b> </b> elem segítségével félkövér karaktereket hozunk létre. Az <i> </i> elem segítségével dőlt karaktereket kapunk. Az <u> </u> elem segítségével aláhúzott karaktereket tudunk létrehozni.

265 A <big> </big> elem átlagosnál nagyobb betűket jelenít meg a képernyőn. A <small> </small> elem átlagosnál nagyobb betűket jelenít meg a képernyőn. Az <em> </em> elem hangsúlyozza a szöveget. Az <strong> </strong> elem alkalmazásánál a szöveg a többinél erősebben látszik.

266 Példa a szövegformázó elemek alkalmazására: <card> <p> <b>félkövér</b><br > <i>dőlt</i><br/> <u>aláhúzott</u><br/> <big>nagy karakterek</big><br/> <small>kis karakterek</small><br/> <strong>vastag karakterek</strong> </p> </card>

267 6.6 Linkek létrehozása Linkek létrehozására a WML- ben két elem szolgál. Az <a> elem segítségével egy WML-kártyára mutató linket adhatunk meg: <a {class, href, id, title, xml:lang}> A href attribútum használata kötelező mivel a betöltendő kártya URL - jének a megadására szolgál. Az <anchor> elem segítségével egy olyan szövegblokkot jelölhetünk meg, amelyet kiválasztva egy másik kártyacsomag vagy kártya tartalmát olvassa be a böngésző. Az <anchor> elem közé egy <go> elem segítségével helyezhetjük el a linket. <anchor {class, href, id, title, xml:lang}>

268 <card id= elso > <p> <a href= #masodik >Második card</a> </p> </card> <card id= masodik > <p> Ez a második card </p> </card>

269 6.7 A képek beillesztése a WML dokumentumba A képek beillesztésére a WML dokumentumba az <img/> elem szolgál,amely egyesíti a nyitó és záró tag-et: <img {alt, src, align, localsrc, vspace, hspace, height, width, xml:lang, id, class}/> A felsorolt attribútumok közzül az alt és a src kötelezőek, a többi opcionális. A WML oldalakra WBMP (Wireles Bitmap) típusú képeket tehetünk.

270 Az kijelzők mérete és felbontása miatt a képek csak nagyon egyszerűek lehetnek (44x96 pixel). A src attribútum egy karaktersztring, amely a betöltendő bináris képfájl URL-jét adja meg. Az alt attribútum értéke az a szöveg, amely a képet helyetesíti, amíg a: böngésző a kép bináris adatait letölti vagy ha a WAP- kliens nem támogatja a grafikát.

271 A kép beillesztési példa a WML dokumentumba: <card> <p> <img src= kep.wbmp alt= Nincs kép támogatás /> </p> </card>

272 6.8 WML táblázatok létrehozása A <table {align, column, xml:lang, id, title, class}> elem segítségével egyszerű kétdimenziós táblázatban jeleníthetünk meg információt. A táblázatok oszlopokból, sorokból, és a sorokon belüli cellákból állnak. A <table> elem nyitó és záró tag- je közé kell elhelyezni a táblázat sorait, és oszlopait. A sorok létrehozására a <tr> elem szolgál. <tr {id, class}>

273 A sorokba cellák a <td> elemmel helyezhetők. <td {xml:lang, id, class}> A column attribútum használata kötelező, értéke egész szám, amely a minden egyes tr elemben található td elemek számát adja meg. A következő oldalon példát látunk a táblázat létrehozására a WML-dokumentumban. A példában egy kártyát tartalmazó kártyacsomagot látunk (card 1).

274

275 A WML nyelv 1.1 verziójának össz elemei: