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.

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."— Előadás másolata:

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

2 A webprogramozás alapjai 2 Tantárgy- és tananyagfelelős Név:Dr. Kopácsi Sándor Telefon: /5040 Fogadóóra helye:1115 Bp. Etele u. 68., 504. szoba Fogadóóra ideje:Kedd 9:30-10:30 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: Medzihradszky Dénes: A webprogramozás alapjai JegyzetHallgatói oktatócsomag, ILIAS Tantárgyi útmutató

4 A webprogramozás alapjai 4 Kiegészítő tananyagok, segédletek Kiegészítő anyag FormaKiadás módja FirstPage 2006SzoftverLetölthető: Ellenőrző kérdések FájlILIAS Tantárgyi útmutató

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 Tantárgyi útmutató

6 A webprogramozás alapjai 6 Ajánlott szakirodalom  Robert W. Sebesta: A World Wide Web programozása, Panem Kiadó, 2005  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  Elméleti vizsga, ahol tesztek alapján kérjük számon a tananyagot. A tananyag számonkérése során programozási ismeretek is előkerülnek, kódrészleteket kell felismerni, analizálni, azok várható kimenetét felismerni.  A jelentkezés, a vizsgán való részvétel vagy távolmaradás, és az indexbeíratás a mindenkori vizsgaszabályzat szerint történik. Tantárgyi útmutató

9 A webprogramozás alapjai 9 A teszt  A feladatok lefedik a jegyzet és a gyakorlatok anyagát, és hasonlóak a fejezetek végén található tesztfeladatokhoz. A vizsgán kb. 20 tesztkérdés van. Két típusú tesztfeladat van: •Egyetlen jó válasz lehetséges: Ha eltalálta 1 pontot kap, ha nem, 0-át. •Több jó válasz lehetséges („Jelölje be az összes jó választ!”): Annyi pontot kap, ahány jó választ adott. Minden rontás 1 pont levonás.  Rendelkezésre álló idő: 30 perc. Tantárgyi útmutató

10 A webprogramozás alapjai 10Tematika  Internet és World Wide Web Internet és World Wide Web  Leíró nyelvek: HTML és XHTML Leíró nyelvek: HTML és XHTML  Stílusok, stíluslapok Stílusok, stíluslapok  XML nyelv és alkalmazása XML nyelv és alkalmazása  Űrlapok Űrlapok  Programozás JavaScript nyelven Programozás JavaScript nyelven  Dokumentum Objektum Modell Dokumentum Objektum Modell Tantárgyi útmutató

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

12 A webprogramozás alapjai 12 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

13 A webprogramozás alapjai 13 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, 1990-es évek eleje Internet és World Wide Web

14 A webprogramozás alapjai 14Protokoll  Gépek azonosítása IP (Internet Protocol) segítségével –32 bites szám (pl ) –domain név  Kommunikáció HTTP protokoll segítségével –HyperText Transfer Protocol –dokumentumok letöltése, megjelenítése Internet és World Wide Web

15 A webprogramozás alapjai 15 Nyílt forráskódú szoftverek  a forrás ingyen hozzáférhető, bővíthető  Apache webserver  Linux Internet és World Wide Web

16 A webprogramozás alapjai 16W3C  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

17 A webprogramozás alapjai W3C Recommendations  alkalmazott nyelvek vagy a megfelelő protokollok kidolgozására vonatkozó javaslatok  Lépései: –Javaslat benyújtása –Feljegyzés publikálása –Munkacsoport létrehozása –Munkapéldány publikálása –Javaslat jelölt állítása –Javaslat tervezet –Javaslat jóváhagyása Internet és World Wide Web

18 A webprogramozás alapjai 18 Web Hozzáférhetőségi Kezdeményezés  Képek és animációkhoz alt attribútum  Képrégiók kezelése map címkével  Multimédia: audio- és videóanyagok szövege, leírása  Hivatkozások: szövegkörnyezet nélkül is legyen érthető (rossz: kattints ide)  Oldalszerkezet: fejléc, lista, CSS  Grafikon és diagramm: longdesc attribútum  Script, applet, plugin: legyen alternatíva  Keretek: legyen noframes és tartalomra utaló keretnevek  Táblázatok: megjegyzések sorról sorra, összegzés a tartalomról  Ellenőrzés: használjunk ellenőrző eszközöket Internet és World Wide Web

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

