1. diel - Úvod do JavaScriptu

Vítam Vás pri prvej lekcie 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 najbližších lekciách sa pozrieme na samotnú tvorbu webovej aplikácie v JavaScripte.

Javascript

Keď nám o JavaScripte prednášali na škole, použil náš profesor termín "Nepochopený programovací jazyk". Tento termín sa mi zapáčil natoľko, že si ho dovolím použiť aj tu. Väčšina ľudí totiž vôbec nevie, čo to JavaScript je, alebo si to myslí zle. Tento jazyk nachádza svoje uplatnenie na webe až v posledných rokoch a stáva sa stále viac a viac populárne. Je neoddeliteľnou súčasťou moderných webov. Urobme si rýchlu odbočku do minulosti a povedzme si viac o vzniku tohto jazyka, len tak pochopíme, za akým účelom bol vytvorený a na čo by mal slúžiť.

Okolnosti vzniku jazyka

Vznik jazyka je úzko spojený so spoločnosťou Sun, v ktorej v roku 1992 vzniká jazyk Java. Jeho cieľom je tvoriť prenosné programy medzi rôznymi operačnými systémami a dokonca aj rôznymi architektúrami. Nový multiplatformový jazyk mal byť tiež prívetivý syntaxou podobnou jazyku C (tzv. C-like syntaxe) a mal obsahovať veci, ktoré C ++ nemá (napr. Garbage collector).

V roku 1995 Bill Gates z Microsoftu prehlasuje slávnu vetu: "Internet? Ten nás nezaujíma". Microsoft mal Windows a myslel si, že novo vznikajúce médium, internet, nie je po obchodnej stránke pre firmu zaujímavé. Sun videl na webe príležitosť, ale súčasné prehliadače dokázali zobrazovať len statický HTML obsah. Nebolo možné na web vkladať žiadne interaktívne prvky. Sun začína pretláčať JavaApplety pre prehliadače, ktoré umožňujú vkladať do stránok Java aplikácie, bežiace na strane klienta. Netscape ide na väčšiu interaktívnosť inak, vytvára jazyk LiveScript, ktorý je v podstate spojením jazykov Java (odtiaľ syntaxe), Scheme (funkcionálne paradigma, viac ďalej) a Self (prototypové programovanie). Java + Scheme + Self = LiveScript. Nový jazyk bol navrhnutý a naprogramovaný už za neuveriteľné 3 týždne! Tu sa zrodilo prvé z úskalia tohto jazyka, problémom totiž je, že je šitý trochu horúcou ihlou. Sun chcel, aby sa jazyk volal JavaScript. Názov je čisto obchodný ťah a mal symbolizovať akúsi jednoduchšiu verziu Javy. V podstate je to ale úplne nový jazyk, ktorý preberá iba časť syntaxe Javy a jej filozofiu už vôbec nie. Tu je druhé úskalia, názov je naozaj mätúce - JavaScript nebol, nie je a nikdy nebude Java, má s ňou len pramálo spoločného.

V roku 1996 Microsoft otvára oči a implementuje vo svojom Internet Exploreru JavaScript pod názvom JScript. JavaScript sa rozširuje a je v roku 1998 štandardizovaný ako ECMAScript. Cesta k štandardizácii jazyka bola trochu krkolomné, tvorcovia si nakoniec nechali jazyk štandardizovať u európskej firmy, pretože ani W3C ani ISO im nechceli štandard schváliť. Implementácia jazyka v prehliadačoch bola dlhú dobu problém, pretože si ju každý robil po svojom. Masívne rozšírenie JavaScriptu sa prisudzuje firme Google, ktorá vo svojom Gmailu použila technológiu AJAX, založenú na JavaScriptu. Technológia síce bola už nejakú dobu známa, ale Google bol prvý, kto sa odhodlal na nej postaviť vážny projekt. Pretože sa jedná o pomerne komplikovanú vec, budeme sa jej venovať až na konci tohto kurzu. Teraz prezradím, že technológia umožňuje načítať časti webových stránok bez nutnosti obnovenia okna. To iste poznáte z moderných webov, často v podobe nahrávací kolieska, kde sa vám vkladajú na stránku nové informácie bez toho aby ste ju museli obnoviť alebo prejsť na inú adresu v prehliadači. Alebo napríklad z Facebooku, ktorý automaticky po nejakej dobe pridáva do otvoreného okna nové príspevky, bez toho aby došlo k nepríjemnému efektu obnovenie stránky.

