Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar

Az előadások a következő témára: "Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar"— Előadás másolata:

1 Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar zoltan.illes@elte.hu

2 Miről volt szó korábban ? Statikus oldalak hiányosságai Kliens-Szerver együttműködés Kliens Pull, szerver push Interaktív HTML elemek Az interaktivitás lehetősége: –SSI –CGI

3 Mi lesz még ? Kliens oldali program(ok) –Javascript Szerver oldali programok –Schell script használata –PHP Fejlesztőeszközök (Jegyzettömb, Frontpage, VS2005, EditPlus, Dreamweaver ) Ez a PPT Nem referencia ! Mi a referencia?

4 Javascript Sun Inc., Netscape Inc. fejlesztés http://javascript.com http://javascript.internet.com http://javascriptkit.com http://developer.mozilla.org/en/docs/JavaScript/ http://developer.mozilla.org/en/docs/DOM/ http://www.w3schools.com …stb. Magyar nyelvű könyvek –Revoly A: A JavaScript, Nagy P:JavaScript1.2

5 A JavaScript nyelvi jellemzői Interpretált nyelv (Netscape, IE, Firefox) –Címsorba írva: javascript:eval(”2*4”) C (C++) utódnyelv Függvények definiálhatók (function ) Kis, nagybetűk különböznek Nem szigorúan típusos –„Laza” változó kezelés Nincs főprogram (main) Nincs I/O, file I/O

6 Javascript felhasználása Futásidejű HTML generálás Űrlapmezők ellenőrzése Helyi üzenetek (alert, confirm, prompt,…) CGI helyi, előfeldolgozása Nyelvi elemek + HTML DOM Nyelvi elemek + XML DOM AJAX

7 Javascript beillesztése Tetszőleges helyen <script language=„javascript1.2” src=„alma.js”> …programszöveg… // megjegyzés /* ez is megjegyzés, csak több soros lehet az ilyen */ Függvénydefiníciók, glob. objektumok a body tag előtt

8 A Javascript elemei.Változók Nem típusos nyelv, szám, szöveg, logikai (true,false), objektum (null) Lokális (fv.-n belüli), globális (fv.-n kívüli) var kulcsszó nem kötelező var a=„alma”; //fv-n kívül globális, belül lokális B=25; // fv-n belül is globális változó lesz Változó név (betűk+számok+_) C jellegű kar. konstans használat (\n, stb.)

9 Változó konverziók. Számból szöveggé automatikusan Dátum objektumot a toString() fv. Szövegből számot: –Number függvény, A=Number(”25”); –parseFloat(”1.34”) függvény –parseInt(”5”,16) függvény A második paraméter opcionális Számrendszer alapját adja Elhagyása esetén 10-es, „0xszám” hexa, 0szám oktális isNaN függvény –Not a Number, NaN –Aritmetikai műveletek eredménye gyakran NaN X=25/”alma”;// eredmény NaN

10 Tömbök Normál tömbök –var a=[alma, 25, barack,30]; –var x=new Array(10); –length tulajdonság –elem hivatkozás: honap[0] Asszociatív tömbök –kocsi[„gyarto”]=Toyota; //a kocsi tömböt előtte definiálni kell!! –kocsi1={gyarto:”Toyota”,szin:”Piros”}; –document.writeln(kocsi1.szin);

11 Többdimenziós tömbök Egy tömb elem, nem csak egyszerű lehet. –Tömbök tömbje fogalom él. –Var td=new Array(); –td[0]=[[1,2,3,4],[2,3,4,5]]; –td egy 3 indexű tömb lesz –A length csak a „külső” tömb elemszámát adja –Td[0].length adja az első tömb hosszát(2) –Vegyesen: sz=[["alma","barack","szilva"],[3,4,5]];

12 Operátorok Szöveges operátorok –+,+= szöveg összefűzés operátora Logikai operátorok –&&, a logikai és, a || logikai vagy, a ! a not Összehasonlító operátorok –==,!=, >=,,< Aritmetikai –=,+,+=,++,--,*,/,%,&,|,^, > stb. mint C-ben, – új operátor: >>>, balról mindig 0 jön be

13 Szöveges függvények(String) lengthszöveg hossza –S=„almafa”; x=s.length;// 6 indexOf(s,i)s hol található meg,i-től kezd lastindexOf(s,i) s hol van i-tol visszafele split(ch)szétszedi a szöveget,eredmény tömb substring(i,j) i-j-t kivesz i-től kezdve –substr(i,db) db karaktert vesz ki i-től fromCharCode(kód1,kód2,…)- statikus függvény –String.fromCharCode(65,66,67);//”ABC” charCodeAt(index) – adott indexű karakter kódja –"ABC".charCodeAt(0) ;// 65

14 Tömbfüggvények (Array) sort()rendezi az elemeket join(s1)egy sztring lesz az eredmény concat(s1)két tömböt egymáshoz fűz reverse()elemsorrend megfordul slicekivág egy részletet –Hasonló az indexelése mint substring-nek pop()az utolsó tömbelem törlése push(elem,..)a tömb végéhez ad új elemeket shift()az első elemet lekapja unsift(elem,..)a tömb elejéhez ad elemeket

15 Függvénydefiníciók function név(paraméter,…) { fvtörzs; } Nincs fv. paraméter típus! Nem kötelező paramétert jelölni arguments vektor, arguments.length Visszatérési adat return utasítással –Nem kötelező megadni –Return 5; return {x:5, y:6}; // összetett visszatérés

