3. diel - Premenné v JavaScripte

V minulej lekcii, VS Code a prvý skript , sme si pripravili Visual Studio Code a vytvorili prvý skript.

Dnes sa v JavaScript tutoriále podrobne pozrieme na základné dátové typy. Hoci JavaScript rieši dátové typy do určitej miery za nás, nemôžeme sa im úplne vyhýbať a mali by sme rozumieť tomu, ako fungujú. Potom sa naučíme deklarovať premenné a vykonávať s nimi základné operácie. Na záver si ukážeme, ako využiť objekt Date na prácu s dátumom a časom.

Premenné v JavaScripte

Určite poznáte z matematiky premennú (napríklad x), do ktorej sme si mohli uložiť nejakú hodnotu, najčastejšie číslo. Premenná je v informatike úplne to isté, je to miesto v pamäti počítača, kam si môžeme uložiť nejaké dáta (meno užívateľa, aktuálny čas alebo databázu článkov) a potom s nimi pracovať. Toto miesto má podľa dátového typu premennej tiež vyhradenú určitú veľkosť, ktorú premenná nesmie presiahnuť.

Každá premenná má svoj dátový typ, ktorý nemusíme vopred špecifikovať. Dátový typ premennej je určený za behu programu podľa aktuálne uloženej hodnoty. Keď napríklad napíšeme x = 5, JavaScript automaticky vie, že x je celé číslo. Preto hovoríme, že JavaScript je dynamicky typovaný jazyk (dynamicky mení typy premenných podľa ich obsahu).

Typový systém v JavaScripte

Javascript je dynamicky typovaný jazyk. Plne nás odtieňuje od toho, že premenná má nejaký dátový typ. Ona ho samozrejme má, ale nedáva nám to najavo. Je možné vytvoriť premennú s číselnou hodnotou, následne ju nastaviť objekt a potom desatinné číslo. Jazyk sa s tým sám vysporiada a typ automaticky zmení. Pretože typy u premenných nemusíme uvádzať, začínajúci programátori sa možno radujú, ale časom zistia, že má tento systém aj určité nevýhody. Ide najmä o zníženie schopnosti automatickej kontroly správnosti kódu.

Než prejdeme k samotným dátovým typom, predstavme si koncept typového systému.

Typové systémy

Typový systém je základným stavebným kameňom každého programovacieho jazyka. Určuje, ako sú dáta uložené, interpretované a manipulované. Existujú dva základné typové systémy, a to statický a dynamický.

Statický typový systém

V jazyku so statickým typovým systémom musí byť typ každej premennej explicitne deklarovaný a nemení sa počas doby. Akonáhle premennú raz deklarujeme, nie je možné jej dátový typ zmeniť. Toto pevné typovanie pomáha predchádzať chybám, ako sú typové nekompatibility, ale môže byť menej flexibilné a vyžaduje viac kódu. Príkladom môžu byť jazyky C++ alebo Java.

Dynamický typový systém

Na druhú stranu, v dynamicky typovaných jazykoch, ako je JavaScript, nie je potrebné explicitne uvádzať typ premennej. Typ premennej sa môže tiež dynamicky meniť v priebehu programu. To dodáva jazyku väčšiu flexibilitu a umožňuje rýchlejší vývoj, ale môže tiež viesť k neočakávaným chybám. Ďalšími zástupcami sú napríklad PHP alebo Python.

Základné dátové typy v JavaScripte

JavaScript disponuje nasledujúcimi dátovými typmi:

