JavaScript

WBA


Bc. Matěj Cajthaml — SSPŠ

©

Opakování PVA

  • datový typ
    • číslo, typy čísel
    • char, string
    • pole, listy
    • objekty
  • proměnná

JavaScript

JavaScript

  • = dále také JS
  • skriptovací jazyk
  • vytvořen pro interakci na webových stránkách
  • např. při kliku na element se přidá další prvek

Skriptovací jazyk je jazyk, který je určen především k úprave již existujícího systému. JS je závislý na webových stránkách / prohlížeči.

Moderní JS již není závislý na prohlížeči a proto se mu dá říkat programovací jazyk. Pro nás je ale toto pojmenování nepřesné — používáme ho pro původní učely.

Historie JS

  • více jak 20 let starý jazyk
  • rychlý vývoj
  • velmi špatný začátek — problémy se valí do dnes
    • změnil se důvod existence
  • pletení s jménem programovacího jazyka Java
    • marketingový tah
Většina problému moderního JS stojí na zpětné kompatibilitě verzí. V dnešní době jsou tyto věci zastaralé a my se je nebudeme učit.

Rozdíly oproti jiným jazykům

  • při psaní JS je potřeba přemýšlet jinak
  • např. proměnným v JS nenastavujeme datové typy
  • data si můžeme ukládat jak chceme a je potřeba je často kontrolovat

JavaScript

  • vnitřně používá datové typy (nelze nastavit)
    • číslo (i s plovoucí čárkou)
    • text (string) — "text"
    • pole
    • funkce
    • objekt

Kód JS zapisujeme do speciálního tagu script v HTML. Tento tag vkládáme vždy jako poslední prvek tagu body.

Proč?

První verze (tj. script na konci body) je jediné správné odevzdání v úkolech. V ZP musí být JS ve vlastním souboru.

Na co se vám vůbec komentáře hodí?

Konzole

  • pracuje se s konzolí
  • jako v jiných jazycích
  • konzoli nalezneme v DevTools
JS je jedno-vláknový jazyk a zpracovává se sekvenčně. Tedy, když dáme kód do tagu script, zavolá se ihned, jak se k němu jádro prohlížeče dostane.
Můžeme však v kódu zachytit událost a čekat do nějaké doby na zavolání jiného kódu.
V konzoli zmíněné minulou hodinu se budou například ukazovat i chyby, které nastaly při spuštění našeho JS kódu.
V konzoli v DevTools můžeme zapisovat JS kód stejně jako v HTML.
Každý příkaz v JS končí středníkem (;). Tyto středníky však nejsou interpretátorem kontrolovány — často stačí nová řádka.
Klíčové slovo je slovo, které si zarezervoval jazyk ke svému využítí. Takové jméno již nesmíme využívat jako např. jméno proměnné.

Proměnné

Proměnné

  • způsob ukládání dat v kódu
  • ukládají se do operační paměti
  • existují dva (případně tři) typy proměnných v JS
  • vždy musíme definovat:
    • typ proměnné
    • jméno
  • deklarace (pouze jednou) a existují v aktuálním bloku
  • určení hodnoty při deklaraci
  • přenastavení hodnoty

Normální proměnné

  • klíčové slovo let
  • její hodnota se může v průběhu programu měnit

Konstanty

  • klíčové slovo const
  • její hodnota je (musí být) nastavena při deklaraci
  • její hodnotu poté nemůžeme měnit (chyba)
Jména proměnných bez výjimek píšeme vždy v anglickém jazyce a používáme konvenci camelCase či obdobu.

Když v JS nastane chyba v bloku, již se v daném bloku neprovede žádný jiný příkaz.

Čím se liší proměnná a konstanta? Proč je využíváme?

Hodnota undefined

  • automaticky se nastaví proměnné tehdy, když jí nenastavíme hodnotu
  • znamená nedefinováno
  • můžeme nastavit sami a později kontrolovat

Můžete definovat proměnnou s jménem undefined?

Práce s hodnotama

Boolean hodnoty

  • určují pravdu (true) či nepravdu (false)
  • používají se na různé vyhodnocování výrazů
  • matematická logika
  • binární soustava
  • např. (true OR false) AND NOT(false) = ?
  • AND = &&
  • OR = ||
  • NOT = !

String hodnoty

  • textové hodnoty
  • spojování pomocí +
  • délka pomocí .length
  • znak na k-té pozici pomocí .charAt(k)
  • zda obsahuje jiný text .includes(string)

String hodnoty

  • .toUpperCase() — převede na velké písmena (vrací nový string)
  • .toLowerCase() — převede na malé písmena (vrací nový string)
  • == — porovná zda jsou všechny písmena stringu exaktní (vrací boolean hodnotu)
  • != — porovná zda je alespoň jedno písmeno stringu nestejné (vrací boolean hodnotu)

Číselné hodnoty

  • + — sčítání
  • - — odečítání
  • * — násobení
  • / — dělení
  • == — rovná se
  • < — menší než
  • > — větší než
  • >= — větší nebo rovno
  • <= — menší nebo rovno

Přemýšlíme

  • můžeme násobit celé číslo s desetinným číslem?
  • můžeme dělit celé číslo nulou?
  • můžeme dělit desetinné číslo nulou?
  • můžeme dělit celé číslo desetinným číslem?
  • můžeme porovnávat desetinné číslo s celým číslem?

Větvení

  • křižovatka
  • rozděluje skript na více možných větví
  • nejčastěji:
    • podmínka
    • cykly
    • přepínače

Podmínka

  • označujeme blok pomocí if
  • příkazy v bloku se budou volat jen tehdy, když bude jeho podmínka pravdivá — true
  • pokud neplatí, blok se přeskočí
  • můžeme definovat else a else-if větev

