Čo je JavaScript a tvoj prvý skript

Spoznaj tretí jazyk webu a napíš svoj prvý skript, ktorý hovorí s konzolou prehliadača.

Tri jazyky webu

Z Úrovne 1 poznáš dva jazyky:

HTML – kostra stránky (čo na nej je),
CSS – vzhľad (ako vyzerá).

Tretí a posledný jazyk je JavaScript – správanie (čo sa stane, keď…). Keď na YouTube klikneš na ▶ a video sa spustí, keď internetový obchod počíta cenu, keď hra počíta skóre – to všetko je JavaScript.

Kde JavaScript žije

JavaScript žije vo vlastnom súbore, rovnako ako CSS. Stránke o ňom povieš tagom <script> – umiestni ho úplne na koniec <body>, tesne pred </body>:

  ...page content...

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

💡

Prečo na konci? Prehliadač číta stránku zhora nadol. Keď je skript na konci, celá stránka už existuje a skript s ňou môže hneď pracovať.

Ukážem ti: tvoj prvý skript

V priečinku my-web vytvor súbor script.js a napíš do neho:
```
console.log("Hi, this is your website!");
```
Do index.html pridaj riadok <script src="script.js"></script> tesne pred </body> a ulož oba súbory.
Otvor stránku v prehliadači a stlač F12 (na Macu Cmd+Alt+I). Otvorí sa panel pre vývojárov – klikni na záložku Console.

Vidíš „Hi, this is your website!”? Tvoj prvý JavaScript beží! 🎉

Konzola je tajná miestnosť v prehliadači, kde programátori rozprávajú so stránkou. Návštevníci ju nikdy nevidia – je len pre teba. console.log(...) znamená „vypíš to do konzoly.” Budeš to používať stále: je to najlepší spôsob, ako zistiť, čo sa deje vo vnútri skriptu.

Konzola vie aj počítať

Skús to napísať priamo do konzoly (po každom riadku stlač Enter):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript je aj kalkulačka – sčítava čísla a lepí texty (volajú sa reťazce, poznáš ich podľa úvodzoviek) za sebou.

Teraz ty 💪

Pridaj script.js na každú stránku svojej webovej stránky (rovnako ako si kedysi pridal style.css).
Nech skript vypíše do konzoly názov tvojej webovej stránky a vypočíta, koľko hodín zostáva do letných prázdnin – napríklad console.log("Hours left until vacation:", 48 * 24);.
Úmyselne sprav chybu – zmaž úvodzovku a ulož. Pozri sa, ako chyba vyzerá v konzole (červený text s číslom riadku). Potom ju oprav. Toto je dôležitý zvyk: konzola ti vždy povie, kde je problém.

✅

Skontroluj sa: Keď otvoríš akúkoľvek stránku svojej webovej stránky, tvoja správa sa objaví v konzole. Vieš otvoriť konzolu a vieš, ako vyzerá chyba. To je celý základ – od ďalšej lekcie začneme robiť kúzla na stránke.

Čo si z tejto lekcie odnášaš

JavaScript = tretí jazyk webu: správanie. Píše sa do súboru script.js a prepája sa tagom <script src="..."> pred </body>.
Konzola (F12) je tvoje okno do skriptu: console.log() vypisuje veci, chyby sa zobrazia červeno s číslom riadku.
Text v úvodzovkách je reťazec a reťazce sa dajú lepiť pomocou +. S číslami sa dá počítať.