Mester Gyula 2003 Internet

© Mester Gyula

2003

Internet

Internet Windows környezetben

A HTML nyelv alapjai

Kliensoldali programozás

Szerveroldali programozás

XML

WAP

© Mester Gyula

2003

Internet

Bevezetés

Alapfogalmak

Az Internet főbb szolgáltatásai

© Mester Gyula

2003

Internet Windows környezetben

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.

© Mester Gyula

2003

Internet

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ú. © Mester Gyula

2003

Internet

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. 1983-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.

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

1.2. Alapfogalmak 1.2.1 TCP/IP protokoll 1.2.2 IP cím 1.2.3 Az Internet kapcsolat megvalósitásának lehetőségei 1.2.4 Helyi hálózatok 1.2.5 Helyi hálózatok bekapcsolása az Internetbe 1.2.6 Hálózati eszközök 1.2.7 Intranet 1.2.8 Kliens, szerver és proxy © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

• 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 0-255 é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:

192.168.124.1

© Mester Gyula

2003

Internet

• 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! © Mester Gyula

2003

Internet

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ó.

© Mester Gyula

2003

Internet

• 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: 212.200.56.133 = maugli.vts.su.ac.yu

• A névhierarchia az Internet tartománynév rendszere - DNS. DNS – Domain Name System

© Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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! © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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). © Mester Gyula

2003

Internet

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).

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

Kliens-szerver-proxy architektúra

Kliens

Internet Kliens

Proxy Szerver

Kliens

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

• 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 © Mester Gyula

2003

Internet

Kliens/Szerver architektúra

TCP/IP protokoll

User

Kliens program

Server

Szerver program

- k a p c s o l a t o t l é t e s i t a egyidejûleg több klienst is kiszolgál. szerver programmal - adatbevitel - kérésinditás - válaszfogadás.

© Mester Gyula

2003

Internet

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ő.

© Mester Gyula

2003

Internet

1.3 Az Internet főbb szolgáltatásai 1.3.1 E-mail – elektronikus levelezés Fejrész A levél szövege

1.3.2 WORLD WIDE WEB – WWW 1.3.3 URL 1.3.4 Keresőszerverek 1.3.5 FTP – File Transfer Protocoll Anonymous FTP szolgáltató

1.3.6 Telnet 1.3.7 A HTTP protokoll © Mester Gyula

2003

Internet

1.3.1 E-mail – elektronikus levelezés • Az elektronikus levelezés az Internet legrégebbi és legelterjedtebb szolgáltatása. • Az E-mail 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).

© Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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). © Mester Gyula

2003

Internet

– 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ő. © Mester Gyula

2003

Internet

• 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 E-mail 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.

© Mester Gyula

2003

Internet

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 E-mail címét tárolhatjuk. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

• A hypertext koncepción alapuló webet a svájci CERN laboratoriumában fejlesztette ki Tim Berners Lee, 1989. • 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. © Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

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:

http://www.origo.hu

• Mindel weboldal http:// előtaggal kezdődik. A www.origo az ún. subdomain név. .hu ez a domain névnek országot jelölő része.

© Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

• 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).

© Mester Gyula

2003

Internet

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 E-mail 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 © Mester Gyula

2003

Internet

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) . © Mester Gyula

2003

Internet

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ó: © Mester Gyula

2003

Internet

IP- fejléc

TCP- fejléc

Adattartalom

1.3 ábra A HTTP - csomag blokk sémája

© Mester Gyula

2003

Internet

© Mester Gyula

2003

A HTML nyelv alapjai

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 2.4.1 Karakter formázó HTML tag-ek 2.4.2 Sor és bekezdés formázó HTML tag-ek

2.5 Listák létrehozása 2.5.1 Egyszerű listák 2.5.2 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 2.11. Objektumok beágyazása 2.12 Scriptek 2.13 Stíluslapok 2.14 Statikus Web oldalak © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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: Szeged © Mester Gyula

2003

Internet

• 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 ” ” közötti azonosítóból áll. – Példa HTML tag-re:

• A záró tag azonos azonosítója () megegyezik a hozzátartozó nyitó tag () azonosítójával, a különbség csak abból áll, hogy a kisebb jelet egy perjel követi (</). © Mester Gyula<br /> <br /> 2003<br /> <br /> Internet<br /> <br /> • 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. © Mester Gyula<br /> <br /> 2003<br /> <br /> Internet<br /> <br /> 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:<br /> <br /> • Rossz példa:<br /> <br /> <azonosító1 rel="nofollow"> <azonosító2 rel="nofollow"><br /> <br /> Szövegrész – tartalom </azonosító2> </azonosító1> © Mester Gyula<br /> <br /> <azonosító1 rel="nofollow"> <azonosító2 rel="nofollow"><br /> <br /> Szövegrész tartalom </azonosító1> </azonosító2> 2003<br /> <br /> Internet<br /> <br /> 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"> © Mester Gyula<br /> <br /> 2003<br /> <br /> Internet<br /> <br /> 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> ... elemet melynek szöveges tartalma a böngésző címsorában jelenik meg (nem a Web lapon!). © Mester Gyula

2003

Internet

• A harmadik rész a dokumentum törzse – test elem: ... ide kerül az a tartalom, amelyet meg szeretnénk jeleníteni a böngészőkben.

© Mester Gyula

2003

Internet

Példa: Feladat_01 Ez egy HTML dokumentum © Mester Gyula

2003

Internet

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 és tag- ek között található. – A dokumentum törzse pedig a és tag- ek között helyezkedik el. – A dokumentum típus jelzése után egy tag jelzi a dokumentum kezdetét, melynek záró tag- je az utolsó tag a HTML dokumentumban ().

• A következő ábra a fenti kódrészlet eredményét mutatja za IE 6.0 böngészőprogramban. Feladat 01.ppt

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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 tag-ket használjuk. … – 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 © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

• Félkövér karaktereket a: … • Dőlt karaktereket az:

…

• Aláhúzott karaktereket az: … • Áthúzott karaktereket a: <strike>… • Alsó indexet a:

<sub>…

• felső indexet pedig a: <sup>… elemek segítségével tudunk létrehozni. Feladat 03.ppt

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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
elemhez ér, akkor az utána következő szöveget új sorban a bal margónál kezdi. Feladat 04.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

• 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: ... tag ahol x egy szám 1 és 6 között a fejlécet jelöli. A tag alkalmazása után üres sor következik. Feladat 05.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

• A <pre {width}>… 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
... elem segítségével tudunk létrehozni.
A size és width attribútumokkal a vonal relativ hosszát és pixelben mért vastagságát adhatjuk meg. Feladat 06.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

A sorformázó elemekkel létrehozott szövegblokkot az align attribútum segitségével: – jobbra align=“right”, – balra align=“left” – középre align=“center” igazíthatók.

és

A … elem közé írt szöveg az ablakban középre igazítva jelenik meg. Feladat 07.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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. 2.5.1 Egyszerű listák Akkor használjuk, ha nincs szükség a listaelemek számozására. A listát:
…
elemmel tudjuk megnyitni (Unordered List). © Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

Egyszerű listát tehát az alábbi módon készíthetünk:

első elem
második elem
harmadik elem

Az eredmény:

• első elem • második elem • harmadik elem

Az
jelzi, hogy rendezetlen lista (ul = unordered list) kezdődik, az
a lista egy elemét jelöli (li = list item), a rendezetlen listát egy
zárja le. © Mester Gyula

Feladat 08.ppt

2003

Internet

© Mester Gyula

2003

Internet

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:
…
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... "> © Mester Gyula

2003

Internet

A rendezett listánál az
helyett
(ol = ordered list) kerül: Egyszerű listát tehát az alábbi módon készíthetünk

első elem
második elem
harmadik elem

Az eredmény: 1. első elem 2. második elem 3. harmadik elem Feladat 09.ppt

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

• 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 (www.devguru.com) © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

2.7 Hiperhivatkozások létrehozása A hiperhivatkozások létrehozására az: … 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 © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

2.8. Táblázatok létrehozása Egy HTML táblázatot a: …
elemmel hozunk létre. A táblázat egészére érvényes egyes attribútumokat a nyitó 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), © Mester Gyula

2003

Internet

- 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: … elemmel hozunk létre és ezek között kell az adott táblázatsor egyes celláit meghatározni. © Mester Gyula

2003

Internet

• A táblázatcellákat a: 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 elemmel címet adhatunk amely a táblázat felett jelenik meg. Feladat 12.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

HTML táblázatok programtörzse • 1 sor és 2 cella:

…
…

… …

