3. diel - Premenné v JavaScripte

V dnešnom JavaScript tutoriále sa naučíme deklarovať premenné a vykonávať s nimi základné operácie. V druhej časti lekcie sa pozrieme 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ť.

V JavaScripte je práca s premennými trochu odlišná ako v niektorých iných programovacích jazykoch. Hoci každá premenná má svoj dátový typ, nemusíme ho 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).

Deklarácia premenných

Všetky premenné sa v JavaScripte deklarujú pomocou kľúčového slova let. Napríklad premennú vek by sme deklarovali takto:

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 môžeme deklarovať aj konštantu pomocou kľúčového slova const, ktoré súčasne musíme priradiť operátorom = aj hodnotu. Tá je potom už nemenná. To znamená, že konštante po prvom priradení už ďalej nie je možné priradiť novú hodnotu. Názvy konštánt píšeme vždy veľkými písmenami:

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. Tá 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:

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

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, preto, ak chceme nový riadok, vložíme do stránky jednoducho HTML tag <br /> na 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:

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é obsahuje objekt Date, teda čas aj dátum. 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:

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.

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

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 cvičení, Riešené úlohy k 4. lekcii JavaScriptu, si precvičíme 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š.