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

Tantárgy- és tananyagfelelős Név: Dr. Kopácsi Sándor Telefon: 203 0304/1260 E-mail: kopacsi@gdf.hu Fogadóóra helye: 1119 Bp. Mérnök u. 39. 126. szoba Fogadóóra ideje: Csütörtök: 9:30-11:00 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: Robert W. Sebesta: A World Wide Web programozása, Panem Kiadó, 2005 Könyv Hallgatói oktatócsomag Tantárgyi útmutató

Kiegészítő tananyagok, segédletek Kiegészítő anyag Forma Kiadás módja e-Tananyag HTML ILIAS FirstPage 2006 szoftver Letölthető: www.evrsoft.com 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 a tanköny mintapéldái letölthetők az ILIAS-ból a Sebesta_Source_code.zip fájlból Tantárgyi útmutató

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ó

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

Tematika Internet és World Wide Web Leíró nyelvek: HTML és XHTML (1) Űrlapok Stílusok, stíluslapok (1) Stílusok, stíluslapok (2) A JavaScript nyelv alapjai Dokumentum Objektum Modell Bevezetés az XML-be Összefoglalás, áttekintés, ismétlés 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-Lee, 1990-es évek eleje Internet és World Wide Web

Protokoll Gépek azonosítása IP (Internet Protocol) segítségével IPv4 32 bites (4 db 8 bites, azaz 0..255 közé eső) szám pl. 193.6.200.73 4,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

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

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

<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 paragrafus: <p>…</p> előtte és utána nagyobb hely align attribútumában igazítás (left, right, center) új sor sortörés: <br /> címsorok: <hn>…</hn> n = 1..6 félkövér előtte és után üres sor blokkidézetek: <blockquote>…</blockquote> behúzás a kijelölt részre vízszintes osztóvonal vonal: <hr /> több bekezdést magába foglaló egység: <div>…</div> nincs sortávolság növekedés erre alkalmazható speciális formázás bekezdésnél kisebb egység (pl. szavak) <span>…</span> erre is alkalmazható speciális formázás Leírónyelvek: HTML és XHTML

Szövegformázó elemek* dőlt betű: <i>…</i> hangsúlyozott (dőlt): <em>…</em> félkövér betű: <b>…</b> erősen hangsúlyozott (félkövér): <strong>…</strong> aláhúzott: <u>…</u> a környezeténél nagyobb betű. <big>…</big> a környezeténél kisebb betű: <small>…</small> felső index: ^… alsó index: _… programkód megjelenítése: <code>…</code> írógép karakterek megjelenítése: <tt>…</tt> eredeti formázás megőrzése: <pre>…</pre> szöveg típusának, színének, méretének beállítása:<font>…</font> * a szövegformázás korszerűbb style sheet-ek segítségével Leírónyelvek: HTML és XHTML

Előre formázott szöveg - <pre> <html> <head> <title>preformatted text</title> </head> <body> <pre> Amit itt látunk, az egy előre megformázott szöveg. vegyük észre, hogy pontosan úgy jelenik meg, ahogy begépeltük. </pre> 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. <nobr>Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban.</nobr> </body> </html>

Szöveg típusának, színének, méretének beállítása - <font> <html> <head> <title>Fonts</title> </head> <body> <font color="blue">Színek, </font> <font size="5">méret, </font> <font face="courier">betűtípus </font>beállítása.<br /> <font size="6" color="blue" face="arial">Több változás együtt.</font> </body> </html>

Szöveg igazítása – align attribútum <html> <head> <title>alignment</title> </head> <body> <p align="left">Ez a paragrafus balra van igazítva.</p> <h2 align="center">Ez a 2-es szintű fejléc középre igazított.</h2> <h5 align="right">Ez az 5-ös fejléc jobbra igazított.</h5> <center>Ez egy sima középre igazított szöveg.</center> <div align="right"> <p>Ezt két bekezdést a div elem foglalja magába.</p> <p>Ezekre egyszerre alkalmazható pl. egységes igazítás.</p> </div> </body> </html>

Adatok összekapcsolása hiperlinkkel - <a href=""> dokumentumon belül <a href="#bevezetes">ugrás a bevezetéshez</a> <a name="bevezetes"></a><h1>Bevezetés</h1> <h1 id="bevezetés">Bevezetés</h1> dokumentumok között szerveren belül dokumentum elejére: <a href="./leiras.htm">Leírás</a> megadott helyre: <a href="./leiras.htm#bevezetes">Leírás</a> világhálón <a href="http://www.gdf.hu/leiras.htm">Leírás </a> e-mail cím megadása <a href="mailto:kopacsi@gdf.hu">e-mail az előadónak</a>

