Lekce 2 - VS Code a první skript

V minulé lekci, Úvod do JavaScriptu, jsme probrali úvod do jazyka JavaScript.

V dnešním JavaScript tutoriálu si napíšeme a vyzkoušíme první skript. Nebudeme tvrdit, že píšeme program, protože budeme psát spíše jen takové útržky kódu. Ty si budeme spouštět ve svém prohlížeči, například v Google Chrome nebo Firefoxu. Oba prohlížeče totiž obsahují perfektní nástroje pro debuggování skriptů, které se později také naučíme používat v kurzu Debuggování v JS. Debuggováním je myšleno hledání chyb v našich skriptech.

Příprava pro práci s JavaScriptem

Než se pustíme do vytváření skriptů, připravíme si potřebné nástroje a ukážeme si, jak psát speciální znaky, které budeme potřebovat v našem kódu.

Instalace Visual Studio Code

K psaní javascriptového kódu nebudeme používat editory typu Poznámkový blok, jelikož jim chybí mnoho funkcí. Mezi ně patří zejména přehledné zvýrazňování kódu nebo podpora kódování češtiny a konců řádek. Stáhneme si tedy chytřejší editor. Skvělým pomocníkem, ale také nástrojem pro vývoj složitějších projektů je Visual Studio Code. Je zdarma a funguje na všech platformách. Tento editor si nyní stáhneme a nainstalujeme. Jeho název se často zkracuje jako VS Code.

Pokročilejší uživatelé mohou použít placený profesionální editor, jako například WebStorm.

Instalace Dropboxu

Kromě editoru potřebujeme nástroj, který bude zálohovat a verzovat naši práci. Nemůžeme se spolehnout na to, že stránku prostě budeme ukládat, protože jsme lidé, a ne stroje. Lidé dělají chyby, a když přijdeme o několikadenní, nebo dokonce několikatýdenní práci, může to zabolet. Je dobré naučit se na toto myslet hned od začátku. Velmi doporučujeme program Dropbox, který je extrémně jednoduchý a sám soubory verzuje (tedy zachovává změny v čase a je možné se vrátit ke starším verzím projektu) a zároveň synchronizuje s webovým úložištěm. I kdybychom si projekt omylem smazali, přepsali, zkolaboval nám pevný disk či nám ukradli notebook, data zůstanou v bezpečí. Dropbox také umožňuje sdílet jeden projekt mezi více vývojáři. Více o Dropboxu si můžeme přečíst v článku Dropbox - Sen všech ajťáků. Článek obsahuje zároveň pozvánku do Dropboxu s 0,5 GB prostoru navíc.

Jako další verzovací nástroj se hojně používá Git, jeho nastavení ale vydá na samostatný kurz a Dropbox zatím pro naše účely bohatě postačuje.

V následujícím kódu budeme potřebovat znaky _, <, >, " a ;. Pojďme si ukázat, kde je na české klávesnici najdeme.

Podtržítko

Podtržítko _ napíšeme pomocí Shift a následující klávesy:

Větší a menší

Větší a menší < > napíšeme pomocí Pravého ALT a následujících kláves:

Uvozovky

Uvozovky " napíšeme pomocí Shift a klávesy ů:

Středník

Středník ; najdeme nad klávesou Tab:

Uvozovky - Základní konstrukce jazyka JavaScript

První aplikace

Začneme tím, že si vytvoříme pracovní složku prvni_skripty/ a poté v této složce v editoru VS Code vytvoříme novou HTML stránku s názvem prvni_aplikace.html. Postup již známe z lekce Úvod do HTML. Obsahem stránky bude následující kód:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>První webová aplikace v JavaScriptu</title>
    </head>

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

Když si stránku nyní spustíme v prohlížeči, zobrazí text Ahoj ITnetwork!:

První webová aplikace v JavaScriptu

localhost

Je to obdoba aplikace Hello World, která se používá při výuce programování v prvních aplikacích. Vysvětleme si, co jsme to vlastně udělali. Když prohlížeč zobrazuje HTML stránku, načítá kód odshora dolů. Jakmile narazí na tag <script>, chápe text v tomto tagu jako zdrojový kód pro jazyk JavaScript a rovnou jej spustí. Po ukončení pokračuje prohlížeč dále s vykreslováním zbytku stránky.

JavaScript se nejčastěji vkládá právě jako poslední prvek před koncem </body>. Tím se spustí, až je celá stránka načtená. Můžeme z něj tak pracovat se všemi elementy na stránce, které by v ní jinak ještě nemusely být načteny, kdyby byl <script> někde uprostřed.

Alternativně můžeme <script> vložit i do hlavičky <head>. Poté si ale v kódu musíme sami zajistit, aby se zavolal až po načtení celé stránky.

Rozbor prvního kódu

Náš JS kód je tedy v tagu <script>. Dříve se muselo parametrem určit, o jaký jazyk se jedná: <script type="text/javascript">. Dnes parametr již můžeme vynechat, jelikož JavaScript je výchozím jazykem pro HTML stránky. Uvnitř tagu jsme napsali náš první příkaz, který slouží k zápisu obsahu do dokumentu. Pojďme si ho rozebrat:

document.write("nějaký text");

Část document v tomto příkazu je objekt, který symbolizuje HTML dokument, tedy naši webovou stránku. A write() je jeho metoda, která zapíše na dané místo v kódu HTML stránky vložený text. Cokoli, co na stránce přes JavaScript změníme, se okamžitě projeví. Zde se tedy v prohlížeči zobrazí náš text Ahoj ITnetwork!.

Za všemi příkazy píšeme středník (;). JavaScript ho sice umožňuje vynechat, ale v některých případech to vede k neočekávaným výsledkům či chybám.

V příští lekci, Proměnné v JavaScriptu, se naučíme deklarovat proměnné a provádět s nimi základní operace.

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2192x (2.28 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

2007 hlasů

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

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné