Začínáme s IT

Online kurz JavaScript

Pojď se s námi naučit ovládat webové stránky pomocí JavaScriptu. Online kurz Tě provede základy JavaScriptu na příkladech.

Ukážeme si, co je JavaScript. Vyzkoušíme si tvorbu jednoduché hry a na ní si vysvětlíme, jak vypadají a jak se manipuluje s prvky na stránce, jak fungují proměnné, funkce nebo třeba podmínky v JavaScriptu. Prohlédni si níže první video online kurzu, který má celkem 10 lekcí.

Co budeme potřebovat

1) Textový editor - já osobně budu po celou dobu používat Visual Studio Code od Microsoftu (https://code.visualstudio.com/). Pokud máš nějaký svůj oblíbený, tak nemám nejmenší problém, když ho budeš chtít používat. Jen ti asi nebudu schopný pomoci při problému s editorem.

2) Webový prohlížeč - stejně jako s editorem, můžeš používat svůj vlastní. Já budu po celou dobu používat Google Chrome (https://www.google.com/chrome/).

3) Složku pro kurz - doporučil bych ti zřídit si na vlastním stroji složku pro všechny materiály a jednotlivé lekce z kurzu, aby v tom nevznikal chaos a všechno mělo své místo. :)

Tady máš odkaz k materiálům pro tuto lekci: czchts-js-1

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!");
} else {
    console.log("Jedno pivo");
}

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?

Zaujal Tě online kurz? Pro postup do další lekce prosím vyplň následující registrační formulář. Děkujeme!

Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.

Logo Opz Barevn C3 A9 170816 163502 1