JavaScript 3

21. hodina DVOP WBB


Matěj Cajthaml — SSPŠ

©

Opakování

Co je to tzv. forknutí repozitáře?
Jak se liší HTTP PUT, POST a PATCH?
Co je to AJAX?
Jak se funkce ukládají v JS?
Můžeme v JS dělit nulou?

Opakování!

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í

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í

TypeScript

TypeScript

  • preprocessor
  • má k dispozici vše v JS
  • na více type system
  • tj. datové typy, více OOP, ...
  • nad rámec toho předmětu

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

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

require(path)

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

data.js

require.js

Moderní import/export

Práce

Zjistěte si, jak se moderně importují a exportují části z JS souborů

https://javascript.info/import-export

Co je to Node.js?

npm

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

balíčky

  • instalujeme jako projekt
  • instalujeme globálně
  • 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

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.

Balíčky

Práce

Prohledejte internet a nalezněte zajimavé (možná i zvláštní) npm balíčky.

Opakování

Jak přistoupíme k hodnotě uvnitř objektu?
Jaké cykly známe v JS?
Co je to npm projekt? Jak ho vytváříme?
Co se ukládá uvnitř node_modules?
Jak funguje ECMA import / export?

Děkuji za pozornost!

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