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

Dr. Pál László, Sapientia EMTE, Csíkszereda

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

2014-2015 tavasz

Layouts, Javascript

Weboldalak elrendezése (layout)

Két-oszlopos elrendezés

Két-oszlopos elrendezés

Három-oszlopos elrendezés

Három-oszlopos elrendezés

Három-oszlopos elrendezés


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

Responsive tervezés

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

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)

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

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:

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

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

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




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




A stílus az összes típuson lefut, ami legalább 500px széles @media all and (min-width:500px) { … }




A stílus lapokat @import utasítás segítségével is meg @import url(color.css) screen and (width: 500px);hívhatjuk

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-, maxelőtagokat, így lehetőségünk nyílik intervallumokat megadni Péld @media 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

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

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

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.

Viewport

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

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ő metaval 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" />

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

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

A JavaScript használata


JavaScript beágyazása HTML oldalba <script type="text/javascript"> …




1.Példa:

This is a paragraph.

<script type="text/javascript"> document.getElementById("demo").innerHTML=Date();

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

A JavaScript használata


Külső script-állomány beszúrása:

<script type="text/javascript" src="xxx.js">
több HTML oldal is használhatja
Átláthatóbb kód: HTML illetve JavaScript szétválasztása


Példa:

<script type="text/javascript" src="uzenet.js">

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 elemben ajánlott

JavaScript példa

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

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)

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.

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;

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 létrehozták, de az értékét törölték

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";

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]);

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 + "
");




setDate(value), setHours(value), setYear(value), stb. 

Példa: var d = new Date(); d.setDate(15); document.write(d);

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

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"));

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()

Operátorok


Aritmetika operátorok (y=5)

Operátorok


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

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

Operátorok


Feltételes operátor: Szintaxis: valtozo=(feltetel)?ertek1:ertek2




1.Példa: y=-1; x=(y<0)? 5: 10;




2.Példa: var

browser=(navigator.appName.indexOf("Microsoft")!=-1)? "IE" : "Non IE";

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

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;

Függvények


Példa:

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("
" + eval("2+2"));//4 document.write("
" + eval(x+17));//27




isNaN(value): eldönti, hogy a megadott paraméter valóban száma Példa: document.write(isNaN(0)+ "
");//false document.write(isNaN("Hello")+ "
");//true document.write(isNaN("2005/12/12")+ "
");//true

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 45 66"));//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

Feltételes utasítás - if


Szintaxis: if (feltétel){ utasítás }




Példa:

Ciklusok


FOR ciklus for(var=kezdıérték;var<=végsıérték;var=var+nov){ utasítások }




WHILE ciklus while (feltétel){ utasítások }




DO..WHILE do{ utasítások } while (feltétel)

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

A HTML dokumentum-fa


DOM csomópontok típusai:
szülő

(parent), gyerek (child), testvér (sibling), előd(ancestor), utód (descendent)

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

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 xnek
x.removeChild(node) - x-nek törli egy gyerekét

Csomópontok elérése


A getElementById() metódus: visszaadja a megadott azonosítója elemet Szintaxis: node.getElementById("id");

Példa: document.getElementById("intro");

Csomópontok elérése


A getElementsByTagName() metódus: a megadott címkéjű elemeket adja vissza Szintaxis: node.getElementsByTagName("tagname");

Példa: document.getElementsByTagName("p");

bekezdések listája

a

Csomópontok elérése


Példa: a lekért lista feldolgozása

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"> x=document.body; alert(x.innerHTML);

Csomópontok elérése


Példa: bekezdés tartalmának a kiíratása

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.

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

DOM objektumok

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()

A window objektum - 1.Példa


Új ablak megnyitása adott web címmel

A window objektum - 2.Példa


Új ablak megnyitása adott mérettel és fókuszban

A window objektum - 3.Példa


Figyelmeztető ablak megjelenítése

A window objektum - 4.Példa


Adatbekérő ablak megjelenítése

A window objektum - 4.Példa


Adatbekérő ablak megjelenítése

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

A document objektum





a teljes HTML dokumentumhoz való hozzáférést teszi lehetővé kollekciók:
anchors[],




tulajdonságok:
body,




forms[], images[], links[]

cookie, domain, lastModified, referrer, title, URL

Metódusok
getElementById(),

getElementsByName(), getElementsByTagName(), open(), close(), write(), writeln()

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:

A document objektum - 2.Példa


Elem tulajdonságának a megváltoztatása a style segítségével:

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.

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

JavaScript események


Példa az onFocus, onBlur eseményre:

JavaScript események


Példa az onFocus, onBlur eseményre:

JavaScript események


Példa az onMouseOver eseményre:

JavaScript események


Példa az onMouseOver eseményre: