Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

Lekce 1 - Úvod do JavaScriptu

Vítám vás 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.

Kompletní kurzy programování v JavaScriptu

JavaScript

Když nám o JavaScriptu přednášeli na škole, použil náš profesor termín "Nepochopený programovací jazyk". Tento termín se mi zalíbil natolik, že si ho dovolím použít i zde. Většina lidí totiž vůbec neví, co to JavaScript je, nebo si to myslí špatně. Tento jazyk nachází své uplatnění na webu až v posledních letech a stává se stále více a více populární. Je nedílnou součástí moderních webů. Udělejme si rychlou odbočku do minulosti a řekněme si více o vzniku tohoto jazyka, jen tak pochopíme, za jakým účelem byl vytvořen a k čemu by měl sloužit.

JavaScript logo

Okolnosti vzniku jazyka

Vznik jazyka je úzce spojen se společností Sun, ve které v roce 1992 vzniká jazyk Java. Jeho cílem je tvořit přenosné programy mezi různými operačními systémy a dokonce i různými architekturami. Nový multiplatformní jazyk měl být také přívětivý syntaxí podobnou jazyku C (tzv. C-like syntaxe) a měl obsahovat věci, které C++ nemá (např. garbage collector).

V roce 1995 Bill Gates z Microsoftu prohlašuje slavnou větu: "Internet? Ten nás nezajímá". Microsoft měl Windows a myslel si, že nově vznikající médium, internet, není po obchodní stránce pro firmu zajímavé. Sun viděl na webu příležitost, ale současné prohlížeče dokázali zobrazovat jen statický HTML obsah. Nebylo možné na web vkládat žádné interaktivní prvky. Sun začíná protlačovat JavaApplety pro prohlížeče, které umožňují vkládat do stránek Java aplikace, běžící na straně klienta. Netscape jde na větší interaktivnost jinak, vytváří jazyk LiveScript, který je v podstatě spojením jazyků Java (odtud syntaxe), Scheme (funkcionální paradigma, více dále) a Self (prototypové programování). Java + Scheme + Self = LiveScript. Nový jazyk byl navržen a naprogramován již za neuvěřitelné 3 týdny! Zde se zrodilo první z úskalí tohoto jazyka, problémem totiž je, že je šitý trochu horkou jehlou. Sun chtěl, aby se jazyk jmenoval JavaScript. Název je čistě obchodní tah a měl symbolizovat jakousi jednodušší verzi Javy. V podstatě je to ale úplně nový jazyk, který přebírá jen část syntaxe Javy a její filozofii už vůbec ne. Zde je druhé úskalí, název je opravdu matoucí - JavaScript nebyl, není a nikdy nebude Java, má s ní jen pramálo společného .

V roce 1996 Microsoft otevírá oči a implementuje ve svém Internet Exploreru JavaScript pod názvem JScript. JavaScript se rozšiřuje a je v roce 1998 standardizován jako ECMAScript. Cesta ke standardizaci jazyka byla poněkud krkolomná, tvůrci si nakonec nechali jazyk standardizovat u evropské firmy, protože ani W3C ani ISO jim nechtěli standard schválit. Implementace jazyka v prohlížečích byla dlouhou dobu problém, protože si ji každý dělal po svém. Masivní rozšíření JavaScriptu se přisuzuje firmě Google, která ve svém Gmailu použila technologii AJAX, založenou na JavaScriptu. Technologie sice byla již nějakou dobu známa, ale Google byl první, kdo se odhodlal na ní postavit vážný projekt. Protože se jedná o poměrně komplikovanou věc, budeme se jí věnovat až na konci tohoto kurzu. Nyní prozradím, že technologie umožňuje načítat části webových stránek bez nutnosti obnovení okna. To jistě znáte z moderních webů, často v podobě načítacího kolečka, kde se vám vkládají na stránku nové informace aniž byste ji museli obnovit nebo přejít na jinou adresu v prohlížeči. Nebo například z Facebooku, který automaticky po nějaké době přidává do otevřeného okna nové příspěvky, aniž by došlo k nepříjemnému efektu obnovení stránky.

