Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Informatikai Intézet A webprogramozás alapjai B282 Dr. Kopácsi Sándor főiskolai tanár Távoktatás tagozatnak.

Hasonló előadás


Az előadások a következő témára: "Informatikai Intézet A webprogramozás alapjai B282 Dr. Kopácsi Sándor főiskolai tanár Távoktatás tagozatnak."— Előadás másolata:

1 Informatikai Intézet A webprogramozás alapjai B282 Dr. Kopácsi Sándor főiskolai tanár Távoktatás tagozatnak

2 A webprogramozás alapjai 2 Tantárgy- és tananyagfelelős Név:Dr. Kopácsi Sándor Telefon: /1260 Fogadóóra helye:1119 Bp. Mérnök u szoba Fogadóóra ideje:Csütörtök: 9:30-11:00 Tantárgyi útmutató

3 A webprogramozás alapjai 3 Kötelező tananyagok TananyagFormaKiadás módja Tantárgyi útmutatóNyomtatott füzet Fájl Hallgatói oktatócsomag, ILIAS Tankönyv: Robert W. Sebesta: A World Wide Web programozása, Panem Kiadó, 2005 KönyvHallgatói oktatócsomag Tantárgyi útmutató

4 A webprogramozás alapjai 4 Kiegészítő tananyagok, segédletek Kiegészítő anyagFormaKiadás módja FirstPage 2006szoftverLetölthető: Ellenőrző kérdésekFájlILIAS Tantárgyi útmutató e-TananyagHTMLILIAS

5 A webprogramozás alapjai 5 A tantárgy elérési útvonala ILIAS ETOR tantárgyi mappa: Taneszköz tároló  Főiskolai képzés – saját szak  A webprogramozás alapjai tantárgyi mappa a tanköny mintapéldái letölthetők az ILIAS-ból a Sebesta_Source_code.zip fájlbólSebesta_Source_code.zip Tantárgyi útmutató

6 A webprogramozás alapjai 6 Ajánlott szakirodalom Medzihradszky Dénes – Kopácsi Sándor: A webprogramozás alapjai, Főiskolai jegyzet Füstös János: World Wide Web HTML 4.0, Szak Kiadó, 2000 Michael Moncur: Tanuljuk meg a JavaScript használatát, Kiskapu Kiadó, 2007 Dan Barrett: JavaScript webfejlesztőknek, Kossuth Kiadó, 2003 MacAuley-Jobson: JavaScript programozói referencia, Panem Kiadó, 2003 Tantárgyi útmutató

7 A webprogramozás alapjai 7 Előtanulmányi rend Szükséges előismereteket –Számítástechnikai alapok: A Windows operációs rendszer alapfunkcióinak ismerete; Könyvtárműveletek; Intéző használata; Szoftverek telepítése és futtatása. –Programozási alapok: Programozás elemei, változók, objektumok, vezérlő szerkezetek, tömbök A vizsga előfeltétele –A gyakorlaton való aktív részvétel Erre a tananyagra épülő más tantárgyak –Internetalapú alkalmazásfejlesztés Tantárgyi útmutató

8 A webprogramozás alapjai 8 A tananyag számonkérése A kurzus gyakorlati jeggyel zárul, amelyet az utolsó gyakorlaton, vagy a vizsgaidőszakban vizsga jelleggel lehet megszerezni. A gyakorlati ismeretek számonkérésénél valamilyen egyszerű webodalt kell készíteni megadott szempontok szerint. A tananyag elméleti részét tesztek alapján kérjük számon, ahol programozási ismeretek is előkerülnek, kódrészleteket kell felismerni, analizálni, azok várható kimenetét felismerni. Az előadásokon és gyakorlatokon aktívan résztvevő hallgatók megajánlott jegyet kaphatnak. Tantárgyi útmutató

9 A webprogramozás alapjai 9Tematika 1. Internet és World Wide Web Internet és World Wide Web 2. Leíró nyelvek: HTML és XHTML (1) Leíró nyelvek: HTML és XHTML (1) 3. Leíró nyelvek: HTML és XHTML (2) Leíró nyelvek: HTML és XHTML (2) 4. Űrlapok Űrlapok 5. Stílusok, stíluslapok (1) Stílusok, stíluslapok (1) 6. Stílusok, stíluslapok (2) Stílusok, stíluslapok (2) 7. A JavaScript nyelv alapjai A JavaScript nyelv alapjai 8. Dokumentum Objektum Modell Dokumentum Objektum Modell 9. Bevezetés az XML-be Bevezetés az XML-be 10. Összefoglalás, áttekintés, ismétlés Összefoglalás, áttekintés, ismétlés Tantárgyi útmutató

10 A webprogramozás alapjai 10 Internet és World Wide Web A webprogramozás alapjai

11 A webprogramozás alapjai 11 Főbb témakörök Webszerverek és kliens-szerver rendszerek, gépek azonosítása a hálózaton. A W3 Konzorcium és szerepe a web fejlesztésében. Az Internet működése, szolgáltatásai. Internet és World Wide Web

12 A webprogramozás alapjai 12 Az Internet és a Web kialakulása Internet: –A 60-as évek végén az ARPA (Advanced Research Project Agency) által kifejlesztett számítógép hálózat. –Összekapcsolt hálózatok hálózata World Wide Web: –független projekt az 1990-es évek elején. –Tim Berners-Lee, 1990-es évek eleje Internet és World Wide Web

13 A webprogramozás alapjai 13Protokoll Gépek azonosítása IP (Internet Protocol) segítségével –IPv4 32 bites (4 db 8 bites, azaz közé eső) szám pl ,3 milliárd cím –IPv6 128 bites (8 db x 4 jegyű hexadecimális) szám pl. 2001:0db8:0000:0000:0000:0000:1428:57ab a Földön ma élő minden emberre 50 milliárdszor milliárdszor milliárd IPv6-cím jut benne –domain név (pl. gdf.hu) Kommunikáció HTTP protokoll segítségével –HyperText Transfer Protocol –dokumentumok letöltése, megjelenítése Internet és World Wide Web

14 A webprogramozás alapjai 14W3C World Wide Web Konzorcium 1994, Tim Berners-Lee cél: –közös protokollok és nyelvek kifejlesztése –mindenki számára hozzáférhető legyen MIT, CERN, ARPA később sokan csatlakoztak (pl. MTA SZTAKI) Internet és World Wide Web

15 A webprogramozás alapjai 15 Leírónyelvek: HTML és XHTML A webprogramozás alapjai

16 A webprogramozás alapjai 16 Főbb témakörök A HTML nyelv fejlődése, lehetőségei és céljai. Az XHTML nyelv. XHTML dokumentumok szerkezete, címkék és szerepük a dokumentum szerkezetének leírásában, a szöveges információ formázásában. Leírónyelvek: HTML és XHTML

