Pokročilý JavaScript

MVOP3 WBI

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

icon

Node.js

Node.js

  • běhové prostředí
  • JavaScript na serveru / v konzolové řádce
  • komplexní systém
  • alfa-omega celého MVOPu!

V Node.js máme k dispozici vše z našeho známého JS (bez DOMu a spojených věcí) a dokonce věci na více (práce se soubory, ...).

https://nodejs.org/en/

Ukázka použití

  • příkaz node

npm

npm

  • balíčkovací systém
  • pro Node.js
  • balíček = knihovna = library, ...

Balíčky

  • instalujeme jako projekt
  • instalujeme globálně (různé správce)
  • ≥ 1.3 milionu balíčků zaregistrováno

package.json

  • ukládání informací o projektu
  • seznam knihoven, jejich verze
  • příkazy a další nastavení

npm

  • npm se instaluje společně s Node.js

https://www.npmjs.com

Založíme projekt!

npm init

npm init

  • interaktivní příkaz
  • založení projektu
  • dle zadaných informací vygeneruje package.json

npm run compile

npm run run

Balíčky

Instalace

  • nyní budeme instalovat pro projekt
  • npm install <jmeno balíčku>

Po instalaci

  • upraví/vytvoří se složka node_modules, obsahující dané knihovny
  • upraví se soubor package.json — bude obsahovat knihovnu a její verzi
  • upraví/vytvoří se soubor package-lock.json, který obsahuje přesnější informace o nainstalovaných knihovnách

Soubor package-lock.json a node_modules nikdy nedáváme na verzovací systém (git).

Každý balíček / knihovna se chová různě. Vždy je potřeba číst dokumentaci.

Vstup uživatele v JS

Společná práce

  • založte nový projekt
  • nainstalujte balíček entoli
  • přečtěte si dokumentaci
  • vytvořte program dle videa
  • program spouštějte pomocí npm

Balíčky

Společná práce

Prohledejte internet a nalezněte zajimavé npm balíčky.

Č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

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"

Způsoby programování

Způsoby programování

  • programovací paradigmata = přístupy k tvorbě programů / aplikací
  • jazyky podporují více paradigmat
  • objektově orientované programování (OOP)
  • datově orientované programování (DOP)
  • funkcionálně orientované programování (FOP)
  • ...

OOP není jediný správný způsob programování.

Objektově OP

Datově OP

Funkcionálně OP

My se budeme zabírat OOP.

K pochopení ostatních typů programování je potřeba tyto základy znát.

Objekt

  • uložení více dat různých datových typů na jednom místě
  • tvoříme pomocí složených závorek

Můžeme mít v objektu funkci?

Jak se taková funkce bude volat?

Třída

  • nějaká šablona určitého jména
  • vytváříme instanci — určitý objekt, který kopíruje šablonu
  • šablona nám určuje proměnné — vlastností, které bude instance vždy obsahovat
  • určuje taktéž funkce — metody, které zajisté budeme moci volat na instanci

Třídy jsou tedy takové objekty, ne? Proč tedy třídy používáme?

Třídy nám zaručí jakousi konzistenci dat.

Kód rozdělujeme do více celků, které se lépe zpracovávájí.

Nemusíme opakovat ten samý kód.

Definice tříd

Co to vypíše?

Definice metod

Přístup k hodnotám

Komplexní přístup

Metody s parametry

Konstruktor

Konstruktor

  • speciální metoda
  • je přitomný i když jej nedefinujeme
  • slouží k připravení instance k použití
  • např. hodnoty, které musí být přítomny, různé zpracování, načtení servis

Ukázka

Základní hodnoty

Argumenty

Dedičnost

Dědičnost

  • dovoluje nám zdědit vlastnosti a metody z jiné třídy
  • k těmto vlastnostem a metodám můžeme přistupovat a upravovat je
  • k instanci pak můžeme přistupovat jako k instanci děděné třídy

Ukázka dědičnosti

K čemu se nám to hodí?

Zlepšení přehlednosti kódu

a co kdybychom chtěli něco přidat do prvního řešení?

Abstrakce

  • často potřebujeme evidovat více tříd v jedné datové struktuře
  • abstrakce nám pomůže uchovávat společné vlastnosti na jednom místě
  • nemusíme kontrolovat zda obsahuje další informace

Abstrakce

Kontrola zda je třída

Konstuktory v dědění

Tohle fungovat nebude. Proč?

K čemuže nám slouží třídy?

Lze dědit jen z jedné třídy.

Všechny třídy na konci dědí z třídy Object.

Super volá nadřazenou třídu, která může volat její nadřazenou třídu, ...

Další koncepty OOP

  • i v JS:
    • statické vlastnosti a metody
    • neveřejné vlastnosti a metody
    • gettery a settery
  • můžeme si ukázat, pokud máte zájem

Opakování

Co je to třída?

Co je to instance?

Co je to vlastnost?

Co je to metoda?

Co je to konstruktor?

Funguje OOP v prohlížeči?

Proč místo tříd nepoužíváme objekty?

Co jsou to nepovinné parametry?

K čemu slouží dědičnost?

Co je to abstrakce dědičnosti?

Co platí pro konstruktory v dědičnosti?

Promises

Co to znamená promise?

Aktuální kód

  • běží synchronně — za sebou
  • než se provede další příkaz, musí se provést ten před ním
  • nereálné v produkčním prostředí — nemůžeme čekat než se něco stane

Na co na webových stránkách musíme čekat v kódu?

Promises

  • způsob vytvoření asynchronního kódu
  • akce trvají různě dlouho
  • neblokují se další příkazy, které na daném výsledku nezávisí
  • ty, co jsou na sobě závislé čekají

then

  • funkce se zavolá s hodnotou poté, co se promises vyřeší
  • můžeme nastavit i vícekrát — řetízkují se

Jak si myslíte, že bude implementovaná funkce generateCatName?

Náhodné kočky

Společná práce

Vytvořte funkci, která Vám vrátí promise, která po 1 vteřině vrátí objekt s náhodným jménem kočky, náhodným věkem kočky a náhodnou barvou.

Funkci zavolejte a vypište obsah objektu, který Vám přijde.

Někdy se může stát, že se operace neprovede.

Co se závislostmi Promise stane?

Odmítnutí v kódu

Zachycení chyb uvnitř promise

  • pomocí volání .catch, která zachytí všechny chyby
  • zachytí chyby před tím a zavolají nějaký kód
  • volání .then po zavoláni .catch se zavolají i přes chybu
  • proto často dáváme .catch až na konec

Garance

  • funkce přidávány pomocí .then budou volány v přesném pořadí a až potom (a jen když) bude předchozí funkce úspěšně splněna
  • funkce přidávány pomocí .then budou zavolány i po tom, co byly přidány již na vyřešenou promise

Volání promises

  • .all — zavolání všech najednou a najednou získá jejich data
  • .race — zavolání všech najednou, vrátí první

Jaký je rozdíl mezí asynchronním programováním a vícevláknovým programováním?

Náhodné kočky 2

Společná práce

Již máme vytvořenou funkci s promise na vrácení náhodné kočky.

Nyní pomocí promise udělejte, že se vrátí jedna kočka a po získání kočky se získá druha kočka (bude trvat sekundu) a takto desetkrát.

Asynchronní funkce

Asynchronní funkce

  • používání promises je velmi logicky náročné
  • využívají se stále ty samé konstrukce dokola
  • proto byl přidán syntax sugar pro asynchronní funkce
  • klíčové slovo async a await

async

  • říká, že je funkce asynchronní
  • vždy vrací promise
  • na tu se můžeme vázat
  • uvnitř používáme await

await

  • řiká, že na daný přikaz se musí počkat k pokračování

Propojování souborů

Proč bychom potřebovali propojovat soubory?

Propojování souborů

  • často potřebujeme propojit více souborů dohromady
  • přehledný kód
  • modularita, skvělé pro OOP

Způsoby propojení

  • require — starší způsob, podporován skoro všude
  • import — novější způsob, menší podpora

require(path)

  • vloží do proměnné exportovaný obsah z jiného souboru
  • provede veškeré příkazy v souboru

data.js

require.js

Import

  • určujeme to, co exportujeme ze souboru
  • existují tzv. named exports a default exports
  • používáme import a from
  • nutné zapnout v package.json

data.js

import.js

Děkuji za pozornost!

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