16 Vezérlési szerkezetek, elágazások if- egyszerű elágazás –if (feltétel) utasítás; [else utasítás;] switch- többirányú elágazás switch (kifejezés) { case érték: utasítás; brake; … default: utasítás; } –az érték szöveg is lehet

17 Vezérlési szerkezetek, Ciklusok for(kif1;kif2;kif3) utasítás; while (feltétel) utasítás; do utasítás while (feltétel); –ciklus amíg igaz for (i in objektumnév) utasítás; –objektum elemein végiglépked i változó –with(objektumnév) { …}; pl: Math obj. Példa: vektor.html

18 Kivételkezelés try – catch( ) – throw – finally catch(e), minden hibát elkap catch (e if e instanceof hibatípus) finally()mindig végrehajtásra kerül throw x;kivétel dobás Példa: try.htm

19 Felhasználói objektumok Formára a függvénydefinícióhoz hasonlít Adattag mellett, lehet függvénytagja is –function szemely(nev, kor) –{ this.nev=nev; this.kor=kor;this.kiir=adatkiir;} –function adatkiir() –{var adat=„Név:”+this.nev ;document.writeln(adat); –adat=„Kora:”+this.kor; document.writeln(adat);} –var laci=new szemely(„Lacika”, 17); –laci.kiir();

20 Javascript objektumok I. Math objektum –document.writeln(Math.PI); –egyéb konstansok: SQRT2,E,LN10,LN2, –sin,cos,tan,asin,acos,atan,exp,log, sqrt, –Math.pow(3,4)- 3 a negyediken –ceil(4.8)felső kerekítés(5) –floor(4.8)alsó kerekítés(4) –round(4.8)közelebbi egészre kerekít(5) –random()0-1 közti véletlenszám –Példa: másodfokú egyenlet megadás

21 Javascript objektumok II. Date, dátum objektum –var ma=new Date(); a=new Date(„03,03,15”); –b=new Date(„03,03,15,20,59,00”);//éhnópm –get, set függvények getDay(),getHours(),getMinutes(),getMonth(),getYear() A=getDay(0); //A=0=vasárnap,1=hétfő,… A getDay-nek nincs setDay társa, a többinek van B=getDate(); //hónap napja (0-30) B.setDate(20); // b-ben a nap 15-ről 20-ra változik –Példa: dátum Image objektum –var kep=new Image(); kep.src=„alma.gif”; –Képcsere példa

22 Szünet Jövő héten folytatjuk….

23 Window objektum var win=null;// globális objektum Win=window.open(„Url”,név,paraméterek); –Fontosabb paraméterek: menubar=yes, toolbar=yes, location=yes, resizable=yes,status=yes, scrollbars=yes left=100,top=100,height=100,width=100 –Példa: Win= window.open(„alma.html", „ujablak", "width=420,height=230,resizable=yes,scrollbars=yes, status=yes"); Win.close();// ablak bezárása

24 Window objektum window objektum –window.document objektum (már láttuk: writeln(…)) document.images[] document.forms[] document.links[] document.cookie=”Ez a süti, ami egy szöveg!” –Ez jellemzően összetett, „a=5; expire=idő; …” –window.location window.location=„új URL cím”; window.location.reload(); window.location.replace(url); // az elhagyott nem kerül a historyba –window.frames –window.history –window.escape(string), window.unescape(string) Konvertálja a szöveget helyköz -> %20, stb

25 Eseménykezelő paraméterek Click események –gombok, linkek Focus,Blur,Change események –szövegbekérés, select Mouseover,out –link Keypress események –Szövegbekérés, event.charCode

26 Event objektum Eseménykezelés objektuma Eseménykezelő függvénynél jelölni kell mint paraméter –…onkeypressed=„klikk(event);” Billentyűleütés: event.keyCode, csak a kód –String.fromCharCode(event.keyCode); //betű –Példa: karakter1.htm Egér esemény: –Pozíció: event.clientX, event.clientY –Gomb: event.button Értéke: 0 bal gomb, 1 görgő, 2 jobb gomb

27 Style objektum Stíluslap használata: document.styleSheets –Ez a tulajdonság a stíluslapok tömbjét adja meg. –document.styleSheets[0].cssRules adja az „első” stíluslap szabálytömbjét. –document.styleSheets[0].cssRules[i].style –document.styleSheets[0].cssRules[i].selectorText Egyéni stílus objektum használata. –var D=document.getElementById(idazonosító); –Egyszavas stílusnév esetén: D.style.stílusnév=újérték; D.style.color=”green”; –Összetett stílusnév esetén: D.style.stílusNév=újérték; D.style.backgroundColor=”blue”; D.style.fontSize=”24px”;

28 Fontosabb eseménykezelők onclick=„alert(‘Rám kattintottál!’);” onmouseover, onmouseout onload, onunload onblur,onfocus onsubmit,onreset (form események) onselect,onchange,onkeypress példa: kívánságlista összeállítás

29 Fontosabb Javascript függvények javascript:void(), link tag href paramétere clearTimeout(azonosító) setTimeout(utasítás, ezredmásodperc) –visszatérési érték, egy időzítőazonosító –példa1: menu.html, időzítővel –példa2: menu CSS használattal setInterval, clearInterval submit() form submit gomb helyettesítés reset() form reset gomb helyettesítése print() Oldal nyomtatása(Nyomtatás dialógus)

30 Köszönöm a figyelmet! Illés Zoltán Budapest, Pázmány Péter sétány 1/c Zoltan.Illes@elte.hu