Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

JavaScript.

Hasonló előadás


Az előadások a következő témára: "JavaScript."— Előadás másolata:

1 JavaScript

2 Bevezetés Kezdetek Nyelvi elemek Típusok, típuskonstrukciók
Vezérlési szerkezetek Alprogramok Osztály,Objektum Kivételkezelés

3 Kezdetek Sun és Netscape (1995) HTML kibővítése Dinamikus oldalak
JavaScript nem Java Értelmezés van,nem fordítás Objektum alapú és nem OO HTML-be integrált Gyenge típusosság

4 Szintaxis HTML <html> <script> //Böngésző által támogatott rész </script> <noscript> //Ha nem ismeri a böngésző </noscript> <body> </body> </html>

5 Nyelvi elemek Jelkészlet: Unicode Azonosítók Literálok Megjegyzések
Eleje: betű vagy „_” Kis és nagybetű érzékeny Literálok Egész: Decimális,Hexa,Oktális Lebegőpontos,Boolean,String(speciális karakterek) Megjegyzések Deklarálás: var név; (let)

6 Adattípusok Típuslekérdezés: typeof number string boolean undefined
null function object Típuslekérdezés: typeof function nothing(){}; typeof nothing() == "undefined" typeof nothing == "function" typeof new nothing() == "object"

7 Típusok Dinamikusan tipizált nyelv Elemi típusok: Szám(3 számrendszer)
Logikai(true,false) Szöveg var lit = „String literál"; var obj = new String("String objektum"); var lit2 = String(„new operátor nélkül ez is literál.");

8 Típuskonstrukciók Tömb Létrehozás: var longVector = new Array(1000);
var shortVector = new Array(); var evens = new Array(0,2,4,6,8); var odds = [1,3,5,7,9]; function range(begin, end) { for (let i = begin; i < end; ++i) { yield i; } } var ten_squares = [i * i for each (i in range(0, 10))];

9 Tömbök Méret változhat. Tetszőleges adatszerkezet. „Asszociatív tömb”:
NewArray = [, "második elem", , "negyedik elem"]; var twoDim = [ [11,12], [21,22] ]; Méret változhat. Tetszőleges adatszerkezet. „Asszociatív tömb”: var myArray = new Array(); myArray["a"] = 100; Hivatkozás: myArray.a == 100

10 Tömbök 2 Verem Sor Több egyéb művelet push() és pop()
shift() és unshift() Több egyéb művelet Pl: reverse(), sort() stb.

