1. diel - Úvod do JavaScriptu

Vitajte pri prvej lekcii populárneho on-line kurzu tvorby webových aplikácií v JavaScripte. V tomto úvodnom tutoriále si vysvetlíme, na čo je JavaScript dobrý, kde sa používa a aký je rozdiel medzi webovou stránkou a webovou aplikáciou. V nasledujúcich lekciách sa pozrieme na samotnú tvorbu webovej aplikácie v JavaScripte.

Počas kurzu sa okrem iného naučíme pomocou cyklov vypísať na stránku tabuľku malej násobilky a vytvoríme jednoduchú kalkulačku. Naučíme sa manipulovať s jednotlivými prvkami webovej stránky a predstavíme si tiež plátno, ktoré umožňuje kresliť na stránku obrázky alebo tvoriť pokročilejšie animácie:

Minimálne požiadavky

Pre úspešné absolvovanie kurzu potrebujete znalosť z nasledujúceho kurzu:

• Webové stránky krok za krokom

Výhodou sú ďalej znalosti z kurzov:

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

JavaScript

JavaScript sa vyvinul z jednoduchého skriptovacieho jazyka pre webové stránky na zásadnú technológiu v modernom webovom vývoji. Dnes je nevyhnutný na vytváranie interaktívnych webových aplikácií a jeho využitie sa rozšírilo aj do oblastí mimo webového prehliadača, vrátane serverov, mobilných a desktopových aplikácií. Jeho univerzálnosť a široká podpora robia z JavaScriptu jeden z najpoužívanejších programovacích jazykov na svete.

Okolnosti vzniku jazyka

Vývoj JavaScriptu bol pomerne divoký a môže pôsobiť rôzne zmätenia, preto si ho rýchlo prejdeme. JavaScript bol pôvodne vytvorený v roku 1995 ako prostriedok na pridávanie interaktivity do webových stránok. V tejto dobe sa o podobnú úlohu pokúšal aj jazyk Java, a preto bol trochu nešťastne z obchodných dôvodov nový jazyk pomenovaný podobne - JavaScript.

JavaScript vs. Java

JavaScript nebol, nie je a nikdy nebude Java. Má s ňou len pramálo spoločného. V podstate je to ale úplne nový jazyk, ktorý preberá časť syntaxe Javy, ale nie jej filozofiu.

Z jednoduchého skriptovacieho jazyka sa JavaScript postupne stal nezávislým jazykom s vlastnou špecifikáciou zvanou ECMAScript. Vďaka tejto štandardizácii a neustálym aktualizáciám sa JavaScript stal kľúčovým prvkom moderného webu. Jeho vývoj bol urýchlený vďaka technológiám ako AJAX a rozvoju knižníc a frameworkov, ako sú React, Angular a Vue, ktoré umožňujú vytvárať veľmi komplexné webové aplikácie. Príkladom sú známe sociálne siete ako Facebook a ďalšie. S popularitou JavaScriptu sa rozšíril aj na serverovú časť, kde využívame framework Node.js, čo umožňuje vytvoriť celú aplikáciu len v JavaScripte. Nie len jej užívateľské rozhranie.

Využitie JavaScriptu

JavaScript sa používa tak na strane klienta, ako aj na strane servera. Na klientskej strane sa stará hlavne o vykreslenie používateľského rozhrania, zatiaľ čo na serveri umožňuje beh komplexných aplikácií napojených na databázy. Pre lepšiu predstavu si uveďme niekoľko príkladov:

• Tvorba interaktívnych webových doplnkov ako sú rozbaľovacie menu, validácia formulárov, klikateľné hviezdičkové hodnotenie a ďalšie widgety. Tie poznáte z e-shopov ako sú Alza, Amazon, ITnetwork a ďalšie.
• Tvorba tzv. single-page aplikácií (SPA). SPA je webová stránka v JavaScripte, ktorá komunikuje s webovým API. Aplikácia sa načíta len raz a potom reaguje už bez prenačítania stránky, ako by jediná stránka obsahovala celú aplikáciu, od toho je odvodený aj názov. Ako SPA je dnes riešená väčšina moderných webových aplikácií, ako sú napr. Google Docs alebo Spotify.

• Tvorba webových API. Webové API je rozhranie, ktoré posiela dáta používateľom alebo od nich dáta prijíma. Jedná sa o druhú časť SPA aplikácie spomínanej vyššie. Tá beží s databázou na serveri a klient s ňou komunikuje pomocou svojho počítača či inteligentného zariadenia. Príkladom môžu byť servery známych služieb ako sú LinkedIn, Netflix, Uber a ďalšie.
• V neposlednom rade by sme nemali zabudnúť na projekt React Native pre tvorbu natívnych mobilných aplikácií pomocou JavaScriptu a Reactu.
• Ďalšie špeciálne využitie ako je renderovanie na strane servera, tvorba hier, internet vecí, AI, blockchain a tak ďalej.

Ako vidíme, možností je veľa

Štruktúra jazyka

Pokiaľ nemáte skúsenosť s iným programovacím jazykom, môžete nasledujúcu pasáž preskočiť.

JavaScript je interpretovaný jazyk, je teda prekladaný za behu a vykonávaný podľa svojho zdrojového kódu. Syntax je C-like a jazyk je dynamicky typovaný.

Jazyk je objektovo orientovaný, ale je tu veľká zvláštnosť v návrhu. Objekt je totiž to isté ako slovník, teda všeobecný kontajner. JavaScript využíva tzv. funkcionálnu paradigmu, ktorá umožňuje do bežnej premennej uložiť funkciu. Táto zdanlivo jednoduchá vlastnosť potom umožňuje odovzdávať funkcie v parametri inej funkcie (tzv. callback) alebo dokonca využiť funkciu ako konštruktor objektu. Objektovo orientované programovanie tu nadobúda úplne nové rozmery. Funguje tu prototypová dedičnosť, teda objekt je predlohou iného objektu.

Webová stránka vs. webová aplikácia

Snáď každý z nás už niekedy videl ako webovú stránku, tak aj webovú aplikáciu. Webová stránka predtým slúžila na informatívny účel a najčastejšie ani JavaScript nepoužívala. Zato webová aplikácia sa skôr podobá počítačovej aplikácii, len beží vo webovom prehliadači a využíva jeho výhody, najčastejšie je teda celá dynamická. Krásnym príkladom je webová kancelária v cloudových balíkoch ako je Microsoft Office 365 alebo Google Docs. Tieto kancelárske balíky sa podobajú klasickým desktopovým a vedia (pokiaľ to nerušia firemnú politiku) v podstate to isté.

JavaScript trpí jedným zásadným problémom. Tým, že je vo väčšine prípadov zdrojový kód u klienta, ho každý môže zobraziť, poprípade niekam uložiť a upraviť. Tento model pripomína OpenSource, kedy si každý môže zadarmo stiahnuť zdrojový kód a podľa ľubovôle upravovať a ďalej publikovať. Pokiaľ sa nám takýto model nepáči alebo sa pre našu aplikáciu nehodí, nemusíme všetko zahadzovať. Jednou z možností je kód tzv. obfuskovať, ale na to sa pozrieme, až nejaký kód budeme mať.

V budúcej lekcii, VS Code a prvý skript, si pripravíme editor Visual Studio Code a vytvoríme svoj prvý skript.