Što je JavaScript i tvoj prvi skript

Upoznaj treći jezik weba i napiši svoj prvi skript koji razgovara s konzolom preglednika.

Tri jezika weba

Iz razine 1 znaš dva jezika:

HTML – kostur stranice (što je na njoj),
CSS – izgled (kako izgleda).

Treći i zadnji jezik je JavaScript – ponašanje (što se događa kad…). Kad klikneš ▶ na YouTubeu i video krene, kad online trgovina izračuna cijenu, kad igra vodi rezultat – to je sve JavaScript.

Gdje živi JavaScript

JavaScript živi u vlastitoj datoteci, baš kao CSS. Kažeš stranici o njemu tagom <script> – stavi ga na sam kraj <body>, odmah prije </body>:

  ...page content...

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

💡

Zašto na kraju? Preglednik čita stranicu odozgo prema dolje. Kad je skript na kraju, cijela stranica već postoji i skript može odmah s njom raditi.

Pokazat ću ti: tvoj prvi skript

U mapi my-web napravi datoteku script.js i u nju napiši:
```
console.log("Hi, this is your website!");
```
U index.html dodaj redak <script src="script.js"></script> odmah prije </body> i spremi obje datoteke.
Otvori stranicu u pregledniku i pritisni F12 (na Macu Cmd+Alt+I). Otvori se razvojni panel – klikni karticu Console.

Vidiš poruku u konzoli? Tvoj prvi JavaScript radi! 🎉

Konzola je tajna soba u pregledniku gdje programeri razgovaraju sa stranicom. Posjetitelji je nikad ne vide – samo je za tebe. console.log(...) znači “ispiši ovo u konzolu.” Koristit ćeš je stalno: najbolji je način da saznaš što se događa unutar skripta.

Konzola zna i računati

Pokušaj ovo upisati izravno u konzolu (pritisni Enter nakon svakog retka):

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

JavaScript je i kalkulator – zbraja brojeve i lijepi tekstove (zovu se stringovi, prepoznaš ih po navodnicima) jedan za drugim.

Sad si ti na redu 💪

Dodaj script.js na svaku stranicu svoje web stranice (baš kao što si jednom dodao style.css).
Neka skript ispiše naziv tvoje web stranice u konzolu i izračuna koliko sati je ostalo do ljetnih praznika – npr. console.log("Sati do praznika:", 48 * 24);.
Namjerno napravi grešku – obriši navodnik i spremi. Pogledaj kako greška izgleda u konzoli (crveni tekst s brojem retka). Zatim je popravi. To je važna navika: konzola će ti uvijek reći gdje je problem.

✅

Provjeri sam sebe: Kad otvoriš bilo koju stranicu svoje web stranice, tvoja poruka se pojavi u konzoli. Znaš otvoriti konzolu i kako izgleda greška. To je cijeli temelj – od sljedeće lekcije počinjemo raditi čarolije na stranici.

Što ćeš ponijeti iz ove lekcije

JavaScript = treći jezik weba: ponašanje. Piše se u datoteci script.js i povezuje tagom <script src="..."> prije </body>.
Konzola (F12) je tvoj prozor u skript: console.log() ispisuje stvari, greške se pojavljuju crveno s brojem retka.
Tekst u navodnicima je string, a stringovi se mogu lijepiti s +. Brojevi se mogu računati.