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é

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.

Typový systém v JavaScriptu

Typový systém je základním stavebním kamenem každého programovacího jazyka. Určuje, jak jsou data v proměnných 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. 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 je např. uložení textu do čísla, ale 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é. Ten je určen za běhu programu podle aktuálně uložené hodnoty. Když například napíšeme let x = 5, JavaScript automaticky založí v paměti prostor pro číslo.

Lze dokonce vytvořit proměnnou s číselnou hodnotou, následně ji nastavit objekt a potom text. 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. Dalšími jazyky s dynamickým typováním jsou například Python nebo PHP.

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, tak se v programování říká textovým hodnotám. Zapisujeme je do uvozovek, buď jednoduchých ' nebo dvojitých ", fungují stejně, jen je nelze kombinovat.
• number – V JavaScriptu existuje pouze jeden typ pro číselné hodnoty 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 další vnořené datové typy, včetně jiných objektů a funkcí.
• null – Je prázdná 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.
• symbol - Je zajištěno, že je uložený unikátní identifikátor.

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

Deklarace proměnných

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ů.

Konstanty

Kromě proměnné 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 "Tuto konstantu nelze změnit!". Všimněte si, že textové řetězce 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 čísly a řetězci

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 v značce <script> rozšíříme do následující podoby:

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);

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:

Datový typ boolean

Tento typ se používá zejména pro vyhodnocení podmínek, 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

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 v něm standardní HTML strukturu. Následně si vypišme aktuální datum a čas:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Datum a čas v JavaScriptu</title>
    </head>

    <body>
        <script type="text/javascript">
            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());
        </script>
    </body>
</html>

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š.