Lekce 1 - Úvod do JavaScriptu

Vítejte u první lekce populárního on-line kurzu tvorby webových aplikací v JavaScriptu. V tomto úvodním tutoriálu si vysvětlíme, k čemu je JavaScript dobrý, kde se používá a jaký je rozdíl mezi webovou stránkou a webovou aplikací. V příštích lekcích se podíváme na samotnou tvorbu webové aplikace v JavaScriptu.

Během kurzu se mimo jiné naučíme pomocí cyklů vypsat na stránku tabulku malé násobilky a vytvoříme jednoduchou kalkulačku. Naučíme se manipulovat s jednotlivými prvky webové stránky a představíme si také plátno, které umožňuje kreslit na stránku obrázky nebo tvořit pokročilejší animace:

Minimální požadavky

Pro úspěšné absolvování kurzu potřebujete znalosti z následujícího kurzu:

• Webové stránky krok za krokem.

Výhodou jsou dále znalosti z kurzů:

• HTML5 od A do Z,
• Základy CSS3.

JavaScript

JavaScript se vyvinul z prostého skriptovacího jazyka pro webové stránky v zásadní technologii v moderním webovém vývoji. Dnes je nezbytný pro vytváření interaktivních webových aplikací a jeho využití se rozšířilo i do oblastí mimo webové prohlížeče, včetně serverů, mobilních a desktopových aplikací. Jeho univerzálnost a široká podpora činí z JavaScriptu jeden z nejpoužívanějších programovacích jazyků na světě.

Okolnosti vzniku jazyka

Vývoj JavaScriptu byl poměrně divoký a může působit různá zmatení, proto si jej rychle projděme. JavaScript byl původně vytvořený v roce 1995 jako prostředek pro přidávání interaktivity do webových stránek. V této době se o podobnou úlohu pokoušel i jazyk Java, a proto byl nový jazyk poněkud nešťastně z obchodních důvodů pojmenován podobně – JavaScript.

JavaScript vs. Java

JavaScript nebyl, není a nikdy nebude Java. Má s ní jen pramálo společného. V podstatě je to úplně nový jazyk, který sice přebírá část syntaxe Javy, ale nikoli její filozofii.

Z jednoduchého skriptovacího jazyka se JavaScript postupně stal nezávislým jazykem s vlastní specifikací zvanou ECMAScript. Díky této standardizaci a neustálým aktualizacím se JavaScript stal klíčovým prvkem moderního webu. Jeho vývoj byl urychlen díky technologiím jako AJAX a rozvoji knihoven a frameworků, jako jsou React, Angular a Vue, které umožňují vytvářet velmi komplexní webové aplikace. Příkladem jsou známé sociální sítě jako Facebook a další. S rostoucí popularitou se JavaScript rozšířil i na serverovou část, kde využíváme framework Node.js, což umožňuje vytvořit celou aplikaci jen v JavaScriptu. Nikoli jen její uživatelské rozhraní.

Využití JavaScriptu

JavaScript se používá jak na straně klienta, tak na straně serveru. Na klientské straně se JavaScript stará hlavně o vykreslení uživatelského rozhraní, zatímco na straně serveru umožňuje běh komplexních aplikací napojených na databáze. Pro lepší představu si uveďme několik příkladů:

• Tvorba interaktivních webových doplňků, jako jsou rozbalovací menu, validace formulářů, klikatelné hvězdičkové hodnocení a další widgety. Ty znáte z e-shopů, jako jsou Alza, Amazon, ITnetwork a další.
• Tvorba tzv. single-page aplikací (SPA). SPA je webová stránka v JavaScriptu, která komunikuje s webovým API. Aplikace se načte jen jednou a poté reaguje již bez přenačítání stránky, jako by jediná stránka obsahovala celou aplikaci, od čehož je odvozen i název. Jako SPA je dnes řešena většina moderních webových aplikací, jako jsou např. Google Docs nebo Spotify.

• Tvorba webových API. Webové API je rozhraní, které posílá data uživatelům či od nich data přijímá. Jedná se o druhou část SPA aplikace zmíněné výše. Ta běží s databází na serveru a klient s ní komunikuje pomocí svého počítače či chytrého zařízení. Příkladem mohou být servery známých služeb, jako jsou LinkedIn, Netflix, Uber a další.
• V neposlední řadě bychom neměli opomenout projekt React Native pro tvorbu nativních mobilních aplikací pomocí JavaScriptu a Reactu.
• Další speciální využití, jako je renderování na straně serveru, tvorba her, internet věcí, AI, blockchain a tak dále.

Jak vidíme, možností je spousta

Struktura jazyka

Nemáte-li zkušenost s jiným programovacím jazykem, můžete následující pasáž přeskočit.

JavaScript je interpretovaný jazyk, je tedy překládaný za běhu a vykonávaný podle svého zdrojového kódu. Syntaxe je C-like a jazyk je dynamicky typovaný.

Jazyk je objektově orientovaný, ale je zde velká zvláštnost v návrhu. Objekt je totiž totéž co slovník, tedy obecný kontejner. JavaScript využívá tzv. funkcionální paradigma, které umožňuje do běžné proměnné uložit funkci. Tato zdánlivě jednoduchá vlastnost potom umožňuje předávat funkce v parametru jiné funkce (tzv. callback), nebo dokonce využít funkci jako konstruktor objektu. Objektově orientované programování zde nabývá úplně nových rozměrů. Funguje zde prototypová dědičnost, objekt je tedy předlohou jiného objektu.

Webová stránka vs. webová aplikace

Snad každý z nás již někdy viděl jak webovou stránku, tak webovou aplikaci. Webová stránka dříve sloužila k informativnímu účelu a nejčastěji ani JavaScript nepoužívala. Zato webová aplikace se spíše podobá počítačové aplikaci, jen běží ve webovém prohlížeči a využívá jeho výhod. Nejčastěji je tudíž celá dynamická. Krásným příkladem je webová kancelář v cloudových balících, jako je Microsoft Office 365 nebo Google Docs. Tyto kancelářské balíky se podobají klasickým desktopovým a umí (pokud to neruší firemní politiku) v podstatě totéž.

JavaScript trpí jedním zásadním problémem. Tím, že je zdrojový kód ve většině případů u klienta, jej každý může zobrazit, popřípadě někam uložit a upravit. Tento model připomíná open-source, kdy si každý může zdarma stáhnout zdrojový kód a podle libosti jej upravovat a dále publikovat. Pokud se nám takový model nelíbí nebo se pro naši aplikaci nehodí, nemusíme vše zahazovat. Jednou z možností je kód tzv. obfuskovat, ale na to se podíváme, až nějaký kód budeme mít.

V příští lekci, VS Code a první skript, si připravíme editor Visual Studio Code a vytvoříme svůj první skript.