Web technológiák 2. Gy: JavaScript, AJAX B IT MAN. 81/1 v:

Átírás

1 Web technológiák 2. Gy: JavaScript, AJAX 81/1 v:

2 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

3 A Web világa 2. Interfész a JS és a HTML közti kommunikációhoz Forrás: Pixels4Kids Adatok/Elrendezés 81/3 Formátum/Kinézet Dinamizmus/ Interaktivitás

4 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

5 Témakörök JavaScript AJAX jquery 81/5

6 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

7 JavaScript a weboldalon JS_Pld_0.htm <html> <body> Ez egy hagyományos HTML dokumentum. <br> <script language="javascript"> document.write("ez itt JavaScript!") </script> <br> Ismét HTML. </body> </html> 81/7

8 JavaScript a weboldalon (2) JS_Pld_2.htm <html> <head> <title>teszt</title> <script language="javascript">  </script> </head> <body> </body> </html Bárhol lehet JS kód a dokumentumban, akár több helyen is. 81/8

9 JavaScript a weboldalon (3) szamol.htm <html> <head> <title>js próba</title> <script src=jsc1.js></script> </head> <body> <script> Teszt(); </script> </body> </html> jsc1.js var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+"<br>"); document.writeln(b + a+"<br>"); document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } 81/9

10 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; 81/10 jel = true; (Var nélkül bárhol deklaráljuk, globális!)

11 Változók 81/11 Forráskód <html> <head> <title>teszt</title> <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 } </script> Utalás a globális változóra </head> <body> <SCRIPT language="javascript"> Teszt(); </SCRIPT> Függvény hívás </body> </html>

12 Operátorok Aritmetikai operátorok: + összeadás - kivonás * szorzás / osztás % modulo (egész osztás maradéka) Relációs operátorok: < kisebb <= kisebb v. egyenlő > nagyobb >= nagyobb v. egyenlő!= nem egyenlő == egyenlő === egyforma típus és érték 81/12 a=5, b="5" a == b igaz, a === b hamis

13 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; 81/13 a = 12, b = 5; c = (a<b?a:b); (Ha a<b igaz, akkor c=a, egyébként c=b) document.writeln(c);

14 Automatikus típuskonvertálás Forráskód <html> <head> <script type="text/javascript"> var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+"<br>"); document.writeln(b + a+"<br>"); document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } </script> </head> <body> <script language="javascript"> Teszt(); </script> </body> </html> 81/14

15 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

16 Ciklus példák 1. fejlécek.htm <html> <body> <script> for (i = 1; i <= 6; i++) { document.write("<h"+ i +">Ez itt a H"+ i +" fejléc."); document.write("</h"+ i +">"); } </script> </body> </html> 81/16

17 Ciklus példák 2. számok.htm <html> <body> <script> var i=0 while (i<=10) { document.write("a szám: " + i); document.write("<br />"); i=i+1; } </script> </body> </html> 81/17

18 Ciklus példák 3. autók.htm <html> <body> <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] + "<br>"); } </script> </body> </html> 81/18

19 Függvények function fgvnév(paraméter1, paraméter2,...) { utasítások [return érték;] } function Kiir(a) { } 81/19 document.writeln("eredmény: "+a+"<br>"); function napszak(ora) { } if (ora<12) return "délelőtt" else if (ora > 12) return "délután" else return "dél";

20 Példa Napszak, függvények 81/20 Forráskód <html> <head> <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. <br>"); } </script> </head> <body> <p>napszak:</p> <script> kiir(getnapszak(getora())); </script> </body> </html>

21 Dialógus ablakok Üzenet Forráskód <html> <head> <script type="text/javascript"> function figy() { alert("én szóltam!")} </script> </head> <body> <form> <input type="button" onclick="figy()" value="ne kattints ide!"> </form> </body> </html> 81/21

22 Dialógus ablakok Kérdés 81/22 Forráskód <html> <head> <script type="text/javascript"> function kerd() { if (confirm("menjünk?")) { document.write("megyünk.") } else { document.write("nem megyünk.") } } </script> </head> <body> <form> <input type="button" onclick="kerd()" value="menjünk?"> </form> </body> </html>

