Alapadatok
Év, oldalszám:2020, 59 oldal
Nyelv:magyar
Letöltések száma:83
Feltöltve:2020. május 30.
Méret:1 MB
Intézmény:
-
Megjegyzés:
Csatolmány:-
Letöltés PDF-ben:Kérlek jelentkezz be!
Nincs még értékelés. Legyél Te az első!
Tartalmi kivonat
Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.suacrs 1 CLIENT-SERVER 2 Internet technológiák Kliens oldali: -(x)HTML -CSS -JavaScript -XML Szerver oldali: -PHP -ASP -JSP -Node.js JavaScript XML PHP 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 11 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 ECMAScript 2019 4 JavaScript Java JavaScript
Objektum orientált nyelv. Létezik támogatás az objektumokra, osztályokra, öröklődésre. Objektalapú. Léteznek beépített objektumok. A programot le kell fordítani a végrehajtás előtt. Értelmezett (interpretált) nyelv, böngészőben végrehajtódik. Az appletek külön állnak az (x)HTML dokumentumtól, ahonnan meghívjuk őket. A programok az (x)HTML dokumentumba integráltak. A változókat deklarálni kell (erős tipizáció). A változókat nem kell deklarálni (gyönge tipizáció). Statikus összekapcsolás: az objektumreferenciának léteznie kell a fordítás ideje alatt. 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 alkalmazások készítése • játekok készítése 6 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 1</title> </head> <body> <script type="text/javascript"> var city = "Subotica"; var school = "Subotica Tech"; document.write(school); </script> </body> </html> 7 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 2</title> </head> <body> <script> var city = "Subotica"; document.write(city); </script> <p>Hello WORLD!</p>
<script> var school = "Subotica Tech"; document.write(school); </script> </body> </html> 8 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 3</title> </head> <body> <script src="1.js"></script> </body> </html> 9 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 4</title> <script src="1.js"></script> </head> <body> </body> </html> 10 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 5</title> <script
src="1.js"></script> </head> <body> <script src="2.js"></script> </body> </html> 11 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 6</title> </head> <body> <script type="text/javascript"> var city; city = "Subotica"; document.write(city); </script> <noscript> <p>Your browser doesnt support JavaScript</p> </noscript> </body> </html> 12 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 7</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 • Szimbólumok (ECMAScript 2015) • null • undefined • Date típusú objektum • Math típusú objektum • Reguláris kifejezések • Objektumok, amelyek hibákat reprezentálnak 21 Speciális numerikus értékek Konstans Jelentés Infinity speciális érték a végtelen jelölésére NaN (Not-a-Number) speciális “nem szám” érték Number.MAX VALUE legnagyobb szám a
JavaScriptben Number.MIN VALUE legkisebb szám a JavaScriptben Number.NaN speciális “nem szám” érték Number.POSITIVE INFINITY speciális érték a végtelen jelölésére Number.NEGATIVE INFINITY 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 + 78 + 7 = 255 (0o377)
Lebegőpontos literálok: 3.14 2345.789 6.02e23 24 Karakterláncok (sztringek) Sztring literálok "" // üres sztring Subotica "3.14" "JavaScript is script language" name="myform" Speciális karaktereket az escape karakterrel (backslash ) együtt szerepeltethetünk egy sztring literálban. Karakter Jelentés Visszalépés (Backspace) Tabulátor (Tab) Új sor (New line) v Vertikális tabulátor (Vertical tab) f Lapdobás (Form feed) 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ények Függvény típusú literálok: 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.myFormmyButton Objektum metódusa objektum.metódus() document.write("Hello World!") 29 Objektumok Objektum típusú literálok var point = {x:2.3, y:-12}; 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 (lokális, globális) 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 Változók var school = "VTS"; var city = "024"; function writeSchool() { var school = "vts2"; var city = "Subotica"; //window.city = "036"; city = "0366"; document.write(school); document.write(" "+city+"<hr>"); student = "My name"; } writeSchool(); document.write(school+" "+city); document.write("<hr>"+student); 38 Változók Blokktartomány, lokális, globális let mySchool = "VTŠ Subotica"; let myCity; myCity = "Subotica";
document.write(mySchool+"<br>"); document.write(myCity); 39 Változók var s = true; let z = 1; if (s) { var x = 5; } console.log(x); // x is 5 console.log(windowx); if (s) { let y = 5; } console.log(y); //ReferenceError: y is not defined console.log(windowz); // undefined 40 Változók var a; console.log(The value of a is + a); console.log(The value of b is + b); var b; console.log(The value of c is + c); // Uncaught ReferenceError: c is not defined let x; console.log(The value of x is + x); console.log(The value of y is + y); // Uncaught ReferenceError: y is not defined let y; 41 Szigorú mód "use strict"; pi = 3.14; document.write(pi); var pi; pi2 = 3.14; document.write(pi2); let pi2; 42 Konstansok const MY SCHOOL = Subotica Tech; 43 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) x=y%2 ++
változó értékének növelése eggyel (inkrementálás) x=y++ x=++y -- változó értékének csökkentése eggyel (dekrementálás) x=y-x=--y 44 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“ txt5=2+2+"2"; // "42" txt6="2"+2+2; // "222" A- műveletjel szolgálhat az előjel megadására is negatív értékeknél. myNumber = -15; 45 Logikai operátorok x=5 és y=6 Operátor Leírás Példa && Logikai és művelet (x<10 && y>5) igaz (x<10 && y<6) hamis || Logikai vagy művelet (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); 46 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 47 Értékadó operátorok Ezzel egyenértékű Operátor Példa = 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 48 Relációs (összehasonlító) operátorok: x=6 Operátor Leírás Példa == érték egyenlő x==8 x==6 === é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 hamis igaz 49 Számok átalakítása szöveggé var n = 50; 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>"); 50 Számok átalakítása szöveggé var var var var n = 255; binary string = n.toString(2); octal string = "0"+n.toString(8); hex string = "0x"+n.toString(16); document.write(binary string+"<br>"); document.write(octal string+"<br>"); document.write(hex string); 11111111 0377 0xff 51 Számok átalakítása szöveggé
var n = 123456.789; document.write(ntoFixed(0)+"<br>"); document.write(ntoFixed(2)+"<br>"); document.write(ntoExponential(1)+"<br>"); document.write(ntoExponential(3)+"<br>"); document.write(ntoPrecision(4)+"<br>"); document.write(ntoPrecision(7)+"<br>"); 123457 123456.79 1.2e+5 1.235e+5 1.235e+5 123456.8 52 Sztring átalakítása számmá var var var var var var var string value1 = "55"; string value2 = "55.56545 euros"; num1 = "21"*"2"; num2 = 2*"2"; num3 = parseInt(string value1); num4 = parseFloat(string value2); 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 53 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>"); 54 Logikai értékek átalakítása var var var var var var var var
v1 v2 v3 v4 v5 v6 v7 v8 = = = = = = = = "1"; 1; 100/0; 0; "0"; "10 cars"; 10/"Apples"; ""; document.write(v1+" document.write(v2+" document.write(v3+" document.write(v4+" document.write(v5+" document.write(v6+" document.write(v7+" document.write(v8+" "+Boolean(v1)+"<br>"); "+Boolean(v2)+"<br>"); "+Boolean(v3)+"<br>"); "+Boolean(v4)+"<br>"); "+Boolean(v5)+"<br>"); "+Boolean(v6)+"<br>"); "+Boolean(v7)+"<br>"); "+Boolean(v8)+"<br>"); 1 true 1 true Infinity true 0 false 0 true 10 cars true NaN false false 55 Feltételes utasítások if (feltétel) if (feltétel) else 56 Feltételes utasítások if (feltétel1) . else if (feltétel2) . else if (feltétel3) . else 57 Feltételes utasítások var ev=2013;
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"); } 58 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; } 59
Objektum orientált nyelv. Létezik támogatás az objektumokra, osztályokra, öröklődésre. Objektalapú. Léteznek beépített objektumok. A programot le kell fordítani a végrehajtás előtt. Értelmezett (interpretált) nyelv, böngészőben végrehajtódik. Az appletek külön állnak az (x)HTML dokumentumtól, ahonnan meghívjuk őket. A programok az (x)HTML dokumentumba integráltak. A változókat deklarálni kell (erős tipizáció). A változókat nem kell deklarálni (gyönge tipizáció). Statikus összekapcsolás: az objektumreferenciának léteznie kell a fordítás ideje alatt. 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 alkalmazások készítése • játekok készítése 6 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 1</title> </head> <body> <script type="text/javascript"> var city = "Subotica"; var school = "Subotica Tech"; document.write(school); </script> </body> </html> 7 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 2</title> </head> <body> <script> var city = "Subotica"; document.write(city); </script> <p>Hello WORLD!</p>
<script> var school = "Subotica Tech"; document.write(school); </script> </body> </html> 8 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 3</title> </head> <body> <script src="1.js"></script> </body> </html> 9 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 4</title> <script src="1.js"></script> </head> <body> </body> </html> 10 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 5</title> <script
src="1.js"></script> </head> <body> <script src="2.js"></script> </body> </html> 11 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 6</title> </head> <body> <script type="text/javascript"> var city; city = "Subotica"; document.write(city); </script> <noscript> <p>Your browser doesnt support JavaScript</p> </noscript> </body> </html> 12 JavaScript A JavaScript használata az HTML oldalon: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 7</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 • Szimbólumok (ECMAScript 2015) • null • undefined • Date típusú objektum • Math típusú objektum • Reguláris kifejezések • Objektumok, amelyek hibákat reprezentálnak 21 Speciális numerikus értékek Konstans Jelentés Infinity speciális érték a végtelen jelölésére NaN (Not-a-Number) speciális “nem szám” érték Number.MAX VALUE legnagyobb szám a
JavaScriptben Number.MIN VALUE legkisebb szám a JavaScriptben Number.NaN speciális “nem szám” érték Number.POSITIVE INFINITY speciális érték a végtelen jelölésére Number.NEGATIVE INFINITY 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 + 78 + 7 = 255 (0o377)
Lebegőpontos literálok: 3.14 2345.789 6.02e23 24 Karakterláncok (sztringek) Sztring literálok "" // üres sztring Subotica "3.14" "JavaScript is script language" name="myform" Speciális karaktereket az escape karakterrel (backslash ) együtt szerepeltethetünk egy sztring literálban. Karakter Jelentés Visszalépés (Backspace) Tabulátor (Tab) Új sor (New line) v Vertikális tabulátor (Vertical tab) f Lapdobás (Form feed) 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ények Függvény típusú literálok: 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.myFormmyButton Objektum metódusa objektum.metódus() document.write("Hello World!") 29 Objektumok Objektum típusú literálok var point = {x:2.3, y:-12}; 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 (lokális, globális) 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 Változók var school = "VTS"; var city = "024"; function writeSchool() { var school = "vts2"; var city = "Subotica"; //window.city = "036"; city = "0366"; document.write(school); document.write(" "+city+"<hr>"); student = "My name"; } writeSchool(); document.write(school+" "+city); document.write("<hr>"+student); 38 Változók Blokktartomány, lokális, globális let mySchool = "VTŠ Subotica"; let myCity; myCity = "Subotica";
document.write(mySchool+"<br>"); document.write(myCity); 39 Változók var s = true; let z = 1; if (s) { var x = 5; } console.log(x); // x is 5 console.log(windowx); if (s) { let y = 5; } console.log(y); //ReferenceError: y is not defined console.log(windowz); // undefined 40 Változók var a; console.log(The value of a is + a); console.log(The value of b is + b); var b; console.log(The value of c is + c); // Uncaught ReferenceError: c is not defined let x; console.log(The value of x is + x); console.log(The value of y is + y); // Uncaught ReferenceError: y is not defined let y; 41 Szigorú mód "use strict"; pi = 3.14; document.write(pi); var pi; pi2 = 3.14; document.write(pi2); let pi2; 42 Konstansok const MY SCHOOL = Subotica Tech; 43 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) x=y%2 ++
változó értékének növelése eggyel (inkrementálás) x=y++ x=++y -- változó értékének csökkentése eggyel (dekrementálás) x=y-x=--y 44 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“ txt5=2+2+"2"; // "42" txt6="2"+2+2; // "222" A- műveletjel szolgálhat az előjel megadására is negatív értékeknél. myNumber = -15; 45 Logikai operátorok x=5 és y=6 Operátor Leírás Példa && Logikai és művelet (x<10 && y>5) igaz (x<10 && y<6) hamis || Logikai vagy művelet (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); 46 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 47 Értékadó operátorok Ezzel egyenértékű Operátor Példa = 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 48 Relációs (összehasonlító) operátorok: x=6 Operátor Leírás Példa == érték egyenlő x==8 x==6 === é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 hamis igaz 49 Számok átalakítása szöveggé var n = 50; 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>"); 50 Számok átalakítása szöveggé var var var var n = 255; binary string = n.toString(2); octal string = "0"+n.toString(8); hex string = "0x"+n.toString(16); document.write(binary string+"<br>"); document.write(octal string+"<br>"); document.write(hex string); 11111111 0377 0xff 51 Számok átalakítása szöveggé
var n = 123456.789; document.write(ntoFixed(0)+"<br>"); document.write(ntoFixed(2)+"<br>"); document.write(ntoExponential(1)+"<br>"); document.write(ntoExponential(3)+"<br>"); document.write(ntoPrecision(4)+"<br>"); document.write(ntoPrecision(7)+"<br>"); 123457 123456.79 1.2e+5 1.235e+5 1.235e+5 123456.8 52 Sztring átalakítása számmá var var var var var var var string value1 = "55"; string value2 = "55.56545 euros"; num1 = "21"*"2"; num2 = 2*"2"; num3 = parseInt(string value1); num4 = parseFloat(string value2); 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 53 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>"); 54 Logikai értékek átalakítása var var var var var var var var
v1 v2 v3 v4 v5 v6 v7 v8 = = = = = = = = "1"; 1; 100/0; 0; "0"; "10 cars"; 10/"Apples"; ""; document.write(v1+" document.write(v2+" document.write(v3+" document.write(v4+" document.write(v5+" document.write(v6+" document.write(v7+" document.write(v8+" "+Boolean(v1)+"<br>"); "+Boolean(v2)+"<br>"); "+Boolean(v3)+"<br>"); "+Boolean(v4)+"<br>"); "+Boolean(v5)+"<br>"); "+Boolean(v6)+"<br>"); "+Boolean(v7)+"<br>"); "+Boolean(v8)+"<br>"); 1 true 1 true Infinity true 0 false 0 true 10 cars true NaN false false 55 Feltételes utasítások if (feltétel) if (feltétel) else 56 Feltételes utasítások if (feltétel1) . else if (feltétel2) . else if (feltétel3) . else 57 Feltételes utasítások var ev=2013;
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"); } 58 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; } 59
