4

HTML a DOM

JavaScript je jazyk, který se především používá k rozpohybování webových stránek. My v tomto kurzu webové stránky vytvářet nebudeme, protože to je obsáhlé téma, které si zaslouží vlastní kurz. Můžeme ovšem propojenosti webu a JavaScriptu využít k tomu, abychom naším programům dodali grafické rozhraní.

Jazyk HTML

K tomu, abychom vytvořili grafické rozhraní pro náš program použijeme jazyk HTML (HyperText Markup Language). V tomto jazyce se bežně píší webové stránky. Není to však jazyk programovací, nábrž takzvaně značkovací. Není proto ani zdaleka tak složitý jako například jazyky Python nebo JavaScript. Nepopisuje se v něm, jak se má stránka chovat, nýbrž jak má vypadat, tedy kde mají být umístěny texty, obrázky, co má v které částí stránky být napsáno a tak dále. Webové stránky často vypadají velmi komplikovaně a sofistikovaně, ale nakonec jsou to pouhopouhé textové soubory psané právě v HTML. Jazyk HTML má relativně jednoduchou strukturu a ani pro úplného začátečníka není těžké se v něm zorientovat.

Naprosto základní stránku v HTML si vytvoříme takto:

  1. Někde na svém počítači si založte složku s názvem mypage a otevřete ji ve Visual Studiu.
  2. Uvnitř složky vytvoře textový soubor index.html. Ten bude obsahovat kód naší stránky v jazyce HTML.
  3. Do souboru vložte tento kód:

    <html>
      <body>
        <div id="mytitle">My Very First Webpage</div>
      </body>
    </html>
    
  4. Otevřete si v průzkumníku souborů složku s tímto souborem a otevřete si váš soubor index.html v prohlížeči Chrome.

Právě jste vytvořili nejjednodušší webovou stránku, jaká vůbec může existovat.

Značky a atributy

Stránka napsaná v jazyce HTML se skládá z takzvanýcb značek. V našem kousku kódu výše jsme viděli čtyři různí značky: html, head, body a div. Každá ze značek podává prohlížeči nějakou informaci o obsahu stránky.

Značka html
Uvnitř této značky se vždy nachází celá webová stránka.
Značka body
Všechno, co se má obrazit na stránce v prohlížeči, patří do značky body.
Značka div
Tato značka slouží k rozdělení obsahu stránky do logických celků. Tuto značku budeme používat ze všech nejvíc.
Značka script
Slouží k tomu, abychom do naší stránky mohli vložit JavaScriptový kód.

Každá značka může u sebe mít takzvané atributy, což jsou různé doplňující informace. K naší značce div jsme například přidali atribut id, který nám umožní s touto značkou později pracovat pomocí JavaScriptu.

HTML a JavaScript

Není žádný problém rozšířit naši stránku o další značky. Můžeme například hned za značku div přidat ještě jednu, tentokrát bez atributu id.

<html>
  <body>
    <div id="mytitle">My Very First Webpage</div>
    <div>My new DIV</div>
  </body>
</html>

Naším cílem ovšem není psát stránku v HTML, ale je vytvářet ji a měnit pomocí JavaScriptu.

Zobrazte naší stránku v prohlížeči Chrome a otevřete JavaScript konzoli. Zavoláním funkce document.querySelector můžeme získat jakoukoliv značku na naší stránce, pokud známe její id. Uložme si do proměnné značku s identifikátorem "mytitle"

> let element = document.querySelector('#mytitle')

Každá takto získaná značka (v JavaScriptu říkáme element) má mnoho vlastností, které můžeme měnit.

element.textContent

Nastaví text uvnitř elementu:

> element.textContent = 'New text'

Nyní můžeme náš JavaScript zapojit přímo do stránky, aby se spustit automaticky vždy, když se stránka načte. Stačí náš kód vložit mezi značky script jak jsme zvyklí.

<html>
  <body>
    <div id="mytitle">My Very First Webpage</div>
    <div>My new DIV</div>
  </body>

  <script>
    const element = document.querySelector('#mytitle');
    element.textContent = 'New text';
  </script>
</html>

Styly

Obsah elementu jsme měnili pomocí vlastnosti textContent. Vzhled elementu můžeme měnit pomocí takzvaných stylů.

element.style.color

Barva textu:

> element.style.color = 'orange'
element.style.border

Rámeček kolem elementu:

> element.style.border = '2px solid blue'
element.style.width, element.style.height

Výška a šířka elementu:

> element.style.width = '250px'
> element.style.height = '100px'

Pozice elementu

Kromě výšky a šířky si také můžeme hrát s pozicí elementu, což jsou styly left a top. Aby nám ale nastavení pozice fungovalo, musíme změnit pozicování elementu na takzvaně absolutní.

> element.style.position = 'absolute'
> element.style.top = '100px'
> element.style.left = '200px'

Obrázek na pozadí

Pomocí stylů můžeme elementu také nastavit obrázek na pozadí. Za tímto učelem si stáhněte následující obrázek mamuta a ulože jej do složky, ve které máme naši HTML stránku. Nyní můžeme psát

element.style.backgroundImage = 'url(mammoth.png)'

Cvičení

1

Prágl

Vytvořte webovou stránku, která obsahuje následující tři odstavce textu. Každý odstavec vložte do samostatného divu.

Praha

Praha (anglicky Pragmaticality, v Moravistánu Prágl nebo Cajzlograd, možná též varianta Zeislstadt, v Ostravštině potom Prdel, nebo Pragl pyčo) je město zhruba v prostředku té části České republiky, která už není Moravistánem. Mimo jiné je to i sídlo vlády, což jen trochu zmírňuje její ctižádost. Prahou protéká řeka Vltava. Hlavní složku místního ovzduší tvoří smog.

Praha je známá také tím, že se v ní vyskytuje nejvíc veřejných záchodků v celém Česku. Kromě pěti pražských veřejných záchodků jsou ještě dva v Olomouci a jeden v Bučovicích. Brňané močí do kašny na Zelném rynku, jejich snahy o zařazení barokní kašny Parnas do registru veřejných záchodků Česka ale Cajzli v Práglu soustavně hatí a vodu považují za pitnou.

Prvnímu divu nastavte atribut id na nadpis, druhému na uvod a třetímu na obsah

Vytvořte na stránce sekci pro kód, ve které pomocí JavaScriptu proveďte následující úkoly.

  1. Uložte si do proměnné nadpis element s id nadpis. Nastavte tomuto elementu

    • velikost písma fontSize na 40px.
    • tloušťku písma fontWeight na bold.
    • barvu písma color na cornflowerblue.
    • dolní rámeček borderBottom na 2px solid cornflowerblue.
    • dolní vnější okraj marginBottom na 30px.
  2. Uložte si do proměnné uvod element s id uvod. Nastavte tomuto elementu

    • pozadí background na lightgray.
    • vnitřní okraj padding na 20px.
    • styl fontu fontStyle na italic.
  3. Stáhněte si do počítače tento obrázek Prahy. Vložte jej do složku img uvnitř vašeho projektu.

    Uložte si do proměnné obsah element s id obsah. Nastavte tomuto elementu

    • obrázek pozadí backgroundImage na url(img/prague.jpg).
    • vnitřní okraj padding na 20px.
    • horní vnější okraj marginTop na 20px.
    • velikost obrázku backgroundSize na cover. Tím zajistíme, že obrázek vyplní celou šířku elementu.
  4. Uložte si do proměnné obsah element s id obsah. Nastavte tomuto elementu

    • pozadí background na lightgray.
    • vnitřní okraj padding na 20px.
    • horní vnější okraj marginTop na 20px.
    • dolní rámeček borderBottom na 2px solid cornflowerblue.
    • dolní vnější okraj marginBottom na 30px.
2

Mamut

Vytvořte si novou složku s novým projektem a otevřete si ji ve VS Code. Vyrobte v ní soubor index.html podle šablony, kterou již znáte.

Stáhněte si obrázek mamuta a nahrajte jej do složky img ve vašem projektu.

Unvitř těla stránky vytvořte div s id mamut. V JavaScriptu si uložte tento div do proměnné mamut.

  1. Nastavte mamutovi obrázek pozadí backgroundImage na url(img/mammoth.png).
  2. Nastavte mamutovi šířku width na 256px.
  3. Nastavte mamutovi výšku height na 256px.
  4. Nastavte mamutovi pozicování position na absolute. To nám umožní umístit si mamuta na přesné souřadnice.
  5. Posuňte mamuta kousek doprava tím, že mu nastavíte styl left na 100px.
  6. Posuňte mamuta kousek dolů tím, že mu nastavíte styl top na 200px.
3

Poslušný mamut

Pomocí funkce prompt se uživatele zeptejte nejdříve na x-ovou a poté na y-novou souřadnici mamuta. Umístěte mamuta na takto získané souřadnice.

4

Stádo mamutů

  1. Upravte předchozí cvičení a vytvořte na stránce čtyři mamuty, každého na jiné pozici na obrazovce.
  2. Použijte funkci Math.random a zařiďte, aby se všichni čtyři mamuti nacházeli na náhodných pozicích na stránce. Pokud chcete zařídit, aby vám mamuti nevylezli mimo stránku, zjistěte si rozměry okna prohlížeče. Šířku a výšku okna najdete v proměnných document.body.clientWidth a document.body.clientHeight