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 Távoktatás tagozatnak Dr. Kopácsi Sándor főiskolai tanár

2 Tantárgy- és tananyagfelelős
Név: Dr. Kopácsi Sándor Telefon: /1260 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ó

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: Robert W. Sebesta: A World Wide Web programozása, Panem Kiadó, 2005 Könyv Hallgatói oktatócsomag Tantárgyi útmutató

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

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

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

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

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

11 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

12 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

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

14 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

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

16 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

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

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

19 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

20 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

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

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

23 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

24 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

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

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

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

28 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=" </a> cím megadása <a az előadónak</a>

29 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

30 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

31 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

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

33 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

34 Több sort vagy oszlopot igénybevevő cellák
ha egy cím- vagy adatcella több cellát vesz igénybe vízszintesen: colspan attribútum függölegesen: rowspan attribútum <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

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

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

37 Ö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=" <a href=" Press</a><br> <a href=" </td> </tr> </table>

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

39 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

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

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

42 Navigálás keretekkel

43 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

44 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

45 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

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

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

48 A webprogramozás alapjai
Űrlapok

49 Ű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

50 Hogyan működik egy web űrlap?
A felhasználó megnyitja az űrlapot tartalmazó weblapot. A felhasználó begépeli a nevét és 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

51 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

52 Ű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

53 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

54 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

55 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

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

57 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"> <input type = "radio" name = "age" value = "30-49"> <input type = "radio" name = "age" value = "over50"> 50 fölött </p> </form> Űrlapok

58 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

59 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

60 Ű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

61 Ű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

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

63 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

64 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

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

66 A 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

67 Belső stíluslap egyetlen tag tartalmára vonatkozik
magában a tag-ben kell elhelyezni a style attribútum értékeként: style = ”tulajdonság1: érték1; tulajdonság2: érték2; …” pl. <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

68 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

69 Külső stíluslap több dokumentum törzsére vonatkozhat
tárolásuk külön szöveges (text/css) állományban formátuma megegyezik a dokumentumszintű stíluslapokban használt szabály lista formátumával (example.css): h2 { font-size: 10px; color: red;} blockquote {          margin-left: 2cm;      color: #00ff00} a head-ből a <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

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

71 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 dokumentumszintű stíluslap (style tag) belső stíluslap (style attribútum) !important-nak jelölt stílusdefiníció Stílusok, stíluslapok

72 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

73 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

74 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

75 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

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

77 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

78 ID szelektor az ID szelektor segítségével egyedileg azonosított tag tulajdonságát szabályozhatjuk az egyedi azonosítás a dokumentum törzsében a tag id attribútumával történik <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

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

80 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

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

82 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

83 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

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

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

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

87 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

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

89 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

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

91 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

92 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

93 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

94 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

95 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

96 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

97 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

98 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

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

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

101 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

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

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

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

105 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

106 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

107 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

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

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

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

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

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

113 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

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

115 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

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

117 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

118 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

119 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

120 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

121 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

122 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

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

124 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

125 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

126 Példa – BODY rész <body>
<ul> <li><a href="javascript:openwin(' <li><a href="javascript: void();" onclick="openwin(' <li><a href="#" onclick="openwin(' <li><input type="button" value="gdf" onclick="openwin(' </ul> </body> </html> JavaScript

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

128 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

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

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

131 Objektum hierarchia Dokumentum Objektum Modell

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

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

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

135 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

136 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

137 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

138 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

139 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

140 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

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

142 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

143 Elemek elérése JavaSrciptből a name attribútum segítségével
a body elem kivételével minden elemnek kell, hogy legyen name attribútuma Pl.: <form name = "myForm" action = ""> <input type = "button" name = "pushMe"> </form> hivatkozás az input elemre: document.myForm.pushMe Dokumentum Objektum Modell

144 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

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

146 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

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

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

149 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

150 XML dokumentum struktúra
Segéd fájlok séma fájl DTD, XML séma, stb. stíluslap CSS XSLT XML fájl felbontása dokumentum egyedek egyedek szintaxisa karakteres adatszekció <![CDATA ….. ]]>

151 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

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

153 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

154 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

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

156 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

157 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

158 XSD példa <?xml version="1.0"?> <xs:schema xmlns:xs=" targetNamespace=" xmlns=" 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

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