2. diel - Začíname s JavaScriptom - Prvý skripty

V minulej lekcii, Úvod do JavaScriptu , sme si urobili úvod do jazyka JavaScript. V dnešnom tutoriále si niečo konečne naprogramujeme a vyskúšame. Nebudeme hovoriť, že píšeme programy, pretože budeme písať skôr len také útržky kódu, ktoré budú robiť jednoduchú a špecifickú vec. Urobme si teda prvý skript. Rovno na začiatku hovorím, že keď chcete pracovať s JavaScriptom, musíte vedieť aspoň základy HTML. Skripty nemusíme na rozdiel od serverových jazykov (napr. PHP) nikam nahrávať, budeme si ich spúšťať pekne doma, vo svojom prehliadači. Prehliadačom mám na mysli buď Chrome (ten je úplne ideálne) alebo Firefox. Obaja totiž obsahujú perfektné nástroje pre debugovania skriptov, tým mám na mysli hľadanie chýb v našich skriptoch. Pusťme sa teda do toho!

Vytvorte si novú HTML stránku a jej obsah upravte do nasledujúcej podoby:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Prvá webová aplikácia v JavaScripte</title>
    </head>

    <body>
        <script type="text/javascript">
            document.write("Ahoj ITnetwork!");
        </script>
    </body>
</html>

Keď si stránku teraz spustíte v prehliadači, mala by obsahovať text "Ahoj ITnetwork!".

Prvá webová aplikácia v JavaScripte

localhost

Je to obdoba aplikácie Hello World (ahoj svete), ktorá sa používa pri výučbe programovanie v prvých aplikáciách. Vysvetlime si, čo sme to vlastne urobili. Keď prehliadač zobrazuje HTML stránku, jede odhora nadol. Akonáhle narazí na tag <script>, chápe text v tomto tagu ako zdrojový kód pre jazyk JavaScript a rovno ho spustí. Po ukončení pokračuje ďalej s parsováním stránky. Toto môže viesť k problému, keď chceme zhora ovplyvniť JavaScriptom element, ktorý je až na konci stránky a prehliadač ho teda ešte nenačítalo. Preto sa JavaScript často vkladá do hlavičky a spúšťa sa až keď je celá stránka načítaná. Tým sa však budeme zaoberať neskôr. Máme tu teda prvý príkaz:

document.write("nejaký text");

Prezradím, že dokument je objekt, ktorý symbolizuje HTML dokument, teda našu webovú stránku. A write() je jeho metóda, ktorá zapíše na dané miesto v kóde HTML stránky vložený text. Čokoľvek na stránke cez JavaScript zmeníme, to sa okamžite prejaví. Tu sa teda zobrazí náš text "Ahoj ITnetwork!" Je zvykom písať za všetkými príkazy bodkočiarku - ;, Aj keď to v JavaScripte nie je nutné.

Teraz sa pozrieme ako sa pracuje s premennými.

Premenné

Slovo premenná by ste mali poznať zo školy, pre Neprogramátori je to miesto v pamäti, kam si môžeme ukladať dáta a potom s nimi pracovať. Každá premenná má svoj dátový typ, v JavaScripte môže obsahovať číslo, text, hodnotu boolean (pravda alebo nepravda, o tej až nabudúce) alebo objekt. Dátové typy premenným priraďuje sám JavaScript podľa toho, čo do nich zrovna ukladáme. Preto hovoríme, že je JavaScript dynamicky typizovanom jazyk (dynamicky mení typy premenných podľa ich obsahu).

Všetky ukazovatele v JavaScripte deklarujú pomocou slova let ! V minulosti sa na tieto účely používalo kľúčové slovo var, ktoré dnes slúžia už len k zachovaniu spätnej kompatibility. Určite na neho ešte v starších zdrojových kódoch narazíte. Keď nepoužijete žiadne kľúčové slovo, na rozdiel od iných jazykov vytvoríte tzv. Globálne premennú, čo nie je vždy úplne to, čo chcete. Tá je totiž potom prístupná zo všetkých skriptov a to môže vyvolať konflikty.

Vytvorme si niekoľko premenných:

let a;       // vytvorí premennú a, v ktorej zatiaľ nič nie je
let b = 40;  // vytvorí premennú bs hodnotou 40
c = 30;      // zriadi globálnu premennú sk hodnotou 30
s = "Text";  // zriadi globálnu premennú s, ktorá bude obsahovať textový reťazec

Kód vyššie obsahuje vytvorenie číselných premenných a vytvorenie premennej, ktorá obsahuje text (ten píšeme do úvodzoviek, aby prekladač vedel, že je to len text a nie názov nejaké ďalšie premenné alebo funkcie). Zároveň sme si ukázali, ako sa v kóde robia komentáre, teda poznámky pre programátorov, ktorých si interpret (váš prehliadač) nevšíma. Použijeme na to dve lomítka - //. Keby sme chceli komentár na viac riadkov, používa sa /* a */. S premennými samozrejme môžeme robiť najrôznejšie operácie. Začnime sčítaním. Môžeme sčítať čísla, ale dokonca aj textové reťazce (tie sa tým spoja v jeden text). Všetko sa robí pomocou operátora +.

Dokonca môžeme sčítať aj číslo a textový reťazec, interpret si číslo prevedie na reťazec a výsledkom bude súčet reťazcov.

let a = 10;
let b = 20;
let c = a + b;
document.write("Tu je súčet čísel aab: ");
document.write(c);
document.write("<br />"); // vložíme HTML tag pre nový riadok
let s1 = "10";
let s2 = "20";
let s3 = s1 + s2;
document.write("Tu je súčet reťazcov s1 a s2: ");
document.write(s3);

výsledok:

Premenné v JavaScripte

localhost

Z výstupu tohto programu by ste mali pochopiť rozdiel medzi číslom a reťazcom Môžeme samozrejme aj násobiť, odčítať a deliť, sú k tomu operátormi *, \, -, /. Všimnite si, že sme stále v HTML, ak chceme nový riadok, vložíme do stránky jednoducho HTML tag pre odriadkovanie.

Dátum a čas

Pozrime sa ešte ako sa pracuje s dátumom a časom. Výsledkom bude prvý skript do vašich stránok, ktorý bude mať nejaké praktické využitie. Všetko potrebné nájdeme v objekte Date, teda čas i 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:

let d = new Date(); // vytvorí premennú, v ktorej je aktuálny dátum

Pozn .: Klasická premenná nevie nič moc iné, než 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ňte si na objekt document a metódu write(). S dátumom je to niečo podobné.

Na objekte date budeme volať nasledujúce metódy:

getDate() - Vráti číslo dňa v mesiaci, 1 je prvého.
getMonth() - Vráti číslo mesiace v roku, január je 0, takže je nutné pripočítať 1.
getFullYear() - Vráti aktuálny rok ako 4 číslice.
getHours() - Vráti hodiny.
getMinutes() - Vráti minúty.
getSeconds() - Vráti sekundy.
getTime() - Táto metóda vracia počet milisekúnd od 1.1.1970. Tento formát sa v informatike často používa (tzv. UNIX TimeStamp).

Mená metód nie sú úplne šťastne zvolená, no, čo narobíme

Vypíšme si teda aktuálny dátum a čas:

let d = new Date(); // vytvorí premennú, v ktorej je aktuálny dátum
document.write("Dnes je: " + d.getDate() + ". " + (d.getMonth() + 1) + ". " + d.getFullYear());
document.write("<br />");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()));

výsledok:

Dátum a čas v JavaScripte

localhost

Dátum a čas sa berie samozrejme z počítača užívateľa (opäť opakujem, JavaScript beží u klienta), keď teda čas zmeníte, mal by sa zmeniť aj na stránke V budúcej lekcii, Základné dátové typy v JavaScripte a ich funkcie , sa pozrieme bližšie na základné dátové typy. Všetky 3 zdrojové skripty sú nižšie k stiahnutiu pre prípad, že ste niekde urobili chybu. Bude tomu tak vždy.

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1988x (2.28 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

20 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity