Tento překlad není kompletní. Prosím pomozte přeložit tento článek z angličtiny.

Vítejte na MDN začátečnickém kurzu JavaScriptu! V tomto článku se na JavaScript podíváme z hlediska definice. Zodpovíme, co je JavaScript, co dělá a jaký je jeho účel. 

Prerekvizity: Základy práce s PC, základní znalosti HTML a CSS.
Cíl: Blíže se seznámit, co je JavaScript, co umí a jak zapadá do tvorby webových stránek.

Definice

JavaScript je programovací jazyk, který umožňuje implementaci komplexních částí do webových stránek. Pokaždé, když webová stránka dělá něco navíc, než jen klasické zobrazení statického obsahu, je za to zodpovědný JavaScript. Jedná se třeba o tyto případy:  na stránce přibyde obsah bez zmáčknutí tlačítka ,,Aktualizovat", na stránce se zobrazuje interaktivní mapa, nebo animovaný 2D/3D grafický obsah, v reálném čase se kontrolují data ve formulářích, a tak dále. Je to vlastně taková pomyslná třetí vrstva ve standardních webových technologiích. Další jsou HTMLCSS, které jsou obsáhlé v sekci učení.

  • HTML je značkovací jazyk, který se používá k strukturalizaci a definování obsahu webu. Například ke značení paragrafů, nadpisů, tabulek, nebo ke vkládání obrázků, videí.
  • CSS je jazyk k defininování stylů, což si lze představit jako soupis pravidel, jak se má obsah webové stránky zobrazovat. CSS se uplatní například při nastavování barvy pozadí, definování fontů, rozložení obsahu do několika sloupců, atd.  
  • JavaScript je pragramovací jazyk, který umožňuje vytvářet dynamicky aktualizovaný obsah, ovládání multimédií, animování obrázků, vlastně téměř vše. (Dobře, určitě ne vše, ale na to, co JavaScript dokáže díky pár řádkům kódu, z něj dělá jeden z nejpopulárnějších jazyků.)

To by bylo ke struktuře webových technologií. Pojďme se podívat na jednoduchý příklad. Začněme HTML značkou pro paragraf:

<p>Player 1: Chris</p>

Výsledek na stránce: 

Přidejme k vystylování několik řádků CSS:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

Výsledek na stránce: 

A nakonec přidáme pár řádků JavaScript kódu k simulaci dynamického obsahu:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Výsledek:

Poklíkáním na paragraf zjistíte, co se stane. (pozn.: Toto demo lze najít na GitHubu — zdrojový kód, nebo: živá ukázka)

JavaScript toho umí samozřejmě víc! Pojďme se na něj podívat zblízka.

Co vlastně JavaScript dělá?

Běžné programovací vlastnosti a zvyklosti tvoří jádro jazyku JavaScript. Což umožňuje:

  • Ukládat užitečná data ve formě proměnných. V ukázce nahoře se ptáme na vložení nového jména, které potom uložíme do proměnné name.
  • Operace na částech textu (v programování známé jako "strings" - textové řetěžce). V ukázce nahoře vezmeme string "Player 1: " a metodou join spojíme proměnnou name  se zbytkem, což ve finále dá výsledek: ''Player 1: Chris".
  • Běžení kódu jako odpověď na určité události vyskytující se na webové stránce. V ukázce nahoře byla užita událost  click, ke zjištění, kdy je na pragraf kliknuto, přičemž se po kliknutí aktualizoval obsah. 
  • A mnohem více!

Co je ještě více zajímavé, je funkcionalita postavená nad jádrem jazyka JavaScript.  Takzvané Application Programming Interfaces (APIs) poskytují extra možnosti jak využít JavaScript kód.

