summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--cs-cz/javascript.html.markdown550
1 files changed, 550 insertions, 0 deletions
diff --git a/cs-cz/javascript.html.markdown b/cs-cz/javascript.html.markdown
new file mode 100644
index 00000000..1adc2e89
--- /dev/null
+++ b/cs-cz/javascript.html.markdown
@@ -0,0 +1,550 @@
+---
+language: javascript
+contributors:
+ - ["Adam Brenecki", "http://adam.brenecki.id.au"]
+ - ["Ariel Krakowski", "http://www.learneroo.com"]
+translators:
+ - ["Michal Martinek", "https://github.com/MichalMartinek"]
+filename: javascript.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 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).
+
+```js
+// Komentáře jsou jako v zayku C. Jednořádkové komentáře začínájí 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í ;
+delejNeco();
+
+// ... ale nemusí, 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.
+
+/////////////////////////////////
+// 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¹⁵.
+3; // = 3
+1.5; // = 1.5
+
+// Základní matematické operace fungují, jak byste očekávali
+1 + 1; // = 2
+0.1 + 0.2; // = 0.30000000000000004
+8 - 1; // = 7
+10 * 2; // = 20
+35 / 5; // = 7
+
+// Včetně dělení
+5 / 2; // = 2.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ů
+1 << 2; // = 4
+
+// Přednost se vynucuje závorkami.
+(1 + 3) * 2; // = 8
+
+// 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
+true; // pravda
+false; // nepravda
+
+// Řetězce znaků jsou obaleny ' nebo ".
+'abc';
+"Ahoj světe!";
+
+// Negace se tvoří pomocí !
+!true; // = false
+!false; // = true
+
+// Rovnost se porovnává ===
+1 === 1; // = true
+2 === 1; // = false
+
+// Nerovnost zase pomocí !==
+1 !== 1; // = false
+2 !== 1; // = true
+
+// Další srovnávání
+1 < 10; // = true
+1 > 10; // = false
+2 <= 2; // = true
+2 >= 2; // = true
+
+// Řetězce znaků se spojují pomocí +
+"Ahoj " + "světe!"; // = "Ahoj světe!"
+
+// a porovnávají se pomocí < nebo >
+"a" < "b"; // = true
+
+// Rovnost s převodem typů se dělá pomocí == ...
+"5" == 5; // = true
+null == undefined; // = true
+
+// ...dokud nepoužijete ===
+"5" === 5; // = false
+null === undefined; // = false
+
+// ...což může občas způsobit divné chování...
+13 + !0; // 14
+"13" + !0; // '13true'
+
+// 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"
+
+// `length` znamená délka a je to vlastnost, takže nepoužívejte ()
+"Ahoj".length; // = 4
+
+// Existují také typy `null` a `undefined`.
+null; // značí, že žádnou hodnotu
+undefined; // značí, že hodnota nebyla definovaná definovaná (ikdyž
+ // `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
+
+///////////////////////////////////
+// 2. Proměnné, pole a objekty
+
+// Proměnné jsou deklarovány pomocí slůvka `var`. JavaScript je dynamicky
+// typovaný, takže nemusíme specifikovat typ. K přiřazení hodnoty se používá
+// znak `=`.
+var promenna = 5;
+
+// 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
+
+// Proměnné vytvořené bez přiřazení obsahují hodnotu undefined.
+var dalsiPromenna; // = undefined
+
+// Existuje kratší forma pro matematické operace na proměnné
+promenna += 5; // se provede stejně jako promenna = promenna + 5;
+// promenna je ted 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];
+
+// 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");
+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
+// jazycích: je to neuspořádaná množina páru hodnot - klíč:hodnota.
+var mujObjekt = {klic1: "Ahoj", klic2: "světe"};
+
+// Klíče jsou řetězce, ale nejsou povinné uvozovky, pokud jsou validní
+// JavaScriptové 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
+
+// ... 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;
+
+// Pokud se snažíte přistoupit ke klíči, který není nastaven, dostanete undefined
+myObj.dalsiKlic; // = undefined
+
+///////////////////////////////////
+// 3. Řízení toku programu
+
+// Syntaxe pro tuto sekci je prakticky stejná jako pro Javu
+
+// `if` (když) 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
+}
+
+// Stejně tak cyklus while
+while (true){
+ // nekonečný cyklus
+}
+
+// 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
+// inicializace; podmínka pro pokračování; iterace.
+for (var i = 0; i < 3; i++){
+ // provede třikrá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] + " ";
+}
+
+//Když chcete iterovat přes vlastnosti, které jsou přímo na objektu a nejsou
+//zděněné z prototypů, kontrolujte vlastnosti přes hasOwnProperty()
+var popis = "";
+var osoba = {prijmeni:"Jan", jmeno:"Novák", vek:18};
+for (var x in osoba){
+ if (osoba.hasOwnProperty(x)){
+ popis += osoba[x] + " ";
+ }
+}
+
+// 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í.
+
+// && 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á
+}
+
+// && 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';
+switch (znamka) {
+ case 'A':
+ console.log("Výborná práce");
+ break;
+ case 'B':
+ console.log("Dobrá práce");
+ break;
+ case 'C':
+ console.log("Dokážeš to i lépe");
+ break;
+ default:
+ console.log("Ale ne");
+ break;
+}
+
+////////////////////////////////////////////////////////
+// 4. Funckce, Oblast platnosti (scope) a Vnitřní funkce
+
+// JavaScriptové funkce jsou definovány slůvkem `function`.
+function funkce(text){
+ return text.toUpperCase();
+}
+funkce("něco"); // = "NĚCO"
+
+// Dávejte si pozor na to, že hodnota k vrácení musí začínat na stejné řádce
+// 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()
+{
+ return // <- zde je automaticky vložen středník
+ {
+ tohleJe: "vlastnost objektu"
+ }
+}
+funkce(); // = undefined
+
+// JavaScriptové funkce jsou objekty, takže můžou být přiřazeny různým proměnným
+// a předány dalším funkcím jako argumenty, na příklad:
+function funkce(){
+ // tento kód bude zavolán za 5 vteřin
+}
+setTimeout(funkce, 5000);
+// Poznámka: setTimeout není část JS jazyka, ale funkce poskytována
+// prohlížeči a NodeJS
+
+// Objekty funkcí nemusíme ani deklarovat pomocí jména, můžeme je napsat jako
+// ananymní funkci přímo vloženou jako argument
+setTimeout(function(){
+ // tento kód bude zavolán za 5 vteřin
+}, 5000);
+
+// JavaScript má oblast platnosti funkce, funkce ho mají, ale jiné bloky ne
+if (true){
+ var i = 5;
+}
+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
+//globální oblasti
+(function(){
+ var docasna = 5;
+ // Můžeme přistupovat k globálního oblasti přes přiřazování globalní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.
+ 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čí
+function ahojPoPetiVterinach(jmeno){
+ var prompt = "Ahoj, " + jmeno + "!";
+ // Vnitřní funkce je dána do lokální oblasti platnosti, jako kdyby byla
+ // deklarovaná slůvkem 'var'
+ function vnitrni(){
+ 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
+ // 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
+
+// Objekty můžou obsahovat funkce
+var mujObjekt = {
+ mojeFunkce: function(){
+ return "Ahoj světe!";
+ }
+};
+mujObjekt.mojeFunkce(); // = "Ahoj světe!"
+
+// Když jsou funkce z objektu zavolány, můžou přistupovat k objektu přes slůvko
+// 'this''
+var mujObjekt = {
+ text: "Ahoj světe!",
+ mojeFunkce: function(){
+ return this.text;
+ }
+};
+mujObjekt.mojeFunkce(); // = "Ahoj světe!"
+
+// 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.
+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-
+var mojeDalsiFunkce = function(){
+ return this.text.toUpperCase();
+}
+mujObjekt.mojeDalsiFunkce = mojeDalsiFunkce;
+mujObjekt.mojeDalsiFunkce(); // = "AHOJ SVĚTE!"
+
+// 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!"
+
+// 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!"
+
+// To je praktické, když pracujete s funkcí, která bere sekvenci argumentů a
+// chcete předat pole.
+
+Math.min(42, 6, 27); // = 6
+Math.min([42, 6, 27]); // = NaN
+Math.min.apply(Math, [42, 6, 27]); // = 6
+
+// Ale `call` a `apply` jsou pouze dočasné. Pokud je chcete připojit trvale
+// použijte `bind`.
+
+var pripojenaFunkce = dalsiFunkce.bind(mujObjekt);
+pripojenaFunkce(" A ahoj Saturne!"); // = "Ahoj světe! A ahoj Saturne!"
+
+// `bind` může být použito čatečně částečně i k používání
+
+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
+
+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.
+
+// 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.
+var mujObjekt = {
+ mujText: "Ahoj svete!"
+};
+var mujPrototyp = {
+ smyslZivota: 42,
+ mojeFunkce: function(){
+ return this.mujText.toLowerCase()
+ }
+};
+
+mujObjekt.__proto__ = mujPrototyp;
+mujObjekt.smyslZivota; // = 42
+
+// Toto funguje i pro funkce
+mujObjekt.mojeFunkce(); // = "Ahoj světe!"
+
+// Samozřejmě, pokud není vlastnost na vašem prototypu, tak se hledá na
+// prototypu od prototypu atd.
+mujPrototyp.__proto__ = {
+ mujBoolean: true
+};
+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
+mujPrototyp.smyslZivota = 43;
+mujObjekt.smyslZivota // = 43
+
+// 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
+
+// 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
+
+// Druhý způsob, který funguje všude je pomocí konstuktoru. Konstruktor má
+// vlastnost jménem prototype. Toto *není* prototyp samotného konstruktoru, ale
+// prototyp nového objektu.
+MujKonstruktor.prototype = {
+ mojeCislo: 5,
+ ziskejMojeCislo: function(){
+ return this.mojeCislo;
+ }
+};
+var mujObjekt2 = new MujKonstruktor();
+mujObjekt2.ziskejMojeCislo(); // = 5
+mujObjekt2.mojeCislo = 6
+mujObjekt2.ziskejMojeCislo(); // = 6
+
+// Vestavěnné typy jako čísla nebo řetězce mají také konstruktory, které vytváří
+// ekvivalentní obalovací objekty (wrappery).
+var mojeCislo = 12;
+var mojeCisloObj = new Number(12);
+mojeCislo == mojeCisloObj; // = true
+
+// Avšak nejsou úplně přesně stejné
+typeof mojeCislo; // = 'number'
+typeof mojeCisloObj; // = 'object'
+mojeCislo === mojeCisloObj; // = false
+if (0){
+ // Tento kód se nespustí, protože 0 je nepravdivá (false)
+}
+
+// Avšak, obalovací objekty a normální vestavěnné typy sdílejí prototyp, takže
+// můžete přidat funkcionalitu k řetězci
+String.prototype.prvniZnak = function(){
+ return this.charAt(0);
+}
+"abc".prvniZnak(); // = "a"
+
+// 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
+
+// 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
+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
+ 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.
+
+MDN's [A re-introduction to
+JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+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)
+
+[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) je varianta tohoto
+návodu i s úkoly-
+
+[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: 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, 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.