Robert Whitney
Toto je část 4 série blogových příspěvků o JavaScriptu, která vás provede od začátečníka po pokročilého. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste začali programovat v JavaScriptu. Bez dalších okolků, pojďme začít se čtvrtým tutoriálem.
Úryvky a řídicí struktury – obsah:
V tomto blogovém příspěvku budeme pokračovat tam, kde jsme skončili v třetím blogovém příspěvku. V této fázi byste měli mít otevřený prohlížeč Google Chrome a konkrétně otevřenou konzoli JavaScript. Pokud jste je z nějakého důvodu zavřeli, nyní je dobrý čas je znovu otevřít.
Pokud jste na Macu, klávesová zkratka pro otevření konzole je stisknout “Option + Command + J”, poté co otevřete Chrome. Pokud používáte zařízení se systémem Windows, můžete použít klávesovou zkratku “Control + Shift + J” pro otevření konzole JavaScript, jakmile otevřete Chrome. Nebo můžete také přejít do nabídky v horní části a jít na Zobrazit -> Vývojář -> Konzole JavaScript.
Vylepšení našeho nastavení kódování na úryvky
Až do této chvíle v kurzu jsme mohli psát všechno řádek po řádku a vykonávat to řádek po řádku. Nebyl by to nejpohodlnější způsob, jak věci spouštět, ale fungovalo by to. Od tohoto tutoriálu budeme psát kód, který vyžaduje více řádků k vytvoření kompletního souboru instrukcí. Abychom toho dosáhli, použijeme něco, čemu se říká “úryvky” v Google Chrome. Bez dalších okolků, pojďme vylepšit naše nastavení z konzole JavaScript na úryvky Chrome.
V současnosti byste měli mít otevřenou konzoli, a pokud jste sledovali předchozí tutoriály, měli byste mít obrazovku, která vypadá takto:
Když se podíváte na tuto obrazovku, nebo na vaši obrazovku, měli byste vidět: Prvky, Konzole, Zdroje, Síť, Výkon, Paměť, Aplikace a tak dále napsané vedle sebe v horní liště tmavé oblasti. Pokud je vidíte v světlejších barvách, to je také naprosto v pořádku. To znamená, že používáte světlý režim, který může být výchozím režimem pro denní čas. Obrazovka, kterou aktuálně ukazuji, používá barevné schéma pro tmavý režim v nastavení konzole Chrome. Pokud vidíte Prvky, Konzole, Zdroje, Síť a tak dále, ať už v jakémkoli barevném schématu, jste připraveni.
Pokud se podíváte blíže na horní lištu konzole, můžete vidět, že nápis “Konzole” vypadá mírně jinou barvou. Pokračujte a klikněte na “Zdroje” hned vedle něj.
Jakmile kliknete na zdroje, měli byste se dívat na obrazovku, která nějak vypadá takto.
Jedním z rozdílů, které byste mohli očekávat, je, že pravděpodobně neuvidíte soubor “notes.js”, protože jsem ho vytvořil dříve. Jinak by to mělo vypadat docela podobně. Chcete-li vytvořit nový soubor, klikněte na “+ Nový úryvek”. Jakmile na něj kliknete, vytvoří se pro vás nový JavaScriptový soubor a můžete ho pojmenovat, jak chcete. V tomto tutoriálu ho pojmenujeme “index.js”, protože je běžnou praxí pojmenovat první nebo hlavní soubor jako “index.js”.
Pokud chcete sledovat tento tutoriál slovo od slova, po kliknutí na “+ Nový úryvek” můžete zadat název “index.js” a stisknout klávesu Enter na klávesnici. Nyní můžeme kliknout dovnitř otevřeného souboru na hlavní oblasti, která se otevřela, abychom začali programovat v JavaScriptu.
Pojďme začít s něčím, co už víme, že funguje. A to je:
alert("Ahoj, světe!");
Můžete to buď napsat sami pro další praxi, nebo zkopírovat a vložit část kódu do souboru, který jsme vytvořili. Velmi doporučuji napsat to sami, protože takto se to v mnoha případech učíte. Jakmile to napíšete, pokud stisknete klávesu Enter, uvidíte, že kód není vykonán. Místo toho se váš kurzor přesune na další řádek, jako v jakékoli jiné textové editační oblasti. Existují dva hlavní způsoby, jak můžeme vykonat náš kód. Prvním je kliknout na tlačítko přehrávání, které se nachází v pravém dolním rohu.
Pokud kliknete na to tlačítko přehrávání, mělo by to vykonat náš kód a zobrazit nám výsledky.
Jakmile kliknete na “OK”, pojďme také spustit náš kód pomocí druhého hlavního způsobu. Druhým hlavním způsobem, jak spustit váš kód, nebo spustit váš úryvek, je použít klávesovou zkratku. Jak vidíme, již nám ukazuje zkratku, když klikneme na tlačítko spustit. Tato klávesová zkratka je “Command + Enter”. Abychom to udělali, můžeme stisknout klávesu Command a poté stisknout klávesu Enter. Tímto způsobem také spustíme náš kód a dostaneme stejné výsledky jako kliknutím na tlačítko přehrávání.
A s tím nyní víte o dvou způsobech, jak vykonat náš JavaScriptový kód v úryvcích Chrome.
Pokud chcete vytvořit nové soubory, abyste si třeba dělali poznámky o JavaScriptu, nebo abyste si procvičili nějaký JavaScriptový kód, můžete vždy vytvořit nové soubory kliknutím na “+ Nový úryvek” a pojmenovat své soubory, jak chcete. Nyní, když máme naše nové nastavení kódování připravené, pojďme se podívat na další JavaScript.
Řídicí struktury
Když píšeme kód, musíme brát v úvahu mnoho scénářů a akcí, které může uživatel provést. Tato příprava na různé scénáře může pocházet z různých zdrojů, jako je zařízení, na kterém náš kód běží, velikost obrazovky, na které se má zobrazit, různé typy prohlížečů, které může uživatel mít, a tak dále. Ale jak se ujistíme, že jsme připraveni na různé scénáře? Pokud napíšete různé kódy jeden po druhém, má smysl vykonávat je všechny pro uživatele? Abychom na to všechno odpověděli a více, použijeme řídicí struktury.
Řídicí struktury nám umožňují řídit vykonávání kódu, aby se náš kód mohl přizpůsobit různým podmínkám. Existuje několik běžných prvků používaných pro řídicí struktury. V tomto tutoriálu začneme s tím nejjednodušším a odtud se posuneme dál. První, který uvidíme, používá příkazy If, else, else if k řízení vykonávání kódu.
If, else a else if
Toto je nejjednodušší řídicí struktura, se kterou začít. Co nám umožňuje, je vykonat nějaký kus kódu, pokud je určitá podmínka pravdivá, a vykonat jiný kus kódu, pokud je jiná podmínka pravdivá. Pojďme to vidět na příkladu. Předpokládejme, že pokud venku prší, vezmu si s sebou deštník. Jinak si deštník nevezmu. Můžeme tuto logiku a uvažování přeložit do kódu takto:
(Před napsáním tohoto kódu okomentujeme kód z předchozího kódu, který máme v souboru, tím, že před něj umístíme dvě lomítka, aby se nevykonával, ale stále máte jeho kopii. Po přidání lomítek by to mělo vypadat takto:)
// alert("Ahoj, světe!");
let rainy = true;
if (rainy){
alert("Vezmi si deštník");
} else {
alert("Není potřeba deštník");
}
Vykonání tohoto kódu by nám dalo následující výstup:
// alert("Ahoj, světe!");
let rainy = false;
if (rainy){
alert("Vezmi si deštník");
} else {
alert("Není potřeba deštník");
}
Zatímco vykonání této verze kódu, která říká, že neprší, by dalo následující výstup:
Když píšete kód, abyste provedli změny v kódovém souboru, pokud se podíváte blíže na název souboru, uvidíte, že před názvem souboru bude hvězdička. To znamená, že kódový soubor, který píšeme, není plně uložen. To nemusí mít velký rozdíl, pokud píšete pouze pár řádků kódu, které můžete vždy napsat, ale častěji než ne budete chtít uložit svůj kód, abyste ho mohli znovu použít nebo zkontrolovat později. Tento kódový soubor můžeme uložit stejným způsobem, jakým ukládáme jiné soubory, takže to bude “Command + S” na Macu a “Control + S” na Windows.
V našem případě, protože vykonáváme náš kód hned po jeho napsání, se náš soubor automaticky uložil, když vykonáme kód. Takže pokud plánujete napsat nějaký kód a nechat ho na hodiny, je dobré občas svůj kód uložit, abyste se ujistili, že neztrácíte žádný významný pokrok.
Je skvělé, že můžeme mít náš kód přizpůsoben k binární podmínce pomocí příkazu If a else, ale co když máme více věcí, které je třeba zvážit, což bude pravděpodobně případ v reálném životě. Například, co když je zima a potřebujete si vzít mikinu, když je zima. Jeden způsob, jak to udělat, by byl příkaz “else if” a můžeme to udělat takto:
// alert("Ahoj, světe!");
let rainy = false;
let cold = true;
if (rainy){
alert("Vezmi si deštník");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
Výstup tohoto kódu by vypadal takto:
Takže pokud je určitá podmínka pravdivá, první kód, který je mezi závorkami, bude vykonán. V našem případě, protože první podmínka kontroluje déšť, upozorníme uživatele, že by si měl vzít deštník. Pokud je tato podmínka nepravdivá, což znamená, že neprší, budeme pokračovat v kontrole dalších podmínek pomocí příkazu “else if”. Jedna věc, která se výrazně liší od příkazu “else if”, je, že můžeme kontrolovat tolik podmínek, kolik chceme, pomocí příkazů else if.
Důležité je si pamatovat, že váš kód bude kontrolován shora dolů, pro správnost nebo pravdivost. To znamená, že s aktuálním kódem, pokud je počasí jak deštivé, tak chladné, nebude rozpoznávat chladné počasí, protože první příkaz je správný. Můžeme to také ověřit tím, že změníme kód tak, aby měl obě podmínky deštivé a chladné.
// alert("Ahoj, světe!");
let rainy = true;
let cold = true;
if (rainy){
alert("Vezmi si deštník");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
Teď se možná ptáte, jak to mohu vyřešit? Která z podmínek je důležitější, jestli je zima, nebo prší? Měli byste si vybrat jednu podmínku a obětovat druhou? Musíte vůbec dělat takový výběr? No, vlastně ne. Toto je velmi běžný problém a má velmi běžné a relativně jednoduché řešení. Můžeme použít výraz “a”, abychom pokryli více scénářů. Abychom řekli JavaScriptu, že chceme použít “a” k propojení naší programovací logiky, použijeme dva z tohoto symbolu: “&”. A protože náš kód je kontrolován shora dolů, použijeme nejkomplexnější možnost pro první příkaz if. Aktualizovaný kód tedy vypadá takto.
// alert("Ahoj, světe!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Oblékněte si mikinu a vezměte si deštník.")
} else if (rainy){
alert("Vezmi si deštník");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
Vykonání tohoto kódu by vám dalo upozornění, které vypadá takto:
Daleko lepší. Nyní můžeme kombinovat více různých scénářů, včetně různých kombinací těchto scénářů. Ale co když chceme zvážit scénář, který není chladný, ale deštivý. A předpokládejme, že chceme uživatele upozornit, aby si mikinu nebral, a vzal si pouze deštník. Abychom to udělali, můžeme použít logické “ne”, můžeme to použít v našem kódu s vykřičníkem před podmínkou, kterou chceme specifikovat. Přidejme tuto podmínku do našeho kódu, aby byl kompletnější.
// alert("Ahoj, světe!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Oblékněte si mikinu a vezměte si deštník.")
} else if (rainy && !cold){
alert("Vezmi si deštník, ale ne mikinu.");
} else if (rainy){
alert("Vezmi si deštník");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
Když přidáváme novou podmínku do stromu if else, pokud je to komplexnější podmínka, můžeme ji umístit někam nahoru. Tímto způsobem máme mnohem menší šanci na chyby ve srovnání s opačným přístupem. Jedním z vedlejších účinků injektování nového kódu do existujícího kódu je, že některé části kódu mohou být redundantní nebo nemusí fungovat nejefektivnějším způsobem. Na efektivitu se nebudeme příliš soustředit, ale prozatím můžeme vidět, že pokrýváme jak chladné, tak ne chladné podmínky pro deštivé počasí, takže můžeme volitelně odstranit podmínku, která pouze kontroluje “deštivé” podmínky. Provádění těchto úprav kódu se také nazývá “Refaktoring kódu”, v procesu refaktoringu je cílem učinit kód postupně čistším a efektivnějším.
// alert("Ahoj, světe!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Oblékněte si mikinu a vezměte si deštník.")
} else if (rainy && !cold){
alert("Vezmi si deštník, ale ne mikinu.");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
Když chceme zkontrolovat, zda je některá podmínka pravdivá, můžeme použít operátor “nebo”, což je symbol potrubí použitý dvakrát na vaší klávesnici a vypadá takto “||”.
Pojďme se na to podívat na dalším příkladu. Abychom přidali více příkladů do stejného souboru, aniž bychom zasahovali do nových příkazů, můžeme okomentovat předchozí kód, který jsme použili, tím, že obalíme předchozí kód do těchto symbolů, které jsme viděli dříve:
/* */
Což je lomítko a hvězdička a stejné symboly v opačném pořadí pro uzavření komentované části. Obalme náš aktuální kód do těchto symbolů, aby nezasahoval do nového kódu, který má přijít. Nyní by měl váš kódový soubor vypadat takto:
// alert("Ahoj, světe!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Oblékněte si mikinu a vezměte si deštník.")
} else if (rainy && !cold){
alert("Vezmi si deštník, ale ne mikinu.");
} else if (cold) {
alert("Vezmi si mikinu, ne deštník");
} else {
alert("Není potřeba deštník");
}
*/
Od nynějška se budeme soustředit na nové části, které přidáváme do souboru, abychom se mohli soustředit na učení jedné věci najednou. Můžete volitelně ponechat předchozí kód v komentovaném režimu, přesunout je do nového souboru pro vaše reference, nebo pokud je už nechcete vidět, můžete je smazat pro čistší soubor.
Pojďme pokračovat s naším příkladem na případ “nebo”. Zvažte scénář, kdy navštěvujete svou lednici pro jídlo a nápoje pokaždé, když se cítíte hladoví nebo žízniví. Jak by kód pro to fungoval?
let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
alert("Jděte k lednici a zkontrolujte, co tam máte.");
}
Vykonání tohoto kódu, jak jste pravděpodobně také uhodli, by nám dalo následující výsledek:
Až dosud příklady, které jsme použili, pocházely z blízkých reálných scénářů, ale často budete pracovat s čísly v kódu. Čísla jste viděli dříve v této sérii, ale příliš jsme nemluvili o porovnání nebo operacích, které s nimi můžeme provádět. Nyní, když jsme se naučili o příkazech if else, podívejme se na více o číslech.
Když se zabýváme příkazy if a else if, kontrolujeme pravdivost nějakého prohlášení. Ale můžeme také vytvořit smysluplný if příkaz, pokud máme pouze čísla? Například, co když chci vzít deštník, pokud je více než 50% šance na déšť, můžeme toho dosáhnout pomocí kódu? Ano, můžeme, a zde je, jak by to šlo.
let chanceOfRain = 70;
if (chanceOfRain >= 50) {
alert("Vezmi si deštník.");
}
Když se zabýváme čísly, potřebujeme způsob, jak je převést na nějakou pravdivost nebo nepravdivost, aby if příkaz fungoval. Existuje několik způsobů, jak toho dosáhnout v závislosti na našem použití.
Například můžeme zkontrolovat, zda jsou dvě čísla přesně stejná pomocí tří rovných znaků, jako je tento:
let a = 10;
let b = 10;
if (a === b) {
alert("Jsou stejné.");
}
To by nám dalo upozornění, které říká “Jsou stejné.”.
Můžeme také zkontrolovat, zda nejsou stejné pomocí následujícího kódu:
let a = 10;
let b = 5;
if (a !== b) {
alert("Není to stejné!");
}
Vykonání výše uvedeného kódu nám dá upozornění, které říká “Není to stejné!”.
Můžeme také zkontrolovat, které z nich je větší, větší nebo rovno, menší nebo menší nebo rovno. Můžete najít shrnutí znaků pro vaše pohodlí.
// === kontroluje rovnost // !== kontroluje nerovnost // > větší než // >= větší než nebo rovno // < menší než // <= menší než nebo rovno
Pojďme také vidět pár dalších pro extra praxi a vystavení kódu. Zde je pár příkladových kódů, které všechny zobrazí upozornění, které mají uvnitř if příkazů:
Větší než:
let a = 10;
let b = 5;
if (a > b) {
alert("a je větší než b");
}
Větší než nebo rovno:
let a = 10;
let b = 5;
if (a >= b) {
alert("a je větší než nebo rovno b");
}
Další příklad pro větší než nebo rovno:
let a = 10;
let b = 10;
if (a >= b) {
alert("a je větší než nebo rovno b");
}
Menší než:
let a = 5;
let b = 10;
if (a < b) {
alert("a je menší než b");
}
Menší než nebo rovno:
let a = 5;
let b = 10;
if (a <= b) {
alert("a je menší než nebo rovno b");
}
Další příklad pro menší než nebo rovno:
let a = 10;
let b = 10;
if (a <= b) {
alert("a je menší než nebo rovno b");
}
Použitím kombinace těchto porovnávacích nebo rovnostních znaků můžeme vytvářet složité kódy, které se mohou přizpůsobit různým podmínkám.
Arithmetické operace
Když se zabýváme čísly, dalším, co chceme provádět, jsou aritmetické operace. Většina aritmetických operací by měla být docela známá, ale existují také programovací specifické aritmetické operátory, které mohou být méně známé.
Zde je shrnutí aritmetických operací, které používáme v JavaScriptu, s jejich významem pro vaše pohodlí:
// * násobení // / dělení // + sčítání // - odčítání // % modulo operace, dává nám zbytek po dělení // ** exponentace
První čtyři budou fungovat, jak očekáváte:
let a = 12; let b = 5; let c = a * b; // c bude 60 c = a / b; // c bude nyní 2.4 c = a + b; // c bude nyní 17 c = a - b; // c bude nyní 7
Operace modulo nám dá zbytek po dělení prvního čísla druhým číslem. Pokud budeme pokračovat s předchozím kódem a, b a c:
c = a % b; // c bude nyní 2 c = 18 % 5; // c nyní bude mít hodnotu 3 // protože 18 děleno 5 nám dá zbytek 3
Operátor exponentu provádí exponentaci v JavaScriptu. Je reprezentován dvěma hvězdičkami a bere první prvek na moc druhého prvku.
c = 2 ** 3; // c nyní bude mít hodnotu 8 // protože 2 * 2 * 2 se rovná 8
Toto byl relativně dlouhý tutoriál a vy jste to zvládli! Vylepšili jsme naše nastavení kódování a v tomto tutoriálu jsme se toho hodně naučili. V dalším tutoriálu budeme pokračovat s dalšími způsoby, jak řídit tok našeho kódu!
Robert Whitney
Odborník na JavaScript a lektor, který školí IT oddělení. Jeho hlavním cílem je zvýšit produktivitu týmu tím, že učí ostatní, jak efektivně spolupracovat při programování.
