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 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ů

 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.

 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:  IoT (Internet věcí), roboti, wearable technika…  Vývoj mobilních aplikací (technologie HTML5, PhoneGap/Cordova) (mnoho knihoven: JQuery.js, Angular.js...)

 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)

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

 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();

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

 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

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

 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

 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 !

 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)

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

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

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

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

 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)

 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

 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

 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

 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

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!

 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

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

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

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

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

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

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

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

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

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

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

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

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