Využitie JavaScriptu

Dôležité je si uvedomiť, že JavaScript beží na strane klienta, všetky tie aplikácie sú teda spúšťané v prehliadači u používateľa. To je obrovský rozdiel oproti serverovým jazykom, ako je napr. PHP. Pomocou JavaScriptu teda môžeme meniť obsah webovej stránky u užívateľov, ponúka sa tvorba dynamických menu, rôznych roletiek a ďalších kontajnerov, ktoré umožňujú ušetriť miesto na stránke keď sú zatvorené a po ukázaní myšou sa otvoria. To je určite šikovné a prehľadné. JavaScript je skvelý na formátovanie textu, pomocou neho si môžete do napísanej správy vkladať smajlíky alebo dokonca formátovať text ako vo Worde. Keď je na webovej stránke nejaký editor, je to na 90% JavaScript. Ďalšie využitie nájdeme u ukazovateľov času a dátumu a ďalších efektov na webových stránkach (napr. Padajúci sneh na vianoce).

Pretože odoslaní formulára na server a čakanie na následnú odpoveď servera je pomalé, používa sa JavaScript tiež na validáciu webových formulárov. Keď napríklad napíšete zle email, webová stránka vás na to ešte pred odoslaním upozorní a nie je potrebné stránku znova načítať. Musíme si však uvedomiť, že pretože JavaScript beží na klientovi, môže si ho používateľ vypnúť alebo prepísať, preto nesmieme na takúto validáciu spoliehať a email musíme druhýkrát skontrolovať aj na serveri. Výhodou JavaScriptu je však pohodlnosť a efektívnosť bez zbytočných načítania stránky a prieťahov. To isté platí u predtým spomenutých javascriptových menu, ktoré by sa aj s vypnutým JavaScriptom mali zobraziť. Je jedno, že to už nebude tak pekné, pretože JavaScript má 99% ľudí zapnutý a niektoré prehliadače ho dokonca ani neumožňujú vypnúť, problém je hlavne napríklad u indexovacích robotov Googlu, ktorý je potom nevidí, pretože JavaScript nepoužíva. To by mohlo potom znamenať, že sa cez menu nedostane na zvyšok webe. Už spomínané javascriptové frameworky a knižnice (napríklad jQuery alebo Angular), poskytujú tzv. Widgety, predpripravené miniaplikácie napríklad na tie menu, kde si len nastavíte čo v nich má byť z zvyšok za vás rieši framework a to aj s prípadom, keby niekto JavaScript vypol.

V poslednej dobe sa v JavaScripte objavujú aj hry a už v podstate vytlačil platformu Flash. Vďaka príchode HTML5, ktoré poskytuje hardvérovo akcelerované plátno, as podporou SVG si totiž môžeme cez JavaScript kresliť veľmi rýchlu vektorovú grafiku. Možno poznáte hru angrybirds pre prehliadač Chrome, tak tie sú v JavaScripte

V JavaScriptu sa začínajú písať aplikácie, ako ich poznáme teraz z desktopov (napr. Office). Taká JavaScriptová aplikácie je totiž plne multiplatformový a funguje na ktoromkoľvek zariadení, kde je internetový prehliadač. Môže sa jednať o počítač, tablet, telefón alebo napríklad aj hodinky. Na operačnom systéme tiež vôbec nezáleží, aplikáciu napíšete raz a funguje všade, používateľ nemusí ani poznať, že funguje cez prehliadač. To je predsa lacné a výhodné. Takéto aplikácie sa vytvára napr. Pomocou projektu PhoneGap. Budúcnosť JavaScriptu je skrátka veľmi priaznivá.

