Lekce 3 - Proměnné v JavaScriptu

V minulé lekci, VS Code a první skript, jsme si připravili Visual Studio Code a vytvořili první skript.

Dnes se v JavaScript tutoriálu podrobně podíváme na základní datové typy. Ačkoli JavaScript řeší datové typy do určité míry za nás, nemůžeme se jim úplně vyhýbat a měli bychom rozumět tomu, jak fungují. Poté se naučíme deklarovat proměnné a provádět s nimi základní operace. Na závěr si ukážeme, jak využít objekt Date pro práci s datem a časem.

Proměnné v JavaScriptu

Určitě znáte z matematiky proměnnou (například x), do které jsme si mohli uložit nějakou hodnotu, nejčastěji číslo. Proměnná je v informatice naprosto totéž, je to místo v paměti počítače, kam si můžeme uložit nějaká data (jméno uživatele, aktuální čas nebo databázi článků) a potom s nimi pracovat. Toto místo má podle datového typu proměnné také vyhrazenou určitou velikost, kterou proměnná nesmí přesáhnout.

Každá proměnná má svůj datový typ, který nemusíme předem specifikovat. Datový typ proměnné je určen za běhu programu podle aktuálně uložené hodnoty. Když například napíšeme x = 5, JavaScript automaticky ví, že x je celé číslo. Proto říkáme, že je JavaScript dynamicky typovaný jazyk (dynamicky mění typy proměnných podle jejich obsahu).

Typový systém v JavaScriptu

JavaScript je dynamicky typovaný jazyk. Plně nás odstiňuje od toho, že proměnná má nějaký datový typ. Ona ho samozřejmě má, ale nedává nám to najevo. Lze vytvořit proměnnou s číselnou hodnotou, následně ji nastavit objekt a potom desetinné číslo. Jazyk se s tím sám vypořádá a typ automaticky změní. Protože typy u proměnných nemusíme uvádět, začínající programátoři se možná radují, ale časem zjistí, že má tento systém i určité nevýhody. Jedná se zejména o snížení schopnosti automatické kontroly správnosti kódu.

Než přejdeme k samotným datovým typům, představme si koncept typového systému.

Typové systémy

Typový systém je základním stavebním kamenem každého programovacího jazyka. Určuje, jak jsou data uložena, interpretována a manipulována. Existují dva základní typové systémy, a to statický a dynamický.

Statický typový systém

V jazyce se statickým typovým systémem musí být typ každé proměnné explicitně deklarován a nemění se během doby. Jakmile proměnnou jednou deklarujeme, není možné její datový typ změnit. Toto pevné typování pomáhá předcházet chybám, jako jsou typové nekompatibility, ale může být méně flexibilní a vyžaduje více kódu. Příkladem mohou být jazyky C++ nebo Java.

Dynamický typový systém

Na druhou stranu v dynamicky typovaných jazycích, jako je JavaScript, není třeba explicitně uvádět typ proměnné. Typ proměnné se může také dynamicky měnit v průběhu programu. To dodává jazyku větší flexibilitu a umožňuje rychlejší vývoj, ale může to také vést k neočekávaným chybám. Dalšími zástupci jsou například PHP nebo Python.

Základní datové typy v JavaScriptu

JavaScript disponuje následujícími datovými typy:

• string – Slouží pro práci s textovými řetězci. Textová data jsou uchovávána a manipulována jako řetězce znaků.
• number – V JavaScriptu existuje pouze jeden typ číselných hodnot a ukládáme do něj celá i desetinná čísla. Všechna čísla jsou ukládána jako 64bitová a jsou počítána s přesností na 15 desetinných míst.
• bigint – Tento typ byl zaveden později pro práci s velmi velkými celými čísly, které přesahují standardní limit pro čísla v JavaScriptu.
• boolean – Reprezentuje pravdivostní hodnoty. Nabývá pouze hodnot true (pravda), nebo false (nepravda).
• object – Umožňuje ukládat složitější struktury nebo kolekce dat. Objekty mohou obsahovat různé datové typy, včetně jiných objektů a funkcí.
• null – Je hodnota, která byla explicitně přiřazena proměnné. Vyjadřujeme tím, že proměnná momentálně nemá žádnou hodnotu nebo že není spojena s žádným objektem.
• undefined – Použije se, pokud byla proměnná deklarována, ale ještě jí nebyla přiřazena žádná hodnota.

V této lekci se budeme věnovat pouze typům number, boolean, null a undefined. S dalšími typy se seznámíme později v kurzu.

Revoluční standard ECMA 6 přinesl ještě takzvané symboly, tedy další datový typ symbol, ale k tomu se dostaneme až v navazujícím kurzu Objektově orientované programování v JavaScriptu.

Datový typ boolean

Tento typ se používá zejména pro vyhodnocení podmínek a cyklů, ke kterým se dostaneme v dalších dílech. Pokud je podmínka splněna, nabývá hodnoty true, v opačném případě nabývá hodnoty false. Do proměnné typu boolean můžeme vložit přímo hodnoty true a false nebo aktuální hodnotu později změnit:

let pokracovat = true;

Stejně tak však do nich lze uložit podmínku nebo logický výraz. Mějme například obdélník, jehož velikost určují proměnné delka a sirka. My budeme chtít zjistit, který z rozměrů je větší:

let jeDelsi = delka > sirka;
let jeSirsi = sirka > delka;

document.write(jeDelsi); // vypíše true
document.write(jeSirsi); // vypíše false

Deklarace proměnných

Jak jsme viděli na příkladu výše, všechny proměnné se v JavaScriptu deklarují pomocí klíčového slova let. Například proměnnou vek bychom deklarovali takto:

let vek;

