JavaScript – základy

Doplněný obsah — není z archivu podkladů, napsáno podle ŠVP. Vhodné ověřit u vyučujícího.

Co je JavaScript

Skriptovací (programovací) jazyk, který dotváří statické HTML stránky o dynamické chování – animace, reakce na akce uživatele, ověřování dat bez nutnosti odeslání na server
Na rozdíl od HTML (struktura) a CSS (vzhled) řeší chování stránky
Původně jazyk klientský – kód se vykonává přímo v prohlížeči uživatele (na rozdíl od PHP, které běží na serveru)
Nerozlišuje se u něj velikost písmen malá/velká má význam (case-sensitive)
Každý příkaz se obvykle ukončuje středníkem ;

Začlenění JavaScriptu do HTML stránky

Inline – zápis přímo do atributu HTML tagu, např. do onclick
```
<button onclick="alert('Ahoj!')">Klikni</button>
```
Interní (vnitřní) – kód vložený do stránky pomocí párového tagu <script> uvnitř <head> nebo <body>
```
<script>
  console.log("Stránka byla načtena");
</script>
```
Externí – kód uložen v samostatném souboru s příponou .js a připojen atributem src
```
<script src="skript.js"></script>
```
- Doporučený postup u větších projektů – oddělení obsahu (HTML) od chování (JS), možnost sdílet jeden soubor mezi více stránkami
- Tag <script> se z výkonnostních důvodů obvykle umisťuje na konec <body>, aby se nejprve načetl obsah stránky

Proměnné

Slouží k uložení hodnoty do paměti pod určitým jménem
Deklarace klíčovými slovy:
- let – proměnná, jejíž hodnotu lze později měnit
- const – konstanta, hodnotu po přiřazení nelze změnit
- var – starší způsob deklarace (dnes se nahrazuje let/const)
JavaScript je jazyk s dynamickým typováním – typ proměnné se neuvádí, odvozuje se automaticky od přiřazené hodnoty
```
let jmeno = "Jan";
let vek = 18;
const pi = 3.14;
let jePlnolety = true;
```

Podmínky

Umožňují větvit běh programu podle splnění podmínky

let vek = 17;

if (vek >= 18) {
  console.log("Jsi plnoletý");
} else if (vek >= 15) {
  console.log("Jsi mladistvý");
} else {
  console.log("Jsi dítě");
}

Porovnávací operátory: == / === (rovnost, === navíc kontroluje datový typ), != / !==, <, >, <=, >=
Logické operátory: && (a zároveň), || (nebo), ! (negace)

Cykly

for – cyklus s pevně daným počtem opakování

for (let i = 0; i < 5; i++) {
  console.log("Opakování číslo " + i);
}

while – cyklus, který se opakuje, dokud platí podmínka

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Funkce

Pojmenovaný blok kódu, který lze opakovaně volat, případně mu předat vstupní hodnoty (parametry) a vrátit výsledek (return)
```
function secti(a, b) {
  return a + b;
}

let vysledek = secti(2, 3); // 5
```
Moderní zápis pomocí tzv. šipkové funkce (arrow function)
```
const secti = (a, b) => a + b;
```

Práce s DOM

DOM (Document Object Model) – stromová struktura, kterou prohlížeč vytvoří z HTML dokumentu a se kterou může JavaScript pracovat (číst i měnit obsah stránky za běhu)
Základní metody pro výběr elementu:
- document.getElementById("id") – vybere prvek podle atributu id
- document.querySelector("selektor") – vybere první prvek odpovídající CSS selektoru

Úprava obsahu a vzhledu vybraného prvku

let nadpis = document.getElementById("nadpis");
nadpis.textContent = "Nový text";
nadpis.style.color = "red";

Reakce na události pomocí addEventListener

document.getElementById("tlacitko").addEventListener("click", function () {
  alert("Tlačítko bylo stisknuto");
});

Formuláře a validace v JavaScriptu

JavaScript se typicky používá k ověření (validaci) vstupních dat formuláře ještě před jejich odesláním na server – ušetří se tím zbytečný požadavek na server a uživatel dostane okamžitou zpětnou vazbu
Přístup k hodnotám prvků formuláře přes vlastnost value

Zabránění odeslání formuláře metodou preventDefault(), pokud data nejsou v pořádku

<form id="prihlaseni">
  <input type="text" id="email" placeholder="E-mail">
  <button type="submit">Odeslat</button>
</form>

<script>
  document.getElementById("prihlaseni").addEventListener("submit", function (event) {
    let email = document.getElementById("email").value;

    if (email === "") {
      alert("Vyplňte e-mail");
      event.preventDefault();
    }
  });
