Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Jaroslav BURDYS 3IT.  Vytvořen Brendanem Eichem ze společnosti Netscape v roce 1995  Nemá nic společného s pr.j. JAVA (snad jen, že jsou oba jazyky.

Podobné prezentace


Prezentace na téma: "Jaroslav BURDYS 3IT.  Vytvořen Brendanem Eichem ze společnosti Netscape v roce 1995  Nemá nic společného s pr.j. JAVA (snad jen, že jsou oba jazyky."— Transkript prezentace:

1 Jaroslav BURDYS 3IT

2

3  Vytvořen Brendanem Eichem ze společnosti Netscape v roce 1995  Nemá nic společného s pr.j. JAVA (snad jen, že jsou oba jazyky založené na pr.j. C)  Název použit pouze z marketingových důvodů (Java byla v té době již poměrně populární)  Dnes jeden z nejrozšířenějších pr.jazyků

4

5

6  Nativně určen pro práci ve webovém prohlížeči (kód je vykonáván přímo prohlížečem, není třeba pluginu => urychlení)  Primárně tedy klient-side skriptovací jazyk (dnes lze i server-side p-cí knihovny Node.js)  Původně čistě skriptovací jazyk se vyvinul v poměrně plnohodnotný programovací jazyk.

7  Interaktivita webových stránek  Kontrola formulářů  Nekonečné scrollování stránek  Parallaxe a jiné animace (knihovna Parallax.js)  Ukázka: matthew.wagerfield.com/parallax/matthew.wagerfield.com/parallax/  Vývoj webových 2D i 3D her běžících v prohlížeči (knihovna 3D.js)  Ukázka: helloracer.com/racer-s/helloracer.com/racer-s/  Gameengine Unity3D a interaktivní 3D applikace:  Ukázka: www.shapespark.com www.shapespark.com  IoT (Internet věcí), roboti, wearable technika…  Vývoj mobilních aplikací (technologie HTML5, PhoneGap/Cordova) (mnoho knihoven: JQuery.js, Angular.js...)

8

9  Objektově orientovaný skriptovací jazyk (objekty založené na prototypech, nikoliv na třídách!)  Multiplatformní  Multiparadigmatický:  imperativní i deklarativní  procedurální i funkcionální  Specifikace ECMAScript (stejně jako ActionScript)

10

11  // - toto je jednořádkový komentář  /* - toto je mnohem delší text a proto je uzavřen do víceřádkového komentáře - */

12  Number (dle specif. ECMAScript 64bitové s dvojitou přesností ) =>  Celá čísla (int, short …)  Reálná čísla (float, double …)  Znaménková (signed …)  Kladné a záporné nekonečno  NaN (Not a Number)  String  Řetězce (string)  Znaky (char)  Boolean  true  false  Undefined (neinicializované proměnné)  undefined  Null  null (inicializuje proměnné jako: „nemá žádnou hodnotu“, narozdíl od ´undefined´ se při vyhodnocování výrazů imlicitně konvertuje na nulu a nevyvolá tak chybové hlášení)  Object (=kolekce vlastností: předchozí datové typy, jiné objekty, funkce) ZJIŠTĚNÍ DATOVÉHO TYPU PROMĚNNÉ/VÝRAZU typeof();

13  Implicitní:  4 + „5“ // => „4“ + „5“ => „45“  null + 5 // => 0 + 5 => 5  Explicitní:  Number(false); // => 0  Number(null); // => 0  Number(„0“); // => 0  Number(„ “); // => 0

14  Příklady, kdy se vrací NaN:  Math.abs(„Jana“) // => NaN  Number(„Jana“) // => NaN  Použití isNaN(): isNaN(NaN); // => true isNaN(undefined); // => true isNaN({ }); // => true isNaN(“Jana”); // => true isNaN(“25”); // => false isNaN(true); // => false isNaN(null); // => false isNaN(„“); isNaN(„ „); // => false POZOR !!! var prvni; první = true; první == první; // => true ALE (protože NaN != NaN): první = NaN; první == první; // => false

15  Matematické: +, -, *, /, %  Relační:  ==, !=, =, 4 == „4“; //=> true  ===, !== 4 === „4“; //=> false, musí se shodovat i datovým typem!  Logické: &&, II,

16  Slabě typovaný jazyk ( datový typ se určuje za běhu podle toho, jakého typu je aktuální hodnota v proměnné ):  var Identifikator; Identifikator = 58; //číslo Identifikator = „Jana se má fajn“; //řetězec Identifikator = [ ]; //pole: literál prázdného pole Identifikator = { }; //objekt: literál prázdného objektu Identifikator = function(){ /* zde následuje tělo f-ce */ }; //funkce: tzv.deklarace výrazem p-cí tzv.anonymní (nepojmenované) f-ce, volání této f-ce by pak bylo: Identifikator();  Pozor na tzv. ZDVIHÁNÍ PROMĚNNÝCH

17  Vlastnosti:  Mutabilní => při deklaraci nezadáváme rozsah pole  Heterogenní var MojePole = [25, “Jana”, [], {}, true];  Deklarace:  1) var MojePole = new Array(); // NEDOPORUČUJE SE  2) var MojePole = [25, “Jana”, [], {}, true]; // literál pole  Použití:  1) přes indexy (začíná od 0)  2) asociativně (přes klíče) //pak je ale lépe použít objekty !

