Advertisement
  1. Code
  2. JavaScript
Code

Co je JavaScript?

by
Difficulty:BeginnerLength:LongLanguages:

Czech (Čeština) translation by Jan Heřman (you can also view the original English article)

Prohlásit, že je JavaScript na poli vývoje webu na vzestupu by bylo zdrženlivé. Již před lety zformuloval známý programátor Jeff Atwood tzv. Atwoodův zákon, v němž říká:

Každá aplikace, která může být napsána v JavaScriptu, bude nakonec napsána v JavaScriptu.

V době psaní tohoto textu existovalo již tolik JavaScriptových frameworků a knihoven, že téměř nelze říci kde nejlépe začít. Obzvláště pokud patříte mezi začátečníky.

Vím, že hodně z toho, co na Envato publikujeme, je určeno pro lidi se zkušenostmi s vývojem webových aplikací nebo programováním obecně. Ale tito čtenáři nejsou cílovou skupinou tohoto článku.

Tento článek byl vytvořen speciálně pro ty z vás, kdo se nikdy s JavaScriptem nesetkali (nebo jen okrajově) a rádi by se ho naučili. Podíváme se také na to, jak je JavaScript používán a co od něj lze očekávat.

Stručně řečeno, jste-li zkušený profesionál, tento článek není pro vás. Pokud ale chcete proniknout do tajů JavaScriptu a nevíte, odkud nejlépe začít, mohou vás následující řádky vyslat tím správným směrem.

Pojďme na to.

Definice JavaScriptu

Nejspíše jste o JavaScriptu slyšeli jako o "skriptovacím jazyku na straně klienta". Což jinými slovy znamená, že se jedná o programovací jazyk běžící v internetovém prohlížeči.

Alternativní definici nabízí Wikipedia:

JavaScript je vysokoúrovňový, dynamický, beztypový a interpretovaný jazyk. Byl standardizován specifikací ECMAScript.

Vše výše uvedené je pravda (na různých úrovních složitosti pojetí), je však také potřeba podotknout, že JavaScript může běžet i na straně serveru. To už ale trochu předbíháme. Podívejme se raději nejdříve na některé z výše uvedených bodů, k JavaScriptu na straně serveru se vrátíme později.

  • Vysokoúrovňový jazyk Když hovoříme o vysokoúrovňovém programovacím jazyce, máme na mysli jazyk vytvořený bez potřeby znát detaily o chodu počítače jako takového. Nemusíte se starat o přidělení paměti, nemusíte znát typ procesoru ani se zabývat ukazateli (jako v jazycích C či Assembly).
  • Dynamický Dynamické jazyky umožňují vývojářům rozšířit jazyk o určité aspekty přidáním kódu nebo vytvořením objektu (např. objekt Post) za běhu programu. Ostatní jazyky vyžadují nejdříve kompilaci programu. Toto je mocná zbraň JavaScriptu.
  • Beztypový Pokud již máte zkušenost s programováním, pravděpodobně jste narazili na jazyky vyžadující deklarování typů proměnných, s nimiž v programu pracujete. V proměnné je např. uložen string nebo boolean. V JavaScriptu není deklarování typu proměnné nezbytné. Namísto toho jednoduše deklarujete proměnnou klíčovým slovem var.
  • Interpretovaný Pokud je jazyk kompilovaný, vámi napsaný kód je přeměněn ve spustitelný kód binární. Ten pak lze distribuovat dále. V systému Windows mohou jako příklad sloužit soubory s příponou EXE. V systému OS X jsou to často programy stažené z App Storu, nebo ty zkopírované do složky Applications. JavaScript je interpretovaný, není tedy potřeba žádný kompilátor. Místo toho je kód interpretovaný (stejně jako např. PHP), takže mezi vaším kódem a počítačem se nachází ještě kousek softwaru, jakýsi tlumočník. Ten překládá jednotlivé instrukce tam a zase zpět.  
  • Standardizovaný JavaScript je standardizovaný (jeho oficiální název je ECMAScript), což znamená, že všechny prohlížeče, které standard implementují, nabízí stejnou funkcionalitu. Kdyby nebylo standardu, pak by například Chrome mohl nabízet jiné funkce než Edge a podobně.

Nyní, když jsme probrali vlastnosti jazyka, můžeme se posunout k dalším aspektům.

Ačkoli vše výše uvedené je důležité, je také potřeba vědět, jak JavaScript funguje (zvlášť pokud jste již pracovali s jinými jazyky), aby jste se nepustili do vývoje s domněnkami o tom, jak by to mohlo fungovat nebo jak by to mělo fungovat.

Raději bych místo toho probral, jak to funguje. Tak, abyste se mohli pustit do psaní kódu a přitom rozuměli, co přesně děláte.

O JavaScriptu

JavaScript je objektově orientovaný programovací jazyk, poněkud se však liší od toho, s čím se obvykle setkáte (pokud již máte předchozí zkušenosti s objektově orientovanými jazyky).

