Základní konstrukce jazyka JavaScript
DOM (Document Object Model)
- Reprezentace HTML dokumentu jako stromové struktury
- Umožňuje přístup a manipulaci s elementy stránky
- Základní metody:
getElementById(), querySelector(), querySelectorAll()
// Výběr elementu
let nadpis = document.getElementById("nadpis");
// Změna obsahu
nadpis.innerHTML = "Nový text";
// Přidání třídy
nadpis.classList.add("aktivni");
Podmínky
if - základní podmínkaelse - alternativní větevelse if - další podmínkaswitch - více alternativ
if (vek >= 18) {
console.log("Jste dospělý");
} else if (vek >= 13) {
console.log("Jste teenager");
} else {
console.log("Jste dítě");
}
Časovače
setTimeout(funkce, ms) - provedení funkce po určité době (jednou)setInterval(funkce, ms) - opakované volání funkce v intervaluclearTimeout(id), clearInterval(id) - zrušení časovače
// Jednorázový časovač
let timer = setTimeout(function() {
alert("Čas vypršel!");
}, 5000);
// Opakovaný časovač
let interval = setInterval(function() {
console.log("Uplynula další vteřina");
}, 1000);
// Zrušení časovače
clearTimeout(timer);
Bootstrap
Grid systém
- 12sloupcový responzivní systém
- Kontejner → Řádky → Sloupce
- Třídy:
container, row, col-*
<div class="container">
<div class="row">
<div class="col-md-6">Sloupec 1</div>
<div class="col-md-6">Sloupec 2</div>
</div>
</div>
Breakpointy
xs - <576px (implicitní)sm - ≥576pxmd - ≥768pxlg - ≥992pxxl - ≥1200pxxxl - ≥1400px
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
/* Na mobilech: 12/12 sloupců (celá šířka) */
/* Na tabletech: 6/12 sloupců (polovina) */
/* Na noteboocích: 4/12 sloupců (jedna třetina) */
/* Na PC: 3/12 sloupců (čtvrtina) */
</div>
Základní komponenty Bootstrapu
- Reboot - normalizace stylů napříč prohlížeči
- Typografie - předdefinované styly pro nadpisy, odstavce
- Obrázky -
img-fluid (responzivní obrázky)
- Tabulky -
table, table-striped, table-bordered
- Tlačítka -
btn, btn-primary, btn-success
- Formuláře -
form-control, form-group, form-check
Tip: Bootstrap používá třídy k aplikování stylů. Stačí přidat správnou třídu k HTML elementu.