Co je JavaScript a první skript · Programuj z Marcinym

Poznáš třetí jazyk webu a napíšeš první skript, který se hlásí v konzoli prohlížeče.

Tři jazyky webu

Z Poziomy 1 znáš dva jazyky:

HTML – kostra stránky (co na ní je),
CSS – vzhled (jak to vypadá).

Třetí a poslední jazyk je JavaScript – chování (co se stane, když…). Když na YouTube klikneš na ▶ a video se spustí, když ti e-shop spočítá cenu, když hra počítá skóre – to všechno je JavaScript.

Kam se JavaScript píše

JavaScript bydlí ve vlastním souboru, stejně jako CSS. A stránce o něm řekneš značkou <script> – tu vlož úplně na konec <body>, těsně před </body>:

  ...obsah stránky...

  <script src="skript.js"></script>
</body>

💡

Proč na konec? Prohlížeč čte stránku shora dolů. Když je skript až na konci, celá stránka už existuje a skript s ní může hned pracovat.

Pokaż mi to: první skript

Ve složce muj-web vytvoř soubor skript.js a napiš do něj:
```
console.log("Ahoj, tady tvůj web!");
```
Do index.html přidej před </body> řádek <script src="skript.js"></script> a ulož oba soubory.
Otevři stránku v prohlížeči a zmáčkni F12 (na Macu Cmd+Alt+I). Otevře se panel pro vývojáře – klikni na záložku Console (Konzole).

Vidíš tam „Ahoj, tady tvůj web!”? Tvůj první JavaScript běží! 🎉

Konzole je tajná místnost prohlížeče, kde si programátoři povídají se stránkou. Návštěvník ji nevidí – je jen pro tebe. console.log(...) znamená „vypiš do konzole”. Budeš to používat pořád: je to nejlepší způsob, jak zjistit, co se ve skriptu děje.

Konzole umí i počítat

Zkus si přímo do konzole napsat (a Enter):

5 + 3
"Kuba" + " je " + "borec"
10 * 365

JavaScript je i kalkulačka – čísla sčítá a texty (říká se jim řetězce, poznáš je podle uvozovek) lepí za sebe.

Teraz ty 💪

Zapoj skript.js do všech stránek svého webu (stejně jako sis kdysi zapojil styl.css).
Nech skript vypsat do konzole název tvého webu a spočítat, kolik dní je do prázdnin – třeba console.log("Do prázdnin zbývá", 48 * 24, "hodin");.
Schválně udělej chybu – smaž uvozovku a ulož. Podívej se, jak chyba vypadá v konzoli (červený text s číslem řádku). Pak ji oprav. Tohle je důležitý trénink: konzole ti vždycky řekne, kde je problém.

✅

Kontrola: Po otevření kterékoli stránky tvého webu se v konzoli objeví tvůj vzkaz. Víš, jak otevřít konzoli a jak vypadá chyba. To je celý základ – od příští lekce začneme kouzlit na stránce.

Co si z téhle lekce odnést

JavaScript = třetí jazyk webu: chování. Píše se do souboru skript.js, zapojuje značkou <script src="..."> před </body>.
Konzole (F12) je tvoje okno do skriptu: console.log() vypisuje, chyby se ukazují červeně s číslem řádku.
Texty v uvozovkách jsou řetězce, dají se lepit +. Čísla se počítají.