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.