EDIT

2022/23

pripremila Marijana Polić Kuko

 Java Script
Inverz boje
Osnove programiranja u
JavaScriptu

pripremila Marijana Polić Kuko

 Java Script – Inverz boje
✗ Nakon što smo naučili osnovnu sintaksu if naredbe,
pokušat ćemo je primijeniti na bojama
✗ Kratko se podsjetimo sintakse

pripremila Marijana Polić Kuko

3
 Inverz boje
✗ Napravit ćemo funkciju koja prima boju, prepoznaje o
kojoj boji se radi, te nam vraća natrag inverz te boje

✗ Što je to inverz i kako ćemo ga napraviti?

pripremila Marijana Polić Kuko

4
 Inverz boje
✗ Prisjetimo se slike koju smo već radili:
✗ Inverz boje dobit ćemo tako da svaku boju
zamijenimo onom koja je potpuno suprotna

pripremila Marijana Polić Kuko

5
 Priprema okruženja za rad
✗ Nakon pripreme napišimo funkciju InverzBoje
✗ Funkcija će kao parametar primiti boju u heks
formatu
✗ Ako je ta boja bijela, ispisat ćemo poruku: „Funkcija
je primila bijelu boju.”

pripremila Marijana Polić Kuko

6
 Funkcija InverzBoje
✗ Naučili smo da funkcija može vraćati vrijednosti, pa
će ova naša vratiti suprotnu boju od bijele, a to je crna
✗ Rezultat ćemo spremiti u varijablu koja se naziva
rezultat
✗ Ispisat ćemo na konzolu vrijednost varijable rezultat

✗ Provjerimo kako se izvršava

pripremila Marijana Polić Kuko

7
 Funkcija InverzBoje

pripremila Marijana Polić Kuko

8
 Rezultat u konzoli

pripremila Marijana Polić Kuko

9
 ✗ Probajmo funkciji poslati crnu boju, da vidimo što će
sada ispisati

pripremila Marijana Polić Kuko

10
 ✗ Dakle, ako upišemo crnu boju, funkcija je mora
prepoznati, ispisati poruku i vratiti nam njen inverz, a
to je bijela boja

pripremila Marijana Polić Kuko

11
pripremila Marijana Polić Kuko
12
 ✗ Pošto znamo raditi s varijablama, zamijenimo heks
kodove s varijablama

pripremila Marijana Polić Kuko

13
 ✗ Dodajmo zelenu boju
✗ Ne morate znati kodove boja napamet
✗ Za to će nam pomoći Color picker
✗ https://www.w3schools.com/colors/colors_picker.asp

pripremila Marijana Polić Kuko

14
pripremila Marijana Polić Kuko
15
 ✗ Provjerimo rezultat
✗ Ponovno smo dobili undefined
✗ Naša funkcija ne može prepoznavati sve boje
✗ Pa ćemo napraviti da funkcija ako ne prepoznaje boju
vraća tu istu boju

pripremila Marijana Polić Kuko

16
pripremila Marijana Polić Kuko
17
pripremila Marijana Polić Kuko
18
 Java Script
Petlje i slika
✗ Otvorimo zadani predložak
✗ Naš zadatak je napraviti
inverz ove slike koristeći
funkciju koja nam suži za
inverz i postojeći kod

pripremila Marijana Polić Kuko

19
 1. korak
✗ Provjerimo kako radi petlja u petlji

pripremila Marijana Polić Kuko

20
 ✗ Ispišimo sadržaj varijable i
✗ Provjerimo rezultat u konzoli

pripremila Marijana Polić Kuko

21
 ✗ Napišimo drugu petlju unutar prve

pripremila Marijana Polić Kuko

22
 ✗ Spremimo promjene i provjerimo u konzoli

pripremila Marijana Polić Kuko

23
 Zašto nam treba petlja u
petlji?
✗ Pogledajmo postojeće elemente u našoj slici.

pripremila Marijana Polić Kuko

24
 ✗ Svaki redak je niz
✗ Slika je također niz

✗ Izbrisat ćemo ove petlje što smo napisali, i napraviti

nove

✗ Sa tipkom tab prelazimo na dio koda array i

mijenjamo ga sa slikaNiz

pripremila Marijana Polić Kuko

25
 ✗ Izbrišimo višak, i ispišimo svaki element ovoga niza

✗ Prije toga, prisjetimo se naredbe

console.table(slikaNiz)

pripremila Marijana Polić Kuko

26
 ✗ Provjerimo u konzoli
✗ Boje su nam raspoređene po redcima i stupcima

pripremila Marijana Polić Kuko

27
 ✗ Ako napravimo console.log(slikaNiz[i]) ispisat ćemo
svaki redak

pripremila Marijana Polić Kuko

28
 ✗ Nama je zadatak svaku od ovih boja invertirati
✗ To znači da nam treba još jedna petlja koja će proći
kroz svaki od ovih nizova

✗ Zato napravimo novu petlju

✗ Nova petlja s indeksom j prolazi kroz novi niz, a to je
niz slikaNiz[i]

pripremila Marijana Polić Kuko

29
 ✗ Provjerimo u konzoli

pripremila Marijana Polić Kuko

30
 ✗ Provjeri ispis, samo zadnji redak
✗ Sad moramo samo pretvoriti ove pojedinačne
elemente u inverznu boju
✗ console.log() naredbe na oba mjesta zakomentirati

pripremila Marijana Polić Kuko

31
 ✗ Da bi mogli napraviti inverz, moramo uzeti element
slikaNiz[i][j]
✗ Pozvati funkciju inverzBoje()

pripremila Marijana Polić Kuko

32
 ✗ Provjerimo
rezultat
✗ Napravili smo
inverz slike!

pripremila Marijana Polić Kuko

33