Robert Whitney
Toto je druhá část 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 s druhým tutoriálem.
Základy JavaScriptu – obsah:
V tomto blogovém příspěvku budeme pokračovat tam, kde jsme skončili v první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 JavaScriptu. Pokud jste je z nějakého důvodu zavřeli, bylo by dobré je znovu otevřít. Pojďme se začít učit základy JavaScriptu.
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 JavaScriptu, jakmile otevřete Chrome. Nebo můžete také přejít do nabídky nahoře a zvolit Zobrazit -> Vývojář -> Konzole JavaScriptu.
Základy JavaScriptu
JavaScript, stejně jako všechny ostatní programovací jazyky, je jazyk, který používáte k komunikaci s počítači. Stejně jako má přirozený jazyk gramatiku a známá slova pro vytváření správných vět, programovací jazyky mají také určitá pravidla, která byste měli dodržovat, abyste efektivně komunikovali s počítačem.
Například určitá slova znamenají určité věci pro JavaScript engine, který spouští náš kód, jako například klíčové slovo “alert”, které jsme použili v předchozím tutoriálu, mělo význam zobrazit uživateli upozornění se specifickými slovy, která vložili do závorek hned za tím. V našem případě jsme napsali “Ahoj, světe!” a dostali jsme upozornění, které říkalo “Ahoj, světe!”.
Existují také další rezervovaná klíčová slova v JavaScriptu, o kterých bychom měli vědět, abychom mohli efektivně komunikovat s počítačem pomocí správných slov a gramatiky. Také stejně jako gramatika, kterou máme v přirozeném jazyce, existuje také gramatika v programovacích jazycích. Tato gramatika se běžně nazývá “syntax” v programovacích jazycích a JavaScript není výjimkou. Proto je dobré pochopit hlavní klíčová slova a gramatiku, kterou máme v JavaScriptu, když začínáme s učením základů JavaScriptu. Pojďme se podívat na některé z hlavních věcí, které bychom měli vědět o JavaScriptu.
Provádění řádek po řádku
Pokud jde o základy JavaScriptu, jednou z prvních věcí, které byste měli vědět, je, že kód, který napíšete, bude prováděn řádek po řádku, shora dolů. Tento styl provádění kódu se také označuje jako JavaScript jako “interpretovaný programovací jazyk”.
Naopak některé programovací jazyky jsou “kompilované programovací jazyky”. Některé příklady kompilovaných jazyků by byly: C, C++, C#, Swift, Java a tak dále. Hlavní rozdíl je v tom, že u kompilovaných programovacích jazyků bude veškerý kód, který napíšete, “kompilován” a bude prováděn jako celek počítačem. To je také důvod, proč může být obtížnější začít se učit kompilovaný programovací jazyk, protože může být těžší zjistit, kde jste udělali chybu ve svém programu.
Některé příklady interpretovaných programovacích jazyků by byly JavaScript, Python, Bash a Matlab. U interpretovaných programovacích jazyků máte inherentní výhodu vidět, na kterém řádku jste udělali chybu, například zapomenutím středníku nebo neuzavřením závorek ve vašem kódu. Mít tuto vlastnost nemusí mít velký rozdíl v určitých aplikacích, ale když se snažíme načíst webovou stránku s pomalým internetovým připojením, preferujete, aby každý jednotlivý řádek JavaScriptu byl proveden co nejrychleji.
Dva způsoby, jak ukončit příkazy
Počítačový program je na konci dne hromada pokynů pro počítač. Ale kde jeden program končí a kde začíná další pokyn? Existují různé přístupy k tomuto problému. JavaScript používá dvě hlavní věci, středník a závorky.
V závislosti na typu pokynu, který píšeme, obvykle použijeme buď jedno, abychom ukončili nebo zabalili sadu pokynů. Použijeme různé typy závorek pro různé funkce a datové typy. Například v kódu alert(“Ahoj, světe!”);, který jsme dříve provedli, závorky, které obklopují text “Ahoj, světe!”, říkají počítači, co by mělo upozornění říkat, a středník na konci pokynu říká počítači, že tento pokyn končí zde, můžete přejít k dalšímu pokynu. To je velmi podobné tomu, jak používáme tečku “.” k ukončení vět v angličtině.
Komentáře
Přidání komentářů do kódu je nezbytnou součástí programování. Může být snadné pochopit, co kód píšete, když ho píšete, ale v závislosti na složitosti kódu můžete mít za šest měsíců velmi malou představu, když se kódu vrátíte.
Přidání komentářů nejen usnadňuje pochopení vašeho kódu pro budoucí vás, ale také usnadňuje každému, s kým pracujete, pochopit kód. Může vám to také pomoci lépe rozvinout vaše porozumění problému, se kterým pracujete, protože obvykle je mnohem snazší řešit problémy tím, že je rozdělíte na menší kousky. Komentované části vašeho kódu budou ignorovány interpretem a nebudou prováděny.
Existují dva způsoby, jak můžete přidat komentáře v JavaScriptu. První je přidat jednoduchý “jednořádkový” komentář se dvěma lomítky takto:
// toto je komentář
Tímto způsobem bude cokoliv, co napíšete po dvou lomítkách, ignorováno na konkrétním řádku, na kterém jste umístili lomítka. Můžete to opakovat tolikrát, kolikrát chcete, abyste pokryli více řádků komentáři takto:
// toto je komentář. // toto je další komentář. // můžete pokračovat v komentování takto.
Dalším důvodem, proč používáme komentáře, je zakomentovat část kódu, abychom experimentovali s kódem. Například můžete napsat stejnou funkčnost několika způsoby a můžete chtít zakomentovat jednu verzi stejného kódu, abyste porovnali jejich individuální výkon nebo výsledky. Pojďme se na to podívat také na příkladu.
Pokračujte a zkopírujte a vložte následující kód do konzole JavaScriptu, kterou jste otevřeli v Chrome.
// pozdravit uživatele alert("Ahoj, uživateli!"); alert("Ahoj, uživateli!");
Pokud chcete mít další praxi a napsat celý kód sami, můžete to také udělat. Jedna věc, kterou byste měli vědět o psaní více řádků kódu v konzole, je, že abyste se dostali na další řádek, aniž byste ho provedli, můžete stisknout “shift + enter”. Jinak, po napsání jednoho řádku kódu, pokud stisknete pouze enter, provede to ten řádek kódu. V tomto příkladu to není velký problém a je vlastně v pořádku provádět to řádek po řádku, protože máme jednoduchý příklad, který může také fungovat tímto stylem.
Po zkopírování a vložení nebo napsání kódu sami, pokračujte a stiskněte “enter”, abyste kód spustili. Výsledek by vám měl dát dvě samostatná upozornění. Také pro zavření upozornění můžete kliknout na “OK”, v tomto případě nic neudělají, protože to je jednoduché upozornění a nespouští nic po zobrazení zprávy, kterou chceme zobrazit.
Když jsme kód provedli tímto způsobem, provádíme stejnou funkčnost dvakrát. Ale co byste měli udělat, pokud chcete vidět pouze jednu implementaci najednou? No, víte přesně, co v tomto případě udělat, protože jsme o tom už mluvili. Pokračujte a zakomentujte jeden z řádků po vložení nebo napsání kódu, aby se provedla pouze druhá implementace “Ahoj, uživateli!”.
Jakmile dokončíte výzvu, nebo pokud se během výzvy zaseknete, můžete se podívat na řešení kódu k výzvě níže. Předtím, než se podíváte na řešení, vždy doporučuji vyzkoušet to sami, protože se nejlépe učíte, když to opravdu praktikujete. Pokud jste výzvu úspěšně dokončili, měli byste se dívat na obrazovku jako je tato:
Všimněte si, že když zakomentujete řádek kódu, změní se na stejnou barvu jako předchozí zakomentovaný řádek. Tento barevný rozdíl zde ve skutečnosti nedělá rozdíl pro počítač, ale je to spíše užitečná funkce pro nás, když píšeme kód. Tímto způsobem je mnohem snazší, pokud omylem zakomentujete řádek kódu, protože barvy to udělají zřejmým.
Dalším způsobem, jak komentovat kód, je použití lomítka a znaku hvězdičky. Tímto způsobem můžeme vytvářet jednořádkové nebo vícerozměrné komentáře v našem kódu.
/* jednořádkový komentář */ /* komentování začíná, když dáme lomítko a hvězdičku a komentované oblasti končí když uzavřeme komentář hvězdičkou a lomítkem takto */
Teď znáte základy JavaScriptu. V dalším tutoriálu uvidíme extrémně běžný koncept v programování nazývaný “proměnné” spolu se základními datovými typy v JavaScriptu.
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í.