23 Dialógus ablakok Adatbevitel Forráskód <html> <head> <script type="text/javascript"> function bedat() { var name=prompt("hogy hívnak?","bogyó") if (name!=null && name!=""){ document.write( "Hello " + name + "! Én Bigyó vagyok!")} } </script> </head> <body> <form> <input type="button" onclick="bedat()" value="ismerkedjünk!"> </form> </body> </html> /23

24 Körlapok példa (HTML+CSS+JS) kor.htm <html> <head> <link rel="stylesheet" type="text/css" href="kor.css"> <script type ="text/javascript" src="kor.js"> </script> </head> <body> <div id="a" class="circle" onclick="sethot(this);"></div> <div id="b" class="circle middle" onclick="reload();"></div> <div id="c" class="circle right" onclick="sethot(this);"></div> </body> </html> 81/24

25 Körlapok példa (HTML+CSS+JS) kor.css body { width:100%; height:100%; }.circle{ position:absolute; width:100px; height:100px; margin-left:-50px; margin-top:-50px; border-radius:50px; background:green; top:50%; left:25%; } 81/25.circle.middle{ background:red; left:50%; }.circle.right{ background:blue; left:75%; }

26 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

27 81/27

28 Körlapok példa /28

29 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

30 Gyakran használt eseménykezelők Weboldal betöltésekor, elhagyásakor onload, - böngésző típusának lekérdezése onunload, - kilépés kezelése Űrlap kezelés onfocus belépés egy űrlap elembe onblur űrlap elem elhagyása onchange űrlap elem tartalma megváltozik onsubmit űrlap elküldése 81/30

31 Gyakran használt eseménykezelők (2) Egérmozgás 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

32 Példa Színváltozás egérmozgáskor 81/32 Forráskód <html> <head> <script type="text/javascript"> function folott(x) { x.style.color = Math.floor(Math.random()* ).toString(16); } function elvisz(x) { x.style.color = Math.floor(Math.random()* ).toString(16); } </script> </head> <body> <div style="width:200px" onmouseover="folott(this)" onmouseout="elvisz(this)"> Húzd az egeret a szöveg fölé, aztán húzd el a szöveg fölül! </div> </body> </html>

33 Fontosabb JavaScript objektumok String length(), touppercase(), match(), indexof(), replace() Date gettime() getfullyear(), getmonth(), getdate(), getday() Array concat(), sort(), push(), pop(), Math random(), max(), min(), round() 81/33

34 Példa Dátumok, időpont datumido.htm <html> <head> <script src="dt.js"></script> </head> <body> <h2>dátumok, időpont</h2> <p>a helyi és a kordinált világidő:</p> <script> dates(); </script> <br> <p>ez pedig az aktuális időpont.</p> <script> timewriter(); </script> </body> </html> 81/34

35 Példa Dátumok, időpont dt.js function dates(){ now = new Date(); localtime = now.tostring(); utctime = now.togmtstring(); document.write("<b>helyi idő:</b> "+localtime+"<br />"); document.write("<b>utc idő:</b> "+ utctime + "<br />"); } function timewriter(){ now = new Date(); hours = now.gethours(); mins = now.getminutes(); secs = now.getseconds(); if (mins < 10) mins= "0" + mins; if (secs < 10) secs= "0" + secs; document.write("<font size='+5'>"); document.write(hours + " : " + mins + " : " + secs); document.write("</font>"); } 81/35

36 Böngésző objektumok window a hierarchia csúcsán áll böngészőablakot képvisel document weblap navigator a böngészőről tárol információt screen a kliens gép képernyőjéről rendelkezik információkkal history korábban meglátogatott web oldalak címét tárolja location az éppen aktuális oldal címét tartalmazza reload() vagy replace() függvényei segítségével új oldal tölthető be 81/36

37 Window objektum Metódusok open, showmodeldialog, showmodelessdialog, close, navigate Tulajdonságok document, event, history, location, navigator Események onload, onbeforeunload, onunload, onfocus, onblur Kollekció frames 81/37

