WEB TECHNOLÓGIÁK 4.ELŐADÁS

Átírás

1 Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 4.ELŐADÁS tavasz Layouts, Javascript

2 Weboldalak elrendezése (layout)

3 Két-oszlopos elrendezés

4 Két-oszlopos elrendezés

5 Három-oszlopos elrendezés

6 Három-oszlopos elrendezés

7 Három-oszlopos elrendezés Három-oszlopos változó szélességű elrendezés (Three-column liquid/fluid)

8 Responsive tervezés

9 Mi az a responsive tervezés? Lényege, hogy a tervezett oldal alkalmazkodik a felhasználó kijelző méretéhez, mindig az adott eszköz kijelző méreteihez igazodva Ethan Marcotte alkotott meg 2011-ben RWD (Responsive Web Design): alkalmazkodó tervezési mód Az alkalmazkodó tervezés népszerűségét a mobil eszközök fejlesztésének köszönheti

10 Az RWD összetevői 3 összetevőre bontható pedig a folyékony rácsszerkezet (fluid grid) a média lekérdezések (Media Queries) a folyékony média (fluid media)

11 A folyékony rácsszerkezet A folyékony oldaltervek fix értékek (pixel) helyett százalékot használ a méretek beállításához képlet: aktuális elem pixelben / befoglaló elem pixelben) x 100 = elem szélessége % A responsive tervezés során százalékkal kalkulálva egy kicsit nehezebb elérni ugyan azokat a méreteket, figyelembe véve, hogy itt már arányokkal dolgozunk, ami az adott kijelző függvénye

12 Média lekérdezések A Media Query nem más, mint egy megfelelő helyzetre vonatkozó formázás Tegyük fel, hogy megszeretnénk változtatni a body hátterét 768px-nél kisebb kijelző méreten csupán erre a kódra van szükségünk:

13 Folyékony média Folyékony médián a képek, videók responsive-an történő kezelését értjük egy nagy felbontású monitoron és egy kisebb alap kijelzővel ellátott telefonon nem biztos, hogy szerencsés dolog ugyan akkora méretű képet felh ne használjunk nagyobb képeket egy kisebb méretű befoglaló elemben, mert növeli az oldal letöltés idejét

14 Média lekérdezések részletesebben A HTML fájlunkhoz hozzá csatolt Media Query stíluslap, médiától és kontextustól függően, csak akkor fut le ha teljesül az előre megadott feltétel Így elérhetjük, hogy a különböző típusú eszközöket, mint a nyomtatók, a kijelzővel rendelkező készülékek, mind egyedi stíluslappal rendelkezzenek. Lehetőségünk van egy adott típus esetében megadni formázásokat, felbontástól, tájolástól, pixel sűrűségtől függően is

15 Média lekérdezések megadása A média lekérdezések deklarálása során egyetlen egy médiát kell megadnunk, valamint nulla, vagy több feltételt az adott típusra vonatkozóan. Kétféle módon használhatjuk őket, hivatkozhatunk rájuk HTML-ből és megadhatjuk őket a CSS fájlban Példa: hivatkozás HTML-ből A média lekérdezés használata CSS fájlban

16 Média lekérdezések - Feltételek Az alábbi stílus csak a screen típusú, legfeljebb 500px széles kijelzőkön fut le <link href="example.css" rel="stylesheet" media="screen and (max-width:500px)" /> A stílus az összes típuson lefut, ami legalább 500px all and (min-width:500px) { } A stílus utasítás segítségével is url(color.css) screen and (width: 500px);hívhatjuk

17 Média tulajdonságok Média tulajdonságoknak nevezzük a média típusok után következő, az azokra vonatkozó értékeket Ilyen például a szélesség, magasság A legtöbb tulajdonság képes kezelni a min-, max- előtagokat, így lehetőségünk nyílik intervallumokat megadni screen and (min-width: 400px) and (maxwidth: 700px) { } A width tulajdonsággal megadhatjuk az aktuális média viewport (megjelenítési felület) szélességét

18 Média tulajdonságok A device-width/device-height tulajdonságokkal a kijelzők fizikai méretét adhatjuk meg. Erre a tulajdonságra azért van szükség, mert a pixel sűrűség növekedésével a szélesség/magasság már nem egyezik meg a tényleges, fizikai értelemben vett szélességgel/magassággal

19 Töréspontok Töréspontoknak (breakpoints) nevezzük azokat a szélesség értékeket, melyeken szeretnénk, ha más stílust kapna az aktuálisan formázott oldal Ezek az értékek általában egy telefon, tablet és monitor méretet takarnak Többnyire 3 értékkel lefedhetjük a legtöbb kijelzővel rendelkező eszközt A Bootstrap 3-as verziójában ezek az értékek a 768px, 992px és 1200px

20 Viewport A viewport nem más mint a böngésző azon területe, ahol a weboldalak megjelennek Ha mobil eszközön akarunk megnézni egy nagy méretű weboldalt, akkor csak a beállított viewport értéknek megfelelő részt fogunk látni az oldalból (ami alapesetben a kijelző mérete lenne), a többi esetlegesen túl csordul a megjelenítési területen.

21 Viewport

22 Viewport A mobil böngészők a jobb használat érdekében felül írják a kezdeti viewport-ot (vagyis a kijelző fizikai méretét), még pedig jóval nagyobbra Ezen a szélességen a legtöbb mai oldal bőven Ezen a szélességen a legtöbb mai oldal bőven elfér, igaz az így megjelenített oldal nem a 100%- os méretében jelenik meg, hanem kicsinyített méretben, amit aztán nagyíthatunk

23 Viewport meta elem és tulajdonságai Eszköz szélesség width értelemszerűen a viewport terület szélességét szabályozhatjuk. Például, ha a telefonra készített oldalunk szélessége 320px, akkor a következő meta- val igazíthatjuk a nézetablak területét az oldalunkhoz <meta name="viewport" content="width=320" /> Ha több felbontású eszközre készítettük az oldalunkat, akkor választhatjuk a dinamikus érték megadást, az eszköz fizikai kijelzőmérete alapján <meta name="viewport" content="width=devicewidth" />

24 Mi a JavaScript? Egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat HTML lapokba lehet beágyazni, a lappal együtt töltődnek le, majd a böngésző értelmezi és futtatja azokat Nem sok köze van a Java programozási nyelvhez. Sokkal kisebb, egyszerűbb, korlátozottabb működésű is annál. Értelmező (interpreter) nyelv - a kód értelmezése dinamikusan történik A böngészők nagyrésze ismeri (Internet Explorer, Firefox, Opera, stb.)

25 A JavaScript lehetőségei A HTML oldalak készítői számára egy programozási eszközt biztosít (használata egyszerű) Módosíthatja a HTML tartalmát, kinézetét (a HTML DOM objektumaihoz való hozzáférés által) Eseményekre tud reagálni (pld. oldal betöltése, kattintás egy elemre, stb.) A bevitt adat helyességének ellenőrzésére ad lehetőséget (mielőtt elküldenénk a szerverre) Megvizsgálhatjuk a böngésző típusát, és ennek függvényében más-más, böngésző specifikus tartalmat tölthetünk be Sütiket (cookies) hozhatunk létre a kliens gépen való információ tárolás érdekében

26 A JavaScript használata JavaScript beágyazása HTML oldalba <script type="text/javascript"> </script> 1.Példa: <p id="demo">this is a paragraph.</p> <script type="text/javascript"> document.getelementbyid("demo").innerhtml=date(); </script>

27 A JavaScript használata 2.Példa: megjegyzésbe tesszük, így nem jelenik meg, ha a böngésző nem támogatja <script type="text/javascript"> <!---- document.getelementbyid("demo").innerhtml=date(); ----> </script>

28 A JavaScript használata Külső script-állomány beszúrása: <head> <script type="text/javascript" src="xxx.js"></script> </head> több HTML oldal is használhatja Átláthatóbb kód: HTML illetve JavaScript szétválasztása Példa: <head> <script type="text/javascript" </head> <body> src="uzenet.js"></script> <input type="button" onclick="msg()" value="uzenet" /> </body>

29 A JavaScript használata Bárhol elhelyezhető a HTML dokumentumban. A <script> tag-ekből is bármennyi lehet A script kiértékelése az oldal betöltése közben történik Függvények, globális változók deklarálása a head Függvények, globális változók deklarálása a head elemben ajánlott

30 JavaScript példa

31 A JavaScript elemei - Utasítások Utasítás: parancs a böngésző felé A pontosvessző használata az utasítások végén nem kötelező, de mégis ajánlatos a használata. JavaScript blokk: utasítások a { és } jelek között. Többnyire függvényekben és feltételes utasításokban használjuk Megjegyzés: egysoros: a // jellel kezdődik többsoros: a /* és a */ jelek között kell megadni

32 Változók és adattípusok JavaScript-ben a változókat a var kulcsszó segítségével kell deklarálni Példa: var x; A változó típusát nem kell megadni. A nyelv nagyon flexibilis. A szükséges konvertálások automatikusan történnek. Példa: x = 10; A JavaScript megkülönbözteti a kis és nagybetűket (case-sensitive)

33 Változók és adattípusok Változók típusai: lokális: általában a függvényeken belül deklarált változók globális: a függvényeken kívül létrehozott változók globálisak, az aktuális dokumentumon belül mindenhonnan elérhetők. Az oldal bezárásával megsemmisülnek. Ha egy deklarálatlan változónak értéket adunk, akkor az globális lesz.

34 Adattípusok String: 'aposztróf' vagy "idézőjel" pár közé írjuk var a = "I'm sorry."; var b = 'Idézıjel: (")'; Számok, melyek lehetnek egészek vagy valós számok Logikai értékek, true vagy false var igaz1 = true; var hamis1 = false; var igaz2 = 7>2;

35 Speciális típusok Undefined: akkor tér vissza ezzel a string típusú, undefined értékű szöveggel, ha az adott változó már létezik, de nincs megadva az értéke Null: null értéke akkor lehet egy változónak, ha Null: null értéke akkor lehet egy változónak, ha létrehozták, de az értékét törölték

36 Objektumok használata Általánosan egy objektum jellemzőjéhez a következőképpen férhetünk hozzá: objektumnév.tulajdonságnév Példa: Szemely.nev = "János"; Szemely.kor = 23; Új objektumok létrehozása: var objektumnév= new Object(); Egy tulajdonságot úgy definiálhatunk, ha egyszerűen értéket rendelünk hozzá Példa: var auto = new Object(); auto.marka = "Opel"; auto.szin = "piros";

37 Tömbök használata Egy olyan objektum, amely egyszerre több elemet tud tárolni 1.Példa: var autok=new Array(); autok[0]="saab"; autok[1]="volvo"; autok[2]="bmw"; 2.Példa: var autok=new Array("Saab","Volvo","BMW"); 3.Példa: var autok=["saab","volvo","bmw"]; Tömb elemének elérése: document.write(autok[0]);

38 Dátumok használata Létrehozás: Date(), Date(dateString), Date(year, month, day) Metódusok: getdate(), getday(), gethours(), stb. Példa: var curdate = new Date(); var mday = curdate.getdate(); document.write(mday + "<BR>"); setdate(value), sethours(value), setyear(value), stb. Példa: var d = new Date(); d.setdate(15); document.write(d);

39 A Math objektum Matematikai műveletek elvégzésére használható Szintaxis: var x = Math.PI; var y = Math.sqrt(16); Egyéb metódusok: abs(x) - abszolút érték exp(x) exponenciális függvény floor(x) - lefelé kerekít a legközelebbi egészre max(x,y,z,...,n), min(x,y,z,...,n) - maximum, minimum random() - véletlen szám generálása 0 és 1 között

40 A String objektum Stringek manipulálására használható Szintaxis: var txt = new String(string); Metódusok: indexof(str): az str első előfordulásának pozícióját adja vissza, különben -1-et Példa: var str="hello world!"; document.write(str.indexof("d"));

41 A String objektum Metódusok: split(): felbontja a stringet több stringre Példa: var str="how are you doing today?"; var x = str.split(" document.write(x[0]);"); Más metósusok: substr(), replace(), tolowercase(), touppercase()

42 Operátorok Aritmetika operátorok (y=5)

43 Operátorok Hozzárendelő operátorok(x=10, y=5)

44 Operátorok Logikai operátorok: && (logikai és) (logikai vagy) == (egyenlő),!= (nem egyenlő), === (teljesen egyenlő), <, <=, >, >= Példa: var x = 5 x===5 - igaz x==='5' - hamis

45 Operátorok Feltételes operátor: Szintaxis: 1.Példa: y=-1; valtozo=(feltetel)?ertek1:ertek2 x=(y<0)? 5: 10; 2.Példa: var browser=(navigator.appname.indexof("microsoft")!=-1)? "IE" : "Non IE";

46 Operátorok String operátor: + (karakterláncok összefűzése) Példa: txt1="what a very"; txt2="nice day"; txt3=txt1+" "+txt2; Stringek és számok összeadása: az eredmény mindig string lesz Példa: x=5+5; //10 x="5"+"5"; //55 x=5+"5"; //55

47 Függvények Szintaxis: function függvénynév(valtozo1,valtozo2,...) { } utasítások Meghívhatóak: a HTML bármely pontjáról, az esemény bekövetkezésekor Deklarálás: a head elemben ajánlott A függvények visszaadhatnak egy értéket return utasítással, az alábbi formában: returnérték; vagy return kifejezés;

48 Függvények Példa:

49 Függvények Hasznos függvények: eval(string): kiértékeli vagy végrehajtja az argumentumban megadott kifejezést Példa: eval("x=10;y=20;document.write(x*y)");//200 document.write("<br />" + eval("2+2"));//4 document.write("<br />" + eval(x+17));//27 isnan(value): eldönti, hogy a megadott paraméter valóban száma Példa: document.write(isnan(0)+ "<br />");//false document.write(isnan("hello")+ "<br />");//true document.write(isnan("2005/12/12")+ "<br />");//true

50 Függvények Hasznos függvények: parsefloat(string): a numerikus értéket képviselő objektumból kinyeri a lebegőpontos számot. Csak az első számot adja vissza Példa: document.write(parsefloat("10"));//10 document.write(parsefloat("10.33"));//10.33 document.write(parsefloat(" "));//34 document.write(parsefloat("he was 40"));//NaN parseint(string): a stringből kinyeri az egész számot Példa: var x = parseint("10"); document.write(parseint("10.33"));//10

51 Feltételes utasítás - if Szintaxis: if (feltétel){ utasítás } Példa:

52 Ciklusok FOR ciklus for(var=kezdıérték;var<=végsıérték;var=var+nov){ utasítások } WHILE ciklus while (feltétel){ while (feltétel){ utasítások } DO..WHILE do{ utasítások } while (feltétel)

53 HTML Document Object Model (DOM) A HTML Dokumentum Objektum Modell (HTML DOM) lehetőséget ad a dokumentum elemeihez való hozzáférésre és ezek módosítására A DOM a HTML dokumentumnak egy fa-szerkezetet feleltet meg. Csomópont típusok: dokumentum csomópont - a teljes dokumentum elem csomópont - minden HTML elem (tag) szöveg csomópont - az egyes HTML elemek törzse attribútum csomópont - a HTML attribútumok megjegyzés csomópont - HTML megjegyzések DOM objektum modell részei: alap DOM, XML DOM, HTML DOM

54 A HTML dokumentum-fa DOM csomópontok típusai: szülő (parent), gyerek (child), testvér (sibling), előd(ancestor), utód (descendent)

55 DOM tulajdonságok és metódusok Néhány tulajdonság (x egy csomópont): x.innerhtml - az x tartalmának az elérését, módosítását teszi lehetővé x.nodename - az x neve x.nodevalue - az x értéke x.parentnode - az x szülője x.childnodes - az x gyerekei

56 DOM tulajdonságok és metódusok Néhány metódus (x egy csomópont): x.getelementbyid(id) - visszaadja az elemet az id alapján x.getelementsbytagname(name) - visszaadja az összes elemet a tag alapján x.appendchild(node) - gyerek csomópontot szúr be az x- nek x.removechild(node) - x-nek törli egy gyerekét

57 Csomópontok elérése A getelementbyid() metódus: visszaadja a megadott azonosítója elemet Szintaxis: Példa: node.getelementbyid("id"); document.getelementbyid("intro");

58 Csomópontok elérése A getelementsbytagname() metódus: a megadott címkéjű elemeket adja vissza Szintaxis: Példa: node.getelementsbytagname("tagname"); document.getelementsbytagname("p"); a bekezdések listája

59 Csomópontok elérése Példa: a lekért lista feldolgozása

60 Csomópontok elérése Megjegyzés: document.documentelement - a gyökér csomópontot adja vissza document.body - a body tag direkt elérése Példa: <script type="text/javascript"> </script> x=document.body; alert(x.innerhtml);

61 Csomópontok elérése Példa: bekezdés tartalmának a kiíratása

62 Csomópont tulajdonságok Három fontos tulajdonság: nodename csak olvasható HTML elem esetén, ugyanaz mint a tag név attribútum csomópont esetén, annak nevét jelenti szöveges csomópont esetén mindig a #text szöveget jelenti nodevalue HTML elem estén nincs definiálva szöveges csomópont esetén mindig a szöveget jelenti attribútum csomópont esetén, annak értékét jelenti nodetype: az elem típusát adja vissza. Lehetséges értékei: element, attribute, text.

63 Csomópontok értékének az elérése

64 DOM objektumok

65 A window objektum window: a JavaScript hierarchiában a legfelső szinten található objektum. A böngészőablaknak felel meg. Számos tulajdonsága és metódusa van tulajdonságok: document, history, location; outerheight, outerwidth; screen, self, status metódusok: blur(), focus(); alert(), confirm(), prompt(); open(), close(); settimeout(), cleartimeout(), setinterval(), clearinterval(); scrollby(), scrollto(); moveby(), moveto(), resizeby(), resizeto()

66 A window objektum - 1.Példa Új ablak megnyitása adott web címmel

67 A window objektum - 2.Példa Új ablak megnyitása adott mérettel és fókuszban

68 A window objektum - 3.Példa Figyelmeztető ablak megjelenítése

69 A window objektum - 4.Példa Adatbekérő ablak megjelenítése

70 A window objektum - 4.Példa Adatbekérő ablak megjelenítése

71 A window objektum A window objektum fontosabb objektumai: history: a böngészőablakból meglátogatott URL-ket tartalmazza. Tulajdonság, metódusok: length, back(), forward(), go(). location: információt tartalmaz az aktuális URL-ról. Tulajdonságok: href, protocol, hostname, port. Metódusok: assign(), reload(), replace(). document

72 A document objektum a teljes HTML dokumentumhoz való hozzáférést teszi lehetővé kollekciók: anchors[], forms[], images[], links[] tulajdonságok: body, cookie, domain, lastmodified, referrer, title, URL Metódusok getelementbyid(), getelementsbyname(), getelementsbytagname(), open(), close(), write(), writeln()

73 A document objektum - 1.Példa A body háttérszínének a megváltoztatása: Egy bekezdés tartalmának a megváltoztatása:

74 A document objektum - 2.Példa Elem tulajdonságának a megváltoztatása a style segítségével:

75 JavaScript események Olyan történés, amelyet a JavaScript felismer Dinamikus HTML oldalak létrehozását teszik lehetővé Minden egyes HTML elemhez vannak hozzárendelt események, melyek hatására JavaScript függvényt futtatunk le A HTML tag-ban adjuk meg Pld. <input typte="button" value="ok" onclick="katt();"/>

76 JavaScript események Néhány esemény: onload, onunload: oldal betöltésekor vagy elhagyásakor futnak le. Tipikus használat: böngésző típusának ellenőrzése, sütik tárolása. onclick: tipikusan gombnyomáskor vagy képre való kattintáskor használjuk Űrlap események: onfocus, onblur, onchange onsubmit: űrlap adatainak elküldésekor fut le onmouseover, onmouseout

77 JavaScript események Példa az onfocus, onblur eseményre:

78 JavaScript események Példa az onfocus, onblur eseményre:

79 JavaScript események Példa az onmouseover eseményre:

80 JavaScript események Példa az onmouseover eseményre: