JavaScript

MVOP WBF

Bc. Matěj Cajthaml — SSPŠ

©

JavaScript

  • skriptovací jazyk
  • pomocí Node.js začíná být programovacím
  • více jak 20 let starý
  • vytvořen pro webové stránky

Divné věci v JavaScriptu vytváří autor a používá zakázané konstrukce jazyka.

Zpětná kompabilita

  • většina divných věcí v JS zbyla po prvních verzí
  • zrušit zpětnou kompabilitu by bylo velmi těžké
  • JS se rozvijí a není potřeba tyto konstrukce používat
  • my se jim budeme vyhybat a nebudeme je používat

https://jsisweird.com

https://github.com/denysdovhan/wtfjs

JavaScript nemá nic společného s Javou.

Práce s JS

  • při programování se musí přemýšlet trošku jinak
  • jako všechny dovednosti — potřebuje čas a praxi
  • JS nepoužívá datové typy, pouze interně

Zápis

Zápis

  • ve stránce píšeme v tagu script jako poslední blok před ukončovacím tagem body
  • ve stránce můžeme importovat pomocí tagu script a atributu src
  • v konzolové řádce tvoříme pouze soubor, který spouštíme

Komentáře

Proměnné

Proměnné

  • způsob uložení dat
  • dva typy: konstanty a proměnné
  • vždy určujeme jméno
  • jméno: vždy anglicky, unikátní, přesné a s jasným významem

Za každým příkazem používáme středník. Že?

Příkaz vytvoření proměnné

  • klíčové slovo let

Během běhu můžeme měnit proměnným datový typ i jejich hodnotu.

Textovou hodnotu píšeme do uvozovek.

""

Hodnota undefined říká, že daná proměnná nemá určenou hodnotu.

Pravidost se v JS reprezentuje boolean hodnoty true a false.

Textové hodnoty

Práce s textovými hodnotami

  • hodnoty můžeme spojovat pomocí +
  • získat délku pomocí .length
  • znak pomocí charAt(k) na k-té pozici
  • zda obsahuje hodnotu pomocí .includes(str)
  • zvětšení písmen pomocí .toUpperCase()
  • zmenšení písmen pomocí .toLowerCase()
  • porovnat pomocí operátoru ==

Čísla

Práce s čísly

  • čísla můžeme sčítat (+), odečítat (-), dělit (/) a násobit (*)
  • porovnání pomocí ==, <, >, <=, >=

Větvení

Podmínky

  • zápis pomocí klíčového slova if
  • přijímá boolean hodnotu a pokud je platná, zavolá se příslušný blok
  • else if — nebo a pokud (lze používat neomezeně krát)
  • else — nebo, poslední část bloku

Pomocí console přistupujeme do konzole (jako v konz. řádce tak na webu).

Pomocí console.log(smth) vypíšeme něco do konzole. Existují další metody?

Počítačka kruhu

SPOLEČNÁ PRÁCE

Vytvoříme konzolový program pro výpočet obvodu a obsahu kruhu.

Kvadratické kořeny

SPOLEČNÁ PRÁCE

Vytvoříme konzolový program pro výpočet kořenů (má-li je) kvadratické rovnice.

Řídící konstrukce

Jak fungují podmínky — if?

Přepínač — switch

  • chytřejší podmínky
  • hodí se na menší počet podmínek — hodnot
  • podobné hodnoty
  • klíčová slova: switch, case, break, default
  • striktní porovnání

Přepínač — switch

Cyklus dokuď — while

  • blok s příkazy se provádí dokuď je podmínka pravdivá
  • můžeme využívat proměnné
  • lze vytvořit nekonečný cyklus

Cyklus dokuď — while

Cyklus s proměnou — for

  • blok s příkazy se provádí dle zadaných částí
  • tři části: proměnná, podmínka a inkrementátor
  • lze vytvořit nekonečný cyklus

Cyklus s proměnou — for

Logické operátory

Striktní vs. obyčejné porovnání

  • striktní: ===
  • obyčejné: ==
  • striktní porovnává datový typ a hodnotu
  • obyčejné porovnává jen hodnoty převedné na číslo
  • negace: !== a !=

"2021" === 2021?

"2021" === "2021"?

"2021" == "2021"?

"2021" == 2021?

Další porovnání

  • >
  • <
  • <=
  • >=

Spojování booleanových hodnot

  • && — a zároveň
  • || — a nebo
  • ! — negace

Závorky usměrnují pořadí operací.

Jednořádková podmínka

tzv. tenární operátor

Objekty

Objekty

  • způsob uložení dat programu
  • jedná se o pár jméno—hodnota
  • hodnota může být cokoliv — klidně i další objekt
  • podobá se Dictionary z C#
  • lze procházet cykly

Ukázka objektů

Přístup

Procházení

Pole

Pole

  • způsob uložení dat programu
  • stejně jako proměnné se ukládá v operační paměti
  • v JS: nemá pevně stanovenou velikost
  • v JS: nemá pevně stanovený datový typ
  • lze procházet cykly

Vytvoření

Přidávání

Čtení

Velikost

Pomocné metody

Hledání — find a filter

Přemapování — map

Procházení

Jak funguje pomocná metoda pro pole redukce — reduce?

Čtení argumentů

Čtení argumentů

  • když spustíme program pomocí prostředí Node.js
  • zadáváme argumenty
  • ty můžeme číst pomocí process.argv

Ukázka

Funkce

Funkce

  • černá krabička
  • zpracovává vstup (parametry) a vrací nějakou hodnotu
  • klíčová slova: function, return
  • můžeme definovat globálně nebo do proměnné

Ukázka

Math

Zpoždění

  • daná funkce se spustí o daný počet milisekund pouzději
  • setTimeout

Opakování

  • daná funkce se bude opakovat po daném počtu milisekund
  • setInterval

Návratovou hodnotou metod setTimeout a setInterval je číslo daného zpoždění/opakování. Oba dva můžeme zastavit pomocí tohoto čísla — jak?

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Filmy

PRÁCE

Společně vytvoříme program který bude implementovat různé funkce nad polem filmů v následující struktuře:

1. funkce

Vypsání filmů které byly vydány po roce 2000 a mají hodnocení přesně nebo více jak 5.7. Filmy vkládejte do jednoho stringu a každý film ukončete novým řádkem (\n), string poté vraťte jako výstupní hodnotu funkce. Filmy musí být vypsány ve formátu:

{ name, releaseYear, rating / 10 }

2. funkce

Vypočítejte průměrné hodnocení filmů, nejstarší a nejnovější film podle roku. Jako výstupní hodnotu vraťte string, ve kterém budou čísla rozdělena následovně: "průměr, nejstarší, nejnovější". Pokud není vypočítání možné, uveďte za údaj číslo 0. Výstup by mohl vypadat následovně:

4.1, 1992, 2021

3. funkce

Nalezněte herce, kteří hrají ve více filmech. Do výstupní hodnoty funkce — jako pole — vložte všechny herce, které jsou alespoň ve dvou filmech. Pole (NENÍ STRING) by mohlo vypadat následovně: 

["Daniel Radcliffe", "Rupert Grint", "Emma Watson"]

4. funkce

Spočítejte počty filmů dle různých kategorií. Jako výstupní hodnotu funkce vložte objekt, ve kterém budou klíče jména kategorií a hodnoty počty filmů. Výstup jako objekt (NENÍ STRING) by mohl vypadat následovně: 

{ Adventure: 2, Fantasy: 1 }

DOM

DOM

  • document object model
  • abstrakce nad webovými stránkami
  • můžeme měnit prvky stránkami
  • prvek document

DOM nefunguje v prostředí Node.js!

Selektování

  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll

Element

  • objekt obsahující vše o elementu na stránce
  • např. innerText, classList, style

Vytváření objektů

  • createElement
  • appendChild

Události

  • addEventListener
  • click, mouseover, ...

Můžeme posluchače odstranit?

Opakování

Co je to JS?

Proměnné

Konstanty

Komentáře

Textové hodnoty

Číselné hodnoty

Větvení

Podmínky

Přepínače

Cyklus

Logické operátory

Porovnání

Objekty

Pole

Pole — přemapování

Pole — filter

Čtení argumentů

Funkce

Math

Zpoždění

Opakování

DOM

Používání textových hodnot v konzoli

  • v příkazové řádce můžeme obalit jeden argument
    do uvozovek "
  • vše uvnitř uvozovek se bere jako jeden argument
  • uvozovky se v programu automaticky odeberou
node index.js "ahoj tohle je jeden argument" 3 "a tohle treti"

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/