38 Document objektum Metódusok open, write, close, createelement, insertadjacentelement, insertbefore Tulajdonságok body, cookie, title Események onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx Kollekciók all, frames, forms 81/38

39 Sztring műveletek Megadás: var s1 ="retek", s2 = 'málna'; Számból sztring: d=szám.tostring(); Sztringből szám: e=s1*1; Sztring hossza: h=s1.length; Részsztring: d=s1.substr(3,7); Nagybetűssé alakítás: d=s1.touppercase(); Kisbetűssé alakítás: d=s1.tolowercase(); Adott sorszámú karakter: d=s1.charat(5); 81/39

40 Példa Forráskód <html> <head> </head> <body> 2x Négyzet kerülete és területe:<br><br> <form name="fel"> Oldal: <input size=10 name="ert"> <input type=button value="duplakatt: terület" ondblclick="document.fel.ert.value= document.fel.ert.value*document.fel.ert.value"> <input type=button value="katt: kerület" onclick="document.fel.ert.value= document.fel.ert.value*4"> </form> </body> </html> 81/40

42 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

43 Előzmény A hagyományos weboldalak működési módja: HTTP kérés HTML válasz (Teljes weboldal) Kliens Web szerver 81/43

44 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

45 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

46 Megoldás Aszinkron működési mód: Böngésző Felhasználói felület JavaScript hívás HTML Ajax rendszer HTTP kérés Válasz: adatok Kliens Web szerver 81/46

47 AJAX Az Ajax interaktív web-alkalmazások létrehozására szolgáló webfejlesztési technika 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 XMLHttpRequest objektum (IE5) /47

48 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

49 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

50 DOM 81/50

51 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

52 XML - példa <konyvek> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>amíg világ a világ</cim> </konyv> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>az arénában</cim> </konyv> <konyv> <szerzo>isaac Asimov</szerzo> <cim>alapítvány</cim> </konyv>... </konyvek> 81/52

53 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

54 XSLT - példa <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <head> <title>kedvenc könyveim</title> </head> <body> <h2>néhány ajánlott olvasnivaló</h2> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="konyvek"> <ul id="lista"> <xsl:apply-templates /> </ul> </xsl:template> <xsl:template match="konyv"> <li><em><xsl:value-of select="cim" /></em> by <xsl:value-of select="szerzo" /></li> </xsl:template> </xsl:stylesheet> 81/54

55 A tartalom és a megjelenés szétválása 1997 Jelen Jövő HTML/JavaScript Struktúra Dizájn Adat Tulajdonság HTML/XHTML Struktúra Adat CSS Dizájn XML Adat XSLT Struktúra CSS Dizájn JavaScript Tulajdonság JavaScript Tulajdonság Forrás: Ken Westin 81/55

56 AJAX keretrendszerek jquery MooTools Prototype, Script.aculo.us YUI Library ASP.NET AJAX Spry framework (Adobe) Dojo Toolkit Ext JS 81/56

57 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

58 XMLHttpRequest (folyt. 1) Az XMLHttpRequest objektum metódusai: open( method, URL ) open( method, URL, async ) open( method, URL, async, username ) open( method, URL, async, username, password ) send( content ) getresponseheader( headername ) setrequestheader( label, value ) getallresponseheaders() abort() 81/58

59 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

60 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

61 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 } 81/61 alert(xhttp.responsetext); //válasz feldolgozása xhttp.open("get", url, true); xhttp.send(); //inicializálás //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) M

62 Egyszerű példa szerver oldal nélkül ajaxpl.htm <html> <head> <title>egyszerű AJAX példa</title> <script src="ajaxpl.js"></script> </head> <body> <form> <input type="button" value="üzenet" onclick="loaddoc('uzenet.txt');"/> </form> </body> </html> 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(); } uzenet.txt Válasz: (Normális esetben a szerver küldi!) 81/62

63 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

64 XML JSON <xml> <csalad> <csaladnev>kiss</csaladnev> <gyereknev>ádám</gyereknev> <gyereknev>éva</gyereknev> <gyereknev>laci</gyereknev> <csalad> <csalad> <csaladnev>nagy</csaladnev> <gyereknev>istván</gyereknev> <gyereknev>mátyás</gyereknev> <gyereknev>izabella</gyereknev> <csalad> </xml> { "csalad": [ // lista jele { // asszociatív tömb jele "csaladnev": "Kiss", // normál kulcs:érték "gyereknev": ["Ádám", "Éva", "Laci"] // kulcs: [lista] }, { "csaladnev": "Nagy", "gyereknev": ["István", "Mátyás", "Izabella"] } ] } 81/64

65 Egyszerű JSON példa szerver oldal nélkül jsonpl.htm <html> <head> <title>egyszerű JSON példa</title> <script src="jsonpl.js" type="text/javascript"></script> </head> <body> <form> <input type="button" value="infó" onclick="loadjson('jsondata.json');"/> </form> <h2><span id="title"></span></h2> <span id="firstname"></span> <span id="lastname"></span><br> <span id="address"></span><br> <span id="phonenr"></span> </body> </html> 81/65

66 Egyszerű JSON példa szerver oldal nélkül jsondata.json { "firstname": "Mici", "lastname": "Mackó", "address": { "streetaddress": "Odvas Tölgyfa utca 21.", "city": "Százholdas Pagony", "state": "Kerekerdő", "postalcode": "210021" }, "phonenumbers": [ " ", " " ] } 81/66

67 Egyszerű JSON példa szerver oldal nélkül jsonpl.js function loadjson(jsonf) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readystate==4 && xhttp.status==200){ var info = eval('(' + xhttp.responsetext + ')'); document.getelementbyid("title").innerhtml="adatlap"; document.getelementbyid("firstname").innerhtml="<b>név: </b>"+info.firstname; document.getelementbyid("lastname").innerhtml=info.lastname; A "szerverről" érkező válasz most egy JSON kifejezés, ezt kiértékelve egy JavaScript objektumot kapunk. document.getelementbyid("address").innerhtml="<b>cím: </b>"+info.address.postalcode+ " "+info.address.state+", "+info.address.city+", "+info.address.streetaddress; var tmp= "<b>telefonszám(ok):</b><ul>"; for(i=0;i<info.phonenumbers.length;i++){ tmp=tmp+"<li>"+info.phonenumbers[i]+"</li>" } tmp+="</ul>" document.getelementbyid("phonenr").innerhtml=tmp; } } xhttp.open("get", jsonf, true); xhttp.send(); 81/67 }

68 Egyszerű JSON példa szerver oldal nélkül /68

70 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

71 jquery Használata Letöltés: Verzió: ( ) Beillesztés egy html oldalba: <head> <script type="text/javascript" src="jquery js"></script> </head> Kipróbálása: <body> <script> $(document).ready(function(){ alert('a JQuery használható!'); }); </script> 81/71

72 JQuery Használata: 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

73 Egyszerű jquery példa 1. jqpl_1.htm <html> <head> <script src="jquery js"></script> <script> $(function() { $("div").click(function() { $(this).width("200px"); }); }); </script> </head> <body> <div> <p>ha belekattintasz a szövegbe, a szöveg szélessége 200 pixel lesz. Próbáld ki.</p> </div> </body> </html> 81/73

74 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

75 Egyszerű jquery példa 2. jqpl_2.htm <html> <head> <script src="jquery js"></script> <script> $(function() { var div = $("div"); div.on("click", function() { $(this).width("200px"); }); settimeout(function() { div.trigger('click'); }, 5000); }); </script> </head> <body> <div> <p>ha vársz 5 mp-t, a szöveg szélessége 200 pixel lesz. Nem kell kattintani, csak várni.</p> </div> </body> </html> 81/75

76 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

77 Egyszerű jquery animáció 1. jqpl_3.htm <html> <head> <script src="jquery js"></script> </head> <body> <button id="katt" type="button">animáció!</button><br> <img id="kep" src="light.jpg"><br> <script> $('#katt').click(function() { $("#kep").slidetoggle(2000); }); </script> Szöveg a kép alatt. </body> </html> $("#kep").slidetoggle(2000); A kep id-jű elem animált elrejtése/megjelenítése az adott idő alatt. 81/77