20 A webprogramozás alapjai 20 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

21 A webprogramozás alapjai 21 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

22 A webprogramozás alapjai 22 HTML nyelv  HyperText Markup Language – Hypertext 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

23 A webprogramozás alapjai 23XHTML  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

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

25 A webprogramozás alapjai 25 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

26 A webprogramozás alapjai 26 elem - példa elem - példa A webprogramozás alapjai function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); } body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt } Leírónyelvek: HTML és XHTML

27 A webprogramozás alapjai 27 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

28 A webprogramozás alapjai 28 Szövegtagoló elemek  - paragrafus –előtte és utána nagyobb hely –align attributumában igazítás (left, right, center) –új sor  - több bekezdést magába foglaló egység –nincs sortávolság növekedés  - bekezdésnél kisebb egység –erre alkalmazható speciális formázás  - blokkidézetek –behúzás a kijelölt részre  - eredeti formázás megőrzése  - programkód megjelenítése  - sortörés  - vízszintes vonal Leírónyelvek: HTML és XHTML

29 A webprogramozás alapjai 29 Szövegformázó elemek  - szöveg típusának, színének, nagyságának beállítása  n = címsorok –félkövér –előtte és után üres sor  - félkövér betű  - dőlt betű  - felső index  - alsó index  - a környezeténél nagyobb betű  - a környezeténél kisebb betű  - erősen hangsúlyozott (félkövér) Leírónyelvek: HTML és XHTML

30 A webprogramozás alapjai 30 Kép elem - Kép elem -  src – forrás fájl (gif, jpg, png, stb.)  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

31 A webprogramozás alapjai 31 Kép részekre bontása - Kép részekre bontása -  adott kép darabokra bontható  a darabokhoz linkek kapcsolhatók  tag-ben usemap attribútum  

32 A webprogramozás alapjai 32 Táblázat deklarálása

Leírónyelvek: HTML és XHTML

33 A webprogramozás alapjai 33 Táblázat cím és adatsorai  címsor, címsor cellái cím cella1 cím cella2  adatsorok, adatcellák adat cella1 adat cella2 Leírónyelvek: HTML és XHTML

34 A webprogramozás alapjai 34 Felsorolás - Felsorolás -  Egyszerű felsorolás  Pontozott (rendezetlen) lista …  Számozott (rendezett) lista … Leírónyelvek: HTML és XHTML

35 A webprogramozás alapjai 35 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

36 A webprogramozás alapjai 36 Keretek – frame  csak az oldal változó részét kell frissíteni  nehezen követhetők a linkek Leírónyelvek: HTML és XHTML

37 A webprogramozás alapjai 37 Keretek – noframes, iframe  –arra az esetre ha a böngésző nem tudná a kereteket kezelni  - inline frame –ablak az ablakon belül –forrásfájl, méretek megadásával Leírónyelvek: HTML és XHTML

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

39 A webprogramozás alapjai 39 HTML szerkesztők  egyszerű szövegszerkesztők –jegyzettömb  dedikált szerkesztőprogramok –HomeSite –DreamWeaver –FirstPage –FrontPage

40 A webprogramozás alapjai 40 Adatok összekapcsolása - hiperlinkkel  dokumentumon belül Bevezetés  dokumentumok között Leírás  világhálón Leírás

41 A webprogramozás alapjai 41 Alap HTML tagok (1)  HTML konténer tagok  Karakter formázó HTML tagok  Sorformázó HTML tagok –P –H1, H2, stb. –BR, NOBR –PRE, HR –CENTER Leírónyelvek: HTML és XHTML

42 A webprogramozás alapjai 42 Alap HTML tagok (2)  Kép (IMG)  Hiperhivatkozás (A) –A HREF attribútum megadásának lehetőségei  Listák létrehozása –Rendezetlen lista (UL) –Rendezett, sorszámozott lista (OL) –Lista elemek (LI) Leírónyelvek: HTML és XHTML

43 A webprogramozás alapjai 43 HTML tábla  TABLE elem –Táblasorok (TR) –Táblacellák (TD)  Táblázatok formázásának attribútumai –BORDER –CELLSPACING, CELLPADING –BGCOLOR, BACKGROUND –COLSPAN, ROWSPAN  HTML táblák egymásba ágyazása –Összetett Web lap megjelenítése táblaként Leírónyelvek: HTML és XHTML

