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

Tantárgy- és tananyagfelelős Név: Dr. Kopácsi Sándor Telefon: 203 0304/5040 E-mail: kopacsi@gdf.hu Fogadóóra helye: 1115 Bp. Etele u. 68., 504. szoba Fogadóóra ideje: Kedd 9:30-10:30 Tantárgyi útmutató

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ó

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

A tantárgy elérési útvonala ILIAS ETOR tantárgyi mappa: http://ilias.gdf.hu, Taneszköz tároló  Főiskolai képzés – saját szak  A webprogramozás alapjai tantárgyi mappa Tantárgyi útmutató

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ó

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ó

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ó

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ó

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ó

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

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

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

Protokoll Gépek azonosítása IP (Internet Protocol) segítségével 32 bites szám (pl. 193.6.200.73) 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

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

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

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

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

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

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

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 - 1996 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

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=„http://www.gdf.hu”> a böngészők intelligens módon értelmezik félreértések elkerülésére: XHTML Leírónyelvek: HTML és XHTML

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

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

<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

<head> elem - példa <title>A webprogramozás alapjai</title> <base href=„http://www.gdf.hu” /> <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

<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

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

Szövegformázó elemek <font></font> - szöveg típusának, színének, nagyságának beállítása <hn></hn> n = 1..6 - 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

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

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

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

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

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

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

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

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

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

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

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=”http://www.leiras.htm”> Leírás </a>

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

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

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

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

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

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

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

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

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

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=„http://www,cs,edu/styles/wbook.css”> </link> Stílusok, stíluslapok

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A webprogramozás alapjai Űrlapok

Ű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

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

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

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

Ű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

Ű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

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

Ű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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dokumentum Objektum Modell A webprogramozás alapjai Dokumentum Objektum Modell

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

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

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

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

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