78 Egyszerű jquery animáció 2. jqpl_4.htm <html> <head> <script src="jquery js"></script> </head> <body> <button id="katt" type="button">animáció!</button><br> <img id="kep" src="yeti-jquery.png"><br> <script> $('#katt').click(function() { $("#kep").animate({height:'400px',opacity:'0.5'},"slow"); $("#kep").animate({width:'400px',opacity:'1'},"normal"); $("#kep").animate({height:'100px',opacity:'0.5'},"slow"); $("#kep").animate({width:'100px',opacity:'1'},"normal"); $("#kep").animate({height:'182px',opacity:'0.5'},"fast"); $("#kep").animate({width:'260px',opacity:'1'},"fast"); }); </script> </body> </html>.animate({méret, átlátszatlanság}, sebesség); 81/78

79 Alapvető szintaxis $(szelektor).művelet() $ - 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

80 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ű <ul>-en belüli 81/80 összes <li> elem, amelynek "aktiv" a class paramétere

81 jquery - AJAX függvények (ízelítő) $(selector).load(url,data,callback) - (távoli) adat betöltése 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 81/81

82 jquery - AJAX függvények (ízelítő).click() Kattintás.animate() Animáció.hide() Elem elrejtése.show() Elem megjelenítése.toggle() A fenti kettő keveréke, ha látszik az elem elrejti, ha nem akkor megjeleníti..fade() Elem elhalványítása.fadetoggle() Állapottól függő elhalványítás 81/82

83 jquery AJAX hívás példa jqpl_5.htm <html> <head> <title>the jquery Example</title> <script type = "text/javascript" src = " </script> <script> $(document).ready(function() { $("#btn").click(function(event){ $('#eredm').load('eredmeny.txt'); }); }); </script> </head> <body> <p>kattints a gombra, és töltsd be az eredményt egy fájlból.</p> <div id = "eredm" style = "background-color:cc0; width: 400;"> Ide kerül az eredmény: </div> <input type = "button" id = "btn" value = "Betöltés" /> </body> </html> eredmeny.txt <h1>ez a betöltött eredmény...</h1> 81/83

84 jquery AJAX hívás példa jqpl_6.htm <html> <head> <title>the jquery Example</title> <script type = "text/javascript" src = " </script> <script> $(document).ready(function() { $("#btn").click(function(event){ $.getjson('adatok.json', function(jd) { $('#eredm').html('<p> Név: ' + jd.nev + '</p>'); $('#eredm').append('<p>kor : ' + jd.kor+ '</p>'); $('#eredm').append('<p> Foglalkozás: ' + jd.foglalkozas+ '</p>'); }); }); }); </script> </head> <body> <p>kattints a gombra, és töltsd be az eredményt egy Json fájlból.</p> <div id = "eredm" style = "background-color:aqua; width: 370;"> Ide kerül az eredmény: </div> <input type = "button" id = "btn" value = "Betöltés" /> </body> 81/84 </html> adatok.json { "nev": "Kockás Péter", "kor" : "27", "foglalkozas": "Raktáros" }

85 jquery AJAX hívás példa jqpl_7.htm <html> <head> <script src = " </script> <script> $(document).ready(function() { $("#btn").click(function(event){ var name = $("#name").val(); $("#eredm").load('result.php', {"name":name} ); }); }); </script> </head> <body> <p>írd be a neved, és kattints a gombra!</p> <input type = "input" id = "name" size = "14" /><br><br> <div id = "eredm" style = "background-color:cc0; width: 220;"> Ide kerül az eredmény: </div> <br> <input type = "button" id = "btn" value = "Eredmény" /> </body> </html> 81/85 result.php <?php if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Helló ". $name."!"; }?>

86 Ennyi! 81/86

87 Felhasznált irodalom Weblabor.hu: A fejlesztői forrás W3schools.com: The world s largest web development site Rimár Miklós: Html, css szakdolgozat KBB TE Ruff Laura-Ildikó: Web programozás elektronikus jegyzetek 81/87

88 VÉGE VÉGE 81/88