• string – Slúži na prácu s textovými reťazcami. Textové dáta sú uchovávané a manipulované ako reťazce znakov.
• number – V JavaScripte existuje iba jeden typ číselných hodnôt a ukladáme do neho celé aj desatinné čísla. Všetky čísla sú ukladané ako 64-bitové a sú počítané s presnosťou na 15 desatinných miest.
• bigint – Tento typ bol zavedený neskôr pre prácu s veľmi veľkými celými číslami, ktoré presahujú štandardný limit pre čísla JavaScriptu.
• boolean – Reprezentuje pravdivostné hodnoty. Nadobúda iba hodnoty true (pravda) alebo false (nepravda).
• object – Umožňuje ukladať zložitejšie štruktúry alebo kolekcie dát. Objekty môžu obsahovať rôzne dátové typy, vrátane iných objektov a funkcií.
• null – Je hodnota, ktorá bola explicitne priradená premennej. Vyjadrujeme tým, že premenná momentálne nemá žiadnu hodnotu alebo že nie je spojená so žiadnym objektom.
• undefined – Použije sa, ak bola premenná deklarovaná, ale ešte jej nebola priradená žiadna hodnota.

V tejto lekcii sa budeme venovať iba typom number, boolean, null a undefined. S ďalšími typmi sa zoznámime neskôr v kurze.

Revolučný štandard ECMA 6 priniesol ešte takzvané symboly, teda ďalší dátový typ symbol, ale k tomu sa dostaneme až v nadväzujúcom kurze Objektovo orientované programovanie v JavaScripte.

Dátový typ boolean

Tento typ sa používa najmä na vyhodnotenie podmienok a cyklov, ku ktorým sa dostaneme v ďalších dieloch. Pokiaľ je podmienka splnená, nadobúda hodnotu true, v opačnom prípade nadobúda hodnotu false. Do premennej typu boolean môžeme vložiť priamo hodnoty true a false alebo aktuálnu hodnotu neskôr zmeniť:

let continue = true;

Rovnako však možno do nich uložiť podmienku alebo logický výraz. Majme napríklad obdĺžnik, ktorého veľkosť určujú premenné length a width. My budeme chcieť zistiť, ktorý z rozmerov je väčší:

let isLonger = length > width;
let isWider = width > length;

document.write(isLonger ); // writes out true
document.write(isWider ); // writes out false

Deklarácia premenných

Ako sme videli na príklade vyššie, všetky premenné sa v JavaScripte deklarujú pomocou kľúčového slova let. Napríklad premennú age by sme deklarovali takto:

let age;

V tomto prípade nemusíme pri deklarácii premennej priradiť nejakú hodnotu ihneď.

V minulosti sa na tieto účely používalo kľúčové slovo var, ktoré dnes slúži už len na zachovanie spätnej kompatibility. Stretneme sa s ním pri starších zdrojových kódoch.

Okrem premennej však môžeme deklarovať aj konštantu pomocou kľúčového slova const. Tej naopak súčasne musíme operátorom = priradiť aj hodnotu. Priradená hodnota je potom už nemenná. To znamená, že konštante po prvom priradení už ďalej nemožno priradiť novú hodnotu:

const message = "This constant cannot be changed!";

Kód vyššie vytvorí konštantu, ktorá obsahuje text. Text píšeme vždy do úvodzoviek, aby prekladač vedel, že je to len text, a nie názov nejakej ďalšej premennej alebo funkcie. Nič sa zatiaľ ale nevypisuje do okna prehliadača.

Keď nepoužijeme žiadne kľúčové slovo, na rozdiel od iných jazykov vytvoríme tzv. globálnu premennú, čo nie je vždy úplne to, čo chceme. Globálna premenná je totiž potom prístupná zo všetkých skriptov a to môže vyvolať konflikty a chyby.

Operácia s premennými

S premennými samozrejme môžeme robiť najrôznejšie operácie. Začnime priradením, to sa vykonáva pomocou operátora =. Následne vykonáme sčítanie. Môžeme sčítať čísla, ale dokonca aj textové reťazce (tie sa tým spoja do jedného textu). Sčítame pomocou operátora +. Vo VS Code si v priečinku prvni_skripty/ založíme nový súbor promenne.html a vložíme doň kód:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Variables in JavaScript</title>
    </head>

    <body>
        <script>
            let a = 10;
            let b = 20;
            let result = a + b;
            document.write("The result of a and b added together: ");
            document.write(result);
        </script>
    </body>
</html>

Po spustení skriptu v prehliadači uvidíme:

Skúsme si teraz podobne vytvoriť dve textové premenné a ich hodnotu sčítať. Kód nášho programu rozšírime do nasledujúcej podoby:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Variables in JavaScript</title>
    </head>

    <body>
        <script>
            let a = 10;
            let b = 20;
            let result = a + b;
            document.write("The result of a and b added together: ");
            document.write(result);
            document.write("<br />"); // Insert HTML tag for a new row
            let firstName = "Karel";
            let lastName = "Novák";
            let person = firstName + lastName;
            document.write("The result of strings firstName and lastName added together: ");
            document.write(person);
        </script>
    </body>
</html>

Výstup programu v prehliadači:

Vo výstupe tohto skriptu sme videli rozdiel medzi číslom a reťazcom. Môžeme samozrejme aj odčítať, násobiť a deliť, sú k tomu operátormi -, *, \. Stále sme v HTML, ak teda chceme nový riadok, vložíme do stránky jednoducho HTML tag <br /> pre odriadkovanie.

V JavaScripte môžeme dokonca sčítať aj číslo a textový reťazec. Interpret si číslo prevedie na reťazec a výsledkom bude súčet reťazcov:

let name = "Karel";
let id = 20;
let person = name + id;
document.write("The result of a string name and number id added together: ");
document.write(person);

Výsledok:

Dátum a čas

Pozrime sa ešte, ako sa pracuje s dátumom a časom. Výsledkom bude prvý skript do našich stránok, ktorý bude mať nejaké praktické využitie. Všetko potrebné, teda čas aj dátum, obsahuje objekt Date. Ukážeme si, ako si objekt vytvoriť a ako s ním pracovať. Vytvoríme ho pomocou kľúčového slova new, ktoré nám ho uloží do premennej podobne, ako sme to robili s číslami alebo textom:

let date = new Date(); // Creates a variable that holds the current date and time

Bežná premenná nevie nič iné ako uchovávať hodnotu. Čo najjednoduchšie povedané, objekt je múdrejší. Keď si ho uložíme do premennej, môžeme na ňom potom volať tzv. metódy. Spomeňme si na objekt document a metódu write(). S dátumom je to veľmi podobné.

Na objekte Date môžeme volať nasledujúce metódy:

• getDate() – vráti číslo dňa v mesiaci, 1 je prvého,
• getMonth() – vráti číslo mesiaca v roku, január je 0, takže je nutné pripočítať 1,
• getFullYear() – vráti aktuálny rok,
• getHours() – vráti hodiny,
• getMinutes() – vráti minúty,
• getSeconds() – vráti sekundy,
• getTime() – vráti počet milisekúnd od 1. 1. 1970.

Keď hovoríme, že nám metóda niečo vráti, máme tým na mysli, že metóda nám poskytne nejakú hodnotu ako výsledok svojej činnosti. Získanú hodnotu potom môžeme uložiť do premennej, vypísať na obrazovku, použiť v ďalšom výpočte a podobne.

Vytvorme si v priečinku first_scripts/ nový súbor date_time.html a vypíšme si aktuálny dátum a čas:

let date = new Date(); // Creates a variable that holds the current date and time
document.write("The Date is: " + date.getDate() + ". " + (date.getMonth() + 1) + ". " + date.getFullYear());
document.write("<br />");
document.write("The Time is: " + date.getHours() + ":" + date.getMinutes());

V prehliadači uvidíme:

Dátum a čas sa získava samozrejme z počítača používateľa. Opakujeme, JavaScript beží u klienta:-) Keď teda čas v počítači zmeníme, zmení sa aj na stránke.

V nasledujúcom kvíze, Kvíz - Úvod, konzoly a premenné v JavaScripte, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.