11 Rekordok var v1; function f1 { // valamilyen visszatérési érték } rec = { a: "szöveg", b: f1, 7: v1; } Hivatkozás: rec.a,rec[7]

12 Típuskonverziók „House ”+ „M.D. ” == „House M.D.” „a” + 1 == „a1” 1 + „1” == „11” == „3” == 2 function nothing(){}; "a"+nothing() == "aundefined"

13 Változók Deklarálás: var a = 1; //globális function main() {
var (függvény szint) let (blokk szint) (1.7 óta) semmi (opcionális: delete változó;) const név = „valami”; var a = 1; //globális function main() { b = 1; //globális var d = 3; //main-en belül someFunction(d); } function someFunction(e) { var c = 2; //ebben a függvényben

14 Let 1 var x = 1, y = 0; let (x = x+5, y = 6) { print(x+y + "\n"); // let miatt lokálisak } print((x + y) + "\n"); // globális Kimenet: 12 1

15 Let 2 var x = 1, y = 0; document.write( let(x = x + 5, y = 6) x+y + " "<br>\n"); document.write(x+y + " "<br>\n");

16 Let vs. Var function varTest() { var x = 31; if (true) { var x = 71; // ugyanaz a változó alert(x); // 71 } alert(x); // 71 function letTest() { let x = 31; let x = 71; // másik változó alert(x); // 31

17 Operátorok Ugyanaz,mint C, Java nyelvekben.

18 Vezérlési szerkezetek
C-ből átvett szintaxis. Destruktúrálható értékadás (mintaillesztés) Pl.: var a = 1; var b = 2; [a, b] = [b, a]; // Egyszerű swap

19 Vezérlési szerkezetek 2
function f() { return [1, 2]; } var a, b; [a, b] = f(); document.write ("A is " + a + " B is " + b + "\n"); function f() { return [1, 2, 3]; } var [a, , b] = f();

20 var people = [ { name: "Mike Smith", family: { mother: "Jane Smith", father: "Harry Smith", sister: "Samantha Smith" }, age: 35 name: "Tom Jones", mother: "Norah Jones", father: "Richard Jones", brother: "Howard Jones" age: 25 } ]; for each (let {name: n, family: { father: f } } in people) { document.write ("Name: " + n + ", Father: " + f + "\n"); } Kimenet: Name: Mike Smith, Father: Harry Smith Name: Tom Jones, Father: Richard Jones

21 Elágazás if ( kifejezés ) { utasítások } else { utasítások } Pl.:
var a = jegyetKap(b, c); if ( a <= 1) { document.write(„Megbuktál!"); } else if (a == 5 ) { document.write(„Kitűnő!"); else { document.write(„Átmentél!");

22 Switch switch (kifejezés) { case címke_1: utasítások; break; case címke_2: utasítások; break; default: utasítások; //Nem kötelező } Nincs {} a blokkoknál Kifejezés bármi lehet

23 Switch Pl.: switch (expr) {
case "Oranges": document.write("Oranges are $0.59 a pound."); break; case "Apples": document.write("Apples are $0.32 a pound."); case "Bananas": document.write("Bananas are $0.48 a pound."); case "Cherries": document.write("Cherries are $3.00 a pound."); default: document.write("Sorry, we are out of " + expr"."); }

24 Ciklus C-ből átvett ciklusok: for,do…while,while
Feltétel: logikai,aritmetikai (0 hamis) Break,continue NINCS végtelen ciklus! while (true) { document.print("Hello, world"); }

25 For ciklus for ( inicializálás, ciklusfeltétel, inkrementálás ) { ciklusmag } Objektum attribútumain is léphetünk! function dump_props(obj, obj_name) { var result = ""; for (var i in obj) result += obj_name + "." + i + "=" + obj[i] + "\n"; } return result;

26 For each var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } print(sum); Kimenet: 26

27 With with(obj) statement, vagy with(obj) {...} Pl.: var a, x, y;
var r = 10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI / 2); }

28 Alprogramok Csak function Nem kell típus,csak név
function min(a, b) { return a < b ? a : b ; } 1.8 óta Lambda-kifejezés is egyszerű esetben. function(x) { return x*x; } function(x) x*x

29 Paraméterátadás Függvény is lehet paraméter. Nincs túlterhelés
Arguments tömb //Ismeretlen hosszúságú tömbnél function concat(separator) { var result = ""; for (var i=1; i< arguments.length; i++) result = result + arguments[i] + separator; } return result; concat (".", "egy", "kettő", "három"); Kimenet:"egy.kettő.három"

30 Generátor 1.7 óta function fib() { var i = 0, j = 1; while (true) {
yield i; var t = i; i = j; j += t; } var g = fib(); //g generátor-iteráló objektum for (var i = 0; i < 10; i++) { document.write(g.next() + "<br>\n"); } //next hatására lefut a törzs a yield-ig és vár a következő next-re

31 Osztály,Objektum 2.0-ig nincs osztály!
Function segítségével „szimuláljuk” function Osztalynev() { var adat; // privát változó function _setAdat(a) { // privát függvény adat = a; } function _getAdat() { //szintén privát függvény return adat; this.setAdat = _setAdat; // itt tesszük láthatóvá this.getAdat = _getAdat; var obj = new Osztalynev(); obj.setAdat(5); alert(obj.getAdat());

32 Objektum Az objektumot kiegészíthetjük létrehozás után
var obj = new osztalynev(1, 2); var x = obj.fgv(3,4); obj.ujTag = 4; obj.ujFuggveny = function(a) { this.ujTag = a; }

33 Osztály 2.0 class C { var x:integer = 3; function m() {return x} function n(x) {return x+4} } var c = new C; c.m(); // returns 3 c.n(7); // returns 11 var f:Function = c.m; // returns 3

34 Konstruktor class C { var a:String; constructor function C(p:String) { this.a = "New "+p } constructor function make(p:String) { this.a = "Make "+p //Konstruktor szimulálása static függvénnyel static function obtain(p:String):C {return new C(p)} var c:C = new C("one"); var d:C = C.C("two"); var e:C = C.make("three"); var f:C = C.obtain("four"); c.a; // Returns "New one" d.a; // Returns "New two" e.a; // Returns "Make three" f.a; // Returns "New four"

35 Megjelennek a public, private, virtual parancsok
Egyszeres öröklődést támogat class C { virtual var x:integer; var y:integer; } class D extends C { override function set x(a:integer):integer {y = a*2}

36 Interfész Megjelenik az interface interface I { function f(int):int }
class B implements I function f(i:int):int {return i*i}

37 Kivételkezelés Try-catch-finally szerkezet try{...} catch(e){
if(e instanceof ...) {...} else if (e instanceof ...) {...} ... } catch(e if e instanceof ...) {...} catch(e if e == "kivételnév") {...}

38 Kivételkezelés 2 Hiba dobása: throw try { throw RangeError;
} catch (e) { alert(e.name); } finally { }


Letölteni ppt "JavaScript."

Hasonló előadás


Google Hirdetések