Kép elem - <img /> <img src=”” alt=”” width=”” height=””/> 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

Kép részekre bontása - imagemap adott kép darabokra bontható a darabokhoz linkek kapcsolhatók <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 /> </map> Leírónyelvek: HTML és XHTML

Felsorolások Pontozott (rendezetlen) lista Számozott (rendezett) lista <ul type=””> <li>…</li> </ul> type = disc, circle, square Számozott (rendezett) lista <ol type=””> </ol> type = 1, a, A, i, I Definíciós lista <dl> <dt>…</dt> <dd>…</dd> <dd>…<dd> </dl> Leírónyelvek: HTML és XHTML

Táblázatok <table border=”1”> <caption>táblázat címe</caption> <thead> <tr> <th>cím_cella1</th> <th>cím_cella2</th> </tr> </thead> <tbody> <td>adat_cella1</td> <td>adat_cella2</td> </tbody> </table>

Táblázat deklarálása <table>, (<tr>, <th>, <td>) 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

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 <table border="1"> <tr> <td colspan="3" align="center">egy hosszú első sor</td> </tr> <tr> <td rowspan="2" valign="middle">2-3 sor, 1. oszlop</td> <td>2. sor, 2. oszlop</td> <td>2. sor, 3. oszlop</td> </tr> <tr> <td>3. sor, 2. oszlop</td> <td>3. sor, 3. oszlop</td> </tr> </table> Leírónyelvek: HTML és XHTML

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

Táblázatok egymásba ágyazása <table border="1" cellpadding="5"> <tr> <td valign="top">1</td> <td> <table border="2"> <tr><td>A</td><td>B</td></tr> <tr><td>C</td><td>D</td></tr> </table> </td> </tr> <tr> <td> <table border="5"> <tr><td>E</td><td>F</td></tr> <tr><td>G</td><td>H</td></tr> </table> </td> <td valign="bottom" align="right">2</td> </tr> </table>

Összetett weblap megjelenítése táblaként <table width="100%" height="100%" cellspacing="10" cellpadding="5" border="1"> <tr> <td colspan="3" align="center" bgcolor="black" height="25"> <font color="white"><b>Táblázatokat használó lap</b></font></td> </tr> <tr> <td bgcolor="lightgrey" width="80" valign="top"><b>Feladatok</b><br> <a href="feladat1 2-1.htm">feladat-1</a><br> <a href="feladat2 2-2.htm">feladat-2</a><br> <a href="feladat3 2-3.htm">feladat-3</a><br> </td> <td align="center"> Ez a lap a táblázatok használatát mutatja be.<br> Helyi linkeket tartalmaz baloldalon, külsõ linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején. </td> <td valign="top" width="25%" bgcolor="lightgrey"> <b>Szervezetek</b><br> <a href="http://www.microsoft.com">Microsoft</a><br> <a href="http://mspress.microsoft.com">Microsoft Press</a><br> <a href="http://www.w3.org">W3C</a> </td> </tr> </table>

Összetett weblap megjelenítése táblaként

Keretek – frames csak az oldal változó részét kell frissíteni nehezen követhetők a linkek <body> elem helyett <frameset> keretek megadása oszloponként, vagy soronként, százalékban, pixelben: <frameset cols = ”25%, 70, *”> <frameset rows = ”50%, 50%”> keret-együttes (frameset) belsejében keretek: <frame src=”tartalom.htm” name=”bal”/> keretek-együttesek egymásba is ágyazhatók Leírónyelvek: HTML és XHTML

Keretek alkalmazása <frameset cols="25%,100,*"> <frame src="first.htm" /> <frame src="second.htm" /> <frame src="third.htm" /> </frameset>

Navigálás keretekkel home page: navigate.htm: <html> <head> <title>nav frames</title> </head> <frameset cols="25%,75%" frameborder="1" framespacing="1"> <frame src="navigate.htm" name="gyumolcsok" scrolling="yes" /> <frame src="alma.htm" name="leiras" scrolling="auto" /> </frameset> </html> navigate.htm: <html> <body bgcolor="lightgray"> <h4>Gyümölcsök</h4> <a href="alma.htm" target="leiras">alma</a><br /> <a href="korte.htm" target="leiras">körte</a><br /> <a href="szilva.htm" target="leiras">szilva</a><br /> </body>

Navigálás keretekkel

Keretek – <iframe> ablak az ablakon belül forrásfájl, méretek megadásával <body bgcolor="white"> Ez egy iframe a weblap belsejében:<br> <iframe src="first.htm" width="200" height="100" scrolling="yes"> </body> Leírónyelvek: HTML és XHTML

Keretek – <noframes> arra az esetre ha a böngésző nem tudná a kereteket kezelni a <frameset> belsejébe kerül <html> <head> <title>nav frames</title> </head> <frameset cols="25%,75%" frameborder="1" framespacing="1"> <frame src="navigate.htm" name="gyumolcsok" scrolling="yes" /> <frame src="alma.htm" name="leiras" scrolling="auto" /> <noframes> <h4>Gyümölcsök</h4> <a href="alma.htm" target="leiras">alma</a><br /> <a href="korte.htm" target="leiras">körte</a><br /> <a href="szilva.htm" target="leiras">szilva</a><br /> </noframes> </frameset> </html> Leírónyelvek: HTML és XHTML

Megjegyzések Olyan szövegrész, amit a böngésző figyelmen kívül hagy Kezdés: "<!--", zárás: "-->", közte nem lehet "--" vagy ">" Megjegyzés bárhol lehet és több sorból is állhat <html> <!-- Ez itt egy olyan megjegyzés a head tag előtt, amely több sorból áll. --> <head> <title>comments</title> </head> <body> <!-- egysoros megjegyzést is elhelyezhetünk --> Ez a szöveg ténylegesen megjelenik a böngészőben. </body> </html> Leírónyelvek: HTML és XHTML

Speciális karakterek & és ; jelek közé írva "<" jel: < ">" jel: > non-breaking space:   copyright: © magyar ékezetes betűk: 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”) * Színek megadása korszerűbb style sheet-ek segítségével Leírónyelvek: HTML és XHTML

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

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

HTML/XHTML űrlap <form action=".." method=".."> űrlap törzse: beviteli mezők </form> 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

Űrlap elemek beviteli mezők <input> 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ő <textarea> legördülő lista <select> Űrlapok

Egysoros szövegmező <input type="text" name=".." size=".." value=".." maxlength=".."> value: alapértelmezett szöveg size: megjelenő karakterek száma maxlength: begépelhető karakterek száma <li><label>egysoros szövegmező:</label> <input type="text" name="Name" size="20" value="Your Name" maxlength="25"></li> Űrlapok

Egysoros rejtett szövegmező <input type="password" name=".." size=".." value=".." maxlength=".."> ugyanaz, mint az egysoros szövegmező de a bevitt szöveg helyett * vagy • jelenik meg a form nem végez titkosítást <li><label>rejtett szövegmező:</label> <input type="password" name="Password" size="10" value="123456" maxlength="25"></li> Űrlapok

Többsoros szövegmezők <textarea name=”..” cols=".." rows="..">többsoros szöveg</textarea> cols: a szövegmező szélessége karakterben kifejezve rows: szövegmező magassága sorokban kifejezve <textarea name="leiras" cols="15" rows="3">Ide többsoros szöveget lehet írni</textarea> Űrlapok

Ű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

Rádiógomb csoport <input type=”radio” name=”..” value=”..” checked=".."/> <form action =”..” method=”..”><label>Életkor:</label> <p> <input type = "radio" name = "age" value = "under30" checked = "checked"> 0-29 <input type = "radio" name = "age" value = "30-49"> 30-49 <input type = "radio" name = "age" value = "over50"> 50 fölött </p> </form> Űrlapok

Jelölőmező (checkbox) <input type=”checkbox” name=”..” value=”..” checked=".."/> <form action = ""><label>Bevásárló lista</label> <p> <input type = "checkbox" name ="vasarlas" value = "tej" checked = "checked"> <label>Tej </label> <input type = "checkbox" name ="vasarlas" value = "kenyer"> <label>Kenyér </label> <input type = "checkbox" name = "vasarlas" value= "tojas"> <label>Tojás </label> </p> </form> Űrlapok

Legördülő lista (menü) <select name=”..” size=".." multiple=".."> size: egyszerre hány menüelem legyen látható multiple="multiple": több menüelemet is ki lehet választani <select name=”lista”> <option value=”l1”>lista_elem_1</option> <option value=”l2”>lista_elem_2</option> </select> Űrlapok

Űrlap elem – fájlnév megadása <input type=”file” name=”..” value=”..” /> <form action = "" ><label>Fájl neve:</label> <p> <input type="file" name = "file_name"> </p> </form> Űrlapok

