JavaScript 1

17. hodina DVOP WBB


Matěj Cajthaml — SSPŠ

©

Opakování

K čemu slouží protokol FTP?
Proč je zápis CSS pomocí tzv. inline špatný?
K čemu slouží working directory?
Jaké mají Git klienti nevýhody?
Jak přesuneme soubor ze stavu untracked do stavu staged?

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ě

Node.js

Node.js

  • systém pro psaní aplikací
  • JavaScript na serveru / v konzolové řádce
  • komplexní systém
  • alfa-omega celého DVOPu

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

JS kód pomocí Node.js spouštíme v příkazové řádce pomocí příkazu node soubor.js.

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é

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.

Co říká hodnota null?

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?

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

Řídící konstrukce

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

Č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

Opakování

Kam zapisujeme JS?
Co je to proměnná? Jaké typy známe v JS? Jak se liší?
Co je to klíčové slovo?
Jak se v JS napíše logické AND, OR a NOT?
Co je to hodnota undefined?

Děkuji za pozornost!

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