• 2 sor és 2 cella:

… …

… …

Feladat 13.ppt

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

• A táblázat fejlécének létrehozására a: < thead {align, char, charoff, valign}>… 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}>… 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}>… elemmel hozhatjuk létre (a lábléc után kell megadni) Feladat 14.ppt © Mester Gyula

2003

Internet

A … 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 … elem segítségével megadhatjuk a táblázat egy oszlopát a < colgroup {align, char, charoff, span, valign, width} >… elemen belül. © Mester Gyula

2003

Internet

A …

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: Fejléc

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. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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 … elem segitségével adjuk meg. Meghatározza a keretek számát és méretét. © Mester Gyula

2003

Internet

A tag használata esetében nem használhatunk tagot! A nyitó tag cols attribútumában az egyes keretek szélessége (% -ban vagy pixelben) adható meg. A … elem szolgál a tényleges kerettartalmak megadására. Egy elem annyi elemet tartalmaz, ahány részre osztottuk a Web oldalt. © Mester Gyula

2003

Internet

Az <iframe {frameborder, height, longdesc,

marginheight, marginwidth, name, scrolling. scr, width} >…

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

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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:
… 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. © Mester Gyula

2003

Internet

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: elem segitségével tudunk elemeket elhelyezni. Egyszerű gombot a: elem segitségével tudunk létrehozni. A gombhoz scripteket rendelhetünk, melyek gombnyomással aktiválódnak. Feladat 16.ppt

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

Az adatbeviteli mezőket az:
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}

>... elemmel hozhatjuk létre. A type attribútum határozza meg tehát a beviteli mező fajtáját (text, password, file, stb.). A <br /> onblur, onchange, onfocus, onselect, readonly, rows, tabindex} >...

elemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. Feladat 17.ppt © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

• Az információk csoportosítására a:
...
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: ... elem alkalmazásávala keret bal felső szélén címkeszöveget is írhatunk. • A mezők a: ... Feladat 18.ppt elemmel felíratozhatók. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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:

elemet használjuk.

© Mester Gyula

2003

Internet

• A grafikus objektumokat részekre bonthatjuk, e részekhez kapcsolatok rendelhetők (mappolás). • A <map {name}>... 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} >... 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. © Mester Gyula

2003

Internet

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} >... elemet használjuk a script kód elhelyezésére. Segítségükkel futatni tudjuk a JavaScript, JScript és VBScript programokat. © Mester Gyula

2003

Internet

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 <nonscript>... elem. 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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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"> A továbbiakban bemutatjuk a HTML nyelv 4.0 verziójának össz elemeit. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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ó. © Mester Gyula

2003

Internet

(1) A HTML dokument szerkesztése

(3) A Web szerver kiválasztja a .htm fájlt

Web szerver

(4) A Web szerver a HTML dokumentumot a böngészõ felé küldi

(5) A böngészõprogram értelmezi (2) A felhasználó lekéri a Web a HTML dokumentumot és lapot megjeleníti a képernyõn A felhasználó számítógépe

© Mester Gyula

2003

Internet

DHTML

JavaScript programozás

© Mester Gyula

2003

Kliensoldali programozás

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

3.2 JavaScript programozás 3.2.1 Bevezetés 3.2.2. Utasítások 3.2.3. JavaScript operátorok 3.2.4. Változók 3.2.5. Vezérlőszerkezetek 3.2.5.1. Feltételes utasítások 3.2.5.2. Elágazások - a switch struktúra 3.2.5.3. Ciklusszerkezetek

3.2.6. Függvények 3.2.7 Objektumok és metódusok A document objektum A navigator objektum A location tulajdonságadat Az alert függvény A prompt függvény © Mester Gyula

2003

Internet

3.2 JavaScript programozás 3.2.1 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.

© Mester Gyula

2003

Internet

• 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: www.javascriptsource.com www.javascriptinternet.com www.javascript.com © Mester Gyula

2003

Internet

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). © Mester Gyula

2003

Internet

• 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>... 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. © Mester Gyula

2003

Internet

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= “http://www.nordedu.com/script.js> © Mester Gyula

2003

Internet

3.2.2. 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 */ . © Mester Gyula

2003

Internet

3.2.3. 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

A művelet jelentése

Összeadás

+

Kivonás

-

Szorzás

*

Osztás

/

Inkrementálás

++

Dekrementálás

__