</script>

Typické kontroly: vyplnění povinného pole, formát e-mailu, minimální délka hesla, shoda hesla a jeho potvrzení

Praktické příklady

Validace formuláře před odesláním

Podrobnější příklad – formulář se dvěma poli, u kterých se před odesláním zkontroluje vyplnění i formát e-mailu. Pokud validace neprojde, odeslání se zastaví (event.preventDefault()) a uživateli se zobrazí chybová hláška přímo ve stránce (bez nutnosti odeslat formulář na server a čekat na odpověď).

<form id="registrace">
  <input type="text" id="jmeno" placeholder="Jméno">
  <input type="text" id="email" placeholder="E-mail">
  <button type="submit">Registrovat</button>
</form>
<p id="chyba" style="color: red;"></p>

<script>
  document.getElementById("registrace").addEventListener("submit", function (event) {
    let jmeno = document.getElementById("jmeno").value;
    let email = document.getElementById("email").value;
    let chybaEl = document.getElementById("chyba");

    // jednoduchá kontrola formátu e-mailu pomocí regulárního výrazu
    let emailJeValidni = /^\S+@\S+\.\S+$/.test(email);

    if (jmeno.trim() === "") {
      chybaEl.textContent = "Vyplňte prosím jméno.";
      event.preventDefault(); // zastaví odeslání formuláře na server
    } else if (!emailJeValidni) {
      chybaEl.textContent = "Zadejte platný e-mail.";
      event.preventDefault();
    } else {
      chybaEl.textContent = ""; // vše v pořádku, formulář se odešle
    }
  });
</script>

Manipulace s DOM po kliknutí na tlačítko

Po kliknutí na tlačítko se změní text i vzhled (barva pozadí) vybraného elementu.

<p id="stav">Světlo je vypnuté.</p>
<button id="prepinac">Přepnout světlo</button>

<script>
  let zapnuto = false;

  document.getElementById("prepinac").addEventListener("click", function () {
    let stavEl = document.getElementById("stav");
    zapnuto = !zapnuto; // negace aktuálního stavu

    if (zapnuto) {
      stavEl.textContent = "Světlo je zapnuté.";
      stavEl.style.backgroundColor = "yellow";
    } else {
      stavEl.textContent = "Světlo je vypnuté.";
      stavEl.style.backgroundColor = "transparent";
    }
  });
</script>

Práce s polem – filtrování položek

Pole objektů lze pomocí metody filter() snadno prohledávat nebo filtrovat podle zadané podmínky, aniž by bylo nutné psát vlastní cyklus.

// pole objektů - seznam produktů
const produkty = [
  { nazev: "Klávesnice", cena: 450 },
  { nazev: "Myš", cena: 250 },
  { nazev: "Monitor", cena: 3200 },
  { nazev: "Sluchátka", cena: 890 },
];

// vyfiltrujeme jen produkty levnější než 1000 Kč
const levneProdukty = produkty.filter(function (produkt) {
  return produkt.cena < 1000;
});

console.log(levneProdukty);
// [{nazev: "Klávesnice", cena: 450}, {nazev: "Myš", cena: 250}, {nazev: "Sluchátka", cena: 890}]

// stejný zápis pomocí šipkové funkce
const levneProdukty2 = produkty.filter((produkt) => produkt.cena < 1000);

Fetch API – spolupráce JavaScriptu a PHP

Fetch API umožňuje z JavaScriptu na klientovi poslat požadavek na server (např. na PHP skript) a se získanými daty dále pracovat, aniž by se musela znovu načítat celá stránka. JavaScript tak běží v prohlížeči uživatele, zatímco PHP skript, na který se dotazuje, běží na serveru.

<?php
// data.php - serverový skript, který vrátí data ve formátu JSON
header("Content-Type: application/json");

$udaje = [
    "jmeno" => "Jana",
    "pocetBodu" => 87,
];

echo json_encode($udaje);
?>

// skript.js - načtení dat ze serveru pomocí fetch()
fetch("data.php")
  .then((odpoved) => odpoved.json()) // převod odpovědi na JavaScript objekt
  .then((data) => {
    console.log("Jméno: " + data.jmeno);
    console.log("Počet bodů: " + data.pocetBodu);
    document.getElementById("vysledek").textContent =
      data.jmeno + " má " + data.pocetBodu + " bodů.";
  })
  .catch((chyba) => {
    console.log("Nastala chyba při načítání dat: " + chyba);
  });