Štruktúra jazyka

Nasledujúci popis bude trochu odborný, ak vás problematika zaujíma, môžete si prečítať článok Objektovo Orientované Programovanie, alebo sa tým netrápte a nasledujúci odsek pokojne ignorujte, nie je to až tak dôležité

JavaScript je jazyk interpretovaný, je teda prekladaný za behu a vykonávaný podľa svojho zdrojového kódu. Syntax je teda C-like a jazyk je dynamicky typizovanom, obsahuje iba jeden numerický typ a to number, typ string pre text, boolean pre pravdivostnú hodnotu a Object pre čokoľvek iného. 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álne paradigma, ktoré umožňuje do bežnej premennej uložiť funkciu. Táto zdanlivo jednoduchá vlastnosť potom umožňuje odovzdávať funkcie v parametri iné funkcie (tzv. Callback) alebo dokonca využiť funkciu ako konštruktor objektu. Objektovo orientované programovanie tu nadobúda úplne nových rozmerov, funguje tu prototypová dedičnosť, teda objekt je predlohou iného objektu. Keď som toto videl, pripadalo mi to úplne dokonalé a páči sa mi to oveľa viac, než štandardné OOP založené na triedach, však chápem, že je to niečo nové a ľudia sa tomu bráni, máme tu teda ďalší úskalia JavaScriptu - funkcionálne paradigma. Jazyk sa až teraz začína viac využívať a jeho čas ešte len nastáva.

JavaScript je svojím návrhom natoľko zaujímavý, že sa začína používať aj na serveroch, hovoríme potom o tzv. Serverovom JavaScriptu, ktorý konkuruje jazykom ako sú PHP. Pre záujemcov odporúčam naštudovať si niečo o Node.JS.

Predchádzajúce odseky sú založené na prednáške Ing. Tomáša Holasa z Unicorn College, ktorá bola naozaj perfektná.

Webová stránka × webová aplikácia

Snáď každý z nás už niekedy videl ako webovú stránku, tak webovú aplikáciu. Aký je však medzi nimi rozdiel? Webová stránka najčastejšie slúžia na informatívnemu účelu a najčastejšie ani JavaScript nepoužíva. Pozreli by sme sa na ňu (opomenieme ak serverovú časť), tak samotný obsah stránky je statický. 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á. Ako príklad webovej stránky je tu aj samotný ITnetwork, väčšina obsahu je statická, ako webová aplikácia je krásny príklad 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 vie (ak to neruší firemnú politiku) v podstate to isté. Avšak pozrime sa na fórum na ITnetwork, to už statické nie je a možno ho teda považovať za webovú aplikáciu.

OpenSource?

JavaScript trpí jedným zásadným problémom. Tým že je zdrojový kód u klienta, každý ho môže zobraziť, poprípade si niekam uložiť a prerobiť. Tento model pripomína OpenSource, keď každý si môže bezplatne stiahnuť zdrojový kód a podľa ľubovôle upravovať a ďalej publikovať. Ak sa nám taký model nepáči alebo sa pre našu aplikáciu nehodí, nemusíte všetko zahadzovať. Jednou z možností je kód tzv. Obfuskovat, ale na to sa pozrieme, až nejaký kód mať budeme. Teraz na úvod som vám chcel len povedať, že to ide.

ECMAScript

JavaScript je obchodný názov pre ECMAScript, ak sa teda budeme učiť JavaScript, učíme sa vlastne ECMAScript. ECMAScript je štandardom, dnes už sú rozdiely medzi prehliadačmi v jeho implementácii zrovnané a väčšinou stačí napísať jeden kód pre všetky prehliadače, historicky to bol vždy trochu zádrhel.

V budúcej lekcii, Začíname s JavaScriptom - Prvý skripty , si popíšeme základy jazyka JavaScript a naprogramujeme prvý skripty.