Modulus (osztás maradéka)

%

Negatív előjel

-

© Mester Gyula

2003

Internet

A JavaScript-ben használható relációs operátorok a következők: JavaScript operátor


Egyenlő

=

kisebb

<

nagyobb

>

nem egyenlő

!=

kisebb vagy egyenlő

<=

nagyobb vagy egyenlő

>=

© Mester Gyula

2003

Internet

A JavaScript-ben használható logikai operátorok a következők: JavaScript operátor


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

© Mester Gyula

2003

Internet

3.2.4. 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. © Mester Gyula

2003

Internet

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 © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

3.2.5. 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. © Mester Gyula

2003

Internet

3.2.5.1. 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 }] © Mester Gyula

2003

Internet

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; } © Mester Gyula

2003

Internet

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).

© Mester Gyula

2003

Internet

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:

© Mester Gyula

2003

Internet

Többirányú feltételes elágazás: if (a=10) { b= a+1; } else (a>10) { b= 0; } else { b = a+2; A switch

Kétirányú feltételes elágazás: if (a<10) { b= a+1; } else { b= 0; }

struktúrát többágú szelekció esetében használjuk. A switch utasítás általános alakja:

}

© Mester Gyula

2003

Internet

3.2.5.2. 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; } © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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” } © Mester Gyula

2003

Internet

3.2.5.3. 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.

© Mester Gyula

2003

Internet

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:

© Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

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).

© Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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); © Mester Gyula

2003

Internet

3.2.6. 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. © Mester Gyula

2003

Internet

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 } © Mester Gyula

2003

Internet

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)

© Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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 © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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 Feladat 22.ppt dátumát. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

Alapfogalmak

Windows Web szerverek

Programozás VBScriptben

ASP scriptek

© Mester Gyula

2003

Szerveroldali programozás

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

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 © Mester Gyula

2003

Internet

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)

Mod

Negatív előjel

-

String konkatenálás

&

© Mester Gyula

2003

Internet

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

Is

© Mester Gyula

2003

Internet

A VBScriptbenn használható logikai operátorok a következők: VBScript operátor


Negáció

Not

Logikai ÉS művelet

AND

Logikai VAGY művelet

OR

Logikai ekvivalencia

Eqv

Logikai implikáció

Imp

Logikai kizáró vagy

Xor

© Mester Gyula

2003

Internet

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ú. © Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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 © Mester Gyula

2003

Internet

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 c=a+b végrehajtását kötöttük a feltételhez, End If akkor egy sorba is írhatjuk, de If a>10 Then b= a+1

ekkor az End If elmarad! © Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

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

© Mester Gyula

• Többirányú feltételes elágazás: If a=10 Then b= a+1 Else b= 0 Else b = a+2 End If 2003

Internet

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 © Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

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] [utasítások] [Exit For] [utasítások] Next • A számláló, a kezdőérték, a végérték és a lépésköz mind numerikus értékek.

© Mester Gyula

2003

Internet

•

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. © Mester Gyula

2003

Internet

• 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 10 ... Next Next Next

• Számolt ciklusutasítás : For szam = 0 To 9 Step 1 osszeg = osszeg + szam Next © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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) .

© Mester Gyula

2003

Internet

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)] [utasítások] [Exit Do] [utasítások] Loop © Mester Gyula

Do [Until feltétel (= False)] [utasítások] [Exit Do] [utasítások] Loop

2003

Internet

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.

© Mester Gyula

2003

Internet

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)]

© Mester Gyula

Do [utasítások] [Exit Do] [utasítások] Loop [Until feltétel (= False)]

2003

Internet

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

© Mester Gyula

Do Until szam = 50 osszeg = osszeg+szam szam = szam + 1 Loop

2003

Internet

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. © Mester Gyula

2003

Internet

• 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. © Mester Gyula

2003

Internet

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) © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

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ő. © Mester Gyula

2003

Internet

A buttons argumentum első paramétercsportjának a bemutatása: Konstans

Érték

vbOKOnly vbOKCancel

0 1

A következő gombokat jeleníti meg OK OK és Cancel

vbAbortRetryIgnore

2

Abort, Retry, és Ignore

vbYesNoCancel

3

Yes, No, és Cancel

vbYesNo vbRetryCancel

4 5

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. © Mester Gyula

2003

Internet

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”> © Mester Gyula

2003

