JavaScript - lekce 1

Podklady pro tuto lekci si stáhni zde. Stažený ZIP rozbal u sebe na počítači a složku otevři v editoru VS Code.

Co je JavaScript

JavaScript (zkráceně JS) je programovací jazyk a třetí základní kámen moderního webu. Je zodpovědný za dynamické prvky na webu (například slider v galerii) a komunikaci mezi webem a serverem (například odeslání formuláře).

Důležité je, že kód JavaScriptu běží v prohlížeči počítače (klient) na rozdíl od serverových jazyků jako Java, PHP a další. Proto je vhodný i na validaci formulářů, než se odešlou na server, což je řádově pomalejší úkon. Nevýhodou toho, že běží v prohlížeči, je skutečnost, že ho uživatel může vypnout nebo přepsat (proto se používá validace i na serveru).

Dalším skvělým příkladem využití JS jsou webové aplikace a hry, které jsou díky prostředí prohlížeče multiplatformní - běží na každém stroji, pokud je tam prohlížeč. Příklady webových aplikací jsou třeba cloudové systémy (iCloud, Google Drive), kancelářské balíky (Google Docs) nebo sociální sítě (Facebook, Twitter).

Jak dostat JS do webové stránky

Je to jednoduché. Stačí nám k tomu jeden speciální HTML tag v našem dokumentu a můžeme rovnou psát náš JS kód.

<script>
   console.log("Už funguji!");
</script>

My ale budeme využívat trošku sofistikovanější způsob, kde si naše skripty vytáhneme do samostatného souboru.

<!-- HTML -->
<script src="skript.js"></script>
‍
// JavaScript
console.log("Už funguji a jsem venku!");

Proměnné aneb Jak si něco uložit

Proměnná je místo v paměti, do kterého uložíme nějakou hodnotu, kterou můžeme později znovu využít nebo změnit. Každá proměnná má svůj datový typ. Je to buď text (string), číslo (number), pravdivostní hodnota (boolean - nabývá hodnot true/false) anebo objekt, který se skládá z více dalších hodnot (dostaneme se k nim později).

let pozdrav = "Ahoj";  // Textový řetězec (string)
let rok = "2019";      // Číslo jako textový řetězec (string)
let vek = 24;          // Číslo (number)
let vzhuru = true;     // Pravdivostní hodnota (Boolean)
let pepa = {           // Objekt (object)
   jmeno: "Josef",
   rokNarozeni: 1975,
    zamestnany: true
};

‍

Podmínky a větvení

Podmínky využíváme v situacích, kdy chceme, aby se program rozhodoval, zda něco platí či neplatí. Na základě toho se může běh programu vydat různými cestami. Pro zápis podmínek využíváme if-else blok. Pokud se může vyskytnou více situací, na které chceme reagovat, lze mezi if-blok a else-blok vkládat potenciálně neomezené množství else if-bloků.

let vek = 2019 - 1995;

if (vek < 18) {
   console.log("Jednu kofolu");
} else if (vek === 18) {         // else if-bloků může být i několik
   console.log("Ukaž občanku!");

Pro porovnávání hodnot v podmínkách využíváme logické operátory.

• > větší než
• < menší než
• >= větší nebo rovno
• <= menší nebo rovno
• !== nerovno
• === rovno

Cykly

Cykly využijeme v případě, že chceme několikrát vykonat stejný příkaz. V praxi se nejčastěji využívají při průchodu polem nebo objektem (co je pole a objekt si povíme v jedné z dalších lekcí), kdy můžeme hledat nějaké prvky, seřazovat hodnoty nebo ty hodnoty měnit.

Máme dva základní druhy cyklů:

• for-cyklus - má přesně daný počet, kolikrát se provede
• while-cyklus - provádí se, dokud platí podmínka

U while-cyklu je nutné dát si pozor, aby se někdy během běhu cyklu porušila jeho vstupní podmínka. Jinak cyklus nikdy neskončí - program se zacyklí (respektive skončí, až počítači dojde operační paměť).

// for-cyklus, který nám šestkrát vypíše "Ahoj" do konzole
for (let i = 0; i < 6; i++) {
   console.log("Ahoj");
}

// while-cyklus, který nám šestkrát vypíše "Ahoj" do konzole
let cislo = 0;
while (cislo < 6) {
   console.log("Ahoj");
   cislo = cislo + 1;     // to stejné jako kdybych napsal cislo++
}

Kontrolní otázky

1. Pomocí kterého slova deklarujeme proměnnou?
2. Jaký je v JS logický operátor pro rovnost?
3. Který blok může být v podmínce vícekrát (if, else nebo else if)?
4. Jaký je rozdíl mezi while a for-cyklem?
5. Co se stane s programem, pokud while-cyklus neporuší svou podmínku?

‍