Pokročilé programování

MVOP WBF

Bc. Matěj Cajthaml — SSPŠ

©

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

Kruh

Společná práce

Vytvořte třídu, která bude uchovávat informace o kruhu. Konstruktor bude brát jedno číslo reprezentujicí poloměr. Bude obsahovat dvě metody, které vypočítají obsah a obvod.

Funkčnost této třídy na nějakých instancí otestujte.

Třída studentů

Společná práce

Vytvořte třídu Student, která bude v konstruktoru přijímat jméno, přijmení a věk studenta. Tato třída bude obsahovat metodu print, která do konzole vypíše veškeré informace o studentovi do konzole.

Vytvořte třídu Trida, která bude obsahovat seznam studentů. Bude obsahovat metodu addStudent, která z parametru přidá do třídy studenta, a printStudents, která vypíše veškeré studenty ze třídy do konzole.

Základní hodnoty

Co znamená slovo statické?

Statické

  • neměnný, stálé, ...
  • v programování označujeme věci, které nezavísí na jiných hodnotách

Statické věci ve třídě

  • statické věci se váží na třídu
  • tj. nemůže přistupovat k datům instance
  • statické věci mohou přistupovat ke statickým věcem
  • klíčové slovo static

Statické vlastnosti

K čemu se nám hodí statické vlastnosti?

Statické metody

K čemu se nám hodí statické metody?

Všechny vlastnosti a metody, které jsme si doteď ukázali byly veřejné — public.

Neveřejné vlastnosti

K čemu se nám hodí neveřejné vlastnosti?

Neveřejné metody

K čemu se nám hodí privátní metody?

Kombinace statických a neveřejných

Práce

Mohou být statické vlastnosti / metody neveřejné?

Opakování

Co je to třída?

Co je to instance?

Co je to vlastnost?

Jak zapíšeme neveřejnou vlastnost?

Co je to metoda?

Jak zapíšeme neveřejnou metodu?

Co je to konstruktor?

Co jsou to statické proměnné / metody?

Funguje OOP v prohlížeči?

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

Argumenty

Gettery

  • způsob validace dat
  • komplexní logika
  • při získávání hodnoty se zavola tato funkce
  • get

Na co se to hodí?

Settery

  • způsob validace dat
  • komplexní logika
  • při nastavování hodnoty se zavola tato funkce
  • set

Na co se to hodí?

Záznamy

Společná práce

Vytvořte třídu User. Tato třída bude reprezentovat uživatele v aplikaci a bude obsahovat vlastnost name, id a score, reprezentující přezdívku uživatele resp. jeho identifikátor a skóre.

Každý uživatel si bude držet vlastní historii — záznamy všech jeho skóre. Skóre budeme nastavovat pomocí vlastnosti score.

Použijte gettery pro získání posledního skóre a pole všech záznamů se skóre. Použijte setter pro přidání a nastavení skóre.

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, ...

Opakování

Co je to třída?

Co je to instance?

Co je to vlastnost?

Jak zapíšeme neveřejnou vlastnost?

Co je to metoda?

Jak zapíšeme neveřejnou metodu?

Co je to konstruktor?

Co jsou to statické proměnné / metody?

Funguje OOP v prohlížeči?

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

Co jsou to nepovinné parametry?

Co je to getter?

Co je to setter?

Proč používáme gettery a settery?

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

Co je to abstakce 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í

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

Propojení

Práce

Zjistěte, jestli můžeme exportovat funkce, třídy či další objekty. Případně na ukázce předveďte jak.

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.

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é (možná i zvláštní) npm balíčky.

Děkuji za pozornost!

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