Speciality JavaScriptu

Tato kapitola krátce opakuje prvky JavaScriptu, které jsme se doposud naučili. Zvláštní pozornost věnuje citlivým místům.

Struktura kódu

Příkazy jsou ukončeny středníkem:

alert('Ahoj'); alert('světe');

Konec řádku se zpravidla také považuje za středník, takže fungovat bude i toto:

alert('Ahoj')
alert('světe')

To se nazývá „automatické vkládání středníku“. Někdy to však nefunguje, například:

alert("Po této zprávě bude ohlášena chyba")

[1, 2].forEach(alert)

Většina průvodců stylem kódu se shoduje, že bychom měli uvádět středník za každým příkazem.

StÅ™edníky nejsou vyžadovány za bloky kódu {...} a syntaktickými konstrukcemi, které je obsahují, například cykly:

function f() {
  // za deklarací funkce není středník zapotřebí
}

for(;;) {
  // za cyklem není středník zapotřebí
}

…Ale i když někde uvedeme středník „navíc“, není to chyba. Středník bude ignorován.

Více v kapitole: Struktura kódu.

Striktní režim

Abychom plnÄ› využili vÅ¡echny vlastnosti moderního JavaScriptu, mÄ›li bychom zahajovat skripty direktivou "use strict".

'use strict';

...

Tato direktiva musí být uvedena na začátku skriptu nebo těla funkce.

Bez "use strict" bude vÅ¡echno stále fungovat, ale nÄ›které prvky se budou chovat staromódnÄ›, „kompatibilně“. Obvykle dáváme pÅ™ednost modernímu chování.

Některé moderní vlastnosti jazyka (např. třídy, které budeme probírat v budoucnu) implicitně umožňují striktní režim.

Více v kapitole: Moderní režim, „use strict“.

Proměnné

Lze je deklarovat pomocí:

• let
• const (konstanta, nemůže být mÄ›nÄ›na)
• var (ve starém stylu, uvidíme pozdÄ›ji)

Název proměnné může obsahovat:

• Písmena a číslice, ale první znak nesmí být číslice.
• Znaky $ a _, které lze používat běžnÄ› jako písmena.
• Povoleny jsou i znaky nelatinských abeced a hieroglyfy, ale obvykle se nepoužívají.

Proměnné jsou dynamicky typovány. Může do nich být uložena jakákoli hodnota:

let x = 5;
x = "Jan";

Existuje osm datových typů:

• number pro čísla, a to jak celá, tak s pohyblivou řádovou čárkou,
• bigint pro celá čísla libovolné délky,
• string pro Å™etÄ›zce,
• boolean pro logické hodnoty: true/false,
• null – typ s jedinou hodnotou null, která znamená „prázdná“ nebo „neexistující“,
• undefined – typ s jedinou hodnotou undefined, která znamená „nepÅ™iÅ™azená“,
• object a symbol – pro komplexní datové struktury a unikátní identifikátory, zatím jsme je neprobírali.

Operátor typeof vrací typ hodnoty se dvÄ›ma výjimkami:

typeof null == "object" // chyba v jazyce
typeof function(){} == "function" // s funkcemi se zachází odlišně

Více v kapitole: Proměnné a Datové typy.

Interakce

Jako pracovní prostředí používáme prohlížeč, takže základní funkce uživatelského rozhraní budou:

prompt(otázka, [default])

Položí otázku otázka a vrátí buď to, co návÅ¡tÄ›vník zadal, nebo null, jestliže stiskl „Storno“.

confirm(otázka)

Položí otázku otázka a nabídne na výbÄ›r mezi OK a Storno. Zvolená možnost je vrácena jako true/false.

alert(zpráva)

Vypíše zprávu zpráva.

Všechny tyto funkce jsou modální. Pozastaví vykonávání kódu a znemožní uživateli jinou interakci se stránkou, dokud neodpoví.

Příklad:

let uživatelskéJméno = prompt("Jak se jmenujete?", "Alice");
let dáSiČaj = confirm("Dáte si čaj?");

alert( "Návštěvník: " + uživatelskéJméno ); // Alice
alert( "Dá si čaj: " + dáSiČaj ); // true

Více v kapitole: Interakce: alert, prompt, confirm.

Operátory

JavaScript podporuje následující operátory:

Aritmetické

Obvyklé: * + - /, dále % pro zbytek po dÄ›lení a ** pro mocninu.

Binární plus + spojuje Å™etÄ›zce. Jestliže je jeden z operandů Å™etÄ›zec, bude na Å™etÄ›zec pÅ™eveden i druhý operand:

alert( '1' + 2 ); // '12', řetězec
alert( 1 + '2' ); // '12', řetězec

Přiřazení

Existuje jednoduché pÅ™iÅ™azení a = b a kombinovaná pÅ™iÅ™azení, napÅ™. a *= 2.

Bitové

Bitové operátory pracují se 32-bitovými celými čísly na nejnižší, bitové úrovni: až je budete potřebovat, viz dokumentaci.

Podmíněný

Jediný operátor se tÅ™emi parametry: podmínka ? výsledekA : výsledekB. Je-li podmínka pravdivá, vrátí výsledekA, jinak vrátí výsledekB.

Logické

Logické AND && a OR || provádÄ›jí zkrácené vyhodnocování a pak vrátí hodnotu, na které se zastavily (nemusí to nutnÄ› být true/false). Logické NOT ! pÅ™evádí operand na typ boolean a vrací opačnou hodnotu.

Koalescence

Operátor ?? poskytuje způsob, jak vybrat definovanou hodnotu ze seznamu promÄ›nných. Výsledek a ?? b je a, pokud není null/undefined; v takovém případÄ› je výsledek b.

Porovnávání

Test rovnosti == pro hodnoty různých typů je pÅ™evede na číslo (s výjimkou null a undefined, které se rovnají sobÄ› navzájem a ničemu jinému), takže tyto hodnoty jsou si rovny:

alert( 0 == false ); // true
alert( 0 == '' ); // true

Jiná porovnání se převádí také na čísla.

Operátor striktní rovnosti === tuto konverzi neprovádí: různé typy pro nÄ›j vždy znamenají, že hodnoty se nerovnají.

Hodnoty null a undefined jsou speciální: rovnají se == sobÄ› navzájem a nerovnají se ničemu jinému.

Operátory porovnání větší/menší porovnávají řetězce znak po znaku, ostatní typy se převádějí na čísla.

Ostatní

Existuje několik dalších operátorů, např. operátor čárky.

Více v kapitolách: Základní operátory, matematika, Porovnávání, Logické operátory, Operátor koalescence „??“.

Cykly

• Probrali jsme tÅ™i druhy cyklů:

  // 1
  while (podmínka) {
    ...
  }
  
  // 2
  do {
    ...
  } while (podmínka);
  
  // 3
  for(let i = 0; i < 10; i++) {
    ...
  }

• PromÄ›nná deklarovaná v cyklu for(let...) je viditelná jen uvnitÅ™ tohoto cyklu. Můžeme vÅ¡ak také let vypustit a znovu použít již existující promÄ›nnou.

• Direktivy break/continue umožňují ukončit celý cyklus/aktuální iteraci. Pro opuÅ¡tÄ›ní vnoÅ™ených cyklů používejte návěští.

Více v kapitole: Cykly: while a for.

Později prostudujeme další druhy cyklů, které pracují s objekty.

Konstrukce „switch“

Konstrukce „switch“ dokáže nahradit nÄ›kolik testů if. K porovnávání používá === (striktní rovnost).

Příklad:

let věk = prompt('Kolik je vám let?', 18);

switch (věk) {
  case 18:
    alert("Tohle nefunguje"); // výsledkem dotazu prompt je řetězec, ne číslo
    break;

  case "18":
    alert("Tohle funguje!");
    break;

  default:
    alert("Jakákoli hodnota, která se nerovná žádné výše uvedené");
}

Více v kapitole: Příkaz „switch“.

Funkce

Uvedli jsme tři způsoby, jakými lze v JavaScriptu vytvořit funkci:

1. Deklarace funkce: funkce v hlavním kódu

   function součet(a, b) {
     let výsledek = a + b;
   
     return výsledek;
   }

2. Funkční výraz: funkce v kontextu výrazu

   let součet = function(a, b) {
     let výsledek = a + b;
   
     return výsledek;
   };

3. Šipkové funkce:

   // výraz na pravé straně
   let součet = (a, b) => a + b;
   
   // nebo víceřádková syntaxe s { ... }, zde potřebujeme return:
   let součet = (a, b) => {
     // ...
     return a + b;
   }
   
   // bez argumentů
   let řekniAhoj = () => alert("Ahoj");
   
   // s jediným argumentem
   let dvojnásobek = n => n * 2;

• Funkce mohou obsahovat lokální promÄ›nné: ty jsou deklarovány uvnitÅ™ jejich tÄ›la nebo v seznamu parametrů. Tyto promÄ›nné jsou viditelné jen uvnitÅ™ funkce.
• Parametry mohou mít nastavené výchozí hodnoty: function součet(a = 1, b = 2) {...}.
• Funkce vždy nÄ›co vrátí. Neobsahuje-li příkaz return, jejím výsledkem je undefined.

Více v kapitolách: Funkce, Šipkové funkce (arrow funkce) – základy.

Bude toho víc

Toto byl krátký seznam prvků JavaScriptu. Dosud jsme prostudovali pouze základy. Dále v tomto tutoriálu naleznete další speciální a pokročilé prvky JavaScriptu.