Internet

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! © Mester Gyula

2003

Internet

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

2003

Internet

• 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. © Mester Gyula

2003

Internet

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ő:

© Mester Gyula

2003

Internet

HTML űrlapra vonatkozó kódrészlet: Basic Form
Basic Input Form
Keywords:

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

Az ASP fájlra vonatkozó kódrészlet Basic Form Response
Basic Form - Response
You entered these keywords: <% = Request.Form("txtKeywords") %>
© Mester Gyula

2003

Internet

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ó: © Mester Gyula

2003

Internet

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

© Mester Gyula

2003

Internet

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

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!). © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

Az XML technológia szabványosításával a W3C, vagyis a World Wide Web Consortium foglalkozik, webcíme: http://www.w3.org 1998 óta a W3C-nál az XML hivatalos specifikáció lett. A teljes XML 1.0 specifikáció megtalálható következő webcímen: http://www.w3.org/TR/REC-xml/ Az XML kiváló magyarázó szöveggel ellátott dokumentációja megtalálható következő webcímen: http://www.xml.com © Mester Gyula

2003

Internet

3.1. ábra Az XML architektúra © Mester Gyula

2003

Internet

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ő Ugyanezt a célt XML HTML kódrészletet, amely a kódrészlettel a következőböngészőben megjeleníti Mester képpen valósítjuk meg: Tibor nevét: Name
Mester Tibor
© Mester Gyula

Tibor Mester

2003

Internet

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: - Tibor Mester

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!) © Mester Gyula

2003

Internet

Az előbbi példából látható, hogy egy XML dokumentum két részre osztható: 1. A fejlécre

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 - Tibor Mester © Mester Gyula

2003

Internet

5.3 Az XML szintaktikai szabályai • Az XML dokumentumban a gyökér elem a legmagasabb szintű elem, példánkban: ... .

• 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.: Tibor © Mester Gyula

2003

Internet

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:

Az XML elem neve betűvel vagy aláhúzással kell kezdődnie. PL.: Mester © Mester Gyula

2003

Internet

Az elem nevek nem tartalmazhatnak beágyazott szóközöket. Itt következik egy nem jól formázott XML kódrészlet: Mester

Az XML elemnevek érzékenyek a kis és nagybetűkre. Itt következik egy nem jól formázott XML kódrészlet: Mester © Mester Gyula

2003

Internet

• 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ó! © Mester Gyula

2003

Internet

3.2. ábra XML adattípus modell © Mester Gyula

2003

Internet

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:

komment jellegű. A mi példánkban a gyökér elem a: ...

amely befoglalja az XML dokumentumban lévő összes többi elemet. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

A következő XML kódrészlet elemeinek a neveit, betartva az XML szintaktikai szabályait szabadon választottuk: <TITLE>Intelligens robotok es rendszerek Mester Gyula Szabadka 236 oldal 2002

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): © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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:

Az XML technnológia alkalmazható kliensoldali és szerveroldali programozásnál is.

© Mester Gyula

2003

Internet

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

igy a képernyőn a következőhibaüzenet jelenik meg: © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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: © Mester Gyula

2003

Internet

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:

Í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. © Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

© Mester Gyula

2003

Internet

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

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).

© Mester Gyula

2003

Internet

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.

© Mester Gyula

2003

Internet

mobil készülék WAP-böngészõ

Hordozható hálózat

Kliens

Internet Wap-átjáró Szerver Kliens

WAP architektúra © Mester Gyula

2003

Internet

• 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.

© Mester Gyula

2003

Internet

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 (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. © Mester Gyula

2003

Internet

• 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: www.wapforum.org © Mester Gyula

2003

Internet

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. © Mester Gyula

2003

Internet

Deck

Card - 1

A Kártyacsomag/Kártya (Deck/Card) struktúra

Card - 2

Card - 3

© Mester Gyula

2003

Internet

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: © Mester Gyula

2003

Internet

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 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: és a tag-ek között kell megadni.

© Mester Gyula

2003

Internet

Példa: <meta name="author" content="The Star" />

Az 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:

© Mester Gyula

2003

Internet

Az előbbi példánál az acces elem: 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" />

© Mester Gyula

2003

Internet

A kártyacsomag tartalmazhat továbbá egy

Mester Gyula 2003 Internet

Recommend Documents

Basic Input Form

Basic Form - Response