JavaScript 4

45. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Co je to datový typ?
Co je to chromium?
K čemu slouží v seřazeném listu atribut type?
K čemu slouží meta tag?
Kdy se spustí kód napsaný v script?
Co je to JS? Proč je to skriptovací jazyk?

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í

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í selektová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 poslouchač
  • poslouchač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í queries

  • v podstatě zapisování CSS selektorů

Děkuji za pozornost!

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