JavaScript

MVOP3 WBI

Bc. Matěj Cajthaml ©

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

icon

JavaScript

  • poměrně starý a ustálený jazyk
  • vytvořen pro webové stránky
  • různá použití

  • na webu: skriptovací jazyk
  • v běhovém prostředí: programovací jazyk (např. Node.js)

Divné věci v JavaScriptu vytváří autor a používá nedoporučené 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

Práce s JS

  • při programování se musí přemýšlet trochu jinak
  • jako všechny dovednosti — potřebuje čas a praxi
  • JS neni staticky typoaný jazyk — datové typy jsou pouze interní

Zápis

Zápis

  • ve stránce (skoro vždy) 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.

Hodnota null říká, že daná proměnná má prázdnou hodnotu, ale je definovaná.

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 ke konzoli (DevTools/konzole).

Metody console

Práce

Zjistěte jaké metody konzole nabízí a jak je používat.

Ří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

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

Bitové operátory

  • & — a
  • | — nebo
  • ^ — xor
  • ~ — negace
  • << — posun vlevo
  • >> — posun vpravo

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

Jednořádková podmínka

tzv. terná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?

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

DOM

DOM

  • document object model
  • abstrakce nad webovými stránkami
  • můžeme měnit prvky stránkami
  • prvek document
  • pouze JS ve webovém prohlížeči

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?

Algoritmizace

Práce

Implementujme následující algoritmy v JS:

  • maximum z pole
  • fiboancciho posloupnost
  • odstranění duplicit z pole

DOM

Práce

Implementujme stránku, ve které budeme z datového pole vytvářet HTML elementy.

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

Funkce

Math

Zpoždění

Opakování

DOM

Děkuji za pozornost!

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