A Web világa 1. A HTML, a CSS és a JavaScript a legnépszerűbb
programozási nyelvek a világon. A Web ezekre épül. A böngészők értelmezik és megjelenítik a HTML dokumentumokat, melyeket a CSS tesz széppé, elegánssá, és a JavaScript-től lesznek mozgalmasak, dinamikusak, és interaktívak.
81/2
B IT M A N
A Web világa 2.
Interfész a JS és a HTML közti kommunikációhoz
Adatok/Elrendezés
Formátum/Kinézet
Dinamizmus/ Interaktivitás
Forrás: Pixels4Kids
81/3
B IT M A N
A Web világa 3.
Népszerű böngészők
81/4 Forrás: Pixels4Kids
Eszközkészlet a JS könnyebb használatához
B IT M A N
Témakörök
JavaScript
AJAX
81/5
jQuery
B IT M A N
JavaScript Objektum-orientált script nyelv, Közvetlenül a HTML kódba helyezhető Programozási lehetőségekkel bővíti a statikus HTML-t
Lehetőségek:
– – – –
Interaktivitás Űrlapok adatellenőrzése, feldolgozása Sok olyan Csili-vili megoldás, ami valamire jó Sok olyan látványos Csili-vili megoldás, ami semmire sem jó!! Nem Java, de kicsit azért hasonlít!
81/6
B IT M A N
JavaScript a weboldalon JS_Pld_0.htm Ez egy hagyományos HTML dokumentum. <script language="JavaScript"> document.write("Ez itt JavaScript!") Ismét HTML.
81/7
www.bitman.hu
B IT M A N
JavaScript a weboldalon (2) JS_Pld_2.htm Teszt <script language="JavaScript">
www.bitman.hu
jsc1.js var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+" "); document.writeln(b + a+" "); document.writeln(a-b+" "); document.writeln(a*b+" "); document.writeln(a/b+" "); }
B IT M A N
Adatok, változók Négyféle típus
– Objektum – Számérték (egész, valós) – Szöveg (karaktersorozat) – Logikai érték (true, false) Változó – Var kulcsszó (de elmaradhat!) – Globális vagy lokális hatókör – Var a = "szöveg"; – Var b = 23; – jel = true; (Var nélkül bárhol deklaráljuk, globális!) 81/10
B IT M A N
Változók Forráskód
81/11
Teszt <script type="text/javascript"> var v1 = "Globális változó"; Függvény function Teszt() { var v1 = "Lokális változó"; document.writeln(v1); // lokális v1 document.writeln(this.v1); // globális v1 } Utalás a globális változóra <SCRIPT language="JavaScript"> Teszt(); Függvény hívás IT
< kisebb <= kisebb v. egyenlő > nagyobb >= nagyobb v. egyenlő != nem egyenlő == egyenlő === egyforma típus és érték a=5, b="5" a == b igaz, a === b hamis
B IT M A N
Operátorok (2) Logikai operátorok
– && – || –!
AND OR NOT
Specialitások
– a++; b--; ↔ a növelése 1-el, b csökkentése 1-el – b - = 4; ↔ b = b – 4; – a = b = a+b;
– a = 12, b = 5; c = (a
B IT M A N
Automatikus típuskonvertálás Forráskód
<script type="text/javascript"> var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+" "); document.writeln(b + a+" "); document.writeln(a-b+" "); document.writeln(a*b+" "); document.writeln(a/b+" "); } <script language="JavaScript"> Teszt(); 81/14
B IT M A N
Utasítások Feltételes utasítás – if (feltétel) utasítás; [else if (feltétel) utasítás;] [else utasítás;] – if (a < b) x = a; else x = b; if (a == 2) …
For ciklus – for ([kezdő kifejezés]; [ciklusfeltétel]; [léptető kifejezés]) utasítás; – for (i=1; i<11; i++) document.writeln(i);
Do ciklus
– do utasítás; while (feltétel); – do {document.writeln(a); a++;} while (a<20); While ciklus – while (feltétel) utasítás; – while (a<25) {document.writeln(a); a++;} 81/15
B IT M A N
Ciklus példák 1. fejlécek.htm
www.bitman.hu
<script> for (i = 1; i <= 6; i++) { document.write("Ez itt a H"+ i +" fejléc."); document.write(""); }
81/16
B IT M A N
Ciklus példák 2. számok.htm
www.bitman.hu
<script> var i=0 while (i<=10) { document.write("A szám: " + i); document.write(" "); i=i+1; }
81/17
B IT M A N
Ciklus példák 3. autók.htm
<script> var a; var auto = new Array(); auto[0] = "Saab"; auto[1] = "Volvo"; auto[2] = "BMW"; auto[3] = "Opel"; for (a in auto) { document.write(auto[a] + " "); } 81/18
www.bitman.hu
B IT M A N
Függvények function fgvnév(paraméter1, paraméter2, ....) {
utasítások [return érték;] } function Kiir(a) { document.writeln("Eredmény: "+a+" "); } function napszak(ora) { if (ora<12) return "délelőtt" else if (ora > 12) return "délután" else return "dél"; } 81/19
B IT M A N
Példa – Napszak, függvények Forráskód
<script> function getora(){ now = new Date(); hours = now.getHours(); return hours; } function getnapszak(ora) { if (ora >= 6 && ora < 12) return "délelőtt"; if (ora >= 12 && ora < 19) return "délután"; if (ora >= 19 && ora <23) return "este"; if (ora >= 23 || ora < 6) return "éjjel"; } function kiir(napszak) { document.writeln("Most "+napszak+" van. "); } 81/20
Napszak:
<script> kiir(getnapszak(getora()));
www.bitman.hu
B IT M A N
Dialógus ablakok – Üzenet www.bitman.hu Forráskód
<script type="text/javascript"> function figy() { alert("Én szóltam!")}
81/21
www.bitman.hu
B IT M A N
Dialógus ablakok – Kérdés Forráskód
<script type="text/javascript"> function kerd() { if (confirm("Menjünk?")) { document.write("Megyünk.") } else { document.write("Nem megyünk.") } } 81/22
www.bitman.hu
www.bitman.hu
www.bitman.hu
B IT M A N
Dialógus ablakok – Adatbevitel Forráskód
<script type="text/javascript"> function bedat() { var name=prompt("Hogy hívnak?","Bogyó") if (name!=null && name!=""){ document.write( "Hello " + name + "! Én Bigyó vagyok!")} }
81/23
www.bitman.hu
www.bitman.hu
www.bitman.hu
B IT M A N
Körlapok példa (HTML+CSS+JS) kor.htm <script type ="text/javascript" src="kor.js">
Körlapok példa (HTML+CSS+JS) kor.js function setHot(x){ x.style.backgroundColor="aqua"; alert("Kattintás a(z) "+x.id+" jelű körlapon!"); } function ReLoad() { alert("RESET!"); location.reload(); }
81/26
B IT M A N
81/27
B IT M A N
Körlapok példa
81/28
www.bitman.hu
www.bitman.hu
www.bitman.hu
www.bitman.hu
B IT M A N
Események Tipikus események egy weblapon
– – – – –
egérkattintás egér mozgatása valamely pont fölött űrlapbeviteli mező kiválasztása vagy elhagyása űrlap elküldése vagy alaphelyzetbe állítása weblap vagy kép betöltődése
Eseménykezelők segítségével dinamikus weboldalak
hozhatók létre
81/29
B IT M A N
Gyakran használt eseménykezelők Weboldal betöltésekor, elhagyásakor
– onMouseOver – az egér egy elem fölé kerül – onMouseOut – egér elhagyja az elemet Időzítő események – getHours(), getMinutes(), getSeconds() – setTimeout
81/31
B IT M A N
Példa – Színváltozás egérmozgáskor Forráskód
<script type="text/javascript"> function folott(x) { x.style.color = Math.floor(Math.random()*16777215).toString(16); } function elvisz(x) { x.style.color = Math.floor(Math.random()*16777215).toString(16); }
Húzd az egeret a szöveg fölé, aztán húzd el a szöveg fölül!
Előzmény A hagyományos weboldalak működési módja: A kliens HTTP kérést küld a szervernek egy weberőforrás lekérésére (tipikusan GET vagy POST) A szerver feldolgozza a kérést, és előkészíti a választ A szerver visszaküldi a választ (tipikusan (X)HTML) A kliens oldalon a TELJES oldal frissül (akkor is, ha annak egy részén egyáltalán nem történt változás) Nagy (részben felesleges) adatforgalom, hosszabb várakozási idő Ezt nevezik szinkron működési módnak
81/42
B IT M A N
Előzmény A hagyományos weboldalak működési módja:
HTTP kérés
HTML válasz (Teljes weboldal)
Kliens
81/43
Web szerver
B IT M A N
Igény Az oldalak megjelenítésének gyorsítása Megoldás: Az adatforgalom csökkentése Ha nem a teljes oldalt, csak annak a szükséges részét
töltjük át a szerverről, és a kliensben dolgozzuk fel a visszakapott eredményt, gyorsul a működés, csökken az adatforgalom. Ez az aszinkron működési mód. Ennek megoldására alkalmas a JavaScript, így sok JavaScript alapú rendszer jött létre.
81/44
B IT M A N
Megoldás Aszinkron működési mód: Egy JavaScript esemény hatására HTTP kérés küldődik (aszinkron módon) a szerverre A szerver feldolgozza a kérést, és előkészíti a választ A visszaküldött (szöveges vagy XML formátumú) választ a JavaScript alapú kezelő függvény értelmezi, és ennek alapján aktualizálja az oldal megfelelő részeit A legelterjedtebb megoldás: AJAX - Asynchronous
JavaScript and XML
81/45
B IT M A N
Megoldás Aszinkron működési mód:
Böngésző
JavaScript hívás
Felhasználói felület
Ajax rendszer
HTML
Kliens
81/46
HTTP kérés
Válasz: adatok
Web szerver
B IT M A N
AJAX Az Ajax interaktív web-alkalmazások létrehozására
szolgáló webfejlesztési technika. 2005-ben publikálták, de ekkor már kb. 10 éve léteztek ilyen célú megoldások. Előzmények: – IFRAME (HTML) – 1996 – JavaScript - 1997 – XMLHttpRequest objektum (IE5) – 1999
81/47
B IT M A N
AJAX Az Ajax az alábbi szabványos, elterjedt technológiák
együttese: – HTML, XHTML – megjelenítés, – CSS – megjelenítés – DOM – dinamikus felhasználói felület és interakció – XMLHttpRequest – aszinkron átvitel a kliens és a szerver között – XML/XSLT – adatcsere és adatmanipuláció – JSON – adatcsere – JavaScript – keretrendszer, mely összefogja a fenti technológiákat 81/48
B IT M A N
DOM A Dokumentum Objektum Modell (Document Object
Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell amely a HTMLL, XHTML, XMLL valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi. A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén. 81/49
B IT M A N
DOM
81/50
B IT M A N
XML Az XML (eXtended Markup Language) a webes világban
elterjedt HTML rokona. Úgynevezett "markup", azaz jelölőnyelv, vagyis olyan adatformátum, ahol az adat és az adatra vonatkozó metainformáció (ideértve az adatszerkezetet vagy a megjelenítési, formázási utasításokat) egy közös állományban található.
81/51
B IT M A N
XML - példa <szerzo>Brian W. Aldiss Amíg világ a világ <szerzo>Brian W. Aldiss Az arénában <szerzo>Isaac Asimov Alapítvány
... 81/52
B IT M A N
XSLT Az XSLT, mint eXtensible Stylesheet Language
Transformation, az az eszköz mely segítségével leírhatjuk az XML formátumú dokumentumokon elvégezendő transzformációkat. Ez a transzformáció leíró alkalmas XML-ből XML-be, de XML-ből bármilyen más szöveges formátumba történő transzformáció megadására is. A transzformációk megadása a dokumentum adott részeihez rendelt template-ekbe rendezett feldolgozási utasítások megadásával történik.
81/53
B IT M A N
XSLT - példa <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> Kedvenc könyveim
Az XMLHttpRequest API, illetve objektum Nem standard, de a legtöbb böngésző támogatja
(böngészőfüggő eltérések) Használható JavaScript, Jscript, VBScript-ből Segítségével aszinkron kapcsolat hozható létre a kliens és szerver között A kérés feldolgozását követően a szerver válasza lehet: – egyszerű szöveg – XML – objektum (JSON jelöléssel megadva)
81/57
B IT M A N
XMLHttpRequest – (folyt. 1) Az XMLHttpRequest objektum metódusai:
XMLHttpRequest – (folyt. 2) Az XMLHttpRequest objektum mezői:
– readyState: • 0 – a kérés még nincs inicializálva • 1 – a kérés inicializálva van • 2 – a kérés el lett küldve • 3 – a kérés feldolgozás alatt áll • 4 – megérkezett a válasz – onreadystatechange – ennek értékeként kell megadni a választ kezelő függvény nevét, mely meg fog hívódni a readyState minden egyes változásakor – status – a válasz HTTP kódja (200) – statusText – a HTTP válasz kódjának szöveges változata ("OK") – responseText – a válasz karaktersorozatként – responseXML – a válasz XML formában 81/59
B IT M A N
XMLHttpRequest – Működése JavaScript
– a HTTP kérések küldéséért/válasz fogadásáért felelős speciális objektum lekérése (XMLHttpRequest) – a kérés inicializálása (a keres objektum segítségével): • a választ fogadó függvény kijelölése – a kérés objektum onreadystatechange attribútumának beállítása
• GET (vagy POST) kérés inicializálása (open függvény) • adat elküldése (send függvény) – a válasz kezelése: • várakozás readyState==4-re (illetve HTTP 200 válaszra) • válasz kinyerése responseText (vagy responseXML) segítségével • válasz feldolgozása HTML
– JavaScript kód betöltése 81/60 – a kérést generáló HTML elem/esemény kijelölése
B IT M A N
XMLHttpRequest – A kód function loader(url) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { //a választ fogadó függvény if (xhttp.readyState==4 && xhttp.status==200){ //a válasz rendben alert(xhttp.responseText); //válasz feldolgozása } } xhttp.open("GET", url, true); //inicializálás xhttp.send(); //küldés } Az open és send függvények paraméterei: – open paraméterei: metódus (GET, POST, PUT), szerver-oldali erőforrás URL-je, true=aszinkron kérésküldés – send paraméterei: POST adat (GET esetében null) 81/61
B IT M A N
Egyszerű példa – szerver oldal nélkül ajaxpl.htm
ajaxpl.js
Egyszerű AJAX példa <script src="ajaxpl.js">
function loadDoc(url) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState==4 && xhttp.status==200){ alert(xhttp.responseText); } } xhttp.open("GET", url, true); xhttp.send(); } www.bitman.hu
uzenet.txt
Válasz: (Normális esetben a szerver küldi!)
81/62
B IT M A N
JSON JavaScript Object Notation Kis méretű, szöveg alapú szabvány ember által
olvasható adatcserére. A JavaScript nyelvből alakult ki egyszerű adatstruktúrák és asszociatív tömbök reprezentálására (a JSON-ban objektum a nevük). A JavaScripttel való kapcsolata ellenére nyelv független, több nyelvhez is van értelmezője. A JSON-t legtöbbször egy szerver és egy kliens számítógép közti adatátvitelre használják (legtöbbször AJAX technológiával), az XML egyik alternatívájaként. Általánosságban strukturált adatok tárolására, továbbítására szolgál.
81/63
B IT M A N
XML – JSON <xml> KissÁdámÉvaLaciNagyIstvánMátyásIzabella
Egyszerű JSON példa – szerver oldal nélkül jsonpl.js function loadJSON(jsonf) { A "szerverről" érkező válasz most egy var xhttp = new XMLHttpRequest(); JSON kifejezés, ezt kiértékelve egy xhttp.onreadystatechange = function() { JavaScript objektumot kapunk. if (xhttp.readyState==4 && xhttp.status==200){ var info = eval('(' + xhttp.responseText + ')'); document.getElementById("title").innerHTML="Adatlap"; document.getElementById("firstname").innerHTML="Név: "+info.firstName; document.getElementById("lastname").innerHTML=info.lastName; document.getElementById("address").innerHTML="Cím: "+info.address.postalCode+ " "+info.address.state+", "+info.address.city+", "+info.address.streetAddress; var tmp= "Telefonszám(ok):
jQuery JavaScript függvénykönyvtár Ingyenes, nyílt forráskódú Jellemzői:
– Eseménykezelés – CSS manipuláció – Effektek és animációk kezelése – AJAX támogatás – JavaScript Pluginek A jQuery célja az, hogy amennyire csak lehetséges, leválassza a JavaScript kódot a HTML-ből, és különböző eseményvezérlőkön, és azonosítókon keresztül kommunikáljon a weblap HTML elemeivel. Jelmondata: "write less, do more" 81/70
B IT M A N
jQuery Használata
– Letöltés: http://jquery.com/ – Verzió: 2.1.3 (15.02.12) – Beillesztés egy html oldalba: <script type="text/javascript" src="jquery-2.1.3.js">
– A jQuery használatához alapszintű HTML és CSS ismeret szükséges hiszen ezen elemek manipulálására szolgál. – A jQuery úgy épül fel, hogy kiválasztunk elemeket és azokra hívunk meg függvényeket. – Az eseményhez kötés is úgy történik, hogy megívunk egy függvényt, aminek átadjuk, hogy egy esemény (pl. kattintás) hatására mit csináljon az adott elem.
81/72
B IT M A N
Egyszerű jQuery példa 1. jqpl_1.htm www.bitman.hu <script src="jquery-2.1.0.js"> <script> $(function() { $("div").click(function() { www.bitman.hu $(this).width("200px"); }); });
Ha belekattintasz a szövegbe, a szöveg szélessége 200 pixel lesz. Próbáld ki.
81/73
B IT M A N
Egyszerű jQuery példa 1. Magyarázatok: $(function() { }); - A függvény tartalma akkor fut le, ha a teljes html dokumentum betöltődött. $("div").click(function() { }); - A függvény akkor fut le, ha egy div elemre rákattintunk. $(this).width("200px"); - Az aktuális elem szélessége 200 px legyen.
81/74
B IT M A N
Egyszerű jQuery példa 2. jqpl_2.htm <script src="jquery-2.1.0.js"> <script> $(function() { var div = $("div"); div.on("click", function() { $(this).width("200px"); });
Ha vársz 5 mp-t, a szöveg szélessége 200 pixel lesz. Nem kell kattintani, csak várni.
81/75
B IT M A N
Egyszerű jQuery példa 2. Magyarázatok: div.on("click", function() { }); - Az on eseménykezelővel több eseményt is definiálhatunk egy elemhez. Most a div elemre történő kattintást figyeli. setTimeout(function() { }, delay); - Időzítő, mely a delay-ben megadott ideig várakozik. div.trigger('click'); - Automatikus esemény kiváltás. Most a div elemre történik automatikusan egy kattintás.
81/76
B IT M A N
Egyszerű jQuery animáció 1. jqpl_3.htm <script src="jquery-2.1.0.js"> <script> $('#katt').click(function() { $("#kep").slideToggle(2000); }); Szöveg a kép alatt.
www.bitman.hu
www.bitman.hu
www.bitman.hu
$("#kep").slideToggle(2000); ‒ A kep id-jű elem animált elrejtése/megjelenítése az adott idő alatt.
– $ - jQuery szintaxis része – szelektor - kiválasztja a megfelelő HTML eleme(ke)t – művelet - a kiválasztott eleme(ke)n végrehajtásra kerülő művelet (action) Annak elkerülése, hogy a jQuery kód az oldal betöltés előtt hajtódjon végre: $(document).ready(function(){ // jQuery függvény... });
81/79
B IT M A N
jQuery - szelektorok Szintaktikájában a CSS-re hasonlít. Id alapú kiválasztás: # Osztály alapú kiválasztás: • A kiválasztó (a $ függvény) visszaad egy objektumot és ezen hívhatunk függvényeket. Kiválasztás példák: – $("p") - az összes p elem kiválasztása – $(".gomb") - az összes "gomb" "class"-ú elem – $("p.piros") - a class="piros" stílusosztályhoz tartozó p elemek kiválasztása – $("p#elso") - p elem, melynek id attribútuma "elso" – $("[href]") - az összes href attribútumú elem – $("#menu li.active") - A "menü" "id"-jű
-en belüli összes
elem, amelynek "aktiv" a class 81/80 B IT M A N paramétere
a kiválasztott elemekbe $.ajax(options) - adat betöltése egy XMLHttpRequest objektumba $.get(url,data,callback,type) - adat betöltese HTTP GET segítségével $.post(url,data,callback,type) - adat betöltese HTTP POST segítségével $.getJSON(url,data,callback) - JSON kifejezéssel megadott adat betöltése HTTP GET segítségével $.getScript(url,callback) - (távoli) JavaScript állomány betöltése és végrehajtása
