# Lekce 8 - Úvod do JavaScriptu # Hello World day - 21.11. # Co je JavaScript? * Programovací jazyk (na rozdíl od HTML, CSS, stejně jako PHP) * Rozumí mu prohlížeče (stejně jako HTML, CSS, na rozdíl od PHP) * Je nejsilnějším, ale nejsložitějším nástrojem webu # V prohlížeči slouží k * reakci na události * změně obsahu webu bez přecházení na další HTML stránky * komunikaci se serverem (odesílání a načítání dat) * zpracování dat, validace dat, efekty # Kde jinde jej lze ještě použít? * Všude * Software jí svět * JavaScript jí software # Kde jinde jej lze ještě použít? * Příkazová řádka (node.js) * Mobilní aplikace (PWA, React Native, ...) * Desktop aplikace (Elektron) * Hry * Mikroprocesory (Espruino) * Vizualizace dat (d3.js) * ... # Výhody JS * Šíře využití (nejširší na světě) * Popularita = komunita - nejpopulárnější jazyk světa a roste * Snadný začátek * Dobrý výkon * Je good-enough - ne nejlepší, ale stačí # Nevýhody JS * Špatná práce s kódem u velkých projektů * Zpětná kompatibilita a špatné nápady kdysi dávno ## Řešení * jsou, ale nad rámec dneška # Pojmy - nudná/nutná teorie * Hodnota * Proměnná * Výraz * Funkce * Větvení * Opakování * Událost # Hodnota - typy * Číslo - number * Text - řetězec - string * Ano/ne - bool * Více hodnot - pole - array * Jmenný seznam hodnot - objekt - object * Nic - undefined * Série příkazů - funkce (viz dále) # Proměnná * Pojmenovaný zástupce za hodnotu * Může držet jakýkoli typ # Výraz * Vytváří hodnotu nebo provádí akci * tj. volání funkce * speciální funkce (+, - , &&, || ...) # Funkce * Deklarace * Volání # Větvení * Podmínka * Chci něco udělat jen někdy # Opakování * Cyklus * Chci něco udělat vícekrát # Událost * Něco se stalo * Klik myší * Stisk tlačítka * Posun myši * Zápis do formuláře * Změna velikosti viewportu * Spustí se funkce, pokud je zaregistrovaná # To stačí * Složité je, jak to aplikovat na reálný problém # Prohlížeč * Umí provést kód * Nabízí API - funkce jak s ním komunikovat # Prakticky * Vložíme JavaScript do HTML * `` * nejlépe na konec stránky, před `/body` * Provedeme kód ve stránce * `alert('Hello World')` * Provedeme kód v konzoli # Jak se to píše * Vytvoříme hodnotu * číslo - `1` * string - `'text'` * bool - `true` * pole - `['moje pole']` * objekt - `{jmeno: 'Aleš'}` * nic - `undefined` # Uděláme proměnnou * `var mojeJmeno = 'Aleš'` # Výraz - složitější příklad ``` var mujVek = Number(prompt('Kolik ti je let?')) var letOdPlnoletosti = mujVek - 18 alert('Jsi plnoletý již ' + letOdPlnoletosti + ' let') ``` # Funkce - Deklarace (lze bez jména) ``` function mojeFunkce(mujParameter) { mujPrikaz() return 'hodnota kterou vracim' } ``` # Funkce - Deklarace prakticky ``` function secti(a, b) { return a + b } ``` # Funkce - Volání ``` var soucet = secti(1, 2) alert(soucet) ``` # Větvení, opakování Chytře se mu zkusíme vyhnout # Pracujeme s DOM - Document Object Model # Najdeme si element, se kterými chceme pracovat ``` document.querySelector('css selektor') var nadpis = document.querySelector('h1') ``` # Měníme obsah elementu ``` var nadpis = document.querySelector('h1') nadpis.innerText = 'Změněný text' nadpis.innerHtml = 'Změněný text' ``` # Reagujeme na události ``` var nadpis = document.querySelector('h1') nadpis.addEventListener('click', function() { nadpis.innerText = 'Změněný text' }) ``` # Měníme vzhled elementu ``` nadpis.classList.add('moje-trida') nadpis.classList.remove('moje-trida') nadpis.classList.toggle('moje-trida') nadpis.style.display = 'none' nadpis.style.color = 'red' ``` # Děláme skrývací menu