Využití JavaScriptu

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Důležité je si uvědomit, že JavaScript běží na straně klienta, všechny ty aplikace jsou tedy spouštěny v prohlížeči u uživatele. To je obrovský rozdíl oproti serverovým jazykům, jako je např. PHP. Pomocí JavaScriptu tedy můžeme měnit obsah webové stránky u uživatele, nabízí se tvorba dynamických menu, různých roletek a dalších kontejnerů, které umožňují ušetřit místo na stránce když jsou zavřené a po najetí myší se otevřou. To je jistě šikovné a přehledné. JavaScript je skvělý k formátování textu, pomocí něj si můžete do napsané zprávy vkládat smajlíky nebo dokonce formátovat text jako ve Wordu. Když je na webové stránce nějaký editor, je to na 90% JavaScript. Další využití nalezneme u ukazatelů času a data a dalších efektů na webových stránkách (např. padající sníh na vánoce).

Protože odeslání formuláře na server a čekání na následnou odpověď serveru je pomalé, používá se JavaScript také na validaci webových formulářů. Když například napíšete špatně email, webová stránka vás na to ještě před odesláním upozorní a není třeba stránku znovu načítat. Musíme si však uvědomit, že protože JavaScript běží na klientovi, může si ho uživatel vypnout nebo přepsat, proto nesmíme na takovouto validaci spoléhat a email musíme podruhé zkontrolovat i na serveru. Výhodou JavaScriptu je však pohodlnost a efektivnost bez zbytečných načítání stránky a prodlev. To samé platí u dříve zmíněných javascriptových menu, které by se i s vypnutým JavaScriptem měly zobrazit. Je jedno, že už to nebude tak hezké, protože JavaScript má 99% lidí zapnutý a některé prohlížeče ho dokonce ani neumožňují vypnout, problém je hlavně například u indexovacích robotů Googlu, který je potom nevidí, protože JavaScript nepoužívá. To by mohlo pak znamenat, že se přes menu nedostane na zbytek webu. Již zmíněné javascriptové frameworky a knihovny (například jQuery nebo Angular), poskytují tzv. widgety, předpřipravené miniaplikace například na ty menu, kde si jen nastavíte co v nich má být z zbytek za vás řeší framework a to i s případem, kdyby někdo JavaScript vypnul.

V poslední době se v JavaScriptu objevují i hry a již v podstatě vytlačil platformu Flash. Díky příchodu HTML5, které poskytuje hardwarově akcelerované plátno, a s podporou SVG si totiž můžeme přes JavaScript kreslit velmi rychlou vektorovou grafiku. Možná znáte hru AngryBirds pro prohlížeč Chrome, tak ty jsou v JavaScriptu :)

V JavaScriptu se začínají psát aplikace, jak je známe nyní z desktopů (např. Office). Taková javascriptová aplikace je totiž plně multiplatformní a funguje na kterémkoli zařízení, kde je internetový prohlížeč. Může se jednat o počítač, tablet, telefon nebo třeba i hodinky. Na operačním systému také vůbec nezáleží, aplikaci napíšete jednou a funguje všude, uživatel nemusí ani poznat, že funguje přes prohlížeč. To je přeci levné a výhodné. Takové aplikace se vytváří např. pomocí projektu PhoneGap. Budoucnost JavaScriptu je zkrátka velmi příznivá.

Struktura jazyka

Následující popis bude trochu odborný, pokud vás problematika zajímá, můžete si přečíst článek Objektově Orientované Programování, nebo se tím netrapte a následující odstavec klidně ignorujte, není to až tak důležité :)

JavaScript je jazyk interpretovaný, je tedy překládaný za běhu a vykonáván podle svého zdrojového kódu. Syntaxe je tedy C-like a jazyk je dynamicky typovaný, obsahuje pouze jeden numerický typ a to number, typ string pro text, boolean pro pravdivostní hodnotu a Object pro cokoliv jiného. Jazyk je objektově orientovaný, ale je zde velká zvláštnost v návrhu. Objekt je totiž to samé jako 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, tedy objekt je předlohou jiného objektu. Když jsem toto viděl, připadalo mi to naprosto dokonalé a líbí se mi to mnohem více, než standardní OOP založené na třídách, nicméně chápu, že je to něco nového a lidé se tomu brání, máme tu tedy další úskalí JavaScriptu - funkcionální paradigma. Jazyk se až teď začíná více využívat a jeho čas teprve nastává.

