EDIT

2022/23

pripremila Marijana Polić Kuko

 2. Podaci i računala
Osnove programiranja u
JavaScriptu

pripremila Marijana Polić Kuko

 VSC
✗ https://code.visualstudio.com/download

✗ Na računalu napraviti mapu EDIT

✗ U toj mapi napraviti podmapu 1. zadatak - Pozdrav
✗ U njoj izraditi mapu i u njoj dvije datoteke:
✗ pozdrav.html datoteku
✗ main.js datoteku
✗ Otvoriti ih u pregledniku Google Chrome
✗ Otvoriti okvir Developer Tools (desni klik, Inspect), karticu Console

pripremila Marijana Polić Kuko

 ✗ naredba Console
✗ npr. console.log(„Dobar dan”);

✗ naredba Alert
✗ npr. alert(„Danas je subota”);

✗ neki aritmetički izraz

✗ npr. 5+3

pripremila Marijana Polić Kuko

4
 Varijable

Služe kako bi u računalu privremeno spremili neki

podatak.
Svaka varijabla ima ime.
Varijablu možemo usporediti sa kutijom u koju ćemo nešto
spremiti, pa to poslije izvaditi i spremiti nešto drugo.

pripremila Marijana Polić Kuko

5
 Deklaracija varijabli
✗ Naredbama var ili let

pripremila Marijana Polić Kuko

6
 Pravila za nazive varijabli
✗ ne smiju sadržavati razmak niti minus – umjesto toga
koristiti kombinaciju malih i velikih slova, _ za
povezivanje
✗ imena ne smiju početi brojem – brojevi mogu biti u
ostatku imena
✗ PREPORUKA: koristiti smislene nazive za varijablu

pripremila Marijana Polić Kuko

7
 JavaScript – tipovi podataka
✗ Pet osnovnih tipova
vrijednosti:
✗ string ✗ tekst
✗ number ✗ brojčana
✗ boolean ✗ logička vrijednost (true ili false)
✗ undefined ✗ početna vrijednost (dok se ne postavi neka druga)
✗ null ✗ ne sadrži nikakvu vrijednost (varijabla je namjerno
prazna)

pripremila Marijana Polić Kuko

8
 ✗ Deklaracija varijabli – napisati varijablu bez ikakve
vrijednosti
✗ Inicijalizacija varijable – dodijelili smo joj vrijednost

✗ (deklaracija i inicijalizacija mogu biti u istoj naredbi)

✗ Varijabla se mijenja – samo navodimo ime, znak za

operator = i novu vrijednost

pripremila Marijana Polić Kuko

9
 JavaScript – konstante
✗ Konstante ne smiju mijenjati svoju vrijednost
✗ Konstante odmah treba inicijalizirati.

pripremila Marijana Polić Kuko

10
 ✗ JavaScript koristi dinamičke tipove varijabli:
u toku programa može mijenjati tip varijable.

Ovaj pristup ima prednosti i nedostatke.

pripremila Marijana Polić Kuko

11
 ✗ U mapi EDIT napraviti podmapu 2. zadatak – Tipovi
varijabli
✗ U njoj izraditi dvije datoteke:
✗ TipoviPodataka.html datoteku
✗ main.js datoteku
✗ Otvoriti ih u pregledniku Google Chrome
✗ Otvoriti okvir Developer Tools (desni klik, Inspect),
karticu Console

pripremila Marijana Polić Kuko

12
 .js datoteka
.html datoteka

pripremila Marijana Polić Kuko

13
 Pregled u konzoli

pripremila Marijana Polić Kuko

14
 Tema
Razvoj inteligentnih web-
aplikacija

pripremila Marijana Polić Kuko

 Izraditi ćemo stranicu koja će
razlikovati voće i povrće.
✗ Kako se predstavljaju slike kao podaci?
✗ Što je podatak, što je informacija, a što znanje?
✗ Kako pogreška u podacima mijenja informaciju a
time i znanje?
✗ Kad je program inteligentan?

✗ Biti ćete učitelji svog programa.

pripremila Marijana Polić Kuko

 Koraci u razvoju aplikacije:
✗ Uočiti problem (promatranjem)
✗ Ideja
✗ Plan i istraživanje
✗ Osmisliti aplikaciju i izgled
✗ Programiranje
✗ Testiranje

pripremila Marijana Polić Kuko

17
 Primjer kojeg radimo:
✗ Program treba odlučiti je li banana dovoljno zrela:
aplikacija temeljem slike prepoznaje je li banana
dovoljno zrela ili je prezrela.

pripremila Marijana Polić Kuko

18
 Predstavljanje podataka
računalu
✗ Kako se predstavljaju slike kao podaci?

pripremila Marijana Polić Kuko

19
 Ljudi komuniciraju Računala koriste dva simbola za
✗ govorom, komunikaciju 0 i 1.To može biti:
✗ simbolima - upaljena/ugašena žarulja
- istina/laž
- /
Po volji se dogovaramo što će značiti 0 a što
1.

pripremila Marijana Polić Kuko

20
 ✗ Kodiranje – postupak pretvaranja ✗ Dekodiranje – postupak
iz nama razumljivog jezika u jezik pretvaranja iz jezika računala u
računala nama razumljiv jezik

Različite oblike ljudske

komunikacije možemo kodirati
pomoću 0 i 1 t. pomoću binarnih
znamenki.

pripremila Marijana Polić Kuko

21
 I slike možemo predstaviti
pomoću 0 i 1.
Na koji način ovo iskodirati?

pripremila Marijana Polić Kuko

22
 JavaScript
Prikaz slika

pripremila Marijana Polić Kuko

 Kako ovu sliku spremiti u
računalo?
✗ 1. Odrediti rezoluciju slike tj. koliko piksela ćemo
koristiti za rezoluciju slike.
✗ Odlučiti ćemo se za malu rezoluciju: 5 x 5.

pripremila Marijana Polić Kuko

24
 Neka polja su
većinom crna,
a neka polja
su većinom
bijela.

pripremila Marijana Polić Kuko

25
 Većinom crna ćemo
označiti sa 1, a
većinom bijela sa 0.

pripremila Marijana Polić Kuko

26
 Nizovi
✗ Poseban tip varijable koji može sadržavati više vrijednosti.
✗ U praksi su to podaci istog tipa.
✗ Indeks je redni broj pod kojim je taj podatak spremljen u nizu.
✗ Počinje od 0.

pripremila Marijana Polić Kuko

27
 Dodavanje novog elementa u niz:
✗ metoda push

Uklanjanje zadnjeg elementa iz niza:

✗ metoda pop

Mijenjanje elementa niza:

✗ pristupimo pomoću indeksa i promijenimo vrijednost

Duljina niza:
✗ svojstvo lenght

pripremila Marijana Polić Kuko

28
 ✗ U mapi EDIT napraviti podmapu 3. zadatak – Nizovi
✗ U njoj izraditi dvije datoteke:
✗ nizovi.html datoteku
✗ main.js datoteku
✗ Otvoriti ih u pregledniku Google Chrome
✗ Otvoriti okvir Developer Tools (desni klik, Inspect), karticu Console

pripremila Marijana Polić Kuko

29
 .js datoteka
.html datoteka

pripremila Marijana Polić Kuko

30
pripremila Marijana Polić Kuko
31