JavaScript je to čemu se říká prototypový (či prototypální) jazyk. To znamená, že všechny objekty v JavaScriptu, jako například String, jsou založené na prototypech.

Nám vývojářům to umožňuje přidávat dodatečné funkce objektům, a to díky dědičnosti:

Programování založené na prototypech je druhem objektově orientovaného programování, v němž se využívá naklonování existujících objektů, které posléze slouží jako prototypy.

V případě, že jste nikdy předtím nepracovali s objektově orientovaným jazykem, máte v tuto chvíli nejspíše výhodu. Nemusíte se totiž přeorientovat na jiný systém myšlení, aby jste pochopili, jak tohle všechno funguje.

Pokud jste ale již pracovali s takovým druhem jazyka, pak je myslím dobré si ujasnit rozdíl mezi dědičností prototypovou a klasickou.

  • Při klasické dědičnosti vytvoří vývojář třídu. A z této jediné třídy může vzniknout řada objektů. Můžeme poté napsat další třídu, která bude dědit vlastnosti předchozí. A tak lze pokračovat dále. Podtřídy sdílí kód s původní, nadřazenou třídou. Takže když vytvoříte potomka podtřídy, dostane tento do vínku jak funkce podtřídy, tak rodičovské třídy.
  • Prototypová dědičnost nic jako třídy nezná. Místo toho jednoduše definujete objekt a přiřadíte mu všechny nezbytné funkce. Pokud chcete již existujícímu objektu nějakou funkci přidat, změníte prototyp objektu. Zkusíte-li zavolat na objektu např. metodu Number, program se jí nejprve pokusí najít na onom objektu. Pokud jí nenajde, bude se posunovat v řetězci výš až do okamžiku, kdy metodu nalezne (např. až na základním Object).

Možná ta nejdůležitější poznámka na závěr zní, že pokud změníte objekt skrze jeho prototyp, pak je tato změna přístupná každému, kdo daný objekt používá (tedy alespoň v kontextu vašeho prostředí).

Je to opravdu mocná vlastnost, vyžaduje nicméně určitý posun myšlení, pokud nejste v takovém prostředí zvyklí pracovat.

Jak používáme JavaScript?

Jak JavaScript používat záleží v první řadě na cílech, kterých chcete dosáhnout. Kdysi sloužil JavaScript jako prostředek k oživení webové stránky. Měl ovládat její chování.

Šlo například o přidání, nebo smazání (či skrytí) elementů. Poté web malinko pokročil a prohlížeče byly najednou schopné odesílat na server asynchronní požadavky, zpracovávat odpovědi a následně změnit stav stránky.

To lze dosáhnout díky Ajaxu. Pokud čtete tyto řádky, pravděpodobně jste již s tímto termínem obeznámeni. Pokud ne, můžete si Ajax představit jako způsob, kterým JavaScript odesílá na server požadavky a zpracovává odpovědi bez potřeby znovu načíst stránku.

Dokáže ale mnohem víc.

Google vyvinul sofistikovaný engine pro zpracování JavaScriptu známý jako V8. Ostatní prohlížeče se také snaží zajistit co nejoptimálnější výkon.

The landing page for Chrome V8 Googles JavaScript Engine

Ve skutečnosti jsme nyní schopní psát JavaScript i na serveru, a to pomocí nástrojů jako Node.js. Dokonce můžeme psát hybridní aplikace fungující také na mobilních zařízeních. To znamená, že jsme schopní vytvářet prostřednictvím JavaScriptu řešení pro naše telefony, tablety i stolní počítače.

The homepage for Nodejs a runtime engine for writing JavaScript on the server

A to všechno v jazyce, který kdysi sloužil jen k rozpohybování prvků na obrazovce. Přicházíte-li k JavaScriptu jako nováčci, nepodceňujte jej.

"Co bych měl od jazyka očekávat?"

Výše popsané je sice zajímavé, ale podíváme-li se ale na věc z čistě praktického hlediska, co můžeme od JavaScriptu očekávat?

Bez ohledu na to, zda s JavaScriptem začínáte, nebo si chcete stávající znalosti jazyků rozšířit o jeden nový, máte určitá očekávání co vám JavaScript může nabídnout.

A přestože jsme jazyk rozebrali zvnitřku, zatím jsme pořádně nemluvili o objektech, které jsou v JavaScriptu dostupné, tedy samotných programátorských rozhraních (API). Upřímně řečeno, probrat všechny API a vestavěné funkce by vydalo na samostatný článek.

Ale probrat jen vestavěné objekty? To můžeme ještě do konce článku zvládnout:

  • Object. Základní objekt od něhož všechny další objekty dědí některé funkce.
  • Function. JavaScript je objektově-orientovaný jazyk. To znamená, že obsahuje objekty a mezi ně se řadí i funkce. Takže když vytvoříme novou funkci, vytváříme tím odkaz na objekt typu Funkce. A funkce mají vlastnosti, které můžeme zkoumat za běhu programu (jako parametry, které funkci poskytneme).
  • Boolean. Tento objekt slouží jako škatulka pro hodnotu boolean. V mnoha jazycích je boolean datový typ, který nabývá hodnoty buď true, nebo false. V JavaScriptu lze s těmito hodnotami pracovat, ale jsou považovány za objekty.
  • Number. V řadě programovacích jazyků existují jednoduché datové typy jako float, int, double apod. V JavaScriptu je pouze typ Number, a je to rovněž objekt.
  • Date. Práce s datem není při programování žádná velká zábava, obzvláště pracujete-li s časovými zónami. Nelze říci, že JavaScript co se týká časových pásem řeší všechny problémy, ale umí učinit práci s daty o něco jednodušší (od roku a měsíce, přes dny, hodiny, minuty až k sekundám).
  • String. Téměř každý programovací jazyk má jednoduchý datový typ řetězec. JavaScript není výjimkou, jen s poznámkou, že (jak by se dalo čekat) řetězec je v JavaScriptu objekt s vlastnostmi.

Pamatujte si, že všechny výše uvedené typy jsou objekty s vlastnostmi (a funkcemi), které je možné spustit. To neznamená, že je k zavedení proměnných potřeba volat konstruktor. Můžeme vytvářet řetězce, boolean a čísla takto:

Ale ve své podstatě stále zůstávají objekty.

Jen pro přesnost, toto byly základní objekty. Existují daleko pokročilejší objekty, které stojí za to prozkoumat. Obzvláště tehdy, pracujete-li s odhalováním chyb, různými typy dat v polích apod.

Pokud by vás pokročilé objekty zajímaly více, velmi doporučuji tuto stránku na Mozilla Developer Network.

Jaké knihovny a frameworky jsou dostupné?

Pokud jste drželi krok s vývojem na poli nejrůznějších frameworků, knihoven a dalších nástrojů v universu JavaScriptu, pak máte nepochybně představu o tom, jak živá tato oblast je.

Tento článek ale cílí na ty, kdo s JavaScriptem začínají. Nyní, když jsme se seznámili se základy struktury a fungování JavaScriptu, je čas podívat se na knihovny a frameworky. Ty nám mohou usnadnit práci při vývoji webů / aplikací.

  • jQuery nabízí API kompatibilní napříč prohlížeči a umožňující tak říkajíc "méně psát, více udělat."
  • Angular je framework zaměřený na usnadnění tvorby jednoduchých jednostránkových aplikací.
  • React slouží ke stavbě uživatelských rozhraní.
  • Backbone dodává webovým aplikacím strukturu skrze modely, kolekce a pohledy.
  • Ember.js je další framework, uvádí se heslem "tvorba ambiciózních webových aplikací."
  • A mnohé další.

Ani zdaleka jsme zde nevyčerpali celý seznam toho, co je dostupné. Ale je to základ, s nímž by se měli všichni zájemci o JavaScript seznámit. I v případě, že knihovny a frameworky nebudou používat.

Jakmile se začnete učit JavaScript a vyberete si některé z uvedených nástrojů, zjistíte možná jak populární jsou dokonce i u vašich oblíbených aplikací.

Učení se JavaScriptu

Jak asi očekáváte, Envato má vše potřebné pro "učení dovedností pro miliony lidí na celém světě". Takže co by to bylo za příspěvek, kdyby neobsahoval pár odkazů na některé z nejoblíbenějších kurzů JavaScriptu?

Všechny tyto zdroje jsou perfektní pro začátečníky a pomohou vám rozšířit paletu programátorských dovedností.

Závěr

Když přijde řeč na vývoj pro web, nelze JavaScript opomenout. Nemusíte ani používat tzv. "čistý" JavaScript, vystačíte si třeba s jednou z řady knihoven a frameworků, v každém případě je však znalost JavaScriptu nedílnou součástí výbavy takřka každého programátora. 

Samozřejmě ne každý pracuje jako front-end programátor. Někteří se specializují čistě na serverovou část vývoje, někteří zase na část uživatelskou. Tak či tak, všichni dohromady musí dbát na to, aby spolu nejrůznější součásti aplikací spolupracovaly.

Z tohoto úhlu pohledu je důležité alespoň chápat princip odesílání dat od klienta na server, jak jsou data na serveru zpracována a posléze odeslána zpět do prohlížeče. 

Neodepisujte JavaScript jen kvůli tomu, že nejste front-end vývojář. V určitém momentu vývoje se může objevit člověk, který programuje v JavaScriptu a vy s ním budete muset dát hlavy dohromady nad vaší aplikací.

Připouštím, že tento článek pouze klouže po samém povrchu JavaScriptu. Jak bylo řečeno na začátku, smyslem textu bylo vysvětlit, co JavaScript je, jak se používá a co od něj očekávat. A to zejména pro ty, kteří s jazykem teprve začínají.

Pokud se vám článek líbil, podívejte se také na moje další kurzy a tutoriály a pokud máte zájem, můžete se podívat na další články především o WordPressu na mém blogu.

Další zdroje

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.