17 A webprogramozás alapjai 17 HTML fejlődése ős: SGML (Standard Generalized Markup Language) – 1986 –precízen leírta a tartalmat –hangsúly nem a formázáson volt HTML 1.0 Tim Berners-Lee – 1989 első böngésző - Mosaic 1993 HTML 2.0 Internet Engineering Task Force –már nem csak a tartalomra koncentrál HTML 3.2 W3C javaslat – 1997 január –Netscape elemek: fontok, táblázatok, appletek, stb. HTML 4.0 W3C javaslat – 1997 dec., 1998 ápr. –stíluslapok HTML 4.01 apróbb javítások – 1999 továbbfejlesztés –XHTML 1.0 W3C javaslat – 2000 január –HTML 5.0 kidolgozás alatt –XHTML 2.0 kidolgozás alatt Leírónyelvek: HTML és XHTML

18 A webprogramozás alapjai 18 HTML nyelv HyperText Markup Language – Hipertext Jelölő Nyelv célja: dokumentumok számára standard kód segítségével formázott megjelenítést biztosítani alapeleme a címke (tag) pl. nyitó- és záró címke pl. … csak nyitó címke pl., nyitó címke belsejében attribútumok pl. a böngészők intelligens módon értelmezik félreértések elkerülésére: XHTML Leírónyelvek: HTML és XHTML

19 A webprogramozás alapjai 19XHTML Extensible HyperText Markup Language a HTML szigorúbb és tisztább változata a HTML elemeket leírása XML segítségével minden címkének van záró eleme egysoros címkénél a lezárást jelezzük pl. minden címkenév kisbetűvel írandó minden eleme azonosítható a Document Object Model segítségével, az objektumok módosíthatók Leírónyelvek: HTML és XHTML

20 A webprogramozás alapjai 20 HTML (XHTML) dokumentum alapszerkezete címsor szövege a dokumentum törzs Leírónyelvek: HTML és XHTML

21 A webprogramozás alapjai 21 elem elem a HTML dokumentum leírására szolgál nincs attribútuma további elemek tárolója – a címsorban megjelenő szöveg – a dokumentum alapértelmezett helye – kapcsolat más dokumentumokkal – információ a dokumentumról kulcsszavak leírás stb. – JavaScript vagy VBScript kód helye – beágyazott stíluslap Leírónyelvek: HTML és XHTML

22 A webprogramozás alapjai 22 elem elem eredetileg a dokumentum törzsének határolója kiterjesztették a dokumentum háttér és a szövegszíneinek beállítására –háttérszín: –szövegszín: –hiperlinkek színe: –meglátogatott link: –aktív linkek színe: oldal betöltéséhez, mint eseményhez kapcsolható események is itt helyezhetők el Leírónyelvek: HTML és XHTML

23 A webprogramozás alapjai 23 Szövegtagoló elemek paragrafus: … –előtte és utána nagyobb hely –align attribútumában igazítás (left, right, center) –új sor sortörés: címsorok: … n = 1..6 –félkövér –előtte és után üres sor blokkidézetek: … –behúzás a kijelölt részre vízszintes osztóvonal vonal: több bekezdést magába foglaló egység: … –nincs sortávolság növekedés –erre alkalmazható speciális formázás bekezdésnél kisebb egység (pl. szavak) … –erre is alkalmazható speciális formázás Leírónyelvek: HTML és XHTML

24 A webprogramozás alapjai 24 Szövegformázó elemek* dőlt betű: … hangsúlyozott (dőlt): … félkövér betű: … erősen hangsúlyozott (félkövér): … aláhúzott: … a környezeténél nagyobb betű. … a környezeténél kisebb betű: … felső index: … alsó index: … programkód megjelenítése: … írógép karakterek megjelenítése: … eredeti formázás megőrzése: … szöveg típusának, színének, méretének beállítása: … Leírónyelvek: HTML és XHTML * a szövegformázás korszerűbb style sheet-ek segítségével

25 A webprogramozás alapjai 25 Előre formázott szöveg - Előre formázott szöveg - preformatted text Amit itt látunk, az egy előre megformázott szöveg. vegyük észre, hogy pontosan úgy jelenik meg, ahogy begépeltük. Az itt megadott mondatot a böngésző kettétörheti, ha úgy jön ki a lépés, és nem fér ki az ablakban. Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban.

26 A webprogramozás alapjai 26 Szöveg típusának, színének, méretének beállítása - Szöveg típusának, színének, méretének beállítása - Fonts Színek, méret, betűtípus beállítása. Több változás együtt.

27 A webprogramozás alapjai 27 Szöveg igazítása – align attribútum alignment Ez a paragrafus balra van igazítva. Ez a 2-es szintű fejléc középre igazított. Ez az 5-ös fejléc jobbra igazított. Ez egy sima középre igazított szöveg. Ezt két bekezdést a div elem foglalja magába. Ezekre egyszerre alkalmazható pl. egységes igazítás.

28 A webprogramozás alapjai 28 Adatok összekapcsolása hiperlinkkel - Adatok összekapcsolása hiperlinkkel - dokumentumon belül ugrás a bevezetéshez – Bevezetés dokumentumok között szerveren belül –dokumentum elejére: Leírás –megadott helyre: Leírás világhálón Leírás cím megadása – az előadónak

29 A webprogramozás alapjai 29 Kép elem - Kép elem - src – forrás fájl (gif, jpg, png) alt – kép rövid leírása width – kép szélessége height – kép magassága Leírónyelvek: HTML és XHTML

30 A webprogramozás alapjai 30 Kép részekre bontása - imagemap adott kép darabokra bontható a darabokhoz linkek kapcsolhatók ”circle” coords= : középpont, sugár /> ”poly” coords= : összes csúcspont /> Leírónyelvek: HTML és XHTML

31 A webprogramozás alapjai 31Felsorolások Pontozott (rendezetlen) lista … type = disc, circle, square Számozott (rendezett) lista … type = 1, a, A, i, I Definíciós lista … Leírónyelvek: HTML és XHTML

32 A webprogramozás alapjai 32Táblázatok táblázat címe cím_cella1 cím_cella2 adat_cella1 adat_cella2 adat_cella1 adat_cella2

33 A webprogramozás alapjai 33 Táblázat deklarálása, (,, ) tag attribútumai: border – keret vastagsága align –vízszintes igazítás: left, right, center, valign –függőleges igazítás: top, middle, bottom background - háttérkép bgcolor - háttérszín cellpadding –távolság a cella határ és a tartalom között cellspacing –távolság a cellák között height – táblázat magassága width – táblázat szélessége summary –nem megjelenő tartalom összefoglaló Leírónyelvek: HTML és XHTML

34 A webprogramozás alapjai 34 Több sort vagy oszlopot igénybevevő cellák ha egy cím- vagy adatcella több cellát vesz igénybe –vízszintesen: colspan attribútum –függölegesen: rowspan attribútum egy hosszú első sor 2-3 sor, 1. oszlop 2. sor, 2. oszlop 2. sor, 3. oszlop 3. sor, 2. oszlop 3. sor, 3. oszlop Leírónyelvek: HTML és XHTML

35 A webprogramozás alapjai 35 Táblázat belső távolságai cellpadding (cella kitöltés) –távolság a cella határ és a tartalom között cellspacing (cellák közötti távolság) –távolság a cellák között

36 A webprogramozás alapjai 36 Táblázatok egymásba ágyazása 1 A B C D E F G H 2

37 A webprogramozás alapjai 37 Összetett weblap megjelenítése táblaként Táblázatokat használó lap Feladatok feladat-1 feladat-2 feladat-3 Ez a lap a táblázatok használatát mutatja be. Helyi linkeket tartalmaz baloldalon, külsõ linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején. Szervezetek Microsoft Microsoft Press W3C

38 A webprogramozás alapjai 38 Összetett weblap megjelenítése táblaként

39 A webprogramozás alapjai 39 Keretek – frames csak az oldal változó részét kell frissíteni nehezen követhetők a linkek elem helyett keretek megadása oszloponként, vagy soronként, százalékban, pixelben: – keret-együttes (frameset) belsejében keretek: – keretek-együttesek egymásba is ágyazhatók Leírónyelvek: HTML és XHTML

40 A webprogramozás alapjai 40 Keretek alkalmazása

41 A webprogramozás alapjai 41 Navigálás keretekkel home page: nav frames navigate.htm: Gyümölcsök alma körte szilva

42 A webprogramozás alapjai 42 Navigálás keretekkel

43 A webprogramozás alapjai 43 Keretek – Keretek – ablak az ablakon belül forrásfájl, méretek megadásával Ez egy iframe a weblap belsejében: Leírónyelvek: HTML és XHTML

44 A webprogramozás alapjai 44 Keretek – Keretek – arra az esetre ha a böngésző nem tudná a kereteket kezelni a belsejébe kerül nav frames Gyümölcsök alma körte szilva Gyümölcsök alma körte szilva Leírónyelvek: HTML és XHTML

45 A webprogramozás alapjai 45Megjegyzések Olyan szövegrész, amit a böngésző figyelmen kívül hagy --> Kezdés: " ", közte nem lehet "--" vagy ">" Megjegyzés bárhol lehet és több sorból is állhat --> comments Ez a szöveg ténylegesen megjelenik a böngészőben. Leírónyelvek: HTML és XHTML

46 A webprogramozás alapjai 46 Speciális karakterek & ; & és ; jelek közé írva > " " jel: > non-breaking space: © copyright: © magyar ékezetes betűk: Leírónyelvek: HTML és XHTML

