Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1
CLIENT-SERVER 2
Internet technológiák Kliens oldali: -(x)html -CSS -JavaScript -XML JavaScript XML PHP Szerver oldali: -PHP -ASP -JSP -Node.js AJAX 3
JavaScript A JavaScript programozási nyelv egy objektumalapú szkriptnyelv. 1995-ben a Netscape cég az internet böngészőjének egy újabb változatával jelent meg. Ez az áttérés az 1.1 változatról a 2.0 változatra alapvető, mondhatjuk forradalmi változást hozott a böngésző szolgáltatásaiban. Az új változat tartalmazott egy LiveScript nevű beépített nyelvet (kifejlesztője Brendan Eich), amellyel a HTML oldalak a letöltés után is manipulálhatókká váltak a kliens oldalon. Ennek a nyelvnek a szintaxisa nagyon hasonlított a Java nyelv szintaxisához, ezért piaci szempontok miatt nevét hamarosan JavaScript-re változtatták. ECMAScript ECMA-262 4
JavaScript Java Objektum orientált nyelv. Létezik támogatás az objektumokra, osztályokra, öröklődésre... A programot le kell fordítani a végrehajtás előtt. Az appletek külön állnak az (x)html dokumentumtól, ahonnan meghívjuk őket. A változókat deklarálni kell (erős tipizáció). Statikus összekapcsolás: az objektumreferenciának léteznie kell a fordítás ideje alatt. JavaScript Objektalapú. Léteznek beépített objektumok. Értelmezett (interpretált) nyelv, böngészőben végrehajtódik. A programok az (x)html dokumentumba integráltak. A változókat nem kell deklarálni (gyönge tipizáció). Dinamikus összekapcsolás: az objektum-referenciát a futatás közben ellenőrzi. 5
JavaScript A JavaScript használata: a weboldal elemei kinézetének beállítása és módosítása interaktivitás dátum és idő megjelenítése különböző formátumokban különböző számítások elvégzése az űrlapokon keresztül bevitt adat ellenőrzése sütik létrehozása (Cookies) a felhasználói web böngészőjének detektálása dinamikus (x)html mobil alkalmazások készítése windows 8 alkalmazások készítése játekok készítése 6
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <script type="text/javascript"> vagy <script> var city = "Subotica"; var school = "Subotica Tech"; document.write(school); </script> </body> </html> 7
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <script type="text/javascript"> var city = "Subotica"; document.write(city); </script> <p>hello WORLD!</p> <script type="text/javascript"> var school = "Subotica Tech"; document.write(school); </script> </body> </html> 8
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <script type="text/javascript" src="1.js"></script> </body> </html> 9
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> <script type="text/javascript" src="1.js"></script> </head> <body> </body> </html> 10
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> <script type="text/javascript" src="1.js"></script> </head> <body> <script type="text/javascript" src="2.js"></script> </body> </html> 11
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <script type="text/javascript"> var city = "Subotica"; document.write(city); </script> <noscript> <p>your browser doesn't support JavaScript</p> </noscript> </body> </html> 12
JavaScript A JavaScript használata az (x)html oldalon: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript</title> </head> <body> <input type="button" onclick="alert('hello World!');" value="click me" /> </body> </html> 13
Általános szintaktikai szabályok Nagy- és kisbetűk A JavaScript megkülönbözteti a nagy- és kisbetűket. Szóközök, tabulátorok és sorvégjelek A JavaScript figyelmen kívül hagyja a szóközöket, tabulátorokat és sorvégjeleket. 14
Általános szintaktikai szabályok Opcionális pontosvessző A JavaScriptben az utasításokat opcionális pontosvesszők zárják le. Ha elhagyjuk a pontosvesszőt, akkor a JavaScript megpróbálja automatikusan beszúrni azt a megfelelő helyre. a = 3; b = 4; a =3 ; b = 4; a = 3; b = 4 - Általában minden utasítást külön sorba helyezzünk el. - Minden utasítást explicit pontosvesszővel fejezzünk be. 15
Általános szintaktikai szabályok Megjegyzések // megjegyzés /* több soros megjegyzés, 1. sor több soros megjegyzés, 2. sor */ 16
Általános szintaktikai szabályok Literálok A literálok a JavaScriptben fix értékeket reprezentálnak. 14 1.4 "Subotica Tech" 'Subotica' true false null 17
Általános szintaktikai szabályok Azonosítók (identifikátorok) Az azonosító egy név. A JavaScriptben az azonosítókat változók, függvények és címkék (label) elnevezésére használjuk. Szabályok: - Az azonosítóknak betűvel, aláhúzással (_) vagy dollár ($) jellel kell kezdődniük, az ezt követő karakter azonban már szám (0.. 9) is lehet. - Az azonosító neve nem lehet ugyanaz, mint bármely foglalt szó, amelyet más célokra használnak a JavaScriptben. 18
Általános szintaktikai szabályok Foglalt szavak break do if switch typeof case else in this var catch false instanceof throw void continue finally new true while default for null try with delete function return Foglalt szavak az ECMA bővítések számára abstract double goto native static boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile debugger 19
Általános szintaktikai szabályok Foglalt szavak arguments encodeuri Infinity Object String Array Error isfinite parsefloat SyntaxError Boolean escape isnan parseint TypeError Date eval Math RangeError undefined decodeuri EvalError Nan ReferenceError unescape decodeuricomponent Function Number RegExp URIError 20
Adattípusok és értékek Számok Karakterláncok (sztringek) Logikai értékek Függvények Objektumok Tömbök null undefined Date típusú objektum Reguláris kifejezések Objektumok, amelyek hibákat reprezentálnak 21
Speciális numerikus értékek Konstans Infinity NaN (Not-a-Number) Number.MAX_VALUE Number.MIN_VALUE Number.NaN Number.POSITIVE_INFINITY Number.NEGATIVE_INFINITY Jelentés speciális érték a végtelen jelölésére speciális nem szám érték legnagyobb szám a JavaScriptben legkisebb szám a JavaScriptben speciális nem szám érték speciális érték a végtelen jelölésére speciális érték a negatív végtelen jelölésére var x = 1000 / "Alma"; // NaN isnan(x); // returns true var y = 100 / "1000"; // number isnan(y); // returns false 22
Speciális numerikus értékek isfinite() - ellenőrzi, hogy a szám korlátos-e, szabályszerű-e. false értéket ad vissza, ha az érték +Infinity, -Infinity vagy NaN, egyébként true a visszatérő értéke. var z1 = 3/0; var z2 = -3/0; var z3 = 0/0; document.write(z1+"<br />"); // Infinity document.write(z2+"<br />"); // -Infinity document.write(z3); // NaN 23
Számok Egész szám literálok: 0 4 10000 Hexadecimális és oktális literálok: 0xff // decimális értéke: 15*16 + 15 = 255 0377 // decimális értéke: 3*64 + 7*8 + 7 = 255 Lebegőpontos literálok: 3.14 2345.789 6.02e23 24
Karakterláncok (sztringek) Sztring literálok "" // üres sztring 'Subotica' "3.14" "JavaScript is \n script language" 'name="myform"' Speciális karaktereket az escape karakterrel (backslash \) együtt szerepeltethetünk egy sztring literálban. Karakter Jelentés \b Visszalépés (Backspace) \t Tabulátor (Tab) \n Új sor (New line) \v Vertikális tabulátor (Vertical tab) \f Lapdobás (Form feed) \r Kocsi vissza (Carriage return) \ Idézőjel (Double quote) \ Aposztróf (Apostrophe vagy single quote) \\ Fordított törtvonal (Backslash karakter \ ) 25
Logikai értékek true false 26
Függvény típusú literálok: Függvények function square(x) { return x*x;} var square = function(x) { return x*x} 27
Objektumok 1. Logikai értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 2. Szám értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 3. Szöveg értékek lehetnek objektumok vagy primitív adatok, amelyek objektumként kezelhetők. 4. A tömbök mindig objektumok. 5. A függvények mindig objektumok. Az objektum egy adat, amelynek tulajdonságai (jellemzői) és tagfüggvényei (metódusai) vannak. 28
Objektumok A kijelölt értékek gyűjteménye egy objektum. Ezeket a kijelölt értékeket általában az objektum tulajdonságainak nevezik (properties). kep.width kep.height // width - tulajdonság // height - tulajdonság kep["width"] kep["height"] document.myform.mybutton Objektum metódusa objektum.metódus() document.write("hello World!") 29
Objektum típusú literálok Objektumok var point = {x:2.3, y:-1.2}; var kep= {width:150, height:250}; var student={ name: "John", lastname: "Malkovich", numberofindex: "122039014" }; var student2={name:"peter",lastname:"brown", numberofindex:"122049014"}; 30
Objektumok A JavaScriptben egy adott objektumnak (string, szám) az összes módszerei és tulajdonságai rendelkezésre állnak a primitív értékek számára is, mert a JavaScript átmenetileg a primitív értékek objektumaira alakítja a módszerek és a tulajdonságok végrehajtása előtt. 31
Tömbök A tömb egy objektum, amely több értéket memorizál és amelynek több tulajdonsága (properties) van. var myarray = new Array(10); myarray[0] = 16; myarray[1] = 21; myarray[6] = 78; myarray[9] = 87; var a = new Array(); // vagy var a = []; a[0] = 1.2; a[1] = "JavaScript"; a[2] = true; a[3] = {x:1, y:3}; var autok = new Array("Fiat","Opel","BMW"); 32
Tömbök Tömb típusú literálok var a = [1.2, "JavaScript", true, {x:1, y:3}]; var autok = ["Fiat","Opel","BMW"]; 33
null A null kulcsszó különleges érték, amely arra utal, hogy nincs semmilyen konkrét érték. A null értéket általában különleges objektum értékként tartják számon ez az az érték, amely nem jelöl semmilyen objektumot. Amikor a változó null értéket tartalmaz, az azt jelenti, hogy nem tartalmaz semmilyen használható objektumot, tömböt, számot, sztringet vagy logikai értéket. Ha a null érték logikai értékként értékelődik ki, false értékre konvertálódik. Amikor numerikus környezetben szerepel, 0 értékre konvertálódik. Ha karaktertömbként használják, "null" sztringre konvertálódik. 34
null, undefined Ha egy változóhoz vagy egy tömbelemhez még nem lett hozzárendelve valamilyen érték, akkor annak értéke undefined. undefined nem létezik null speciális kulcsszó, amely jelzi, hogy hiányzik az értéke 35
Változók Változók deklarálása var myschool; Változók inicializálása var myschool = "VTŠ Subotica"; var myschool; myschool = "VTŠ Subotica"; var home = "c:\\temp" 36
Változók var name = new String("Hello World!"); var x = new Number(123); var y = new Boolean(true); Minden változó a JavaScriptben lehet objektum! Változó típusát a typeof függvényel tudjuk megszerezni. var k = typeof("123"); var x; // undefined document.write(u); // error, u is undefined u=3; 37
Konstansok const school = 'Subotica Tech'; 38
Aritmetikai operátorok Operátor Leírás Példa + összeadás x=y+2 - kivonás x=y-2 * szorzás x=y*2 / osztás x=y/2 % maradékos osztás (moduló képzés) ++ változó értékének növelése eggyel (inkrementálás) -- változó értékének csökkentése eggyel (dekrementálás) x=y%2 x=y++ x=++y x=y-- x=--y 39
Aritmetikai operátorok A + műveletjel szolgálhat sztring típusú változók vagy szöveges értékek összefűzésére is. txt1="my school"; txt2=" is Subotica Tech"; txt3=txt1+txt2; // My school is Subotica Tech txt4="2"+"2"; // "22" A- műveletjel szolgálhat az előjel megadására is negatív értékeknél. mynumber = -15; 40
x=5 és y=6 Logikai operátorok Operátor Leírás Példa && Logikai és művelet Logikai vagy művelet (x<10 && y>5) igaz (x<10 && y<6) hamis (x<10 y==7) igaz (x>10 y>7) hamis! Negáció!(x==y) igaz!(x<y) hamis Feltételes operátor (feltételes hármas) változó=(feltétel)?érték1:érték2 var a = 5; var b = 6; var uzenet = (a<b)?"nagyobb":"kisebb"; document.write(uzenet); 41
Bitszintű operátorok Operátor Leírás & Bitszintű és Bitszintű vagy ^ Bitszintű kizáró vagy ~ Bitszintű negálás << Bitszintű balra eltolás >> Bitszintű jobbra eltolás >>> Előjel nélküli jobbra eltolás 42
Értékadó operátorok Operátor Példa Ezzel egyenértékű = x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y 43
Relációs (összehasonlító) x=6 operátorok: Operátor Leírás Példa == érték egyenlő x==8 hamis x==6 igaz === érték és típus egyenlő x=== 6 hamis x===6 igaz!= érték nem egyenlő x!=8 igaz!== érték és típus nem egyenlő x!== 6 igaz x!==6 hamis > nagyobb x>8 hamis < kisebb x<8 igaz >= nagyobb vagy egyenlő x>=8 igaz <= kisebb vagy egyenlő x<=8 igaz 44
var n = 50; Számok átalakítása szöveggé var s = n+" hallgató letette a vizsgát."; // "50 hallgató letette a vizsgát." var n_s = n+""; // "50" var str_value1 = String(n); // függvény var str_value2 = n.tostring(); // metódus (a primitív szám típus Number típusú objektummá konvertálódik, hogy ezt a metódust meg lehessen hívni) var k = typeof(str_value2); document.write(str_value2+" tipusa "+k+"<br />"); document.write(str_value2+" tipusa "+typeof(str_value2)+"<br />"); 45
Számok átalakítása szöveggé var n = 255; var binary_string = n.tostring(2); var octal_string = "0"+n.toString(8); var hex_string = "0x"+n.toString(16); document.write(binary_string+"<br />"); document.write(octal_string+"<br />"); document.write(hex_string); 11111111 0377 0xff 46
Számok átalakítása szöveggé var n = 123456.789; document.write(n.tofixed(0)+"<br />"); document.write(n.tofixed(2)+"<br />"); document.write(n.toexponential(1)+"<br />"); document.write(n.toexponential(3)+"<br />"); document.write(n.toprecision(4)+"<br />"); document.write(n.toprecision(7)+"<br />"); 123457 123456.79 1.2e+5 1.235e+5 1.235e+5 123456.8 47
Sztring átalakítása számmá var string_value1 = "55"; var string_value2 = "55.56545 euros"; var num1 = "21"*"2"; var num2 = 2*"2"; var num3 = parseint(string_value1); var num4 = parsefloat(string_value2); var number = string_value1-0; document.write(num1+" "+typeof(num1)+"<br />"); document.write(num2+" "+typeof(num2)+"<br />"); document.write(num3+" "+typeof(num3)+"<br />"); document.write(num4+" "+typeof(num4)+"<br />"); document.write(number+" "+typeof(number)); 42 number 4 number 55 number 55.56545 number 55 number 48
Sztring átalakítása számmá var v1 = "ff"; var v2 = "0xff"; var v3 = "11"; document.write(v1+" "+Number(v1)+"<br />"); document.write(v2+" "+Number(v2)+"<br />"); document.write(v3+" "+Number(v3)+"<hr />"); document.write(v1+" "+parseint(v1,16)+"<br />"); document.write(v2+" "+parseint(v2,16)+"<br />"); document.write(v3+" "+parseint(v3,2)+"<hr />"); ff NaN 0xff 255 11 11 ff 255 0xff 255 11 3 ff NaN 0xff 0 11 11 document.write(v1+" "+parsefloat(v1)+"<br />"); document.write(v2+" "+parsefloat(v2)+"<br />"); document.write(v3+" "+parsefloat(v3)+"<hr />"); 49
Logikai értékek átalakítása var v1 = "1"; var v2 = 1; var v3 = 100/0; var v4 = 0; var v5 = "0"; var v6 = "10 cars"; var v7 = 10/"Apples"; var v8 = ""; document.write(v1+" "+Boolean(v1)+"<br />"); document.write(v2+" "+Boolean(v2)+"<br />"); document.write(v3+" "+Boolean(v3)+"<br />"); document.write(v4+" "+Boolean(v4)+"<br />"); document.write(v5+" "+Boolean(v5)+"<br />"); document.write(v6+" "+Boolean(v6)+"<br />"); document.write(v7+" "+Boolean(v7)+"<br />"); document.write(v8+" "+Boolean(v8)+"<br />"); 1 true 1 true Infinity true 0 false 0 true 10 cars true NaN false false 50
Feltételes utasítások if (feltétel) if (feltétel) else 51
Feltételes utasítások if (feltétel1)... else if (feltétel2)... else if (feltétel3)... else 52
var ev=2013; Feltételes utasítások if(ev%2==0) document.write("páros év"); if(ev>2014) { document.write("nagyobb év"); } else if (ev==2014) { document.write("2014"); } else if (ev%2!=0) { document.write("páratlan év"); } else { document.write("ismeretlen év"); } 53
Switch-case elágazás switch (tesztkifejezés) { case érték1: [utasítás 1] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték1. break; case érték2: [utasítás 2] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték2. break;... default: [utasítás n] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke egyik felsorolt értékkel sem egyezett meg. break; } 54