Űrlap elem - nyomógombok submit gomb <input type=”submit” name=”submit_gomb” value="Elküld"/> reset gomb <input type=”reset” name=”reset_gomb” value="Töröl" /> gomb képpel <input type=”image” src=”sample.gif” name=”kepes_gomb” border=”0” width=”50” height =”15” /> általános célú gomb <input type=”button” name=” gomb” value="Felirat" onclick=".." /> Űrlapok

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ő, dokumentumszintű és belső stíluslapok a CSS szabályai formázás CSS alapján a CSS hierarchiája 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>, <b> HTML font tag-gel is megváltoztathatjuk a megjelenést: pl. <font size="+3" color="#FF0033">szöveg</font> 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

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

A stíluslapok szintjei belső egyetlen tag tartalmára vonatkozik a nyitó tag-ben lehet elhelyezni a style attribútum értékeként dokumentum szintű a dokumentum teljes törzsére vonatkozik a fejben a <style> tag tartalmaként jelenhetnek meg 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

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. <h2 style="font-size:50; color:red;">Címsor 2</h2> 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

Dokumentum szintű stíluslap a dokumentum teljes törzsére vonatkozik a <head>-ben a <style> tag tartalmaként jelenhetnek meg <style> tag <type> attribútumát "text/css"-re kell állítani a stílus szabályokat HTML megjegyzésbe <!-- --> kell tenni <style type = „text/css”> <!-- szabály_lista --> </style> Pl.: <head> <title>Document level CSS</title> <style type="text/css"> <!-- /* CSS megjegyzés */ h2 { font-size: 10px; color: red; } --> </style> </head> Stílusok, stíluslapok

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 <link> tag-gel hivatkozhatunk rájuk: <head>          <title>document title</title>       <link rel="stylesheet" type="text/css" href="example.css">  </head> Stílusok, stíluslapok

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

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

Stíluslap formátumok 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;” … tulajdonság érték tulajdonság érték <h2 style="font-size:50; color:red;">Címsor 2</h2> Stílusok, stíluslapok

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

CSS szelektorok elem szelektor csoportosított 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

valamely html tag (pl. <h2>) tulajdonságait szabályozhatjuk elem szelektor valamely html tag (pl. <h2>) 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

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

osztá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: <p class=”vastag”> <h1 class=”vastag”> <h2 class=”normal”> 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

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 <p id=”egyedi_1”> 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

Szelektorok hierarchiája ID szelektor osztályszelektor származtatott szelektor elemi és csoportosított szelektorok Stílusok, stíluslapok

A <span> és a <div> tag ha egy sorban, vagy egy bekezdésen belül 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 blokkszintű (pl. bekezdést, h1, h2, stb.) magába foglaló nagyobb egységet szeretnénk egyszerre formázni <div id=”egyedi_stilus”> <p>Első bekezdés.</p> <p>Második bekezdés.</p> </div> Stílusok, stíluslapok

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

Betűtulajdonságok font típus (font-family) font méret (font-size) 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

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

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) h1 { font-size: 20pt; } h1 { font-size: 150%; } Stílusok, stíluslapok

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

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

több fonttulajdonság megadása egyszerre 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 p {font: style weight size font-family } p { font: 1em sans-serif; } Stílusok, stíluslapok

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

Listatulajdonsá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

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

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

szöveg vízszintes igazítása 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 text-align: left text-align: right text-align: center text-align: justify Stílusok, stíluslapok

sormagasság 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%) p.dupla { line-height: 2; } p.2m { line-height: 2em; } p.ketszeres { line-height: 200%; } Stílusok, stíluslapok

képek körülfolyatása float egy kép vagy szöveg hogyan helyezkedjen el egy másik elemhez képest lehetséges értékek: left right none pl. <img src="c210.jpg" 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, blue, hatjegyű hexadecimális számmal, pl. #FF0000, #00FF00, #0000FF rgb formátumban pl. rgb(255, 0, 0) Stílusok, stíluslapok

Színek (folytatás) A színek megadása problémás Megadásuk 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

Há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 body {  background-image: url(stars.gif); background-repeat: repeat-x }  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

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

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

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

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

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

JavaScript a weboldalon <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="script.js"> JavaScript

JavaScript HTML fájlban beillesztése a <script> tag segítségével: <script language=JavaScript> <!-- …….. JavaScript kód….. --> </script> 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

JavaScript XHTML fájlban beillesztése a <script> tag segítségével: <script language=javascript type="text/javascript"> <![CDATA[ …….. JavaScript kód….. ]]> </script> 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: /*<![CDATA[ */ és /* ]]>*/ alkalmazása JavaScript

Á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

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 = 3.14159265, gyumolcs = "alma", stop_flag = true; JavaScript

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