Dokončete

Práce

Jaké porovnání hodnot známe v JS?

Aktuální porovnání

  • aktuální porovnání (==) je tzv. nestriktní
  • porovnává hodnoty, převedené na číslo
  • např. "312" == 312 je pravda

Striktní porovnání

  • === a !==
  • před porovnáním nejsou strany převedy na číslo
  • kontrolují se přesně dle datového typu

Proč není potřeba striktní porovnání pro <=, >=, >, <?

Používá přepínač (switch) striktní porovnání?

Datové struktury

Datové struktury

  • způsob uchovávání dat v programu
  • většinou více hodnot a nějaké určité řazení
  • nejjednoduší: pole, list, mapa, objekty, ...
  • pokročilejší: haldy, stromy, ...

Pole

  • reálně se jedná o list — jaký je mezi nimi rozdíl?
  • indexujeme od 0 — každá přidáná hodnota má své číslo
  • do pole můžeme vkládat jakékoliv hodnoty, další pole, ...
  • pomocí [i] přistupujeme k hodnotě na i-tém indexu.

Zkuste tyto pole vypsat do konzole.

Máme pole textových hodnot. Chceme odstranit z pole první výskyt hodnoty 302M, jak to uděláme?

Cykly

Cykly

  • způsob opakování nějaké části bloku kódu
  • (pro nás) čtyři typy
    • while
    • for
    • for..in
    • for..of
  • break — ukončení cyklu
  • continue — přeskočení průběhu a návrat k cyklu

while

  • dokud platí podmínka (true hodnota), bude se daný blok vykonávat

for..in

  • projíždí indexy jednotlivých věcí uvnitř pole / objektu

for..of

  • projíždí jednotlivé hodnoty uvnitř pole

for

  • projíždí hodnoty dle specifikací

Objekty

  • způsob ukládaní dat
  • velmi podobné např. slovníkům (Dictionary) v C#
  • soubor dat, které jsou vždy pojmenované textovou hodnotou
  • k jednodlivým hodnotám přistupujeme pomocí indexu nebo .

Jak smažeme z objektu hodnotu?

Nestriktní porovnání převádí strany na čísla, na jaké číslo se ale převede objekt? Např. { name: "Yoko", age: 3 }

Funkce

  • z matematiky — vstup a výstup
  • v programování nemusí být výstup
  • krabička, kterou zavoláme a ona něco provede
  • funkce se ukládají do proměnných, které voláme pomocí ()
  • function, return

Matematické funkce

Práce

Zjistěte, jaké a jak můžeme používat matematické funkce, které jsou připravené v JS.

Co je to JS? Proč je to skriptovací jazyk?

Document Object Model

Document Object Model

  • = DOM
  • způsob modifikace HTML a CSS z JS
  • abstrakce jak jednoduše měnit definice stránek
  • obsahuje všechny tagy, atributy, hodnoty a i design
  • když mu něco změníme, změní se i stránka

Globální objekty

  • v základu nám dává DOM k dispozici několik objektů
  • objekty obsahují základy stránek a jsou globální
  • document — dokument stránky
  • window — celé okno

Selektování hodnot

  • nejčastější práce s DOMem
  • několik způsobů získávání hodnot
  • selektujeme:
    • jeden element
    • pole elementů
  • dle různých pravidel

Selektování dle identifikátoru

  • jedna hodnota — proč?

Selektování dle tagu

Selektování dle třídy

Co kdybychom chtěli získat děti (např. dle tagu) z rodiče, o kterém víme jen jeho identifikátor?

Metody na selektování je možné volat i na prvcích elementů (ne jenom document).

Komplexní selektování

Elementy

Element

  • reprezentuje jeden element/tag na stránce
  • ukládá si veškeré informace o něm jako objekt
  • innerText — vnitřní text elementu
  • innerHTML — HTML bez samotného tagu
  • style — objekt kde můžeme nastavovat CSS styly
  • classList — pole všech nastavených tříd

Komplexní nastavování

Není cílem si pamatovat veškeré vlastnosti z elementu, je důležité znát ty základní.

Vytváření elementů

  • při vytváření musíme vždy určit tag, který bude použit
  • přidáváme pomocí metody .appendChild na jakémkoliv jiném elementu

Jak smažeme element z DOMu?

Události

  • většina věcí v JS spolu komunikuje pomoci události
  • událost nám zachycuje co se kde stalo s různými informacemi
  • např. kliknutí, najetí, zadání do inputu, ...

Zachycení

  • pro zachycení události musíme přidat na prvek posluchač
  • posluchači vždy nastavujeme na jakou reakci bude reagovat a jakým kodem (tj. funkci)
  • funkce má jeden parametr, event, která obsahuje informace o události

Zpoždění

  • zpozdíme kód (funkci) o definované milisekundy

Opakování

  • funkce se bude periodicky volat po definovaných milisekundách

Jak opakování vypneme?

Selektování pomocí query selektorů

  • v podstatě zapisování CSS selektorů

Prvky formuláře

  • každý prvek formuláře je reprezentován vlastním Elementem v DOMu
  • každý prvek (resp. jeho typ) má různé vlastnosti, díky kterým můžeme získat vypsané hodnoty
  • nejčastěji: value, defaultValue, checked, multiple, ..
  • tyto hodnoty můžeme číst i upravovat
  • na prvcích můžeme poslouchat různé události
  • dokumentace

Na co by se nám práce s formuláři pomocí DOM mohla hodit?

Formulář

  • formulář má jako prvek DOM k dispozici funkce na více
  • .submit() — odešle formulář
  • .reset() — resetuje formulář

Děkuji za pozornost!

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