18  Deklarace:  1) deklarací: function Identifikator() { /* zde následuje tělo f-ce */}  2) výrazem: var Identifikator = function(){ /* zde následuje tělo f-ce */ }; volání: Identifikator();  3) konstruktorem: //nedoporučuje se! var Identifikator = new Function(„ /* zde následuje tělo f-ce */ “); volání: Identifikator();  Opět pozor na tzv. ZDVIHÁNÍ PROMĚNNÝCH => doporučuje se varianta 1)

19  Podmínky  if() else  Cykly  while()  do while();  for()  for( var klic in objekt/pole)

20

21  Objekty jsou v JavaScriptu vlastně kolekce (seznamy) vlastností objektu =>

22 var MujObjekt = {}; Toto je první způsob vytvoření objektu: pomocí literálu objektu vytváříme přímo konkrétní objekt (tedy rovnou instanci) Druhý způsob pomocí prototypu (konstruktoru daného typu) viz dále

23  Objekty jsou v JavaScriptu vlastně kolekce (seznamy) vlastností objektu => var MujObjekt = {}; Toto je první způsob vytvoření objektu: toto je prázdný objekt

24  Objekty jsou v JavaScriptu vlastně kolekce (seznamy) vlastností objektu => var MujObjekt = { vlastnost01: hodnota, vlastnost02: hodnota, /* toto je metoda */ vlastnost03: funkce() }; Vlastnosti jsou v seznamu v těle objektu zaváděny ve dvojicích jako klíč:hodnota Mohou být jakéhokoliv typu a to včetně funkcí - tzv. metod objektu (klíč:funkce)

25  Objekty jsou v JavaScriptu vlastně kolekce (seznamy) vlastností objektu => var MujObjekt = { vlastnost01: hodnota, vlastnost02: hodnota, /* toto je metoda */ vlastnost03: funkce() }; Vlastnosti jsou v seznamu v těle objektu zaváděny ve dvojicích jako klíč:hodnota Mohou být jakéhokoliv typu a to včetně funkcí - tzv. metod objektu

26  Uchování dat neobjektově: var napojDruh = „káva“; var napojCena = 25; var napojHorky = true;  Uchování dat objektově: var napoj = { druh: „káva“, cena: 25, horky: true }; V těle objektu je seznam vlastností typu: KLÍČ : HODNOTA

27  Uchování dat neobjektově: var napojDruh = „káva“; var napojCena = 25; var napojHorky = true;  Uchování dat objektově: var napoj = { druh: „káva“, cena: 25, horky: true }; V těle objektu je SEZNAM vlastností typu: KLÍČ : HODNOTA

28  Uchování dat objektově s metodou: var napoj = { druh: „káva“, cena: 25, horky: true ohrat : function(){ if (!napoj.horky) { napoj.horky=true; alert(“Váš nápoj byl ohřán”); } } }; Stejně se tvoří i metody objektu: KLÍČ : FUNKCE

29 var napoj = { druh: „káva“, cena: 25, horky: true, ohrat: function(){ if (!napoj.horky) { napoj.horky=true; alert(“Váš nápoj byl ohřátý”); } } };  Přes tečkovou notaci (jako u objeků): napoj.cena = 30; napoj.ohrat();  Přes klíče (jako u asociativního pole): napoj[”cena”] = 30; //v tomto případě lze jako klíč použít proměnnou!

30  JavaScript nepoužívá k vytváření instancí objektů třídy ale tzv. prototypy  Jedná se o konstruktor objektu – tj. f-ce, která se volá při vytváření objektu a může zároveň inicializovat jeho položky již v době jeho vzniku

31 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

32 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

33 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

34 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

35 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

36 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

37 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

38 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

39 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

40 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

41 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP

42 function Friend(jmeno,vek){ this.jmeno = jmeno; this.vek = vek; this.muz; }; var marek = new Friend(”Marek”,15); marek.muz=true; var lenka = new Friend(”Lenka”, 25); lenka.muz=false; var jan = new Friend(”Jan”, 10); jan.muz=true; var marek = { jmeno:”Marek”, vek:15, muz:true }; var lenka = { jmeno:”Lenka”, vek:25, muz:false }; var jan = { jmeno:”Jan”, vek:10, muz:true }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() PROTOTYP OBJEKT1OBJEKT1 OBJEKT2OBJEKT2 OBJEKT3OBJEKT3 INSTANCE PROTOTYPU 1 INSTANCE PROTOTYPU 2 INSTANCE PROTOTYPU 3


Stáhnout ppt "Jaroslav BURDYS 3IT.  Vytvořen Brendanem Eichem ze společnosti Netscape v roce 1995  Nemá nic společného s pr.j. JAVA (snad jen, že jsou oba jazyky."

Podobné prezentace


Reklamy Google