Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
ZveřejnilAntonín Doležal
1
Jaroslav BURDYS 3IT
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ů
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...)
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)
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)
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
Podobné prezentace
© 2024 SlidePlayer.cz Inc.
All rights reserved.