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, jede 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 dále s parsováním stránky.

Toto může vést k problému, chceme-li shora ovlivnit JavaScriptem element, který je až na konci stránky, a prohlížeč ho tedy ještě nenačetl. Proto se JavaScript často vkládá do hlavičky nebo jako poslední prvek <body> a spouští se, až když je celá stránka načtená. Tím se však budeme zabývat později.

Parsování znamená proces získávání strukturovaných dat z kódu webové stránky, což umožňuje automatizované zpracování informací. Parsování spočívá v tom, že program prochází tento kód, identifikuje, které části jsou text, obrázky, odkazy a tak dále. Jednotlivé části přeměňuje do formy, kterou počítač snáze zpracuje nebo zobrazí.

Základní struktura příkazu

V našem kódu vidíme v tagu <script> 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 2092x (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í:

1672 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é