44 A webprogramozás alapjai 44 HTML keret (Frame)  Frame és Frameset szerepe  COLS és ROWS attribútum  In-line keretek (IFRAME)  Frameset-ek egymásba ágyazása  Navigálás a keretek között –TARGET attribútum Leírónyelvek: HTML és XHTML

45 A webprogramozás alapjai 45 További HTML elemek  COMMENT  FIELDSET és LEGEND  MAP  SPAN és DIV  XMP  A karakter egyedek használata Leírónyelvek: HTML és XHTML

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

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

48 A webprogramozás alapjai 48 CSS - Cascading Style Sheet  HTML vagy XHTML dokumentumok stílusleíró nyelve  lépcsőzetes stíluslap –belső –dokumentum szintű –külső  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 Stílusok, stíluslapok

49 A webprogramozás alapjai 49 A CSS története  HTML elsősorban a tartalommal foglalkozik, de vannak kifejezetten megjelenítési utasítások pl.  HTML tagok megjelenítési utasításai pl.  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

50 A webprogramozás alapjai 50 A stíluslapok szintjei  belső  belső - egyetlen tag tartalmára vonatkozik –a nyitó tag-ben lehet elhelyezni a style attribútum értékeként:  style = „tulajdonság1: érték1; tulajdonság2: érték2; …”  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 –a tag-gel hivatkozhatunk rájuk Stílusok, stíluslapok

51 A webprogramozás alapjai 51 CSS utasítások  CSS utasítás két részből áll –szelektor –szelektor - a formázandó HTML elemcsoportot jelöli ki (pl. H1) –deklaráció –deklaráció – a szelektorban megadott tag- ek formázása, 2 része van:  tulajdonság  érték  pl. LI {color: red} Stílusok, stíluslapok

52 A webprogramozás alapjai 52Stílusosztályok  a stíluslaptól eltérő specifikációt határozhatunk meg  csak dokumentumszintű és külső stíluslapokra vonatkoznak  tag megjegyzésében definiálhatjuk, pl.:  dokumentum törzsében a használni kívánt stílusosztályt az adott tag class attribútumában adhatjuk meg, pl.: ez egy normál bekezdés ez egy speciális bekezdés Stílusok, stíluslapok

53 A webprogramozás alapjai 53 Tulajdonságok és tulajdonságértékek  betűtulajdonságok  listatulajdonságok  szöveg igazítása  margók  színek Stílusok, stíluslapok

54 A webprogramozás alapjai 54Betűtulajdonságok  font-family: –pl. Arial, Courier, ‘Times New Roman’ –pl. serif, sans-serif, cursive  font-size –10pt –xx-small, x-small, small, medium, large, x-large, xx-large –%  font-style –italic, oblique  font-weight –bold, bolder, normal, lighter –100 és 900 közötti számok  text-decoration –underline –overline –line-through –none Stílusok, stíluslapok

55 A webprogramozás alapjai 55Listatulajdonságok  list-style-type: –rendezetlen listán:  disc, circle, square –rendezett listán:  decimal  upper-alpha, lower-alpha,  upper-roman, lower-roman pl.:  list-style-image (kép a listaelem előtt) Stílusok, stíluslapok

56 A webprogramozás alapjai 56 Szövegek igazítása text-indent  bekezdések első sora: text-indent pl.: text-align  szöveg vízszintes igazítása: text-align –left, center, right, justify float  képek és táblázatok „körülfolyatása”: float –left, right, none pl. Stílusok, stíluslapok

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

58 A webprogramozás alapjai 58Szí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 (lime), 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

59 A webprogramozás alapjai 59 A és a tag  ha egy sorban egy kifejezést máshogy szeretnénk megjeleníteni, pl.: Egy mondatban kiemelt szavak lehetnek.  több bekezdést magába foglaló nagyobb egységet szeretnénk egyszerre formázni Stílusok, stíluslapok

60 A webprogramozás alapjai 60 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

61 A webprogramozás alapjai 61 CSS szabályok definiálása  Szintaktika: –szabályhatáskör {attr:érték;attr:érték;…}  Tag példa: –body {font-family:ariel;font-size:10;}  Osztály példa: –.error {font-color:red}  A pont (.) jelenti azt, hogy ez egy osztályszabály Stílusok, stíluslapok

62 A webprogramozás alapjai 62 CSS használata  Magába a tagba is rakható stílus információ –Kivételes körülmények között  Stíluslap szintaktikája  Globális stíluslap a /HEAD szekcióban  HTML LINK tag használata –Az elsődlegeshez ezt célszerű használni  Osztályok –Stílus osztályok –Globális osztályok –Pszeudoosztályok Stílusok, stíluslapok

63 A webprogramozás alapjai 63 XML nyelv és alkalmazása A webprogramozás alapjai

64 A webprogramozás alapjai 64 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 nyelv és alkalmazása

65 A webprogramozás alapjai 65 Az XML nyelv kialakulása  eXtensible Markup Language – Kiterjeszthető Jelölőnyelv)  őse: SGML (Standard Generalized Markup Language)  XML 1.0 Tim Bray, W3C – 1998 február XML nyelv és alkalmazása

66 A webprogramozás alapjai 66 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 nyelv és alkalmazása

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

68 A webprogramozás alapjai 68DTD  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 nyelv és alkalmazása

69 A webprogramozás alapjai 69 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 nyelv és alkalmazása

70 A webprogramozás alapjai 70 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 nyelv és alkalmazása

71 A webprogramozás alapjai 71XML-sémák  DTD hátrányainak kiküszöbölésére született  W3C a DTD utódaként definiált  XSD (XML Schema Definition) néven is szokták emlegetni  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 nyelv és alkalmazása

72 A webprogramozás alapjai 72 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 nyelv és alkalmazása

73 A webprogramozás alapjai 73 Űrlapok A webprogramozás alapjai

74 A webprogramozás alapjai 74 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

75 A webprogramozás alapjai 75 Adatok továbbítása űrlapokkal  Weblapok segítségével adatok felvitele a szerverre  Szerveroldali alkalmazások dolgozzák fel az adatokat – adatrögzítés adatbázisban – egyéb elektronikus ügyintézés Űrlapok

76 A webprogramozás alapjai 76 Adattovábbítás feltételei  HTML/XHTML nyelv űrlap és űrlapobjektum elemei  a kliens a http protokoll segítségével a szerverhez intézett kéréshez mellékelt adatokat küldjön a szervernek  a http protokollból adódóan csak karakteres adatok továbbíthatók név-érték pár formájában  submit() hatására az összes űrlapelem felvegye a bevitt értéket és ezeket egy metódus http kérésbe csomagolja  szerver oldalon a név-érték párokból valódi változók jöjjenek létre a szerver memóriájában Űrlapok

77 A webprogramozás alapjai 77 HTML/XHTML űrlap űrlap törzse: beviteli mezők  action –hova továbbítsa az adatokat –végrehajtható program is lehet –mailto: a kliens levelezője indul el  method –get: adatok az URL-ben jelennek meg –post: adatok a kérés törzsében kerülnek továbbításra Űrlapok

78 A webprogramozás alapjai 78 Űrlap elemek - szövegmezők  egysoros szövegmező  egysoros rejtett szövegmező  többsoros szövegmező többsoros szöveg Űrlapok

79 A webprogramozás alapjai 79 Űrlap elemek - választások  rádiógomb csoport  jelölőmező  legördülő lista lista_elem_1 lista_elem_2 Űrlapok

80 A webprogramozás alapjai 80 Űrlap elem – fájl feltöltése Űrlapok

81 A webprogramozás alapjai 81 Űrlap elem - nyomógombok  felirat nélküli gomb  submit gomb felirattal  submit gomb képpel  reset gomb Űrlapok

82 A webprogramozás alapjai 82 Hogyan működik egy web űrlap?  Method=„post” Action=„ugyanez a lap”  Az űrlap egyedi „id” és „name” attribútumot kap  Mindegyik vezérlőelemhez hozzárendelődik egy „value” tag  Rejtett vezérlőelem gondoskodik az állapot megőrzéséről (_VIEWSTATE néven)  Kikapcsolható az enableviewstate=„false” megadásával bármelyik vezérlőelemnél Űrlapok

83 A webprogramozás alapjai 83 Programozás JavaScript nyelven A webprogramozás alapjai

84 A webprogramozás alapjai 84 Főbb témakörök  A JavaScript nyelv szerepe  A JavaScript nyújtotta lehetőségek  A JavaScript beillesztése a weboldalakra Űrlapok Programozás JavaScript nyelven

85 A webprogramozás alapjai 85 A JavaScript szerepe  weblapok dinamikus kezelhetősége érdekében fejlesztették ki  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  objektum alapú nyelv JavaScript