Típuskonverzió automatikus implicit típuskonverzió 1977 + " 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

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

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 "<br />" karakterláncot kell a kimenetre küldeni JavaScript

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 "<br />" -t, hanem tényleges sortörést kell alkalmazni alert("Figyelmeztetés"); alert("The sum is:" + sum + "\n"); JavaScript

A confirm metódus confirm("Valóban?"); 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?"); var question = confirm("Do you want to continue this download?"); JavaScript

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"); name = prompt("What is your name?", ""); JavaScript

Vezérlőszerkezetek kontroll kifejezés összehasonlító operátorok 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

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

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

Objektumok létrehozása és módosítása 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

Tömbök elemek listája számértékkel indexelve első elem indexe: 0 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

Fü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 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 <head> részében deklarálni kell JavaScript

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

Globális és lokális változók Globális változók függvényen kívül var kulcsszóval deklarált változók 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 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

Példa – HEAD rész <html> <head> <script language=”javascript” type="text/javascript"> <!-- function openwin(url) { awindow = window.open(url, 'new_window', 'toolbar=no,width=350,height=400,status=no,scrollbars=yes,resizable=no,menubar=no'); } --> </script> </head> JavaScript

Példa – BODY rész <body> <ul> <li><a href="javascript:openwin('http://www.gdf.hu');">gdf</a></li> <li><a href="javascript: void();" onclick="openwin('http://www.gdf.hu');">gdf</a></li> <li><a href="#" onclick="openwin('http://www.gdf.hu');">gdf</a></li> <li><input type="button" value="gdf" onclick="openwin('http://www.gdf.hu');"/></li> </ul> </body> </html> 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 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

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

Objektum hierarchia Dokumentum Objektum Modell

Fontosabb objektumok Navigator Window Document Date String Array Math Dokumentum Objektum Modell

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

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

Document objektum Fontosabb metódusok Fontosabb tulajdonságok 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

A Date objektum fontosabb metódusai toLocaleString A string of the Date information getDate The day of the month getMonth The month of the year, as a number in the range of 0 to 11 getDay The day of the week, as a number in the range of 0 to 6 getFullYear The year getTime The number of milliseconds since January 1, 1970 getHours The number of the hour, as a number in the range of 0 to 23 getMinutes The number of the minute, as a number in the range of 0 to 59 getSeconds The 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

A String objektum fontosabb metódusai és tulajdonsága Method Parameters Result charAt A number Returns the character in the String object that is at the specified position indexOf One-character string Returns the position in the String object of the parameter substring Two numbers Returns the substring of the String object from the first parameter position to the second toLowerCase None Converts any uppercase letters in the string to lowercase toUpperCase Converts any lowercase letters in the string to uppercase Property length The number of characters in the string Dokumentum Objektum Modell

Az Array objektum Fontosabb metódusok Fontosabb tulajdonságok 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

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

DOM példa <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TBODY> </TABLE> Dokumentum Objektum Modell

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

Elemek elérése JavaSrciptből űrlaptömb segítségével egy egyszerű űrlap esetén: <form action = ""> <input type = "button" name = "pushMe"> </form> hivatkozás az input elemre: document.forms[0].element[0] Dokumentum Objektum Modell

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.: <form name = "myForm" action = ""> <input type = "button" name = "pushMe"> </form> hivatkozás az input elemre: document.myForm.pushMe Dokumentum Objektum Modell

Elemek elérése JavaSrciptből az id attribútum segítségével egy egyszerű űrlap esetén: <form action = ""> <input type = "button" id = "turnItOn"> </form> a getElementById metódust használva: document.getElementById("turnItOn") Dokumentum Objektum Modell

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

Bevezetés az XML nyelvbe 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

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

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

Az XML szintaxisa a szintaxis szintjei jól-formált dokumentum 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

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ó <![CDATA ….. ]]>

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

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

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 <!DOCTYPE root-element [ declarations ]> Külső DTD <!DOCTYPE root-name SYSTEM “file-name”> XML

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

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

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

XSD elemek Alapvető elemek: ELEMENT ATTRIBUTE meghatározzák az egyes adatmezők nevét és típusát <xs:element name="Name" type="xs:string" /> ATTRIBUTE az elemek tulajdonságai <xs:attribute name="OrderDiscount" type="xs:number" /> XML

XSD példa <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.w3schools.com" xmlns="http://www.w3schools.com" elementFormDefault="qualified"> <xs:element name="note">   <xs:complexType>     <xs:sequence>       <xs:element name="to" type="xs:string"/>       <xs:element name="from" type="xs:string"/>       <xs:element name="heading" type="xs:string"/>       <xs:element name="body" type="xs:string"/>     </xs:sequence>   </xs:complexType> </xs:element> </xs:schema> XML

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