Tahák 📌

<h1>Můj web</h1>

Největší nadpis. Na stránce jen jednou – jako název knížky.

<h2>Kapitola</h2>

Menší nadpis. Existují až do <h6> (nejmenší).

<p>Ahoj, tohle je text.</p>

Odstavec obyčejného textu.

<strong>důležité</strong>

Zvýrazní text tučně.

<em>zajímavé</em>

Text kurzívou (nakloněný).

<a href="https://seznam.cz">Klikni</a>

Odkaz. Do href patří adresa, kam má vést.

<img src="pes.jpg" alt="Můj pes">

Obrázek. src = soubor s obrázkem, alt = popis, kdyby se nenačetl.

<ul>
  <li>první</li>
  <li>druhá</li>
</ul>

Seznam s puntíky. Každá položka je <li>.

<ol>
  <li>krok 1</li>
  <li>krok 2</li>
</ol>

Číslovaný seznam – čísla doplní prohlížeč sám.

<div class="karta">...</div>

Krabice na seskupení věcí, které patří k sobě. Jméno ve class si vymýšlíš sám(a).

<!-- poznámka pro mě -->

Komentář. Prohlížeč ho ignoruje, je jen pro tebe.

h1 {
  color: red;
}

Všechny nadpisy <h1> budou červené.

.karta {
  background: yellow;
}

Vše, co má class="karta", dostane žluté pozadí. Tečka = hledám podle class.

p {
  font-size: 20px;
}

Velikost písma odstavců. Větší číslo = větší písmo.

body {
  font-family: Arial;
}

Písmo pro celou stránku.

.karta {
  padding: 16px;
}

Vnitřní okraj – vycpávka mezi obsahem a okrajem krabice.

.karta {
  margin: 16px;
}

Vnější okraj – odstup od ostatních věcí okolo.

.karta {
  border: 2px solid black;
}

Rámeček: tloušťka, typ čáry a barva.

.karta {
  border-radius: 12px;
}

Zakulacené rohy. Čím větší číslo, tím kulatější.

.menu {
  display: flex;
  gap: 10px;
}

Věci uvnitř se seřadí vedle sebe s mezerou 10px. Kouzlo na menu!

img {
  width: 200px;
}

Šířka obrázku. Výšku si dopočítá sám, aby nebyl rozplácnutý.

const jmeno = 'Kuba';

Proměnná – krabička se jménem, do které si něco uložíš.

let body = 0;
body = body + 1;

let je krabička, kterou můžeš měnit. Tady přičítáme bod.

alert('Ahoj!');

Vyskočí okénko se zprávou. Dobré na první pokusy.

console.log('funguje');

Vypíše zprávu do konzole (F12) – tajné okno pro programátory.

document.querySelector('h1')

Najde na stránce první <h1>, abys s ním mohl(a) pracovat.

prvek.textContent = 'Nový text';

Vymění text uvnitř nalezeného prvku.

prvek.addEventListener('click', () => {
  alert('Kliknuto!');
});

Když někdo na prvek klikne, stane se to, co je uvnitř.

if (body > 10) {
  alert('Vyhráls!');
}

Podmínka: kód uvnitř se spustí, jen když platí to v závorce.

prvek.classList.toggle("tmavy");

Přidá class, když tam není – a odebere, když tam je. Přesně takhle funguje tmavý režim.

const r = await fetch(adresa);

Pošli požadavek na API a počkej (await) na odpověď.

const data = await r.json();

Převeď odpověď na objekt, se kterým umíš pracovat.

data.current_weather.temperature

Z objektu vytáhneš hodnotu tečkami – jako u obyčejného objektu.

await fetch('/zeptat-se', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ otazka }),
});

POST = pošli data NA server. Do body patří objekt převedený na text.

{ "mesto": "Brno", "teplota": 21 }

JSON – společný jazyk API. Texty v uvozovkách, čísla bez nich.

JSON.stringify(objekt)

Převeď objekt na JSON text (před odesláním).

JSON.parse(text)

Převeď JSON text zpátky na objekt (po přijetí).

process.env.AI_KLIC

Na serveru: přečti tajný klíč ze souboru .env. Klíče nikdy nepatří do prohlížeče!

cd muj-web

Přejdi do složky muj-web (cd = change directory, změň složku).

ls

Vypiš, co je v aktuální složce (na Windows: dir).

node server.js

Spusť soubor server.js pomocí Node.js.

npm install

Stáhni všechny balíčky, které projekt potřebuje.

git status

Ukaž, co se v projektu změnilo od posledního uložení.

git add .

Připrav všechny změny k uložení (tečka = všechno).

git commit -m "Přidal jsem menu"

Ulož změny do historie se zprávou, co jsi udělal(a).

git push

Odešli uložené změny na GitHub.