diff options
Diffstat (limited to 'cs-cz/javascript.html.markdown')
| -rw-r--r-- | cs-cz/javascript.html.markdown | 378 |
1 files changed, 216 insertions, 162 deletions
diff --git a/cs-cz/javascript.html.markdown b/cs-cz/javascript.html.markdown index cbf7687e..408ddde0 100644 --- a/cs-cz/javascript.html.markdown +++ b/cs-cz/javascript.html.markdown @@ -1,7 +1,7 @@ --- language: javascript contributors: - - ["Adam Brenecki", "http://adam.brenecki.id.au"] + - ["Leigh Brenecki", "https://leigh.net.au"] - ["Ariel Krakowski", "http://www.learneroo.com"] translators: - ["Michal Martinek", "https://github.com/MichalMartinek"] @@ -9,33 +9,28 @@ lang: cs-cz filename: javascript-cz.js --- -JavaScript byl vytvořen Brendan Eichem v roce 1995 pro Netscape. Byl původně -zamýšlen jako jednoduchý skriptovací jazyk pro webové stránky, jako doplněk Javy, -která byla zamýšlena pro více komplexní webové aplikace, ale jeho úzké propojení -s webovými stránkami a vestavěná podpora v prohlížečích způsobila, že se stala -více běžná ve webovém frontendu než Java. +JavaScript byl vytvořen Brendanem Eichem v roce 1995 pro Netscape. Původně byl +zamýšlen jako jednoduchý skriptovací jazyk pro webové stránky, jako doplněk +Javy, která byla zamýšlena pro komplexnější webové aplikace. Úzké propojení +JavaScriptu s webovými stránkami a vestavěná podpora v prohlížečích způsobila, +že se stal ve webovém frontendu běžnějším než Java. - -JavaScript není omezen pouze na webové prohlížeče, např. projekt Node.js, -který zprostředkovává samostatně běžící prostředí V8 JavaScriptového enginu z -Google Chrome se stává více a více oblíbený pro serverovou část webových aplikací. - -Zpětná vazba je velmi ceněná. Autora článku můžete kontaktovat (anglicky) na -[@adambrenecki](https://twitter.com/adambrenecki), nebo -[adam@brenecki.id.au](mailto:adam@brenecki.id.au), nebo mě, jakožto překladatele, -na [martinek@ludis.me](mailto:martinek@ludis.me). +JavaScript není omezen pouze na webové prohlížeče. Např. projekt Node.js, +který zprostředkovává samostatně běžící prostředí V8 JavaScriptového jádra z +Google Chrome se stává stále oblíbenější i pro serverovou část webových +aplikací. ```js -// Komentáře jsou jako v zayku C. Jednořádkové komentáře začínájí dvojitým lomítkem, +// Jednořádkové komentáře začínají dvojitým lomítkem, /* a víceřádkové komentáře začínají lomítkem s hvězdičkou a končí hvězdičkou s lomítkem */ -// Vyrazu můžou být spuštěny pomocí ; +// Příkazy mohou být ukončeny středníkem ; delejNeco(); -// ... ale nemusí, středníky jsou automaticky vloženy kdekoliv, -// kde končí řádka, kromě pár speciálních případů -delejNeco() +// ... ale nemusí, protože středníky jsou automaticky vloženy kdekoliv, +// kde končí řádka, kromě pár speciálních případů. +delejNeco(); // Protože tyto případy můžou způsobit neočekávané výsledky, budeme // středníky v našem návodu používat. @@ -44,12 +39,12 @@ delejNeco() // 1. Čísla, řetězce a operátory // JavaScript má jeden číselný typ (čímž je 64-bitový IEEE 754 double). -// Double má 52-bit přesnost, což je dostatečně přesné pro ukládání celých čísel -// do 9✕10¹⁵. +// Double má 52-bitovou přesnost, což je dostatečně přesné pro ukládání celých +// čísel až do 9✕10¹⁵. 3; // = 3 1.5; // = 1.5 -// Základní matematické operace fungují, jak byste očekávali +// Základní matematické operace fungují tak, jak byste očekávali 1 + 1; // = 2 0.1 + 0.2; // = 0.30000000000000004 8 - 1; // = 7 @@ -65,30 +60,30 @@ delejNeco() 18.5 % 7; // = 4.5 // Bitové operace také fungují; když provádíte bitové operace, desetinné číslo -// (float) se převede na celé číslo (int) se znaménkem *do* 32 bitů +// (float) se převede na celé číslo (int) se znaménkem *až do* 32 bitů 1 << 2; // = 4 // Přednost se vynucuje závorkami. (1 + 3) * 2; // = 8 -// Existují 3 hodnoty mimo obor reálných čísel +// Existují 3 hodnoty mimo obor reálných čísel: Infinity; // + nekonečno; výsledek např. 1/0 -Infinity; // - nekonečno; výsledek např. -1/0 NaN; // výsledek např. 0/0, znamená, že výsledek není číslo ('Not a Number') -// Také existují hodnoty typu bool +// Také existují hodnoty typu boolean. true; // pravda false; // nepravda -// Řetězce znaků jsou obaleny ' nebo ". +// Řetězce znaků jsou obaleny ' nebo ". 'abc'; -"Ahoj světe!"; +"Hello, world"; -// Negace se tvoří pomocí ! +// Negace se tvoří pomocí znaku ! !true; // = false !false; // = true -// Rovnost se porovnává === +// Rovnost se porovnává pomocí === 1 === 1; // = true 2 === 1; // = false @@ -103,16 +98,16 @@ false; // nepravda 2 >= 2; // = true // Řetězce znaků se spojují pomocí + -"Ahoj " + "světe!"; // = "Ahoj světe!" +"Hello " + "world!"; // = "Hello world!" -// ... což funguje nejenom s řetězci +// ... což funguje nejen s řetězci "1, 2, " + 3; // = "1, 2, 3" -"Ahoj " + ["světe", "!"] // = "Ahoj světe,!" +"Hello " + ["world", "!"]; // = "Hello world,!" // a porovnávají se pomocí < nebo > "a" < "b"; // = true -// Rovnost s převodem typů se dělá pomocí == ... +// Rovnost s převodem typů se dělá za pomoci dvojitého rovnítka... "5" == 5; // = true null == undefined; // = true @@ -124,24 +119,24 @@ null === undefined; // = false 13 + !0; // 14 "13" + !0; // '13true' -// Můžeme přistupovat k jednotlivým znakům v řetězci pomocí charAt` +// Můžeme přistupovat k jednotlivým znakům v řetězci pomocí `charAt` "Toto je řetězec".charAt(0); // = 'T' -// ...nebo použít `substring` k získání podřetězce -"Ahoj světe".substring(0, 4); // = "Ahoj" +// ...nebo použít `substring` k získání podřetězce. +"Hello world".substring(0, 5); // = "Hello" -// `length` znamená délka a je to vlastnost, takže nepoužívejte () -"Ahoj".length; // = 4 +// `length` znamená délka a je to vlastnost, takže nepoužívejte (). +"Hello".length; // = 5 // Existují také typy `null` a `undefined`. -null; // značí, že žádnou hodnotu -undefined; // značí, že hodnota nebyla definovaná (ikdyž +null; // obvykle označuje něco záměrně bez hodnoty +undefined; // obvykle označuje, že hodnota není momentálně definovaná (ačkoli // `undefined` je hodnota sama o sobě) -// false, null, undefined, NaN, 0 and "" vrací nepravdu (false). Všechno ostatní -// vrací pravdu (true).. -// Všimněte si, že 0 vrací nepravdu, ale "0" vrací pravdu, ikdyž 0 == "0" -// vrací pravdu +// false, null, undefined, NaN, 0 a "" vrací nepravdu (false). Všechno ostatní +// vrací pravdu (true). +// Všimněte si, že 0 vrací nepravdu, ale "0" vrací pravdu, i když 0 == "0" +// vrací pravdu. /////////////////////////////////// // 2. Proměnné, pole a objekty @@ -151,11 +146,11 @@ undefined; // značí, že hodnota nebyla definovaná (ikdyž // znak `=`. var promenna = 5; -// když vynecháte slůvko 'var' nedostanete chybovou hlášku... +// Když vynecháte slůvko 'var', nedostanete chybovou hlášku... jinaPromenna = 10; -// ...ale vaše proměnná bude vytvořena globálně, bude vytvořena v globálním -// oblasti působnosti, ne jenom v lokálním tam, kde jste ji vytvořili +// ...ale vaše proměnná bude vytvořena globálně. Bude vytvořena v globální +// oblasti působnosti, tedy nejenom v lokální tam, kde jste ji vytvořili. // Proměnné vytvořené bez přiřazení obsahují hodnotu undefined. var dalsiPromenna; // = undefined @@ -163,114 +158,136 @@ var dalsiPromenna; // = undefined // Pokud chcete vytvořit několik proměnných najednou, můžete je oddělit čárkou var someFourthVar = 2, someFifthVar = 4; -// Existuje kratší forma pro matematické operace na proměnné +// Existuje kratší forma pro matematické operace nad proměnnými promenna += 5; // se provede stejně jako promenna = promenna + 5; -// promenna je ted 10 +// promenna je teď 10 promenna *= 10; // teď je promenna rovna 100 // a tohle je způsob, jak přičítat a odečítat 1 promenna++; // teď je promenna 101 promenna--; // zpět na 100 -// Pole jsou uspořádané seznamy hodnot jakéhokoliv typu -var mojePole = ["Ahoj", 45, true]; +// Pole jsou uspořádané seznamy hodnot jakéhokoliv typu. +var myArray = ["Ahoj", 45, true]; // Jednotlivé hodnoty jsou přístupné přes hranaté závorky. // Členové pole se začínají počítat na nule. myArray[1]; // = 45 -// Pole je proměnlivé délky a členové se můžou měnit -myArray.push("Světe"); +// Pole je proměnlivé délky a členové se můžou měnit. +myArray.push("World"); myArray.length; // = 4 // Přidání/změna na specifickém indexu myArray[3] = "Hello"; -// JavaScriptové objekty jsou stejné jako asociativní pole v jinných programovacích +// Přidání nebo odebrání člena ze začátku nebo konce pole +myArray.unshift(3); // Přidej jako první člen +someVar = myArray.shift(); // Odstraň prvního člena a vrať jeho hodnotu +myArray.push(3); // Přidej jako poslední člen +someVar = myArray.pop(); // Odstraň posledního člena a vrať jeho hodnotu + +// Spoj všechny členy pole středníkem +var myArray0 = [32,false,"js",12,56,90]; +myArray0.join(";") // = "32;false;js;12;56;90" + +// Vrať část pole s elementy od pozice 1 (včetně) do pozice 4 (nepočítaje) +myArray0.slice(1,4); // = [false,"js",12] + +// Odstraň čtyři členy od pozice 2, vlož následující +// "hi","wr" and "ld"; vrať odstraněné členy +myArray0.splice(2,4,"hi","wr","ld"); // = ["js",12,56,90] +// myArray0 === [32,false,"hi","wr","ld"] + +// JavaScriptové objekty jsou stejné jako asociativní pole v jiných programovacích // jazycích: je to neuspořádaná množina páru hodnot - klíč:hodnota. -var mujObjekt = {klic1: "Ahoj", klic2: "světe"}; +var mujObjekt = {klic1: "Hello", klic2: "World"}; -// Klíče jsou řetězce, ale nejsou povinné uvozovky, pokud jsou validní -// JavaScriptové identifikátory. Hodnoty můžou být jakéhokoliv typu- +// Klíče jsou řetězce, ale nemusí mít povinné uvozovky, pokud jsou validními +// JavaScriptovými identifikátory. Hodnoty můžou být jakéhokoliv typu. var mujObjekt = {klic: "mojeHodnota", "muj jiny klic": 4}; // K hodnotám můžeme přistupovat opět pomocí hranatých závorek -myObj["muj jiny klic"]; // = 4 +mujObjekt["muj jiny klic"]; // = 4 // ... nebo pokud je klíč platným identifikátorem, můžeme přistupovat k // hodnotám i přes tečku mujObjekt.klic; // = "mojeHodnota" // Objekty jsou měnitelné, můžeme upravit hodnoty, nebo přidat nové klíče. -myObj.mujDalsiKlic = true; +mujObjekt.mujDalsiKlic = true; -// Pokud se snažíte přistoupit ke klíči, který není nastaven, dostanete undefined -myObj.dalsiKlic; // = undefined +// Pokud se snažíte přistoupit ke klíči, který neexistuje, dostanete undefined. +mujObjekt.dalsiKlic; // = undefined /////////////////////////////////// // 3. Řízení toku programu -// Syntaxe pro tuto sekci je prakticky stejná jako pro Javu - -// `if` (když) funguje, jak byste čekali. +// Funkce `if` funguje, jak byste čekali. var pocet = 1; if (pocet == 3){ // provede, když se pocet rovná 3 } else if (pocet == 4){ // provede, když se pocet rovná 4 } else { - // provede, když je pocet cokoliv jinného + // provede, když je pocet cokoliv jiného } -// Stejně tak cyklus while +// Stejně tak cyklus `while`. while (true){ - // nekonečný cyklus + // nekonečný cyklus! } -// Do-while cyklus je stejný jako while, akorát se vždy provede aspoň jednou +// Do-while cyklus je stejný jako while, akorát se vždy provede aspoň jednou. var vstup; do { vstup = nactiVstup(); } while (!jeValidni(vstup)) -// Cyklus for je stejný jako v Javě nebo jazyku C +// Cyklus `for` je stejný jako v Javě nebo jazyku C: // inicializace; podmínka pro pokračování; iterace. -for (var i = 0; i < 3; i++){ - // provede třikrát +for (var i = 0; i < 5; i++){ + // provede se pětkrát } -// Cyklus For-in iteruje přes každo vlastnost prototypu -var popis = ""; -var osoba = {prijmeni:"Paul", jmeno:"Ken", vek:18}; -for (var x in osoba){ - popis += osoba[x] + " "; +// Opuštění cyklu s návěštím je podobné jako v Javě +outer: +for (var i = 0; i < 10; i++) { + for (var j = 0; j < 10; j++) { + if (i == 5 && j ==5) { + break outer; + // opustí vnější (outer) cyklus místo pouze vnitřního (inner) cyklu + } + } } -//Když chcete iterovat přes vlastnosti, které jsou přímo na objektu a nejsou -//zděněné z prototypů, kontrolujte vlastnosti přes hasOwnProperty() +// Cyklus For-in iteruje přes každou vlastnost prototypu var popis = ""; -var osoba = {prijmeni:"Jan", jmeno:"Novák", vek:18}; +var osoba = {prijmeni:"Paul", jmeno:"Ken", vek:18}; for (var x in osoba){ - if (osoba.hasOwnProperty(x)){ - popis += osoba[x] + " "; - } -} + popis += osoba[x] + " "; +} // popis = 'Paul Ken 18 ' -// for-in by neměl být použit pro pole, pokud záleží na pořadí indexů. -// Neexistuje jistota, že for-in je vrátí ve správném pořadí. +// Příkaz for/of umožňuje iterovat iterovatelné objekty (včetně vestavěných typů +// String, Array, například polím podobným argumentům nebo NodeList objektům, +// TypeArray, Map a Set, či uživatelsky definované iterovatelné objekty). +var myPets = ""; +var pets = ["cat", "dog", "hamster", "hedgehog"]; +for (var pet of pets){ + myPets += pet + " "; +} // myPets = 'cat dog hamster hedgehog ' // && je logické a, || je logické nebo if (dum.velikost == "velký" && dum.barva == "modrá"){ dum.obsahuje = "medvěd"; } if (barva == "červená" || barva == "modrá"){ - // barva je červená nebo modtrá + // barva je červená nebo modrá } // && a || jsou praktické i pro nastavení základních hodnot var jmeno = nejakeJmeno || "default"; - // `switch` zkoumá přesnou rovnost (===) // Používejte 'break;' po každé možnosti, jinak se provede i možnost za ní. znamka = 'B'; @@ -289,8 +306,9 @@ switch (znamka) { break; } + //////////////////////////////////////////////////////// -// 4. Funckce, Oblast platnosti (scope) a Vnitřní funkce +// 4. Funkce, Oblast platnosti (scope) a Vnitřní funkce // JavaScriptové funkce jsou definovány slůvkem `function`. function funkce(text){ @@ -302,12 +320,9 @@ funkce("něco"); // = "NĚCO" // jako slůvko return, jinak se vrátí 'undefined', kvůli automatickému vkládání // středníků. Platí to zejména pro Allmanův styl zápisu. -function funkce() -{ +function funkce(){ return // <- zde je automaticky vložen středník - { - tohleJe: "vlastnost objektu" - } + { tohleJe: "vlastnost objektu"}; } funkce(); // = undefined @@ -327,9 +342,9 @@ function myFunction(){ setInterval(myFunction, 5000); // Objekty funkcí nemusíme ani deklarovat pomocí jména, můžeme je napsat jako -// ananymní funkci přímo vloženou jako argument +// anonymní funkci přímo vloženou jako argument setTimeout(function(){ - // tento kód bude zavolán za 5 vteřin + // tento kód bude zavolán za 5 vteřin }, 5000); // JavaScript má oblast platnosti funkce, funkce ho mají, ale jiné bloky ne @@ -339,21 +354,21 @@ if (true){ i; // = 5 - ne undefined, jak byste očekávali v jazyku, kde mají bloky svůj // rámec působnosti -// Toto je běžný model,který chrání před únikem dočasných proměnných do +// Toto je běžný model, který chrání před únikem dočasných proměnných do //globální oblasti (function(){ var docasna = 5; - // Můžeme přistupovat k globálního oblasti přes přiřazování globalním + // Můžeme přistupovat ke globálního oblasti přes přiřazování globálním // objektům. Ve webovém prohlížeči je to vždy 'window`. Globální objekt - // může mít v jiných prostředích jako Node.js jinné jméno. + // může mít v jiných prostředích jako Node.js jiné jméno. window.trvala = 10; })(); docasna; // způsobí ReferenceError trvala; // = 10 -// Jedna z nejvice mocných vlastnosti JavaScriptu je vnitřní funkce. Je to funkce -// definovaná v jinné funkci, vnitřní funkce má přístup ke všem proměnným ve -// vnější funkci, dokonce i poté, co funkce skončí +// Jedna z nejmocnějších vlastností JavaScriptu je vnitřní funkce. Je to funkce +// definovaná v jiné funkci. Vnitřní funkce má přístup ke všem proměnným ve +// vnější funkci, dokonce i poté, co vnější funkce skončí. function ahojPoPetiVterinach(jmeno){ var prompt = "Ahoj, " + jmeno + "!"; // Vnitřní funkce je dána do lokální oblasti platnosti, jako kdyby byla @@ -362,33 +377,33 @@ function ahojPoPetiVterinach(jmeno){ alert(prompt); } setTimeout(vnitrni, 5000); - // setTimeout je asynchronní, takže funkce ahojPoPetiVterinach se ukončí - // okamžitě, ale setTimeout zavolá funkci vnitrni až poté. Avšak protože - // vnitrni je definována přes ahojPoPetiVterinach, má pořád přístup k + // setTimeout je asynchronní, takže se funkce ahojPoPetiVterinach ukončí + // okamžitě, ale setTimeout zavolá funkci vnitrni až poté. Avšak + // vnitrni je definována přes ahojPoPetiVterinach a má pořád přístup k // proměnné prompt, když je konečně zavolána. } ahojPoPetiVterinach("Adam"); // otevře popup s "Ahoj, Adam!" za 5s /////////////////////////////////////////////////// -// 5. Více o objektech, konstuktorech a prototypech +// 5. Více o objektech, konstruktorech a prototypech -// Objekty můžou obsahovat funkce +// Objekty můžou obsahovat funkce. var mujObjekt = { mojeFunkce: function(){ - return "Ahoj světe!"; + return "Hello world!"; } }; -mujObjekt.mojeFunkce(); // = "Ahoj světe!" +mujObjekt.mojeFunkce(); // = "Hello world!" // Když jsou funkce z objektu zavolány, můžou přistupovat k objektu přes slůvko // 'this'' var mujObjekt = { - text: "Ahoj světe!", + text: "Hello world!", mojeFunkce: function(){ return this.text; } }; -mujObjekt.mojeFunkce(); // = "Ahoj světe!" +mujObjekt.mojeFunkce(); // = "Hello world!" // Slůvko this je nastaveno k tomu, kde je voláno, ne k tomu, kde je definováno // Takže naše funkce nebude fungovat, když nebude v kontextu objektu. @@ -396,23 +411,23 @@ var mojeFunkce = mujObjekt.mojeFunkce; mojeFunkce(); // = undefined // Opačně, funkce může být přiřazena objektu a může přistupovat k objektu přes -// this, i když nebyla přímo v definici- +// this, i když nebyla přímo v definici. var mojeDalsiFunkce = function(){ return this.text.toUpperCase(); } mujObjekt.mojeDalsiFunkce = mojeDalsiFunkce; -mujObjekt.mojeDalsiFunkce(); // = "AHOJ SVĚTE!" +mujObjekt.mojeDalsiFunkce(); // = "HELLO WORLD!" // Můžeme také specifikovat, v jakém kontextu má být funkce volána pomocí // `call` nebo `apply`. var dalsiFunkce = function(s){ return this.text + s; -} -dalsiFunkce.call(mujObjekt, " A ahoj měsíci!"); // = "Ahoj světe! A ahoj měsíci!" +}; +dalsiFunkce.call(mujObjekt, " A ahoj měsíci!"); // = "Hello world! A ahoj měsíci!" -// Funkce `apply`je velmi podobná, akorát bere jako druhý argument pole argumentů -dalsiFunkce.apply(mujObjekt, [" A ahoj slunce!"]); // = "Ahoj světe! A ahoj slunce!" +// Funkce `apply`je velmi podobná, pouze bere jako druhý argument pole argumentů +dalsiFunkce.apply(mujObjekt, [" A ahoj slunce!"]); // = "Hello world! A ahoj slunce!" // To je praktické, když pracujete s funkcí, která bere sekvenci argumentů a // chcete předat pole. @@ -425,38 +440,42 @@ Math.min.apply(Math, [42, 6, 27]); // = 6 // použijte `bind`. var pripojenaFunkce = dalsiFunkce.bind(mujObjekt); -pripojenaFunkce(" A ahoj Saturne!"); // = "Ahoj světe! A ahoj Saturne!" +pripojenaFunkce(" A ahoj Saturne!"); // = "Hello world! A ahoj Saturne!" -// `bind` může být použito čatečně částečně i k používání +// `bind` může být použito částečně k provázání funkcí -var nasobeni = function(a, b){ return a * b; } +var nasobeni = function(a, b){ return a * b; }; var zdvojeni = nasobeni.bind(this, 2); zdvojeni(8); // = 16 // Když zavoláte funkci se slůvkem 'new', vytvoří se nový objekt a // a udělá se dostupný funkcím skrz slůvko 'this'. Funkcím volaným takto se říká -// konstruktory +// konstruktory. var MujKonstruktor = function(){ this.mojeCislo = 5; -} +}; mujObjekt = new MujKonstruktor(); // = {mojeCislo: 5} mujObjekt.mojeCislo; // = 5 -// Každý JsavaScriptový objekt má prototyp. Když budete přistupovat k vlasnosti -// objektu, který neexistuje na objektu, tak se JS koukne do prototypu. +// Na rozdíl od nejznámějších objektově orientovaných jazyků, JavaScript nezná +// koncept instancí vytvořených z tříd. Místo toho Javascript kombinuje +// vytváření instancí a dědění do konceptu zvaného 'prototyp'. + +// Každý JavaScriptový objekt má prototyp. Když budete přistupovat k vlastnosti +// objektu, který neexistuje na objektu, tak se JS podívá do prototypu. // Některé JS implementace vám umožní přistupovat k prototypu přes magickou // vlastnost '__proto__'. I když je toto užitečné k vysvětlování prototypů, není -// to součást standardu, ke standartní způsobu k používání prototypu se dostaneme -// později. +// to součást standardu. Ke standardnímu způsobu používání prototypu se +// dostaneme později. var mujObjekt = { - mujText: "Ahoj svete!" + mujText: "Hello world!" }; var mujPrototyp = { smyslZivota: 42, mojeFunkce: function(){ - return this.mujText.toLowerCase() + return this.mujText.toLowerCase(); } }; @@ -464,7 +483,7 @@ mujObjekt.__proto__ = mujPrototyp; mujObjekt.smyslZivota; // = 42 // Toto funguje i pro funkce -mujObjekt.mojeFunkce(); // = "Ahoj světe!" +mujObjekt.mojeFunkce(); // = "Hello world!" // Samozřejmě, pokud není vlastnost na vašem prototypu, tak se hledá na // prototypu od prototypu atd. @@ -474,21 +493,41 @@ mujPrototyp.__proto__ = { mujObjekt.mujBoolean; // = true -// Zde neni žádné kopírování; každý objekt ukládá referenci na svůj prototyp -// Toto znamená, že můžeme měnit prototyp a změny se projeví všude +// Zde není žádné kopírování; každý objekt ukládá referenci na svůj prototyp +// Toto znamená, že můžeme měnit prototyp a změny se projeví všude. mujPrototyp.smyslZivota = 43; -mujObjekt.smyslZivota // = 43 +mujObjekt.smyslZivota; // = 43 + +// Příkaz for/in umožňuje iterovat vlastnosti objektu až do úrovně null +// prototypu. +for (var x in myObj){ + console.log(myObj[x]); +} +///Vypíše: +// Hello world! +// 43 +// [Function: myFunc] + +// Pro výpis pouze vlastností patřících danému objektu a nikoli jeho prototypu, +// použijte kontrolu pomocí `hasOwnProperty()`. +for (var x in myObj){ + if (myObj.hasOwnProperty(x)){ + console.log(myObj[x]); + } +} +///Vypíše: +// Hello world! // Zmínili jsme již předtím, že '__proto__' není ve standardu a není cesta, jak // měnit prototyp existujícího objektu. Avšak existují možnosti, jak vytvořit -// nový objekt s daným prototypem +// nový objekt s daným prototypem. // První je Object.create, což je nedávný přídavek do JS a není dostupný zatím // ve všech implementacích. var mujObjekt = Object.create(mujPrototyp); -mujObjekt.smyslZivota // = 43 +mujObjekt.smyslZivota; // = 43 -// Druhý způsob, který funguje všude je pomocí konstuktoru. Konstruktor má +// Druhý způsob, který funguje všude, je pomocí konstruktoru. Konstruktor má // vlastnost jménem prototype. Toto *není* prototyp samotného konstruktoru, ale // prototyp nového objektu. MujKonstruktor.prototype = { @@ -499,10 +538,10 @@ MujKonstruktor.prototype = { }; var mujObjekt2 = new MujKonstruktor(); mujObjekt2.ziskejMojeCislo(); // = 5 -mujObjekt2.mojeCislo = 6 +mujObjekt2.mojeCislo = 6; mujObjekt2.ziskejMojeCislo(); // = 6 -// Vestavěnné typy jako čísla nebo řetězce mají také konstruktory, které vytváří +// Vestavěné typy jako čísla nebo řetězce mají také konstruktory, které vytváří // ekvivalentní obalovací objekty (wrappery). var mojeCislo = 12; var mojeCisloObj = new Number(12); @@ -521,7 +560,7 @@ if (new Number(0)){ // a objekty jsou vždy pravdivé } -// Avšak, obalovací objekty a normální vestavěnné typy sdílejí prototyp, takže +// Avšak, obalovací objekty a normální vestavěné typy sdílejí prototyp, takže // můžete přidat funkcionalitu k řetězci String.prototype.prvniZnak = function(){ return this.charAt(0); @@ -530,45 +569,60 @@ String.prototype.prvniZnak = function(){ // Tento fakt je často používán v polyfillech, což je implementace novějších // vlastností JavaScriptu do starších variant, takže je můžete používat třeba -// ve starých prohlížečích +// ve starých prohlížečích. -// Pro příkklad, zmínili jsme, že Object.create není dostupný ve všech -// implementacích, můžeme si avšak přidat pomocí polyfillu +// Na příklad jsme zmínili, že Object.create není dostupný ve všech +// implementacích, ale můžeme si ho přidat pomocí polyfillu: if (Object.create === undefined){ // nebudeme ho přepisovat, když existuje Object.create = function(proto){ // vytvoříme dočasný konstruktor var Constructor = function(){}; Constructor.prototype = proto; - // ten použijeme k vytvoření nového s prototypem + // ten použijeme k vytvoření nového objektu s prototypem return new Constructor(); - } + }; } ``` ## Kam dál -[Mozilla Developer -Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) obsahuje -perfektní dokumentaci pro JavaScript, který je používaný v prohlížečích. Navíc -je to i wiki, takže jakmile se naučíte více, můžete pomoci ostatním, tím, že -přispějete svými znalostmi. +[Mozilla Developer Network][1] obsahuje perfektní dokumentaci pro JavaScript, +který je používaný v prohlížečích. Navíc je to i wiki, takže jakmile se naučíte +více, můžete pomoci ostatním tím, že přispějete svými znalostmi. -MDN's [A re-introduction to -JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) +MDN's [A re-introduction to JavaScript][2] pojednává o konceptech vysvětlených zde v mnohem větší hloubce. Tento návod -pokrývá hlavně JavaScript sám o sobě. Pokud se chcete naučit více, jak se používá -na webových stránkách, začněte tím, že se kouknete na [DOM](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core) +pokrývá hlavně JavaScript sám o sobě. Pokud se chcete naučit, jak se používá +na webových stránkách, začněte tím, že se podíváte na [DOM][3] + +[Learn Javascript by Example and with Challenges][4] +je varianta tohoto návodu i s úkoly. + +[JavaScript Garden][5] je sbírka příkladů těch nejnepředvídatelnějších částí +tohoto jazyka. + +[JavaScript: The Definitive Guide][6] je klasická výuková kniha. + +[Eloquent Javascript][8] od Marijn Haverbeke je výbornou JS knihou/e-knihou. -[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) je varianta tohoto -návodu i s úkoly- +[Javascript: The Right Way][10] je průvodcem JavaScriptem pro začínající +vývojáře i pomocníkem pro zkušené vývojáře, kteří si chtějí prohloubit své +znalosti. -[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) je sbírka -příkladů těch nejvíce nepředvídatelných částí tohoto jazyka. +[Javascript:Info][11] je moderním JavaScriptovým průvodcem, který pokrývá +základní i pokročilé témata velice výstižným výkladem. -[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) -je klasická výuková kniha. +Jako dodatek k přímým autorům tohoto článku byly na těchto stránkách části +obsahu převzaty z Pythonního tutoriálu Louiho Dinha, a tak0 z [JS Tutorial][7] +na stránkách Mozilla Developer Network. -Jako dodatek k přímým autorům tohoto článku, některý obsah byl přizpůsoben z -Pythoního tutoriálu od Louie Dinh na této stráce, a z [JS -Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) -z Mozilla Developer Network. +[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript +[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript +[3]: https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core +[4]: http://www.learneroo.com/modules/64/nodes/350 +[5]: http://bonsaiden.github.io/JavaScript-Garden/ +[6]: http://www.amazon.com/gp/product/0596805527/ +[7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript +[8]: http://eloquentjavascript.net/ +[10]: http://jstherightway.org/ +[11]: https://javascript.info/ |