diff options
Diffstat (limited to 'cs-cz')
| -rw-r--r-- | cs-cz/css.html.markdown | 253 | ||||
| -rw-r--r-- | cs-cz/elm.html.markdown | 373 | ||||
| -rw-r--r-- | cs-cz/hack.html.markdown | 309 | ||||
| -rw-r--r-- | cs-cz/javascript.html.markdown | 551 | ||||
| -rw-r--r-- | cs-cz/python3.html.markdown | 2 |
5 files changed, 1487 insertions, 1 deletions
diff --git a/cs-cz/css.html.markdown b/cs-cz/css.html.markdown new file mode 100644 index 00000000..54a0a08e --- /dev/null +++ b/cs-cz/css.html.markdown @@ -0,0 +1,253 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] + - ["Connor Shea", "https://github.com/connorshea"] + - ["Deepanshu Utkarsh", "https://github.com/duci9y"] +translators: + - ["Michal Martinek", "https://github.com/MichalMartinek"] +lang: cs-cz +filename: learncss-cz.css +--- + +V ranných dobách webu se nevyskytovaly žádné vizuální elementy, pouze čistý text, ale s vývojem webových browserů se staly stránky plné grafických prvků běžné. + +A právě proto vzniklo CSS, aby oddělilo obsah (HTML) od vzhledu webové stránky. + +Pomocí CSS můžete označit různé elementy na HTML stránce a přiřadit jim různé vzhledové vlastnosti. + +Tento návod byl napsán pro CSS 2, avšak CSS 3 se stalo velmi oblíbené a v dnešní době už běžné. + +**POZNÁMKA** Protože CSS produkuje vizuální výsledky, je nutné k jeho naučení všechno zkoušet třeba na [dabbletu](http://dabblet.com/). +Tento článek se zaměřuje hlavně na syntaxi a poskytue také pár obecných tipů. + +```css +/* komentáře jsou ohraničeny lomítkem s hvězdičkou, přesně jako tyto dva + řádky, v CSS není nic jako jednořádkový komentář, pouze tenhle zápis */ + +/* ################ + ## SELEKTORY + ################ */ + +/* Selektor se používá pro vybrání elementu na stránce: +selektor { vlastnost: hodnota; /* více vlastností... }*/ + +/* +Toto je náš element: +<div trida='trida1 trida2' id='nejakeID' attr='hodnota' otherAttr='cs-cz co neco' /> +*/ + +/* Můžeme vybrat tento element třeba podle jeho třídy */ +.trida1 { } + +/* nebo obou tříd! */ +.trida1.trida2 { } + +/* nebo jeho jména */ +div { } + +/* nebo jeho id */ +#nejakeID { } + +/* nebo podle toho, že má atribut! */ +[attr] { font-size:smaller; } + +/* nebo že argument nabývá specifické hodnoty*/ +[attr='hodnota'] { font-size:smaller; } + +/* začíná nějakou hodnotou (CSS 3) */ +[attr^='ho'] { font-size:smaller; } + +/* nebo končí něčím (CSS 3) */ +[attr$='ta'] { font-size:smaller; } + +/* nebo obsahuje nějakou hodnotu, která je v atributu oddělená mezerami */ +[otherAttr~='co'] { } +[otherAttr~='neco'] { } + +/* nebo obsahuje hodnotu oddělenou pomlčkou - "-" (U+002D) */ +[otherAttr|='cs'] { font-size:smaller; } + + +/* Můžeme spojit různé selektory, abychom získali specifičtější selektor. + Pozor, nedávejte mezi ně mezery! */ +div.nejaka-trida[attr$='ta'] { } + +/* Můžeme vybrat element, který je potomek jineho */ +div.vnejsi-element > .jmeno-tridy { } + +/* nebo zanořen ještě hlouběji. Potomci jsou přímo pod vnější třídou, pouze 1 + úroveň pod rodičem. Tento selektor bude fungovat na jakékoliv úrovni pod + rodičem */ +div.rodic .jmeno-tridy { } + +/* Varování: stejný selektor bez mezery má úplně jiný význam + Vzpomínáte si jaký? */ +div.rodic.jmeno-tridy { } + +/* Možná budete chtít vybrat element, který leží přímo vedle */ +.jsem-primo-pred + .timto-elementem { } + +/* nebo kdekoliv na stejné úrovni stromu */ +.jsem-kdekoliv-pred ~ .timto-elementem { } + +/* Existují selektory nazvané pseudo třídy, kterými můžeme vybrat elementy, + když jsou v určitém stavu */ + +/* na příklad, když kurzor najede na element */ +selektor:hover { } + +/* nebo již navštívený odkaz */ +selektor:visited { } + +/* nebo nebyl navštíven */ +selektor:link { } + +/* nebo když je vybrán, např kliknutím do inputu*/ +selektor:focus { } + +/* element, ktery je prvni potomek rodiče */ +selektor:first-child {} + +/* element, který je poslední potomek rodiče */ +selektor:last-child {} + +/* Stejně jako pseudo třídy, umožňují pseudo elementy stylizovat určité + části dokumentu */ + +/* odpovídá virtuálnímu prvnímu potomku */ +selektor::before {} + +/* odpovídá virtuálnímu poslednímu potomku */ +selektor::after {} + +/* Na vhodném místě, může být použitá hvězdička jako žolík, který vybere každý element */ +* { } /* všechny elementy */ +.rodic * { } /* všechny vnořené elementy */ +.rodic > * { } /* všichni potomci */ + +/* #################### + ## VLASTNOSTI + #################### */ + +selektor { + + /* Jednotky délky můžou být relativní nebo absolutní */ + + /* Relativní jednotky */ + width: 50%; /* počet procent šířky rodičovského elementu */ + font-size: 2em; /* násobek puvodní velikosti fontu elementu */ + font-size: 2rem; /* nebo kořenového elementu */ + font-size: 2vw; /* násobek 1% šířky zařízení (viewport) (CSS 3) */ + font-size: 2vh; /* nebo jeho výšky */ + font-size: 2vmin; /* násobek 1% výšky nebo šířky, dle toho, co je menší */ + font-size: 2vmax; /* nebo větší */ + + /* Absolutní jednotky */ + width: 200px; /* pixely */ + font-size: 20pt; /* body */ + width: 5cm; /* centimetry */ + min-width: 50mm; /* milimetry */ + max-width: 5in; /* palce */ + + /* Barvy */ + color: #F6E; /* krátký hexadecimální formát */ + color: #FF66EE; /* dlouhý hexadecimální formát */ + color: tomato; /* pojmenovaná barva */ + color: rgb(255, 255, 255); /* hodnoty rgb */ + color: rgb(10%, 20%, 50%); /* procenta rgb */ + color: rgba(255, 0, 0, 0.3); /* hodnoty rgba (CSS 3) Poznámka: 0 < a < 1 */ + color: transparent; /* ekvivalentní jako nastavení alfy 0 */ + color: hsl(0, 100%, 50%); /* procenta hsl (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* procenta hsl s alfou */ + + /* Obrázky jako pozadí elementu */ + background-image: url(/cesta/k/obrazku.jpg); /* uvozovky jsou dobrovolné */ + + /* Fonty */ + font-family: Arial; + /* když název fontu obsahuje mezeru, tak musí být v uvozovkách */ + font-family: "Courier New"; + /* když se první nenaleze, použije se další atd. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Použití + +Uložte CSS soubor s příponou `.css`. + +```xml +<!-- Musíte vložit css soubor do hlavičky vaší stránky. Toto je + doporučená metoda. Viz http://stackoverflow.com/questions/8284365 --> +<link rel='stylesheet' type='text/css' href='cesta/k/stylu.css' /> + +<!-- Také lze vložit CSS přímo do HTML. --> +<style> + a { color: purple; } +</style> + +<!-- Nebo přímo nastavit vlasnost elementu --> +<div style="border: 1px solid red;"> +</div> +``` + +## Priorita nebo kaskáda + +Element může být vybrán více selektory a jeho vlastnosti můžou být nastaveny více než jednou. V těchto případech, má jedno zadání vlastnosti prioritu před druhým. Obecně platí, že více specifické selektory mají přednost před těmi méně specifickými. + +Tento proces se nazývá kaskáda, proto i název kaskádové styly(Cascading Style Sheets). + +Máme následující CSS + +```css +/* A */ +p.trida1[attr='hodnota'] + +/* B */ +p.trida1 { } + +/* C */ +p.trida2 { } + +/* D */ +p { } + +/* E */ +p { vlastnost: hodnota !important; } +``` + +a tento element +```xml +<p style='/*F*/ vlastnost:hodnota;' trida='trida1 trida2' attr='hodnota' /> +``` +Priorita stylu je následující. Pamatujte, priorita pro každou **vlastnost**, ne pro celý blok. + +* `E` má nejvyšší prioritu kvůli slůvku `!important`. Je doporučováno se úplně vyhnout jeho použití. +* `F` je další, kvůli stylu zadanému přimo do elementu +* `A` je další, protože je více specifické, než cokoliv dalšího. Má 3 selektory: jméno elementu `p`, jeho třídu `trida1`, atribut `attr='hodnota'`. +* `C` je další, i když je stejně specifický jako `B`, protože je uveden až po něm. +* `B` je další +* `D` je poslední + +## Kompatibilita + +Většina z možností v CSS 2 (a spousta v CSS 3) je dostupná napříč všemi browsery a zařízeními. Ale pořád je dobrá praxe, zkontrolovat dostupnost, před užitím nové vlastnosti/fičury. + +## Zdroje + +* Přehled dostupnosti [CanIUse](http://caniuse.com). +* CSS hřiště [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network - CSS dokumentace](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops](http://tympanus.net/codrops/css_reference/) + +## Další čtení + +* [Pochopení priority v CSS: specifičnost, děditelnost a kaskáda](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Vybírání elementů pomocí atributů](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - překrývání obsahu](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) a [LESS](http://lesscss.org/) pro CSS pre-processing +* [CSS-Triky](https://css-tricks.com) diff --git a/cs-cz/elm.html.markdown b/cs-cz/elm.html.markdown new file mode 100644 index 00000000..babd46a2 --- /dev/null +++ b/cs-cz/elm.html.markdown @@ -0,0 +1,373 @@ +--- +language: Elm +contributors: + - ["Max Goldstein", "http://maxgoldste.in/"] +translators: + - ["Robin Pokorný", "http://robinpokorny.com/"] +filename: learnelm-cz.elm +lang: cs-cz +--- + +Elm je funkcionální reaktivní jazyk, který se kompiluje do (klientského) JavaScriptu. +Elm je silně typovaný, díky tomu je překladač schopen zachytit většinu chyb okamžitě a +vypsat snadno srozumitelná chybová hlášení. +Elm se hodí k tvorbě webových uživatelských rozhraní a her. + + +```haskell +-- Jednořádkové komentáře začínají dvěma pomlčkami. +{- Víceřádkové komentáře mohou být takto uzavřeny do bloku. +{- Mohou být i zanořeny. -} +-} + +{-- Základy --} + +-- Aritmetika +1 + 1 -- 2 +8 - 1 -- 7 +10 * 2 -- 20 + +-- Každé číslo bez desetinné tečky je typu Int nebo Float. +33 / 2 -- 16.5 s reálným dělením +33 // 2 -- 16 s celočíselným dělením + +-- Umocňování +5 ^ 2 -- 25 + +-- Pravdivostní proměnné +not True -- False +not False -- True +1 == 1 -- True +1 /= 1 -- False +1 < 10 -- True + +-- Řetězce a znaky +"Toto je textový řetězec, protože používá dvojité uvozovky." +'a' -- znak v jednoduchých uvozovkách + +-- Řetězce lze spojovat. +"Ahoj " ++ "světe!" -- "Ahoj světe!" + +{-- Seznamy (List), n-tice (Tuple) a Záznamy (Record) --} + +-- Každá položka seznamu musí být stejného typu. +["příliš", "žluťoučký", "kůň", "úpěl"] +[1, 2, 3, 4, 5] +-- Druhý příklad lze zapsat také pomocí dvou teček. +[1..5] + +-- Spojovat seznamy lze stejně jako řetězce. +[1..5] ++ [6..10] == [1..10] -- True + +-- K přidání položky do seznamu použijte funkci "cons". +0 :: [1..5] -- [0, 1, 2, 3, 4, 5] + +-- Funkce "head" pro získání první položky seznamu i funkce "tail" pro získání následujích položek +-- vrací typ Maybe. Místo zjišťování, jestli nějaká položka není null, +-- se s chybějcími hodnotami vypořádáme explicitně. +List.head [1..5] -- Just 1 +List.tail [1..5] -- Just [2, 3, 4, 5] +List.head [] -- Nothing +-- List.nazevFunkce odkazuje na funkci, která žije v modulu List. + +-- Každý prvek v n-tici může být jiného typu, ale n-tice má pevný počet prvků. +("elm", 42) + +-- K získání hodnot z dvojice použijte funkce first a second. +-- (Toto je pouze zkratka. Brzy si ukážeme, jak na to "správně".) +fst ("elm", 42) -- "elm" +snd ("elm", 42) -- 42 + +-- Prázná n-tice, neboli "unit", se občas používá jako zástupný symbol. +-- Je to jediná hodnota svého typu, který se také nazývá "Unit". +() + +-- Záznamy jsou podobné n-ticím, ale prvky jsou pojmenovány. Na pořadí nezáleží. +-- Povšimněte si, že hodnoty vlastností se přiřazují rovnítky, ne dvojtečkami. +{ x = 3, y = 7 } + +-- K hodnotám se přistupuje pomocí tečky a názvu vlastnosti. +{ x = 3, y = 7 }.x -- 3 + +-- Nebo využitím přístupové funkce, což je jen tečka a název vlastnosti. +.y { x = 3, y = 7 } -- 7 + +-- Změna hodnoty vlastnosti v záznamu. (Záznam tuto vlastnost už musí mít.) +{ osoba | + jmeno = "Jiří" } + +-- Změna více vlastností s využitím aktuálních hodnot. +{ hmotnyBod | + poloha = hmotnyBod.poloha + hmotnyBod.rychlost, + rychlost = hmotnyBod.rychlost + hmotnyBod.zrychleni } + +{-- Řídicí struktury --} + +-- Podmínky vždy musí mít větev "else" a obě větve musí být stejného typu. +if powerLevel > 9000 then + "PÁNI!" +else + "hmm" + +-- Podmínky lze skládat za sebe. +if n < 0 then + "n je záporné" +else if n > 0 then + "n je kladné" +else + "n je nula" + +-- Použíjte příkaz "case" k nalezení shody vzoru a různých možností. +case seznam of + [] -> "odpovídá práznému seznamu" + [x]-> "odpovídá seznamu o právě jedné položce, " ++ toString x + x::xs -> "odpovídá seznamu o alespoň jedné položce, jehož prvním prvkem je " ++ toString x +-- Shody se vyhodnocují v zapsaném pořadí. Kdybychom umístili [x] poslední, nikdy by nenastala shoda, +-- protože x::xs také odpovídá (xs by byl prázdný seznam). Shody "nepropadají". +-- Překladač vždy upozorní na chybějící nebo přebývající větve. + +-- Větvení typu Maybe. +case List.head seznam of + Just x -> "První položka je " ++ toString x + Nothing -> "Seznam byl prázdný." + +{-- Funkce --} + +-- Syntaxe funkcí je v Elmu velmi úsporná, založená spíše na mezerách +-- než na závorkách. Neexistuje tu klíčové slovo "return". + +-- Funkci definujeme jejím jménem, parametry, rovnítkem a tělem. +vynasob a b = + a * b + +-- Funkci voláme předáním parametrů (bez oddělujících čárek). +vynasob 7 6 -- 42 + +-- Částečně aplikované funkci předáme pouze některé parametry. +-- Poté zvolíme nové jméno. +zdvoj = + vynasob 2 + +-- Konstanty jsou podobné, ale nepřijímají žádné parametry. +odpoved = + 42 + +-- Předejte funkci jako parametr jiným funkcím. +List.map zdvoj [1..4] -- [2, 4, 6, 8] + +-- Nebo použijte anonymní funkci. +List.map (\a -> a * 2) [1..4] -- [2, 4, 6, 8] + +-- V definici funkce lze zapsat vzor, může-li nastat pouze jeden případ. +-- Tato funkce přijímá jednu dvojici místo dvou parametrů. +obsah (sirka, delka) = + sirka * delka + +obsah (6, 7) -- 42 + +-- Složenými závorkami vytvořte vzor pro názvy vlastností v záznamu. +-- Použijte "let" k definici lokálních proměnných. +objem {sirka, delka, hloubka} = + let + obsah = sirka * delka + in + obsah * hloubka + +objem { sirka = 3, delka = 2, hloubka = 7 } -- 42 + +-- Funkce mohou být rekurzivní. +fib n = + if n < 2 then + 1 + else + fib (n - 1) + fib (n - 2) + +List.map fib [0..8] -- [1, 1, 2, 3, 5, 8, 13, 21, 34] + +-- Jiná rekurzivní funkce (v praxi použijte List.length). +delkaSeznamu seznam = + case seznam of + [] -> 0 + x::xs -> 1 + delkaSeznamu xs + +-- Funkce se volají před jakýmkoli infixovým operátorem. Závorky určují prioritu. +cos (degrees 30) ^ 2 + sin (degrees 30) ^ 2 -- 1 +-- Nejprve se aplikuje "degrees" na číslo 30, výsledek je pak předán trigonometrickým +-- funkcím, které jsou následně umocněny na druhou, na závěr proběhne sčítání. + +{-- Typy a typové anotace --} + +-- Překladač odvodí typ každé hodnoty ve vašem programu. +-- Typy vždy začínají velkým písmenem. Čtete x : T jako "x je typu T". +-- Některé běžné typy, které můžete videt v Elmovém REPLu. +5 : Int +6.7 : Float +"ahoj" : String +True : Bool + +-- Funkce mají také typy. Čtěte "->" jako "vrací". +-- O typu na konci uvažujte jako návratovém typu, o ostatních jako typech argumentů. +not : Bool -> Bool +round : Float -> Int + +-- Když definujete hodnotu, je dobrým zvykem zapsat nad ni její typ. +-- Anotace je formou dokumentace, která je ověřována překladačem. +zdvoj : Int -> Int +zdvoj x = x * 2 + +-- Funkce jako parametr je uzavřena v závorkách. +-- Typy s malým počátečním písmenem jsou typové proměnné: +-- mohou být libovolného typu, ale v každém volání musí být stejné. +List.map : (a -> b) -> List a -> List b +-- "List tečka map je typu a-vrací-b, vrací seznam-položek-typu-a, vrací seznam-položek-typu-b." + +-- Existují tři speciální typové proměnné: +-- číslo (number), porovnatelné (comparable), and spojitelné (appendable). +-- Čísla dovolují použít aritmetiku na Int a Float. +-- Porovnatelné dovolují uspořádat čísla a řetězce, např. a < b. +-- Spojitelné lze zřetězit pomocí a ++ b. + +{-- Typové aliasy a výčtové typy --} + +-- Pro záznamy a n-tice již typy automaticky existují. +-- (Povšimněte si, že typ vlatnosti záznamu přiřazujeme dvojtečkou a hodnotu rovnítkem.) +pocatek : { x : Float, y : Float, z : Float } +pocatek = + { x = 0, y = 0, z = 0 } + +-- Stávajícím typům lze dávat jména využitím aliasů. +type alias Bod3D = + { x : Float, y : Float, z : Float } + +-- Alias pro záznam funguje také jako jeho konstruktor. +jinyPocatek : Bod3D +jinyPocatek = + Bod3D 0 0 0 + +-- Jedná se stále o stejný typ, lze je tedy porovnat. +pocatek == jinyPocatek -- True + +-- Oproti tomu výčtový (union) typ definuje zcela nový typ. +-- Výčtový typ se takto jmenuje, protože může být jedním z několika vybraných možností. +-- Každá možnost je reprezentována jako "tag". +type Smer = + Sever | Jih | Vychod | Zapad + +-- Tagy mohou obsahovat další hodnoty známých typů. Lze využít i rekurze. +type IntStrom = + Vrchol | Uzel Int IntStrom IntStrom +-- "Vrchol" i "Uzel" jsou tagy. Vše, co následuje za tagem, je typ. + +-- Tagy lze použít jako hodnoty funkcí. +koren : IntStrom +koren = + Vrchol 7 List List + +-- Výčtové typy (a typové aliasy) mohou obsahovat typové proměnné. +type Strom a = + Vrchol | Uzel a (Strom a) (Strom a) +-- "Typ strom-prvků-a je vrchol, nebo uzel obsahující a, strom-prvků-a a strom-prvků-a." + +-- Vzory se shodují s tagy. Tagy s velkým počátečním písmenem odpovídají přesně. +-- Proměnné malým písmem odpovídají čemukoli. Podtržítko také odpovídá čemukoli, +-- ale určuje, že tuto hodnotu dále nechceme používat. +nejviceVlevo : Strom a -> Maybe a +nejviceVlevo strom = + case strom of + Vrchol -> Nothing + Uzel x Vrchol _ -> Just x + Uzel _ podstrom _ -> nejviceVlevo podstrom + +-- To je víceméně vše o jazyku samotném. +-- Podívejme se nyní, jak organizovat a spouštět náš kód. + +{-- Moduly a importování --} + +-- Standardní knihovny jsou organizovány do modulů, stejně jako knihovny třetích stran, +-- které můžete využívat. Ve větších projektech můžete definovat vlastní moduly. + +-- Vložte toto na začátek souboru. Pokud nic neuvedete, předpokládá se "Main". +module Jmeno where + +-- Výchozím chováním je, že se exportuje vše. +-- Případně můžete definovat exportované vlastnosti explicitně. +module Jmeno (MujTyp, mojeHodnota) where + +-- Běžný návrhový vzor je expotovat pouze výčtový typ bez jeho tagů. +-- Tento vzor je znám jako krycí typ a často se využívá v knihovnách. + +-- Z jiných modulů lze importovat kód a použít jej v aktuálním modulu. +-- Nasledující umístí Dict do aktuálního scope, takže lze volat Dict.insert. +import Dict + +-- Importuje modul Dict a typ Dict, takže v anotacích není nutné psát Dict.Dict. +-- Stále lze volat Dict.insert. +import Dict exposing (Dict) + +-- Přejmenování importu. +import Graphics.Collage as C + +{-- Porty --} + +-- Port oznamuje, že budete komunikovat s vnějším světem. +-- Porty jsou dovoleny pouze v modulu Main. + +-- Příchozí port je jen typová anotace. +port idKlienta : Int + +-- Odchozí port má definici. +port objednavkaKlienta : List String +port objednavkaKlienta = ["Knihy", "Potraviny", "Nábytek"] + +-- Nebudeme zacházet do detailů, ale v JavaScriptu se dají nastavit +-- callbacky pro zasílání na příchozí porty a čtení z odchozích portů. + +{-- Nástroje pro příkazovou řádku --} + +-- Kompilace souboru. +$ elm make MujSoubor.elm + +-- Při prvním spuštění nainstaluje Elm standardní knihovny a vytvoří soubor +-- elm-package.json, kde jsou uloženy informace o vašem projektu. + +-- Elm reactor je server, který překládá a spouští vaše soubory. +-- Kliknutím na klíč vedle názvu souboru spustíte debugger s cestovám v čase! +$ elm reactor + +-- Zkoušejte si jednoduché příkazy v Read-Eval-Print Loop. +$ elm repl + +-- Balíčky jsou určeny uživatelským jménem na GitHubu a názvem repozitáře. +-- Nainstalujte nový balíček a uložte jej v souboru elm-package.json. +$ elm package install evancz/elm-html + +-- Porovnejte změny mezi verzemi jednoho balíčku. +$ elm package diff evancz/elm-html 3.0.0 4.0.2 +-- Správce balíčků v Elmu vyžaduje sémantické verzování, +-- takže minor verze nikdy nerozbije váš build. +``` + +Jazyk Elm je překvapivě malý. Nyní se můžete podívat do skoro jakéhokoli zdrojového kódu +v Elmu a budete mít zběžnou představu o jeho fungování. +Ovšem možnosti, jak psát kód, který je odolný vůči chybám a snadno se refaktoruje, jsou neomezené! + +Zde jsou některé užitečné zdroje (v angličtině). + +* [Hlavní stránka Elmu](http://elm-lang.org/). Obsahuje: + * Odkazy na [instalátory](http://elm-lang.org/install) + * [Documentaci](http://elm-lang.org/docs), včetně [popisu syntaxe](http://elm-lang.org/docs/syntax) + * Spoustu nápomocných [příkladů](http://elm-lang.org/examples) + +* Documentace pro [standardní knihovny Elmu](http://package.elm-lang.org/packages/elm-lang/core/latest/). Povšimněte si: + * [Základy](http://package.elm-lang.org/packages/elm-lang/core/latest/Basics), které jsou automaticky importovány + * Typ [Maybe](http://package.elm-lang.org/packages/elm-lang/core/latest/Maybe) a jeho bratranec typ [Result](http://package.elm-lang.org/packages/elm-lang/core/latest/Result), které se běžně používají pro chybějící hodnoty a ošetření chyb. + * Datové struktury jako [List](http://package.elm-lang.org/packages/elm-lang/core/latest/List), [Array](http://package.elm-lang.org/packages/elm-lang/core/latest/Array), [Dict](http://package.elm-lang.org/packages/elm-lang/core/latest/Dict) a [Set](http://package.elm-lang.org/packages/elm-lang/core/latest/Set) + * JSON [enkódování](http://package.elm-lang.org/packages/elm-lang/core/latest/Json-Encode) a [dekódování](http://package.elm-lang.org/packages/elm-lang/core/latest/Json-Decode) + +* [Architektura Elmu](https://github.com/evancz/elm-architecture-tutorial#the-elm-architecture). Esej od tvůrce Elmu s příklady, jak organizovat kód do komponent. + +* [Elm mailing list](https://groups.google.com/forum/#!forum/elm-discuss). Všichni jsou přátelští a nápomocní. + +* [Scope v Elmu](https://github.com/elm-guides/elm-for-js/blob/master/Scope.md#scope-in-elm) a [Jak číst typové anotace](https://github.com/elm-guides/elm-for-js/blob/master/How%20to%20Read%20a%20Type%20Annotation.md#how-to-read-a-type-annotation). Další komunitní návody o základech Elmu, psáno pro JavaScriptové vývojáře. + +Běžte si zkusit něco napsat v Elmu! diff --git a/cs-cz/hack.html.markdown b/cs-cz/hack.html.markdown new file mode 100644 index 00000000..736ad7e0 --- /dev/null +++ b/cs-cz/hack.html.markdown @@ -0,0 +1,309 @@ +--- +language: Hack +filename: learnhack-cs.hh +contributors: + - ["Stephen Holdaway", "https://github.com/stecman"] +translators: + - ["Vojta Svoboda", "https://github.com/vojtasvoboda/"] +lang: cs-cz +--- + +Hack je nadmnožinou PHP a běží v rámci virtuálního stroje zvaného HHVM. Hack +dokáže skoro plně spolupracovat s existujícím PHP a přidává několik vylepšení, +které známe ze staticky typovaných jazyků. + +Níže jsou popsané pouze vlastnosti jazyka Hack. Detaily ohledně jazyka PHP a jeho +syntaxe pak najdete na těchto stránkách v samostatném +[článku o PHP](http://learnxinyminutes.com/docs/php/). + +```php +<?hh + +// Hack je aktivní pouze pro soubory, které začínají <?hh. +// TODO <?hh soubory nemohou být jendoduše přeloženy v HTML tak jako <?php. +// Použitím značky <?hh //strict zapnete striktní mód typové kontroly. + + +// Typování skalární parametrů +function repeat(string $word, int $count) +{ + $word = trim($word); + return str_repeat($word . ' ', $count); +} + +// Typování návratových hodnot +function add(...$numbers) : int +{ + return array_sum($numbers); +} + +// Funkce které nic nevrací jsou typované jako "void" +function truncate(resource $handle) : void +{ + // ... +} + +// U typování musíme explicitně povolit prázdné (null) hodnoty +function identity(?string $stringOrNull) : ?string +{ + return $stringOrNull; +} + +// Typování může být použito i na proměnné třídy +class TypeHintedProperties +{ + public ?string $name; + + protected int $id; + + private float $score = 100.0; + + // Typ proměnné si můžeme zadat přímo u definice proměnné v rámci třídy, + // ale pak ho snadně přetížit v konstruktoru metody. + public function __construct(int $id) + { + $this->id = $id; + } +} + + +// Stručné anonymní funkce (lambda funkce) +$multiplier = 5; +array_map($y ==> $y * $multiplier, [1, 2, 3]); + + +// Generika (generické funkce) +class Box<T> +{ + protected T $data; + + public function __construct(T $data) { + $this->data = $data; + } + + public function getData(): T { + return $this->data; + } +} + +function openBox(Box<int> $box) : int +{ + return $box->getData(); +} + + +// Tvary +// +// Hack zavádí koncept tvaru pro definování strukturovaných polí s garantovanou +// typovou kontrolou pro klíče. +type Point2D = shape('x' => int, 'y' => int); + +function distance(Point2D $a, Point2D $b) : float +{ + return sqrt(pow($b['x'] - $a['x'], 2) + pow($b['y'] - $a['y'], 2)); +} + +distance( + shape('x' => -1, 'y' => 5), + shape('x' => 2, 'y' => 50) +); + + +// Type aliasing +// +// Hack přidává několik vylepšení pro lepší čitelnost komplexních typů +newtype VectorArray = array<int, Vector<int>>; + +// Množina obsahující čísla +newtype Point = (int, int); + +function addPoints(Point $p1, Point $p2) : Point +{ + return tuple($p1[0] + $p2[0], $p1[1] + $p2[1]); +} + +addPoints( + tuple(1, 2), + tuple(5, 6) +); + + +// Výčtový typ +enum RoadType : int +{ + Road = 0; + Street = 1; + Avenue = 2; + Boulevard = 3; +} + +function getRoadType() : RoadType +{ + return RoadType::Avenue; +} + + +// Automatické nastavení proměnných třídy +// +// Aby se nemuseli definovat proměnné třídy a její konstruktor, +// který pouze nastavuje třídní proměnné, můžeme v Hacku vše +// definovat najednou. +class ArgumentPromotion +{ + public function __construct(public string $name, + protected int $age, + private bool $isAwesome) {} +} + +// Takto by to vypadalo bez automatického nastavení proměnných +class WithoutArugmentPromotion +{ + public string $name; + + protected int $age; + + private bool $isAwesome; + + public function __construct(string $name, int $age, bool $isAwesome) + { + $this->name = $name; + $this->age = $age; + $this->isAwesome = $isAwesome; + } +} + + +// Ko-operativní multi-tasking +// +// Nová klíčová slova "async" and "await" mohou být použité pro spuštění mutli-taskingu +// Tato vlastnost ovšem zahrnuje vícevláknové zpracování, pouze povolí řízení přenosu +async function cooperativePrint(int $start, int $end) : Awaitable<void> +{ + for ($i = $start; $i <= $end; $i++) { + echo "$i "; + + // Dává ostatním úlohám šanci něco udělat + await RescheduleWaitHandle::create(RescheduleWaitHandle::QUEUE_DEFAULT, 0); + } +} + +// Toto vypíše "1 4 7 2 5 8 3 6 9" +AwaitAllWaitHandle::fromArray([ + cooperativePrint(1, 3), + cooperativePrint(4, 6), + cooperativePrint(7, 9) +])->getWaitHandle()->join(); + + +// Atributy +// +// Atributy jsou určitou formou metadat pro funkce. Hack přidává některé vestavěné +// atributy které aktivnují uživatečné chování funkcí. + +// Speciální atribut __Memoize způsobí, že výsledek funkce je uložen do cache +<<__Memoize>> +function doExpensiveTask() : ?string +{ + return file_get_contents('http://example.com'); +} + +// Tělo funkce je v tomto případě vykonáno pouze jednou: +doExpensiveTask(); +doExpensiveTask(); + + +// Speciální atribut __ConsistentConstruct signalizuje typové kontrole Hacku, že +// zápis __construct bude stejný pro všechny podtřídy. +<<__ConsistentConstruct>> +class ConsistentFoo +{ + public function __construct(int $x, float $y) + { + // ... + } + + public function someMethod() + { + // ... + } +} + +class ConsistentBar extends ConsistentFoo +{ + public function __construct(int $x, float $y) + { + // Typová kontrola Hacku zajistí volání konstruktoru rodičovské třídy + parent::__construct($x, $y); + + // ... + } + + // Anotace __Override je volitelný signál pro typovou kontrolu Hacku, že + // tato metoda přetěžuje metodu rodičovské třídy, nebo traitu. Bez uvedení + // této anotace vyhodí typová kontrola chybu. + <<__Override>> + public function someMethod() + { + // ... + } +} + +class InvalidFooSubclass extends ConsistentFoo +{ + // Nedodržení zápisu dle rodičovského konstruktoru způsobí syntaktickou chybu: + // + // "Tento objekt je typu ConsistentBaz a není kompatibilní v tímto objektem, + // který je typu ConsistentFoo protože některé jeho metody nejsou kompatibilní." + // + public function __construct(float $x) + { + // ... + } + + // Použitím anotace __Override na nepřetíženou metodu způsobí chybu typové kontroly: + // + // "InvalidFooSubclass::otherMethod() je označená jako přetížená, ale nebyla nalezena + // taková rodičovská metoda, nebo rodič kterého přetěžujete není zapsán v <?hh kódu" + // + <<__Override>> + public function otherMethod() + { + // ... + } +} + + +// Traity mohou implementovat rozhraní, což standardní PHP neumí +interface KittenInterface +{ + public function play() : void; +} + +trait CatTrait implements KittenInterface +{ + public function play() : void + { + // ... + } +} + +class Samuel +{ + use CatTrait; +} + + +$cat = new Samuel(); +$cat instanceof KittenInterface === true; // True + +``` + +## Více informací + +Pro více informací navštivte [referenční příručku jazyka Hack](http://docs.hhvm.com/manual/en/hacklangref.php), +kde se dozvíte více detailu a vylepšení, které jazyk Hack přidává do PHP, a nebo navštivte [oficiální stránky jazyka Hack](http://hacklang.org/) +pro obecné informace. + +Pro instrukce k instalaci jazyka Hack navštivte [oficiální HHVM stránky](http://hhvm.com/). + +Pro více informací ohledně zpětné kompatibility s PHP navštivte článek o [nepodporovaných PHP vlastnostech Hacku](http://docs.hhvm.com/manual/en/hack.unsupported.php). diff --git a/cs-cz/javascript.html.markdown b/cs-cz/javascript.html.markdown new file mode 100644 index 00000000..0b053595 --- /dev/null +++ b/cs-cz/javascript.html.markdown @@ -0,0 +1,551 @@ +--- +language: javascript +contributors: + - ["Adam Brenecki", "http://adam.brenecki.id.au"] + - ["Ariel Krakowski", "http://www.learneroo.com"] +translators: + - ["Michal Martinek", "https://github.com/MichalMartinek"] +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 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. diff --git a/cs-cz/python3.html.markdown b/cs-cz/python3.html.markdown index b498046a..581ed3a3 100644 --- a/cs-cz/python3.html.markdown +++ b/cs-cz/python3.html.markdown @@ -7,7 +7,7 @@ contributors: - ["Tomáš Bedřich", "http://tbedrich.cz"] translators: - ["Tomáš Bedřich", "http://tbedrich.cz"] -filename: learnpython3.py +filename: learnpython3-cz.py lang: cs-cz --- |