2. diel - VS Code a prvý skript

V minulej lekcii, Úvod do JavaScriptu , sme si urobili úvod do jazyka JavaScript.

V dnešnom JavaScript tutoriále si napíšeme a vyskúšame prvý skript. Nebudeme hovoriť, že píšeme program, pretože budeme písať skôr len také útržky kódu. Budeme si ich spúšťať vo svojom prehliadači, napríklad v Google Chrome alebo Firefox. Oba totiž obsahujú perfektné nástroje pre debuggovanie skriptov, ktoré sa neskôr tiež naučíme používať v kurze Debuggovanie v JS. Debuggovaním je myslené hľadanie chýb v našich skriptoch.

Príprava pre prácu s JavaScriptom

Než sa pustíme do vytvárania skriptov, pripravíme si potrebné nástroje a ukážeme si, ako písať špeciálne znaky, ktoré budeme potrebovať v našom kóde.

Inštalácia Visual Studio Code

Na písanie javascriptového kódu nebudeme používať editory typu Poznámkový blok, pretože im chýba mnoho funkcií. Medzi ne patrí najmä prehľadné zvýrazňovanie kódu alebo podpora kódovania slovenčiny a koncov riadkov. Stiahneme si teda múdrejší editor. Skvelým pomocníkom, ale aj nástrojom pre vývoj zložitejších projektov, je Visual Studio Code. Je zadarmo a funguje na všetkých platformách. Tento editor si teraz stiahneme a nainštalujeme. Jeho názov sa často skracuje ako VS Code.

Pokročilejší používatelia môžu použiť platený profesionálny editor ako napríklad WebStorm.

Inštalácia Dropboxu

Okrem editora potrebujeme nástroj, ktorý bude zálohovať a verzovať našu prácu. Nemôžeme sa spoľahnúť na to, že stránku jednoducho budeme ukladať, pretože sme ľudia a nie stroje. Ľudia robia chyby a keď prídeme o niekoľkodennú alebo dokonca niekoľkotýždňovú prácu, môže to zabolieť. Je dobré naučiť sa na toto myslieť hneď od začiatku. Veľmi odporúčame program Dropbox, ktorý je extrémne jednoduchý a sám súbory verzuje (teda zachováva zmeny v čase a je možné sa vrátiť k starším verziám projektu) a zároveň synchronizuje s webovým úložiskom. Aj keby sme si projekt omylom zmazali, prepísali, skolaboval nám pevný disk či nám ukradli notebook, dáta zostanú v bezpečí. Dropbox tiež umožňuje zdieľať jeden projekt medzi viacerými vývojármi. Viac o Dropboxe si môžeme prečítať v článku Dropbox-Sen všetkých ajťákov. Článok obsahuje zároveň pozvánku do Dropboxu s 0,5 GB priestoru navyše

Ako ďalší verziovací nástroj sa hojne používa GIT, jeho nastavenie ale vydá na samostatný kurz a Dropbox zatiaľ na naše účely bohato postačuje.

Prvá aplikácia

Začneme tým, že si vytvoríme pracovný priečinok prvni_skripty/ a potom v tomto priečinku v editore VS Code vytvoríme novú HTML stránku s názvom prvni_aplikace.html. Ako na to už vieme z lekcie Úvod do HTML. Obsahom stránky bude nasledujúci kód:

<!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>

Príkazy v JavaScripte väčšinou končia bodkočiarkou ;. Kláves pre bodkočiarku nájdeme na českej klávesnici pod klávesou Esc:

Úvodzovky - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Keď si stránku teraz spustíme v prehliadači, zobrazí text Ahoj ITnetwork!:

Prvá webová aplikácia v JavaScripte

localhost

Je to obdoba aplikácie Hello World, ktorá sa používa pri výučbe programovania v prvých aplikáciách. Vysvetlime si, čo sme to vlastne urobili. Keď prehliadač zobrazuje HTML stránku, ide zhora 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 parsovaní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čítal. Preto sa JavaScript často vkladá do hlavičky alebo ako posledný prvok <body> a spúšťa sa, až keď je celá stránka načítaná. Tým sa však budeme zaoberať neskôr.

Parsovanie znamená proces získavania štruktúrovaných dát z kódu webovej stránky, čo umožňuje automatizované spracovanie informácií. Parsovanie spočíva v tom, že program prechádza tento kód, identifikuje, ktoré časti sú text, obrázky, odkazy a tak ďalej. Jednotlivé časti premieňa do formy, ktorú počítač ľahšie spracuje alebo zobrazí.

Základná štruktúra príkazu

V našom kóde vidíme v tagu <script> prvý príkaz, ktorý slúži na zápis obsahu do dokumentu. Poďme si ho rozobrať:

document.write("nejaký text");

Časť document v tomto príkaze 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 v prehliadači zobrazí náš text Ahoj ITnetwork!.

Za všetkými príkazmi píšeme bodkočiarku (;). JavaScript ho síce umožňuje vynechať, ale v niektorých prípadoch to vedie k neočakávaným výsledkom alebo chybám.

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é 2001x (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:

21 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