APIs jsou hotové kolekce stavebních bloků kódu, které umožňují vývojáři implementovat programy/funkce, které by jinak implementovat nebylo možné. Dělají to samé jako v jiných programovacích jazycích. Příklad z realného světa: Je mnohem jednodušší vzít dopředu nachystané nářadí a materiál k postavení nábytku a rovnou postavit poličku na knížky, než jít do lesa, vyrubat strom, ale ještě předtím vykutat rudu na sekeru a celkově si vyrobit všechno potřebné nářadí sám a až pak vyměřit a odpýlit potřebný kus dřeva na poličku. 

API se dělí především na dvě kategorie.

Prohlížečové API jsou vestavěné ve webovém prohlížeči a jsou schopné načíst data z okolního počítačového prostředí, nebo dělat jiné užitečné komplexní věci. Například:

  • DOM (Document Object Model) API umožňuje manipulaci s HTML a CSS, vytváření, odstraňování a změny HTML, dynamické aplikování nových stylů do stránky, atd. Pokaždé, když vidíte vyskakující okno na stránce, nebo zobrazený nějaký nový obsah (jako na příkladu nahoře), tak je to DOM v akci.
  • Geolocation API načítá geografické informace. Díky tomu je Google Maps schopné najít vaši lokaci a zobrazit ji na mapě.
  • CanvasWebGL API umožňují vytvářed animovanou 2D a 3D grafiku. Vývojáři s využitím těchto API vytváří velmi působivé věci — podívejte se na Chrome Experimentswebglsamples.
  • Audio a Video API jako HTMLMediaElementWebRTC umožňují dělat velice zajímavé věci s multimédii, jako hrát audio a video přímo ve webové stránce, nebo zachytit video z vaší webkamery a zobrazit ho na obrazovce někoho počítače (vyzkoušejte Snapshot demo k jednoduché demonstraci).

Poznámka: Mnohé z výše uvedených ukázek nebudou fungovat ve starším prohlížeči — při experimentování s JavaScriptem a zkoušení ukázek je dobré si nainstalovat novější prohlížeč jako Firefox, Chrome, Edge nebo Opera. Nezapomeňte zohlednit, že budete potřebovat testovat napříč prohlížeči, když se budete blížit k publikování produkční verze zdrojového kódu. (jedná se o kód, který budou využít reální zákazníci/návštěvníci webu).

API třetích stran nejsou běžně vestavěné v prohlížeči a je nutné jejich zdrojový kód a informace načíst odněkud z Internetu. Například:

  • Twitter API umožňuje dělat věci jako zobrazovat nejposlednější tweety na vaší webové stránce.
  • Google Maps API umožňuje načíst určité mapy do vaší web stránky a podobné funkce.

Poznámka: Tyto API jsou pro pokročilejší a nebudou obsaženy v tomto modulu. Můžete se o nich více dočíst v Client-side web API modulu.

Je toho k dispozici samozřejmě mnohem více! Každopádně, nepřežeňte to s nadšením. Určitě nebudete schopni vytvořit další Facebook, Google Mapy nebo Instagram po dni studování JavaScriptu. Potřebujete nejdříve znát základy. A proto jste zde!

Co JavaScript dělá na vaší stránce?

Zde se začneme skutečně dívat na nějaký kód, a přitom můžete zkoumat, co se skutečně stane, když na vaší stránce spustíte nějaký JavaScript.

Zkusme zlehka zrekapitulovat, co se děje, když načtete stránku v prohlížeči. Když načítáte stránku v prohlížeči, spouští se kód (HTML, CSS, JavaScript) v exekučním prostředí (v kartě prohlížeče). Lze si to představit jako továrnu, která přijímá vstupy (kód) a jako výstup je hotová webová stránka.

JavaScript je exekuován prohlížečem vestavěným JavaScript enginem, poté, co HTML a CSS bylo sestaveno spojeno do webové stránky. Toto zajišťuje, že struktura a styly jsou na stránce na svých místech v čase kdy se spouští a začíná běžet javascriptový kód.

To je dobrá věc, jelikož velmi častým využitím jazyka JavaScript jsou dynamické úpravy kódu HTML a CSS pro aktualizaci uživatelského rozhraní prostřednictvím rozhraní API Document Object Model (jak je uvedeno výše). Pokud byl JavaScript načten a pokusil se spustit dříve, než se HTML a CSS změnily, pak by došlo k chybám.

Bezpečnost v prohlížeči

Každá karta prohlížeče je vlastní samostatný kbelík pro spouštění kódu (tyto segmenty se v technických termínech nazývají "prostředí výkonu") - to znamená, že ve většině případů je kód na každé kartě spuštěn zcela samostatně a kód na jedné kartě nemůže přímo ovlivnit kód na jiné kartě - nebo na jiné webové stránce. To je dobré bezpečnostní opatření - pokud by tomu tak nebylo, pak by piráti mohli začít psát kód, aby ukradli informace z jiných webových stránek a jiné podobné špatné věci.

Poznámka: Existují způsoby, jak bezpečně odesílat kód a data mezi různými webovými stránkami / kartami, jsou to však pokročilé techniky, které v tomto kurzu nebudou obsaženy.

Posloupnost kódu v JavaScriptu

Když se prohlížeč setká s blokem jazyka JavaScript, obvykle jej spouští v pořadí shora dolů. To znamená, že musíte být opatrní, v jakém pořadí kód úíšete. Například se vraťme do bloku kódu JavaScriptu, který jsme viděli v našem prvním příkladu:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Zde vybíráme textový odstavec (řádek 1) a potom k němu připojujeme nasluchače události (řádek 3), takže po kliknutí na odstavec updateName() blok kódu (řádky 5–8) poběží. Poté updateName() blok kódu (tento typ znovu použitelných bloků kódu se nazývá ,,funkce" ) se zeptá uživatele na nové jméno, které pak zobrazí v paragrafu, aby aktualizoval zobrazení.

Pokud by jste vyměnili pořadí prvních dvou řádků kódu, přestalo by to fungovat - místo toho by vám to vrátilo následující chybu v konzoli pro vývojáře v prohlížeči:  TypeError: para is undefined. Tahle hláška znamená, že objekt para ještě neexistuje, proto na něj nemůžeme dát nasluchač události.

Poznámka: Jedná se o velmi častou chybu - je třeba dbát na to, aby objekty uvedené ve vašem kódu existovaly předtím, než se pokusíte s nimi dále pracovat.

Interpretovaný versus kompilovaný kód

Možná máte slova interpretovaný a kompilovaný spojeny s programováním. JavaScript je interpretovaný jazyk — kód je spuštěn od prvního řádku do posledního a výsledek kódu je rovnou vrácen. Není potřeba ho dále transformovat do jiné podoby předtím než ho prohlížeč sám spustí.

Kompilované jazyky jsou naopak transformovány do jiné formy, než jsou spuštěny počítačem. Například C / C ++ jsou kompilovány do jazyka assembly, který je poté spuštěn počítačem.

Oba přístupy mají své výhody, o kterých v tomto bodě nebudeme diskutovat.

Na straně serveru versus na straně klienta

Možná jste již slyšeli server-sideclient-side kód, speciálně v kontextu vývoje webu. Tyto termíny vystihují prostředí ve kterém se který kód zpracovává. Jsou dvě možnosti - buď se kód zpracovává na straně serveru, nebo na straně klienta. Client-side je kód, který se spouští na počítači uživatele (klienta). Pokaždé, když je webová stránka prohlížena, je stažen client-side kód, následně je spuštěn a zobrazen prohlížečem (pokud má funkce, které mají něco zobrazit). V tomto JavaScript modulu se zabýváme výhradně client-side JavaScript kódem.

Server-side code naopak běží na serveru, kde se zpracuje a jeho výsledek je stažen a zobrazen v prohlížeči. Mezi nejpopulárnější popular server-side webové jazyky patří: PHP, Python, Ruby, and ASP.NET. i JavaScript! JavaScript může také být použit jako server-side jazyk, například v populárním vývojovém prostředí Node.js. Více informací o server-side JavaScriptu můžete zjistit v Dynamické Weby – Server-side programování článku.

Slovo dynamický se používá k popisu obou client-side JavaScriptu i server-side jazyků — je to reference k schopnosti aktualizování webové stránky/aplikace k zobrazení jiných věcí/částí za jiných okolností, generování nového obsahu, pokud je potřeba. Server-side code dynamicky generuje nový obsah na serveru, například tahá data z databáze. Kdežto client-side JavaScript dynamicky generuje nový obsah uvnitř prohlížeče u klienta. Například vytváří novou HTML tabulku, vkládá data vyžádaná ze serveru, poté zobrazuje tabulku ve webové stránce uživateli. Význam je v obou kontextech mírně odlišný, ale oba přístupy (na straně serveru i na straně klienta) obvykle spolupracují.

Webová stránka bez dynamicky se aktualizujícího obsahu se označuje jako statická - zobrazuje stejný obsah po celou dobu.

Jak přidat JavaScript do stránky?

JavaScript se aplikuje do HTML stránky podobně jako CSS. Kde CSS používá <link> elementy k applikaci externích stylů a <style> elementů k applikaci interních stylů do HTML, JavaScript potřebuje jenom jednoho HTML kamaráda — <script> element. Pojďmě se s ním naučit zacházet.

Interní JavaScript

  1. Zaprvé, vytvořte si kopii našeho souboru apply-javascript.html. Uložte si ji v adresáři s nějakou rozumnou cestou.
  2. Otevřete si tento soubor ve svém prohlížeči a zároveň i v nějakém textovém editoru (postačí i poznámkový blok). V prohlížeči uvidíte, že HTML vytváří jednoduchou webovou stránku obsahující a klikatelné tlačítko.
  3. Dále, jděte do svého textového editoru a přidejte následující část kódu těsně před zavírací značkou </body> :
    <script>
    
      // JavaScript půjde sem
    
    </script>
  4. Dále přidáme nějaký JavaScript kód dovnitř našeho <script> elementu, aby nám stránka dělala něco zajímavějšího — přidejte následující kód hned pod řádek ,,// JavaScript půjde sem":
    function createParagraph() {
      var para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
    
    var buttons = document.querySelectorAll('button');
    
    for (var i = 0; i < buttons.length ; i++) {
      buttons[i].addEventListener('click', createParagraph);
    }
  5. Uložte svůj soubor a aktualizujte svou stránku v prohlížeči. Měli byste vidět, že když kliknete na tlačítko, vygeneruje se nový paragraf, který je umístěn pod tlačítkem.  

Poznámka: Pokud váš příklad nefunguje, projděte kroky znovu a zkontrolujte, zda jste udělali vše v pořádku. Uložili jste místní kopii počátečního kódu jako .html soubor? Přidali jste <script> element těsně před značku </body> ? Přidali jste JavaScript přesně jak bylo popsáno? JavaScript je case sensitive, což znamená, že rozlišuje velká a malá písmena.  Musíte přepsat syntaxi přesně jak je na ukázce, jinak vám nebude fungovat.

Poznámka: Tuto ukázku můžete vidět také na Githubu: apply-javascript-internal.html (live verze).

Externí JavaScript

To by bylo, ale pokud chceme JavaScript uchovávat ve svém vlastním souboru, co máme dělat? Pojďme to zjistit.

  1. Zaprvé, vytvořte si nový soubor v tom samém adresáři, jako je i váš HTML dokument. Nazvěte jej script.js — ujistěte se, že má .js koncovku, aby vám to správně fungovalo.
  2. Za další, zkopírujte veškerý kód ve vašem <script> elementu a vložte jej do nově vytvořeného .js souboru(bez značek script). Uložte.
  3. Následně nahraďte <script> element tímto řádkem:
    <script src="script.js"></script>
  4. Uložte a aktualizujte svůj prohlížeč. Měli by jste vidět to samé, co předtím! Jenže v tomto případě máme JavaScript oddělený ve vlastním souboru. Možná vám to teď nepříjde, ale časem zjistíte, že je to nejlepší řešení, jak udržovat stabilní, znovu použitelný napříč různými HTML dokumenty a dobře čitelný kód. Plus je také to, že i váš HTML soubor je lépe čitelný.

Poznámka: Tato ukázka se nachází také na Githubu: apply-javascript-external.htmlscript.js (live ukázka).

Inline JavaScript

Všimněte si, že občas narazíte na kousky aktualního JavaScript kódu přežívajícího uvnitř HTML. Může to vypadat třeba takhle:

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Klikni na mě!</button>

Můžete si vyzkoušet demo ukázku níže.

Tato ukázka má stejnou funkcionalitu jako ty v předchozích sekcích, rozdíl je v tom, že <button> element zahrnuje v řádku zapsaný inline onclick handler, který spustí funkci, když je tlačítko zmáčknuto.

Prosím, nepoužívejte to. Není dobrým zvykem si zaneřádit HTML zbytečným množstvím JavaScript kódu, je to neužitečné, protože musíte pokaždé zahrnout atribut onclick="createParagraph()" na každém tlačítku ve stránce, na kterém chcete, aby se aplikoval JavaScript kód.

Použití konstrukce čistého jazyka JavaScript umožňuje vybrat všechna tlačítka pomocí jedné instrukce. Kód, který jsme použili výše, aby posloužil tomuto účelu, vypadá takto:

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Může to vypadat trochu délší než onclick atribut, ale bude to fungovat u všech tlačítek bez ohledu na to, kolik jich je na stránce a kolik je přidáno nebo odstraněno. JavaScript nemusí být změněn. 

Poznámka: Zkuste upravit svou verziapply-javascript.html a přidejte pár tlačítek do tohoto souboru. Když zaktualizujete prohlížeč, budou všechna talčítka vytvářet nový paragraf. 

Komentáře

Stejně jako u HTML a CSS je možné psát komentáře i do kódu JavaScriptu, který prohlížeč ignoruje a existují v něm pouze pokyny pro vaše spolupracovníky o tom, jak tento kód funguje (je to i pro vás, pokud se vrátíte ke svému kódu po 6 měsících a nemůžete si vzpomenout, co jste udělali). Komentáře jsou velmi užitečné a měli byste je používat často, zejména pro větší aplikace. Existují dva typy:

  • Jednořádkový komentář je napsán po dvojitém lomítku (//), např.:
    // Já jsem komentář na jednom řádku.
  • Víceřádkový komentář lze napsat mezi řetězce /* a */, například:
    /*
      Také jsem
      komentář, ale na více řádcích.
    */

Také bychom mohli komentovat náš poslední ukázkový JavaScript kód pomocí komentářů:

// Function: creates a new paragraph and append it to the bottom of the HTML body.

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page and sort them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Shrnutí

Takže tady to je. Váš první krok do světa JavaScriptu. Začali jsme s teorií, poté jsme si začali zvykat na to, proč by se měl JavaScript používat, a co se s ním dá dělat. Také jste viděli několik příkladů kódu a dozvěděli jste se, jak JavaScript mimo jiné můžete využít na vašich webových stránkách.

JavaScript se může zdát trochu skličující, ale nedělejte si starosti - v tomto kurzu vás provedeme v jednoduchých krocích, které dávají smysl, dál. V dalším článku se budeme věnovat přímo praktickým aplikacím, dostanete se do cviku a vytvoříte si vlastní ukázky jazyka JavaScript.

V tomto modulu

Štítky a přispěvatelé do dokumentace

 Přispěvatelé této stránky: M0niCz
 Poslední aktualizace od: M0niCz,