86 A webprogramozás alapjai 86 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

87 A webprogramozás alapjai 87 JavaScript a weboldalon  beillesztése a tag segítségével  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

88 A webprogramozás alapjai 88 Kliensoldali szkript alkalmazása  HTML komment technikát kell használni –Ha a böngésző nem ért JavaScript-ül, akkor ignorálja, mert komment-nek tekinti JavaScript

89 A webprogramozás alapjai 89 JavaScript szabályok  pontosvessző az utasítások végén – Nem kötelező használni!  kommentjelek ( //, illetve /*…..*/ )  változódeklaráció –var Valtozo  érzékeny a kisbetű-nagybetű különbségre  a deklaráció nem kötelező.

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

91 A webprogramozás alapjai 91 Példa – BODY rész Mozart Beethoven Wagner JavaScript

92 A webprogramozás alapjai 92 Nyelvi elemek  változók –nem típusos nyelv –érvényességi köre a deklaráció helyétől függ  vezérlőszerkezetek –feltételes szerkezetek (if…else, switch) –iterációk (for, while, do...while)  eljárások, függvények –alert(„Figyelmeztetés”); –confirm(„Valóban?”); -> OK: true, Mégsem: false –prompt(„valtozo_nev”, „kezdeti_ertek”); JavaScript

93 A webprogramozás alapjai 93 JavaScript vezérlőszerkezetek if (feltétel { // igaz ág } else { // hamis ág } For (x=1;x<=10;x++) { // ciklusmag } JavaScript

94 A webprogramozás alapjai 94Eseménykezelés  eseménykezelők segítségével dinamikus weboldalak hozhatók létre  tipikus események –egérkattintás –egér mozgatása valamely pont fölött –űrlapbeviteli mező kiválasztása vagy elhagyása –űrlap elküldése vagy alaphelyzetbe állítása –weblap vagy kép betöltődése JavaScript

95 A webprogramozás alapjai 95 Gyakran használt eseménykezelők  weboldal betöltésekor, elhagyásakor –onLoad, - böngésző típusának lekérdezése –onUnload, - kilépés kezelése  űrlap kezelés –onFocus – belépés egy űrlap elembe –onBlur – űrlap elem elhagyása –onChange – űrlap elem tartalma megváltozik –onSubmit – űrlap elküldése  egérmozgás –onMouseOver – egér felö kerül egy elemnek –onMouseOut – egér elhagyja az elemet  időzítő események –getHours(), getMinutes(), getSeconds() –setTimeout JavaScript

96 A webprogramozás alapjai 96 Fontosabb JavaScript Objektumok  String –length(), toUpperCase(), match(), indexOf(), replace()  Date –getTime() –getFullYear(), getMonth(), getDate(), getDay()  Array –concat(), sort(), push(), pop(),  Math –random(), max(), min(), round() JavaScript

97 A webprogramozás alapjai 97 Böngésző objektumok  window –a hierarchia csúcsán áll –böngészőablakot képvisel  navigator –a böngészőről tárol információt  screen –a kliens gép képernyőjéről rendelkezik információkkal  history –korábban meglátogatott web oldalak címét tárolja  location –az éppen aktuális oldal címét tartalmazza –reload() vagy replace() függvényei segítségével új oldal tölthető be JavaScript

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

99 A webprogramozás alapjai 99 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

100 A webprogramozás alapjai 100 Dokumentum Objektum Modell  szabványos, platform és nyelvfüggetlen modell  interfészeket definiál HTML dokumentumok és alaklamzások között  objektumokat, metódusokat és tulajdonságokat definiál, melyek lekérdezhetők és módosíthatók Dokumentum Objektum Modell

101 A webprogramozás alapjai 101 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 objektummodelt 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

102 A webprogramozás alapjai 102 Window objektum  Metódusok –open, showModelDialog, showModelessDialog, close, navigate  Tulajdonságok –document, event, history, location, navigator  Események –onload, onbeforeunload, onunload, onfocus, onblur  Kollekció –frames Dokumentum Objektum Modell

103 A webprogramozás alapjai 103 Dokument objektum  Metódusok –open, write, close, createElement, insertAdjacentElement, insertBefore  Tulajdonságok –body, cookie, title  Események –onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx  Kollekciók –all, frames, forms 5.4 Dokumentum Objektum Modell


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