Úvod do JavaScriptu Jaroslav BURDYS 4T 10.01.2017

Charakteristika jazyka

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

účel 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.

Použití 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/ Vývoj webových 2D i 3D her běžících v prohlížeči (knihovna 3D.js) Ukázka: helloracer.com/racer-s/ Gameengine Unity3D a interaktivní 3D applikace: Ukázka: 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...)

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

Základy JavaScriptu

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

Datové typy (červeně označeny hodnoty) 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();

Přetypování Implicitní: Explicitní: 4 + „5“ // => „4“ + „5“ => „45“ null + 5 // => 0 + 5 => 5 Explicitní: Number(false); // => 0 Number(null); // => 0 Number(„0“); // => 0 Number(„ “); // => 0

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

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

Deklarace 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

POLE Vlastnosti: Deklarace: Použití: Mutabilní Heterogenní => 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 !

funkce 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 */“); Opět pozor na tzv. ZDVIHÁNÍ PROMĚNNÝCH => doporučuje se varianta 1)

Řídící příkazy Podmínky Cykly if() else while() do while(); for(inicializace_iteratoru; podmínka; krok (= inkrementace/dekrementace iterátoru)) for(i=1; i<=100; i++){ alert(“Toto je ” + i + ”.krok ze sta”);} for( var klic in objekt/pole)

OOP v javascriptu

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

Toto je první způsob vytvoření objektu: objekty 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

Toto je první způsob vytvoření objektu: objekty 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 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 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

V těle objektu je seznam vlastností typu: KLÍČ : HODNOTA Objekty - příklad 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

V těle objektu je SEZNAM vlastností typu: KLÍČ : HODNOTA Objekty - příklad 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

Stejně se tvoří i metody objektu: KLÍČ : FUNKCE Objekty - METODY 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

Objekty – přístup k položkám 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!

Objekty – prototyp 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

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, PROTOTYP

Objekty – prototyp function Friend(jmeno,vek){ var marek = { }; }; Přímé vytvoření pomocí literálu objektu Sériové vytvoření instancí pomocí prototypu Friend() 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, OBJEKT1 PROTOTYP OBJEKT2 INSTANCE PROTOTYPU 1 OBJEKT3 INSTANCE PROTOTYPU 2 INSTANCE PROTOTYPU 3