A webprogramozás alapjai B282

Az előadások a következő témára: "A webprogramozás alapjai B282"— Előadás másolata:

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

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 Kötelező tananyagok Tananyag Forma Kiadá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 Jegyzet Tantárgyi útmutató

4 Kiegészítő tananyagok, segédletek
Kiegészítő anyag Forma Kiadás módja FirstPage 2006 Szoftver Letölthető: Ellenőrző kérdések Fájl ILIAS Tantárgyi útmutató

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 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 Előtanulmányi rend Szükséges előismereteket A vizsga előfeltétele
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 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 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 Tematika Internet és World Wide Web Leíró nyelvek: HTML és XHTML
Stílusok, stíluslapok XML nyelv és alkalmazása Űrlapok Programozás JavaScript nyelven Dokumentum Objektum Modell Tantárgyi útmutató

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

12 Internet és World Wide Web
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 Az Internet és a Web kialakulása
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 Protokoll 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 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 W3C 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 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 17 Internet és World Wide Web

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 Leírónyelvek: HTML és XHTML
A webprogramozás alapjai Leírónyelvek: HTML és XHTML

20 Leírónyelvek: HTML és XHTML
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 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 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. <html> nyitó- és záró címke pl. <html> … </html> csak nyitó címke pl. <br>, <hr> nyitó címke belsejében attribútumok pl. <a href=„ 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 XHTML 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. <br /> 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 HTML (XHTML) dokumentum alapszerkezete
<head> <title>címsor szövege</title> </head> <body> a dokumentum törzs </body> </html> Leírónyelvek: HTML és XHTML

25 <head> elem a HTML dokumentum leírására szolgál
nincs attribútuma további elemek tárolója <title> a címsorban megjelenő szöveg <base> a dokumentum alapértelmezett helye <link> kapcsolat más dokumentumokkal <meta> információ a dokumentumról kulcsszavak leírás stb. <script> JavaScript vagy VBScript kód helye <style> beágyazott stíluslap Leírónyelvek: HTML és XHTML

26 <head> elem - példa
<title>A webprogramozás alapjai</title> <base href=„ /> <link rel="stylesheet" href=„style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8„ /> <meta name="keywords" content="webszerkesztés, XHTML, oktatás" /> <script language="JavaScript1.2"> function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); } </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt </style> </head> Leírónyelvek: HTML és XHTML

27 <body> 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: <body bgcolor=„color”> szövegszín: <body text =„color”> hiperlinkek színe: <body link =„color”> meglátogatott link: <body vlink =„color”> aktív linkek színe: <body alink =„color”> oldal betöltéséhez, mint eseményhez kapcsolható események is itt helyezhetők el Leírónyelvek: HTML és XHTML

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

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

30 Kép elem - <img> <img src=”kep.xxx” alt=”” width=”” height=””/> 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 Kép részekre bontása - <map>
adott kép darabokra bontható a darabokhoz linkek kapcsolhatók <img> tag-ben usemap attribútum <img src= … usemap=”#navkep” /> <map id=”navkep” name=”navkep”> <area shape= ”rect” coords= : két sarok ”circle” coords= : középpont, sugár ”poly” coords= : összes csúcspont Leírónyelvek: HTML és XHTML

32 Táblázat deklarálása <table align background bgcolor border
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 width > Leírónyelvek: HTML és XHTML

33 Táblázat cím és adatsorai
címsor, címsor cellái <thead> <tr> <th>cím cella1</th> <th>cím cella2</th> </tr> </thead> adatsorok, adatcellák <td>adat cella1</td> <td>adat cella2</td> Leírónyelvek: HTML és XHTML

34 Felsorolás - <li></li>
Egyszerű felsorolás Pontozott (rendezetlen) lista <ul> <li>…</il> </ul> Számozott (rendezett) lista <ol> </ol> Leírónyelvek: HTML és XHTML

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 Keretek – frame csak az oldal változó részét kell frissíteni
nehezen követhetők a linkek <frameset cols = „25%, 25%, *”> <frame src=„bal.htm” /> <frame src=„kozep.htm” /> <frame src=„jobb.htm” /> </frameset> Leírónyelvek: HTML és XHTML

37 Keretek – noframes, iframe
<noframes></noframes> arra az esetre ha a böngésző nem tudná a kereteket kezelni <iframe> - inline frame ablak az ablakon belül forrásfájl, méretek megadásával <iframe src=”iframe. html” width=”200” height=”100”> Leírónyelvek: HTML és XHTML

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

39 HTML szerkesztők egyszerű szövegszerkesztők
jegyzettömb dedikált szerkesztőprogramok HomeSite DreamWeaver FirstPage FrontPage

40 Adatok összekapcsolása - hiperlinkkel
dokumentumon belül <a href=”#bevezetes”>Bevezetés</a> <a name=„bevezetes”></a>Bevezetés</a> dokumentumok között <a href=”./leiras.htm”>Leírás</a> világhálón <a href=” Leírás </a>

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 1.1 1.2 1.3 1.4 1.5 1.6 Leírónyelvek: HTML és XHTML

42 Alap HTML tagok (2) Kép (IMG) Hiperhivatkozás (A) Listák létrehozása
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) 1.7 1.8 1.9 Leírónyelvek: HTML és XHTML

43 HTML tábla TABLE elem Táblázatok formázásának attribútumai
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 1.10 1.11 1.12 1.13 1.14 Leírónyelvek: HTML és XHTML

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 1.15 1.16 1.17 Leírónyelvek: HTML és XHTML

45 További HTML elemek COMMENT FIELDSET és LEGEND MAP SPAN és DIV XMP
A karakter egyedek használata 1.18 1.19 1.20 1.21 1.22 1.23 Leírónyelvek: HTML és XHTML

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

47 Stílusok, stíluslapok 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 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 CSS története HTML elsősorban a tartalommal foglalkozik, de vannak kifejezetten megjelenítési utasítások pl. <i> HTML tagok megjelenítési utasításai pl. <h2 font-size=„30”> 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 stíluslapok szintjei
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ű - a dokumentum teljes törzsére vonatkozik a fejben a <style> tag tartalmaként jelenhetnek meg <style type = „text/CSS”> <!-- szabály_lista --> </style> külső – több dokumentum törzsére vonatkozhat tárolásuk külön szöveges (text/css) állományban a <link> tag-gel hivatkozhatunk rájuk <link rel= stylesheet type=„text/css” href=„ </link> Stílusok, stíluslapok

51 CSS utasítások CSS utasítás két részből áll pl. LI {color: red}
szelektor - a formázandó HTML elemcsoportot jelöli ki (pl. H1) 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 Stílusosztályok a stíluslaptól eltérő specifikációt határozhatunk meg
csak dokumentumszintű és külső stíluslapokra vonatkoznak <style> tag megjegyzésében definiálhatjuk, pl.: <style type = „text/CSS”> <!-- p.normal {tulajdonság-érték lista} p.special {tulajdonság-érték lista} --> </style> dokumentum törzsében a használni kívánt stílusosztályt az adott tag class attribútumában adhatjuk meg, pl.: <p class=„normal”> ez egy normál bekezdés</p> <p class=„special”> ez egy speciális bekezdés</p> Stílusok, stíluslapok

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 Betűtulajdonságok font-family: font-size font-style font-weight
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 Listatulajdonságok list-style-type:
rendezetlen listán: disc, circle, square rendezett listán: decimal upper-alpha, lower-alpha, upper-roman, lower-roman pl.: <ul style=„list-style-type:disc”> list-style-image (kép a listaelem előtt) <li style=„list-style-image: url(image.gif)”> Stílusok, stíluslapok

56 Szövegek igazítása bekezdések első sora: text-indent
pl.: <p style=„text-indent: 0.5in”> szöveg vízszintes igazítása: text-align left, center, right, justify képek és táblázatok „körülfolyatása”: float left, right, none pl. <img src=„…” alt=„…” style=„float: right” /> Stílusok, stíluslapok

57 Margók HTML elem körül margók meghatározása: margin-left margin-right
margin-top margin-bottom pl. <img src=„…” alt=„…” style=„float: right; margin-left: 0.35in; margin-bottom: 0.35in” /> Stílusok, stíluslapok

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

59 A <span> és a <div> tag
ha egy sorban egy kifejezést máshogy szeretnénk megjeleníteni, pl.: <p>Egy mondatban <span style=„font-size: 24pt; color: red”>kiemelt szavak</span> lehetnek.</p> <div> több bekezdést magába foglaló nagyobb egységet szeretnénk egyszerre formázni Stílusok, stíluslapok

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 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 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 2.1 2.2 2.3 7.6 2.4 2.5 2.6 Stílusok, stíluslapok

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

64 XML nyelv és alkalmazása
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 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 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 XML példa <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="konyv.xsl"?> <!DOCTYPE filmek SYSTEM "filmek.dtd"> <filmek> <film nyelv="angol"> <cím>Matrix</cím> <szereplő>Keanu Reeves</szereplő> <szereplő>Laurence Fishburne</szereplő> </film> <film nyelv="magyar"> <cím>Csinibaba</cím> <szereplő>Gálvölgyi János</szereplő> <rendező>Tímár Péter</rendező> </film> </filmek> XML nyelv és alkalmazása

68 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 nyelv és alkalmazása

69 DTD szerkezete <!kulcsszó …> lehetséges kulcsszavak:
<!ELEMENT elemnév (a gyerek elemek nevének listája)> - elemek deklarációja <!ATTLIST elemnév attribútum_név attribútum_típus [alapértelmezett_érték]> - attribútumok deklarálása lehetséges alapértelmezett értékek: #FIXED, #REQUIRED, #IMPLIED <!ENTITY egyed_név egyed_érték> - egyedek deklarálása XML nyelv és alkalmazása

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 XML-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 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
Űrlapok

74 Űrlapok 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

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 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 HTML/XHTML űrlap action method
<form action=„weblap.html” method=„get” name=„…”, id=„…”, title=„…”> űrlap törzse: beviteli mezők </form> 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 Űrlap elemek - szövegmezők
egysoros szövegmező <input type=”text” name=”…” value=”szöveg” /> egysoros rejtett szövegmező <input type=”password” name=”…” value=”*****” /> többsoros szövegmező <textarea wrap=”off” name=”…”> többsoros szöveg </textarea> Űrlapok

79 Űrlap elemek - választások
rádiógomb csoport <input type=”radio” name=”gomb” value=”elso” /> <input type=”radio” name=”gomb” value=”masodik” /> jelölőmező <input type=”checkbox” name=”box1” value=”ha bekkanttintják, ez lesz elküldve” /> legördülő lista <select name=”lista”> <option value=”l1”>lista_elem_1</option> <option value=”l2”>lista_elem_2</option> </select> Űrlapok

80 Űrlap elem – fájl feltöltése
<input type=”file” name=”fajlnev” value=”ide kerül a feltöltendő fájl neve” /> Űrlapok

81 Űrlap elem - nyomógombok
felirat nélküli gomb <input type=”button” name=”nyomógomb” onClick() /> submit gomb felirattal <input type=”submit” name=”submit_gomb” /> submit gomb képpel <input type=”image” src=”kep.jpg” name=”kepes_gomb” border=”0” width=”50” height =”15” /> reset gomb <input type=”reset” name=”reset_gomb” /> Űrlapok

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 Programozás JavaScript nyelven
A webprogramozás alapjai Programozás JavaScript nyelven

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

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 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 JavaScript a weboldalon
beillesztése a <script> tag segítségével <head> 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 <body> 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ő <script type=„text/javascript” src=„szkript.js”> JavaScript

88 Kliensoldali szkript alkalmazása
HTML komment technikát kell használni <SCRIPT Language=JavaScript> <!-- Function Valami() …….. End --> </SCRIPT> Ha a böngésző nem ért JavaScript-ül, akkor ignorálja, mert komment-nek tekinti. 5.2 5.3 JavaScript

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 Példa – HEAD rész <HTML> <HEAD>
<SCRIPT Language=”JavaScript”> <!-- function openWin(URL) { awindow=window.open(URL,”new_window”, ”toolbar=no,width=350,height=400,status=no, scrollbars=yes,resizable=no,menubar=no”)} End //--> </SCRIPT> </HEAD> JavaScript

91 Példa – BODY rész <BODY>
<A HREF=”javascript:openWin(‘mozart.html’);”>Mozart</A> <A HREF=”javascript:openWin(‘beethoven.html’);”>Beethoven</A> <A HREF=”javascript:openWin(‘wagner.html’);”>Wagner</A> </BODY> </HTML> JavaScript

92 Nyelvi elemek változók vezérlőszerkezetek eljárások, függvények
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 JavaScript vezérlőszerkezetek
if (feltétel { // igaz ág } else { // hamis ág } For (x=1;x<=10;x++) { // ciklusmag } JavaScript

94 Esemé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 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 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 Böngésző objektumok window navigator screen history location
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 Dokumentum Objektum Modell
A webprogramozás alapjai Dokumentum Objektum Modell

99 Dokumentum Objektum Modell
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 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 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 Window objektum Metódusok Tulajdonságok Események Kollekció
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 Dokument objektum Metódusok Tulajdonságok Események Kollekciók
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