# Lekce 8 - Úvod do JavaScriptu
# Hello World day - 21.11.2018!
# 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 a 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
* 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
* jQuery - knihovna, která nám zjednoduší API prohlížeče
# Prakticky
* Vložíme JavaScript do HTML
* ``
* 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
* Vyvoří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 pomocí [jQuery](https://jquery.com/)
* Vložíme jQuery na stránku před náš JavaScript
* ``
# Najdeme si elementy, se kterými chceme pracovat
```
$('css selektor')
var nadpis = $('h1')
```
# Měníme obsah elementu
```
var nadpis = $('h1')
nadpis.text('Změněný text')
nadpis.html('Změněný text')
```
# Reagujeme na události
```
var nadpis = $('h1')
nadpis.on('click', function() {
nadpis.text('Změněný text')
})
```
# Měníme vzhled elementu
```
nadpis.addClass('moje-trida')
nadpis.removeClass('moje-trida')
nadpis.toggleClass('moje-trida')
nadpis.css('display', 'none')
nadpis.css({display: 'bool', color: 'red'})
```