Otisni knjiguOtisni knjigu

Uvod u JavaScript

Sjedište: CARNET Loomen LMS
E-kolegij: Skriptni jezici i web programiranje 4TR2
Knjiga: Uvod u JavaScript
Otisnuo/la: Gost (anonimni korisnik)
Datum: četvrtak, 30. travnja 2026., 14:45

Sadržaj

1. JavaScript

JavaScript...

  • je jedan od najlakših, svestranih i najučinkovitijih jezika koji se rabi za proširenje funkcionalnosti na web stranicama.
  • je skriptni jezik za izradu dinamičkih mrežnih stranica, koje omogućuju međudjelovanje s korisnikom, upravljanje web preglednikom i sl.
  • Izvodi se na računalu korisnika (client sided), odnosno interpretira se s pomoću mrežnog preglednika i tako manje opterećuje propusnost internetske veze i smanjuje količinu preuzimanja podataka s mrežnog poslužitelja.
  • Skripte JavaScripta ugrađuju se u HTML ili pozivaju iz HTML-a.
  • Utemeljen je na događajima, što znači da se različiti dijelovi koda izvršavaju kao odgovor na korisnikov klik na gumb ili prelazak mišem preko dijela stranice. Čini korisničko iskustvo s mrežnom stranicom zabavnijim

  • Uloga HTML-a je mrežnoj stranici osigurati strukturu (sadržaj)
  • CSS toj strukturi dodaje estetski izgled (prezentaciju)
  • JavaScript omogućuje dodavanje dinamičkih sadržaja (ponašanje)

Upotreba JavaScripta na web stranici, uzrokuje njegovo izvođenje u pregledniku.
JavaScript može:
  • prikazati informacije vezane uz vrijeme
  • prepoznati vrstu korisnikova preglednika
  • potvrditi (validirati) podatke iz  formi
  • stvoriti cookiee
  • dinamički mijenjati sadržaj stranice…



  • Za pronalaženje HTML elemenata (njihovo „dohvaćanje“ u skriptama) koristimo se metodama:

  • Za promjenu HTML elemenata koristimo se metodama:

  • Neke metode window objekta:

JavaScript možemo rabiti i za pomicanje elemenata u prozoru preglednika poput (<img/>, <div> i sl.) s pomoću funkcija, a omogućuje nam i izradu kompleksnih animacija poput vatrometa, efekata izbljeđivanja i sl.


2. Ugradnja JS u HTML

  • Skripta se može umetnuti bilo gdje na stranici. 

  • Skriptu pišemo u HTML unutar oznake <script>…</script> i postavljamo ju na tri načina.

Napomena: HTML i CSS kodovi navedenih primjera nalaze se u prilogu vježbe. Potrebno je dodati samo JS kod.

  1. način: Unutar oznake HTML-a <head>… </head>



Izvođenjem prethodnog HTML dokumenta i njemu pripadnog CSS-a prvo nam se u pregledniku prikazuje alert box zbog izvođenja skripte, dok se stranica html dokumenta ne prikazuje (renderira) dok god ne kliknemo na OK. Nakon toga prikaže se mrežna stranica.

2. način: Na dnu dokumenta prije zatvaranja oznake <body>

Prvo se prikazuje se mrežna stranica a onda se otvori alert box.


3. način: Vanjska skripta koju pozivamo na dnu dokumenta prije zatvaranja oznake <body>



Napomena: HTML i CSS kodovi navedenih primjera nalaze se u prilogu vježbe.

Kada preglednik renderira HTML stranicu i naiđe na <script>  oznaku prebaci se u JavaScript skriptu i izvršava kod iz nje. Nakon izvršenja koda skripte preglednik nastavlja s renderiranjem ostatka stranice. Zato je najbolja opcija pozvati skriptu na kraj <body> oznake tako da se korisnik „zabavi” proučavanjem sadržaja iz HTML - a dok se učita skripta.