V tomto případě nemusíme při deklaraci proměnné přiřadit nějakou hodnotu ihned.

V minulosti se k těmto účelům používalo klíčové slovo var, které dnes slouží již jen k zachování zpětné kompatibility. Setkáme se s ním u starších zdrojových kódů.

Kromě proměnné však můžeme deklarovat i konstantu pomocí klíčového slova const. Té naopak současně musíme operátorem = přiřadit i hodnotu. Přiřazená hodnota je poté již neměnná. To znamená, že konstantě po prvním přiřazení už dále nelze přiřadit novou hodnotu:

const zprava = "Tuto konstantu nelze změnit!";

Kód výše vytvoří konstantu, která obsahuje text. Text píšeme vždy do uvozovek, aby překladač věděl, že je to jen text, a ne název nějaké další proměnné nebo funkce. Nic se zatím ale nevypisuje do okna prohlížeče.

Když nepoužijeme žádné klíčové slovo, na rozdíl od jiných jazyků vytvoříme tzv. globální proměnnou, což není vždy úplně to, co chceme. Globální proměnná je totiž potom přístupná ze všech skriptů a to může vyvolat konflikty a chyby.

Operace s proměnnými

S proměnnými samozřejmě můžeme provádět nejrůznější operace. Začněme přiřazením, jež se provádí pomocí operátoru =. Následně provedeme sčítání. Můžeme sčítat čísla, ale dokonce i textové řetězce (ty se tím spojí v jeden text). Sčítáme pomocí operátoru +. Ve VS Code si ve složce prvni_skripty/ založíme nový soubor promenne.html a vložíme do něj kód:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Proměnné v JavaScriptu</title>
    </head>

    <body>
        <script>
            let a = 10;
            let b = 20;
            let vysledek = a + b;
            document.write("Zde je součet čísel a a b: ");
            document.write(vysledek);
        </script>
    </body>
</html>

Po spuštění skriptu v prohlížeči uvidíme:

Zkusme si nyní podobně vytvořit dvě textové proměnné a jejich hodnotu sečíst. Kód našeho programu rozšíříme do následující podoby:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Proměnné v JavaScriptu</title>
    </head>

    <body>
        <script>
            let a = 10;
            let b = 20;
            let vysledek = a + b;
            document.write("Zde je součet čísel a a b: ");
            document.write(vysledek);
            document.write("<br />"); // Vložíme HTML tag pro nový řádek
            let jmeno = "Karel";
            let prijmeni = "Novák";
            let osoba = jmeno + prijmeni;
            document.write("Zde je součet řetězců jmeno a prijmeni: ");
            document.write(osoba);
        </script>
    </body>
</html>

Výstup programu v prohlížeči:

Ve výstupu tohoto skriptu jsme viděli rozdíl mezi číslem a řetězcem. Můžeme samozřejmě i odčítat, násobit a dělit, jsou k tomu operátory -, *, \. Stále jsme v HTML, chceme-li tedy nový řádek, vložíme do stránky prostě HTML tag <br /> pro odřádkování.

V JavaScriptu můžeme dokonce sčítat i číslo a textový řetězec. Interpret si číslo převede na řetězec a výsledkem bude součet řetězců:

let jmeno = "Karel";
let id = 20;
let osoba = jmeno + id;
document.write("Zde je součet řetězce a čísla: ");
document.write(osoba);

Výsledek:

Datum a čas

Podívejme se ještě, jak se pracuje s datem a časem. Výsledkem bude první skript do našich stránek, který bude mít nějaké praktické využití. Vše potřebné, tedy čas i datum, obsahuje objekt Date. Ukážeme si, jak si objekt vytvořit a jak s ním pracovat. Vytvoříme jej pomocí klíčového slova new, které nám ho uloží do proměnné podobně, jako jsme to dělali s čísly nebo textem:

let date = new Date(); // Vytvoří proměnnou, ve které je aktuální datum a čas

Běžná proměnná neumí nic moc jiného než uchovávat hodnotu. Co nejjednodušeji řečeno, objekt je chytřejší. Když si jej uložíme do proměnné, můžeme na něm poté volat tzv. metody. Vzpomeňme si na objekt document a metodu write(). S datem je to velmi podobné.

Na objektu Date můžeme volat následující metody:

• getDate() – Vrátí číslo dne v měsíci, 1 je prvního.
• getMonth() – Vrátí číslo měsíce v roce, leden je 0, takže je nutné přičíst 1.
• getFullYear() – Vrátí aktuální rok.
• getHours() – Vrátí hodiny.
• getMinutes() – Vrátí minuty.
• getSeconds() – Vrátí sekundy.
• getTime() – Vrátí počet milisekund od 1. 1. 1970.

Když říkáme, že nám metoda něco vrátí, máme tím na mysli, že metoda nám poskytne nějakou hodnotu jako výsledek své činnosti. Získanou hodnotu pak můžeme uložit do proměnné, vypsat na obrazovku, použít v dalším výpočtu a podobně.

Vytvořme si ve složce prvni_skripty/ nový soubor datum_cas.html a vypišme si aktuální datum a čas:

let date = new Date(); // Vytvoří proměnnou, ve které je aktuální datum a čas
document.write("Dnes je: " + date.getDate() + ". " + (date.getMonth() + 1) + ". " + date.getFullYear());
document.write("<br />");
document.write("Čas je: " + date.getHours() + ":" + date.getMinutes());

V prohlížeči uvidíme:

Datum a čas se získává samozřejmě z počítače uživatele. Opakujeme, JavaScript běží u klienta Když tedy čas v počítači změníme, změní se i na stránce.

V následujícím kvízu, Kvíz - Úvod, konzole a proměnné v JavaScriptu, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.