47 A webprogramozás alapjai 47 Színek a weboldalon* betűszín (text), háttérszín (bgcolor) linkek színei –normál (link) –megtekintett (vlink) –aktív (alink) egész dokumentumra, valamely elemre (pl. táblázat, vagy annak egy cellája) megadása –angol néven (pl. red, yellow) –hexadecimális kóddal (pl. ”#FF0000”, ”#FFFF00”) Leírónyelvek: HTML és XHTML * Színek megadása korszerűbb style sheet-ek segítségével

48 A webprogramozás alapjai 48 Űrlapok A webprogramozás alapjai

49 A webprogramozás alapjai 49 Főbb témakörök adatfelvétel a HTML/XHTML lehetőségeivel, az űrlapok szerepe űrlapok szerkesztése, űrlap elemek adta lehetőségek ŰrlapokŰrlapok

50 A webprogramozás alapjai 50 Hogyan működik egy web űrlap? 1. A felhasználó megnyitja az űrlapot tartalmazó weblapot. 2. A felhasználó begépeli a nevét és címét, majd a Submit gombra kattintva továbbítja az űrlapot. 3. A böngésző összegyűjti a begépelt adatokat, és elküldi azokat a szerveren futó web alkalmazásnak. 4. A web alkalmazás átveszi az adatokat és feldolgozza őket. 5. A web alkalmazás választ generál. 6. A szerver a web alkalmazás válaszát visszaküldi a böngészőnek, amely megjeleníti a választ. Űrlapok

51 A webprogramozás alapjai 51 HTML/XHTML űrlap űrlap törzse: beviteli mezők action –hova továbbítsa az adatokat –végrehajtható program is lehet method –get: adatok az URL-ben jelennek meg kérdőlej választja el az URL-t az adtoktól max. 256 karakter –post: adatok a kérés törzsében kerülnek továbbításra nem látható karakterek száma nincs limitálva Űrlapok

52 A webprogramozás alapjai 52 Űrlap elemek beviteli mezők –egysoros szövegmező (type=text) –rejtett szövegmező (type=password) –rádiógomb (type=radio) –jelölőmező (type=checkbox) –nyomógombok (type=submit, reset, button, image) –rejtett kontroll (type=hidden) –fájl kiválasztása (type=file) többsoros szövegmező legördülő lista Űrlapok

53 A webprogramozás alapjai 53 Egysoros szövegmező type="text" –value: alapértelmezett szöveg –size: megjelenő karakterek száma –maxlength: begépelhető karakterek száma egysoros szövegmező: Űrlapok

54 A webprogramozás alapjai 54 Egysoros rejtett szövegmező type="password –ugyanaz, mint az egysoros szövegmező –de a bevitt szöveg helyett * vagy jelenik meg –a form nem végez titkosítást rejtett szövegmező: Űrlapok

55 A webprogramozás alapjai 55 Többsoros szövegmezők többsoros szöveg –cols: a szövegmező szélessége karakterben kifejezve –rows: szövegmező magassága sorokban kifejezve Ide többsoros szöveget lehet írni Űrlapok

56 A webprogramozás alapjai 56 Űrlap elemek - választások rádiógomb csoport –ha egy csoportból csak egy érték választható –a csoport minden tagjának ugyanaz a neve –kiválasztáskor az előre megadott értéket (value) küldi a szervernek jelölőmező (check box) –ha egy csoportból több érték is választható legördülő lista (menü) –ha túl sok elemből kellene választani –egyszerre egy vagy több elem látszik –egyszerre egy vagy több elemet lehet választani Űrlapok

57 A webprogramozás alapjai 57 Rádiógomb csoport type=”radio” Életkor: fölött Űrlapok

58 A webprogramozás alapjai 58 Jelölőmező (checkbox) type=”checkbox” Bevásárló lista Tej Kenyér Tojás Űrlapok

59 A webprogramozás alapjai 59 Legördülő lista (menü) –size: egyszerre hány menüelem legyen látható –multiple="multiple": több menüelemet is ki lehet választani lista_elem_1 lista_elem_2 Űrlapok

60 A webprogramozás alapjai 60 Űrlap elem – fájlnév megadása type=”file” Fájl neve: Űrlapok

61 A webprogramozás alapjai 61 Űrlap elem - nyomógombok submit gomb type=”submit” reset gomb type=”reset” gomb képpel type=”image” általános célú gomb type=”button” Űrlapok

62 A webprogramozás alapjai 62 Formázás korszerű módszerekkel stílusok, stíluslapok A webprogramozás alapjai

63 A webprogramozás alapjai 63 Főbb témakörök Külső, dokumentumszintű és belső stíluslapok a CSS szabályai formázás CSS alapján a CSS hierarchiája Stílusok, stíluslapok

64 A webprogramozás alapjai 64 A CSS története HTML elsősorban a tartalommal foglalkozik, de vannak kifejezetten megjelenítési utasítások pl., HTML font tag-gel is megváltoztathatjuk a megjelenést: pl. szöveg stilisztikai igények folyamatosan növekedtek a különböző böngészők a stílus módosítására létrehozták saját leíró nyelvüket stílusok egységesítésre született a CSS –CSS1 – W3C – 1996 –CSS2 – W3C – 1998 –CSS3 – jelenleg is fejlesztés alatt áll Stílusok, stíluslapok

65 A webprogramozás alapjai 65 CSS - Cascading Style Sheet HTML vagy XHTML dokumentumok stílusleíró nyelve segítségével egységesen állítható a betűméret, szín, elrendezés, stb. elkülönül a dokumentum struktúrája a dokumentum megjelenésétől lépcsőzetes stíluslapok –belső –dokumentum szintű –külső Stílusok, stíluslapok

66 A webprogramozás alapjai 66 A stíluslapok szintjei belső belső –egyetlen tag tartalmára vonatkozik –a nyitó tag-ben lehet elhelyezni a style attribútum értékeként dokumentum szintű dokumentum szintű –a dokumentum teljes törzsére vonatkozik –a fejben a tag tartalmaként jelenhetnek meg külső külső –több dokumentum törzsére vonatkozhat –tárolásuk külön szöveges (text/css) állományban Ha egyszerre több stíluslapot alkalmazunk, az alsóbb szintű felülírja a felsőbb szintű stílusdefiníciót Stílusok, stíluslapok

67 A webprogramozás alapjai 67 Belső stíluslap egyetlen tag tartalmára vonatkozik magában a tag-ben kell elhelyezni a style attribútum értékeként: style = ”tulajdonság1: érték1; tulajdonság2: érték2; …” pl. Címsor 2 ellentmond a stíluslapok alapelvének, az egységes stílus kialakításának akkor használjuk, ha valamilyen felsőbb stílusdefiníciót felül akarunk bírálni Stílusok, stíluslapok

68 A webprogramozás alapjai 68 Dokumentum szintű stíluslap a dokumentum teljes törzsére vonatkozik a -ben a tag tartalmaként jelenhetnek meg tag attribútumát "text/css"-re kell állítani a stílus szabályokat HTML megjegyzésbe kell tenni Pl.: Document level CSS Stílusok, stíluslapok

69 A webprogramozás alapjai 69 Külső stíluslap több dokumentum törzsére vonatkozhat tárolásuk külön szöveges (text/css) állományban formátuma megegyezik a dokumentumszintű stíluslapokban használt szabály lista formátumával (example.css): h2 { font-size: 10px; color: red;} blockquote { margin-left: 2cm; color: #00ff00} a head-ből a tag-gel hivatkozhatunk rájuk: document title Stílusok, stíluslapok

70 A webprogramozás alapjai 70 Konfliktusok feloldása: lépcsőzetesség ugyanarra a dokumentumra több stíluslapot is alkalmazhatunk, ez konfliktusokat okozhat a lépcsőzetesség (cascade) elve, hogy az egyes stílusszintek egymást felülírják minél specifikusabb egy stílusdefiníció, annál nagyobb a súlya Stílusok, stíluslapok

71 A webprogramozás alapjai 71 Stíluslapok hierarchiája böngésző alapbeállításai a felhasználó stílusbeállításai linkelt külső stíluslap ( ) importált külső stíluslap dokumentumszintű stíluslap (style tag) belső stíluslap (style attribútum) !important-nak jelölt stílusdefiníció Stílusok, stíluslapok

72 A webprogramozás alapjai 72 Stíluslap formátumok belső belső CSS szabályban a formázandó tag style attribútumában kell megadni a „tulajdonság: érték” párokat ”tulajdonság1: érték1; tulajdonság2: érték2;” … Stílusok, stíluslapok Címsor 2 tulajdonságértéktulajdonságérték

73 A webprogramozás alapjai 73 Stíluslap formátumok külső és dokumentumszintű külső és dokumentumszintű CSS szabály két részből áll –szelektor –szelektor - a formázandó HTML elemcsoportot jelöli ki (pl. h2) –deklaráció –deklaráció – a szelektorban megadott tag-ek formázása, 2 része van: tulajdonság érték Stílusok, stíluslapok szelektor h2 {color: red;} tulajdonságérték deklaráció

74 A webprogramozás alapjai 74 CSS szelektorok elem szelektor –adott tag-re csoportosított szelektor –több tag-re származtatott szelektor –valamely tag leszármazott tag-jére osztályszelektor –class attribútummal azonosított adott tag-ekre –class attribútummal azonosított bármely tag-re id szelektor –tag id attribútuma alapján azonosított egyedi tag-re általános szelektor –bármely tag-re Stílusok, stíluslapok

75 A webprogramozás alapjai 75 elem szelektor valamely html tag (pl. ) tulajdonságait szabályozhatjuk a tag nevének megadásával történik, pl.: h2 {font-weight: bold; color: red;} p {text-indent: 0.5in;} Stílusok, stíluslapok

76 A webprogramozás alapjai 76 csoportosított szelektor több konkrét html tag tulajdonságait szabályozhatjuk a tag-ek nevekek vesszővel elválasztva kell felsorolni, pl.: h1, h2 {font-weight: bold; color: red;} p, blockquote {text-indent: 0.5in;} Stílusok, stíluslapok

77 A webprogramozás alapjai 77osztályszelektor ugyanabba az osztályba tartozó tag-ekre vonatkozik az osztályba tartozást a törzsben a tag-ek class attribútumával adhatjuk meg: a szelektorban a pont (.) karakterrel hivatkozhatunk osztályokra, az osztályszelektor vonatkozhat: –bármely tag-re (generikus vagy globális osztályszelektor), pl. bármely ”normal” osztályba sorolt tag stílusa:.normal {color: black;} –adott osztályba tartozó adott tag-re, pl. a ”vastag” osztályba sorolt p tag stílusa: p.vastag {font-weight: bold;} Stílusok, stíluslapok

78 A webprogramozás alapjai 78 ID szelektor az ID szelektor segítségével egyedileg azonosított tag tulajdonságát szabályozhatjuk az egyedi azonosítás a dokumentum törzsében a tag id attribútumával történik a szelektorban a kettőskereszt (#) karakterrel hivatkozhatunk az egyedi azonosítókra #egyedi_1 {color: red} hivatkozhat egy szelektorral megjelölt konkrét tag-re p#egyedi_1 {color: red} Stílusok, stíluslapok

79 A webprogramozás alapjai 79 Szelektorok hierarchiája 1. ID szelektor 2. osztályszelektor 3. származtatott szelektor 4. elemi és csoportosított szelektorok Stílusok, stíluslapok

80 A webprogramozás alapjai 80 A és a tag ha egy sorban, vagy egy bekezdésen belül egy kifejezést máshogy szeretnénk megjeleníteni, pl.: Egy mondatban kiemelt szavak lehetnek. több blokkszintű (pl. bekezdést, h1, h2, stb.) magába foglaló nagyobb egységet szeretnénk egyszerre formázni Első bekezdés. Második bekezdés. Stílusok, stíluslapok

81 A webprogramozás alapjai 81 CSS deklaráció 60 tulajdonság 6 kategóriában –betűtulajdonságok –listatulajdonságok –szöveg igazítása –színek –hátterek –keretek Stílusok, stíluslapok

82 A webprogramozás alapjai 82Betűtulajdonságok font típus (font-family) –konkrét font típus (pl. Arial, Courier, ‘Times New Roman’ ) –általános font család (pl. serif, sans-serif, cursive) font méret (font-size) –abszolút mértékegységgel (pl. pt) –relatív mértékegységgel (pl. %) –kulcsszóval (large) font stílus (font-style) –italic, oblique font súly (font-weight) –bold, bolder, normal, lighter –100 és 900 közötti számok szöveg dekoráció (text-decoration) –underline –overline –line-through –none Stílusok, stíluslapok

83 A webprogramozás alapjai 83 font típus (font-family) Stílusok, stíluslapok body { font-family: Courier, monospace; } p { font-family: ‘Trebuchet MS’, Veranda, sans-serif; } konkrét típusáltalános font család

84 A webprogramozás alapjai 84 font méret (font-size) abszolút mértékegységgel –pt pont (1/72 inch in CSS2.1) –pc pica (1 pica = 12 points) –mm millimeter –cm centimeter –in inch relatív mértékegységgel –em aktuális fontméret (”m” betű szélessége) –ex "x" betű magassága –px pixel –% kulcsszóval (xx-small, x-small,…, medium, …, xx-large) Stílusok, stíluslapok h1 { font-size: 150%; } h1 { font-size: 20pt; }

85 A webprogramozás alapjai 85 font stílus (font-style) dőltbetű alkalmazása oblique –dőlt betű imitáció –az eredeti fontok eldöntve italic –igazi dőlt betű –dőlt betűs fontokkal oblique és italic –a legtöbb böngészőben ugyanúgy jelenik meg: Stílusok, stíluslapok

86 A webprogramozás alapjai 86 font súly (font-weight) vastagbetű megadás kulcsszóval –bold, bolder, normal, lighter számmal –100 és 900 közötti számok (100 többszörösei) –nem folyamatos változás –böngészőfüggő megjelenés Stílusok, stíluslapok

87 A webprogramozás alapjai 87 több fonttulajdonság megadása egyszerre font font tulajdonság segítségével minimum a font-size és a font-family tulajdonságértékeket meg kell adni (ebben a sorrendben!) ha fenti feltétel teljesült, akkor a többi tulajdonságérték bármilyen sorrendben megadható a font-size előtt Stílusok, stíluslapok p {font: style weight size font-family } p { font: 1em sans-serif; }

88 A webprogramozás alapjai 88 szöveg dekoráció (text-decoration) aláhúzott text-decoration: underline föléhúzott text-decoration: overline áthúzott text-decoration: line-through nincs dekoráció text-decoration: none Stílusok, stíluslapok

89 A webprogramozás alapjai 89Listatulajdonságok listaelem jelölő megadása list-style-type: –rendezetlen listán: disc, circle, square –rendezett listán: decimal (1, 2, …) upper-alpha (A, B, …), lower-alpha (a, b, …), upper-roman (I, II, …), lower-roman (i, ii, …) pl.: ul.korong {list-style-type:disc;} list-style-image (kép a listaelem előtt) li.kep {list-style-image: url(image.gif);} Stílusok, stíluslapok

90 A webprogramozás alapjai 90 Szövegek igazítása bekezdések első sora szöveg vízszintes igazítása sormagasság képek körülfolyatása margók betűköz és szóköz Stílusok, stíluslapok

91 A webprogramozás alapjai 91 bekezdések első sora text-indent text-indent –mértékegységgel pl.: p.alap {text-indent: 2em} –százalékos értékkel pl.: p.negyed {text-indent: 25%} Stílusok, stíluslapok

92 A webprogramozás alapjai 92 szöveg vízszintes igazítása text-align text-align –left: balra igazítás –center: középre igazítás –right: jobbra igazítás –justify: sorkizárt igazítás Stílusok, stíluslapok text-align: left text-align: right text-align: center text-align: justify

93 A webprogramozás alapjai 93sormagasság line-height line-height sorok alapvonala közötti távolság lehetséges értékek: –szám (pl. 1, 1.5, 2) –hosszúság egység (pl. 2em) –százalék (pl. 200%) Stílusok, stíluslapok p.dupla { line-height: 2; } p.2m { line-height: 2em; } p.ketszeres { line-height: 200%; }

94 A webprogramozás alapjai 94 képek körülfolyatása float float egy kép vagy szöveg hogyan helyezkedjen el egy másik elemhez képest lehetséges értékek: –left –right –none Stílusok, stíluslapok pl.

95 A webprogramozás alapjai 95margók HTML elem körül margók meghatározása: margin-left margin-right margin-top margin-bottom pl. „…” Stílusok, stíluslapok

96 A webprogramozás alapjai 96Színek color HTML elemek előtérszíne: color background-color háttérszín: background-color background-image elem hátterében kép elhelyezése: background-image színértékek megadhatók: –névvel –névvel, pl. red, green, blue, hexadecimális –hatjegyű hexadecimális számmal, pl. #FF0000, #00FF00, #0000FF –rgb –rgb formátumban pl. rgb(255, 0, 0) Stílusok, stíluslapok

97 A webprogramozás alapjai 97 Színek (folytatás) A színek megadása problémás –monitorok különbözőek –böngészők különbözőek Megadásuk –16 elemű garantált színkészlet minden böngészőn ugyanúgy néz ki –00, 33, 66, 99, CC és FF hexa kódokkal 216 elemű biztonságos Web paletta –tetszőleges értékkel 16 millió különböző szín megjelenésük nem garantált Stílusok, stíluslapok

98 A webprogramozás alapjai 98Hátterek háttérkép megadása: background_image –kép megadása: url(…); háttrékép ismétlődése: background-repeat –repeat –no-repeat – repeat-x (vízszintesen) –repeat-y (függőlegesen) kép pozíciója: background-position –top, center, bottom, left, right Stílusok, stíluslapok body { background-image: url(stars.gif); background-repeat: repeat-x }

99 A webprogramozás alapjai 99 A CSS előnyei a tartalom szétválasztható a formától önállóan tervezhető és újrafelhasználható a régi technikában számos szöveg grafikaként jelent meg, ami lassú a CSS csak egyszer megy le a kliens gépre, és nem laponként külön-külön egységes megjelenés külön CSS lehet a képernyőre, és külön a nyomtatóra. Stílusok, stíluslapok

100 A webprogramozás alapjai 100 A JavaScript nyelv alapjai A webprogramozás alapjai

101 A webprogramozás alapjai 101 Főbb témakörök A JavaScript nyelv szerepe A JavaScript nyújtotta lehetőségek A JavaScript beillesztése a weboldalakra A JavaScript nyelv alapjai JavaScript

102 A webprogramozás alapjai 102 A JavaScript szerepe weblapok dinamikus kezelhetősége érdekében fejlesztették ki eredetileg a Netscape, majd közösen a Sun Microsystems-szel legnépszerűbb szkriptnyelv C-típusú nyelv, nem módosított Java kliens-oldali JavaScript: –böngésző kezelése –kommunikáció a felhasználóval szerver-oldali JavaScript: –web szerver objektumainak kezelése JavaScript

103 A webprogramozás alapjai 103 A JavaScript nyújtotta lehetőségek kész kódrészletek állnak rendelkezésre segítségével dinamikusan felépíthetők a weboldal egyes részei HTML/XHTML objektumokhoz kapcsolható eseményekre reagálni tudunk HTML/XHTML DOM elemei olvashatók és írhatók űrlap mezőit elküldés előtt ellenőrizhetjük böngésző specifikus megoldások JavaScript

104 A webprogramozás alapjai 104 A JavaScript objektum szemlélete A JavaScript objektum-alapú és nem objektum-orientált –objektumokat használ, amely adatokat és metódusokat tartalmaz –nincs benne igazi öröklődés Az objektumok tulajdonságok gyűjteménye –adat tulajdonságok –metódus tulajdonságok Az Object objektum az őse minden más objektumnak JavaScript

105 A webprogramozás alapjai 105 JavaScript a weboldalon elemen belül –függvények, változók deklarációja –látható kimenete itt ne legyen –az itt lévő kódot meg kell hívni elemen belül –végrehajtás a feldolgozás során –függvényeket itt is meg kell hívni JavaScript kód külső fájlban is elhelyezhető JavaScript

106 A webprogramozás alapjai 106 JavaScript HTML fájlban beillesztése a tag segítségével: a megjegyzés azért kell, hogy ha a böngésző nem értené a JavaScriptet, akkor se akadjon fel a JavaScript kódon probléma lehet, hogy a JavaScriptben nem szerepelhet a "--" karakter páros JavaScript

107 A webprogramozás alapjai 107 JavaScript XHTML fájlban beillesztése a tag segítségével: a ![CDATA[ … ]] blokkban helyezhető el az az adat, amit nem akarunk az XHTML interpreterrel elolvastatni bizonyos böngészőkben ez hibát okoz /**//**/ megoldás: /* */ alkalmazása JavaScript

108 A webprogramozás alapjai 108 Általános JavaScript szabályok azonosítók –kezdőkarakter: $, _, betű –folytatás: $, _, betű vagy szám –érzékeny a kisbetű-nagybetű különbségre pontosvessző az utasítások végén – nem kötelező használni több utasítás csoportosítása (összetett utasítás): –{ } zárójelek között kommentjelek –// sor végéig hat –/*…..*/ JavaScript

109 A webprogramozás alapjai 109 Változók deklarálása a változók deklarálásakor nem kell típust megadni deklaráció lehet –explicit – var kulcsszóval pl. var szamlalo; –implicit – első értékadáskor var kulcsszó nélkül pl. elem = 5; –más lesz a láthatóságuk! egyszerre több változót is deklarálhatunk: var counter, index, pi = , gyumolcs = "alma", stop_flag = true; JavaScript

110 A webprogramozás alapjai 110 Numerikus operátorok aritmetikai +, -, *, /, % inkrementáció és dekrementáció sztringek összekapcsolás + operátorral JavaScript

111 A webprogramozás alapjai 111Típuskonverzió automatikus implicit típuskonverzió – " augusztus" = "1977 augusztus" –7 * "3" = 21 –0 értéke hamis, minden más szám igaz –"" értéke hamis, minden más sztring igaz explicit típuskonverzió –Number(aString) JavaScript

112 A webprogramozás alapjai 112 Értékadó utasítás egyszerű értékadás operátora: = értékadás művelettel: +=, -=, /=, *=, %=, … a +=7 ua. mint a = a + 7 JavaScript

113 A webprogramozás alapjai 113 Képernyő kimenet a JavaScript szabványos kimenete a böngészőbe van ágyazva a kimenetet a böngésző HTML kódként értelmezi ha pl. sortörést szeretnénk megjeleníteni, akkor egy a " " karakterláncot kell a kimenetre küldeni JavaScript

114 A webprogramozás alapjai 114 Az alert metódus az alert metódus egy üzenettel ellátott párbeszédablakot nyit meg az alert kimenete NEM XHTML, ezért ott nem " " -t, hanem tényleges sortörést kell alkalmazni alert("Figyelmeztetés"); alert("Figyelmeztetés"); alert("The sum is:" + sum + "\n"); JavaScript

115 A webprogramozás alapjai 115 A confirm metódus a confirm metódus egy üzenettel ellátott párbeszédablakot nyit meg, amelyen két gomb (OK, Cancel) látható a metódus visszatérési értéke –az OK gomb megnyomása után: true –a Cancel gomb megnyomása után: false confirm("Valóban?"); confirm("Valóban?"); JavaScript var question = confirm("Do you want to continue this download?");

116 A webprogramozás alapjai 116 A prompt metódus a prompt metódus megjelenít egy üzenetet egy párbeszéd ablakban a párbeszéd ablak szövegmezőjébe a felhasználó szöveget gépelhet a metódus visszaadja a begépelt szöveget prompt("Kérdés", "kezdeti érték"); prompt("Kérdés", "kezdeti érték"); JavaScript name = prompt("What is your name?", "");

117 A webprogramozás alapjai 117Vezérlőszerkezetek kontroll kifejezés –vezérlő utasítás feltételvizsgálata –értéke boolean típusú összehasonlító operátorok ==, !=,, >= logikai operátorok –és: && –vagy: || –negálás: ! JavaScript

118 A webprogramozás alapjai 118 Szelekciós utasítások if-thenif-then-else if-then és if-then-else olyan, mint Java- ban switch switch utasítás switch (expression) { case value_1: // statement(s) case value_2: // statement(s)... [default: // statement(s)] } JavaScript if (feltétel { // igaz ág } else { // hamis ág }

119 A webprogramozás alapjai 119 Iterációs utasítások hasonlóak, mint Java-ban for for for (kezdeti kifejezés; kontroll kifejezés; inkrementáló kifejezés) utasítás vagy összetett utasítás while while while (kontroll kifejezés) utasítás vagy összetett utasítás do-while do-while do utasítás vagy összetett utasítás while (kontroll kifejezés) JavaScript For (x=1;x<=10;x++) { // ciklusmag }

120 A webprogramozás alapjai 120 Objektumok létrehozása és módosítása new objektumot a new kifejezéssel kell létrehozni –ez meghívja a konstruktort az objektumok tulajdonságait a pont (.) jelöléssel érhetjük el: –objektum.tulajdonság a tulajdonságok nem változók, nincsenek deklarálva egy objektum tulajdonságainak a száma dinamikusan változhat JavaScript

121 A webprogramozás alapjai 121Tömbök elemek listája számértékkel indexelve első elem indexe: 0 new Array létrehozás a new Array metódus segítségével –ha egy paraméterrel hívjuk meg, létrehoz a paraméter értékének megfelelő tömböt: pl. new Array(10) –ha két vagy több paraméterrel hívjuk meg, akkor a paraméterek lesznek a tömb elemei: pl. new Array( 10, 20) méretük létrehozás után is módosítható –ha tömb méreténél nagyobb indexszámú elemre hivatkozunk, a tömb mérete megnő a tömb elemeinek nem kell azonos típusúnak lenni több dimenziós tömbök elemi tömbök –a beágyazott tömbök lehetnek különböző hosszúságúak JavaScript

122 A webprogramozás alapjai 122Függvények Függvények deklarációja két részből áll: –függvény fejéből függvény-neve(formális-paraméterek) –összetett utasításból return a return utasítást tartalmazni kell, amely visszaadhat egy értéket a vezérélést és hívónak Függvények meghívása –függvény-neve(aktuális-paraméterek) –kifejezés vagy annak része is lehet A függvényeket használat előtt az oldal részében deklarálni kell JavaScript

123 A webprogramozás alapjai 123 Paraméter ellenőrzés a JavaScript sem a paraméterek típusát sem a számát nem ellenőrzi függvényhíváskor –a formális paramétereknek típusnélküliek –ha kevesebb az aktuális paraméter, mint a formális, akkor a formális paraméterek egy része definiálatlan marad –ha több az aktuális paraméter, mint a formális, akkor a felesleges aktuális paraméterek figyelmen kívül lesznek hagyva JavaScript

124 A webprogramozás alapjai 124 Globális és lokális változók Globális változók var –függvényen kívül var kulcsszóval deklarált változók var –azok a változók, amelyek nem a var kulcsszóval lettek deklarálva (akkor is, ha egy függvény definíciójában szerepelnek) Lokális változók var –azok a változók, amelyek a var kulcsszóval lettek deklarálva egy függvény definíciójában –csak a függvény belsejében láthatók –ha globális változónak ugyanez a neve, akkor a függvény belsejében nem látható JavaScript

125 A webprogramozás alapjai 125 Példa – HEAD rész JavaScript

126 A webprogramozás alapjai 126 Példa – BODY rész gdf gdf gdf JavaScript

127 A webprogramozás alapjai 127 Dokumentum Objektum Modell A webprogramozás alapjai

128 A webprogramozás alapjai 128 Főbb témakörök A Dokumentum Objektum Modell (DOM) és alkalmazása a szerkesztésben. DOM alapon dolgozó JavaScript megoldások. Dokumentum Objektum Modell

129 A webprogramozás alapjai 129 Dokumentum Objektum Modell szabványos, platform és nyelvfüggetlen modell interfészeket definiál HTML dokumentumok és alkalmazások között az interfészek egy fa struktúrát írnak le objektumokat, metódusokat és tulajdonságokat definiál, melyek lekérdezhetők és módosíthatók Dokumentum Objektum Modell

130 A webprogramozás alapjai 130 DOM története 1990 közepétől a W3C fejleszti DOM 0 specifikáció nem létezett, mégis HTML 4 specifikáció része DOM 1 – 1998 –HTML és XML dokumentummodellre irányul DOM 2 – 2000 –stíluslap objektummodellt ad meg –stílusinformáció kezelése –átfogó eseménymodell DOM 3 – 2004 –XML-hez tartozó tartalommodellek –dokumentumvalidálás –dokumentumnézetek és formázás Dokumentum Objektum Modell

131 A webprogramozás alapjai 131 Objektum hierarchia Dokumentum Objektum Modell

132 A webprogramozás alapjai 132 Fontosabb objektumok Navigator Window Document Date String Array Math Dokumentum Objektum Modell

133 A webprogramozás alapjai 133 Navigator objektum A kliens Internet böngészőjét reprezentáló objektum –a hierarchia csúcsán áll Fontosabb metódusok –JavaEnabled Fontosabb tulajdonságok –appName - a browser neve, pl. "Microsoft Internet Explorer" –appVersion - a browser verziószáma –platform - pl. "Win32" –plugins - támogatott és installált plug-in-ek listája –systemLanguage - a rendszer által használt nyelv, pl. "en-us". –userLanguage - a felhasználó által használt nyelv, pl. "en-us". Dokumentum Objektum Modell

134 A webprogramozás alapjai 134 Window objektum A dokumentumot megjelenítő ablakot reprezentálja –minden tulajdonságát látják a szkriptek –a globális változók a Window objektum tulajdonságai –több Window objektum létezhet egyszerre Fontosabb metódusok –open, close –alert, confirm, prompt Fontosabb tulajdonságok –history, navigator, document, status Dokumentum Objektum Modell

135 A webprogramozás alapjai 135 Document objektum Fontosabb metódusok –open, close – write, writeln –getSelection Fontosabb tulajdonságok –bgcolor, title, url Fontosabb események –onclick, onpropertychange, onmousedown, onmouseup, onmouseover, onmouseout, onkeydown, onkeyup, onkeypress, stb. Dokumentum Objektum Modell

136 A webprogramozás alapjai 136 A Date objektum fontosabb metódusai toLocaleStringA string of the Date information getDateThe day of the month getMonthThe month of the year, as a number in the range of 0 to 11 getDayThe day of the week, as a number in the range of 0 to 6 getFullYearThe year getTimeThe number of milliseconds since January 1, 1970 getHoursThe number of the hour, as a number in the range of 0 to 23 getMinutesThe number of the minute, as a number in the range of 0 to 59 getSecondsThe number of the second, as a number in the range of 0 to 59 getMilliseconds The number of the millisecond, as a number in the range of 0 to 999 Dokumentum Objektum Modell

137 A webprogramozás alapjai 137 A String objektum fontosabb metódusai és tulajdonsága MethodParametersResult charAt A numberReturns the character in the String object that is at the specified position indexOfOne-character stringReturns the position in the String object of the parameter substringTwo numbersReturns the substring of the String object from the first parameter position to the second toLowerCaseNoneConverts any uppercase letters in the string to lowercase toUpperCaseNoneConverts any lowercase letters in the string to uppercase PropertyResult lengthThe number of characters in the string Dokumentum Objektum Modell

138 A webprogramozás alapjai 138 Az Array objektum Fontosabb metódusok –concat (összefűz) –sort (sorba rendez) –reverse (sorrendet megfordít) –push (a tömb végére stringet helyez) –pop (a tömb végéről az utolsó elemet leveszi) Fontosabb tulajdonságok –index –length Dokumentum Objektum Modell

139 A webprogramozás alapjai 139 A Math objektum Fontosabb metódusok –abs –max, min –round –random –sin, cos, stb. –exp, log, sqrt Fontosabb tulajdonságok –e –pi –sqrt2 –ln2 –ln10 Dokumentum Objektum Modell

140 A webprogramozás alapjai 140 DOM példa Shady Grove Aeolian Over the River, Charlie Dorian Dokumentum Objektum Modell

141 A webprogramozás alapjai 141 Elemek elérése JavaSrciptből az XHTML elemek JavaScript objektumoknak feletethetők meg az objektumok többféleképpen érhetők el –űrlap- és elemtömbökön keresztül az elemekre indexek segítségével hivatkozhatunk az index változhat, ha változik a űrlap –a űrlap és elemei name attribútumának segítségével validációs problémát okozhat: a form elemnek nem lehet name attribútuma –a getElementById és az id attribútum segítségével az id attribútumnak egyedinek kell lennie Dokumentum Objektum Modell

142 A webprogramozás alapjai 142 Elemek elérése JavaSrciptből űrlaptömb segítségével egy egyszerű űrlap esetén: hivatkozás az input elemre: document.forms[0].element[0] Dokumentum Objektum Modell

143 A webprogramozás alapjai 143 Elemek elérése JavaSrciptből a name attribútum segítségével a body elem kivételével minden elemnek kell, hogy legyen name attribútuma Pl.: hivatkozás az input elemre: document.myForm.pushMe Dokumentum Objektum Modell

144 A webprogramozás alapjai 144 Elemek elérése JavaSrciptből az id attribútum segítségével egy egyszerű űrlap esetén: a getElementById metódust használva: document.getElementById("turnItOn") Dokumentum Objektum Modell

145 A webprogramozás alapjai 145 Bevezetés az XML nyelvbe A webprogramozás alapjai

146 A webprogramozás alapjai 146 Főbb témakörök Az XML nyelv kialakulása és alkalmazása az adatok összefüggéseinek leírására. Gyakorlati alkalmazások, a leírás szabályainak rögzítése. XML séma és DTD szerepe. XML Bevezetés az XML nyelvbe

147 A webprogramozás alapjai 147 Az XML nyelv kialakulása eXtensible Markup Language – Kiterjeszthető Jelölőnyelv) őse: SGML (Standard Generalized Markup Language) jelölőnyelvek, adatstruktúrák definiálására használt nyelv adatcserére gyakran használják XML 1.0 Tim Bray, W3C – 1998 február XML

148 A webprogramozás alapjai 148 Az XML nyelv jellemzői az SGML részhalmaza karakteres adattovábbítás strukturált formában az adatok közötti összefüggéseket írja le adatok megjelenítésével nem törődik platform független adattárolás praktikus alkalmazása: XHTML XML

149 A webprogramozás alapjai 149 Az XML szintaxisa a szintaxis szintjei –jól-formált dokumentum: eleget tesz a XML szabályainak –érvényes dokumentum: jól-formált és még egy sémának is megfelel jól-formált dokumentum –nyitó tag-eknek van záró párjuk –ha egy tag másik tag-en belül kezdődik, ott is fejeződik be –létezik egy gyökér tag, amely az összes többi tag-et tartalmazza –az attribútumoknak értéket kell adni –az atribútumértéket idézőjelek közé kell tenni –, & karakterek csak az ő speciális jelentésükkel használhatók érvényesség az XML dokumentum sémájával ellenőrizhető XML

150 A webprogramozás alapjai 150 XML dokumentum struktúra Segéd fájlok –séma fájl DTD, XML séma, stb. –stíluslap CSS XSLT XML fájl felbontása –dokumentum egyedek –egyedek szintaxisa karakteres adatszekció

151 A webprogramozás alapjai 151 XML példa Matrix Keanu Reeves Laurence Fishburne Csinibaba Gálvölgyi János Tímár Péter XML

152 A webprogramozás alapjai 152 DTD - Dokumentumtípus Definíció dokumentumok együttesére szabványos szerkezetet definiál tagok, attribútumok, és szabályok halmaza strukturális szabályok halmaza  deklarációk, hogy mely elemek hol és hogyan jelenhetnek meg a dokumentumban belső és külső DTD XML

153 A webprogramozás alapjai 153 Belső és külső DTD a dokumentum típus deklaráció tartalmazhat közvetlen deklarációkat vagy hivatkozhat egy másik fájlra Belső DTD Külső DTD XML

154 A webprogramozás alapjai 154 DTD szerkezete lehetséges kulcsszavak: - elemek deklarációja - attribútumok deklarálása lehetséges alapértelmezett értékek: #FIXED, #REQUIRED, #IMPLIED - egyedek deklarálása XML

155 A webprogramozás alapjai 155 DTD hátrányai nem XML formátumú –nem elemezhető XML elemzővel –két (DTD, XML) szintaktikával kell foglalkozni tag adattípusát nem szabályozza (minden szöveg típusú) nem támogatja az XML újabb képességeit, például a névtereket XML

156 A webprogramozás alapjai 156XML-sémák XSD (XML Schema Definition) néven is nevezik DTD hátrányainak kiküszöbölésére született W3C a DTD utódaként definiált sokoldalú adattípus rendszert használ –44 különböző adattípus közül választhatunk –új adattípusok definiálhatók több ellenőrzést biztosít az adattípusokon XML-alapú formátumon alapul –szokványos XML eszközöket lehet használni a létrehozásához és feldolgozásához XML

157 A webprogramozás alapjai 157 XSD elemek Alapvető elemek: – ELEMENT meghatározzák az egyes adatmezők nevét és típusát – ATTRIBUTE az elemek tulajdonságai XML

158 A webprogramozás alapjai 158 XSD példa XML

159 A webprogramozás alapjai 159 XSD hátrányai A specifikáció túl nagy –nehéz a megérteni –bonyolult implementálni Az XML-alapú szintaxis miatt a séma definíció hosszú –nehéz az XSD olvasása és írása XML


Letölteni ppt "Informatikai Intézet A webprogramozás alapjai B282 Dr. Kopácsi Sándor főiskolai tanár Távoktatás tagozatnak."
Google Hirdetések