JavaScript je svým návrhem natolik zajímavý, že se začíná používat i na serverech, mluvíme potom o tzv. serverovém JavaScriptu, který konkuruje jazykům jako jsou PHP. Pro zájemce doporučuji nastudovat si něco o Node.JS.

Předchozí odstavce jsou založeny na přednášce Ing. Tomáše Holase z Unicorn College, která byla opravdu perfektní.

Webová stránka × webová aplikace

Snad každý z nás již někdy viděl jak webovou stránku, tak webovou aplikaci. Jaký je však mezi nimi rozdíl? Webová stránka nejčastěji slouží k informativnímu účelu a nejčastěji ani JavaScript nepoužívá. Podívali bychom se na ni (opomeneme-li serverovou část), tak samotný obsah stránky je statický. 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á. Jako příklad webové stránky je zde i samotný ITnetwork, většina obsahu je statická, jako webová aplikace je krásný příklad 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éž. Nicméně podívejme se na fórum na ITnetwork, to již statické není a lze jej tedy považovat za webovou aplikaci.

OpenSource?

JavaScript trpí jedním zásadním problémem. Tím že je zdrojový kód u klienta, každý jej může zobrazit, popřípadě si někam uložit a předělat. Tento model připomíná OpenSource, kdy každý si může zdarma stáhnout zdrojový kód a podle libosti upravovat a dále publikovat. Pokud se nám takový model nelíbí nebo se pro naši aplikaci nehodí, nemusíte vše zahazovat. Jednou z možností je kód tzv. obfuskovat, ale na to se podíváme, až nějaký kód mít budeme. Teď na úvod jsem vám chtěl jen sdělit, že to jde.

ECMAscript

JavaScript je obchodní název pro ECMAscript, pokud se tedy budeme učit JavaScript, učíme se vlastně ECMAscript. ECMAscript je standardem, dnes již jsou rozdíly mezi prohlížeči v jeho implementaci srovnané a většinou stačí napsat jeden kód pro všechny prohlížeče, historicky to byl vždy trochu zádrhel.

V příští lekci, Začínáme s JavaScriptem - První skripty, si popíšeme základy jazyka JavaScript a naprogramujeme první skripty.


 

Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
94 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (8)

 

 

Komentáře
Zobrazit starší komentáře (32)

Avatar
Jan Praks
Člen
Avatar
Jan Praks:18.7.2018 22:34

Pěkně napsané, jde to z toho pochopit, Dobrá práce!

 
Odpovědět
18.7.2018 22:34
Avatar
Jakub Stryja
Člen
Avatar
Jakub Stryja:6.10.2018 20:15

Super úvod. Už se těším na další lekce :D.

 
Odpovědět
6.10.2018 20:15
Avatar
Lukáš Marek:2.8.2019 9:40

Super...!!!! :-)

 
Odpovědět
2.8.2019 9:40
Avatar
Víťa Š.
Člen
Avatar
Víťa Š.:7.10.2019 23:31

Problém s češtinou při výstupu v NetBeans vyřešen :-)
zde návod https://www.webzen.cz/…0-a-windows/

Odpovědět
7.10.2019 23:31
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
Rateo
Člen
Avatar
Rateo:25.11.2019 20:41

Za mě zatím nejlepší stránky pro úvod do světa programování :)

 
Odpovědět
25.11.2019 20:41
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Zdenek Hauf
Člen
Avatar
Zdenek Hauf:22. dubna 12:56

Dobře napsané a vysvětlené.

 
Odpovědět
22. dubna 12:56
Avatar
Radim Lainka
Člen
Avatar
Radim Lainka:20. června 22:29

Kvalitně popsaný úvod do JavaScriptu. Super.

Odpovědět
20. června 22:29
"Amor vincit omnia"
Avatar
Gejza Rácz
Člen
Avatar
Gejza Rácz:21. června 17:03

Kvalitně napsané,dobře pochopitelné,pěkná práce.

 
Odpovědět
21. června 17:03
Avatar
David Králík
Brigádník
Avatar
David Králík:22. června 9:43

Ahoj, za mě v pohodě. Chci se naučit programovat a tady je to přehledně popsáno a vysvětleno :)

 
Odpovědět
22. června 9:43
Avatar
Tomáš Gassenheimer:26. července 11:55

Skvěle napsáno pánové! :)

 
Odpovědět
26. července 11:55
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 42. Zobrazit vše