JavaScript može prikazati podatke na različite načine:

  1. Ispis u alert box, upotrebom window.alert() (isto čini i funkcija alert())
  2. Ispis na stranicu preglednika HTML dokumenta upotrebom document.write() 
  3. Ispis  u html element upotrebom inner.html
  4. Ispis u konzolu preglednika upotrebom console.log() - korisno za razvojne programere.


3. Zadatak 1

  • U dokumentima kreirajte mapu JavaScriptUvod u koju ćete pohranjivati datoteke. Kreirajte dokumente index.html i style.css te pokušajte ugraditi skriptu koji će u alert boxu korisniku ispisati Započinjem s učenjem JavaScripta na sva tri ranije navedena načina.
  • HTML dokument indeks.html strukturirajte na sljedeći način:
  • Unutar oznake body neka se u <head>…</head> nalazi naslov Učimo JavaScript razine <h1>, unutar <main> …</main> neka se nalaze informacije što sve može JavaScript u vidu nenumerirane liste, a u <footer>… <footer> postavite <p>Izradio/la ime prezime </p>.
  • Stiliziranje vanjskim CSS-om napravite prema uputama:
  • Odaberite dva fonta, jedan serif i jedan sans-serif (https://fonts.google.com/) i ugradite ih u prvi redak CSS dokumenta. Npr. @import url(‘https://fonts.googleapis.com/ css?family=Calistoga|Public+Sans&display=swap’);
  • Za naslov <h1> birajte font tipa serif u veličini 35 px i postavite ga na stranici centrirano isključivo uporabom CSS-a. Npr. font-family: ‘Calistoga’, cursive;
  • Za ostale sadržaje u body{ } birajte font sans-serif, veličine 25px, visina retka (line height) 35px , (Npr. font-family: ‘Public Sans’, sans-serif;)
  • Boju pozadine i teksta odaberite sami, u CSS-u se koristite zapisom boje u HEX obliku #C0A078.

4. Sintaksa JavaScripta

  • Sintaksa je skup pravila za izradu (pisanje) programskog koda.
  • Naredbe JavaScript sastoje se od:
  1. vrijednosti
  2. operatora
  3. izraza
  4. ključnih riječi
  • komentara (komentar u jednom retku se u JS-u piše iza //, a kroz više redaka unutar /* … */).
  • Završetak naredbe u JS-u označavamo uporabom znaka točka zarez - ;.

Vrijednosti – values mogu biti:

  1. literali – fiksne vrijednosti (brojevi ili stringovi) - Stringove možemo pisati bilo unutar ‘…’ ili “…”.
  2. varijable – u deklaraciji im prethodi ključna riječ var ili let,
  • let ima doseg samo u određenom bloku, dok var ima doseg u cijeloj funkciji.


Ime varijable

  • Identifikator varijable (ime) u JavaScriptu može započinjati slovom, _ ili $. JavaScript je osjetljiv na mala i velika slova (case sensitive).
  • Često nam treba više riječi kako bismo detaljnije (sugestivnije) opisali varijablu, a to možemo činiti na dva načina:
  • umetanjem znaka podcrtavanja(_), npr. prvi_broj ili camel caseom, npr. prviBroj


Cilj upotrebe JavaScripta je interakcija s korisnicima, prikupljanje podataka i ispis rezultata.

Primjer 1 (interakcija s korisnicima):


Primjer 2 (prikupljanje podataka i ispis rezultata):


Ključne riječi



Operatori


Funkcije


Primjer 3:

 


https://cheatography.com/davechild/cheat-sheets/javascript/

5. Grananje u JS

  • Grananje u  JavaScriptu ima istu sintaksu kao i u ostalim programskim jezicima.


Primjer 1: (IF)


Primjer 2: (IF ELSE)



Primjer 3: (IF ELSE IF ELSE)



Primjer 4: (SWITCH CASE)


6. Zadatak 2


  • Izraditi valutni konverter tako da korisnik unese iznos u kunama koji želi zamijeniti preko prompta, a na zaslonu mu se treba ispisati koliko eura, funti i dolara može dobiti za taj iznos.
  • Koristiti srednji tečaj HNB-a na današnji dan.