Tipovi podataka jedan su od temeljnih pojmova u JavaScriptu s kojima ćete se susretati u svakom programu koji napišete. Zamislite tipove podataka kao sustav arhiviranja koji su koristili drevni knjižničari u Aleksandriji – imali su posebna mjesta za svitke s poezijom, matematikom i povijesnim zapisima. JavaScript organizira informacije na sličan način, s različitim kategorijama za različite vrste podataka.
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Vaša avantura s JavaScript tipovima podataka
section Osnove
Varijable i Konstante: 5: You
Sintaksa deklaracije: 4: You
Koncepti dodjele: 5: You
section Glavni Tipovi
Brojevi i Matematika: 4: You
Nizovi i Tekst: 5: You
Booleovi i Logika: 4: You
section Primjena Znanja
Pretvaranje tipova: 4: You
Primjeri iz stvarnog svijeta: 5: You
Najbolje prakse: 5: You
```
Tipovi podataka su jedan od temeljnih pojmova u JavaScriptu koje ćete susresti u svakom programu koji napišete. Zamislite tipove podataka poput sustava za arhiviranje kojeg su koristili drevni knjižničari u Aleksandriji – imali su posebna mjesta za svitke koji su sadržavali poeziju, matematiku i povijesne zapise. JavaScript organizira informacije na sličan način s različitim kategorijama za različite vrste podataka.
U ovoj lekciji istražit ćemo osnovne tipove podataka koji omogućuju rad JavaScripta. Naučit ćete kako raditi s brojevima, tekstom, vrijednostima istinito/netočno i razumjeti zašto je odabir pravog tipa ključan za vaše programe. Ovi koncepti možda će vam se na početku činiti apstraktnima, ali s vremenom će postati prirodni.
U ovoj lekciji istražit ćemo osnovne tipove podataka koji pokreću JavaScript. Naučit ćete kako rukovati brojevima, tekstom, istinitim/neistinitim vrijednostima te zašto je odabir pravog tipa ključan za vaše programe. Ti koncepti mogu u početku djelovati apstraktno, ali s praksom postat će vam prirodni.
Razumijevanje tipova podataka učinit će sve ostalo u JavaScriptu mnogo jasnijim. Kao što arhitekti moraju razumjeti različite građevinske materijale prije nego što izgrade katedralu, ovi temelji podržat će sve što ćete graditi u budućnosti.
Razumijevanje tipova podataka učinit će sve ostalo u JavaScriptu mnogo jasnijim. Baš kao što arhitekti trebaju razumjeti različite građevinske materijale prije nego što izgrade katedralu, ti temelji će podržavati sve što budete gradili u budućnosti.
Ova lekcija pokriva osnove JavaScripta, jezika koji omogućuje interaktivnost na webu.
> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
> Ovu lekciju možete pohađati na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Varijable u JavaScriptu")
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
[](https://youtube.com/watch?v=AWfA95eLdq8 "Tipovi podataka u JavaScriptu")
[](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
> 🎥 Kliknite na slike iznad za videozapise o varijablama i tipovima podataka
Krenimo s varijablama i tipovima podataka koji ih ispunjavaju!
Počnimo s varijablama i tipovima podataka kojima se one pune!
```mermaid
mindmap
root((JavaScript Podaci))
Varijable
let mojaVar
const PI = 3.14
var starijiStil
Primitivni Tipovi
broj
42
3.14
-5
niz
"Pozdrav"
'Svijet'
`Predložak`
boolean
true
false
nedefinirano
null
Operacije
Aritmetika
+ - * / %
Metode Nizova
spajanje
predložak literala
Pretvorba Tipova
implicitna
eksplicitna
```
## Varijable
Varijable su temeljni gradivni blokovi u programiranju. Kao označene staklenke koje su srednjovjekovni alkemičari koristili za pohranu različitih tvari, varijable vam omogućuju pohranu informacija i dodjeljivanje opisnog imena kako biste ih kasnije mogli koristiti. Trebate zapamtiti nečiju dob? Pohranite je u varijablu nazvanu `age`. Želite pratiti ime korisnika? Spremite ga u varijablu nazvanu `userName`.
Varijable su temeljni građevinski blokovi u programiranju. Poput označenih staklenki koje su srednjovjekovni alkemisti koristili za pohranu različitih supstanci, varijable vam omogućuju pohranu informacija i daju im opisno ime kako biste im mogli kasnije pristupiti. Trebate zapamtiti nečiju dob? Pohranite je u varijablu nazvanu `age`. Želite pratiti ime korisnika? Držite ga u varijabli nazvanoj`userName`.
Usredotočit ćemo se na moderni pristup stvaranju varijabli u JavaScriptu. Tehnike koje ćete ovdje naučiti predstavljaju godine evolucije jezika i najbolje prakse koje je razvila programerska zajednica.
Usredotočit ćemo se na suvremen pristup stvaranju varijabli u JavaScriptu. Te tehnike koje ćete ovdje naučiti predstavljaju godine evolucije jezika i najbolje prakse razvijene od strane programerske zajednice.
Stvaranje i **deklariranje** varijable ima sljedeću sintaksu **[ključna riječ] [ime]**. Sastoji se od dva dijela:
Kreiranje i **deklaracija** varijable ima sljedeću sintaksu **[keyword] [name]**. Sastoji se od dva dijela:
- **Ključna riječ**. Koristite `let` za varijable koje se mogu mijenjati ili `const` za vrijednosti koje ostaju iste.
- **Ime varijable**, to je opisno ime koje sami odaberete.
- **Ime varijable**, to je opisni naziv koji sami odaberete.
✅ Ključna riječ `let` uvedena je u ES6 i daje vašoj varijabli takozvani _block scope_. Preporučuje se koristiti `let` ili `const` umjesto starije ključne riječi `var`. O block scopeu ćemo detaljnije govoriti u budućim dijelovima.
✅ Ključna riječ `let` uvedena je u ES6 i daje varijabli tzv. _blok opseg_. Preporučuje se da koristite `let` ili `const` umjesto starije ključne riječi `var`. Blok opsezi će biti detaljnije obrađeni u budućim dijelovima.
### Zadatak - rad s varijablama
1. **Deklarirajte varijablu**. Započnimo s kreiranjem naše prve varijable:
1. **Deklarirajte varijablu**. Započnimo stvaranjem naše prve varijable:
```javascript
let myVariable;
```
**Što ovo postiže:**
- Ovo govori JavaScriptu da stvori mjesto za pohranu pod nazivom `myVariable`
- JavaScript dodjeljuje prostor u memoriji za ovu varijablu
- Ovo govori JavaScriptu da kreira memorijsku lokaciju nazvanu`myVariable`
- JavaScript rezervira prostor u memoriji za ovu varijablu
- Varijabla trenutno nema vrijednost (undefined)
2. **Dodijelite joj vrijednost**. Sada stavimo nešto u našu varijablu:
2. **Dodajte joj vrijednost**. Sad ćemo staviti nešto u našu varijablu:
```javascript
myVariable = 123;
```
**Kako radi dodjela vrijednosti:**
**Kako radi dodjela:**
- Operator `=` dodjeljuje vrijednost 123 našoj varijabli
- Varijabla sada sadrži ovu vrijednost umjesto da bude undefined
- Ovu vrijednost možete koristiti u svom kodu koristeći `myVariable`
- Varijabla sada sadrži tu vrijednost umjesto da je neodređena
- Možete referencirati ovu vrijednost kroz vaš kod koristeći `myVariable`
> Napomena: korištenje `=` u ovoj lekciji znači da koristimo "operator dodjele", koji se koristi za postavljanje vrijednosti varijabli. Ne označava jednakost.
> Napomena: Korištenje `=` u ovoj lekciji znači da koristimo "operator dodjele", koristeći ga za postavljanje vrijednosti varijabli. Ne označava jednakost.
3. **Učinite to pametnije**. Zapravo, kombinirajmo ova dva koraka:
3. **Uradi to pametnije**. Zapravo, spojimo ta dva koraka:
```javascript
let myVariable = 123;
```
**Ovaj pristup je učinkovitiji:**
- Deklarirate varijablu i dodjeljujete vrijednost u jednoj naredbi
- Deklarirate varijablu i dodjeljujete joj vrijednost u jednoj izjavi
- Ovo je standardna praksa među programerima
- Smanjuje duljinu koda uz zadržavanje jasnoće
- Smanjuje duljinu koda, a zadržava jasnoću
4. **Promijenite mišljenje**. Što ako želimo pohraniti neki drugi broj?
4. **Promijenite mišljenje**. Što ako želimo pohraniti drugu vrijednost?
```javascript
myVariable = 321;
```
**Razumijevanje ponovne dodjele:**
**Razumijevanje ponovnog dodjeljivanja:**
- Varijabla sada sadrži 321 umjesto 123
- Prethodna vrijednost je zamijenjena – varijable pohranjuju samo jednu vrijednost u isto vrijeme
- Ova promjenjivost ključna je karakteristika varijabli deklariranih s `let`
- Prethodna vrijednost je zamijenjena – varijable pohranjuju samo jednu vrijednost u jednom trenutku
- Ova promjenjivost je ključna karakteristika varijabli deklariranih s `let`
✅ Isprobajte! Možete pisati JavaScript izravno u svom pregledniku. Otvorite prozor preglednika i idite na Alate za razvojne programere. U konzoli ćete pronaći upit; upišite `let myVariable = 123`, pritisnite Enter, zatim upišite `myVariable`. Što se događa? Napomena, više o ovim konceptima naučit ćete u sljedećim lekcijama.
✅ Isprobajte! Možete pisati JavaScript izravno u svoje pregledniku. Otvorite prozor preglednika i idite na Developer Tools. U konzoli ćete pronaći prompt; upišite `let myVariable = 123`, pritisnite Enter, zatim upišite `myVariable`. Što se događa? Više o ovim konceptima naučit ćete u narednim lekcijama.
## Konstante
### 🧠 **Provjera znanja o varijablama: Postajete komforni**
Ponekad trebate pohraniti informacije koje se ne smiju mijenjati tijekom izvođenja programa. Zamislite konstante kao matematičke principe koje je Euclid uspostavio u drevnoj Grčkoj – jednom dokazane i dokumentirane, ostale su nepromjenjive za sva buduća vremena.
**Pogledajmo kako stojite s varijablama:**
- Možete li objasniti razliku između deklaracije i dodjele varijable?
- Što se događa ako pokušate koristiti varijablu prije nego što je deklarirate?
- Kada biste izabrali `let` umjesto `const` za varijablu?
Konstante funkcioniraju slično varijablama, ali s važnim ograničenjem: jednom kada im dodijelite vrijednost, ona se ne može mijenjati. Ova nepromjenjivost pomaže spriječiti slučajne izmjene ključnih vrijednosti u vašem programu.
```mermaid
stateDiagram-v2
[*] --> Declared: deklarirano myVar
Declared --> Assigned: dodijeljeno myVar = 123
Assigned --> Reassigned: ponovno dodijeljeno myVar = 456
Assigned --> [*]: Varijabla spremna!
Reassigned --> [*]: Ažurirana vrijednost
note right of Declared
Varijabla postoji ali
nema vrijednost (nedefinirano)
end note
note right of Assigned
Varijabla sadrži
vrijednost 123
end note
```
> **Brzi savjet**: Zamislite varijable kao označene kutije za pohranu. Stvarate kutiju (`let`), stavljate nešto u nju (`=`), i kasnije možete zamijeniti sadržaj ako treba!
## Konstantne vrijednosti
Ponekad trebate pohraniti informacije koje se tijekom izvođenja programa nikad ne smiju mijenjati. Zamislite konstante poput matematičkih načela koje je Euklid utvrdio u antičkoj Grčkoj – jednom dokazana i zabilježena, ostala su fiksna za buduće generacije.
Deklaracija i inicijalizacija konstante slijedi iste koncepte kao i varijabla, osim što se koristi ključna riječ `const`. Konstante se obično deklariraju velikim slovima.
Konstante funkcioniraju slično varijablama, ali s važnim ograničenjem: nakon što im dodijelite vrijednost, ona se ne može mijenjati. Ta nepromjenjivost pomaže spriječiti slučajne izmjene ključnih vrijednosti u vašem programu.
Deklaracija i inicijalizacija konstante slijedi iste koncepte kao i varijable, osim što se koristi ključna riječ `const`. Konstante se obično deklariraju s nazivima napisanim velikim slovima.
```javascript
const MY_VARIABLE = 123;
```
**Što ovaj kod radi:**
- **Stvara** konstantu nazvanu `MY_VARIABLE` s vrijednošću 123
- **Kreira** konstantu nazvanu `MY_VARIABLE` s vrijednošću 123
- **Koristi** konvenciju imenovanja velikim slovima za konstante
- **Sprječava** bilo kakve buduće promjene ove vrijednosti
- **Sprječava** buduće promjene ove vrijednosti
Konstante imaju dva glavna pravila:
- **Morate im odmah dodijeliti vrijednost**– prazne konstante nisu dopuštene!
- **Nikada ne možete promijeniti tu vrijednost**– JavaScript će baciti grešku ako pokušate. Evo što mislim:
- **Morate im odmah dodijeliti vrijednost**–konzistentno bez praznih konstanti!
- **Nikada ne smijete mijenjati tu vrijednost** – JavaScript će baciti grešku ako pokušate. Pogledajmo to sad:
**Jednostavna vrijednost** - Sljedeće NIJE dopušteno:
@ -125,89 +199,127 @@ Konstante imaju dva glavna pravila:
- **Pokušaji** ponovne dodjele konstante uzrokovat će grešku
- **Štiti** važne vrijednosti od slučajnih promjena
- **Osigurava** da vrijednost ostane dosljedna tijekom vašeg programa
- **Osigurava** da vrijednost ostane dosljedna kroz cijeli program
**Referenca na objekt je zaštićena** - Sljedeće NIJE dopušteno:
**Zaštita reference objekta** - Sljedeće NIJE dopušteno:
```javascript
const obj = { a: 3 };
obj = { b: 5 } // nije dopušteno
```
**Razumijevanje ovih koncepata:**
**Razumijevanje ovih pojmova:**
- **Sprječava** zamjenu cijelog objekta novim
- **Štiti** referencu na izvorni objekt
- **Održava** identitet objekta u memoriji
- **Očuva** identitet objekta u memoriji
**Vrijednost objekta nije zaštićena** - Sljedeće JE dopušteno:
**Vrijednost u objektu nije zaštićena** - Sljedeće JE dopušteno:
```javascript
const obj = { a: 3 };
obj.a = 5; // dopušteno
```
**Razlaganje onoga što se ovdje događa:**
- **Mijenja**vrijednost svojstva unutar objekta
**Što se ovdje događa:**
- **Mijenja**se svojstvo unutar objekta
- **Zadržava** istu referencu objekta
- **Pokazuje** da se sadržaj objekta može mijenjati dok referenca ostaje konstantna
- **Pokazuje** da se sadržaj objekta može mijenjati dok referenca ostaje konstanta
> Napomena, `const` znači da je referenca zaštićena od ponovne dodjele. Vrijednost nije _nepromjenjiva_ i može se mijenjati, posebno ako je složena struktura poput objekta.
> Napomena, `const` znači da je referenca zaštićena od ponovne dodjele. Vrijednost ipak nije _nepromjenjiva_ i može se mijenjati, osobito ako je riječ o složenim strukturama poput objekta.
## Tipovi podataka
JavaScript organizira informacije u različite kategorije koje se nazivaju tipovi podataka. Ovaj koncept odražava način na koji su drevni učenjaci kategorizirali znanje – Aristotel je razlikovao različite vrste razmišljanja, znajući da se logički principi ne mogu jednako primijeniti na poeziju, matematiku i prirodnu filozofiju.
JavaScript organizira informacije u različite kategorije nazvane tipovi podataka. Ovaj koncept odražava način na koji su stari učenjaci kategorizirali znanje – Aristotel je razlikovao različite vrste rezoniranja, znajući da logička načela ne mogu se jednako primjenjivati na poeziju, matematiku i prirodnu filozofiju.
Tipovi podataka su važni jer različite operacije funkcioniraju s različitim vrstama informacija. Kao što ne možete izvoditi aritmetiku na nečijem imenu ili abecedno poredati matematičku jednadžbu, JavaScript zahtijeva odgovarajući tip podataka za svaku operaciju. Razumijevanje ovoga sprječava greške i čini vaš kod pouzdanijim.
Tipovi podataka su važni jer različite operacije rade s različitim vrstama informacija. Baš kao što ne možete obavljati aritmetiku nad nečijim imenom ili alfabetizirati matematičku jednadžbu, JavaScript zahtijeva odgovarajući tip podataka za svaku operaciju. Razumijevanje ovog sprječava greške i čini vaš kod pouzdanijim.
Varijable mogu pohraniti mnoge različite vrste vrijednosti, poput brojeva i teksta. Ove različite vrste vrijednosti poznate su kao **tipovi podataka**. Tipovi podataka važan su dio razvoja softvera jer pomažu programerima donositi odluke o tome kako bi kod trebao biti napisan i kako bi softver trebao raditi. Nadalje, neki tipovi podataka imaju jedinstvene značajke koje pomažu transformirati ili izvući dodatne informacije iz vrijednosti.
Varijable mogu pohraniti mnoge različite vrste vrijednosti, poput brojeva i teksta. Ove različite vrste vrijednosti poznate su kao **tip podataka**. Tipovi podataka važan su dio razvoja softvera jer pomažu programerima donositi odluke o tome kako kod treba biti napisan i kako bi softver trebao raditi. Nadalje, neki tipovi podataka imaju jedinstvene značajke koje pomažu pri transformaciji ili izdvajaju dodatne informacije iz vrijednosti.
✅ Tipovi podataka također se nazivaju primitivima podataka u JavaScriptu, jer su to najosnovniji tipovi podataka koje jezik pruža. Postoji 7 primitivnih tipova podataka: string, number, bigint, boolean, undefined, null i symbol. Odvojite trenutak da vizualizirate što svaki od ovih primitiva može predstavljati. Što je `zebra`? A `0`? `true`?
✅ Tipovi podataka se također nazivaju JavaScript primitivima jer su najnižeg nivoa tipovi podataka koje jezik pruža. Postoji 7 primitivnih tipova podataka: string, number, bigint, boolean, undefined, null i symbol. Odvojite trenutak da vizualizirate što svaki od ovih primitiva može predstavljati. Što je `zebra`? A `0`? `true`?
### Brojevi
Brojevi su najjednostavniji tip podataka u JavaScriptu. Bez obzira radite li s cijelim brojevima poput 42, decimalnim brojevima poput 3.14 ili negativnim brojevima poput -5, JavaScript ih obrađuje na isti način.
Brojevi su najjednostavniji tip podataka u JavaScriptu. Bilo da radite s cijelim brojevima poput 42, decimalnim poput 3.14 ili negativnim kao -5, JavaScript ih obrađuje uniformno.
Sjećate li se naše varijable od ranije? Onaj 123 koji smo pohranili zapravo je bio tip podataka broj:
Sjećate li se naše varijable od prije? Taj 123 koji smo pohranili zapravo je tip podatka broj:
```javascript
let myVariable = 123;
```
**Ključne značajke:**
**Ključne karakteristike:**
- JavaScript automatski prepoznaje numeričke vrijednosti
- Možete izvoditi matematičke operacije s ovim varijablama
- Možete s njima izvoditi matematičke operacije
- Nije potrebna eksplicitna deklaracija tipa
Varijable mogu pohraniti sve vrste brojeva, uključujući decimalne ili negativne brojeve. Brojevi se također mogu koristiti s aritmetičkim operatorima, o čemu ćemo govoriti u [sljedećem odjeljku](../../../../2-js-basics/1-data-types).
Varijable mogu pohraniti sve vrste brojeva, uključujući decimale ili negativne brojeve. Brojevi se također mogu koristiti s aritmetičkim operatorima, koji će biti obrađeni u [sljedećem odjeljku](../../../../2-js-basics/1-data-types).
```mermaid
flowchart LR
A["🔢 Brojevi"] --> B["➕ Zbrajanje"]
A --> C["➖ Oduzimanje"]
A --> D["✖️ Množenje"]
A --> E["➗ Dijeljenje"]
A --> F["📊 Ostatak %"]
B --> B1["1 + 2 = 3"]
C --> C1["5 - 3 = 2"]
D --> D1["4 * 3 = 12"]
E --> E1["10 / 2 = 5"]
F --> F1["7 % 3 = 1"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### Aritmetički operatori
Aritmetički operatori omogućuju izvođenje matematičkih izračuna u JavaScriptu. Ovi operatori slijede iste principe koje matematičari koriste stoljećima – iste simbole koji su se pojavljivali u radovima učenjaka poput Al-Khwarizmija, koji je razvio algebarsku notaciju.
Aritmetički operatori omogućuju izvođenje matematičkih izračuna u JavaScriptu. Ti operatori slijede ista pravila koja su matematičari koristili stoljećima – isti simboli koji su se pojavljivali u radovima učenjaka poput Al-Khwarizmija, koji je razvio algebarsku notaciju.
Operatori rade onako kako biste očekivali iz tradicionalne matematike: plus za zbrajanje, minus za oduzimanje i tako dalje.
Postoji nekoliko vrsta operatora koje možete koristiti pri izvođenju aritmetičkih funkcija, neki su navedeni ovdje:
| `+` | **Zbrajanje**: Računa zbroj dvaju brojeva | `1 + 2 //očekivani rezultat je 3` |
| `-` | **Oduzimanje**: Računa razliku dvaju brojeva | `1 - 2 //očekivani rezultat je -1` |
| `*` | **Množenje**: Računa produkt dvaju brojeva | `1 * 2 //očekivani rezultat je 2` |
| `/` | **Dijeljenje**: Računa kvocijent dvaju brojeva | `1 / 2 //očekivani rezultat je 0.5` |
| `%` | **Ostatak**: Računa ostatak od dijeljenja dvaju brojeva | `1 % 2 //očekivani rezultat je 1` |
**Testirajte svoje aritmetičko razumijevanje:**
- Koja je razlika između `/` (dijeljenje) i `%` (ostatak)?
- Možete li predvidjeti što je `10 % 3` jednako? (Pomoć: nije 3.33...)
- Zašto bi operator ostatka mogao biti koristan u programiranju?
✅ Isprobajte! Isprobajte aritmetičku operaciju u konzoli vašeg preglednika. Jesu li vas rezultati iznenadili?
```mermaid
pie title "Korištenje operacija nad brojevima u JavaScriptu"
"Zbrajanje (+)" : 35
"Oduzimanje (-)" : 20
"Množenje (*)" : 20
"Dijeljenje (/)" : 15
"Ostatak (%)" : 10
```
> **Uvid iz stvarnog svijeta**: Operator ostatka (%) je vrlo koristan za provjeru jesu li brojevi parni/neparni, stvaranje obrazaca ili cikličko prolazak kroz nizove!
### Stringovi
U JavaScriptu se tekstualni podaci predstavljaju kao stringovi. Pojam "string" dolazi od koncepta znakova povezanih u niz, slično kao što su pisari u srednjovjekovnim samostanima povezivali slova kako bi oblikovali riječi i rečenice u svojim rukopisima.
U JavaScriptu, tekstualni podaci predstavljeni su kao stringovi. Termin "string" dolazi od koncepta znakova povezanih u niz, kao što su prepisi u srednjovjekovnim samostanima gdje su pisari povezivali slova da bi oblikovali riječi i rečenice u svojim rukopisima.
Stringovi su temeljni za razvoj weba. Svaki komad teksta prikazan na web stranici – korisnička imena, oznake gumba, poruke o greškama, sadržaj – obrađuje se kao string podaci. Razumijevanje stringova ključno je za stvaranje funkcionalnih korisničkih sučelja.
Stringovi su temeljni za web razvoj. Svaki tekst prikazan na web stranici – korisnička imena, oznake na gumbima, poruke o pogreškama, sadržaj – obrađuje se kao string podatak. Razumijevanje stringova neophodno je za kreiranje funkcionalnih korisničkih sučelja.
Stringovi su skupovi znakova koji se nalaze između jednostrukih ili dvostrukih navodnika.
Stringovi su skupovi znakova smještenih između jednostrukih ili dvostrukih navodnika.
```javascript
'This is a string'
@ -215,109 +327,292 @@ Stringovi su skupovi znakova koji se nalaze između jednostrukih ili dvostrukih
let myString = 'This is a string value stored in a variable';
```
**Razumijevanje ovih koncepata:**
- **Koristi** jednostruke `'` ili dvostruke `"` navodnike za definiranje stringova
**Razumijevanje ovih pojmova:**
- **Koristi**ili jednostruke `'` ili dvostruke `"` navodnike za definiranje stringova
- **Pohranjuje** tekstualne podatke koji mogu uključivati slova, brojeve i simbole
- **Dodjeljuje**vrijednosti stringova varijablama za kasniju upotrebu
- **Zahtijeva** navodnike kako bi razlikovao tekst od imena varijabli
- **Dodjeljuje**string vrijednosti varijablama za naknadnu upotrebu
- **Zahtijeva** navodnike za razlikovanje teksta od imena varijabli
Zapamtite da koristite navodnike prilikom pisanja stringa, inače će JavaScript pretpostaviti da se radi o imenu varijable.
Zapamtite koristiti navodnike pri pisanju stringa ili će JavaScript pretpostaviti da je riječ o imenu varijable.
```mermaid
flowchart TD
A["📝 Nizovi"] --> B["Jednostruki navodnici"]
A --> C["Dvostruki navodnici"]
A --> D["Predlošci nizova"]
B --> B1["'Pozdrav svijete'"]
C --> C1["\"Pozdrav svijete\""]
D --> D1["`Pozdrav \${name}`"]
E["Operacije nad nizovima"] --> F["Spajanje"]
E --> G["Umetanje predložaka"]
E --> H["Duljina i metode"]
F --> F1["'Pozdrav' + ' ' + 'svijete'"]
G --> G1["`Pozdrav \${firstName} \${lastName}`"]
H --> H1["myString.length"]
style A fill:#e3f2fd
style E fill:#fff3e0
style D fill:#e8f5e8
style G fill:#e8f5e8
```
### Formatiranje stringova
Manipulacija stringovima omogućuje kombiniranje tekstualnih elemenata, uključivanje varijabli i stvaranje dinamičkog sadržaja koji odgovara stanju programa. Ova tehnika omogućuje vam programsku izradu teksta.
Često trebate spojiti više stringova – ovaj proces naziva se konkatenacija.
Manipulacija stringovima omogućuje vam da kombinirate tekstualne elemente, unesete varijable i stvarate dinamički sadržaj koji odgovara stanju programa. Ova tehnika vam omogućuje da programatski gradite tekst.
Za **spajanje** dvaju ili više stringova koristite operator `+`.
Često trebate spojiti više stringova zajedno – taj proces naziva se konkatenacija.
Za **spajanje** dva ili više nizova, ili njihovo povezivanje zajedno, koristi operator `+`.
- **Kombinira** više stringova koristeći operator `+`
- **Spaja** stringove izravno bez razmaka u prvom primjeru
- **Dodaje** razmake `" "` između stringova radi čitljivosti
- **Umeće** interpunkcijske znakove poput zareza za pravilno formatiranje
- **Spaja** više nizova koristeći operator `+`
- **Povezuje** nizove izravno jedan za drugim bez razmaka u prvom primjeru
- **Dodaje**znakove razmaka `" "` između nizova radi čitljivosti
- **Umeće** interpunkcijske znakove poput zareza za pravilno oblikovanje
✅ Zašto `1 + 1 = 2` u JavaScriptu, ali `'1' + '1' = 11?` Razmislite o tome. Što je s`'1' + 1`?
✅ Zašto je `1 + 1 = 2` u JavaScriptu, ali `'1' + '1' = 11?` Razmisli o tome. A što kažeš na`'1' + 1`?
**Predlošci stringova** su još jedan način formatiranja stringova, osim što se umjesto navodnika koristi znak za navođenje unatrag. Sve što nije običan tekst mora biti smješteno unutar zagrada `${ }`. To uključuje sve varijable koje mogu biti stringovi.
**Predlošci nizova (template literals)** su još jedan način formatiranja nizova, osim umjesto navodnika koriste se naglašeni akcenti (backtick). Sve što nije običan tekst mora se staviti unutar rezerviranih mjesta `${ }`. To uključuje i bilo koje varijable koje mogu biti nizovi.
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello, World!
`${myString1} ${myString2}!` //Pozdrav svijete!
`${myString1}, ${myString2}!` //Pozdrav, svijete!
```
**Razumijemo svaki dio:**
- **Koristi** znak za navođenje unatrag `` ` `` umjesto običnih navodnika za stvaranje predložaka stringova
- **Ugrađuje** varijable izravno koristeći sintaksu `${}`
- **Čuva** razmake i formatiranje točno onako kako je napisano
- **Pruža** čišći način za stvaranje složenih stringova s varijablama
Možete postići svoje ciljeve formatiranja bilo kojom metodom, ali predlošci literalnih nizova poštuju razmake i prijelome linija.
✅ Kada biste koristili predložak literalnog niza umjesto običnog niza?
**Razumimo svaki dio:**
- **Koristi** naglašene akcente `` ` `` umjesto običnih navodnika za stvaranje predložaka nizova
- **Ugrađuje** varijable izravno koristeći sintaksu rezerviranih mjesta `${}`
- **Čuva** razmake i oblikovanje točno kako su napisani
- **Nudi** čišći način za stvaranje složenih nizova s varijablama
Možete postići svoje ciljeve oblikovanja na oba načina, ali predlošci nizova poštuju sve razmake i prijelome redaka.
✅ Kada biste koristili predložak niza umjesto običnog niza?
### 🔤 **Provjera Majstorstva Nizova: Povjerenje u Manipulaciju Tekstom**
**Procijenite svoje vještine sa nizovima:**
- Možete li objasniti zašto `'1' + '1'` daje `'11'` umjesto `2`?
- Koju metodu za nizove smatrate čitljivijom: spajanje ili predloške nizova?
- Što se događa ako zaboravite navodnike oko niza?
```mermaid
stateDiagram-v2
[*] --> PlainText: "Pozdrav"
[*] --> Variable: ime = "Alice"
PlainText --> Concatenated: + " " + ime
Variable --> Concatenated
PlainText --> Template: `Pozdrav ${ime}`
Variable --> Template
Concatenated --> Result: "Pozdrav Alice"
Template --> Result
note right of Concatenated
Tradicionalna metoda
Više riječi
end note
note right of Template
Moderna ES6 sintaksa
Čistije i razumljivije
end note
```
> **Savjet za profesionalce**: Predlošci nizova su općenito preferirani za složeno gradnju nizova jer su čitljiviji i izvrsno podržavaju višeredne nizove!
### Booleani
### Booleovi tipovi
Booleani predstavljaju najjednostavniji oblik podataka: mogu imati samo jednu od dvije vrijednosti –`true` ili `false`. Ovaj binarni logički sustav potječe od rada Georgea Boolea, matematičara iz 19. stoljeća koji je razvio Booleovu algebru.
Booleovi tipovi predstavljaju najjednostavniji oblik podataka: mogu imati samo jednu od dvije vrijednosti –`true` ili `false`. Ovaj binarni logički sustav potječe iz rada Georgea Boolea, matematičara iz 19. stoljeća koji je razvio Booleovu algebru.
Unatoč svojoj jednostavnosti, booleani su ključni za logiku programa. Omogućuju vašem kodu donošenje odluka na temelju uvjeta – je li korisnik prijavljen, je li gumb kliknut ili su li ispunjeni određeni kriteriji.
Unatoč jednostavnosti, booleovi su ključni za logiku programa. Omogućuju vašem kodu donošenje odluka na temelju uvjeta – je li korisnik prijavljen, je li gumb kliknut, ili jesu li ispunjeni neki kriteriji.
Booleani mogu imati samo dvije vrijednosti: `true` ili `false`. Booleani pomažu u donošenju odluka o tome koje linije koda trebaju biti izvršene kada su ispunjeni određeni uvjeti. U mnogim slučajevima, [operatori](../../../../2-js-basics/1-data-types) pomažu u postavljanju vrijednosti booleana, a često ćete primijetiti i pisati varijable koje se inicijaliziraju ili njihove vrijednosti ažuriraju pomoću operatora.
Boolean može imati samo dvije vrijednosti: `true` ili `false`. Booleovi mogu pomoći u odlučivanju koje će se linije koda izvršiti kada su ispunjeni određeni uvjeti. U mnogim slučajevima, [operatori](../../../../2-js-basics/1-data-types) pomažu u postavljanju vrijednosti Boolean tipa, a često ćete primijetiti i pisati varijable koje se inicijaliziraju ili im se vrijednosti ažuriraju operatorom.
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
**U gornjem primjeru, mi smo:**
- **Kreirali** varijablu koja pohranjuje Boolean vrijednost `true`
- **Pokazali** kako pohraniti Boolean vrijednost `false`
- **Koristili** točne ključne riječi `true` i `false` (bez navodnika)
- **Pripremili** ove varijable za korištenje u uvjetnim izjavama
**U gornjem primjeru smo:**
- **Stvorili** varijablu koja pohranjuje Boolean vrijednost `true`
- **Demonstrirali** kako pohraniti Boolean vrijednost `false`
- **Koristili** točne ključne riječi `true` i `false` (ne trebaju navodnici)
- **Pripremili**te varijable za korištenje u uvjetnim izrazima
✅ Varijabla se može smatrati 'istinitošću' ako se procjenjuje kao boolean `true`. Zanimljivo je da su u JavaScriptu [sve vrijednosti istinite osim ako nisu definirane kao lažne](https://developer.mozilla.org/docs/Glossary/Truthy).
✅ Varijabla se može smatrati 'truthy' ako se evaluira kao boolean `true`. Zanimljivo je da u JavaScriptu [sve vrijednosti su truthy osim onih definirano kao falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
F["⚡ Ključni Pojmovi"] --> F1["Tip je važan za operacije"]
F --> F2["JavaScript je dinamički tipiziran"]
F --> F3["Varijable mogu mijenjati tip"]
F --> F4["Nazivi su osjetljivi na velika i mala slova"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
## Izazov GitHub Copilot Agent-a 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Koristite Agent način rada da biste dovršili sljedeći izazov:
**Opis:** Kreirajte upravitelj osobnih informacija koji demonstrira sve vrste podataka u JavaScriptu koje ste naučili u ovoj lekciji, dok obrađujete scenarije stvarnih podataka.
**Opis:** Kreirajte upravitelj osobnim informacijama koji demonstrira sve JavaScript tipove podataka koje ste naučili u ovoj lekciji dok rukujete scenarijima stvarnih podataka.
**Zadatak:** Izradite JavaScript program koji kreira objekt korisničkog profila koji sadrži: ime osobe (string), dob (broj), status studenta (boolean), omiljene boje kao niz, i objekt adrese s svojstvima ulice, grada i poštanskog broja. Uključite funkcije za prikaz informacija o profilu i ažuriranje pojedinačnih polja. Obavezno demonstrirajte spajanje nizova, predloške literalnih nizova, aritmetičke operacije s dobi i logiku booleana za status studenta.
**Zadatak:** Izradite JavaScript program koji kreira objekt korisničkog profila koji sadrži: ime osobe (string), godine (broj), status studenta (boolean), omiljene boje kao niz, te objekt adrese s ulicom, gradom i poštanskim brojem. Uključite funkcije za prikazivanje podataka profila i ažuriranje pojedinačnih polja. Obavezno pokažite spajanje nizova, predloške nizova, aritmetičke operacije s dobi, te Boolean logiku za status studenta.
Saznajte više o [načinu rada agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov
JavaScript ima neka ponašanja koja mogu iznenaditi programere. Evo klasičnog primjera za istraživanje: pokušajte upisati ovo u konzolu preglednika: `let age = 1; let Age = 2; age == Age` i promatrajte rezultat. Vraća `false`– možete li odrediti zašto?
JavaScript ima ponašanja koja mogu iznenaditi developere. Evo klasičnog primjera za istraživanje: pokušajte upisati ovo u konzolu preglednika: `let age = 1; let Age = 2; age == Age` i promatrajte rezultat. Vraća `false`– možete li ustanoviti zašto?
Ovo predstavlja jedno od mnogih ponašanja JavaScripta koje vrijedi razumjeti. Poznavanje ovih specifičnosti pomoći će vam da pišete pouzdaniji kod i učinkovitije rješavate probleme.
Ovo predstavlja jedan od mnogih JavaScript ponašanja koje vrijedi razumjeti. Upoznavanje s ovim nejasnoćama pomoći će vam pisati pouzdaniji kod i učinkovitije rješavati pogreške.
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app)
## Pregled i samostalno učenje
## Pregled i Samostalan Rad
Pogledajte [ovaj popis JavaScript vježbi](https://css-tricks.com/snippets/javascript/) i isprobajte jednu. Što ste naučili?
Pogledajte [ovu listu JavaScript vježbi](https://css-tricks.com/snippets/javascript/) i pokušajte neku. Što ste naučili?
## Zadatak
[Praksa s vrstama podataka](assignment.md)
[Vježbe za tipove podataka](assignment.md)
## 🚀 Vaš vremenski plan za usavršavanje JavaScript tipova podataka
### ⚡ **Što možete napraviti u sljedećih 5 minuta**
- [ ] Otvorite konzolu preglednika i napravite 3 varijable različitih tipova podataka
- [ ] Isprobajte izazov: `let age = 1; let Age = 2; age == Age` i shvatite zašto je false
- [ ] Vježbajte spajanje nizova s vašim imenom i omiljenim brojem
- [ ] Testirajte što se događa kada zbrojite broj i niz
### 🎯 **Što možete postići u ovom satu**
- [ ] Dovršite kviz nakon lekcije i pregledajte bilo koje zbunjujuće koncepte
- [ ] Izradite mini kalkulator koji zbraja, oduzima, množi i dijeli dva broja
- [ ] Napravite jednostavan formatir za ime koristeći predloške nizova
- [ ] Istražite razlike između operatora usporedbe `==` i `===`
- [ ] Vježbajte pretvaranje između različitih tipova podataka
### 📅 **Vaša tjedna osnova JavaScript-a**
- [ ] S pouzdanjem i kreativnošću dovršite zadatak
- [ ] Napravite osobni profil koristeći sve naučene tipove podataka
- [ ] Vježbajte s [JavaScript vježbama s CSS-Tricks](https://css-tricks.com/snippets/javascript/)
- [ ] Izradite jednostavan validator forme koristeći Boolean logiku
- [ ] Eksperimentirajte s nizovima i objektima (najava za buduće lekcije)
- [ ] Pridružite se JavaScript zajednici i postavljajte pitanja o tipovima podataka
### 🌟 **Vaša mjesečna transformacija**
- [ ] Integrirajte znanje o tipovima podataka u veće programske projekte
- [ ] Razumite kada i zašto koristiti svaki tip podataka u stvarnim aplikacijama
- [ ] Pomozite drugim početnicima da shvate osnove JavaScript-a
- [ ] Izradite malu aplikaciju koja upravlja različitim vrstama korisničkih podataka
- [ ] Istražite napredne koncepte tipova podataka poput prisiljene konverzije i stroge jednakosti
- [ ] Doprinesite open source JavaScript projektima poboljšanjem dokumentacije
### 🧠 **Završna provjera znanja o tipovima podataka**
**Proslavite svoje JavaScript temelje:**
- Koji vas je tip podataka najviše iznenadio u pogledu svog ponašanja?
- Koliko se udobno osjećate objašnjavajući varijable nasuprot konstantama prijatelju?
- Koja je najzanimljivija stvar koju ste otkrili o JavaScript sustavu tipova?
- Koju aplikaciju iz stvarnog svijeta možete zamisliti da izgradite s ovim osnovama?
```mermaid
journey
title Vaše putovanje samopouzdanja u JavaScriptu
section Danas
Zbunjeni: 3: Vi
Znatiželjni: 4: Vi
Uzbuđeni: 5: Vi
section Ovaj tjedan
Vježbanje: 4: Vi
Razumijevanje: 5: Vi
Izgradnja: 5: Vi
section Sljedeći mjesec
Rješavanje problema: 5: Vi
Poučavanje drugih: 5: Vi
Pravi projekti: 5: Vi
```
> 💡 **Izgradili ste temelje!** Razumijevanje tipova podataka je kao učenje abecede prije pisanja priča. Svaki JavaScript program koji ikada napišete koristit će ove temeljne koncepte. Sada imate gradivne blokove za stvaranje interaktivnih web stranica, dinamičkih aplikacija i rješavanje stvarnih problema putem koda. Dobrodošli u prekrasni svijet JavaScript-a! 🎉
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nerazumijevanja ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Pisanje istog koda iznova i iznova jedna je od najčešćih frustracija u programiranju. Funkcije rješavaju ovaj problem omogućujući vam da pakirate kod u blokove koji se mogu ponovno koristiti. Zamislite funkcije kao standardizirane dijelove koji su učinili revolucionarnom proizvodnu liniju Henryja Forda – jednom kada stvorite pouzdan komponent, možete ga koristiti gdje god je potrebno bez ponovnog stvaranja od nule.
Pisanje istog koda iznova jedna je od najčešćih frustracija u programiranju. Funkcije rješavaju taj problem dopuštajući vam da upakirate kod u višekratno uporabljive blokove. Zamislite funkcije kao standardizirane dijelove koji su revolucionalizirali Henry Fordovu montažnu liniju – jednom kad napravite pouzdani komad, možete ga koristiti gdje god je potrebno bez ponovnog izgradnje od nule.
Funkcije omogućuju grupiranje dijelova koda kako biste ih mogli ponovno koristiti u cijelom programu. Umjesto kopiranja i lijepljenja iste logike svugdje, možete jednom stvoriti funkciju i pozvati je kad god je potrebno. Ovaj pristup održava vaš kod organiziranim i olakšava ažuriranja.
Funkcije vam omogućuju da grupirate dijelove koda kako biste ih mogli ponovno koristiti kroz svoj program. Umjesto da svaki put kopirate i lijepite istu logiku, možete jednom stvoriti funkciju i pozvati je kad god vam zatreba. Ovakav pristup održava vaš kod urednim i znatno olakšava ažuriranja.
U ovoj lekciji naučit ćete kako stvoriti vlastite funkcije, proslijediti im informacije i dobiti korisne rezultate. Otkrit ćete razliku između funkcija i metoda, naučiti moderne sintakse i vidjeti kako funkcije mogu surađivati s drugim funkcijama. Ove koncepte ćemo graditi korak po korak.
U ovom ćemo se satu naučiti kako kreirati vlastite funkcije, kako im predavati informacije i kako dobiti korisne rezultate natrag. Otkrit ćete razliku između funkcija i metoda, naučiti moderne sintakse i vidjeti kako funkcije mogu raditi s drugim funkcijama. Izgradit ćemo ove koncepte korak po korak.
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode i Funkcije")
> 🎥 Kliknite na sliku iznad za video o metodama i funkcijama.
> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
> 🎥 Kliknite na gornju sliku za video o metodama i funkcijama.
> Ovaj lekciju možete pohađati na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
```mermaid
mindmap
root((JavaScript Funkcije))
Osnovni Pojmovi
Deklaracija
Tradicionalna sintaksa
Sintaksa strelične funkcije
Pozivanje
Korištenje zagrada
Zagrade obavezne
Parametri
Ulazne Vrijednosti
Više parametara
Zadane vrijednosti
Argumenti
Proslijeđene vrijednosti
Mogu biti bilo koja vrsta
Povratne Vrijednosti
Izlazni Podaci
return naredba
Izlaz iz funkcije
Korištenje Rezultata
Spremi u varijable
Lančane funkcije
Napredni Obrasci
Višeg Nivoa
Funkcije kao parametri
Povratne funkcije
Anonimne
Nije potrebno ime
Definicija u liniji
```
## Funkcije
Funkcija je samostalni blok koda koji obavlja određeni zadatak. Ona obuhvaća logiku koju možete izvršiti kad god je to potrebno.
Funkcija je samostalni blok koda koji izvršava određeni zadatak. Ona enkapsulira logiku koju možete pokrenuti kad god zatrebate.
Umjesto da pišete isti kod više puta u svom programu, možete ga pakirati u funkciju i pozvati tu funkciju kad god vam zatreba. Ovaj pristup održava vaš kod čistim i olakšava ažuriranja. Zamislite izazov održavanja ako biste morali mijenjati logiku koja je raspršena na 20 različitih mjesta u vašem kodu.
Umjesto da pišete isti kod više puta kroz program, možete ga upakirati u funkciju i pozvati tu funkciju kad vam zatreba. Ovaj pristup održava vaš kod čistim i znatno olakšava ažuriranja. Zamislite izazov održavanja ako trebate promijeniti logiku raspršenu na 20 različitih mjesta u vašem kodnom bazenu.
Važno je davati funkcijama opisna imena. Dobro imenovana funkcija jasno komunicira svoju svrhu – kada vidite `cancelTimer()`, odmah razumijete što ona radi, baš kao što jasno označena tipka govori što će se dogoditi kada je pritisnete.
Važno je imenovati vaše funkcije opisno. Dobro imenovana funkcija jasno komunicira svoju svrhu – kad vidite `cancelTimer()`, odmah shvaćate što radi, baš kao što jasno označeno dugme govori točno što će se dogoditi kad ga kliknete.
## Stvaranje i pozivanje funkcije
## Kreiranje i pozivanje funkcije
Pogledajmo kako stvoriti funkciju. Sintaksa slijedi dosljedan obrazac:
```javascript
function nameOfFunction() { // function definition
// function definition/body
function nameOfFunction() { // definicija funkcije
// definicija/tijelo funkcije
}
```
Razložimo ovo:
Raspakirajmo ovo:
- Ključna riječ `function` govori JavaScriptu "Hej, stvaram funkciju!"
- `nameOfFunction` je mjesto gdje dajete svojoj funkciji opisno ime
- Zagrade `()` su mjesto gdje možete dodati parametre (o tome ćemo uskoro)
- `nameOfFunction` je mjesto gdje funkciji dajete opisno ime
- Zagrade `()` su mjesto gdje možete dodati parametre (o tome uskoro)
- Vitičaste zagrade `{}` sadrže stvarni kod koji se izvršava kada pozovete funkciju
Stvorimo jednostavnu funkciju za pozdrav kako bismo to vidjeli u praksi:
Napravimo jednostavnu funkciju pozdrava da to vidimo u praksi:
```javascript
function displayGreeting() {
@ -59,34 +107,57 @@ function displayGreeting() {
}
```
Ova funkcija ispisuje "Hello, world!" u konzolu. Kada je jednom definirate, možete je koristiti koliko god puta želite.
Ova funkcija ispisuje "Hello, world!" u konzolu. Nakon što ju definirate, možete je koristiti onoliko puta koliko vam treba.
Da biste izvršili (ili "pozvali") svoju funkciju, napišite njezino ime nakon kojeg slijede zagrade. JavaScript vam omogućuje da definirate funkciju prije ili nakon što je pozovete – JavaScript engine će se pobrinuti za redoslijed izvršavanja.
Da biste izvršili (ili "pozvali") funkciju, napišite njeno ime praćeno zagradama. JavaScript vam dopušta definirati funkciju prije ili poslije njezinog poziva – JavaScriptov engine će se pobrinuti za redoslijed izvršenja.
```javascript
// calling our function
// pozivanje naše funkcije
displayGreeting();
```
Kada pokrenete ovu liniju, ona izvršava sav kod unutar vaše funkcije `displayGreeting`, prikazujući "Hello, world!" u konzoli vašeg preglednika. Ovu funkciju možete pozvati više puta.
> **Napomena:** Tijekom ovih lekcija koristili ste **metode**. `console.log()` je metoda – u osnovi funkcija koja pripada objektu `console`. Ključna razlika je u tome što su metode vezane uz objekte, dok funkcije stoje samostalno. Mnogi programeri koriste ove izraze naizmjenično u svakodnevnom razgovoru.
Kad pokrenete ovaj redak, izvršava se sav kod unutar vaše funkcije `displayGreeting`, prikazujući "Hello, world!" u konzoli vašeg preglednika. Ovu funkciju možete pozivati više puta.
### 🧠 **Provjera osnova funkcija: Izgradnja prvih funkcija**
**Pogledajmo kako stojite s osnovama funkcija:**
- Možete li objasniti zašto koristimo vitičaste zagrade `{}` u definicijama funkcija?
- Što se događa ako napišete `displayGreeting` bez zagrada?
- Zašto biste željeli pozvati istu funkciju više puta?
```mermaid
flowchart TD
A["✏️ Definiraj funkciju"] --> B["📦 Pakiraj kod"]
B --> C["🏷️ Daj mu ime"]
C --> D["📞 Pozovi kad je potrebno"]
D --> E["🔄 Ponovno koristi bilo gdje"]
F["💡 Prednosti"] --> F1["Nema ponavljanja koda"]
F --> F2["Lako održavanje"]
F --> F3["Jasna organizacija"]
F --> F4["Jednostavnije testiranje"]
style A fill:#e3f2fd
style E fill:#e8f5e8
style F fill:#fff3e0
```
> **Napomena:** Tijekom ovih lekcija koristili ste **metode**. `console.log()` je metoda – zapravo funkcija koja pripada objektu `console`. Ključna razlika je u tome što su metode prikačene na objekte, dok funkcije stoje samostalno. Mnogi developeri ove termine koriste naizmjenično u svakodnevnom govoru.
### Najbolje prakse za funkcije
Evo nekoliko savjeta koji će vam pomoći da pišete kvalitetne funkcije:
Evo nekoliko savjeta kako napisati odlične funkcije:
- Dajte svojim funkcijama jasna, opisna imena – vaša buduća verzija će vam biti zahvalna!
- Koristite **camelCase** za imena koja se sastoje od više riječi (npr. `calculateTotal` umjesto `calculate_total`)
- Neka svaka funkcija bude usmjerena na obavljanje jednog zadatka
- Dajte funkcijama jasna i opisna imena – vaš budući ja će vam biti zahvalan!
- Koristite **camelCase** za višerječena imena (npr. `calculateTotal` umjesto `calculate_total`)
- Neka svaka funkcija bude fokusirana na jedan zadatak koji radi dobro
## Prosljeđivanje informacija funkciji
## Predavanje informacija funkciji
Naša funkcija `displayGreeting` je ograničena – može prikazati samo "Hello, world!" za sve. Parametri nam omogućuju da funkcije učinimo fleksibilnijima i korisnijima.
Naša funkcija `displayGreeting` je ograničena – može samo prikazati "Hello, world!" svima. Parametri nam omogućavaju da funkcije učinimo fleksibilnijima i korisnijima.
**Parametri** djeluju kao rezervirana mjesta gdje možete umetnuti različite vrijednosti svaki put kada koristite funkciju. Na taj način, ista funkcija može raditi s različitim informacijama pri svakom pozivu.
**Parametri** djeluju kao rezervirana mjesta u koje možete ubaciti različite vrijednosti svaki put kad koristite funkciju. Na taj način ista funkcija može raditi s različitim informacijama pri svakom pozivu.
Parametre navodite unutar zagrada kada definirate funkciju, odvajajući više parametara zarezima:
Parametre navodite unutar zagrada kad definirate funkciju, odvajajući ih zarezima:
```javascript
function name(param, param2, param3) {
@ -94,9 +165,9 @@ function name(param, param2, param3) {
}
```
Svaki parametar djeluje kao rezervirano mjesto – kada netko pozove vašu funkciju, pružit će stvarne vrijednosti koje se ubacuju na ta mjesta.
Svaki parametar djeluje kao rezervirano mjesto – kad netko pozove vašu funkciju, on/ona predaje stvarne vrijednosti koje se stavljaju u ta mjesta.
Ažurirajmo našu funkciju pozdrava kako bismo prihvatili ime osobe:
Ažurirajmo našu funkciju pozdrava da prihvati ime:
```javascript
function displayGreeting(name) {
@ -105,22 +176,44 @@ function displayGreeting(name) {
}
```
Primijetite kako koristimo obrnute navodnike (`` ` ``) i `${}` za umetanje imena izravno u našu poruku – to se zove predložak literal, i to je zaista koristan način za izgradnju stringova s pomiješanim varijablama.
Primijetite kako koristimo znakove za navodnike unatrag (`` ` ``) i `${}` za umetanje imena direktno u našu poruku – ovo se zove predložak stringa i vrlo je zgodan način za sastavljanje stringova s varijablama.
Sada, kada pozovemo našu funkciju, možemo proslijediti bilo koje ime:
Sad kad pozovemo funkciju, možemo predati bilo koje ime:
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
// prikazuje "Hello, Christopher!" prilikom pokretanja
```
JavaScript uzima string `'Christopher'`, dodjeljuje ga parametru `name` i stvara personaliziranu poruku "Hello, Christopher!"
```mermaid
flowchart LR
A["🎯 Poziv funkcije"] --> B["📥 Parametri"]
B --> C["⚙️ Tijelo funkcije"]
C --> D["📤 Rezultat"]
A1["displayGreeting('Alice')"] --> A
B1["ime = 'Alice'"] --> B
C1["Predložak literala\n\`Bok, \${ime}!\`"] --> C
D1["'Bok, Alice!'"] --> D
E["🔄 Tipovi parametara"] --> E1["Nizovi"]
E --> E2["Brojevi"]
E --> E3["Booleani"]
E --> E4["Objekti"]
E --> E5["Funkcije"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
```
## Zadane vrijednosti
Što ako želimo učiniti neke parametre opcionalnima? Tu dolaze u igru zadane vrijednosti!
Što ako želimo neke parametre učiniti opcionalnima? Evo koristi zadanih vrijednosti!
Recimo da želimo omogućiti ljudima da prilagode riječ za pozdrav, ali ako je ne navedu, jednostavno ćemo koristiti "Hello" kao rezervnu opciju. Zadane vrijednosti možete postaviti pomoću znaka jednakosti, baš kao kod postavljanja varijable:
Recimo da želimo omogućiti korisnicima da prilagode pozdravnu riječ, ali ako je ne navedu, koristit ćemo "Hello" kao zadanu vrijednost. Zadne vrijednosti postavljate koristeći znak jednakosti, baš kao kod postavljanja varijable:
```javascript
function displayGreeting(name, salutation='Hello') {
@ -128,35 +221,63 @@ function displayGreeting(name, salutation='Hello') {
}
```
Ovdje je `name`još uvijek obavezan, ali `salutation` ima rezervnu vrijednost `'Hello'` ako nitko ne navede drugačiji pozdrav.
Ovdje je `name`i dalje obavezan, ali `salutation` ima rezervnu vrijednost `'Hello'` ako netko ne navede drugačiji pozdrav.
Sada ovu funkciju možemo pozvati na dva različita načina:
Sada možemo pozvati ovu funkciju na dva različita načina:
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
// prikazuje "Zdravo, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
// prikazuje "Bok, Christopher"
```
U prvom pozivu JavaScript koristi zadani "Hello" jer nismo naveli pozdrav. U drugom pozivu koristi naš prilagođeni "Hi". Ova fleksibilnost čini funkcije prilagodljivima različitim scenarijima.
U prvom pozivu JavaScript koristi zadano "Hello" jer nismo naveli pozdrav. U drugom pozivu koristi naš prilagođeni "Hi". Ova fleksibilnost čini funkcije prilagodljivima različitim situacijama.
### 🎛️ **Provjera razumijevanja parametara: Čineći funkcije fleksibilnima**
**Testirajte svoje razumijevanje parametara:**
- Koja je razlika između parametra i argumenta?
- Zašto su zadane vrijednosti korisne u stvarnom programiranju?
- Možete li predvidjeti što se događa ako proslijedite više argumenata nego parametara?
```mermaid
stateDiagram-v2
[*] --> NoParams: funkcija greet() {}
[*] --> WithParams: funkcija greet(name) {}
[*] --> WithDefaults: funkcija greet(name, greeting='Bok') {}
NoParams --> Static: Isti ishod uvijek
WithParams --> Dynamic: Mijenja se s unosom
WithDefaults --> Flexible: Opcionalna prilagodba
Static --> [*]
Dynamic --> [*]
Flexible --> [*]
note right of WithDefaults
Najfleksibilniji pristup
Unazad kompatibilan
end note
```
> **Savjet za profesionalce**: Zadani parametri čine vaše funkcije pristupačnijima. Korisnici mogu brzo početi s razumijevanjem zadanim vrijednostima, ali ih i dalje prilagoditi po potrebi!
## Povratne vrijednosti
Naše funkcije do sada su samo ispisivale poruke u konzolu, ali što ako želite da funkcija nešto izračuna i vrati vam rezultat?
Dosad su naše funkcije samo ispisivale poruke u konzolu, ali što ako želite da funkcija nešto izračuna i vrati rezultat?
Tu dolaze **povratne vrijednosti**. Umjesto da samo nešto prikazuje, funkcija vam može vratiti vrijednost koju možete pohraniti u varijablu ili koristiti u drugim dijelovima koda.
Tu na scenu stupaju **povratne vrijednosti**. Umjesto da samo nešto prikaže, funkcija može vratiti vrijednost koju možete spremiti u varijablu ili koristiti u drugim dijelovima koda.
Da biste vratili vrijednost, koristite ključnu riječ `return` nakon koje slijedi ono što želite vratiti:
Da biste poslali vrijednost natrag, koristite ključnu riječ `return` praćenu vrijednošću koju želite vratiti:
```javascript
return myVariable;
```
Evo nečega važnog: kada funkcija naiđe na `return` naredbu, odmah prestaje s izvršavanjem i vraća tu vrijednost onome tko ju je pozvao.
Evo važne stvari: kad funkcija dosegne `return` naredbu, odmah prestaje s radom i šalje tu vrijednost natrag onome tko ju je pozvao.
Modificirajmo našu funkciju pozdrava kako bi vraćala poruku umjesto da je ispisuje:
Promijenimo našu funkciju pozdrava da vraća poruku umjesto da je ispisuje:
```javascript
function createGreetingMessage(name) {
@ -165,23 +286,61 @@ function createGreetingMessage(name) {
}
```
Sada, umjesto da ispisuje pozdrav, ova funkcija stvara poruku i vraća je nama.
Sad ta funkcija umjesto ispisa poruke stvara poruku i vraća ju nama.
Da bismo koristili vraćenu vrijednost, možemo je pohraniti u varijablu kao i svaku drugu vrijednost:
Da bismo koristili vraćenu vrijednost, možemo ju spremiti u varijablu poput bilo koje druge vrijednosti:
Sada `greetingMessage` sadrži "Hello, Christopher" i možemo ga koristiti bilo gdje u našem kodu – za prikaz na web stranici, uključivanje u e-mail ili prosljeđivanje drugoj funkciji.
Sada `greetingMessage` sadrži "Hello, Christopher" i možemo je koristiti bilo gdje u kodu – prikazati na web stranici, uključiti u email ili predati drugoj funkciji.
```mermaid
flowchart TD
A["🔧 Obrada funkcije"] --> B{"izjava o vraćanju?"}
B -->|Da| C["📤 Povratna vrijednost"]
B -->|Ne| D["📭 Vraćanje undefined"]
C --> E["💾 Spremi u varijablu"]
C --> F["🔗 Koristi u izrazu"]
C --> G["📞 Proslijedi funkciji"]
D --> H["⚠️ Obično nije korisno"]
I["📋 Upotreba povratne vrijednosti"] --> I1["Izračunaj rezultate"]
**Procijenite svoje razumijevanje povratnih vrijednosti:**
- Što se događa s kodom nakon `return` naredbe u funkciji?
- Zašto je povrat vrijednosti često bolji od ispisivanja u konzolu?
- Može li funkcija vratiti različite tipove vrijednosti (string, broj, boolean)?
```mermaid
pie title "Česti tipovi vrijednosti povrata"
"Nizovi" : 30
"Brojevi" : 25
"Objekti" : 20
"Booleovi" : 15
"Nizovi (Arrays)" : 10
```
> **Ključni uvid**: Funkcije koje vraćaju vrijednosti su svestranije jer pozivatelj odlučuje što će s rezultatom napraviti. To vaš kod čini modularnijim i ponovo upotrebljivim!
## Funkcije kao parametri za funkcije
## Funkcije kao parametri funkcijama
Funkcije se mogu prosljeđivati kao parametri drugim funkcijama. Iako se ovaj koncept u početku može činiti složenim, to je moćna značajka koja omogućuje fleksibilne obrasce programiranja.
Funkcije se mogu predavati kao parametri drugim funkcijama. Iako ovaj koncept može djelovati složeno na početku, to je moćna značajka koja omogućava fleksibilne programske obrasce.
Ovaj obrazac je vrlo uobičajen kada želite reći "kada se nešto dogodi, učini nešto drugo." Na primjer, "kada tajmer završi, pokreni ovaj kod" ili "kada korisnik klikne gumb, pozovi ovu funkciju."
Ovaj uzorak je vrlo čest kad želite reći "kada se nešto dogodi, napravi ovo drugo." Na primjer, "kada tajmer završi, pokreni ovaj kod" ili "kada korisnik klikne gumb, pozovi ovu funkciju."
Pogledajmo `setTimeout`, koja je ugrađena funkcija koja čeka određeno vrijeme, a zatim pokreće neki kod. Moramo joj reći koji kod da pokrene – savršen slučaj za prosljeđivanje funkcije!
Pogledajmo `setTimeout`, što je ugrađena funkcija koja čeka određeno vrijeme, a zatim izvršava neki kod. Moramo joj reći koji kod pokrenuti – savršen slučaj za predavanje funkcije!
Isprobajte ovaj kod – nakon 3 sekunde vidjet ćete poruku:
@ -189,17 +348,17 @@ Isprobajte ovaj kod – nakon 3 sekunde vidjet ćete poruku:
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
// vrijednost tajmera je u milisekundama
setTimeout(displayDone, 3000);
```
Primijetite kako prosljeđujemo `displayDone` (bez zagrada) funkciji `setTimeout`. Ne pozivamo funkciju sami – predajemo je`setTimeout` i kažemo "pozovi ovo za 3 sekunde."
Primijetite kako predajemo `displayDone` (bez zagrada) funkciji `setTimeout`. Mi ne pozivamo funkciju sami – predajemo ju`setTimeout` i kažemo "pozovi ovo za 3 sekunde."
### Anonimne funkcije
Ponekad vam je potrebna funkcija samo za jednu stvar i ne želite joj dati ime. Razmislite – ako funkciju koristite samo jednom, zašto zatrpavati kod dodatnim imenom?
Ponekad trebate funkciju za samo jednu stvar i ne želite joj dati ime. Razmislite – ako funkciju koristite samo jednom, zašto nepotrebno zatrpavati kod imenom?
JavaScript vam omogućuje stvaranje **anonimnih funkcija**– funkcija bez imena koje možete definirati točno tamo gdje su vam potrebne.
JavaScript vam omogućuje stvaranje **anonimnih funkcija**– funkcije bez imena koje možete definirati točno tamo gdje ih trebate.
Evo kako možemo prepisati naš primjer s tajmerom koristeći anonimnu funkciju:
@ -209,13 +368,13 @@ setTimeout(function() {
}, 3000);
```
Ovo postiže isti rezultat, ali funkcija je definirana izravno unutar poziva `setTimeout`, eliminirajući potrebu za zasebnom deklaracijom funkcije.
Time se postiže isti rezultat, ali funkcija je definirana direktno unutar poziva `setTimeout`, uklanjajući potrebu za zasebnom deklaracijom funkcije.
### Funkcije sa strelicom
### Funkcije s "debela strelica"
Moderni JavaScript ima još kraći način pisanja funkcija, nazvan **funkcije sa strelicom**. Koriste `=>` (što izgleda kao strelica – zar ne?) i vrlo su popularne među programerima.
Moderni JavaScript ima još kraći način pisanja funkcija zvane **arrow functions** (funkcije sa strelicom). Koriste `=>` (izgleda kao strelica – shvatili ste?) i vrlo su popularne kod developera.
Funkcije sa strelicom omogućuju vam da preskočite ključnu riječ `function` i napišete sažetiji kod.
Funkcije sa strelicom omogućuju preskakanje ključne riječi `function` i pisanje sažetijeg koda.
Evo našeg primjera s tajmerom koristeći funkciju sa strelicom:
@ -225,11 +384,64 @@ setTimeout(() => {
}, 3000);
```
`()` je mjesto gdje bi išli parametri (prazno u ovom slučaju), zatim dolazi strelica `=>`, a na kraju tijelo funkcije u vitičastim zagradama. Ovo pruža istu funkcionalnost s sažetijom sintaksom.
Prazne zagrade `()` su mjesto za parametre (ovdje prazne), zatim dolazi strelica `=>`, i na kraju tijelo funkcije u vitičastim zagradama. Ovo pruža istu funkcionalnost s konciznijom sintaksom.
```mermaid
flowchart LR
A["📝 Stilovi funkcija"] --> B["Tradicionalno"]
A --> C["Arrow"]
A --> D["Anonimno"]
B --> B1["function name() {}"]
B --> B2["Hoistano"]
B --> B3["Imenovano"]
C --> C1["const name = () => {}"]
C --> C2["Kratka sintaksa"]
C --> C3["Moderan stil"]
D --> D1["function() {}"]
D --> D2["Bez imena"]
D --> D3["Jednokratna upotreba"]
E["⏰ Kada koristiti"] --> E1["Tradicionalno: Ponovno upotrebljive funkcije"]
E --> E2["Arrow: Kratki callbackovi"]
E --> E3["Anonimno: Obraditelji događaja"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### Kada koristiti koju strategiju
Kada biste trebali koristiti koji pristup? Praktična smjernica: ako ćete funkciju koristiti više puta, dajte joj ime i definirajte je zasebno. Ako je za jednu specifičnu upotrebu, razmislite o anonimnoj funkciji. I funkcije sa strelicom i tradicionalna sintaksa su valjani izbori, iako su funkcije sa strelicom sve prisutnije u modernim JavaScript kodnim bazama.
Kada biste trebali koristiti koji pristup? Praktično pravilo je: ako ćete funkciju koristiti više puta, dajte joj ime i definirajte je odvojeno. Ako je za specifičnu, jednokratnu upotrebu, razmislite o anonimnoj funkciji. Oba pristupa, strelične funkcije i tradicionalna sintaksa, su valjani izbori, iako su strelične funkcije češće u modernim JavaScript kodnim bazama.
- Kada biste radije koristili strelične funkcije umjesto tradicionalne sintakse funkcija?
- Koja je glavna prednost anonimnih funkcija?
- Možete li zamisliti situaciju u kojoj je imenovana funkcija bolja od anonimne?
```mermaid
quadrantChart
title Matrica Odluke Izbora Funkcije
x-axis Jednostavno --> Složeno
y-axis Jednokratna upotreba --> Višekratna upotreba
quadrant-1 Funkcije Strelice
quadrant-2 Imenovane Funkcije
quadrant-3 Anonimne Funkcije
quadrant-4 Tradicionalne Funkcije
Event Handlers: [0.3, 0.2]
Utility Functions: [0.7, 0.8]
Callbacks: [0.2, 0.3]
Class Methods: [0.8, 0.7]
Mathematical Operations: [0.4, 0.6]
```
> **Moderan trend**: Strelične funkcije postaju zadani izbor za mnoge developere zbog sažetosti sintakse, ali tradicionalne funkcije još uvijek imaju svoje mjesto!
---
@ -237,29 +449,29 @@ Kada biste trebali koristiti koji pristup? Praktična smjernica: ako ćete funkc
## 🚀 Izazov
Možete li u jednoj rečenici objasniti razliku između funkcija i metoda? Pokušajte!
Možete li jednim rečenicom izreći razliku između funkcija i metoda? Probajte!
## GitHub Copilot Agent Izazov 🚀
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Koristite Agent način rada za dovršetak sljedećeg izazova:
**Opis:** Kreirajte biblioteku korisnih matematičkih funkcija koja demonstrira različite koncepte funkcija obrađene u ovoj lekciji, uključujući parametre, zadane vrijednosti, povratne vrijednosti i funkcije sa strelicom.
**Opis:** Napravite pomoćnu biblioteku matematičkih funkcija koja demonstrira različite koncepte funkcija obrađene u ovoj lekciji, uključujući parametre, zadane vrijednosti, povratne vrijednosti i strelične funkcije.
**Zadatak:** Kreirajte JavaScript datoteku pod nazivom `mathUtils.js` koja sadrži sljedeće funkcije:
1. Funkciju `add` koja prima dva parametra i vraća njihov zbroj
2. Funkciju `multiply` s zadanim vrijednostima parametara (drugi parametar ima zadanu vrijednost 1)
3. Funkciju sa strelicom`square` koja prima broj i vraća njegov kvadrat
4. Funkciju `calculate` koja prihvaća drugu funkciju kao parametar i dva broja, a zatim primjenjuje tu funkciju na te brojeve
5. Demonstrirajte pozivanje svake funkcije s odgovarajućim testnim slučajevima
2. Funkciju `multiply` sa zadanim vrijednostima parametara (drugi parametar zadano 1)
3. Streličnu funkciju`square` koja prima broj i vraća njegov kvadrat
4. Funkciju `calculate` koja prima drugu funkciju kao parametar i dva broja te primjenjuje tu funkciju na ta dva broja
5. Prikažite pozivanje svake funkcije s odgovarajućim testnim primjerima
Saznajte više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) saznajte ovdje.
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app)
Vrijedi [pročitati malo više o funkcijama sa strelicom](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), jer se sve više koriste u kodnim bazama. Vježbajte pisanje funkcije, a zatim je prepišite koristeći ovu sintaksu.
Vrijedi [pročitati malo više o streličnim funkcijama](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) jer se sve više koriste u kodnim bazama. Prakticirajte pisanje funkcije, a zatim je prepišite koristeći ovaj sintaksis.
## Zadatak
@ -267,5 +479,105 @@ Vrijedi [pročitati malo više o funkcijama sa strelicom](https://developer.mozi
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
## 🧰 **Vaš JavaScript alatni set funkcija - Sažetak**
- Koja je najučinkovitija funkcija koju si do sada stvorio?
- Kako je učenje o funkcijama promijenilo tvoj pogled na organizaciju koda?
- Koju sintaksu funkcija preferiraš i zašto?
- Koji stvarni problem bi riješio pisanjem funkcije?
```mermaid
journey
title Evolucija Vašeg Povjerenja u Funkcije
section Danas
Zbunjeni Sintaksom: 3: You
Razumijevanje Osnova: 4: You
Pisanje Jednostavnih Funkcija: 5: You
section Ovaj Tjedan
Korištenje Parametara: 4: You
Vraćanje Vrijednosti: 5: You
Moderna Sintaksa: 5: You
section Sljedeći Mjesec
Kompozicija Funkcija: 5: You
Napredni Obrasci: 5: You
Poučavanje Druge: 5: You
```
> 🎉 **Ovladali ste jednim od najsnažnijih koncepata programiranja!** Funkcije su gradivni blokovi većih programa. Svaka aplikacija koju ikada napraviš koristit će funkcije za organizaciju, ponovnu upotrebu i strukturiranje koda. Sada razumiješ kako zapakirati logiku u višekratno upotrebljive komponente, čineći te učinkovitijim i uspješnijim programerom. Dobrodošao u svijet modularnog programiranja! 🚀
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju od odgovornosti**:
Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.
Jeste li se ikada zapitali kako aplikacije donose pametne odluke? Kao, na primjer, kako navigacijski sustav odabire najbržu rutu ili kako termostat odlučuje kada uključiti grijanje? Ovo je osnovni koncept donošenja odluka u programiranju.
```mermaid
journey
title Tvoja pustolovina donošenja odluka u JavaScriptu
section Osnove
Boolean vrijednosti: 5: You
Operator usporedbe: 4: You
Logičko razmišljanje: 5: You
section Osnovne odluke
If izjave: 4: You
If-Else logika: 5: You
Switch izjave: 4: You
section Napredna logika
Logički operatori: 5: You
Kompleksni uvjeti: 4: You
Ternarni izrazi: 5: You
```
Jeste li se ikada pitali kako aplikacije donose pametne odluke? Kao što navigacijski sustav bira najbržu rutu, ili kako termostat odlučuje kada uključiti grijanje? Ovo je osnovni koncept donošenja odluka u programiranju.
Baš kao što je Analitički stroj Charlesa Babbagea bio dizajniran da slijedi različite sekvence operacija na temelju uvjeta, moderni JavaScript programi moraju donositi odluke na temelju različitih okolnosti. Ova sposobnost grananja i donošenja odluka ono je što statični kod pretvara u responzivne, inteligentne aplikacije.
Baš kao što je Charles Babbageov Analitički stroj zamišljen da slijedi različite nizove operacija ovisno o uvjetima, moderni JavaScript programi trebaju donositi odluke na temelju različitih okolnosti. Ta sposobnost grananja i donošenja odluka je ono što statični kod pretvara u responzivne, inteligentne aplikacije.
U ovoj lekciji naučit ćete kako implementirati uvjetnu logiku u svoje programe. Istražit ćemo uvjetne naredbe, operatore usporedbe i logičke izraze koji omogućuju vašem kodu da procijeni situacije i odgovarajuće reagira.
U ovoj lekciji naučit ćete kako implementirati uvjetnu logiku u svoje programe. Istražit ćemo uvjetne izjave, operatore usporedbe i logičke izraze koji omogućuju vašem kodu da procijeni situaciju i odgovori prikladno.
## Kviz prije predavanja
## Pred-ispitni kviz
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/11)
Sposobnost donošenja odluka i kontroliranja toka programa temeljni je aspekt programiranja. Ovaj odjeljak pokriva kako kontrolirati put izvršavanja vaših JavaScript programa koristeći Booleove vrijednosti i uvjetnu logiku.
Sposobnost donošenja odluka i kontroliranja toka programa temeljni je aspekt programiranja. Ovaj odjeljak pokriva kako kontrolirati izvršni put vaših JavaScript programa koristeći Boolean vrijednosti i uvjetnu logiku.
> 🎥 Kliknite na sliku iznad za video o donošenju odluka.
> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## Kratki podsjetnik o Booleovim vrijednostima
> 🎥 Kliknite gornju sliku za video o donošenju odluka.
> Ovu lekciju možete pohađati na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
```mermaid
mindmap
root((Donošenje odluka))
Boolean Logic
točno/netočno
Rezultati usporedbe
Logički izrazi
Conditional Statements
if izjave
Jedan uvjet
Izvršavanje koda
if-else
Dva puta
Alternativne radnje
switch
Više opcija
Čista struktura
Operators
Comparison
=== !== < > <= >=
Odnosi vrijednosti
Logical
&& || !
Kombiniranje uvjeta
Advanced Patterns
Ternary
? : sintaksa
Inline odluke
Complex Logic
Ugniježđeni uvjeti
Više kriterija
```
## Kratki podsjetnik na Booleove vrijednosti
Prije nego što istražimo donošenje odluka, prisjetimo se Booleovih vrijednosti iz prethodne lekcije. Nazvane po matematičaru Georgeu Booleu, ove vrijednosti predstavljaju binarna stanja – ili `true` ili `false`. Nema nejasnoća, nema sredine.
Prije nego što krenemo u donošenje odluka, vratimo se na Booleove vrijednosti iz naše prethodne lekcije. Nazvane po matematičaru Georgu Booleu, ove vrijednosti predstavljaju binarne statuse– ili `true` ili `false`. Nema nejasnoća, nema sredine.
Ove binarne vrijednosti čine temelj sve računalne logike. Svaka odluka koju vaš program donosi u konačnici se svodi na Booleovu evaluaciju.
Ove binarne vrijednosti čine temelj cjelokupne računalne logike. Svaka odluka koju vaš program donese na kraju se svodi na Boolean evaluaciju.
Stvaranje Booleovih varijabli je jednostavno:
Kreiranje Boolean varijabli je jednostavno:
```javascript
let myTrueBool = true;
let myFalseBool = false;
```
Ovo stvara dvije varijable s eksplicitnim Booleovim vrijednostima.
✅ Booleove vrijednosti su nazvane po engleskom matematičaru, filozofu i logičaru Georgeu Booleu (1815.–1864.).
## Operatori usporedbe i Booleove vrijednosti
U praksi rijetko ćete ručno postavljati Booleove vrijednosti. Umjesto toga, generirat ćete ih evaluacijom uvjeta: "Je li ovaj broj veći od onog?" ili "Jesu li ove vrijednosti jednake?"
Operatori usporedbe omogućuju ove evaluacije. Oni uspoređuju vrijednosti i vraćaju Booleove rezultate na temelju odnosa između operanada.
| `<` | **Manje od**: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost `true` ako je vrijednost na lijevoj strani manja od one na desnoj | `5 < 6 // true` |
| `<=` | **Manje ili jednako**: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost `true` ako je vrijednost na lijevoj strani manja ili jednaka onoj na desnoj | `5 <= 6 // true` |
| `>` | **Veće od**: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost `true` ako je vrijednost na lijevoj strani veća od one na desnoj | `5 > 6 // false` |
| `>=` | **Veće ili jednako**: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost `true` ako je vrijednost na lijevoj strani veća ili jednaka onoj na desnoj | `5 >= 6 // false` |
| `===` | **Stroga jednakost**: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost `true` ako su vrijednosti na desnoj i lijevoj strani jednake I iste vrste | `5 === 6 // false` |
| `!==` | **Nejednakost**: Uspoređuje dvije vrijednosti i vraća suprotnu Booleovu vrijednost od one koju bi vratio operator stroge jednakosti | `5 !== 6 // true` |
✅ Provjerite svoje znanje pisanjem nekoliko usporedbi u konzoli vašeg preglednika. Iznenađuje li vas neki od vraćenih podataka?
Ovo stvara dvije varijable s eksplicitnim Boolean vrijednostima.
✅ Booleovi su nazvani po engleskom matematičaru, filozofu i logičaru Georgu Booleu (1815.–1864.).
## Operatori usporedbe i Booleovi
U praksi rijetko ručno postavljate Boolean vrijednosti. Umjesto toga, generirat ćete ih procjenom uvjeta: "Je li ovaj broj veći od onog?" ili "Jesu li ove vrijednosti jednake?"
Operateri usporedbe omogućuju ove procjene. Oni uspoređuju vrijednosti i vraćaju Boolean rezultate ovisno o odnosu između operanada.
| `<` | **Manje od**: Uspoređuje dvije vrijednosti i vraća `true` ako je vrijednost s lijeve strane manja od one s desne | `5 < 6 // true` |
| `<=` | **Manje ili jednako**: Uspoređuje dvije vrijednosti i vraća `true` ako je vrijednost s lijeve strane manja ili jednaka onoj s desne | `5 <= 6 // true` |
| `>` | **Veće od**: Uspoređuje dvije vrijednosti i vraća `true` ako je vrijednost s lijeve strane veća od one s desne | `5 > 6 // false` |
| `>=` | **Veće ili jednako**: Uspoređuje dvije vrijednosti i vraća `true` ako je vrijednost s lijeve strane veća ili jednaka onoj s desne | `5 >= 6 // false` |
| `===` | **Stroga jednakost**: Uspoređuje dvije vrijednosti i vraća `true` ako su vrijednosti lijevo i desno jednake I ISTOG SU tipa podataka. | `5 === 6 // false` |
| `!==` | **Nejednakost**: Uspoređuje dvije vrijednosti i vraća suprotni Boolean rezultat onome što bi strogi operator jednakosti vratio | `5 !== 6 // true` |
✅ Provjerite svoje znanje tako da napišete neke usporedbe u konzolu vašeg preglednika. Iznenađuju li vas neki rezultati?
### 🧠 **Provjera majstorstva u usporedbi: Razumijevanje Booleove logike**
**Testirajte svoje razumijevanje usporedbe:**
- Zašto mislite da je `===` (stroga jednakost) općenito poželjniji od `==` (labave jednakosti)?
- Možete li predvidjeti što `5 === '5'` vraća? A što `5 == '5'`?
- Koja je razlika između `!==` i `!=`?
```mermaid
stateDiagram-v2
[*] --> Comparison: Dvije vrijednosti
Comparison --> StrictEqual: === ili !==
Comparison --> Relational: < > <= >=
StrictEqual --> TypeCheck: Provjera tipa I vrijednosti
Relational --> NumberCompare: Pretvori u brojeve
TypeCheck --> BooleanResult: istina ili laž
NumberCompare --> BooleanResult
note right of StrictEqual
Preporučeni pristup
Bez konverzije tipa
end note
note right of Relational
Korisno za raspon
Numerička usporedbe
end note
```
> **Savjet**: Uvijek koristite `===` i `!==` za provjere jednakosti, osim ako vam izričito ne treba konverzija tipa. Time sprječavate neočekivano ponašanje!
## If naredba
## If izjava
Naredba `if` je poput postavljanja pitanja u vašem kodu. "Ako je ovaj uvjet istinit, onda učini ovu stvar." To je vjerojatno najvažniji alat koji ćete koristiti za donošenje odluka u JavaScriptu.
`if` izjava je kao postaviti pitanje u svom kodu. „Ako je ovaj uvjet istinit, onda učini ovo.“ Vjerojatno je najvažniji alat koji ćete koristiti za donošenje odluka u JavaScriptu.
Evo kako to funkcionira:
```javascript
if (condition) {
// Condition is true. Code in this block will run.
// Uvjet je istinit. Kod u ovom bloku će se izvršiti.
}
```
Uvjet ide unutar zagrada, a ako je `true`, JavaScript izvršava kod unutar vitičastih zagrada. Ako je `false`, JavaScript jednostavno preskače cijeli taj blok.
Uvjet je unutar zagrada, i ako je `true`, JavaScript izvršava kod unutar vitičastih zagrada. Ako je `false`, JavaScript preskače cijeli blok.
Često ćete koristiti operatore usporedbe za stvaranje ovih uvjeta. Pogledajmo praktičan primjer:
Češće ćete koristiti operatore usporedbe za stvaranje ovih uvjeta. Pogledajmo praktičan primjer:
```javascript
let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
// Uvjet je istinit. Kod u ovom bloku će se izvršiti.
console.log("Getting a new laptop!");
}
```
Budući da `1000 >= 800` evaluira na `true`, kod unutar bloka se izvršava, prikazujući "Kupujem novi laptop!" u konzoli.
## If..Else naredba
Budući da `1000 >= 800` evaluira u `true`, kod unutar bloka se izvršava i u konzoli se prikazuje "Kupujem novi laptop!".
```mermaid
flowchart TD
A["🚀 Početak programa"] --> B{"💰 currentMoney >= laptopPrice?"}
B -->|true| C["🎉 'Kupujem novi laptop!'"]
B -->|false| D["⏭️ Preskoči blok koda"]
C --> E["📋 Nastavi program"]
D --> E
F["📊 Struktura If naredbe"] --> F1["if (uvjet) {"]
F1 --> F2[" // kod koji se izvršava ako je točno"]
F2 --> F3["}"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
style F fill:#e3f2fd
```
## If..Else izjava
Ali što ako želite da vaš program učini nešto drugo kada uvjet nije ispunjen? Tu dolazi `else`– to je poput rezervnog plana.
Ali što ako želite da vaš program učini nešto drugo kad je uvjet lažan? Tu dolazi `else`– kao rezervni plan.
Naredba `else` vam omogućuje da kažete "ako ovaj uvjet nije istinit, učini ovu drugu stvar umjesto toga."
`else` izjava vam daje način reći "ako ovaj uvjet nije istinit, onda učini nešto drugo".
```javascript
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
// Uvjet je istinit. Kod u ovom bloku će se izvršiti.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
// Uvjet je neistinit. Kod u ovom bloku će se izvršiti.
console.log("Can't afford a new laptop, yet!");
}
```
Sada, budući da je `500 >= 800``false`, JavaScript preskače prvi blok i umjesto toga izvršava `else` blok. Vidjet ćete "Još si ne mogu priuštiti novi laptop!" u konzoli.
✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda pokretanjem u konzoli preglednika. Promijenite vrijednosti varijabli currentMoney i laptopPrice kako biste promijenili vraćeni `console.log()`.
Sada, budući da je `500 >= 800``false`, JavaScript preskače prvi blok i izvršava `else` blok. U konzoli ćete vidjeti "Još ne mogu priuštiti novi laptop!".
✅ Testirajte svoje razumijevanje ovog koda i sljedećeg tako što ćete ga pokrenuti u konzoli preglednika. Promijenite vrijednosti varijabli currentMoney i laptopPrice da promijenite ispis u `console.log()`.
### 🎯 **Provjera if-else logike: Grane izbora**
**Procijenite svoje razumijevanje uvjetne logike:**
- Što se događa ako `currentMoney` točno odgovara `laptopPrice`?
- Možete li smisliti stvarni scenarij gdje bi if-else logika bila korisna?
- Kako biste mogli proširiti ovo da pokriva više cjenovnih razreda?
```mermaid
flowchart TD
A["🔍 Procijeni uvjet"] --> B{"Je li uvjet točan?"}
B -->|Da| C["📤 Izvrši IF blok"]
B -->|Ne| D["📥 Izvrši ELSE blok"]
C --> E["✅ Jedan put je odabran"]
D --> E
F["🌐 Primjeri iz stvarnog svijeta"] --> F1["Status prijave korisnika"]
F --> F2["Provjera dobi"]
F --> F3["Validacija obrasca"]
F --> F4["Promjene stanja igre"]
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#e3f2fd
style F fill:#f3e5f5
```
> **Ključni uvid**: If-else osigurava da se uzme točno jedan put. Time se garantira da vaš program uvijek ima odgovor na svaki uvjet!
## Switch naredba
## Switch izjava
Ponekad trebate usporediti jednu vrijednost s više opcija. Iako biste mogli povezati nekoliko `if..else` naredbi, ovaj pristup postaje nezgrapan. Naredba `switch` pruža čišću strukturu za rukovanje s više diskretnih vrijednosti.
Ponekad trebate usporediti jednu vrijednost s više opcija. Iako možete ugnijezditi nekoliko `if..else` izjava, taj pristup postaje nezgrapan. `switch` izjava nudi čišću strukturu za rukovanje višestrukim diskretnim vrijednostima.
Koncept nalikuje mehaničkim sustavima prebacivanja koji su se koristili u ranim telefonskim centralama – jedna ulazna vrijednost određuje koji specifičan put izvršenja slijedi.
Koncept podsjeća na mehaničke sklopke koje su se koristile u ranim telefonskim centrima – jedna ulazna vrijednost određuje koji specifični put izvođenje slijedi.
```javascript
switch (expression) {
case x:
// code block
// blok koda
break;
case y:
// code block
// blok koda
break;
default:
// code block
// blok koda
}
```
Evo kako je strukturirana:
Evo kako je strukturirano:
- JavaScript evaluira izraz jednom
- Pregledava svaki `case` kako bi pronašao podudaranje
- Kada pronađe podudaranje, izvršava taj blok koda
- `break` govori JavaScriptu da stane i izađe iz switch-a
- Ako nijedan slučaj ne odgovara, izvršava `default` blok (ako ga imate)
- Pregleda svaki `case` da pronađe podudaranje
- Kad nađe podudaranje, izvršava taj blok koda
- `break` govori JavaScriptu da prekine i izađe iz switcha
- Ako nijedan slučaj ne odgovara, izvršava se `default` blok (ako postoji)
```javascript
// Program using switch statement for day of week
// Program koji koristi switch naredbu za dan u tjednu
let dayNumber = 2;
let dayName;
@ -164,70 +310,166 @@ switch (dayNumber) {
console.log(`Today is ${dayName}`);
```
U ovom primjeru, JavaScript vidi da je `dayNumber``2`, pronalazi odgovarajući `case 2`, postavlja `dayName` na "Utorak" i zatim izlazi iz switch-a. Rezultat? "Danas je utorak" se prikazuje u konzoli.
U ovom primjeru, JavaScript vidi da je `dayNumber``2`, nalazi poklapanje s `case 2`, postavlja `dayName` na "Tuesday", i zatim izlazi iz switcha. Rezultat? "Today is Tuesday" se ispisuje u konzolu.
✅ Testirajte svoje razumijevanje ovog i sljedećeg koda tako da ga pokrenete u konzoli preglednika. Promijenite vrijednost varijable a da biste promijenili ispis u `console.log()`.
### 🔄 **Majstorija switch izjave: Više opcija**
✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda pokretanjem u konzoli preglednika. Promijenite vrijednosti varijable a kako biste promijenili vraćeni `console.log()`.
**Testirajte razumijevanje switcha:**
- Što se događa ako zaboravite `break` izjavu?
- Kada biste koristili `switch` umjesto više `if-else` izjava?
- Zašto je `default` slučaj koristan čak i ako mislite da ste pokrili sve mogućnosti?
## Logički operatori i Booleove vrijednosti
```mermaid
pie title "Kada koristiti svaku strukturu odluke"
"Jednostavni if-else" : 40
"Složeni if-else lanci" : 25
"Switch naredbe" : 20
"Ternarni operatori" : 15
```
> **Najbolja praksa**: Koristite `switch` kad uspoređujete jednu varijablu s više specifičnih vrijednosti. Koristite `if-else` za provjere raspona ili složene uvjete!
Složene odluke često zahtijevaju evaluaciju više uvjeta istovremeno. Baš kao što Booleova algebra omogućuje matematičarima kombiniranje logičkih izraza, programiranje pruža logičke operatore za povezivanje više Booleovih uvjeta.
## Logički operatori i Booleovi
Ovi operatori omogućuju sofisticiranu uvjetnu logiku kombiniranjem jednostavnih evaluacija true/false.
Složene odluke često zahtijevaju evaluaciju više uvjeta istodobno. Baš kao što Booleova algebra omogućuje matematičarima kombiniranje logičkih izraza, programiranje pruža logičke operatore za povezivanje više Boolean uvjeta.
| `&&` | **Logički AND**: Uspoređuje dva Booleova izraza. Vraća true **samo** ako su obje strane istinite | `(5 > 3) && (5 < 10) // Obje strane su istinite. Vraća true` |
| `\|\|` | **Logički OR**: Uspoređuje dva Booleova izraza. Vraća true ako je barem jedna strana istinita | `(5 > 10) \|\| (5 < 10) // Jedna strana je false, druga je true. Vraća true` |
| `!` | **Logički NOT**: Vraća suprotnu vrijednost Booleovog izraza | `!(5 > 10) // 5 nije veće od 10, pa "!" čini da bude true` |
Ovi operatori omogućuju sofisticiranu uvjetnu logiku spajajući jednostavne true/false evaluacije.
Ovi operatori omogućuju kombiniranje uvjeta na koristan način:
- AND (`&&`) znači da oba uvjeta moraju biti istinita
- OR (`||`) znači da barem jedan uvjet mora biti istinit
| `&&` | **Logički AND**: Uspoređuje dva Boolean izraza. Vraća true **samo** ako su oba uvjeta istinita | `(5 > 3) && (5 < 10) // Oba uvjeta su istinita. Vraća true` |
| `\|\|` | **Logički OR**: Uspoređuje dva Boolean izraza. Vraća true ako je barem jedan uvjet istinit | `(5 > 10) \|\| (5 < 10) // Jedan je uvjet lažan, drugi istinit. Vraća true` |
| `!` | **Logički NOT**: Vraća suprotnu vrijednost Boolean izraza | `!(5 > 10) // 5 nije veće od 10, pa "!" čini izraz istinitim` |
Ovi operatori vam omogućuju korisno spajanje uvjeta:
- AND (`&&`) znači da oba uvjeta moraju biti istinita
- OR (`||`) znači da bar jedan uvjet mora biti istinit
- NOT (`!`) mijenja istinitost u neistinitost (i obratno)
Pogledajmo ove logičke operatore u akciji s realističnijim primjerom:
Pogledajmo ove logičke operatore u praksi s realističnijim primjerom:
```javascript
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Cijena laptopa s 20 posto popusta
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
// Condition is true. Code in this block will run.
// Uvjet je istinit. Kod u ovom bloku će se izvršiti.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
// Uvjet je neistinit. Kod u ovom bloku će se izvršiti.
console.log("Can't afford a new laptop, yet!");
}
```
U ovom primjeru: izračunavamo cijenu s popustom od 20% (640), zatim procjenjujemo pokrivaju li naša dostupna sredstva cijenu ili cijenu s popustom. Budući da 600 zadovoljava prag cijene s popustom od 640, uvjet se evaluira kao true.
U ovom primjeru: računamo 20% popusta (640), zatim procjenjujemo pokrivaju li naša dostupna sredstva ili puni iznos ILI sniženi iznos. Budući da 600 nije dostatan za umanjeni iznos od 640, uvjet evaluira u false.
**Testirajte svoje razumijevanje logičkih operatora:**
- U izrazu `A && B`, što se događa ako je A lažno? Da li se B uopće procjenjuje?
- Možete li zamisliti situaciju gdje biste trebali koristiti sva tri operatora (&&, ||, !) zajedno?
- Koja je razlika između `!user.isActive` i `user.isActive !== true`?
```mermaid
stateDiagram-v2
[*] --> EvaluateA: A && B
EvaluateA --> CheckB: A je istina
EvaluateA --> ReturnFalse: A je laž
CheckB --> ReturnTrue: B je istina
CheckB --> ReturnFalse: B je laž
[*] --> EvaluateC: A || B
EvaluateC --> ReturnTrue: A je istina
EvaluateC --> CheckD: A je laž
CheckD --> ReturnTrue: B je istina
CheckD --> ReturnFalse: B je laž
note right of EvaluateA
Evaluacija kratkim spojevima:
Ako je A laž, B se nikada ne provjerava
end note
```
> **Savjet za performanse**: JavaScript koristi „kratki spoj“ - u `A && B`, ako je A lažno, B se ne evaluira. Iskoristite to u svoju korist!
### Operator negacije
Ponekad je lakše razmišljati o tome kada nešto NIJE istinito. Kao, umjesto da pitate "Je li korisnik prijavljen?", možda želite pitati "Je li korisnik NIJE prijavljen?" Operator uskličnika (`!`) preokreće logiku za vas.
Ponekad je lakše razmišljati o tome kada nešto NIJE istinito. Kao umjesto da pitate "Je li korisnik prijavljen?", možda ćete htjeti pitati "Nije li korisnik prijavljen?" Operator uskličnika (`!`) okreće logiku za vas.
```javascript
if (!condition) {
// runs if condition is false
// izvršava se ako je uvjet netočan
} else {
// runs if condition is true
// izvršava se ako je uvjet točan
}
```
Operator `!` je poput izreke "suprotno od..." – ako je nešto `true`, `!` to čini `false`, i obrnuto.
Operator `!` je kao da kažete "suprotno od..." – ako je nešto `true`, `!` ga čini `false`, i obratno.
### Ternarni izrazi
Za jednostavne uvjetne dodjele, JavaScript pruža **ternarni operator**. Ova sažeta sintaksa omogućuje vam pisanje uvjetnog izraza u jednom retku, korisno kada trebate dodijeliti jednu od dvije vrijednosti na temelju uvjeta.
Za jednostavne uvjetne dodjele, JavaScript pruža **ternarni operator**. Ovaj sažeti zapis omogućuje pisanje uvjetnog izraza u jednoj liniji, korisno kada trebate dodijeliti jednu od dvije vrijednosti ovisno o uvjetu.
```javascript
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
```
Čita se kao pitanje: "Je li ovaj uvjet istinit? Ako da, koristi ovu vrijednost. Ako ne, koristi onu vrijednost."
Čita se kao pitanje: "Je li ovaj uvjet istinit? Ako jest, koristi ovu vrijednost. Ako nije, koristi onu vrijednost."
Ispod je konkretniji primjer:
@ -237,11 +479,11 @@ let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```
✅ Odvojite trenutak da nekoliko puta pročitate ovaj kod. Razumijete li kako ovi operatori funkcioniraju?
✅ Provedite minutu čitajući ovaj kod nekoliko puta. Razumijete li kako ovi operatori rade?
Evo što ovaj redak govori: "Je li `firstNumber` veći od `secondNumber`? Ako da, stavi `firstNumber` u `biggestNumber`. Ako ne, stavi `secondNumber` u `biggestNumber`."
Ova linija kaže: "Je li `firstNumber` veći od `secondNumber`? Ako jest, stavi `firstNumber` u `biggestNumber`. Ako nije, stavi `secondNumber` u `biggestNumber`."
Ternarni operator je samo kraći način pisanja ove tradicionalne `if..else`naredbe:
Ternarni operator je samo kraći način pisanja ove tradicionalne `if..else`izjave:
```javascript
let biggestNumber;
@ -252,58 +494,179 @@ if (firstNumber > secondNumber) {
}
```
Oba pristupa daju identične rezultate. Ternarni operator nudi sažetost, dok tradicionalna struktura if-else može biti čitljivija za složene uvjete.
Oba pristupa daju identične rezultate. Ternarni operator nudi sažetost, dok tradicionalna struktura if-else može biti čitljivija za složenije uvjete.
K["⚡ Kada koristiti"] --> K1["Jednostavne dodjele"]
K --> K2["Kratki uvjeti"]
K --> K3["Odluke u liniji"]
K --> K4["Return naredbe"]
style A fill:#e3f2fd
style E fill:#fff3e0
style K fill:#e8f5e8
```
---
## 🚀 Izazov
Napravite program koji je prvo napisan s logičkim operatorima, a zatim ga prepišite koristeći ternarni izraz. Koja vam sintaksa više odgovara?
Napišite program koji je prvo napisan s logičkim operatorima, a zatim ga prepišite koristeći ternarni izraz. Koji je sintaksni oblik vaš favorit?
---
## Izazov GitHub Copilot Agent 🚀
## Izazov GitHub Copilot Agenta 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Koristite Agent mod za dovršetak sljedećeg izazova:
**Opis:** Napravite sveobuhvatan kalkulator ocjena koji demonstrira više koncepata donošenja odluka iz ove lekcije, uključujući if-else naredbe, switch naredbe, logičke operatore i ternarne izraze.
**Opis:** Kreirajte opsežni kalkulator ocjena koji demonstrira višestruke koncepte donošenja odluka iz ove lekcije, uključujući if-else izjave, switch izjave, logičke operatore i ternarne izraze.
**Zadatak:** Napišite JavaScript program koji uzima studentski numerički rezultat (0-100) i određuje njihovu ocjenu prema sljedećim kriterijima:
**Zadatak:** Napišite JavaScript program koji prima numeričku ocjenu učenika (0-100) i određuje njegovu slovnu ocjenu prema sljedećim kriterijima:
- A: 90-100
- B: 80-89
- C: 70-79
- D: 60-69
- F: Ispod 60
- F: ispod 60
Zahtjevi:
1. Koristite if-else naredbu za određivanje ocjene
2. Koristite logičke operatore za provjeru prolazi li student (ocjena >= 60) I ima li pohvalu (ocjena >= 90)
3. Koristite switch naredbu za pružanje specifičnih povratnih informacija za svaku ocjenu
4. Koristite ternarni operator za određivanje je li student kvalificiran za sljedeći tečaj (ocjena >= 70)
5. Uključite validaciju unosa kako biste osigurali da je rezultat između 0 i 100
1. Koristite if-else izjavu za određivanje slovne ocjene
2. Koristite logičke operatore da provjerite je li student prošao (ocjena >= 60) I ima li pohvale (ocjena >= 90)
3. Koristite switch izraz za davanje specifične povratne informacije za svaku ocjenu
4. Koristite ternarni operator da utvrdite je li student podoban za sljedeći kolegij (ocjena >= 70)
5. Uključite provjeru valjanosti unosa kako biste osigurali da je rezultat između 0 i 100
Testirajte svoj program s različitim ocjenama uključujući granične slučajeve poput 59, 60, 89, 90 i nevažeće unose.
Testirajte svoj program s različitim rezultatima, uključujući granične slučajeve poput 59, 60, 89, 90 i nevažeće unose.
Saznajte više o [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [načinu rada Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
**Proslavite svoje umijeće logičkog razmišljanja:**
- Koju najkompleksniju logiku donošenja odluka ste uspješno implementirali?
- Koja vam uvjetna struktura najviše „leži“ i zašto?
- Kako vam je učenje o logičkim operatorima promijenilo pristup rješavanju problema?
- Koja bi stvarna primjena imala koristi od sofisticirane logike donošenja odluka?
```mermaid
journey
title Vaš razvoj logičkog razmišljanja
section Danas
Boolean zbunjenost: 3: You
Razumijevanje If-Else: 4: You
Prepoznavanje operatora: 5: You
section Ovaj tjedan
Složeni uvjeti: 4: You
Ovladavanje Switch-om: 5: You
Logičke kombinacije: 5: You
section Sljedeći mjesec
Napredni obrasci: 5: You
Svijest o izvedbi: 5: You
Poučavanje drugih: 5: You
```
> 🧠 **Savladali ste umjetnost digitalnog donošenja odluka!** Svaka interaktivna aplikacija se oslanja na uvjetnu logiku za inteligentan odgovor na korisničke akcije i promjenjive uvjete. Sada razumijete kako natjerati svoje programe da razmišljaju, evaluiraju i biraju odgovarajuće odgovore. Ova logička osnova pokretat će svaku dinamičnu aplikaciju koju izgradite! 🎉
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje odgovornosti**:
Ovaj dokument je preveden pomoću AI servisa za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nerazumijevanja ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Vaša Avantura s Nizovima i Petljama
section Osnove Nizova
Kreiranje Nizova: 5: You
Pristup Elementima: 4: You
Metode Nizova: 5: You
section Majstorstvo Petlji
For Petlje: 4: You
While Petlje: 5: You
Moderna Sintaksa: 4: You
section Obrada Podataka
Niz + Petlje: 5: You
Primjene u Stvarnom Svijetu: 4: You
Optimizacija Performansi: 5: You
```
## Kviz prije predavanja
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/13)
Jeste li se ikada pitali kako web stranice prate stavke u košarici ili prikazuju popis vaših prijatelja? Tu dolaze nizovi i petlje. Nizovi su poput digitalnih spremnika koji drže više informacija, dok vam petlje omogućuju da učinkovito radite s tim podacima bez ponavljanja koda.
Zajedno, ova dva koncepta čine temelj za rukovanje informacijama u vašim programima. Naučit ćete kako prijeći s ručnog pisanja svakog koraka na stvaranje pametnog, učinkovitog koda koji može brzo obraditi stotine ili čak tisuće stavki.
Do kraja ove lekcije, razumjet ćete kako obaviti složene zadatke s podacima koristeći samo nekoliko redaka koda. Istražimo ove ključne koncepte programiranja.
> 🎥 Kliknite na slike iznad za videozapise o nizovima i petljama.
> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
Jeste li se ikad pitali kako web-stranice prate artikle u košarici ili prikazuju vašu listu prijatelja? Tu na scenu stupaju nizovi i petlje. Nizovi su poput digitalnih spremnika koji drže više informacija, dok petlje omogućuju učinkovito rad s tim podacima bez ponavljanja koda.
Zajedno, ova dva koncepta čine temelj za rukovanje informacijama u vašim programima. Naučit ćete kako prijeći s ručnog pisanja svakog koraka na stvaranje pametnog, učinkovitog koda koji može brzo obraditi stotine ili tisuće elemenata.
Do kraja ovog lekcija, razumjet ćete kako obaviti složene zadatke s podacima s samo nekoliko linija koda. Istražimo ove osnovne programske koncepte.
> 🎥 Kliknite na slike gore za videozapise o nizovima i petljama.
> Ovu lekciju možete pohađati na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
```mermaid
mindmap
root((Obrada podataka))
Arrays
Structure
Sintaksa uglatih zagrada
Indeksiranje od nule
Dinamička veličina
Operations
push/pop
shift/unshift
indexOf/includes
Types
Polje brojeva
Polje nizova
Miješani tipovi
Loops
For Loops
Brojanje iteracija
Obrada polja
Predvidiv tok
While Loops
Na temelju uvjeta
Nepoznate iteracije
Unos korisnika
Modern Syntax
for...of
forEach
Funkcionalne metode
Applications
Data Analysis
Statistika
Filtriranje
Transformacije
User Interfaces
Liste
Izbornici
Galerije
```
## Nizovi
Zamislite nizove kao digitalni ormarić za dokumente - umjesto da pohranite jedan dokument po ladici, možete organizirati više povezanih stavki u jednom strukturiranom spremniku. U programskom smislu, nizovi vam omogućuju pohranu više informacija u jednom organiziranom paketu.
Zamislite niz kao digitalni ormarić za pohranu dokumenata – umjesto da svaki poseban dokument spremate u zaseban ladicu, možete organizirati više povezanih stvari u jedan strukturirani spremnik. U programiranju, nizovi vam omogućuju spremanje više informacija u jedan organizirani paket.
Bez obzira gradite li galeriju fotografija, upravljate popisom obaveza ili pratite najbolje rezultate u igri, nizovi pružaju temelj za organizaciju podataka. Pogledajmo kako funkcioniraju.
Bilo da gradite galeriju fotografija, upravljate popisom obaveza ili pratite najviše rezultate u igri, nizovi pružaju temelj za organizaciju podataka. Pogledajmo kako rade.
✅ Nizovi su svuda oko nas! Možete li smisliti primjer stvarnog života koji uključuje niz, poput niza solarnih panela?
✅ Nizovi su posvuda oko nas! Možete li smisliti primjer iz stvarnog života za niz, kao što je niz solarnih panela?
### Kreiranje nizova
Kreiranje niza je vrlo jednostavno - samo koristite uglate zagrade!
Kreiranje niza je vrlo jednostavno – samo upotrijebite uglate zagrade!
```javascript
// Empty array - like an empty shopping cart waiting for items
// Prazan niz - poput prazne košarice koja čeka na stavke
const myArray = [];
```
**Što se ovdje događa?**
Upravo ste stvorili prazan spremnik koristeći te uglate zagrade `[]`. Zamislite to kao praznu policu u knjižnici - spremna je za pohranu bilo kojih knjiga koje želite tamo organizirati.
Upravo ste stvorili prazan spremnik koristeći te uglate zagrade `[]`. Zamislite ga kao praznu policu u knjižnici – spreman je za držanje bilo kojih knjiga koje želite tamo organizirati.
Također možete odmah popuniti svoj niz početnim vrijednostima:
Možete i odmah napuniti svoj niz početnim vrijednostima:
// A user's profile info (mixing different types of data)
// Podaci iz korisničkog profila (miješanje različitih vrsta podataka)
const userData = ["John", 25, true, "developer"];
// Test scores for your favorite class
// Rezultati testova za vaš omiljeni predmet
const scores = [95, 87, 92, 78, 85];
```
**Zanimljive stvari koje treba primijetiti:**
- Možete pohraniti tekst, brojeve ili čak vrijednosti istinito/netočno u istom nizu
- Samo odvojite svaku stavku zarezom - jednostavno!
- Nizovi su savršeni za držanje povezanih informacija na jednom mjestu
**Zanimljive stvari za primijetiti:**
- U istom nizu možete pohraniti tekst, brojeve ili čak vrijednosti true/false
- Samo odvojite svaku stavku zarezom – lako!
- Nizovi su savršeni za držanje povezanih informacija na okupu
```mermaid
flowchart LR
A["📦 Nizovi"] --> B["Kreiraj [ ]"]
A --> C["Spremi Više Stavki"]
A --> D["Pristup po Indeksu"]
B --> B1["const arr = []"]
B --> B2["const arr = [1,2,3]"]
C --> C1["Brojevi"]
C --> C2["Nizovi znakova"]
C --> C3["Booleani"]
C --> C4["Miješani Tipovi"]
D --> D1["arr[0] = prvi"]
D --> D2["arr[1] = drugi"]
D --> D3["arr[2] = treći"]
E["📊 Indeks Niza"] --> E1["Indeks 0: Prvi"]
E --> E2["Indeks 1: Drugi"]
E --> E3["Indeks 2: Treći"]
E --> E4["Indeks n-1: Zadnji"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### Indeksiranje nizova
Evo nečega što vam se na početku može činiti neobičnim: nizovi numeriraju svoje stavke počevši od 0, a ne od 1. Ovo indeksiranje koje počinje od nule ima korijene u načinu na koji računalna memorija funkcionira - to je konvencija programiranja još od ranih dana programskih jezika poput C-a. Svako mjesto u nizu dobiva svoj broj adrese koji se naziva **indeks**.
Evo nešto što na prvi pogled može djelovati neobično: nizovi numeriraju svoje elemente počevši od 0, a ne od 1. Ovo indeksiranje od nule potječe iz načina na koji radi memorija računala – to je programerska konvencija od ranih dana računalnih jezika poput C-a. Svakom mjestu u nizu dodijeljen je svoj broj adrese koji se naziva **indeks**.
| Indeks | Vrijednost | Opis |
|--------|------------|------|
| 0 | "Čokolada" | Prvi element |
| 1 | "Jagoda" | Drugi element |
| 2 | "Vanilija" | Treći element |
| 3 | "Pistacija" | Četvrti element |
|-------|-------|-------------|
| 0 | "Chocolate" | Prvi element |
| 1 | "Strawberry" | Drugi element |
| 2 | "Vanilla" | Treći element |
| 3 | "Pistachio" | Četvrti element |
| 4 | "Rocky Road" | Peti element |
✅ Iznenađuje li vas da nizovi počinju s indeksom nula? U nekim programskim jezicima indeksi počinju od 1. Postoji zanimljiva povijest o tome, koju možete [pročitati na Wikipediji](https://en.wikipedia.org/wiki/Zero-based_numbering).
✅ Iznenađuje li vas da nizovi počinju na indeksu nula? U nekim programskim jezicima indeksi počinju od 1. Oko toga postoji zanimljiva povijest, koju možete [pročitati na Wikipediji](https://en.wikipedia.org/wiki/Zero-based_numbering).
const index = fruits.indexOf("banana"); // Vraća 1 (pozicija "banana")
const hasApple = fruits.includes("apple"); // Vraća true
```
**Razumijevanje ovih metoda:**
- **Dodaje** elemente s `push()` (na kraju) i `unshift()` (na početku)
- **Uklanja** elemente s `pop()` (na kraju) i `shift()` (na početku)
- **Dodaje** elemente s `push()` (na kraj) i `unshift()` (na početak)
- **Uklanja** elemente s `pop()` (s kraja) i `shift()` (s početka)
- **Pronalazi** elemente s `indexOf()` i provjerava postojanje s `includes()`
- **Vraća** korisne vrijednosti poput uklonjenih elemenata ili indeksa pozicije
✅ Isprobajte sami! Koristite konzolu vašeg preglednika za kreiranje i manipulaciju nizom koji sami osmislite.
- **Vraća** korisne vrijednosti poput uklonjenih elemenata ili pozicija indeksa
✅ Isprobajte sami! Koristite konzolu vašeg preglednika za stvaranje i manipulaciju nizom po vlastitom izboru.
### 🧠 **Provjera osnova nizova: Organizacija vaših podataka**
**Provjerite razumijevanje nizova:**
- Zašto mislite da nizovi broje od 0, a ne od 1?
- Što se događa ako pokušate pristupiti indeksu koji ne postoji (poput `arr[100]` u nizu od 5 elemenata)?
- Možete li smisliti tri stvarne situacije gdje bi nizovi bili korisni?
```mermaid
stateDiagram-v2
[*] --> EmptyArray: const arr = []
EmptyArray --> WithItems: Dodaj elemente
WithItems --> Accessing: Koristi indekse
Accessing --> Modifying: Promijeni vrijednosti
Modifying --> Processing: Koristi metode
WithItems --> WithItems: push(), unshift()
Processing --> Processing: pop(), shift()
note right of Accessing
Indeksiranje od nule
arr[0] = prvi element
end note
note right of Processing
Ugrađene metode
Dinamičke operacije
end note
```
> **Uvid iz stvarnog svijeta**: Nizovi su posvuda u programiranju! Doručci na društvenim mrežama, košarice za kupovinu, galerije slika, popisi pjesama – sve su to nizovi iza scene!
## Petlje
Sjetite se poznate kazne iz romana Charlesa Dickensa gdje su učenici morali ponavljati rečenice na ploči. Zamislite da možete jednostavno nekome reći "napiši ovu rečenicu 100 puta" i da se to automatski obavi. To je upravo ono što petlje rade za vaš kod.
Petlje su poput neumornog asistenta koji može ponavljati zadatke bez greške. Bez obzira trebate li provjeriti svaku stavku u košarici ili prikazati sve fotografije u albumu, petlje učinkovito rješavaju ponavljanje.
JavaScript nudi nekoliko vrsta petlji koje možete odabrati. Pogledajmo svaku od njih i razumimo kada ih koristiti.
Zamislite poznatu kaznu iz romana Charlesa Dickensa gdje su učenici morali višestruko pisati rečenicu na ploči. Zamislite da nekome jednostavno kažete "upiši ovu rečenicu 100 puta" i to se automatski izvrši. Točno to petlje rade za vaš kod.
Petlje su poput neumornog pomoćnika koji može ponavljati zadatke bez pogreške. Bilo da trebate provjeriti svaki artikl u košarici ili prikazati sve fotografije u albumu, petlje učinkovito upravljaju ponavljanjem.
JavaScript nudi nekoliko vrsta petlji za korištenje. Istražimo svaku i shvatimo kada ih koristiti.
```mermaid
flowchart TD
A["🔄 Vrste petlji"] --> B["For petlja"]
A --> C["While petlja"]
A --> D["For...of petlja"]
A --> E["forEach metoda"]
B --> B1["Poznati brojevi iteracija"]
B --> B2["Temeljeno na brojaču"]
B --> B3["for(init; uvjet; inkrement)"]
C --> C1["Nepoznati brojevi iteracija"]
C --> C2["Temeljeno na uvjetu"]
C --> C3["while(uvjet)"]
D --> D1["Moderno ES6+"]
D --> D2["Iteracija kroz niz"]
D --> D3["for(item of array)"]
E --> E1["Funkcionalni stil"]
E --> E2["Metoda niza"]
E --> E3["array.forEach(callback)"]
F["⏰ Kada koristiti"] --> F1["For: brojanje, indeksi"]
F --> F2["While: unos korisnika, pretraživanje"]
F --> F3["For...of: jednostavna iteracija"]
F --> F4["forEach: funkcionalno programiranje"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### For petlja
`for` petlja je poput postavljanja timera - točno znate koliko puta želite da se nešto dogodi. Super je organizirana i predvidljiva, što je čini savršenom kada radite s nizovima ili trebate nešto brojati.
`for` petlja je poput postavljanja tajmera – točno znate koliko puta želite da se nešto dogodi. Vrlo je organizirana i predvidiva, što je čini savršenom kada radite s nizovima ili trebate brojati stvari.
**Struktura for petlje:**
| Komponenta | Svrha | Primjer |
|------------|-------|---------|
|-----------|---------|----------|
| **Inicijalizacija** | Postavlja početnu točku | `let i = 0` |
@ -194,33 +343,59 @@ for (let i = 0; i < testScores.length; i++) {
```
**Korak po korak, evo što se događa:**
- **Inicijalizira** varijablu brojača `i` na 0 na početku
- **Inicijalizira** varijablu brojila `i` na 0 na početku
- **Provjerava** uvjet `i < 10` prije svake iteracije
- **Izvršava** blok koda kada je uvjet istinit
- **Inkrementira**`i` za 1 nakon svake iteracije s `i++`
- **Zaustavlja** se kada uvjet postane lažan (kada `i` dosegne 10)
✅ Pokrenite ovaj kod u konzoli preglednika. Što se događa kada napravite male promjene u brojaču, uvjetu ili izrazu za iteraciju? Možete li ga natjerati da radi unatrag, stvarajući odbrojavanje?
- **Povećava**`i` za 1 nakon svake iteracije s `i++`
- **Zaustavlja** se kada uvjet postane neistinit (kad `i` dosegne 10)
✅ Pokrenite ovaj kod u konzoli preglednika. Što se događa ako napravite sitne promjene u brojaču, uvjetu ili izrazu za iteraciju? Možete li ga pokrenuti unatrag, stvarajući odbrojavanje?
### 🗓️ **Provjera ovladavanja For petljom: Kontrolirana ponavljanja**
**Procijenite svoje razumijevanje for petlje:**
- Koja su tri dijela for petlje i što svaki radi?
- Kako biste petljali kroz niz unatrag?
- Što se događa ako zaboravite inkrement dio (`i++`)?
```mermaid
flowchart TD
A["🚀 Pokreni For Petlju"] --> B["Inicijaliziraj: neka i = 0"]
> **Mudrost petlji**: For petlje su savršene kad znate točno koliko puta nešto treba ponoviti. One su najčešći izbor za obradu nizova!
### While petlja
`while` petlja je poput izreke "nastavi raditi ovo dok..." - možda ne znate točno koliko puta će se izvršiti, ali znate kada treba stati. Savršena je za stvari poput traženja unosa od korisnika dok ne dobijete ono što trebate ili pretraživanja podataka dok ne pronađete ono što tražite.
`while` petlja je poput govora "nastavi dok..." - možda ne znate točno koliko će se puta izvršiti, ali znate kada prestati. Savršena je za stvari poput traženja unosa korisnika dok ne dobijete potrebne podatke ili pretraživanja podataka dok ne pronađete ono što tražite.
**Karakteristike while petlje:**
- **Nastavlja** se izvršavati dok je uvjet istinit
- **Zahtijeva** ručno upravljanje bilo kojim varijablama brojača
- **Zahtijeva** ručno upravljanje bilo kojim brojačima
- **Provjerava** uvjet prije svake iteracije
- **Rizikuje** beskonačne petlje ako uvjet nikada ne postane lažan
- **Rizik** beskonačnih petlji ako uvjet nikada ne postane neistinit
```javascript
// Basic counting example
// Osnovni primjer brojanja
let i = 0;
while (i <10){
console.log(`While count: ${i}`);
i++; // Don't forget to increment!
i++; // Ne zaboravi povećati!
}
// More practical example: processing user input
// Praktičniji primjer: obrada korisničkog unosa
let userInput = "";
let attempts = 0;
const maxAttempts = 3;
@ -236,34 +411,67 @@ if (attempts >= maxAttempts) {
```
**Razumijevanje ovih primjera:**
- **Upravlja** varijablom brojača `i` ručno unutar tijela petlje
- **Inkrementira** brojač kako bi spriječio beskonačne petlje
- **Demonstrira** praktičnu upotrebu s unosom korisnika i ograničenjem pokušaja
- **Ručno upravlja** brojačem `i` unutar tijela petlje
- **Povećava** brojač da spriječi beskonačne petlje
- **Prikazuje** praktični primjer s unosom korisnika i ograničenjem pokušaja
- **Uključuje** sigurnosne mehanizme za sprječavanje beskonačnog izvršavanja
### Moderni alternativni oblici petlji
### ♾️ **Provjera mudrosti While petlje: Ponavljanje na temelju uvjeta**
**Testirajte razumijevanje while petlji:**
- Koja je glavna opasnost pri korištenju while petlji?
- Kada biste odabrali while petlju umjesto for petlje?
- Kako možete spriječiti beskonačne petlje?
```mermaid
flowchart LR
A["🔄 While vs For"] --> B["While petlja"]
A --> C["For petlja"]
B --> B1["Nepoznati broj ponavljanja"]
B --> B2["Uvjetno vođena"]
B --> B3["Unos korisnika, pretraživanje"]
B --> B4["⚠️ Rizik: beskonačne petlje"]
C --> C1["Poznati broj ponavljanja"]
C --> C2["Brojač vođen"]
C --> C3["Obrada nizova"]
C --> C4["✅ Sigurno: predvidiv kraj"]
D["🛡️ Savjeti za sigurnost"] --> D1["Uvijek mijenjajte varijablu uvjeta"]
D --> D2["Uključite uvjete izlaska"]
D --> D3["Postavite maksimalne granice ponavljanja"]
style A fill:#e3f2fd
style B fill:#fff3e0
style C fill:#e8f5e8
style D fill:#ffebee
```
> **Sigurnost na prvom mjestu**: While petlje su moćne, ali zahtijevaju pažljivo upravljanje uvjetima. Uvijek osigurajte da će uvjet petlje na kraju postati neistinit!
### Moderni alternativni sintaksisi petlji
JavaScript nudi modernu sintaksu petlji koja može učiniti vaš kod čitljivijim i manje sklonim greškama.
JavaScript nudi modernu sintaksu petlji koja može učiniti vaš kod čitljivijim i manje podložnim greškama.
- **Pruža** vrijednost elementa i indeks kao parametre
- **Ne može** se zaustaviti prije vremena (za razliku od tradicionalnih petlji)
- **Pruža**i vrijednost elementa i indeks kao parametre
- **Ne može** se zaustaviti ranije (za razliku od tradicionalnih petlji)
- **Vraća** undefined (ne stvara novi niz)
✅ Zašto biste odabrali for petlju umjesto while petlje? 17 tisuća gledatelja imalo je isto pitanje na StackOverflowu, a neka od mišljenja [mogla bi vas zanimati](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
✅ Zašto biste odabrali for petlju umjesto while petlje? 17 tisuća gledatelja imalo je isto pitanje na StackOverflowu, a neka od mišljenja [mogla bi vam biti zanimljiva](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
### 🎨 **Provjera moderne sintakse petlji: Prihvatite ES6+**
**Procijenite svoje razumijevanje modernog JavaScripta:**
- Koje su prednosti `for...of` u odnosu na tradicionalne for petlje?
- Kada biste još uvijek mogli preferirati tradicionalne for petlje?
- Koja je razlika između `forEach` i `map`?
```mermaid
quadrantChart
title Vodič za odabir petlje
x-axis Tradicionalno --> Moderno
y-axis Jednostavno --> Složeno
quadrant-1 Moderno Složeno
quadrant-2 Tradicionalno Složeno
quadrant-3 Tradicionalno Jednostavno
quadrant-4 Moderno Jednostavno
Traditional For: [0.2, 0.7]
While Loop: [0.3, 0.6]
For...of: [0.8, 0.3]
forEach: [0.9, 0.4]
Array Methods: [0.8, 0.8]
```
> **Moderni trend**: ES6+ sintaksa poput `for...of` i `forEach` postaje preferirani pristup za iteraciju nizova jer je čišća i manje sklona greškama!
## Petlje i nizovi
Kombiniranje nizova s petljama stvara moćne mogućnosti obrade podataka. Ova kombinacija je temelj mnogih programskih zadataka, od prikazivanja popisa do izračunavanja statistike.
Kombiniranje nizova i petlji stvara snažne mogućnosti obrade podataka. Ovo je spoj temelj za mnoge programske zadatke, od prikaza lista do izračuna statistike.
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Koristite Agent mod za dovršetak sljedećeg izazova:
**Opis:** Izradite sveobuhvatnu funkciju za obradu podataka koja kombinira nizove i petlje kako bi analizirala skup podataka i generirala značajne uvide.
**Opis:** Izgradite sveobuhvatnu funkciju za obradu podataka koja kombinira nizove i petlje za analizu skupa podataka i generiranje smislenih uvida.
**Zadatak:** Kreirajte funkciju pod nazivom `analyzeGrades` koja prima niz objekata s ocjenama učenika (svaki sadrži svojstva name i score) i vraća objekt sa statistikama, uključujući najvišu ocjenu, najnižu ocjenu, prosječnu ocjenu, broj učenika koji su prošli (score >= 70) i niz imena učenika koji su postigli iznadprosječne ocjene. Koristite barem dvije različite vrste petlji u svom rješenju.
**Zadatak:** Kreirajte funkciju pod nazivom `analyzeGrades` koja prima niz objekata ocjena studenata (svaki s svojstvima ime i bodovi) i vraća objekt sa statistikama uključujući najvišu ocjenu, najnižu ocjenu, prosječnu ocjenu, broj studenata koji su prošli (bodovi >= 70) te niz imena studenata koji su ostvarili ocjenu iznad prosjeka. U rješenju koristite barem dvije različite vrste petlji.
Više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) saznajte ovdje.
Više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) saznajte ovdje.
## 🚀 Izazov
JavaScript nudi nekoliko modernih metoda za nizove koje mogu zamijeniti tradicionalne petlje za određene zadatke. Istražite [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) i [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).
JavaScript nudi nekoliko modernih metoda za rad s nizovima koje mogu zamijeniti tradicionalne petlje za specifične zadatke. Istražite [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) i [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).
**Vaš izazov:** Prefaktorirajte primjer ocjena studenata koristeći barem tri različite metode niza. Primijetite koliko kod postaje čišći i čitljiviji s modernom JavaScript sintaksom.
**Vaš izazov:** Refaktorirajte primjer s ocjenama učenika koristeći barem tri različite metode za rad s nizovima. Primijetite koliko čišći i čitljiviji kod postaje s modernom sintaksom JavaScripta.
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/14)
## Pregled i samostalno učenje
Nizovi u JavaScriptu imaju mnogo metoda koje su izuzetno korisne za manipulaciju podacima. [Pročitajte više o tim metodama](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) i isprobajte neke od njih (poput push, pop, slice i splice) na nizu koji sami osmislite.
Nizovi u JavaScriptu imaju mnogo pridruženih metoda koje su iznimno korisne za manipulaciju podacima. [Pročitajte o tim metodama](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) i isprobajte neke od njih (kao što su push, pop, slice i splice) na nizu po vašem izboru.
## Zadatak
[Prođite kroz niz](assignment.md)
[Loop an Array](assignment.md)
---
## 📊 **Sažetak vašeg alata za nizove i petlje**
```mermaid
graph TD
A["🎯 Majstorstvo nizova i petlji"] --> B["📦 Osnove nizova"]
- [ ] Kreirati jednostavnu košaricu za kupovinu koja dodaje i uklanja stavke
- [ ] Vježbati pretvaranje između različitih tipova petlji
- [ ] Eksperimentirati s metodama niza kao što su `push`, `pop`, `slice` i `splice`
### 📅 **Vaše tjedno putovanje obradom podataka**
- [ ] Završiti zadatak "Loop an Array" s kreativnim poboljšanjima
- [ ] Izraditi aplikaciju lista zadataka koristeći nizove i petlje
- [ ] Kreirati jednostavan kalkulator statistike za numeričke podatke
- [ ] Vježbati s [MDN metodama nizova](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [ ] Izraditi sučelje galerije slika ili glazbene liste
- [ ] Istražiti funkcionalno programiranje s `map`, `filter` i `reduce`
### 🌟 **Vaša mjesečna transformacija**
- [ ] Savladati napredne operacije nad nizovima i optimizaciju performansi
- [ ] Izgraditi kompletan nadzorni panel za vizualizaciju podataka
- [ ] Doprinijeti open source projektima vezanim uz obradu podataka
- [ ] Poučiti nekoga drugoga o nizovima i petljama s praktičnim primjerima
- [ ] Kreirati osobnu biblioteku za višekratnu upotrebu funkcija za obradu podataka
- [ ] Istražiti algoritme i strukture podataka temeljene na nizovima
### 🏆 **Završni pregled o vašem majstorstvu u obradi podataka**
**Proslavite svoje znanje o nizovima i petljama:**
- Koja vam je najkorisnija operacija nad nizovima za stvarne primjene?
- Koji vam tip petlje najviše "leži" i zašto?
- Kako je razumijevanje nizova i petlji promijenilo vaš pristup organizaciji podataka?
- Koji složen zadatak obrade podataka biste željeli sljedeći riješiti?
```mermaid
journey
title Vaša Evolucija Obrađivanja Podataka
section Danas
Zabuna Kroz Nizove: 3: Vi
Osnove Petlji: 4: Vi
Razumijevanje Indeksa: 5: Vi
section Ovaj Tjedan
Ovladavanje Metodama: 4: Vi
Učinkovita Obrada: 5: Vi
Moderna Sintaksa: 5: Vi
section Sljedeći Mjesec
Kompleksni Algoritmi: 5: Vi
Optimizacija Izvedbe: 5: Vi
Poučavanje Drugih: 5: Vi
```
> 📦 **Otključali ste moć organizacije i obrade podataka!** Nizovi i petlje temelj su gotovo svake aplikacije koju ćete ikada izgraditi. Od jednostavnih lista do složene analize podataka, sada imate alate za učinkovito i elegantno rukovanje informacijama. Svaka dinamična web stranica, mobilna aplikacija i aplikacija vođena podacima oslanja se na ove osnovne koncepte. Dobrodošli u svijet skalabilne obrade podataka! 🎉
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne odgovaramo za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
Ovaj je dokument preveden pomoću AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
HTML, ili HyperText Markup Language, temelj je svake web stranice koju ste ikada posjetili. Zamislite HTML kao kostur koji daje strukturu web stranicama – definira gdje ide sadržaj, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i izgledom, a JavaScript ga oživjeti interaktivnošću, HTML pruža osnovnu strukturu koja omogućuje sve ostalo.
U ovoj lekciji kreirat ćete HTML strukturu za sučelje virtualnog terarija. Ovaj praktični projekt naučit će vas osnovnim HTML konceptima dok gradite nešto vizualno privlačno. Naučit ćete kako organizirati sadržaj koristeći semantičke elemente, raditi s slikama i stvoriti temelj za interaktivnu web aplikaciju.
Na kraju ove lekcije imat ćete funkcionalnu HTML stranicu koja prikazuje slike biljaka u organiziranim stupcima, spremnu za stiliziranje u sljedećoj lekciji. Ne brinite ako u početku izgleda osnovno – upravo to HTML treba raditi prije nego što CSS doda vizualni sjaj.
## Kviz prije predavanja
# Terrarium Projekt Dio 1: Uvod u HTML
```mermaid
journey
title Vaše putovanje učenja HTML-a
section Osnove
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section Sadržaj
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section Semantika
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ili HyperText Markup Language, temelj je svake web stranice koju ste ikada posjetili. Zamislite HTML kao kostur koji daje strukturu web stranicama – on definira gdje sadržaj ide, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ofarbati" vaš HTML bojama i rasporedima, a JavaScript će ga oživjeti interaktivnošću, HTML pruža osnovnu strukturu koja omogućuje sve ostalo.
U ovoj lekciji kreirat ćete HTML strukturu za sučelje virtualnog terarija. Ovaj praktični projekt naučit će vas osnovnim HTML pojmovima dok izrađujete nešto vizualno zanimljivo. Naučit ćete kako organizirati sadržaj pomoću semantičkih elemenata, raditi sa slikama i stvoriti osnovu za interaktivnu web aplikaciju.
Na kraju ove lekcije imat ćete funkcionalnu HTML stranicu koja prikazuje slike biljaka u organiziranim stupcima, spremnu za stiliziranje u sljedećoj lekciji. Ne brinite ako na početku izgleda jednostavno – upravo tako HTML treba izgledati prije nego što CSS doda vizualne detalje.
Prije nego što zaronimo u HTML kod, postavimo odgovarajući radni prostor za vaš projekt terarija. Stvaranje organizirane strukture datoteka od početka ključna je navika koja će vam dobro doći tijekom vašeg putovanja u web razvoj.
Prije nego što zaronimo u HTML kod, postavimo ispravno radno okruženje za vaš terarij projekt. Izrada organizirane strukture datoteka od početka ključna je navika koja će vam dobro služiti tijekom cijelog vašeg web razvoja.
### Zadatak: Kreirajte strukturu projekta
### Zadatak: Kreirajte Strukturu Vašeg Projekta
Kreirat ćete namjensku mapu za svoj projekt terarija i dodati svoju prvu HTML datoteku. Evo dva pristupa koja možete koristiti:
Napravit ćete posebnu mapu za vaš terarij projekt i dodati prvu HTML datoteku. Evo dva pristupa koja možete koristiti:
**Opcija 1: Korištenje Visual Studio Code-a**
**Opcija 1: Korištenje Visual Studio Code**
1. Otvorite Visual Studio Code
2. Kliknite "File" → "Open Folder" ili koristite `Ctrl+K, Ctrl+O` (Windows/Linux) ili `Cmd+K, Cmd+O` (Mac)
3. Kreirajte novu mapu pod nazivom `terrarium` i odaberite je
4. U oknu Explorer kliknite ikonu "New File"
3. Kreirajte novu mapu nazvanu`terrarium` i odaberite je
4. U Explorer panelu kliknite na ikonu "New File"
5. Nazovite svoju datoteku `index.html`
**Opcija 2: Korištenje naredbi u terminalu**
**Opcija 2: Korištenje naredbi u Terminalu**
```bash
mkdir terrarium
cd terrarium
@ -51,48 +96,73 @@ touch index.html
code index.html
```
**Što ove naredbe postižu:**
- **Kreiraju** novi direktorij pod nazivom `terrarium` za vaš projekt
- **Navigiraju** u direktorij terarija
- **Kreiraju** praznu datoteku `index.html`
- **Otvaraju** datoteku u Visual Studio Code-u za uređivanje
> 💡 **Savjet**: Naziv datoteke `index.html` je poseban u web razvoju. Kada netko posjeti web stranicu, preglednici automatski traže `index.html` kao zadanu stranicu za prikaz. To znači da će URL poput `https://mysite.com/projects/` automatski prikazati datoteku `index.html` iz mape `projects` bez potrebe za navođenjem naziva datoteke u URL-u.
## Razumijevanje strukture HTML dokumenta
Svaki HTML dokument slijedi određenu strukturu koju preglednici trebaju razumjeti i ispravno prikazati. Zamislite ovu strukturu kao formalno pismo – ima potrebne elemente u određenom redoslijedu koji pomažu primatelju (u ovom slučaju pregledniku) da pravilno obradi sadržaj.
**Ovo su funkcije ovih naredbi:**
- **Kreira** novu mapu nazvanu `terrarium` za vaš projekt
- **Ulazi** u mapu terrarium
- **Stvara** praznu datoteku `index.html`
- **Otvara** datoteku u Visual Studio Code za uređivanje
> 💡 **Savjet stručnjaka**: Naziv datoteke `index.html` je poseban u web razvoju. Kada netko posjeti web stranicu, preglednici automatski traže `index.html` kao zadanu stranicu za prikaz. To znači da URL poput `https://mysite.com/projects/` automatski prikazuje `index.html` datoteku iz mape `projects` bez potrebe da se ime datoteke navodi u URL-u.
## Razumijevanje Strukture HTML Dokumenta
Svaki HTML dokument slijedi specifičnu strukturu koju preglednici trebaju razumjeti kako bi ispravno prikazali stranicu. Zamislite ovu strukturu kao formalno pismo – ima obavezne elemente redoslijedom koji pomažu primatelju (u ovom slučaju pregledniku) da pravilno obradi sadržaj.
```mermaid
flowchart TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
C --> D["<title>"]
C --> E["<metacharset>"]
C --> F["<metaviewport>"]
B --> G["<body>"]
G --> H["<h1> Naslov"]
G --> I["<div> Kontejneri"]
G --> J["<img> Slike"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
Započnimo dodavanjem osnovnog temelja koji svaki HTML dokument treba.
### Deklaracija DOCTYPE-a i korijenski element
### DOCTYPE Izjava i Korijenski Element
Prve dvije linije bilo koje HTML datoteke služe kao "uvod" dokumenta pregledniku:
Prve dvije linije bilo kojeg HTML fajla služe kao "uvod" dokumenta prema pregledniku:
```html
<!DOCTYPE html>
<html></html>
```
**Razumijevanje što ovaj kod radi:**
**Što ovaj kod radi:**
- **Deklarira** tip dokumenta kao HTML5 koristeći `<!DOCTYPE html>`
- **Kreira** korijenski element `<html>` koji će sadržavati sav sadržaj stranice
- **Uspostavlja** moderne web standarde za pravilno prikazivanje u preglednicima
- **Kreira** korijenski `<html>` element koji će sadržavati sav sadržaj stranice
- **Uspostavlja** moderne web standarde za ispravan prikaz u preglednicima
- **Osigurava** dosljedan prikaz na različitim preglednicima i uređajima
> 💡 **Savjet za VS Code**: Pređite mišem preko bilo koje HTML oznake u VS Code-u kako biste vidjeli korisne informacije iz MDN Web Docs, uključujući primjere upotrebe i detalje o kompatibilnosti preglednika.
> 💡 **VS Code Savjet**: Zadržite pokazivač iznad bilo kojeg HTML taga u VS Code da vidite korisne informacije iz MDN Web Docs, uključujući primjere upotrebe i detalje o kompatibilnosti preglednika.
> 📚 **Saznajte Više**: DOCTYPE izjava sprječava da preglednici ulaze u "quirks mode," što se koristilo za podršku vrlo starim web stranicama. Moderni web razvoj koristi jednostavnu `<!DOCTYPE html>` deklaraciju za osiguranje [standardski usklađenog prikaza](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
### 🔄 **Pedagoški Pregled**
**Pauzirajte i Razmislite**: Prije nego što nastavite, provjerite razumijete li:
- ✅ Zašto svaki HTML dokument treba DOCTYPE deklaraciju
- ✅ Što sadrži korijenski `<html>` element
- ✅ Kako ova struktura pomaže preglednicima da pravilno prikazuju stranice
> 📚 **Saznajte više**: Deklaracija DOCTYPE sprječava preglednike da uđu u "quirks mode", koji se koristio za podršku vrlo starim web stranicama. Moderni web razvoj koristi jednostavnu deklaraciju `<!DOCTYPE html>` kako bi osigurao [prikaz u skladu sa standardima](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
**Brzi samoprovjera**: Možete li vlastitim riječima objasniti što znači "standardski usklađeni prikaz"?
## Dodavanje osnovnih metapodataka dokumenta
## Dodavanje Bitnih Metapodataka Dokumenta
Odjeljak `<head>` HTML dokumenta sadrži ključne informacije koje su potrebne preglednicima i tražilicama, ali koje posjetitelji ne vide izravno na stranici. Zamislite ga kao "iza kulisa" informacije koje pomažu vašoj web stranici da pravilno funkcionira i da se ispravno prikazuje na različitim uređajima i platformama.
Sekcija `<head>` HTML dokumenta sadrži ključne informacije koje preglednici i tražilice trebaju, ali koje posjetitelji ne vide direktno na stranici. Zamislite je kao "iza kulisa" informacije koje pomažu vašoj stranici da ispravno radi i da se pravilno prikazuje na raznim uređajima i platformama.
Ovi metapodaci govore preglednicima kako prikazati vašu stranicu, koju kodnu stranicu koristiti i kako se nositi s različitim veličinama zaslona – sve bitno za stvaranje profesionalnih, pristupačnih web stranica.
Ovi metapodaci kažu preglednicima kako prikazati stranicu, koju kodnu stranicu koristiti i kako se nositi s različitim veličinama ekrana – sve što je ključno za izradu profesionalnih i pristupačnih web stranica.
### Zadatak: Dodajte zaglavlje dokumenta
### Zadatak: Dodajte Dokument Glavu
Umetnite ovaj odjeljak `<head>` između vaših otvarajućih i zatvarajućih `<html>`oznaka:
Umetnite ovaj `<head>` odjeljak između vaših otvarajućih i zatvarajućih `<html>`tagova:
```html
<head>
@ -103,28 +173,28 @@ Umetnite ovaj odjeljak `<head>` između vaših otvarajućih i zatvarajućih `<ht
</head>
```
**Razlaganje što svaki element postiže:**
- **Postavlja** naslov stranice koji se pojavljuje na karticama preglednika i rezultatima pretraživanja
- **Određuje** UTF-8 kodnu stranicu za pravilno prikazivanje teksta širom svijeta
**Razlaganje što svaki element radi:**
- **Postavlja** naslov stranice koji se prikazuje u karticama preglednika i rezultatima pretraživanja
- **Specifikira** UTF-8 kodiranje znakova za ispravan prikaz teksta širom svijeta
- **Osigurava** kompatibilnost s modernim verzijama Internet Explorera
- **Konfigurira** responzivni dizajn postavljanjem viewporta da odgovara širini uređaja
- **Kontrolira** početnu razinu zumiranja za prikaz sadržaja u prirodnoj veličini
- **Konfigurira** responzivni dizajn postavljanjem viewporta da prati širinu uređaja
- **Kontrolira** početni nivo zumiranja kako bi se sadržaj prikazao u prirodnoj veličini
> 🤔 **Razmislite o ovome**: Što bi se dogodilo da postavite meta oznaku viewporta ovako: `<meta name="viewport" content="width=600">`? To bi prisililo stranicu da uvijek bude široka 600 piksela, što bi narušilo responzivni dizajn! Saznajte više o [ispravnoj konfiguraciji viewporta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
> 🤔 **Razmislite o ovome**: Što bi se dogodilo ako postavite viewport meta tag ovako: `<meta name="viewport" content="width=600">`? Ovo bi prisililo stranicu da uvijek bude široka 600 piksela, čime se primjenjuje lom dizajna prilagođenog zaslonu! Više saznajte o [ispravnoj viewport konfiguraciji](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Izgradnja tijela dokumenta
## Izgradnja Tijela Dokumenta
Element `<body>` sadrži sav vidljivi sadržaj vaše web stranice – sve što korisnici vide i s čime interagiraju. Dok je odjeljak `<head>` pružio upute pregledniku, odjeljak `<body>` sadrži stvarni sadržaj: tekst, slike, gumbe i druge elemente koji čine vaše korisničko sučelje.
Element `<body>` sadrži sav vidljivi sadržaj vaše web stranice – sve što korisnici vide i s čim mogu komunicirati. Dok je `<head>` dijelu davao upute pregledniku, sekcija `<body>` sadrži stvarni sadržaj: tekst, slike, gumbe i druge elemente koji stvaraju vaše korisničko sučelje.
Dodajmo strukturu tijela i razumijmo kako HTML oznake rade zajedno kako bi stvorile smislen sadržaj.
Dodajmo tijelo stranice i razumijemo kako HTML tagovi rade zajedno da bi stvorili smisleni sadržaj.
### Razumijevanje strukture HTML oznaka
### Razumijevanje Strukture HTML Tagova
HTML koristi parove oznaka za definiranje elemenata. Većina oznaka ima otvarajuću oznaku poput `<p>` i zatvarajuću oznaku poput `</p>`, s sadržajem između: `<p>Pozdrav svijete!</p>`. Ovo stvara element odlomka koji sadrži tekst "Pozdrav svijete!".
HTML koristi uparene tagove za definiranje elemenata. Većina tagova ima otvarajući tag poput `<p>` i zatvarajući tag kao `</p>`, s sadržajem između: `<p>Zdravo, svijete!</p>`. Time se stvara paragraf koji sadrži tekst „Zdravo, svijete!“.
### Zadatak: Dodajte element tijela
### Zadatak: Dodajte Element Body
Ažurirajte svoju HTML datoteku kako biste uključili element `<body>`:
Ažurirajte vašu HTML datoteku da uključite `<body>` element:
```html
<!DOCTYPE html>
@ -139,136 +209,179 @@ Ažurirajte svoju HTML datoteku kako biste uključili element `<body>`:
</html>
```
**Evo što ova kompletna struktura pruža:**
- **Uspostavlja** osnovni okvir HTML5 dokumenta
- **Uključuje**osnovne metapodatke za pravilno prikazivanje u preglednicima
**Evo što ova potpuna struktura pruža:**
- **Uspostavlja** osnovni HTML5 okvir dokumenta
- **Uključuje**bitne metapodatke za ispravan prikaz u preglednicima
- **Kreira** prazno tijelo spremno za vaš vidljivi sadržaj
- **Slijedi** najbolje prakse modernog web razvoja
- **Prati** najbolje prakse modernog web razvoja
Sada ste spremni dodati vidljive elemente svog terarija. Koristit ćemo `<div>` elemente kao spremnike za organizaciju različitih dijelova sadržaja i `<img>` elemente za prikaz slika biljaka.
Sada ste spremni dodati vidljive elemente svog terarija. Koristit ćemo `<div>` elemente kao kontejnere za organiziranje različitih dijelova sadržaja i `<img>` elemente za prikaz slika biljaka.
### Rad s slikama i spremnicima za raspored
### Rad sa Slikama i Kontejnerima za Raspored
Slike su posebne u HTML-u jer koriste "samozatvarajuće" oznake. Za razliku od elemenata poput `<p></p>` koji obuhvaćaju sadržaj, oznaka `<img>` sadrži sve potrebne informacije unutar same oznake koristeći atribute poput `src` za putanju datoteke slike i `alt` za pristupačnost.
Slike su posebne u HTML-u jer koriste "samozatvarajuće" tagove. Za razliku od elemenata poput `<p></p>` koji obavijaju sadržaj, `<img>` tag sadrži sve potrebne informacije unutar tag-a pomoću atributa kao što su `src` za putanju slike i `alt` za pristupačnost.
Prije dodavanja slika u vaš HTML, trebate pravilno organizirati datoteke projekta tako da kreirate mapu za slike i dodate grafike biljaka.
Prije nego što dodate slike u HTML, trebate organizirati vaše projektne datoteke pravilno stvaranjem mape za slike i dodavanjem grafika biljaka.
**Prvo, postavite svoje slike:**
1. Kreirajte mapu pod nazivom `images` unutar mape projekta terarija
2. Preuzmite slike biljaka iz [mape rješenja](../../../../3-terrarium/solution/images) (ukupno 14 slika biljaka)
3. Kopirajte sve slike biljaka u svoju novu mapu `images`
**Prvo, postavite slike:**
1. Kreirajte mapu nazvanu `images` unutar vaše terarij projektne mape
2. Preuzmite slike biljaka iz [solution folder](../../../../3-terrarium/solution/images) (ukupno 14 slika biljaka)
3. Kopirajte sve slike biljaka u vašu novu `images` mapu
### Zadatak: Kreirajte raspored prikaza biljaka
### Zadatak: Kreirajte Raspored Prikaza Biljaka
Sada dodajte slike biljaka organizirane u dva stupca između vaših oznaka `<body></body>`:
Sada dodajte slikovne prikaze biljaka organiziranih u dva stupca između vaših `<body></body>` tagova:
**Korak po korak, evo što se događa u ovom kodu:**
- **Kreira** glavni spremnik stranice s `id="page"`za držanje cijelog sadržaja
- **Uspostavlja** dva spremnika stupaca: `left-container` i `right-container`
- **Kreira** glavni spremnik stranice s `id="page"`koji drži sav sadržaj
- **Uspostavlja** dva stupčasta spremnika: `left-container` i `right-container`
- **Organizira** 7 biljaka u lijevom stupcu i 7 biljaka u desnom stupcu
- **Obuhvaća** svaku sliku biljke u `plant-holder` div za pojedinačno pozicioniranje
- **Primjenjuje** dosljedne nazive klasa za stiliziranje u sljedećoj lekciji
- **Dodjeljuje** jedinstvene ID-ove svakoj slici biljke za interakciju putem JavaScripta kasnije
- **Uključuje** ispravne putanje datoteka koje upućuju na mapu slika
> 🤔 **Razmislite o ovome**: Primijetite da sve slike trenutno imaju isti alt tekst "biljka". To nije idealno za pristupačnost. Korisnici čitača zaslona čuli bi "biljka" ponovljeno 14 puta bez da znaju koja specifična biljka je prikazana na svakoj slici. Možete li smisliti bolje, opisnije alt tekstove za svaku sliku?
> 📝 **Vrste HTML elemenata**: `<div>` elementi su "blok razine" i zauzimaju punu širinu, dok su `<span>` elementi "inline" i zauzimaju samo potrebnu širinu. Što mislite da bi se dogodilo da promijenite sve ove `<div>` oznake u `<span>` oznake?
S ovim dodanim oznakama, biljke će se pojaviti na ekranu, iako još neće izgledati dotjerano – za to je zadužen CSS u sljedećoj lekciji! Za sada imate čvrst HTML temelj koji pravilno organizira vaš sadržaj i slijedi najbolje prakse pristupačnosti.
## Korištenje semantičkog HTML-a za pristupačnost
Semantički HTML znači odabir HTML elemenata na temelju njihovog značenja i svrhe, a ne samo njihovog izgleda. Kada koristite semantičko označavanje, komunicirate strukturu i značenje svog sadržaja preglednicima, tražilicama i pomoćnim tehnologijama poput čitača zaslona.
Ovaj pristup čini vaše web stranice pristupačnijima korisnicima s invaliditetom i pomaže tražilicama da bolje razumiju vaš sadržaj. To je temeljno načelo modernog web razvoja koje stvara bolje iskustvo za sve.
- **Obavija** svaku sliku biljke u `plant-holder`<div> za individualno pozicioniranje
- **Primjenjuje** dosljedne nazive klasa za CSS stiliziranje u sljedećoj lekciji
- **Dodjeljuje** jedinstvene ID-e svakoj slici biljke za JavaScript interakciju kasnije
- **Uključuje** ispravne putanje do mape sa slikama
> 🤔 **Razmislite o ovome**: Primijetite da sve slike trenutno imaju isti alt tekst "plant". Ovo nije idealno za pristupačnost. Korisnici sa čitačima zaslona bi čuli "plant" ponovljeno 14 puta bez znanja o kojoj biljci se radi. Možete li smisliti bolje, opisnije alt tekstove za svaku sliku?
> 📝 **Tipovi HTML Elemenata**: `<div>` elementi su "blok nivo" i zauzimaju punu širinu, dok su `<span>` elementi "inline" i zauzimaju samo potrebnu širinu. Što mislite što bi se dogodilo da sve ove `<div>` tagove promijenite u `<span>` tagove?
### 🔄 **Pedagoški Pregled**
**Razumijevanje Strukture**: Odvojite trenutak za pregled vaše HTML strukture:
- ✅ Možete li identificirati glavne kontejnere u vašem rasporedu?
- ✅ Razumijete li zašto svaka slika ima jedinstveni ID?
- ✅ Kako biste opisali svrhu `plant-holder` divova?
**Vizualna Inspekcija**: Otvorite vašu HTML datoteku u pregledniku. Trebali biste vidjeti:
- Osnovnu listu slika biljaka
- Slike organizirane u dva stupca
- Jednostavan, nestiliziran raspored
**Zapamtite**: Ovaj jednostavan izgled je upravo ono što HTML treba izgledati prije CSS stiliziranja!
S ovim dodanim markupom, biljke će se pojaviti na ekranu, iako još ne izgledaju dotjerano – za to služi CSS u sljedećoj lekciji! Za sada imate čvrst HTML temelj koji ispravno organizira vaš sadržaj i prati najbolje prakse pristupačnosti.
## Korištenje Semantičkog HTML-a za Pristupačnost
Semantički HTML znači odabir HTML elemenata na temelju njihovog značenja i svrhe, ne samo na temelju njihovog izgleda. Kada koristite semantički markup, komunicirate strukturu i značenje vašeg sadržaja preglednicima, tražilicama i asistivnim tehnologijama poput čitača zaslona.
```mermaid
flowchart TD
A[Trebate li dodati sadržaj?] --> B{Koja vrsta?}
B -->|Glavni naslov| C["<h1>"]
B -->|Podnaslov| D["<h2>, <h3>, itd."]
B -->|Odlomak| E["<p>"]
B -->|Lista| F["<ul>, <ol>"]
B -->|Navigacija| G["<nav>"]
B -->|Članak| H["<article>"]
B -->|Sekcija| I["<section>"]
B -->|Opći spremnik| J["<div>"]
C --> K[Čitači zaslona izvještavaju kao glavni naslov]
D --> L[Stvara pravilnu hijerarhiju naslova]
E --> M[Omogućuje pravilno razmakivanje teksta]
F --> N[Omogućuje prečace za navigaciju po listi]
G --> O[Identificira navigacijske oznake]
H --> P[Označava samostalan sadržaj]
I --> Q[Grupira povezani sadržaj]
J --> R[Koristite samo kad nijedan semantički naziv ne odgovara]
style C fill:#4caf50
style D fill:#4caf50
style E fill:#4caf50
style F fill:#4caf50
style G fill:#2196f3
style H fill:#2196f3
style I fill:#2196f3
style J fill:#ff9800
```
Ovaj pristup čini vaše web stranice pristupačnijima korisnicima s invaliditetom i pomaže tražilicama da bolje razumiju vaš sadržaj. To je temeljno načelo modernog web razvoja koje stvara bolje doživljaje za sve.
### Dodavanje semantičkog naslova stranice
### Dodavanje Semantičkog Naslova Stranice
Dodajmo odgovarajući naslov vašoj stranici terarija. Umetnite ovu liniju odmah nakon vaše otvarajuće oznake `<body>`:
Dodajmo ispravan naslov vašoj stranici terarija. Umetnite ovaj red odmah nakon otvarajućeg `<body>` taga:
```html
<h1>My Terrarium</h1>
```
**Zašto je semantičko označavanje važno:**
- **Pomaže** čitačima zaslona da navigiraju i razumiju strukturu stranice
- **Poboljšava** optimizaciju za tražilice (SEO) razjašnjavanjem hijerarhije sadržaja
- **Povećava** pristupačnost za korisnike s oštećenjem vida ili kognitivnim razlikama
- **Stvara** bolje korisničko iskustvo na svim uređajima i platformama
- **Slijedi** web standarde i najbolje prakse za profesionalni razvoj
**Zašto je semantički markup važan:**
- **Pomaže** čitačima zaslona navigirati i razumjeti strukturu stranice
- **Poboljšava**SEO (optimizaciju za tražilice) jasnoćom hijerarhije sadržaja
- **Unapređuje** pristupačnost korisnicima s oštećenjima vida ili kognitivnim razlikama
- **Stvara** bolje korisničke doživljaje na svim uređajima i platformama
- **Prati** web standarde i najbolje prakse za profesionalni razvoj
**Primjeri semantičkih i nesemantičkih izbora:**
**Primjeri semantičkih vs. ne-semantčkih izbora:**
| Svrha | ✅ Semantički izbor | ❌ Nesemantički izbor |
> 🎥 **Pogledajte u akciji**: Pogledajte [kako čitači zaslona interagiraju s web stranicama](https://www.youtube.com/watch?v=OUDV1gqs9GA) kako biste razumjeli zašto je semantičko označavanje ključno za pristupačnost. Primijetite kako pravilna HTML struktura pomaže korisnicima da učinkovito navigiraju.
> 🎥 **Pogledajte u praksi**: Pogledajte [kako čitači zaslona komuniciraju s web stranicama](https://www.youtube.com/watch?v=OUDV1gqs9GA) da shvatite zašto je semantički markup ključan za pristupačnost. Primijetite kako pravilna HTML struktura pomaže korisnicima u efikasnoj navigaciji.
## Kreiranje spremnika za terarij
## Kreiranje Kontejnera Terarija
Sada dodajmo HTML strukturu za sam terarij – stakleni spremnik u kojem će biljke na kraju biti smještene. Ovaj odjeljak demonstrira važan koncept: HTML pruža strukturu, ali bez CSS stiliziranja, ti elementi još neće biti vidljivi.
Sada dodajmo HTML strukturu za sam terarij – stakleni spremnik u koji će biljke na kraju biti postavljene. Ovaj odsjek pokazuje važan koncept: HTML pruža strukturu, ali bez CSS stiliziranja elementi još uvijek neće biti vidljivi.
Označavanje terarija koristi opisne nazive klasa koji će učiniti CSS stiliziranje intuitivnim i lakim za održavanje u sljedećoj lekciji.
Markup terarija koristi opisne nazive klasa koje će CSS stiliziranju u sljedećoj lekciji učiniti intuitivnim i održivim.
### Zadatak: Dodajte strukturu terarija
### Zadatak: Dodajte Strukturu Terarija
Umetnite ovo označavanje iznad posljednje oznake `</div>` (prije zatvarajuće oznake spremnika stranice):
Umetnite ovaj markup iznad zadnjeg `</div>` taga (prije zatvarajućeg taga spremnika stranice):
```html
<divid="terrarium">
@ -282,45 +395,72 @@ Umetnite ovo označavanje iznad posljednje oznake `</div>` (prije zatvarajuće o
</div>
```
**Razumijevanje ove strukture terarija:**
- **Kreira** glavni spremnik terarija s jedinstvenim ID-om za stiliziranje
- **Definira**zasebne elemente za svaku vizualnu komponentu (vrh, zidovi, zemlja, dno)
- **Uključuje** ugniježđene elemente za efekte refleksije stakla (sjajni elementi)
- **Koristi** opisne nazive klasa koji jasno označavaju svrhu svakog elementa
**Razumijevanje ove terarijske strukture:**
- **Kreira** glavni terarijski spremnik s jedinstvenim ID-em za stiliziranje
- **Definira**odvojene elemente za svaki vizualni dio (gornji dio, zidovi, zemlja, donji dio)
- **Uključuje** ugniježđene elemente za efekte odraza na staklu (sjajni elementi)
- **Koristi** opisne nazive klasa koje jasno označavaju svrhu svakog elementa
- **Priprema** strukturu za CSS stiliziranje koje će stvoriti izgled staklenog terarija
> 🤔 **Primijetite nešto?**: Iako ste dodali ovo označavanje, ne vidite ništa novo na stranici! Ovo savršeno ilustrira kako HTML pruža strukturu dok CSS pruža izgled. Ovi `<div>` elementi postoje, ali još nemaju vizualno stiliziranje – to dolazi u sljedećoj lekciji!
> 🤔 **Primjećujete li nešto?**: Iako ste dodali ovaj markup, ne vidite ništa novo na stranici! Ovo savršeno ilustrira kako HTML pruža strukturu, dok CSS pruža izgled. Ovi `<div>` elementi postoje, ali još nemaju vizualno stiliziranje – to dolazi u sljedećoj lekciji!
```mermaid
flowchart TD
A[HTML Dokument] --> B[Glava Dokumenta]
A --> C[Tijelo Dokumenta]
B --> D[Element Naslova]
B --> E[Meta Charset]
B --> F[Meta Viewport]
C --> G[Glavni Naslov]
C --> H[Kontejner Stranice]
H --> I[Lijevi Kontejner sa 7 biljaka]
H --> J[Desni Kontejner sa 7 biljaka]
H --> K[Struktura Terarija]
style A fill:#e1f5fe
style B fill:#fff3e0
style C fill:#e8f5e8
style H fill:#f3e5f5
```
### 🔄 **Pedagoška provjera**
**Savladavanje HTML strukture**: Prije nego krenete dalje, osigurajte da možete:
- ✅ Objasniti razliku između HTML strukture i vizualnog izgleda
- ✅ Prepoznati semantičke i nesemantičke HTML elemente
- ✅ Opišite kako ispravna oznaka koristi pristupačnosti
**Testiranje vašeg razumijevanja**: Probajte otvoriti vaš HTML fajl u pregledniku s onemogućenim Javaskriptom i uklonjenim CSS-om. Ovo vam pokazuje čistu semantičku strukturu koju ste napravili!
---
## Izazov za GitHub Copilot agenta
## Izazov za GitHub Copilot Agenta
Koristite Agent način rada da dovršite sljedeći izazov:
Koristite način rada Agent za dovršavanje sljedećeg izazova:
**Opis:** Izradite semantičku HTML strukturu za odjeljak vodiča za njegu biljaka koju biste mogli dodati projektu terarija.
**Opis:** Kreirajte semantičku HTML strukturu za odjeljak vodiča za njegu biljaka koji bi se mogao dodati projektu terarija.
**Zadatak:** Izradite semantički HTML odjeljak koji uključuje glavni naslov "Vodič za njegu biljaka", tri pododjeljka s naslovima "Zalijevanje", "Zahtjevi za svjetlom" i "Njega tla", od kojih svaki sadrži odlomak informacija o njezi biljaka. Koristite odgovarajuće semantičke HTML oznake poput `<section>`, `<h2>`, `<h3>` i `<p>` za pravilno strukturiranje sadržaja.
**Zadatak:** Izradite semantički HTML odjeljak koji uključuje glavni naslov "Vodič za njegu biljaka", tri pododjeljka s naslovima "Zalijevanje", "Zahtjevi za svjetlom" i "Njega tla", svaki sa stilom paragrafa koji sadrži informacije o njezi biljaka. Upotrijebite ispravne semantičke HTML oznake poput `<section>`, `<h2>`, `<h3>`, i `<p>` za odgovarajuću strukturu sadržaja.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) saznajte ovdje.
## Istražite izazov povijesti HTML-a
## Izazov istraživanja povijesti HTML-a
**Učenje o evoluciji weba**
HTML se značajno razvio od kada je Tim Berners-Lee stvorio prvi web preglednik u CERN-u 1990. godine. Neki stariji tagovi poput `<marquee>` sada su zastarjeli jer ne funkcioniraju dobro s modernim standardima pristupačnosti i principima responzivnog dizajna.
HTML se značajno razvio otkad je Tim Berners-Lee 1990. godine na CERN-u stvorio prvi web preglednik. Neki stariji tagovi poput `<marquee>` sada su zastarjeli jer ne funkcioniraju dobro s modernim standardima pristupačnosti i načelima responzivnog dizajna.
**Isprobajte ovaj eksperiment:**
1. Privremeno obuhvatite svoj `<h1>` naslov oznakom `<marquee>`: `<marquee><h1>Moj terarij</h1></marquee>`
1. Privremeno omotajte vaš `<h1>` naslov u `<marquee>` tag: `<marquee><h1>Moj terarij</h1></marquee>`
2. Otvorite svoju stranicu u pregledniku i promatrajte efekt pomicanja
3. Razmislite zašto je ovaj tag zastario (savjet: razmislite o korisničkom iskustvu i pristupačnosti)
4. Uklonite oznaku `<marquee>` i vratite se na semantičku oznaku
3. Razmislite zašto je ovaj tag ukinut (nagovještaj: razmislite o korisničkom iskustvu i pristupačnosti)
4. Uklonite `<marquee>` tag i vratite se na semantički markup
**Pitanja za razmišljanje:**
- Kako bi pomični naslov mogao utjecati na korisnike s oštećenjima vida ili osjetljivošću na pokrete?
- Koje moderne CSS tehnike mogu postići slične vizualne efekte na pristupačniji način?
- Kako bi pomični naslov mogao utjecati na korisnike s oštećenjima vida ili osjetljivošću na pokret?
- Koje suvremene CSS tehnike mogu postići slične vizualne efekte na pristupačniji način?
- Zašto je važno koristiti trenutne web standarde umjesto zastarjelih elemenata?
Saznajte više o [zastarjelim i ukinutim HTML elementima](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) kako biste razumjeli kako se web standardi razvijaju za poboljšanje korisničkog iskustva.
Istražite više o [zastarjelim i ukinutim HTML elementima](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) da razumijete kako se web standardi razvijaju za poboljšanje korisničkog iskustva.
## Kviz nakon predavanja
@ -328,38 +468,127 @@ Saznajte više o [zastarjelim i ukinutim HTML elementima](https://developer.mozi
## Pregled i samostalno učenje
**Produbite svoje znanje o HTML-u**
**Produbite svoje HTML znanje**
HTML je temelj weba već više od 30 godina, razvijajući se od jednostavnog jezika za označavanje dokumenata do sofisticirane platforme za izradu interaktivnih aplikacija. Razumijevanje ove evolucije pomaže vam cijeniti moderne web standarde i donositi bolje odluke u razvoju.
HTML je temelj weba više od 30 godina, razvijajući se od jednostavnog jezika označavanja dokumenata do sofisticirane platforme za izgradnju interaktivnih aplikacija. Razumijevanje ove evolucije pomaže vam cijeniti moderne web standarde i donositi bolje razvojne odluke.
**Preporučeni putovi učenja:**
1. **Povijest i evolucija HTML-a**
- Istražite vremenski slijed od HTML-a 1.0 do HTML5
1. **Povijest i razvoj HTML-a**
- Istražite vremenski slijed od HTML 1.0 do HTML5
- Saznajte zašto su određeni tagovi ukinuti (pristupačnost, prilagođenost mobilnim uređajima, održivost)
- Istražite nove značajke HTML-a i prijedloge
- Istražite nove HTML značajke i prijedloge
2. **Dubinsko proučavanje semantičkog HTML-a**
- Proučite potpuni popis [semantičkih elemenata HTML5](https://developer.mozilla.org/docs/Web/HTML/Element)
- Vježbajte prepoznavanje kada koristiti `<article>`, `<section>`, `<aside>` i `<main>`
2. **Dubinsko razumijevanje semantičkog HTML-a**
- Proučite cjeloviti popis [semantičkih elemenata HTML5](https://developer.mozilla.org/docs/Web/HTML/Element)
- Vježbajte prepoznavanje kada koristiti `<article>`, `<section>`, `<aside>`, i `<main>`
- Naučite o ARIA atributima za poboljšanu pristupačnost
3. **Moderni web razvoj**
- Istražite [izradu responzivnih web stranica](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn
- Razumite kako HTML integrira s CSS-om i JavaScriptom
- Naučite o najboljim praksama za web performanse i SEO
- Istražite [izgradnju responzivnih web stranica](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn
- Razumite kako HTML integrira s CSS-om i Javaskriptom
- Naučite o web performansama i najboljim SEO praksama
**Pitanja za razmišljanje:**
- Koje ste zastarjele HTML oznake otkrili i zašto su uklonjene?
- Koje nove HTML značajke se predlažu za buduće verzije?
- Kako semantički HTML doprinosi web pristupačnosti i SEO-u?
- Koje ste zastarjele HTML tagove otkrili i zašto su uklonjeni?
- Koje se nove HTML značajke predlažu za buduće verzije?
- Kako semantički HTML pridonosi pristupačnosti weba i SEO-u?
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite DevTools (F12) i pregledajte HTML strukturu vaše omiljene web stranice
- [ ] Izradite jednostavnu HTML datoteku s osnovnim tagovima: `<h1>`, `<p>`, i `<img>`
- [ ] Validirajte svoj HTML koristeći W3C HTML Validator online
- [ ] Pokušajte dodati komentar u svoj HTML pomoću `<!-- komentar -->`
### 🎯 **Što možete postići u ovom satu**
- [ ] Dovršite kviz nakon lekcije i pregledajte koncepte semantičkog HTML-a
- [ ] Izradite jednostavnu web stranicu o sebi koristeći ispravnu HTML strukturu
- [ ] Eksperimentirajte s različitim razinama naslova i oznakama za oblikovanje teksta
- [ ] Dodajte slike i poveznice za vježbanje multimedijske integracije
- [ ] Istražite HTML5 značajke koje još niste isprobali
### 📅 **Vaše tjedno učenje HTML-a**
- [ ] Dovršite zadatak projekta terarija sa semantičkim markupom
- [ ] Izradite pristupačnu web stranicu koristeći ARIA oznake i uloge
- [ ] Vježbajte izradu obrazaca s različitim vrstama unosa
- [ ] Istražite HTML5 API-je poput localStorage ili geolocation
- [ ] Proučite responzivne HTML obrasce i dizajn usmjeren na mobilne uređaje
- [ ] Pregledajte HTML kod drugih developera za najbolje prakse
### 🌟 **Vaš mjesečni temelj weba**
- [ ] Izradite portfelj web stranicu koja prikazuje vaše HTML vještine
- [ ] Naučite HTML templating s frameworkom poput Handlebars
- [ ] Sudjelujte u open source projektima poboljšavajući HTML dokumentaciju
- [ ] Savladajte napredne HTML koncepte poput prilagođenih elemenata
- [ ] Integrirajte HTML s CSS frameworkom i Javaskript bibliotekama
- [ ] Mentorirajte druge koji uče osnove HTML-a
## 🎯 Vaš vremenski plan za savladavanje HTML-a
```mermaid
timeline
title Napredak u učenju HTML-a
section Osnove (5 minuta)
Struktura dokumenta: DOCTYPE deklaracija
: HTML korijenski element
: Razumijevanje Head i Body
section Metapodaci (10 minuta)
Bitni Meta Tagovi: Kodiranje znakova
: Konfiguracija viewporta
: Kompatibilnost preglednika
section Izrada sadržaja (15 minuta)
Integracija slike: Ispravni putovi datoteka
: Važnost alt teksta
: Samozatvarajući tagovi
section Organizacija izgleda (20 minuta)
Strategija kontejnera: Div elementi za strukturu
: Imenovanje klasa i ID-a
: Hijerarhija ugniježđenih elemenata
section Semantičko usavršavanje (30 minuta)
Značajan Markup: Hijerarhija zaglavlja
: Navigacija za čitače ekrana
: Najbolje prakse pristupačnosti
section Napredni koncepti (1 sat)
Značajke HTML5: Moderni semantički elementi
: ARIA atributi
: Razmatranja performansi
section Profesionalne vještine (1 tjedan)
Organizacija koda: Uzorci strukture datoteka
: Održivi markup
: Suradnja u timu
section Ekspertska razina (1 mjesec)
Moderni web standardi: Postupno poboljšanje
: Kompatibilnost između preglednika
: Ažuriranja HTML specifikacije
```
### 🛠️ Sažetak vašeg HTML alata
Nakon završetka ove lekcije, sada imate:
- **Strukturu dokumenta**: Potpun temelj HTML5 s ispravnim DOCTYPE-om
- **Semantički markup**: Smisleni tagovi koji poboljšavaju pristupačnost i SEO
- **Integraciju slika**: Ispravnu organizaciju datoteka i praksu alt teksta
- **Kontejnere za izgled**: Stratešku upotrebu divova s opisnim nazivima klasa
- **Svijest o pristupačnosti**: Razumijevanje navigacije pomoću čitača zaslona
- **Moderne standarde**: Trenutne HTML5 prakse i znanje o zastarjelim tagovima
- **Temelj za projekt**: Čvrst temelj za CSS stiliziranje i JavaScript interaktivnost
**Sljedeći koraci**: Vaša HTML struktura je spremna za CSS stiliziranje! Semantički temelj koji ste izgradili olakšat će razumijevanje sljedeće lekcije.
## Zadatak
[Vježbajte svoj HTML: Izradite maketu bloga](assignment.md)
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za ključne informacije preporučuje se stručni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
Sjećate li se kako je vaš HTML terarij izgledao prilično osnovno? CSS je ono što tu jednostavnu strukturu pretvara u nešto vizualno privlačno.
Ako je HTML poput izgradnje okvira kuće, onda je CSS sve ono što kuću čini domom - boje zidova, raspored namještaja, osvjetljenje i kako se prostorije međusobno povezuju. Zamislite kako je palača Versailles započela kao jednostavna lovačka kuća, ali pažljivim uređenjem i rasporedom postala jedno od najveličanstvenijih građevina na svijetu.
Danas ćemo vaš terarij transformirati iz funkcionalnog u dotjeran. Naučit ćete kako precizno pozicionirati elemente, prilagoditi raspored različitim veličinama ekrana i stvoriti vizualnu privlačnost koja čini web stranice zanimljivima.
Do kraja ovog predavanja vidjet ćete kako strateško stiliziranje pomoću CSS-a može dramatično poboljšati vaš projekt. Dodajmo malo stila vašem terariju.
## Kviz prije predavanja
# Terrarij Projekt Dio 2: Uvod u CSS
```mermaid
journey
title Vaše CSS putovanje stiliziranja
section Osnove
Poveži CSS datoteku: 3: Student
Razumjeti kaskadu: 4: Student
Naučiti nasljeđivanje: 4: Student
section Selektori
Ciljanje elemenata: 4: Student
Obrasci klasa: 5: Student
Specifičnost ID-a: 5: Student
section Raspored
Pozicionirati elemente: 4: Student
Kreirati spremnike: 5: Student
Izgraditi terarij: 5: Student
section Dorada
Dodati vizualne efekte: 5: Student
Responsivni dizajn: 5: Student
Stakleni odrazi: 5: Student
```
> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac)
Sjećaš li se kako je tvoj HTML terrarij izgledao prilično osnovno? CSS je mjesto gdje tu običnu strukturu pretvaramo u nešto vizualno privlačno.
Ako je HTML kao gradnja kostura kuće, onda je CSS sve ono što kući daje osjećaj doma - boje za zidove, raspored namještaja, osvjetljenje i kako se sobe međusobno povezuju. Zamislite kako je Dvorac Versailles započeo kao jednostavna lovačka kuća, ali pažnja prema dekoraciji i rasporedu pretvorila ga je u jednu od najspektakularnijih građevina na svijetu.
Danas ćemo tvoj terrarij pretvoriti iz funkcionalnog u dotjeran. Naučit ćeš kako precizno pozicionirati elemente, kako napraviti layout koji se prilagođava različitim veličinama ekrana i stvoriti vizualni dojam koji čini web-stranice zanimljivima.
Na kraju ovog sata vidjet ćeš kako strateško stiliziranje s CSS-om može dramatično poboljšati tvoj projekt. Dodajmo stila tvom terrariju.
```mermaid
mindmap
root((Osnove CSS-a))
Cascade
Pravila specifičnosti
Nasljeđivanje
Redoslijed prioriteta
Rješavanje sukoba
Selectors
Tagovi elemenata
Klase (.class)
ID-evi (#id)
Kombinatori
Box Model
Margin
Border
Padding
Sadržaj
Layout
Pozicioniranje
Vrste prikaza
Flexbox
Grid
Visual Effects
Boje
Sjene
Prijelazi
Animacije
Responsive Design
Medijske upite
Fleksibilne jedinice
Meta viewport
Mobile First
```
## Predpredavanje kviz
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/17)
CSS se često smatra samo načinom "uljepšavanja stvari", ali njegova svrha je mnogo šira. CSS je poput redatelja filma - kontrolirate ne samo kako sve izgleda, već i kako se kreće, reagira na interakciju i prilagođava različitim situacijama.
CSS se često smatra samo "uljepšavanjem stvari", ali ima puno širu svrhu. CSS je kao režiser filma - kontroliraš ne samo kako sve izgleda, već i kako se kreće, reagira na interakcije i prilagođava različitim situacijama.
Moderni CSS je izuzetno sposoban. Možete pisati kod koji automatski prilagođava raspored za telefone, tablete i stolna računala. Možete stvoriti glatke animacije koje usmjeravaju pažnju korisnika gdje je potrebno. Rezultati mogu biti prilično impresivni kada sve funkcionira zajedno.
Moderni CSS je iznimno sposoban. Možeš napisati kod koji automatski prilagođava layout za telefone, tablete i stolna računala. Možeš stvoriti glatke animacije koje usmjeravaju pažnju korisnika kamo je potrebno. Rezultati mogu biti vrlo impresivni kada sve funkcionira zajedno.
> 💡 **Savjet profesionalca**: CSS se stalno razvija s novim značajkama i mogućnostima. Uvijek provjerite [CanIUse.com](https://caniuse.com) kako biste provjerili podršku preglednika za novije CSS značajke prije nego ih upotrijebite u produkcijskim projektima.
> 💡 **Stručni savjet**: CSS se stalno razvija s novim značajkama i mogućnostima. Uvijek provjeri [CanIUse.com](https://caniuse.com) kako bi potvrdio podršku preglednika za novije CSS značajke prije nego što ih koristiš u produkcijskim projektima.
**Evo što ćemo postići u ovom predavanju:**
- **Stvoriti** kompletan vizualni dizajn za vaš terarij koristeći moderne CSS tehnike
**Ovo ćemo postići u ovom satu:**
- **Stvoriti** kompletan vizualni dizajn tvog terrarija koristeći moderne CSS tehnike
- **Istražiti** osnovne koncepte poput kaskade, nasljeđivanja i CSS selektora
- **Implementirati** strategije za responzivno pozicioniranje i raspored
- **Izgraditi** spremnik terarija koristeći CSS oblike i stiliziranje
- **Implementirati**responzivno pozicioniranje i strategije izrade layouta
- **Izgraditi**terrarij kontejner koristeći CSS oblike i stilizaciju
### Preduvjet
Trebali biste završiti HTML strukturu za vaš terarij iz prethodnog predavanja i imati je spremnu za stiliziranje.
Trebalo bi imati gotovu HTML strukturu za svoj terrarij iz prethodnog sata, spremnu za stiliziranje.
> 📺 **Video resurs**: Pogledajte ovaj koristan video vodič
> 📺 **Video resurs**: Pogledaj ovaj koristan video vodič
Prije nego što počnemo sa stiliziranjem, moramo povezati CSS s našim HTML-om. Ova poveznica govori pregledniku gdje pronaći upute za stiliziranje našeg terarija.
Prije nego što počnemo stilizirati, moramo povezati CSS s našim HTML-om. Ta veza govori pregledniku gdje pronaći upute za stilizaciju našeg terrarija.
U mapi vašeg terarija, stvorite novu datoteku pod nazivom `style.css`, a zatim je povežite u odjeljku `<head>` vašeg HTML dokumenta:
U svojoj mapi terrarija, kreiraj novu datoteku pod nazivom `style.css`, zatim je poveži u dijelu `<head>` tvog HTML dokumenta:
```html
<linkrel="stylesheet"href="./style.css"/>
```
**Evo što ovaj kod radi:**
- **Stvara** vezu između vaših HTML i CSS datoteka
- **Govori** pregledniku da učita i primijeni stilove iz `style.css`
- **Koristi** atribut `rel="stylesheet"` kako bi naznačio da je ovo CSS datoteka
- **Referencira** putanju datoteke s `href="./style.css"`
**Ovo što kod radi:**
- **Stvara** vezu između tvoje HTML i CSS datoteke
- **Kaže** pregledniku da učita i primijeni stilove iz `style.css`
- **Koristi** atribut `rel="stylesheet"` koji specificira da je to CSS datoteka
- **Referencira** putanju do datoteke preko`href="./style.css"`
## Razumijevanje CSS kaskade
Jeste li se ikada pitali zašto se CSS naziva "kaskadni" stilovi? Stilovi se spuštaju poput vodopada, a ponekad dolazi do sukoba među njima.
Jesi li se ikada pitao zašto se CSS zove "Cascading" Style Sheets? Stilovi se slijevaju poput vodopada, a ponekad i međusobno sukobljavaju.
Razmislite o tome kako funkcioniraju vojne zapovjedne strukture - opća naredba može reći "svi vojnici nose zelenu uniformu", ali specifična naredba za vašu jedinicu može reći "nosite plave svečane uniforme za ceremoniju". Specifičnija uputa ima prednost. CSS slijedi sličnu logiku, a razumijevanje ove hijerarhije čini otklanjanje grešaka mnogo lakšim.
Razmotri kako vojna zapovjedna struktura funkcionira - generalov naredba može reći "svi vojnici nose zelenu", ali specifična naredba tvojoj jedinici može reći "nosite svečane plave za ceremoniju". Specifičnija uputa ima prednost. CSS slijedi sličnu logiku i razumijevanje ove hijerarhije čini otklanjanje grešaka mnogo jednostavnijim.
### Eksperimentiranje s prioritetom kaskade
Pogledajmo kaskadu u praksi stvaranjem sukoba u stilovima. Prvo dodajte inline stil svom `<h1>` tagu:
Pogledajmo kaskadu u akciji stvaranjem sukoba stilova. Prvo dodaj inline stil na svoj `<h1>` tag:
```html
<h1style="color: red">My Terrarium</h1>
```
**Što ovaj kod radi:**
- **Primjenjuje** crvenu boju izravno na `<h1>` element koristeći inline stiliziranje
- **Koristi** atribut `style` za ugrađivanje CSS-a izravno u HTML
- **Stvara**pravilo stila najvišeg prioriteta za ovaj specifični element
- **Primjenjuje** crvenu boju direktno na `<h1>` element koristeći inline stilizaciju
- **Koristi** atribut `style` za ugrađivanje CSS-a direktno u HTML
- **Stvara**stil s najvišim prioritetom za taj specifični element
Zatim dodajte ovo pravilo u svoju `style.css` datoteku:
Zatim dodaj ovo pravilo u svoju datoteku `style.css`:
```css
h1 {
@ -89,29 +143,50 @@ h1 {
}
```
**U gore navedenom, mi smo:**
**Ovdje smo:**
- **Definirali** CSS pravilo koje cilja sve `<h1>` elemente
- **Postavili** boju teksta na plavu koristeći vanjsku stilsku datoteku
- **Stvorili** pravilo nižeg prioriteta u usporedbi s inline stilovima
✅ **Provjera znanja**: Koja boja se prikazuje u vašoj web aplikaciji? Zašto ta boja pobjeđuje? Možete li zamisliti scenarije u kojima biste željeli nadjačati stilove?
> 💡 **Redoslijed prioriteta CSS-a (od najvišeg do najnižeg):**
- **Stvorili** pravilo nižeg prioriteta u odnosu na inline stilove
✅ **Provjera znanja**: Koja boja se prikazuje u tvojoj web-aplikaciji? Zašto ta boja pobjeđuje? Možeš li smisliti situacije u kojima bi želio nadjačati stilove?
> 💡 **Redoslijed CSS prioriteta (od najvišeg do najnižeg):**
> 1. **Inline stilovi** (atribut style)
> 2. **ID-ovi** (#myId)
> 3. **Klase** (.myClass) i atributi
> 4. **Selektori elemenata** (h1, div, p)
> 5. **Zadane postavke preglednika**
> 5. **Zadani stilovi preglednika**
## CSS nasljeđivanje u praksi
CSS nasljeđivanje funkcionira poput genetike - elementi nasljeđuju određena svojstva od svojih roditeljskih elemenata. Ako postavite obitelj fontova na elementu body, sav tekst unutar njega automatski koristi isti font. To je slično tome kako se prepoznatljiva čeljust obitelji Habsburg pojavila kroz generacije bez da je bila specificirana za svakog pojedinca.
CSS nasljeđivanje radi poput genetike - elementi nasljeđuju određena svojstva od roditeljskih elemenata. Ako postaviš font-family na elementu body, sav tekst unutar automatski koristi isti font. Slično kao što je prepoznatljiv oblik čeljusti Habsburške obitelji bio prisutan kroz generacije, a nije bio specificiran za svakog pojedinačno.
Međutim, ne nasljeđuje se sve. Tekstualni stilovi poput fontova i boja se nasljeđuju, ali svojstva rasporeda poput margina i obruba ne. Kao što djeca mogu naslijediti fizičke osobine, ali ne i modni ukus svojih roditelja.
Međutim, nije sve nasljedno. Stilovi teksta poput fontova i boja se nasljeđuju, no svojstva layouta poput margina i obruba se ne nasljeđuju. Kao što djeca mogu naslijediti fizičke osobine, ali ne i modne izbore roditelja.
### Promatranje nasljeđivanja fonta
Pogledajmo nasljeđivanje u praksi postavljanjem obitelji fontova na elementu `<body>`:
Pogledajmo nasljeđivanje u praksi postavljanjem font-family na `<body>` element:
```css
body {
@ -119,31 +194,46 @@ body {
}
```
**Razlaganje onoga što se ovdje događa:**
- **Postavlja**obitelj fontova za cijelu stranicu ciljanjem elementa `<body>`
- **Koristi** font stack s rezervnim opcijama za bolju kompatibilnost preglednika
- **Primjenjuje** moderne sistemske fontove koji izgledaju odlično na različitim operativnim sustavima
- **Osigurava** da svi podređeni elementi nasljeđuju ovaj font osim ako nije posebno nadjačan
**Što se ovdje događa:**
- **Postavlja**font-family za cijelu stranicu ciljajući `<body>` element
- **Koristi** font stack s rezervnim mogućnostima radi bolje kompatibilnosti s preglednicima
- **Primjenjuje** moderne sistemske fontove koji lijepo izgledaju na različitim operativnim sustavima
- **Osigurava** da svi child elementi nasljede taj font osim ako nije eksplicitno drugačije postavljeno
Otvorite alate za razvoj preglednika (F12), idite na karticu Elements i pregledajte svoj `<h1>` element. Vidjet ćete da nasljeđuje obitelj fontova od body elementa:
Otvori alate za razvoj preglednika (F12), idi na tab Elements i pregledaj svoj `<h1>` element. Vidjet ćeš da nasljeđuje font-family od body:
✅ **Vrijeme za eksperimentiranje**: Pokušajte postaviti druga nasljedna svojstva na `<body>` poput`color`, `line-height` ili `text-align`. Što se događa s vašim naslovom i ostalim elementima?
✅ **Vrijeme za eksperiment**: Pokušaj postaviti druga nasljediva svojstva na `<body>` kao`color`, `line-height` ili `text-align`. Što se događa s naslovom i ostalim elementima?
> **Svojstva koja se ne nasljeđuju uključuju**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagoški pregled**
**Razumijevanje osnova CSS-a**: Prije prelaska na selektore, osiguraj da možeš:
- ✅ Objasniti razliku između kaskade i nasljeđivanja
- ✅ Predvidjeti koji stil će pobijediti u konfliktu specifičnosti
- ✅ Prepoznati koja svojstva se nasljeđuju od roditeljskih elemenata
- ✅ Ispravno povezati CSS datoteke s HTML-om
**Brzi test**: Ako imaš ove stilove, koje će boje biti `<h1>` unutar `<div class="special">`?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odgovor: Crvena (selektor elementa direktno cilja h1)*
## Ovladavanje CSS selektorima
CSS selektori su vaš način ciljanog stiliziranja specifičnih elemenata. Oni funkcioniraju poput davanja preciznih uputa - umjesto da kažete "kuća", možete reći "plava kuća s crvenim vratima na ulici Maple".
CSS selektori su tvoj način da ciljano stiliziraš određene elemente. Oni funkcioniraju kao davanje preciznih uputa - umjesto da kažeš "kuća", kažeš "plava kuća s crvenim vratima u Maple Streetu".
CSS pruža različite načine za precizno ciljanje, a odabir pravog selektora je poput odabira odgovarajućeg alata za zadatak. Ponekad trebate stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.
CSS nudi različite načine da budeš specifičan, a odabir pravog selektora je poput izbora pravog alata za zadatak. Ponekad trebaš stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.
### Selektori elemenata (tagovi)
### Selektori elemenata (Tagovi)
Selektori elemenata ciljaju HTML elemente prema njihovom nazivu taga. Savršeni su za postavljanje osnovnih stilova koji se široko primjenjuju na vašoj stranici:
Selektori elemenata ciljaju HTML elemente po imenu taga. Savršeni su za postavljanje osnovnih stilova koji se primjenjuju široko preko stranice:
```css
body {
@ -160,19 +250,19 @@ h1 {
}
```
**Razumijevanje ovih stilova:**
- **Postavlja** dosljednu tipografiju na cijeloj stranici pomoću selektora `body`
- **Uklanja** zadane margine i padding preglednika za bolju kontrolu
- **Stilizira** sve elemente naslova bojom, poravnanjem i razmakom
- **Koristi**`rem` jedinice za skalabilno, pristupačno određivanje veličine fonta
**Što ovi stilovi rade:**
- **Postavlja** dosljednu tipografiju preko cijele stranice pomoću `body` selektora
- **Uklanja** zadane margine i padding preglednika radi bolje kontrole
- **Stilizira** sve naslove bojom, poravnanjem i razmakom
- **Koristi**`rem` jedinice za skalabilne i pristupačne veličine fonta
Iako selektori elemenata dobro funkcioniraju za opće stiliziranje, trebat će vam specifičniji selektori za stiliziranje pojedinačnih komponenti poput biljaka u vašem terariju.
Iako element selektori dobro funkcioniraju za opće stiliziranje, trebat ćeš specifičnije selektore za stiliziranje pojedinačnih komponenti poput biljaka u tvom terrariju.
### ID selektori za jedinstvene elemente
ID selektori koriste simbol `#` i ciljaju elemente s određenim atributima `id`. Budući da ID-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput naših lijevih i desnih spremnika za biljke.
ID selektori koriste simbol `#` i ciljaju elemente s određenim `id` atributom. Budući da id-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput lijevog i desnog kontejnera s biljkama.
Napravimo stilizaciju za bočne spremnike našeg terarija gdje će biljke biti smještene:
Napravimo stilizaciju za bočne kontejnere terrarija gdje će biljke stajati:
```css
#left-container {
@ -198,14 +288,14 @@ Napravimo stilizaciju za bočne spremnike našeg terarija gdje će biljke biti s
}
```
**Evo što ovaj kod postiže:**
- **Pozicionira**spremnike na krajnje lijeve i desne rubove koristeći `absolute` pozicioniranje
- **Koristi**jedinice `vh` (visina prikaznog prozora) za responzivnu visinu koja se prilagođava veličini ekrana
- **Primjenjuje**`box-sizing: border-box`kako bi padding bio uključen u ukupnu širinu
- **Uklanja** nepotrebne `px` jedinice iz vrijednosti nula za čišći kod
- **Postavlja** suptilnu boju pozadine koja je ugodnija za oči od oštro sive
**Što ovaj kod radi:**
- **Pozicionira**kontejnere na lijevi i desni rub ekrana koristeći `absolute` pozicioniranje
- **Koristi**`vh` (visina viewporta) jedinice za responzivnu visinu koja se prilagođava veličini ekrana
- **Primjenjuje**`box-sizing: border-box`tako da padding ulazi u ukupnu širinu
- **Uklanja** nepotrebne `px` jedinice za vrijednosti nula radi čišćeg koda
- **Postavlja** suptilnu boju pozadine koja je lakša za oči od oštre sive
✅ **Izazov kvalitete koda**: Primijetite kako ovaj CSS krši princip DRY (Don't Repeat Yourself). Možete li ga preoblikovati koristeći i ID i klasu?
✅ **Izazov za kvalitetu koda**: Primijeti kako ovaj CSS krši DRY (Don't Repeat Yourself) princip. Možeš li ga refaktorirati koristeći oba, ID i klasu?
**Poboljšani pristup:**
```html
@ -233,26 +323,26 @@ Napravimo stilizaciju za bočne spremnike našeg terarija gdje će biljke biti s
}
```
### Selektori klasa za višekratne stilove
### Klase za ponovnu upotrebu stilova
Selektori klasa koriste simbol `.` i savršeni su kada želite primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponovno koristiti u cijelom vašem HTML-u, što ih čini idealnim za dosljedne stilizacijske uzorke.
Klase koriste simbol `.` i idealne su kada želiš primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponavljati po cijelom HTML-u, što ih čini idealnim za dosljedne stilizacijske obrasce.
U našem terariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID-ova za jedinstveno pozicioniranje.
U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID za jedinstveno pozicioniranje.
**Evo strukture HTML-a za svaku biljku:**
**Ovo je HTML struktura za svaku biljku:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.hr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.hr.png" />
</div>
```
**Ključni elementi objašnjeni:**
- **Koristi**`class="plant-holder"` za dosljednu stilizaciju spremnika za sve biljke
- **Primjenjuje**`class="plant"` za zajedničko stiliziranje i ponašanje slike
- **Uključuje** jedinstveni `id="plant1"` za individualno pozicioniranje i interakciju putem JavaScripta
- **Pruža** opisni alt tekst za pristupačnost čitačima ekrana
**Objašnjenje ključnih elemenata:**
- **Koristi**`class="plant-holder"` za dosljedno stiliziranje kontejnera svih biljaka
- **Primjenjuje**`class="plant"` za zajedničku stilizaciju slike i ponašanje
- **Sadrži** jedinstveni `id="plant1"` za individualno pozicioniranje i JavaScript interakciju
- **Nudi** opisni alt tekst radi pristupačnosti čitačima ekrana
Sada dodajte ove stilove u svoju `style.css` datoteku:
Sada dodaj ove stilove u svoju datoteku `style.css`:
```css
.plant-holder {
@ -274,37 +364,53 @@ Sada dodajte ove stilove u svoju `style.css` datoteku:
}
```
**Razlaganje ovih stilova:**
- **Stvara** relativno pozicioniranje za spremnik biljke kako bi se uspostavio kontekst pozicioniranja
- **Postavlja**svaki spremnik biljke na visinu od 13%, osiguravajući da sve biljke stanu vertikalno bez pomicanja
- **Pomjera**spremnike malo ulijevo kako bi bolje centrirali biljke unutar njihovih spremnika
- **Omogućuje** biljkama da se responzivno skaliraju pomoću svojstava `max-width` i `max-height`
- **Koristi**`z-index`za slojevitost biljaka iznad drugih elemenata u terariju
- **Dodaje** suptilan efekt prelaska mišem s CSS prijelazima za bolju interakciju korisnika
**Što ovi stilovi rade:**
- **Stvara** relativno pozicioniranje za plant holder koji uspostavlja kontekst pozicije
- **Postavlja**visinu svakog plant holdera na 13% da bi sve biljke stale vertikalno bez skrolanja
- **Pomjera**holder-e malo ulijevo za bolji centar biljaka u njihovim kontejnerima
- **Dozvoljava** biljkama da se skaliraju responzivno uz svojstva `max-width` i `max-height`
- **Koristi**`z-index`da biljke budu slojene iznad ostalih elemenata u terrariju
- **Dodaje** suptilni efekt prilikom lebdenja pomoću CSS prijelaza za bolje korisničko iskustvo
✅ **Kritičko razmišljanje**: Zašto su nam potrebni i `.plant-holder` i `.plant` selektori? Što bi se dogodilo da pokušamo koristiti samo jedan?
✅ **Kritičko razmišljanje**: Zašto nam trebaju oba selektora `.plant-holder` i `.plant`? Što bi se dogodilo da koristimo samo jedan?
> 💡 **Dizajnerski obrazac**: Spremnik (`.plant-holder`) kontrolira raspored i pozicioniranje, dok sadržaj (`.plant`) kontrolira izgled i skaliranje. Ova podjela čini kod lakšim za održavanje i fleksibilnijim.
> 💡 **Dizajnerski obrazac**: Kontejner (`.plant-holder`) kontrolira layout i pozicioniranje, dok sadržaj (`.plant`) kontrolira izgled i skaliranje. Ova podjela čini kod održivijim i fleksibilnijim.
## Razumijevanje CSS pozicioniranja
CSS pozicioniranje je poput režiranja predstave - vi određujete gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje za dramatičan učinak.
Jednom kada razumijete pozicioniranje, mnogi izazovi u rasporedu postaju upravljivi. Trebate navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želite skočni prozor koji se pojavljuje na određenom mjestu? To je također pozicioniranje.
### Pet vrijednosti pozicioniranja
| Vrijednost pozicioniranja | Ponašanje | Primjena |
| `relative` | Pozicionirano u odnosu na svoju normalnu poziciju | Male prilagodbe, stvaranje konteksta pozicioniranja |
| `absolute` | Pozicionirano u odnosu na najbližeg pozicioniranog pretka | Precizno postavljanje, preklapanja |
| `fixed` | Pozicionirano u odnosu na prikazni prozor | Navigacijske trake, plutajući elementi |
| `sticky` | Prebacuje se između relativnog i fiksnog ovisno o skrolanju | Zaglavlja koja se lijepe pri skrolanju |
CSS pozicioniranje je kao režija na sceni - ti upravljaš gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje radi dramatičnog efekta.
Kad shvatiš pozicioniranje, mnogi izazovi kod layouta postaju upravljivi. Trebaš li navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želiš li tooltip koji se pojavljuje na određenom mjestu? To je također pozicioniranje.
| `relative` | Pozicionirano relativno u odnosu na normalni položaj | Male prilagodbe, stvaranje konteksta pozicije |
| `absolute` | Pozicionirano relativno u odnosu na najbližeg pozicioniranog roditelja | Precizno postavljanje, slojevi preko |
| `fixed` | Pozicionirano relativno prema viewportu | Navigacijske trake, plutajući elementi |
| `sticky` | Mijenja se između relative i fixed ovisno o skrolanju | Zaglavlja koja se lijepe prilikom skrolanja |
### Pozicioniranje u našem terariju
### Pozicioniranje u našem terrariju
Naš terarij koristi stratešku kombinaciju tipova pozicioniranja za stvaranje željenog rasporeda:
Naš terrarij koristi stratešku kombinaciju tipova pozicioniranja da stvori željeni layout:
```css
/* Container positioning */
@ -327,24 +433,60 @@ Naš terarij koristi stratešku kombinaciju tipova pozicioniranja za stvaranje
```
**Razumijevanje strategije pozicioniranja:**
- **Apsolutni spremnici** su uklonjeni iz normalnog toka dokumenta i pričvršćeni na rubove ekrana
- **Relativni spremnici biljaka** stvaraju kontekst pozicioniranja dok ostaju u toku dokumenta
- **Apsolutne biljke** mogu se precizno pozicionirati unutar svojih relativnih spremnika
- **Ova kombinacija** omogućuje biljkama da se vertikalno slažu dok su pojedinačno pozicionirane
> 🎯 **Zašto je ovo važno**: Elementi `plant` trebaju apsolutno pozicioniranje kako bi postali povlačivi u sljedećem predavanju. Apsolutno pozicioniranje ih uklanja iz normalnog toka rasporeda, čineći interakcije povlačenja i ispuštanja mogućima.
✅ **Vrijeme za eksperimentiranje**: Pokušajte promijeniti vrijednosti pozicioniranja i promatrajte rezultate:
- Što se događa ako promijenite `.container` iz `absolute` u `relative`?
- Kako se mijenja raspored ako `.plant-holder` koristi `absolute` umjesto `relative`?
- Što se događa kada promijenite `.plant` u `relative` pozicioniranje?
## Izgradnja terarija pomoću CSS-a
Sada ćemo izgraditi staklenu posudu koristeći samo CSS - bez slika ili grafičkog softvera.
- **Apsolutni kontejneri** su izuzeti iz uobičajenog tijeka dokumenta i pričvršćeni su na rubove ekrana
- **Relativni plant holderi** stvaraju kontekst pozicioniranja, a pritom ostaju u tijeku dokumenta
- **Apsolutne biljke** mogu biti precizno pozicionirane unutar relativnih kontejnera
- **Ova kombinacija** omogućava biljkama da se slažu vertikalno, a istovremeno se pojedinačno pozicioniraju
> 🎯 **Zašto je ovo važno**: Elementi "plant" trebaju apsolutno pozicioniranje da bi bili drag'n'drop (povuci i pusti) u sljedećem satu. Apsolutno pozicioniranje uklanja ih iz normalnog tijeka layouta, omogućujući interakciju povlačenja i ispuštanja.
✅ **Vrijeme za eksperiment**: Isprobaj promjenu vrijednosti pozicije i promatraj rezultate:
- Što se dogodi ako promijeniš `.container` iz `absolute` u `relative`?
- Kako se raspored mijenja ako `.plant-holder` koristi `absolute` umjesto `relative`?
- Što se događa kada ` .plant` promijenite u `relative` pozicioniranje?
### 🔄 **Pedagoška provjera**
**Vladanje CSS pozicioniranjem**: Pauzirajte i provjerite svoje razumijevanje:
- ✅ Možete li objasniti zašto biljke trebaju apsolutno pozicioniranje za povuci-i-pusti funkcionalnost?
- ✅ Razumijete li kako relativni spremnici stvaraju kontekst pozicioniranja?
- ✅ Zašto bočni spremnici koriste apsolutno pozicioniranje?
- ✅ Što bi se dogodilo ako u potpunosti uklonite deklaracije pozicija?
**Povezanost s realnim svijetom**: Razmislite kako CSS pozicioniranje odražava stvarni raspored:
- **Static**: Knjige na polici (prirodni redoslijed)
- **Relative**: Pomicanje knjige malo, ali zadržavanje mjesta
- **Absolute**: Postavljanje knjižne oznake na točan broj stranice
- **Fixed**: Ljepljiva bilješka koja ostaje vidljiva dok okrećete stranice
## Izgradnja terarija s CSS-om
Sada ćemo izgraditi staklenku koristeći samo CSS - bez slika ili grafičkog softvera.
Stvaranje realističnog izgleda stakla, sjena i dubine pomoću pozicioniranja i prozirnosti demonstrira vizualne sposobnosti CSS-a. Ova tehnika odražava način na koji su arhitekti Bauhaus pokreta koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Kad razumijete ove principe, prepoznat ćete CSS tehnike iza mnogih web dizajna.
```mermaid
flowchart LR
A[Poklopac Staklenke] --> E[Potpuni Terarij]
B[Zidovi Staklenke] --> E
C[Sloj Zemlje] --> E
D[Donji Dio Staklenke] --> E
F[Efejeti Stakla] --> E
A1["50% širina<br/>5% visina<br/>Vrhunska pozicija"] --> A
B1["60% širina<br/>80% visina<br/>Zaobljeni kutovi<br/>0.5 neprozirnost"] --> B
C1["60% širina<br/>5% visina<br/>Tamno smeđa<br/>Donji sloj"] --> C
D1["50% širina<br/>1% visina<br/>Donja pozicija"] --> D
F1["Suptilne sjene<br/>Prozirnost<br/>Slojevanje po Z-indeksu"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Izrada dijelova staklenke
Stvaranje realističnog izgleda stakla, sjena i efekata dubine pomoću pozicioniranja i transparentnosti pokazuje vizualne mogućnosti CSS-a. Ova tehnika odražava kako su arhitekti pokreta Bauhaus koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Jednom kada razumijete ove principe, prepoznat ćete CSS tehnike iza
Idemo izgraditi terarij staklenku dio po dio. Svaki dio koristi apsolutno pozicioniranje i dimenzioniranje temeljeno na postotcima za responzivni dizajn:
Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn:
```css
.jar-walls {
@ -397,88 +539,197 @@ Idemo izgraditi terarij staklenku dio po dio. Svaki dio koristi apsolutno pozici
```
**Razumijevanje konstrukcije terarija:**
- **Koristi** dimenzije temeljene na postotcima za responzivno skaliranje na svim veličinama ekrana
- **Pozicionira** elemente apsolutno kako bi ih precizno složio i poravnao
- **Primjenjuje** različite vrijednosti opaciteta za stvaranje efekta prozirnosti stakla
- **Implementira** slojeve pomoću `z-index` kako bi biljke izgledale kao da su unutar staklenke
- **Dodaje** suptilne sjene i profinjeni zaobljeni rub za realističniji izgled
- **Koristi** dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana
- **Pozicionira** elemente apsolutno kako bi ih precizno složila i poravnala
- **Primjenjuje** različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti
- **Koristi** `z-index` slojevito kako bi biljke bile unutar staklenke
- **Dodaje** suptilne sjene i fino zaobljene rubove za realističniji izgled
### Responzivni dizajn s postotcima
### Responzivni dizajn s postocima
Primijetite kako sve dimenzije koriste postotke umjesto fiksnih vrijednosti u pikselima:
Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela:
**Zašto je to važno:**
- **Osigurava**da se terarij proporcionalno skalira na bilo kojoj veličini ekrana
- **Održava** vizualne odnose između komponenti staklenke
- **Pruža** dosljedno iskustvo od mobilnih telefona do velikih monitora
- **Omogućuje** dizajnu da se prilagodi bez narušavanja vizualnog izgleda
- **Osigurava** proporcionalno skaliranje terarija na bilo kojoj veličini ekrana
- **Održava** vizualne odnose između dijelova staklenke
- **Pruža** dosljedno iskustvo od mobilnih telefona do velikih desktop monitora
- **Omogućuje** dizajnu prilagodbu bez narušavanja vizualnog rasporeda
### CSS jedinice u praksi
Koristimo `rem` jedinice za zaobljene rubove, koje se skaliraju u odnosu na osnovnu veličinu fonta. Ovo omogućuje pristupačniji dizajn koji poštuje korisničke preferencije za veličinu fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji.
Koristimo `rem` jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji.
✅ **Vizualno eksperimentiranje**: Pokušajte mijenjati ove vrijednosti i promatrajte učinke:
- Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla?
- Prilagodite boju tla s `#3a241d` na `#8B4513`– koji je vizualni efekt?
- Izmijenite `z-index` tla na 2 – što se događa sa slojevima?
### 🔄 **Pedagoška provjera**
**Razumijevanje vizualnog CSS dizajna**: Potvrdite svoje razumijevanje vizualnog CSS-a:
- ✅ Kako dimenzije u postocima stvaraju responzivni dizajn?
- ✅ Zašto prozirnost stvara efekt prozirnog stakla?
- ✅ Koju ulogu ima z-index u slojevitosti elemenata?
- ✅ Kako vrijednosti border-radius oblikuju staklenku?
✅ **Vizualni eksperiment**: Pokušajte promijeniti ove vrijednosti i promatrajte učinke:
- Promijenite opacitet staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla?
- Prilagodite boju zemlje s `#3a241d` na `#8B4513`– kakav vizualni utjecaj to ima?
- Promijenite `z-index` zemlje na 2 – što se događa sa slojevima?
**Dizajnerski princip**: Primijetite kako gradimo složene vizuale iz jednostavnih oblika:
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Iskoristite Agent način za dovršetak sljedećeg izazova:
**Opis:** Napravite CSS animaciju koja će učiniti da biljke u terariju nježno lelujaju, simulirajući efekt prirodnog povjetarca. Ovo će vam pomoći da vježbate CSS animacije, transformacije i ključne okvire, dok istovremeno poboljšavate vizualni izgled vašeg terarija.
**Opis:** Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija.
**Zadatak:** Dodajte CSS animacije ključnih okvira kako bi biljke u terariju nježno lelujale s jedne strane na drugu. Napravite animaciju ljuljanja koja lagano rotira svaku biljku (2-3 stupnja) lijevo i desno s trajanjem od 3-4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija bude beskonačna i da ima funkciju ublažavanja za prirodnije kretanje.
**Zadatak:** Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret.
Saznajte više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov: Dodavanje refleksija na staklu
## 🚀 Izazov: Dodavanje odraza stakla
Spremni za poboljšanje vašeg terarija s realističnim refleksijama na staklu? Ova tehnika će dodati dubinu i realizam dizajnu.
Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu.
Stvorit ćete suptilne naglaske koji simuliraju kako svjetlost reflektira na staklenim površinama. Ovaj pristup je sličan načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlost i refleksiju kako bi naslikano staklo izgledalo trodimenzionalno. Evo što trebate postići:
Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići:
Za sveobuhvatne osnove CSS-a, dovršite ovaj modul na Microsoft Learn platformi: [Stilizirajte svoju HTML aplikaciju pomoću CSS-a](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel
- [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom
- [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje
- [ ] Vježbajte box model dodavanjem paddinga i margine na div
### 🎯 **Što možete postići u ovom satu**
- [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a
- [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom
- [ ] Kreirati jednostavan raspored koristeći flexbox ili grid
- [ ] Eksperimentirati s CSS prijelazima za glatke efekte
- [ ] Vježbati responzivni dizajn s media queryjima
### 📅 **Vaša tjedna CSS avantura**
- [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom
- [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje
## 🎯 Vaš vremenski plan za savladavanje CSS-a
```mermaid
timeline
title Napredak u učenju CSS-a
section Osnove (10 minuta)
Veza datoteka: Poveži CSS s HTML-om
: Razumjeti pravila kaskade
: Naučiti osnove naslijeđivanja
section Selektori (15 minuta)
Ciljanje elemenata: Element selektori
: Uzorci klasa
: Specifičnost ID-a
: Kombinatori
section Model kutije (20 minuta)
Osnove izgleda: Margin i padding
: Svojstva bordoera
: Veličina sadržaja
: Ponašanje box-sizinga
section Pozicioniranje (25 minuta)
Postavljanje elemenata: Statično vs relativno
: Apsolutno pozicioniranje
: Z-index slojevi
: Responzivne jedinice
section Vizualni dizajn (30 minuta)
Majstorstvo stiliziranja: Boje i neprozirnost
: Sjene i efekti
: Prijelazi
: Svojstva transformacije
section Responzivni dizajn (45 minuta)
Više uređaja podrška: Media upiti
: Fleksibilni rasporedi
: Pristup mobilni-prvo
: Optimizacija viewporta
section Napredne tehnike (1 tjedan)
Moderni CSS: Flexbox rasporedi
: CSS Grid sustavi
: Prilagođena svojstva
: Animacijski keyframeovi
section Profesionalne vještine (1 mjesec)
CSS arhitektura: Obrasci komponenti
: Održiv kod
: Optimizacija performansi
: Kompatibilnost između preglednika
```
### 🛠️ Sažetak vašeg CSS alata
Nakon završetka ovog poglavlja, sada imate:
- **Razumijevanje kaskade**: Kako se stilovi nasljeđuju i nadjačavaju
- **Ovladavanje selektorima**: Precizno ciljanje elemenata, klasa i ID-eva
- **Vještine pozicioniranja**: Strateško postavljanje i slojevitost elemenata
- **Vizualni dizajn**: Stvaranje staklenih efekata, sjena i prozirnosti
- **Responzivne tehnike**: Rasporedi u postocima koji se prilagođavaju svakom ekranu
- **Organizacija koda**: Čista, održiva CSS struktura
- **Moderni pristupi**: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca
**Sljedeći koraci**: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript!
## Zadatak
[Refaktoriranje CSS-a](assignment.md)
[CSS Refactoring](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda.
# Projekt Terarij, 3. dio: Manipulacija DOM-om i JavaScript zatvaranja
# Terrarij Projekt Dio 3: Manipulacija DOM-om i JavaScript Zatvaranja
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Vaše JavaScript DOM Putovanje
section Osnove
Razumjeti DOM: 3: Student
Naučiti closures: 4: Student
Povezati elemente: 4: Student
section Interakcija
Postaviti događaje povlačenja: 4: Student
Pratiti koordinate: 5: Student
Rukovati pomicanjem: 5: Student
section Dorada
Dodati čišćenje: 4: Student
Testirati funkcionalnost: 5: Student
Završiti terarij: 5: Student
```
> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac)
Dobrodošli u jedan od najzanimljivijih aspekata web razvoja - stvaranje interaktivnosti! Document Object Model (DOM) je poput mosta između vašeg HTML-a i JavaScripta, a danas ćemo ga koristiti kako bismo vaš terarij oživjeli. Kada je Tim Berners-Lee stvorio prvi web preglednik, zamislio je web gdje dokumenti mogu biti dinamični i interaktivni - DOM omogućuje ostvarenje te vizije.
Dobrodošli u jedan od najzanimljivijih aspekata web razvoja - stvaranje interaktivnosti! Document Object Model (DOM) je poput mosta između vašeg HTML-a i JavaScripta, a danas ćemo ga koristiti da oživimo vaš terrarij. Kada je Tim Berners-Lee stvorio prvi web preglednik, zamislio je web na kojem dokumenti mogu biti dinamični i interaktivni - DOM tu viziju čini mogućom.
Također ćemo istražiti JavaScript zatvaranja, što na prvi pogled može zvučati zastrašujuće. Zamislite zatvaranja kao stvaranje "džepova memorije" u kojima vaše funkcije mogu zapamtiti važne informacije. To je poput svakog biljnog elementa u vašem terariju koji ima vlastiti zapis podataka za praćenje svoje pozicije. Do kraja ove lekcije shvatit ćete koliko su prirodna i korisna.
Također ćemo istražiti JavaScript zatvaranja, što na prvi pogled može zvučati zastrašujuće. Razmislite o zatvaranjima kao o stvaranju "memorijskih džepova" u kojima vaše funkcije mogu pamtiti važne informacije. To je kao da svaka biljka u vašem terrariju ima svoj vlastiti zapis podataka za praćenje svoje pozicije. Na kraju ove lekcije, shvatit ćete koliko su prirodna i korisna.
Evo što ćemo izraditi: terarij u kojem korisnici mogu povlačiti i ispuštati biljke gdje god žele. Naučit ćete tehnike manipulacije DOM-om koje omogućuju sve, od povlačenja i ispuštanja datoteka do interaktivnih igara. Oživimo vaš terarij.
Evo što gradimo: terrarij u kojem korisnici mogu povlačiti i ispuštati biljke gdje god žele. Naučit ćete tehnike manipulacije DOM-om koje pokreću sve od povuci-i-pusti prijenosa datoteka do interaktivnih igara. Oživimo vaš terrarij.
## Razumijevanje DOM-a: Vaša ulaznica za interaktivne web stranice
## Razumijevanje DOM-a: Vaš Ulaz u Interaktivne Web Stranice
Document Object Model (DOM) način je na koji JavaScript komunicira s vašim HTML elementima. Kada vaš preglednik učita HTML stranicu, stvara strukturirani prikaz te stranice u memoriji - to je DOM. Zamislite ga kao obiteljsko stablo gdje je svaki HTML element član obitelji kojem JavaScript može pristupiti, modificirati ga ili ga premjestiti.
Document Object Model (DOM) je način na koji JavaScript komunicira s vašim HTML elementima. Kada vaš preglednik učita HTML stranicu, on stvara strukturiranu reprezentaciju te stranice u memoriji - to je DOM. Zamislite ga kao obiteljsko stablo gdje je svaki HTML element član obitelji kojem JavaScript može pristupiti, mijenjati ga ili preraspodijeliti.
Manipulacija DOM-om pretvara statične stranice u interaktivne web stranice. Svaki put kad vidite da se gumb mijenja boju pri prelasku mišem, sadržaj se ažurira bez osvježavanja stranice ili elemente koje možete povlačiti, to je rad manipulacije DOM-om.
Manipulacija DOM-om pretvara statične stranice u interaktivne web stranice. Svaki put kada vidite da se gumb mijenja bojom pri prelasku mišem, sadržaj se ažurira bez osvježavanja stranice ili elemente koje možete povlačiti, to je DOM manipulacija na djelu.
```mermaid
flowchart TD
A["Dokument"] --> B["HTML"]
B --> C["Zaglavlje"]
B --> D["Tijelo"]
C --> E["Naslov"]
C --> F["Meta Oznake"]
D --> G["H1: Moj Terrarij"]
D --> H["Div: Kontejner Stranice"]
H --> I["Div: Lijevi Kontejner"]
H --> J["Div: Desni Kontejner"]
H --> K["Div: Terrarij"]
I --> L["Elementi Biljaka 1-7"]
J --> M["Elementi Biljaka 8-14"]
L --> N["img#plant1"]
L --> O["img#plant2"]
M --> P["img#plant8"]
M --> Q["img#plant9"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style D fill:#e8f5e8
style H fill:#fff3e0
style N fill:#ffebee
style O fill:#ffebee
style P fill:#ffebee
style Q fill:#ffebee
```
> Prikaz DOM-a i HTML oznaka koje ga referenciraju. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Reprezentacija DOM-a i HTML oznaka koje ga referenciraju. Iz [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
**Evo što DOM čini moćnim:**
- **Omogućuje** strukturirani način pristupa bilo kojem elementu na vašoj stranici
- **Omogućuje** dinamično ažuriranje sadržaja bez osvježavanja stranice
- **Omogućuje** reakciju u stvarnom vremenu na interakcije korisnika poput klikova i povlačenja
- **Pruža** strukturiran način pristupa bilo kojem elementu na vašoj stranici
- **Omogućuje** dinamička ažuriranja sadržaja bez osvježavanja stranice
- **Dozvoljava** odgovor u stvarnom vremenu na korisničke interakcije poput klikova i povlačenja
- **Stvara** temelj za moderne interaktivne web aplikacije
## JavaScript zatvaranja: Stvaranje organiziranog i moćnog koda
## JavaScript Zatvaranja: Stvaranje Organiziranog, Moćnog Koda
[JavaScript zatvaranje](https://developer.mozilla.org/docs/Web/JavaScript/Closures) je poput davanja funkciji vlastitog privatnog radnog prostora s trajnom memorijom. Zamislite kako su Darwinove zebe na Galapagosu razvile specijalizirane kljunove na temelju svog specifičnog okruženja - zatvaranja djeluju slično, stvarajući specijalizirane funkcije koje "pamte" svoj specifični kontekst čak i nakon što je njihova roditeljska funkcija završila.
[JavaScript zatvaranje](https://developer.mozilla.org/docs/Web/JavaScript/Closures) je poput davanja funkciji vlastitog privatnog radnog prostora s trajnom memorijom. Razmislite o Darwinovim sjenicama na Galapagoskim otocima koje su razvile specijalizirane kljunove ovisno o njihovom određenom okolišu - zatvaranja rade slično, stvarajući specijalizirane funkcije koje "pamte" svoj specifični kontekst čak i nakon što njihova roditeljska funkcija završi.
U našem terariju, zatvaranja pomažu svakoj biljci da neovisno pamti svoju poziciju. Ovaj obrazac pojavljuje se u profesionalnom JavaScript razvoju, čineći ga vrijednim konceptom za razumijevanje.
U našem terrariju, zatvaranja pomažu svakoj biljci da pamti svoju poziciju neovisno. Ovaj obrazac se pojavljuje kroz profesionalni JavaScript razvoj, što ga čini vrijednim konceptom za razumijevanje.
> 💡 **Razumijevanje zatvaranja**: Zatvaranja su značajna tema u JavaScriptu, a mnogi ih programeri koriste godinama prije nego što u potpunosti shvate sve teorijske aspekte. Danas se fokusiramo na praktičnu primjenu - vidjet ćete kako se zatvaranja prirodno pojavljuju dok gradimo naše interaktivne funkcije. Razumijevanje će se razvijati kako budete vidjeli kako rješavaju stvarne probleme.
> 💡 **Razumijevanje Zatvaranja**: Zatvaranja su važna tema u JavaScriptu, a mnogi programeri ih koriste godinama prije nego što u potpunosti shvate sve teorijske aspekte. Danas se fokusiramo na praktičnu primjenu - vidjet ćete zatvaranja prirodno kako se pojavljuju dok gradimo naše interaktivne značajke. Razumijevanje će se razvijati kako budete vidjeli kako rješavaju stvarne probleme.
> Prikaz DOM-a i HTML oznaka koje ga referenciraju. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Reprezentacija DOM-a i HTML oznaka koje ga referenciraju. Iz [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
U ovoj lekciji dovršit ćemo naš interaktivni projekt terarija stvaranjem JavaScripta koji će omogućiti korisniku manipulaciju biljkama na stranici.
U ovoj lekciji ćemo dovršiti naš interaktivni terrarij projekt stvaranjem JavaScripta koji će korisniku omogućiti manipuliranje biljkama na stranici.
## Prije nego počnemo: Priprema za uspjeh
## Prije nego što Počnemo: Postavljanje za Uspjeh
Trebat će vam vaši HTML i CSS datoteke iz prethodnih lekcija o terariju - sada ćemo taj statični dizajn učiniti interaktivnim. Ako se prvi put pridružujete, dovršavanje tih lekcija prvo će vam pružiti važan kontekst.
Trebate imati HTML i CSS datoteke iz prethodnih terrarij lekcija - spremni smo učiniti taj statični dizajn interaktivnim. Ako ste se pridružili prvi put, preporučujemo da prvo završite te lekcije za važan kontekst.
Evo što ćemo izraditi:
- **Glatko povlačenje i ispuštanje** za sve biljke u terariju
- **Praćenje koordinata** kako bi biljke zapamtile svoje pozicije
Evo što ćemo napraviti:
- **Glatko povlačenje i ispuštanje**svih biljaka u terrariju
- **Praćenje koordinata**tako da biljke pamte svoje pozicije
- **Potpuno interaktivno sučelje** koristeći vanilla JavaScript
- **Čist, organiziran kod** koristeći obrasce zatvaranja
## Postavljanje JavaScript datoteke
## Postavljanje Vaše JavaScript Datoteke
Izradimo JavaScript datoteku koja će učiniti vaš terarij interaktivnim.
Kreirajmo JavaScript datoteku koja će učiniti vaš terrarij interaktivnim.
**Korak 1: Izradite svoju skriptu**
**Korak 1: Kreirajte svoju skriptu**
U mapi terarija izradite novu datoteku pod nazivom `script.js`.
U svojoj mapi terrarija, kreirajte novu datoteku nazvanu`script.js`.
**Korak 2: Povežite JavaScript s vašim HTML-om**
**Korak 2: Povežite JavaScript sa svojim HTML-om**
Dodajte ovu oznaku skripte u odjeljak `<head>` vaše `index.html` datoteke:
Dodajte ovaj skript tag u odjeljak `<head>` vaše `index.html` datoteke:
```html
<scriptsrc="./script.js"defer></script>
@ -80,26 +180,26 @@ Dodajte ovu oznaku skripte u odjeljak `<head>` vaše `index.html` datoteke:
**Zašto je atribut `defer` važan:**
- **Osigurava** da vaš JavaScript čeka dok se sav HTML ne učita
- **Sprječava** pogreške gdje JavaScript traži elemente koji još nisu spremni
- **Sprječava** pogreške kada JavaScript traži elemente koji još nisu spremni
- **Jamči** da su svi vaši biljni elementi dostupni za interakciju
- **Pruža** bolje performanse nego postavljanje skripti na dno stranice
- **Pruža** bolju izvedbu nego postavljanje skripti na dno stranice
> ⚠️ **Važna napomena**: Atribut `defer` sprječava uobičajene probleme s vremenom učitavanja. Bez njega, JavaScript bi mogao pokušati pristupiti HTML elementima prije nego što se učitaju, što bi uzrokovalo pogreške.
> ⚠️ **Važna Napomena**: Atribut `defer` sprječava uobičajene probleme s redoslijedom izvršavanja. Bez njega, JavaScript može pokušati pristupiti HTML elementima prije nego što su učitani, izazivajući pogreške.
---
## Povezivanje JavaScripta s vašim HTML elementima
## Povezivanje JavaScripta s Vašim HTML Elementima
Prije nego što možemo učiniti elemente povlačivima, JavaScript mora locirati te elemente u DOM-u. Zamislite to kao sustav katalogizacije knjižnice - jednom kada imate broj kataloga, možete pronaći točno onu knjigu koja vam treba i pristupiti svim njezinim sadržajima.
Prije nego što možemo omogućiti povlačenje elemenata, JavaScript ih mora locirati u DOM-u. Zamislite to kao sustav katalogizacije u knjižnici - kad imate katalogski broj, možete pronaći točno knjigu koju trebate i pristupiti svim njezinim sadržajima.
Koristit ćemo metodu `document.getElementById()` za uspostavljanje tih veza. To je poput preciznog sustava arhiviranja - pružite ID i locirate točno onaj element koji vam treba u vašem HTML-u.
Koristit ćemo metodu `document.getElementById()` za uspostavljanje ovih veza. To je poput preciznog sustava arhiviranja - vi dajete ID, a ona pronalazi točno onaj element koji vam treba u vašem HTML-u.
### Omogućavanje funkcionalnosti povlačenja za sve biljke
### Omogućavanje Funkcionalnosti Povlačenja za Sve Biljke
Dodajte ovaj kod u vašu `script.js` datoteku:
Dodajte ovaj kod u svoju datoteku `script.js`:
```javascript
// Enable drag functionality for all 14 plants
// Omogući funkcionalnost povlačenja za svih 14 biljaka
- **Locira** svaki biljni element u DOM-u koristeći njegov jedinstveni ID
- **Dohvaća** JavaScript referencu na svaki HTML element
- **Prosljeđuje** svaki element funkciji `dragElement` (koju ćemo uskoro izraditi)
- **Prosljeđuje** svaki element funkciji `dragElement` (koju ćemo sada kreirati)
- **Priprema** svaku biljku za interakciju povlačenja i ispuštanja
- **Povezuje** vašu HTML strukturu s JavaScript funkcionalnošću
- **Povezuje** vašu HTML strukturu s JavaScript funkcionalnostima
> 🎯 **Zašto koristimo ID umjesto klasa?** ID-ovi pružaju jedinstvene identifikatore za specifične elemente, dok su CSS klase dizajnirane za stiliziranje grupa elemenata. Kada JavaScript treba manipulirati pojedinačnim elementima, ID-ovi pružaju preciznost i učinkovitost koja nam treba.
> 🎯 **Zašto koristiti ID-ove umjesto klasa?** ID-ovi pružaju jedinstvene identifikatore za specifične elemente, dok su CSS klase dizajnirane za stiliziranje grupa elemenata. Kada JavaScript treba manipulirati pojedinačnim elementima, ID-ovi nude preciznost i performanse koje su nam potrebne.
> 💡 **Pametni savjet**: Primijetite kako pozivamo `dragElement()` za svaku biljku zasebno. Ovaj pristup osigurava da svaka biljka dobije svoje neovisno ponašanje povlačenja, što je ključno za glatku korisničku interakciju.
> 💡 **Savjet**: Primijetite kako pozivamo `dragElement()` za svaku biljku pojedinačno. Ovaj pristup osigurava da svaka biljka dobije vlastito neovisno ponašanje povlačenja, što je ključno za glatku interakciju korisnika.
### 🔄 **Pedagoška Provjera**
**Razumijevanje Povezivanja DOM-a**: Prije nego krenete u funkcionalnost povlačenja, potvrdite da možete:
- ✅ Objasniti kako `document.getElementById()` pronalazi HTML elemente
- ✅ Razumjeti zašto koristimo jedinstvene ID-ove za svaku biljku
- ✅ Opisati svrhu atributa `defer` u skriptama
- ✅ Prepoznati kako se JavaScript i HTML povezuju kroz DOM
**Brzi Samoprovjera**: Što bi se dogodilo da dva elementa imaju isti ID? Zašto `getElementById()` vraća samo jedan element?
*Odgovor: ID-ovi trebaju biti jedinstveni; ako su duplicirani, vraća se samo prvi element*
---
## Izrada zatvaranja funkcije dragElement
## Izgradnja Funkcije zatvaranja za Element za Povlačenje
Sada ćemo izraditi srž naše funkcionalnosti povlačenja: zatvaranje koje upravlja ponašanjem povlačenja za svaku biljku. Ovo zatvaranje će sadržavati više unutarnjih funkcija koje zajedno rade na praćenju pokreta miša i ažuriranju pozicija elemenata.
Sada ćemo stvoriti srce naše funkcionalnosti povlačenja: zatvaranje koje upravlja ponašanjem povlačenja za svaku biljku. Ovo zatvaranje će sadržavati više unutarnjih funkcija koje surađuju u praćenju pomaka miša i ažuriranju položaja elemenata.
Zatvaranja su savršena za ovaj zadatak jer nam omogućuju stvaranje "privatnih" varijabli koje traju između poziva funkcija, dajući svakoj biljci vlastiti neovisni sustav za praćenje koordinata.
Zatvaranja su savršena za ovaj zadatak jer nam omogućuju stvaranje "privatnih" varijabli koje traju između poziva funkcija, dajući svakoj biljci vlastiti sustav praćenja koordinata.
### Razumijevanje zatvaranja kroz jednostavan primjer
### Razumijevanje Zatvaranja kroz Jednostavan Primjer
Dopustite mi da demonstriram zatvaranja jednostavnim primjerom koji ilustrira koncept:
Dopustite mi da pokažem zatvaranja s jednim jednostavnim primjerom koji ilustrira koncept:
```javascript
function createCounter() {
let count = 0; // This is like a private variable
let count = 0; // Ovo je poput privatne varijable
function increment() {
count++; // The inner function remembers the outer variable
count++; // Unutarnja funkcija pamti vanjsku varijablu
return count;
}
return increment; // We're giving back the inner function
- **Stvara** privatnu varijablu `count` koja postoji samo unutar ovog zatvaranja
- **Unutarnja funkcija** može pristupiti i mijenjati tu vanjsku varijablu (mehanizam zatvaranja)
- **Kada vratimo** unutarnju funkciju, ona održava svoju vezu s tim privatnim podacima
- **Čak i nakon** što `createCounter()` završi izvršenje, `count` ostaje i pamti svoju vrijednost
- **Kada vraćamo** unutarnju funkciju, ona održava vezu s tim privatnim podacima
- **Čak i nakon** što `createCounter()` završi izvođenje, `count` ostaje i pamti svoju vrijednost
### Zašto su zatvaranja savršena za funkcionalnost povlačenja
Za naš terarij, svaka biljka mora zapamtiti svoje trenutne koordinate pozicije. Zatvaranja pružaju savršeno rješenje:
Za naš terrarij, svaka biljka treba pamtiti svoje trenutne koordinate pozicije. Zatvaranja pružaju savršeno rješenje:
**Ključne prednosti za naš projekt:**
- **Održava** privatne varijable pozicije za svaku biljku neovisno
- **Održava** privatne varijable položaja za svaku biljku neovisno
- **Čuva** podatke o koordinatama između događaja povlačenja
- **Sprječava**sukobe varijabli između različitih povlačivih elemenata
- **Stvara** čist, organiziran kod
- **Sprječava**konflikte varijabli između različitih elemenata koje se mogu povlačiti
- **Stvara** čist i organiziran kod
> 🎯 **Cilj učenja**: Ne morate odmah savladati svaki aspekt zatvaranja. Fokusirajte se na to kako nam pomažu organizirati kod i održavati stanje za našu funkcionalnost povlačenja.
> 🎯 **Cilj učenja**: Ne trebate odmah savladati svaki aspekt zatvaranja. Fokusirajte se na to kako nam pomažu organizirati kod i održavati stanje za našu funkcionalnost povlačenja.
DragStart --> Dragging: Miš/prst se pomiče (pointermove)
Dragging --> Dragging: Nastavi pomicanje
Dragging --> DragEnd: Korisnik pusti (pointerup)
DragEnd --> Ready: Resetiranje za sljedeće povlačenje
state DragStart {
[*] --> CapturePosition
CapturePosition --> SetupListeners
SetupListeners --> [*]
}
state Dragging {
[*] --> CalculateMovement
CalculateMovement --> UpdatePosition
UpdatePosition --> [*]
}
state DragEnd {
[*] --> RemoveListeners
RemoveListeners --> CleanupState
CleanupState --> [*]
}
```
### Kreiranje funkcije dragElement
Sada ćemo izraditi glavnu funkciju koja će upravljati svim logikom povlačenja. Dodajte ovu funkciju ispod deklaracija vaših biljnih elemenata:
Sada izgradimo glavnu funkciju koja će rukovati svojom logikom povlačenja. Dodajte ovu funkciju ispod deklaracija biljnih elemenata:
```javascript
function dragElement(terrariumElement) {
// Initialize position tracking variables
let pos1 = 0, // Previous mouse X position
pos2 = 0, // Previous mouse Y position
pos3 = 0, // Current mouse X position
pos4 = 0; // Current mouse Y position
// Inicijaliziraj varijable za praćenje položaja
let pos1 = 0, // Prethodna X pozicija miša
pos2 = 0, // Prethodna Y pozicija miša
pos3 = 0, // Trenutna X pozicija miša
pos4 = 0; // Trenutna Y pozicija miša
// Set up the initial drag event listener
// Postavi početnog slušača za događaj povlačenja
terrariumElement.onpointerdown = pointerDrag;
}
```
**Razumijevanje sustava praćenja pozicije:**
- **`pos1` i `pos2`**: Spremaju razliku između starih i novih pozicija miša
**Razumijevanje sustava praćenja položaja:**
- **`pos1` i `pos2`**: Spremaju razliku između starog i novog položaja miša
- **`pos3` i `pos4`**: Prate trenutne koordinate miša
- **`terrariumElement`**: Specifični biljni element koji činimo povlačivim
- **`onpointerdown`**: Događaj koji se aktivira kada korisnik započne povlačenje
- **`terrariumElement`**: Specifični biljni element koji ćemo učiniti povlačivim
- **`onpointerdown`**: Događaj koji se aktivira kada korisnik počne povlačiti
**Evo kako obrazac zatvaranja funkcionira:**
- **Stvara** privatne varijable pozicije za svaki biljni element
- **Održava** te varijable tijekom cijelog životnog ciklusa povlačenja
- **Osigurava** da svaka biljka neovisno prati svoje koordinate
- **Pruža** čisto sučelje kroz funkciju `dragElement`
**Evo kako radi obrazac zatvaranja:**
- **Stvara** privatne varijable položaja za svaki biljni element
- **Održava** te varijable kroz cijeli životni ciklus povlačenja
- **Osigurava** da svaka biljka prati svoje vlastite koordinate neovisno
- **Pruža** čist sučelje kroz funkciju `dragElement`
### Zašto koristiti događaje pokazivača?
### Zašto koristiti Pointer Evente?
Možda se pitate zašto koristimo `onpointerdown` umjesto poznatijeg `onclick`. Evo objašnjenja:
| Vrsta događaja | Najbolje za | Nedostatak |
|----------------|------------|------------|
| `onclick`| Jednostavni klikovi na gumb | Ne može upravljati povlačenjem (samo klikovi i otpuštanja) |
| Tip događaja | Najbolji za | Mana |
|--------------|-------------|-------|
| `onclick` | Jednostavni klikovi na gumb | Ne može rukovati povlačenjem (samo klik i otpuštanje) |
| `onpointerdown` | Miš i dodir | Noviji, ali danas dobro podržan |
| `onmousedown` | Samo za desktop miš | Isključuje mobilne korisnike |
| `onmousedown` | Samo miš na desktopu | Ne funkcionira za mobilne korisnike |
**Zašto su događaji pokazivača savršeni za ono što gradimo:**
- **Odlično radi** bez obzira koristi li netko miš, prst ili čak olovku
- **Isti osjećaj** na prijenosnom računalu, tabletu ili telefonu
- **Upravlja** stvarnim pokretom povlačenja (ne samo klikom i gotovim)
**Zašto su pointer eventi savršeni za ono što gradimo:**
- **Odlično rade** bilo da netko koristi miš, prst ili olovku
- **Isto se osjećaju** na laptopu, tabletu ili telefonu
- **Rukuje** aktivnim povlačenjem (ne samo klikom)
- **Stvara** glatko iskustvo koje korisnici očekuju od modernih web aplikacija
> 💡 **Priprema za budućnost**: Događaji pokazivača su moderan način upravljanja interakcijama korisnika. Umjesto pisanja zasebnog koda za miš i dodir, dobivate oboje besplatno. Prilično zgodno, zar ne?
> 💡 **Buduća zaštita**: Pointer eventi su moderni način za rukovanje korisničkim interakcijama. Umjesto da pišete zaseban kod za miš i dodir, dobijete oba besplatno. Prilično zgodno, zar ne?
### 🔄 **Pedagoška Provjera**
**Razumijevanje rukovanja događajima**: Pauzirajte kako biste potvrdili razumijevanje događaja:
- ✅ Zašto koristimo pointer evente umjesto mouse eventa?
- ✅ Kako varijable zatvaranja traju između poziva funkcija?
- ✅ Koju ulogu ima `preventDefault()` u glatkom povlačenju?
- ✅ Zašto postavljamo slušače na dokument, a ne na pojedinačne elemente?
**Povezanost sa stvarnim svijetom**: Razmislite o sučeljima povuci-i-pusti koje svakodnevno koristite:
- **Prijenos datoteka**: Povlačenje datoteka u prozor preglednika
- **Kanban table**: Premještanje zadataka između stupaca
- **Galerije slika**: Promjena redoslijeda fotografija
- **Mobilna sučelja**: Klizanje i povlačenje na zaslonima osjetljivim na dodir
---
## Funkcija pointerDrag: Hvatanje početka povlačenja
## Funkcija pointerDrag: Hvatanje Početka Povlačenja
Kada korisnik pritisne biljku (bilo klikom miša ili dodirom prsta), funkcija `pointerDrag` stupa na snagu. Ova funkcija bilježi početne koordinate i postavlja sustav povlačenja.
Kada korisnik pritisne na biljku (bilo klikom miša ili dodirom prsta), funkcija `pointerDrag`kreće u akciju. Ova funkcija hvata početne koordinate i postavlja sustav povlačenja.
Dodajte ovu funkciju unutar vašeg zatvaranja `dragElement`, odmah nakon linije `terrariumElement.onpointerdown = pointerDrag;`:
Dodajte ovu funkciju unutar svog zatvaranja `dragElement`, odmah nakon retka`terrariumElement.onpointerdown = pointerDrag;`:
```javascript
function pointerDrag(e) {
// Prevent default browser behavior (like text selection)
- **Stvoriti** vizualne artefakte tijekom operacije povlačenja
> 🔍 **Eksperiment**: Nakon dovršetka ove lekcije, pokušajte ukloniti `e.preventDefault()` i vidjeti kako to utječe na iskustvo povlačenja. Brzo ćete shvatiti zašto je ova linija ključna!
> 🔍 **Eksperimentirajte**: Nakon završetka ove lekcije, pokušajte ukloniti `e.preventDefault()` i vidjeti kako to utječe na iskustvo povlačenja. Brzo ćete shvatiti zašto je ovaj redak neophodan!
### Sustav praćenja koordinata
Svojstva `e.clientX` i `e.clientY` daju nam precizne koordinate miša/dodira:
| Svojstvo | Što mjeri | Primjena |
|----------|-----------|----------|
| `clientX` | Horizontalni položaj u odnosu na prikaz | Praćenje kretanja lijevo-desno |
| `clientY` | Vertikalni položaj u odnosu na prikaz | Praćenje kretanja gore-dolje |
|----------|------------|-----------|
| `clientX` | Horizontalnu poziciju relativno prema vidljivom dijelu prozora | Praćenje kretanja lijevo-desno |
| `clientY` | Vertikalnu poziciju relativno prema vidljivom dijelu prozora | Praćenje kretanja gore-dolje |
**Razumijevanje ovih koordinata:**
- **Pruža**informacije o pozicioniranju u pikselima
- **Ažurira** u stvarnom vremenu dok korisnik pomiče pokazivač
- **Ostaje**dosljedno na različitim veličinama zaslona i razinama zumiranja
- **Pruža**podatke o pozicioniranju s pikselom precizno
- **Ažurira se** u stvarnom vremenu dok korisnik pomiče pokazivač
- **Ostaje**konzistentno na različitim veličinama zaslona i razinama zumiranja
### Postavljanje slušatelja događaja na razini dokumenta
Primijetite kako postavljamo događaje za kretanje i zaustavljanje na cijeli `document`, a ne samo na biljni element:
Primijetite kako povezujemo događaje pomicanja i zaustavljanja na cijeli `document`, a ne samo na element biljke:
```javascript
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
```
**Zašto postaviti na dokument:**
- **Nastavlja** praćenje čak i kada miš napusti biljni element
- **Sprječava** prekid povlačenja ako se korisnik brzo pomakne
- **Pruža** glatko povlačenje preko cijelog zaslona
- **Upravlja** rubnim slučajevima kada pokazivač napusti prozor preglednika
**Zašto povezati na dokument:**
- **Nastavlja** praćenje čak i kada miš izađe iz elementa biljke
- **Sprječava** prekid povlačenja ako korisnik brzo pomakne miš
- **Omogućuje** glatko povlačenje preko cijelog zaslona
- **Rješava** rubne slučajeve gdje pokazivač izađe iz prozora preglednika
> ⚡ **Napomena o performansama**: Očistit ćemo ove slušatelje događaja na razini dokumenta kada povlačenje završi kako bismo izbjegli curenje memorije i probleme s performansama.
> ⚡ **Napomena o izvedbi**: Očistit ćemo ove slušatelje na razini dokumenta kada povlačenje prestane kako bismo izbjegli curenje memorije i probleme s izvedbom.
## Dovršavanje sustava povlačenja: Kretanje i čišćenje
## Završetak sustava povlačenja: pokretanje i čišćenje
Sada ćemo dodati dvije preostale funkcije koje upravljaju stvarnim kretanjem povlačenja i čišćenjem kada povlačenje završi. Ove funkcije zajedno stvaraju glatko, responzivno kretanje biljaka po vašem terariju.
Sada ćemo dodati preostale dvije funkcije koje upravljaju stvarnim pomicanjem pri povlačenju i čišćenjem nakon završetka povlačenja. Te funkcije surađuju kako bi se postiglo glatko, responzivno pomicanje biljke po vašem terariju.
### Funkcija elementDrag: Praćenje kretanja
### Funkcija elementDrag: praćenje pomicanja
Dodajte funkciju `elementDrag` odmah nakon zatvarajuće vitičaste zagrade funkcije `pointerDrag`:
```javascript
function elementDrag(e) {
// Calculate the distance moved since the last event
pos1 = pos3 - e.clientX; // Horizontal distance moved
pos2 = pos4 - e.clientY; // Vertical distance moved
// Izračunaj udaljenost koju je objekt pomaknuo od posljednjeg događaja
JavaScript->>Plant: Ažuriraj poziciju za +10px desno, +10px dolje
Plant->>Plant: Prikaži na novoj poziciji
```
### Funkcija stopElementDrag: čišćenje
### Funkcija stopElementDrag: Čišćenje
Dodajte funkciju za čišćenje nakon zatvorene vitičaste zagrade funkcije `elementDrag`:
Dodajte funkciju za čišćenje odmah nakon zatvarajuće vitičaste zagrade funkcije `elementDrag`:
```javascript
function stopElementDrag() {
// Remove the document-level event listeners
// Ukloni slušatelje događaja na razini dokumenta
document.onpointerup = null;
document.onpointermove = null;
}
@ -359,18 +530,18 @@ function stopElementDrag() {
**Zašto je čišćenje važno:**
- **Sprječava** curenje memorije zbog preostalih slušatelja događaja
- **Zaustavlja** ponašanje povlačenja kad korisnik pusti biljku
- **Omogućuje**neovisno povlačenje drugih elemenata
- **Omogućuje**da se drugi elementi mogu povlačiti neovisno
- **Resetira** sustav za sljedeću operaciju povlačenja
**Što se događa bez čišćenja:**
- Slušatelji događaja nastavljaju raditi čak i nakon što povlačenje prestane
- Performanse se pogoršavaju zbog nakupljanja neiskorištenih slušatelja
- Slušatelji događaja nastavljaju raditi i nakon prestanka povlačenja
- Izvedba opada kako se nakupljaju neiskorišteni slušatelji
- Neočekivano ponašanje pri interakciji s drugim elementima
- Resursi preglednika troše se na nepotrebno rukovanje događajima
- Resursi preglednika se troše na nepotrebnu obradu događaja
### Razumijevanje CSS svojstava položaja
### Razumijevanje CSS pozicijskih svojstava
Naš sustav povlačenja manipulira s dva ključna CSS svojstva:
Naš sustav povlačenja manipulira dvjema ključnim CSS osobinama:
| Svojstvo | Što kontrolira | Kako ga koristimo |
|----------|----------------|-------------------|
@ -378,107 +549,215 @@ Naš sustav povlačenja manipulira s dva ključna CSS svojstva:
| `left` | Udaljenost od lijevog ruba | Horizontalno pozicioniranje tijekom povlačenja |
**Ključni uvidi o offset svojstvima:**
- **`offsetTop`**: Trenutna udaljenost od gornjeg ruba pozicioniranog roditeljskog elementa
- **`offsetLeft`**: Trenutna udaljenost od lijevog ruba pozicioniranog roditeljskog elementa
- **Kontekst pozicioniranja**: Ove vrijednosti su relativne prema najbližem pozicioniranom pretku
- **Ažuriranja u stvarnom vremenu**: Promjene se događaju odmah kad mijenjamo CSS svojstva
- **`offsetTop`**: Trenutna udaljenost od vrha roditeljskog elementa s pozicioniranjem
- **`offsetLeft`**: Trenutna udaljenost od lijevog ruba roditeljskog elementa s pozicioniranjem
- **Kontekst pozicioniranja**: Ove vrijednosti su relativne najbližem položeno roditelju
- **Ažuriranja u stvarnom vremenu**: Mijenjaju se odmah pri izmjeni CSS osobina
> 🎯 **Filozofija dizajna**: Ovaj sustav povlačenja namjerno je fleksibilan – nema "zona za ispuštanje" ili ograničenja. Korisnici mogu postaviti biljke bilo gdje, pružajući im potpunu kreativnu kontrolu nad dizajnom terarija.
> 🎯 **Filozofija dizajna**: Ovaj sustav povlačenja je namjerno fleksibilan – nema "zona za ispuštanje" ili ograničenja. Korisnici mogu postaviti biljke bilo gdje, dajući im potpunu kreativnu kontrolu nad dizajnom terarija.
## Sve na jednom mjestu: Vaš kompletan sustav povlačenja
## Sve zajedno: vaš kompletan sustav povlačenja
Čestitamo! Upravo ste izgradili sofisticirani sustav povlačenja i ispuštanja koristeći čisti JavaScript. Vaša kompletna funkcija `dragElement` sada sadrži moćan closure koji upravlja:
**Što vaš closure postiže:**
- **Održava** privatne varijable položaja za svaku biljku neovisno
- **Upravlja**cijelim životnim ciklusom povlačenja od početka do kraja
- **Omogućuje** glatko i responzivno kretanje po cijelom ekranu
- **Pravilno čisti** resurse kako bi spriječio curenje memorije
- **Stvara** intuitivno i kreativno sučelje za dizajn terarija
- **Održava** privatne varijable pozicije za svaku biljku neovisno
- **Upravlja**kompletnim životnim ciklusom povlačenja od početka do kraja
- **Pruža** glatko, responzivno pomicanje po cijelom zaslonu
- **Čisti** resurse ispravno kako bi spriječio curenja memorije
- **Kreira** intuitivno, kreativno sučelje za dizajn terarija
### Testiranje vašeg interaktivnog terarija
Sada testirajte svoj interaktivni terarij! Otvorite svoju datoteku `index.html` u web pregledniku i isprobajte funkcionalnost:
Sada testirajte svoj interaktivni terarij! Otvorite datoteku `index.html` u web pregledniku i isprobajte funkcionalnost:
1. **Kliknite i držite** bilo koju biljku da započnete povlačenje
2. **Pomaknite miš ili prst** i promatrajte kako biljka glatko prati pokrete
3. **Otpustite** da ispustite biljku na novu poziciju
4. **Eksperimentirajte** s različitim rasporedima i istražite sučelje
🥇 **Postignuće**: Stvorili ste potpuno interaktivnu web aplikaciju koristeći temeljne koncepte koje profesionalni developeri koriste svakodnevno. Ta funkcionalnost povlačenja i ispuštanja koristi iste principe iza uploadanja datoteka, kanban ploča i mnogih drugih interaktivnih sučelja.
1. **Kliknite i držite** bilo koju biljku za početak povlačenja
2. **Pomaknite miš ili prst** i gledajte kako biljka glatko prati pokret
3. **Otpustite** kako biste ispustili biljku na novu poziciju
4. **Eksperimentirajte** s različitim rasporedima kako biste istražili sučelje
### 🔄 **Pedagoški provjeravanje**
**Potpuno razumijevanje sustava**: Provjerite svoje razumijevanje kompletnog sustava povlačenja:
- ✅ Kako closures održavaju neovisno stanje za svaku biljku?
- ✅ Zašto je matematički izračun koordinata nužan za glatko kretanje?
- ✅ Što bi se dogodilo da zaboravimo očistiti slušatelje događaja?
- ✅ Kako se ovaj obrazac skalira na složenije interakcije?
🥇 **Postignuće**: Stvorili ste potpuno interaktivnu web aplikaciju koristeći osnovne koncepte koje profesionalni programeri svakodnevno koriste. Ova funkcionalnost povlačenja i ispuštanja koristi iste principe kao i prijenos datoteka, kanban ploče i mnogi drugi interaktivni sustavi.
**Razmišljanje o kvaliteti koda**: Pregledajte svoje kompletno rješenje:
- **Modularni dizajn**: Svaka biljka dobiva vlastitu instancu closure-a
- **Učinkovitost događaja**: Ispravno postavljanje i čišćenje slušatelja
- **Podrška za uređaje**: Radi na desktopu i mobilnim uređajima
- **Svijest o izvedbi**: Nema curenja memorije ili suvišnih izračuna
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Koristite Agent mod da dovršite sljedeći izazov:
**Opis:** Poboljšajte projekt terarija dodavanjem funkcionalnosti za resetiranje koja vraća sve biljke na njihove izvorne pozicije uz glatke animacije.
**Opis:** Poboljšajte projekt terarija dodavanjem funkcionalnosti resetiranja koja vraća sve biljke na njihove početne pozicije s glatkim animacijama.
**Zadatak:** Stvorite gumb za resetiranje koji, kad se klikne, animira sve biljke natrag na njihove izvorne pozicije u bočnoj traci koristeći CSS prijelaze. Funkcija bi trebala spremiti izvorne pozicije kad se stranica učita i glatko premjestiti biljke natrag na te pozicije u trajanju od 1 sekunde kad se pritisne gumb za resetiranje.
**Zadatak:** Napravite gumb za resetiranje koji, kad se klikne, animira sve biljke natrag na njihove izvorne pozicije sa strane koristeći CSS prijelaze. Funkcija treba pohraniti početne položaje pri učitavanju stranice i glatko vratiti biljke na te pozicije tijekom 1 sekunde prilikom pritiskanja gumba za reset.
Saznajte više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) pročitajte ovdje.
## 🚀 Dodatni izazov: Proširite svoje vještine
Spremni za podizanje vašeg terarija na višu razinu? Pokušajte implementirati ove nadogradnje:
Spremni ste podići svoj terarij na višu razinu? Ispunite ove dodatke:
**Kreativna proširenja:**
- **Dvostruki klik** na biljku kako bi se premjestila u prvi plan (manipulacija z-indexom)
- **Dodajte vizualne povratne informacije** poput suptilnog sjaja prilikom prelaska mišem preko biljaka
- **Implementirajte granice**kako biste spriječili da biljke budu povučene izvan terarija
- **Stvorite funkciju spremanja** koja pamti pozicije biljaka koristeći localStorage
- **Dodajte zvučne efekte**za podizanje i postavljanje biljaka
**Kreativne ekstenzije:**
- **Dvoklik** na biljku da je dovedete u prvi plan (manipulacija z-index-om)
- **Dodajte vizualnu povratnu informaciju** poput suptilnog sjaja pri prelasku mišem preko biljaka
- **Implementirajte granice**da spriječite povlačenje biljaka izvan terarija
- **Napravite funkciju spremanja** koja pamti pozicije biljaka koristeći localStorage
- **Dodajte zvučne efekte**prilikom podizanja i postavljanja biljaka
> 💡 **Prilika za učenje**: Svaki od ovih izazova naučit će vas novim aspektima manipulacije DOM-om, rukovanja događajima i dizajna korisničkog iskustva.
> 💡 **Prilika za učenje**: Svaki od ovih izazova će vas naučiti novim aspektima manipulacije DOM-om, rukovanja događajima i dizajna korisničkog iskustva.
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/20)
## Pregled i samostalno učenje: Produbljivanje vašeg razumijevanja
## Pregled i samostalno učenje: produbljivanje razumijevanja
Savladali ste osnove manipulacije DOM-om i closures, ali uvijek ima prostora za daljnje istraživanje! Evo nekoliko smjernica za proširenje vašeg znanja i vještina.
Osvladali ste osnove manipulacije DOM-om i closures, ali uvijek ima prostora za istraživanje! Evo nekoliko smjerova za proširenje vašeg znanja i vještina.
### Alternativni pristupi povlačenju i ispuštanju
Koristili smo pointer događaje za maksimalnu fleksibilnost, ali web razvoj nudi više pristupa:
Koristili smo pokazivačke događaje za maksimalnu fleksibilnost, ali web razvoj nudi više pristupa:
| Pristup | Najbolje za | Vrijednost učenja |
|---------|-------------|-------------------|
| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | Prijenos datoteka, formalne zone povlačenja | Razumijevanje mogućnosti koje pruža preglednik |
| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | Interakcije specifične za mobilne uređaje | Obrasci razvoja prilagođeni mobilnim uređajima |
| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | Upload datoteka, formalne zone za povlačenje | Razumijevanje izvornog ponašanja preglednika |
- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - Napredni obrasci za closures
- [MDN vodič za Pointer Events](https://developer.mozilla.org/docs/Web/API/Pointer_events) - Sveobuhvatna referenca pointer događaja
- [W3C specifikacija za Pointer Events](https://www.w3.org/TR/pointerevents1/) - Službena dokumentacija standarda
- [Duboko o JavaScript closures](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - Napredni obrasci closure-a
**Kompatibilnost preglednika:**
- [CanIUse.com](https://caniuse.com/) - Provjerite podršku značajki u različitim preglednicima
- [CanIUse.com](https://caniuse.com/) - Provjera podrške značajki u preglednicima
- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - Detaljne informacije o kompatibilnosti
**Prilike za vježbu:**
- **Izradite** igru slagalice koristeći slične mehanizme povlačenja
- **Kreirajte** kanban ploču s upravljanjem zadacima povlačenjem i ispuštanjem
- **Dizajnirajte** galeriju slika s mogućnošću povlačenja fotografija
- **Eksperimentirajte** s gestama dodira za mobilna sučelja
- **Izgradite** puzzle igru koristeći sličnu mehaniku povlačenja
- **Napravite** kanban ploču s upravljanjem zadacima povlačenjem i ispuštanjem
- **Dizajnirajte** galeriju slika sa sortirajućim slikama povlačenjem
- **Eksperimentirajte** s dodirnim gestama za mobilna sučelja
> 🎯 **Strategija učenja**: Najbolji način da utvrdite ove koncepte je praksa. Isprobajte izradu varijacija sučelja za povlačenje – svaki projekt naučit će vas nešto novo o interakciji korisnika i manipulaciji DOM-om.
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite DevTools u pregledniku i upišite `document.querySelector('body')` u konzolu
- [ ] Probajte promijeniti tekst na web stranici koristeći `innerHTML` ili `textContent`
- [ ] Dodajte slušatelj događaja klika na bilo koji gumb ili vezu na stranici
- [ ] Istražite strukturu DOM stabla koristeći panel Elements
### 🎯 **Što možete postići u ovom satu**
- [ ] Dovršite kviz nakon lekcije i pregledajte koncepte manipulacije DOM-om
- [ ] Napravite interaktivnu web stranicu koja reagira na korisničke klike
- [ ] Vježbajte rukovanje događajima s različitim vrstama (click, mouseover, keypress)
**Profesionalne vještine koje ste stekli**: Izgradili ste značajke koristeći iste tehnike kao:
- **Trello/Kanban ploče**: Povlačenje kartica između kolona
- **Sustavi za upload datoteka**: Rukovanje datotekama povlačenjem i ispuštanjem
- **Galerije slika**: Sučelja za raspored fotografija
- **Mobilne aplikacije**: Obrasci za dodirne interakcije
> 🎯 **Strategija učenja**: Najbolji način za učvršćivanje ovih koncepata je kroz praksu. Pokušajte izraditi varijacije sučelja za povlačenje – svaki projekt naučit će vas nečemu novom o interakciji korisnika i manipulaciji DOM-om.
**Sljedeći nivo**: Spremni ste istražiti moderne frameworke poput React, Vue ili Angular koji nadograđuju ove temeljne koncepte manipulacije DOM-om!
## Zadatak
@ -486,5 +765,7 @@ Koristili smo pointer događaje za maksimalnu fleksibilnost, ali web razvoj nudi
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju odgovornosti**:
Ovaj dokument preveden je pomoću AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvornik dokumenta na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja koja proizađu iz korištenja ovog prijevoda.
3. [Uvod u DOM i zatvaranja u JS-u](./3-intro-to-DOM-and-closures/README.md)
[](https://portal.azure.com/#create/Microsoft.StaticApp)
## Zasluge
Napisano s ♥️ od strane [Jen Looper](https://www.twitter.com/jenlooper)
Terarij kreiran pomoću CSS-a inspiriran je staklenkom Jakuba Mandre na [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
Umjetnički rad ručno je nacrtala [Jen Looper](http://jenlooper.com) uz pomoć Procreate-a.
## Objavite svoj Terarij
Možete objaviti svoj terarij na webu koristeći Azure Static Web Apps.
1. Forkajte ovaj repo
2. Pritisnite ovaj gumb
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Prođite kroz čarobnjak za kreiranje vaše aplikacije. Pobrinite se da postavite korijen aplikacije na `/solution` ili korijen vaše baze koda. U ovoj aplikaciji nema API-ja, pa se ne morate brinuti oko dodavanja istog. Github mapa bit će kreirana u vašem forkovanom repozitoriju koja će pomoći Azure Static Web Apps servisima da izgrade i objave vašu aplikaciju na novu URL adresu.
3. Slijedite čarobnjak za postavljanje da kreirate svoju aplikaciju.
- Postavite **App root** na `/solution` ili na root vašeg koda.
- Ova aplikacija nema API, pa možete preskočiti konfiguraciju API-ja.
- Automatski će se kreirati mapa `.github` koja će pomoći Azure Static Web Apps-u da izgradi i objavi vašu aplikaciju.
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
Evo nečega što svaki programer zna, ali rijetko spominje: brzo tipkanje je supermoć! 🚀 Razmislite o tome - što brže možete prenijeti svoje ideje iz mozga u uređivač koda, to će vaša kreativnost bolje teći. To je kao da imate direktnu vezu između svojih misli i ekrana.
Evo nečega što svaki programer zna, ali o tome rijetko govori: brzo tipkanje je supermoć! 🚀 Razmislite o tome - što brže možete prenijeti svoje ideje iz mozga u uređivač koda, to vaša kreativnost može bolje teći. To je kao imati izravan kanal između vaših misli i ekrana.
Želite li znati jedan od najboljih načina za usavršavanje ove vještine? Pogodili ste - izgradit ćemo igru!
```mermaid
pie title Značajke Igre
"Povratne informacije u stvarnom vremenu" : 25
"Praćenje izvedbe" : 20
"Interaktivno sučelje" : 20
"Sustav tajmera" : 15
"Upravljanje citatima" : 10
"Prikaz rezultata" : 10
```
Želite li znati jedan od najboljih načina za unaprijediti ovu vještinu? Pogodili ste - izgradit ćemo igru!
> Stvorimo zajedno fantastičnu igru tipkanja!
```mermaid
flowchart LR
A[Igrač započinje igru] --> B[Prikazuje se nasumični citat]
B --> C[Igrač upisuje znakove]
C --> D{Je li znak točan?}
D -->|Da| E[Zeleno isticanje]
D -->|Ne| F[Crveno isticanje]
E --> G[Ažuriraj točnost]
F --> G
G --> H{Je li citat završen?}
H -->|Ne| C
H -->|Da| I[Izračunaj WPM]
I --> J[Prikaži rezultate]
J --> K[Želiš li igrati opet?]
K -->|Da| B
K -->|Ne| L[Kraj igre]
style A fill:#e1f5fe
style D fill:#fff3e0
style E fill:#e8f5e8
style F fill:#ffebee
style I fill:#f3e5f5
```
> Hajde da zajedno stvorimo sjajnu igru tipkanja!
Spremni ste upotrijebiti sve te vještine iz JavaScripta, HTML-a i CSS-a koje ste učili? Izgradit ćemo igru tipkanja koja će vas izazvati nasumičnim citatima legendarnog detektiva [Sherlocka Holmesa](https://en.wikipedia.org/wiki/Sherlock_Holmes). Igra će pratiti koliko brzo i točno možete tipkati - i vjerujte mi, zaraznije je nego što mislite!
Spremni ste primijeniti sve te vještine JavaScript-a, HTML-a i CSS-a koje ste učili? Izgradit ćemo igru tipkanja koja će vas izazivati sa slučajnim citatima legendarnog detektiva [Sherlocka Holmesa](https://en.wikipedia.org/wiki/Sherlock_Holmes). Igra će pratiti koliko brzo i točno možete tipkati - i vjerujte mi, to je zaraznije nego što mislite!
```mermaid
mindmap
root((Razvoj igre tipkanja))
User Interface
Input Elements
Visual Feedback
Responsive Design
Accessibility
Game Logic
Quote Selection
Timer Management
Accuracy Tracking
Score Calculation
Event Handling
Keyboard Input
Button Clicks
Real-time Updates
Game State Changes
Performance Metrics
Words Per Minute
Character Accuracy
Error Tracking
Progress Display
User Experience
Immediate Feedback
Clear Instructions
Engaging Content
Achievement System
```
## Što trebate znati
Prije nego što krenemo, provjerite jeste li upoznati s ovim konceptima (ne brinite ako trebate kratko osvježenje - svi smo to prošli!):
```mermaid
flowchart TD
A[Korisnička radnja] --> B{Vrsta događaja?}
B -->|Pritisak tipke| C[Događaj s tipkovnice]
B -->|Klik gumba| D[Događaj miša]
B -->|Timer| E[Vremenski događaj]
C --> F[Provjeri znak]
D --> G[Pokreni/Resetiraj igru]
E --> H[Ažuriraj timer]
F --> I[Tocno?]
I -->|Da| J[Istakni zeleno]
I -->|Ne| K[Istakni crveno]
J --> L[Ažuriraj rezultat]
K --> L
L --> M[Provjeri stanje igre]
G --> N[Generiraj novi citat]
H --> O[Prikaži vrijeme]
M --> P[Je li igra gotova?]
P -->|Da| Q[Prikaži rezultate]
P -->|Ne| R[Nastavi igru]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#fff3e0
style Q fill:#f3e5f5
```
Prije nego što krenemo, pobrinite se da ste upoznati s ovim pojmovima (ne brinite ako trebate brz podsjetnik - svi smo tamo bili!):
- Kreiranje tekstualnih polja za unos i kontrola gumba
- Kreiranje tekstualnih unosa i kontrola gumba
- CSS i postavljanje stilova pomoću klasa
- Osnove JavaScripta
- Kreiranje niza
- Generiranje nasumičnog broja
- Dobivanje trenutnog vremena
- Kreiranje slučajnog broja
- Dohvaćanje trenutačnog vremena
Ako vam se nešto od ovoga čini pomalo zaboravljeno, to je sasvim u redu! Ponekad je najbolji način za učvršćivanje znanja zaroniti u projekt i učiti kroz praksu.
Ako vam je nešto od ovoga malo zaboravljeno, to je potpuno u redu! Ponekad je najbolji način da učvrstite svoje znanje skočiti u projekt i učiti usput.
## Idemo izgraditi ovo!
### 🔄 **Pedagoška provjera**
**Procjena osnova**: Prije početka razvoja, provjerite razumijete li:
- ✅ Kako HTML forme i elementi za unos funkcioniraju
- ✅ CSS klase i dinamičko stiliziranje
- ✅ JavaScript događaje i handlere
- ✅ Manipulaciju nizovima i slučajan odabir
- ✅ Mjerenje vremena i izračune
[Izrada igre tipkanja koristeći programiranje vođeno događajima](./typing-game/README.md)
**Brzi samoprovjeru**: Možete li objasniti kako ovi koncepti zajedno rade u interaktivnoj igri?
- **Događaji** se pokreću kad korisnici stupaju u interakciju s elementima
- **Handleri** obrađuju te događaje i ažuriraju stanje igre
- **CSS** pruža vizualnu povratnu informaciju za korisničke radnje
- **Mjerenje vremena** omogućuje praćenje performansi i napredak igre
```mermaid
quadrantChart
title Razvoj Vještina u Igrama Tipkanja
x-axis Početnik --> Ekspert
y-axis Statično --> Interaktivno
quadrant-1 Napredne Igre
quadrant-2 Aplikacije u stvarnom vremenu
quadrant-3 Osnovne Stranice
quadrant-4 Interaktivni Sajtovi
HTML Forms: [0.3, 0.2]
CSS Styling: [0.4, 0.3]
Event Handling: [0.7, 0.8]
Game Logic: [0.8, 0.9]
Performance Tracking: [0.9, 0.7]
```
## Izgradimo ovo!
[Izrada igre tipkanja pomoću programiranja vođenog događajima](./typing-game/README.md)
### ⚡ **Što možete raditi u sljedećih 5 minuta**
- [ ] Otvorite konzolu preglednika i pokušajte slušati tipkovne događaje s `addEventListener`
- [ ] Kreirajte jednostavnu HTML stranicu s poljem za unos i testirajte detekciju tipkanja
- [ ] Vježbajte manipulaciju nizovima uspoređujući uneseni tekst s ciljnim tekstom
- [ ] Eksperimentirajte s `setTimeout` da razumijete funkcije vremenskog upravljanja
### 🎯 **Što možete postići u sljedećem satu**
- [ ] Završite kviz nakon lekcije i razumite programiranje vođeno događajima
- [ ] Izradite osnovnu verziju igre tipkanja s validacijom riječi
- [ ] Dodajte vizualnu povratnu informaciju za točno i netočno tipkanje
- [ ] Implementirajte jednostavan sustav bodovanja na temelju brzine i točnosti
- [ ] Stilizirajte svoju igru CSS-om da bi bila vizualno privlačna
### 📅 **Vaš tjedan razvoja igre**
- [ ] Dovršite punu igru tipkanja sa svim značajkama i poliranjem
- [ ] Dodajte razine težine s različitim složenostima riječi
- [ ] Kreirajte zvučne efekte i animacije za bolje korisničko iskustvo
- [ ] Učinite svoju igru prilagođenom za mobilne uređaje s dodirnim zaslonima
- [ ] Podijelite svoju igru na mreži i prikupite povratne informacije korisnika
### 🌟 **Vaš mjesečni interaktivni razvoj**
- [ ] Izradite više igara koje istražuju različite obrasce interakcije
- [ ] Naučite o game loopovima, upravljanju stanjima i optimizaciji performansi
- [ ] Doprinosite open source projektima razvoja igara
- [ ] Usavršite napredne koncepte mjerenja vremena i glatkih animacija
- [ ] Kreirajte portfolio koji prikazuje razne interaktivne aplikacije
- [ ] Mentorirajte druge zainteresirane za razvoj igara i korisničku interakciju
## 🎯 Vaš vremenski plan za savladavanje igre tipkanja
```mermaid
timeline
title Napredak u učenju razvoja igara
section Postavljanje (10 minuta)
Struktura projekta: HTML temelj
: CSS postavljanje stilova
: Kreiranje JavaScript datoteke
section Korisničko sučelje (20 minuta)
Interaktivni elementi: Polja za unos
: Kontrole gumba
: Područja za prikaz
: Odzivan raspored
section Obrada događaja (25 minuta)
Interakcija korisnika: Tipkovni događaji
: Događaji miša
: Povratne informacije u stvarnom vremenu
: Upravljanje stanjem
section Logika igre (30 minuta)
Osnovna funkcionalnost: Generiranje citata
: Usporedba znakova
: Izračun točnosti
: Implementacija štoperice
section Praćenje performansi (35 minuta)
Metrike i analitika: Izračun WPM
: Praćenje pogrešaka
: Vizualizacija napretka
: Prikaz rezultata
section Dorada i unaprjeđenje (45 minuta)
Korisničko iskustvo: Vizualne povratne informacije
: Zvučni efekti
: Animacije
: Značajke pristupačnosti
section Napredne značajke (1 tjedan)
Proširena funkcionalnost: Razine težine
: ljestvice najboljih
: Prilagođeni citati
: Opcije za više igrača
section Profesionalne vještine (1 mjesec)
Razvoj igara: Optimizacija performansi
: Arhitektura koda
: Strategije testiranja
: Obrasci implementacije
```
### 🛠️ Sažetak vašeg alata za razvoj igre
Nakon dovršetka ovog projekta savladat ćete:
- **Programiranje vođeno događajima**: Reagirajući korisnički sučelja koja odgovaraju na unos
- **Povratnu informaciju u stvarnom vremenu**: Trenutna vizualna i izvedbena ažuriranja
- **Mjerenje performansi**: Precizni sustavi mjerenja vremena i bodovanja
- **Upravljanje stanjem igre**: Kontrola tijeka aplikacije i korisničkog iskustva
- **Interaktivni dizajn**: Stvaranje zanimljivih, zaraznih korisničkih iskustava
- **Moderne web API-jeve**: Korištenje mogućnosti preglednika za bogate interakcije
- **Obrasce pristupačnosti**: Uključivi dizajn za sve korisnike
**Primjene u stvarnom svijetu**: Ove vještine direktno se primjenjuju na:
- **Web aplikacije**: Bilo koje interaktivno sučelje ili nadzorna ploča
- **Obrazovni softver**: Platforme za učenje i alati za procjenu vještina
- **Alati za produktivnost**: Tekstualni uređivači, IDE-i i softver za suradnju
- **Industrija igara**: Igre unutar preglednika i interaktivna zabava
- **Mobilni razvoj**: Sučelja na dodir i upravljanje gestama
**Sljedeća razina**: Spremni ste istražiti napredne okvire za igre, sustave za multiplayer u stvarnom vremenu ili složene interaktivne aplikacije!
## Zasluge
Napisano s ♥️ od strane [Christophera Harrisona](http://www.twitter.com/geektrainer)
Napisao s ljubavlju ♥️ [Christopher Harrison](http://www.twitter.com/geektrainer)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne odgovaramo za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ograničenje odgovornosti**:
Ovaj je dokument preveden korištenjem AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne prihvaćamo odgovornost za bilo kakva nesporazume ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.
Jeste li se ikada pitali kako web stranice znaju kada kliknete na gumb ili upišete tekst u okvir? To je čarolija programiranja vođenog događajima! Koji je bolji način za učenje ove ključne vještine nego izradom nečeg korisnog - igre brzog tipkanja koja reagira na svaki vaš pritisak tipke.
Jeste li se ikada zapitali kako web stranice znaju kada kliknete na gumb ili upišete nešto u tekstni okvir? To je čarolija programiranja vođenog događajima! Koji je bolji način za naučiti ovu osnovnu vještinu nego izgraditi nešto korisno - igru brzine tipkanja koja reagira na svaki pritisak tipke.
Vidjet ćete iz prve ruke kako web preglednici "komuniciraju" s vašim JavaScript kodom. Svaki put kad kliknete, tipkate ili pomičete miš, preglednik šalje male poruke (zovemo ih događaji) vašem kodu, a vi odlučujete kako ćete reagirati!
Uvidjet ćete iz prve ruke kako web preglednici "komuniciraju" s vašim JavaScript kodom. Svaki put kada kliknete, tipkate ili pomaknete miša, preglednik šalje male poruke (zovemo ih događaji) vašem kodu i vi odlučujete kako na njih odgovoriti!
Do kraja ovog vodiča, izradit ćete pravu igru tipkanja koja prati vašu brzinu i točnost. Još važnije, razumjet ćete osnovne koncepte koji pokreću svaku interaktivnu web stranicu koju ste ikada koristili. Krenimo!
Do kraja ovog vodiča izgradit ćete pravu igru tipkanja koja prati vašu brzinu i točnost. Još važnije, razumjet ćete temeljne koncepte koji pokreću svaku interaktivnu web stranicu koju ste ikada koristili. Krenimo!
Razmislite o svojoj omiljenoj aplikaciji ili web stranici - što je čini živom i responzivnom? Sve se svodi na to kako reagira na vaše radnje! Svaki dodir, klik, povlačenje ili pritisak tipke stvara ono što zovemo "događaj", i tu se događa prava čarolija web razvoja.
Razmislite o svojoj omiljenoj aplikaciji ili web stranici - što je čini živom i responzivnom? Sve se svodi na način na koji reagira na ono što radite! Svaki dodir, klik, klizanje prstom ili pritisak tipke stvara ono što zovemo "događaj", i tu se događa prava čarolija razvoja weba.
Evo što programiranje za web čini tako zanimljivim: nikada ne znamo kada će netko kliknuti taj gumb ili početi tipkati u tekstualni okvir. Možda će kliknuti odmah, čekati pet minuta ili možda nikada neće kliknuti! Ova nepredvidivost znači da moramo razmišljati drugačije o tome kako pišemo svoj kod.
Ono što programiranje za web čini tako zanimljivim jest to što nikada ne znamo kada će netko kliknuti gumb ili početi tipkati u tekstni okvir. Mogu kliknuti odmah, pričekati pet minuta ili možda nikada ne kliknuti! Ova nepredvidivost znači da moramo drukčije razmišljati o pisanju koda.
Umjesto da pišemo kod koji se izvršava od vrha do dna poput recepta, pišemo kod koji strpljivo čeka da se nešto dogodi. To je slično kao što su telegrafisti u 1800-ima sjedili uz svoje strojeve, spremni odgovoriti čim poruka stigne putem žice.
Umjesto da pišemo kod koji se izvršava od vrha do dna poput recepta, pišemo kod koji strpljivo čeka da se nešto dogodi. To je slično kao što su telegrafisti u 1800-ima sjedili kraj svojih uređaja, spremni odgovoriti u trenutku kada poruka stigne žicom.
Dakle, što je točno "događaj"? Jednostavno rečeno, to je nešto što se događa! Kada kliknete na gumb - to je događaj. Kada upišete slovo - to je događaj. Kada pomaknete miš - to je još jedan događaj.
Pa, što je zapravo "događaj"? Jednostavno rečeno, to je nešto što se dogodi! Kada kliknete gumb - to je događaj. Kad upišete slovo - to je događaj. Kada pomaknete miša - to je još jedan događaj.
Programiranje vođeno događajima omogućuje nam da postavimo naš kod da sluša i reagira. Kreiramo posebne funkcije koje se zovu **slušači događaja** i koje strpljivo čekaju da se dogodi nešto specifično, a zatim se aktiviraju kada se to dogodi.
Programiranje vođeno događajima omogućuje nam da postavimo naš kod da sluša i odgovara. Kreiramo posebne funkcije zvane **slušatelji događaja** koji strpljivo čekaju da se dogode određene stvari, a onda brzo reagiraju.
Zamislite slušatelje događaja kao zvono na vratima za vaš kod. Postavite zvono na vratima (`addEventListener()`), kažete mu koji zvuk treba slušati (poput 'klik' ili 'pritisak tipke'), a zatim odredite što bi se trebalo dogoditi kada netko zazvoni (vaša prilagođena funkcija).
Slušatelje događaja možete zamisliti kao zvono na vratima za vaš kod. Postavite zvono (`addEventListener()`), kažete mu koji zvuk da sluša (kao 'click' ili 'keypress'), a zatim odredite što treba napraviti kada netko zvoni (vaša prilagođena funkcija).
**Kako funkcioniraju slušatelji događaja:**
- **Slušaju**specifične radnje korisnika poput klikova, pritisaka tipki ili pomicanja miša
- **Izvršavaju** vaš prilagođeni kod kada se dogodi određeni događaj
- **Reagiraju** odmah na interakcije korisnika, stvarajući besprijekorno iskustvo
- **Rukovode** višestrukim događajima na istom elementu koristeći različite slušatelje
**Evo kako slušatelji događaja funkcioniraju:**
- **Slušaju**određene korisničke radnje poput klikova, pritisaka tipki ili pokreta miša
- **Izvršavaju** vaš prilagođeni kod kada se dogodi navedeni događaj
- **Odgovaraju** odmah na korisničke interakcije, stvarajući besprijekorno iskustvo
- **Rukovode**s više događaja na istom elementu koristeći različite slušatelje
> **NOTE:** Vrijedi istaknuti da postoji mnogo načina za kreiranje slušatelja događaja. Možete koristiti anonimne funkcije ili kreirati imenovane. Možete koristiti razne prečace, poput postavljanja svojstva `click`, ili korištenja `addEventListener()`. U našem zadatku fokusirat ćemo se na `addEventListener()` i anonimne funkcije, jer je to vjerojatno najčešća tehnika koju web programeri koriste. Također je najfleksibilnija, jer `addEventListener()` radi za sve događaje, a ime događaja može se pružiti kao parametar.
> **NAPOMENA:** Vrijedi istaknuti da postoji mnogo načina za kreiranje slušatelja događaja. Možete koristiti anonimne funkcije ili kreirati imenovane. Možete koristiti razne prečace, poput postavljanja svojstva `click`, ili korištenja `addEventListener()`. U našoj vježbi fokusirat ćemo se na `addEventListener()` i anonimne funkcije, jer je to vjerojatno najčešća tehnika koju web programeri koriste. Također je najfleksibilnija, jer `addEventListener()` radi za sve događaje, a ime događaja može se proslijediti kao parametar.
### Uobičajeni događaji
Iako web preglednici nude desetke različitih događaja koje možete slušati, većina interaktivnih aplikacija oslanja se na samo nekoliko osnovnih događaja. Razumijevanje ovih ključnih događaja pružit će vam temelj za izgradnju sofisticiranih korisničkih interakcija.
Iako web preglednici nude desetke različitih događaja na koje možete reagirati, većina interaktivnih aplikacija oslanja se samo na nekoliko osnovnih događaja. Razumijevanje ovih osnovnih događaja pružit će vam temelj za izradu složenih korisničkih interakcija.
Postoji [desetak događaja](https://developer.mozilla.org/docs/Web/Events) koje možete slušati prilikom kreiranja aplikacije. U osnovi, sve što korisnik radi na stranici pokreće događaj, što vam daje puno moći da osigurate da dobiju željeno iskustvo. Srećom, obično će vam trebati samo nekoliko osnovnih događaja. Evo nekoliko uobičajenih (uključujući dva koja ćemo koristiti pri kreiranju naše igre):
Postoji [desetke događaja](https://developer.mozilla.org/docs/Web/Events) na koje možete slušati prilikom izrade aplikacije. U osnovi, sve što korisnik učini na stranici izaziva događaj, što vam daje mnogo moći da osigurate željeno iskustvo. Srećom, obično vam treba samo mali broj događaja. Evo nekoliko uobičajenih (uključujući dva koja ćemo koristiti za izradu naše igre):
| Događaj | Opis | Uobičajeni slučajevi upotrebe |
|---------|------|-----------------------------|
| `click` | Korisnik je kliknuo na nešto | Gumbi, poveznice, interaktivni elementi |
| `click` | Korisnik je kliknuo nešto | Gumbi, linkovi, interaktivni elementi |
| `contextmenu` | Korisnik je kliknuo desnom tipkom miša | Prilagođeni desni klik izbornici |
| `select` | Korisnik je označio neki tekst | Uređivanje teksta, kopiranje |
| `input` | Korisnik je unio neki tekst | Validacija formi, pretraživanje u stvarnom vremenu |
**Razumijevanje ovih vrsta događaja:**
- **Pokreću** se kada korisnici interagiraju s određenim elementima na vašoj stranici
- **Pružaju** detaljne informacije o radnji korisnika putem objekata događaja
- **Omogućuju**stvaranje responzivnih, interaktivnih web aplikacija
- **Funkcioniraju** dosljedno na različitim preglednicima i uređajima
**Razumijevanje ovih tipova događaja:**
- **Pokreću se** kada se korisnici interakcijom odnose na određene elemente na vašoj stranici
- **Pružaju** detaljne informacije o korisničkoj radnji putem objekata događaja
- **Omogućuju**kreiranje responzivnih, interaktivnih web aplikacija
- **Rade** dosljedno preko različitih preglednika i uređaja
## Kreiranje igre
## Izrada igre
Sada kada razumijete kako događaji funkcioniraju, primijenimo to znanje u praksi izradom nečeg korisnog. Kreirat ćemo igru brzog tipkanja koja demonstrira rukovanje događajima dok vam pomaže razviti važnu vještinu programiranja.
Sada kada razumijete kako događaji funkcioniraju, primijenimo to znanje kroz izradu nečeg korisnog. Kreirat ćemo igru brzine tipkanja koja demonstrira upravljanje događajima dok vam pomaže razviti važnu developersku vještinu.
Izradit ćemo igru kako bismo istražili kako događaji funkcioniraju u JavaScriptu. Naša igra testirat će vještinu tipkanja igrača, što je jedna od najpodcjenjenijih vještina koju bi svi programeri trebali imati. Zanimljivost: raspored tipkovnice QWERTY koji danas koristimo zapravo je dizajniran 1870-ih za pisaće strojeve - a dobre vještine tipkanja i dalje su jednako vrijedne za programere danas! Opći tijek igre izgledat će ovako:
Izradit ćemo igru kako bismo istražili kako događaji rade u JavaScriptu. Naša igra testirat će sposobnost tipkanja igrača, što je jedna od najpotcjenjenijih vještina koje svi developeri trebaju imati. Zanimljivost: raspored tipkovnice QWERTY kojeg danas koristimo zapravo je dizajniran 1870-ih za pisaće strojeve - a dobre vještine tipkanja još su uvijek jednako vrijedne za programere danas! Opći tijek igre bit će ovakav:
A[Igrač klikne Start] --> B[Prikazuje se slučajna izreka]
B --> C[Igrač upisuje u tekstualno polje]
C --> D{Riječ završena?}
D -->|Da| E[Istakni sljedeću riječ]
D -->|Ne| F{Ispravno do sada?}
F -->|Da| G[Zadrži normalan stil]
F -->|Ne| H[Prikaži stil greške]
E --> I{Izreka završena?}
I -->|Ne| C
I -->|Da| J[Prikaži poruku uspjeha s vremenom]
G --> C
H --> C
```
**Evo kako će naša igra funkcionirati:**
- **Počinje** kada igrač klikne gumb za start i prikaže se nasumični citat
- **Prati** igračev napredak u tipkanju riječ po riječ u stvarnom vremenu
- **Ističe** trenutnu riječ kako bi usmjerila igračevu pažnju
- **Pruža** trenutne vizualne povratne informacije za pogreške u tipkanju
- **Izračunava** i prikazuje ukupno vrijeme po završetku citata
**Kako će naša igra funkcionirati:**
- **Počinje** kada igrač klikne gumb za početak i prikazuje nasumični citat
- **Prati** napredak igrača u tipkanju riječ po riječ u stvarnom vremenu
- **Ističe** trenutnu riječ kako bi usmjerio fokus igrača
- **Pruža** trenutnu vizualnu povratnu informaciju za greške u tipkanju
- **Izračunava** i prikazuje ukupno vrijeme kada je citat dovršen
Krenimo s izradom naše igre i učenjem o događajima!
Izgradimo našu igru i naučimo o događajima!
### Struktura datoteka
Prije nego što počnemo kodirati, organizirajmo se! Imati čistu strukturu datoteka od početka uštedjet će vam glavobolje kasnije i učiniti vaš projekt profesionalnijim. 😊
Prije nego što započnemo s kodiranjem, organizirajmo se! Imati čist raspored datoteka od početka uštedjet će vam glavobolje kasnije i učiniti vaš projekt profesionalnijim. 😊
Zadržat ćemo stvari jednostavnima s samo tri datoteke: `index.html` za strukturu stranice, `script.js` za svu logiku igre i `style.css`kako bi sve izgledalo sjajno. Ovo je klasična trojka koja pokreće većinu weba!
Držat ćemo se jednostavnog pristupa sa samo tri datoteke: `index.html` za strukturu stranice, `script.js` za svu logiku igre i `style.css` da sve izgleda lijepo. Ovo je klasični trio koji pokreće većinu weba!
**Kreirajte novu mapu za svoj rad otvaranjem konzole ili terminala i izdavanjem sljedeće naredbe:**
**Stvorite novi direktorij za vaš rad otvaranjem konzole ili terminala i izvršavanjem sljedeće naredbe:**
```bash
# Linux or macOS
# Linux ili macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
**Što ove naredbe rade:**
- **Kreiraju** novi direktorij nazvan `typing-game` za vaše projektne datoteke
- **Navigiraju** automatski u novokreirani direktorij
- **Postavljaju** čisto radno okruženje za razvoj vaše igre
**Evo što ove naredbe rade:**
- **Stvara** novi direktorij nazvan `typing-game` za vaše projektne datoteke
- **Automatski** ulazi u novo kreirani direktorij
- **Postavlja** čist radni prostor za razvoj vaše igre
**Otvorite Visual Studio Code:**
@ -119,37 +118,37 @@ code .
```
**Ova naredba:**
- **Pokreće** Visual Studio Code u trenutnom direktoriju
- **Otvara** vašu projektnu mapu u uređivaču
- **Omogućuje** pristup svim alatima za razvoj koji su vam potrebni
- **Pokreće** Visual Studio Code u trenutnoj mapi
- **Otvara** vašu projekt mapu u uređivaču
- **Pruža** pristup svim alatima za razvoj koji će vam trebati
**Dodajte tri datoteke u mapu u Visual Studio Code s sljedećim nazivima:**
**Dodajte tri datoteke u mapu u Visual Studio Code s ovim imenima:**
- `index.html` - Sadrži strukturu i sadržaj vaše igre
- `script.js` - Rukuje svom logikom igre i slušateljima događaja
- `script.js` - Rukuje svojom logikom igre i slušateljima događaja
- `style.css` - Definira vizualni izgled i stilizaciju
## Kreiranje korisničkog sučelja
## Kreirajte korisničko sučelje
Sada izgradimo pozornicu na kojoj će se odvijati sva akcija naše igre! Zamislite ovo kao dizajniranje kontrolne ploče za svemirski brod - moramo osigurati da je sve što naši igrači trebaju točno tamo gdje to očekuju.
Sad izgradimo pozornicu na kojoj će se odvijati cijela akcija igre! Zamislite to kao dizajniranje kontrolne ploče za svemirski brod - moramo osigurati da je sve što igračima treba upravo tamo gdje očekuju.
Razmislimo što naša igra zapravo treba. Da igrate igru tipkanja, što biste željeli vidjeti na ekranu? Evo što ćemo trebati:
Razmotrimo što naša igra stvarno treba. Kada biste igrali igru tipkanja, što biste željeli vidjeti na ekranu? Evo što ćemo trebati:
| Element sučelja | Svrha | HTML element |
|------------------|-------|--------------|
| Prikaz citata | Prikazuje tekst za tipkanje | `<p>` s `id="quote"` |
| Područje poruka | Prikazuje status i poruke o uspjehu | `<p>` s `id="message"` |
| Tekstualni unos | Mjesto gdje igrači upisuju citat | `<input>` s `id="typed-value"` |
| Gumb za početak | Započinje igru | `<button>` s `id="start"` |
| UI Element | Svrha | HTML Element |
|------------|--------|--------------|
| Prikaz citata | Prikazuje tekst koji treba upisati | `<p>` s `id="quote"` |
| Područje poruke | Prikazuje status i poruke uspjeha | `<p>` s `id="message"` |
| Tekstni unos | Gdje igrači tipkaju citat | `<input>` s `id="typed-value"` |
| Gumb za start | Pokreće igru | `<button>` s `id="start"` |
**Razumijevanje strukture sučelja:**
- **Organizira** sadržaj logično od vrha prema dolje
- **Dodjeljuje** jedinstvene ID-ove elementima za ciljanje u JavaScriptu
- **Pruža** jasnu vizualnu hijerarhiju za bolji korisnički doživljaj
- **Uključuje** semantičke HTML elemente za pristupačnost
**Razumijevanje strukture UI-ja:**
- **Organizira** sadržaj logično od vrha prema dnu
- **Dodjeljuje** jedinstvene ID-eve elementima za ciljanje u JavaScriptu
- **Pruža** jasnu vizualnu hijerarhiju za bolje korisničko iskustvo
- **Uključuje** semantičke HTML elemente radi pristupačnosti
Svaki od tih elemenata trebat će ID-ove kako bismo mogli raditi s njima u našem JavaScriptu. Također ćemo dodati reference na CSS i JavaScript datoteke koje ćemo kreirati.
Svakom od njih trebat će ID kako bismo mogli raditi s njima u našem JavaScriptu. Također ćemo dodati reference na CSS i JavaScript datoteke koje ćemo stvoriti.
Kreirajte novu datoteku pod nazivom`index.html`. Dodajte sljedeći HTML:
Kreirajte novu datoteku nazvanu`index.html`. Dodajte sljedeći HTML:
```html
<!-- inside index.html -->
@ -172,52 +171,52 @@ Kreirajte novu datoteku pod nazivom `index.html`. Dodajte sljedeći HTML:
</html>
```
**Razlaganje onoga što ova HTML struktura postiže:**
**Razlaganje što ova HTML struktura omogućuje:**
- **Povezuje** CSS stilsku datoteku u `<head>` za stilizaciju
- **Kreira** jasan naslov i upute za korisnike
- **Postavlja** rezervirane odlomke s određenim ID-ovima za dinamički sadržaj
- **Stvara** jasan naslov i upute za korisnike
- **Uspostavlja** prazne paragrafove s određenim ID-evima za dinamički sadržaj
- **Uključuje** polje za unos s atributima za pristupačnost
- **Pruža** gumb za početak igre
- **Pruža** gumb za start kako bi pokrenuo igru
- **Učitava** JavaScript datoteku na kraju za optimalne performanse
### Pokretanje aplikacije
Često testiranje vaše aplikacije tijekom razvoja pomaže vam da rano uočite probleme i vidite svoj napredak u stvarnom vremenu. Live Server je neprocjenjiv alat koji automatski osvježava vaš preglednik kad god spremite promjene, čineći razvoj mnogo učinkovitijim.
Često testiranje vaše aplikacije tijekom razvoja pomaže vam da rano uočite probleme i pratite napredak u stvarnom vremenu. Live Server je neprocjenjiv alat koji automatski osvježava vaš preglednik svaki put kad spremite promjene, čineći razvoj znatno učinkovitijim.
Uvijek je najbolje razvijati iterativno kako biste vidjeli kako stvari izgledaju. Pokrenimo našu aplikaciju. Postoji sjajan dodatak za Visual Studio Code pod nazivom [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) koji će i hostati vašu aplikaciju lokalno i osvježavati preglednik svaki put kad spremite.
Uvijek je najbolje razvijati iterativno kako biste vidjeli kako stvari izgledaju. Pokrenimo našu aplikaciju. Postoji izvrsni dodatak za Visual Studio Code pod nazivom [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) koji će vam omogućiti lokalno hostanje aplikacije i osvježavanje preglednika svaki put kada spremite.
**Instalirajte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) slijedeći poveznicu i klikom na Instaliraj:**
**Instalirajte [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) slijedeći vezu i kliknite na Instaliraj:**
**Što se događa tijekom instalacije:**
- **Otvara** vaš preglednik za pokretanje Visual Studio Code-a
- **Vodi** vas kroz proces instalacije dodatka
- **Može zahtijevati** ponovno pokretanje Visual Studio Code-a za dovršetak postavljanja
**Evo što se događa tijekom instalacije:**
- **Pokreće** vaš preglednik i otvara Visual Studio Code
- **Vodit će** vas kroz proces instalacije dodatka
- **Moguće je** da će biti potrebna ponovna izrada Visual Studio Codea da bi instalacija bila dovršena
**Nakon instalacije, u Visual Studio Code-u, kliknite Ctrl-Shift-P (ili Cmd-Shift-P) za otvaranje palete naredbi:**
**Nakon instalacije, u Visual Studio Codeu pritisnite Ctrl-Shift-P (ili Cmd-Shift-P) da otvorite paletu naredbi:**
**Razumijevanje palete naredbi:**
- **Pruža** brz pristup svim naredbama VS Code-a
- **Omogućuje** brz pristup svim VS Code naredbama
- **Pretražuje** naredbe dok tipkate
- **Nudi** prečace za brži razvoj
- **Nudi**tipkovne prečace za brži razvoj
**Upišite "Live Server: Open with Live Server":**
**Što Live Server radi:**
- **Pokreće** lokalni razvojni server za vaš projekt
- **Automatski** osvježava preglednik kada spremite datoteke
- **Poslužuje** vaše datoteke s lokalnog URL-a (obično `localhost:5500`)
- **Automatski** osvježava preglednik kad spremite datoteke
- **Servira** vaše datoteke s lokalne URL adrese (obično `localhost:5500`)
**Otvorite preglednik i navigirajte na `https://localhost:5500`:**
**Otvorite preglednik i idite na `https://localhost:5500`:**
Sada biste trebali vidjeti stranicu koju ste kreirali! Dodajmo malo funkcionalnosti.
## Dodavanje CSS-a
## Dodajte CSS
Sada učinimo da sve izgleda dobro! Vizualna povratna informacija bila je ključna za korisnička sučelja od ranih dana računalstva. Osamdesetih godina istraživači su otkrili da trenutna vizualna povratna informacija dramatično poboljšava performanse korisnika i smanjuje greške. Upravo to ćemo stvoriti.
Sad učinimo da stvari izgledaju dobro! Vizualna povratna informacija bila je ključna za korisnička sučelja još od ranih dana računarstva. Osamdesetih godina istraživači su otkrili da trenutna vizualna povratna informacija dramatično poboljšava korisničke performanse i smanjuje pogreške. Upravo to ćemo stvoriti.
Naša igra mora biti kristalno jasna o tome što se događa. Igrači bi odmah trebali znati koju riječ trebaju upisati, a ako naprave grešku, trebali bi je odmah vidjeti. Kreirajmo jednostavno, ali učinkovito stiliziranje:
Naša igra mora biti kristalno jasna u vezi s onim što se događa. Igrači bi trebali odmah znati koju riječ trebaju upisati, a ako naprave pogrešku, trebaju je odmah vidjeti. Napravimo jednostavan, ali učinkovit stil:
Kreirajte novu datoteku pod nazivom `style.css` i dodajte sljedeću sintaksu.
Kreirajte novu datoteku nazvanu `style.css` i dodajte sljedeći sintaksu.
```css
/* inside style.css */
@ -232,60 +231,59 @@ Kreirajte novu datoteku pod nazivom `style.css` i dodajte sljedeću sintaksu.
```
**Razumijevanje ovih CSS klasa:**
- **Ističe** trenutnu riječ žutom pozadinom za jasnu vizualnu pomoć
- **Signalizira**greške u tipkanju svijetlom koraljnom bojom pozadine
- **Pruža** trenutnu povratnu informaciju bez ometanja korisnikovog tipkanja
- **Koristi** kontrastne boje za pristupačnost i jasnu vizualnu komunikaciju
- **Ističe** trenutnu riječ žutom pozadinom za jasnu vizualnu usmjerenost
- **Signalizira**pogreške u tipkanju svijetlocrvenom bojom pozadine
- **Pruža** trenutne povratne informacije bez ometanja korisnika u tipkanju
- **Koristi** kontrastne boje radi pristupačnosti i jasne vizualne komunikacije
✅ Kada je riječ o CSS-u, možete oblikovati svoju stranicu kako god želite. Odvojite malo vremena i učinite stranicu privlačnijom:
✅ Kada je riječ o CSS-u, možete postaviti izgled stranice kako god želite. Odvojite malo vremena i učinite da stranica izgleda privlačnije:
- Odaberite drugačiji font
- Obojite naslove
- Promijenite veličinu elemenata
- Odaberite drugi font
- Bojite naslove
- Promijenite veličine elemenata
## JavaScript
Sada dolazi zanimljiv dio! 🎉 Imamo strukturu HTML-a i stilizaciju CSS-a, ali trenutno naša igra izgleda kao prekrasan automobil bez motora. JavaScript će biti taj motor - on je ono što sve zapravo pokreće i reagira na radnje igrača.
Evo gdje stvari postaju zanimljive! 🎉 Imamo našu HTML strukturu i CSS stilizaciju, ali trenutno je naša igra kao lijep automobil bez motora. JavaScript će biti taj motor - on čini da sve stvarno funkcionira i reagira na ono što igrači rade.
Ovdje ćete vidjeti kako vaše stvaranje oživljava. Krenut ćemo korak po korak kako ništa ne bi bilo previše zbunjujuće:
Ovdje ćete vidjeti kako vaš projekt oživljava. Krenut ćemo korak po korak da ništa ne bude previše komplicirano:
| Korak | Svrha | Što ćete naučiti |
|-------|-------|------------------|
| [Kreiranje konstanti](../../../../4-typing-game/typing-game) | Postavljanje citata i referenci na DOM | Upravljanje varijablama i odabir DOM-a |
| [Slušač događaja za početak igre](../../../../4-typing-game/typing-game) | Rukovanje inicijalizacijom igre | Rukovanje događajima i ažuriranje sučelja |
| [Slušač događaja za tipkanje](../../../../4-typing-game/typing-game) | Obrada korisničkog unosa u stvarnom vremenu | Validacija unosa i dinamična povratna informacija |
| [Kreirajte konstante](../../../../4-typing-game/typing-game) | Postavite citate i reference na DOM | Upravljanje varijablama i odabir DOM elemenata |
| [Slušatelj događaja za pokretanje igre](../../../../4-typing-game/typing-game) | Rukuje inicijalizacijom igre | Upravljanje događajima i ažuriranje UI-ja |
| [Slušatelj događaja za tipkanje](../../../../4-typing-game/typing-game) | Obrada korisničkog unosa u stvarnom vremenu | Validacija unosa i dinamičke povratne informacije |
**Ovaj strukturirani pristup pomaže vam:**
- **Organizirati**vaš kod u logične, upravljive sekcije
- **Graditi** funkcionalnost postupno za lakše otklanjanje grešaka
- **Razumjeti** kako različiti dijelovi vaše aplikacije međusobno djeluju
- **Kreirati** obrasce koji se mogu ponovno koristiti za buduće projekte
- **Organizirati**kod u logične i upravljive cjeline
- **Graditi** funkcionalnosti postupno radi lakšeg uklanjanja pogrešaka
- **Razumjeti** kako različiti dijelovi aplikacije surađuju
- **Stvarati** ponovljive obrasce za buduće projekte
Ali prvo, kreirajte novu datoteku pod nazivom`script.js`.
Ali prvo, stvorite novu datoteku nazvanu`script.js`.
### Dodavanje konstanti
### Dodajte konstante
Prije nego što krenemo u akciju, prikupimo sve naše resurse! Baš kao što NASA-ina kontrola misije postavlja sve svoje sustave za praćenje prije lansiranja, puno je lakše kada imate sve pripremljeno i spremno. To nas spašava od traženja stvari kasnije i pomaže u sprječavanju tipfelera.
Prije nego zaronimo u akciju, skupimo sve naše resurse! Baš kao što NASA-in kontrolni centar postavlja sve svoje nadzorne sustave prije lansiranja, puno je lakše kada imate sve pripremljeno i spremno. To nas spašava od traženja stvari kasnije i pomaže izbjeći tipkarske pogreške.
Evo što prvo trebamo postaviti:
Evo što trebamo najprije postaviti:
| Tip podataka | Svrha | Primjer |
|--------------|-------|---------|
| Niz citata | Pohranjuje sve moguće citate za igru | `['Citat 1', 'Citat 2', ...]` |
| Niz riječi | Razdvaja trenutni citat na pojedinačne riječi | `['Kad', 'imaš', '...', ...]` |
| Indeks riječi | Prati koju riječ igrač trenutno tipka | `0, 1, 2, 3...` |
| Vrijeme početka | Izračunava proteklo vrijeme za bodovanje | `Date.now()` |
| Niz citata | Spremi sve moguće citate za igru | `['Quote 1', 'Quote 2', ...]` |
| Niz riječi | Razdijeli trenutni citat na pojedinačne riječi | `['When', 'you', 'have', ...]` |
| Indeks riječi | Prati koju riječ igrač tipka | `0, 1, 2, 3...` |
| Vrijeme početka | Izračunaj proteklo vrijeme za bodovanje | `Date.now()` |
**Također ćemo trebati reference na naše UI elemente:**
| Element | ID | Svrha |
|---------|----|-------|
| Tekstualni unos | `typed-value` | Mjesto gdje igrači tipkaju |
|---------|----|---------|
| Unos teksta | `typed-value` | Gdje igrači tipkaju |
| Prikaz citata | `quote` | Prikazuje citat za tipkanje |
| Područje poruka | `message` | Prikazuje obavijesti o statusu |
| Područje poruka | `message` | Prikazuje statusne poruke |
```javascript
// inside script.js
// all of our quotes
// unutar script.js
// svi naši citati
const quotes = [
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
'There is nothing more deceptive than an obvious fact.',
@ -295,143 +293,143 @@ const quotes = [
'Nothing clears up a case so much as stating it to another person.',
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
// pohrani popis riječi i indeks riječi koju igrač trenutno upisuje
**Razlaganje što ovaj kod za postavljanje postiže:**
- **Pohranjuje** niz citata Sherlocka Holmesa koristeći `const` jer se citati neće mijenjati
**Razbijanje što ovaj početni kod ostvaruje:**
- **Spremi** niz citata Sherlocka Holmesa koristeći `const` jer se citati neće mijenjati
- **Inicijalizira** varijable za praćenje koristeći `let` jer će se te vrijednosti mijenjati tijekom igre
- **Hvata** reference na DOM elemente koristeći `document.getElementById()` za učinkoviti pristup
- **Postavlja** temelje za svu funkcionalnost igre s jasnim, opisnim nazivima varijabli
- **Hvata** reference na DOM elemente koristeći `document.getElementById()` za efikasan pristup
- **Postavlja** temelje za svu funkcionalnost igre s jasnim, opisnim imenima varijabli
- **Organizira** povezane podatke i elemente logično radi lakšeg održavanja koda
✅ Slobodno dodajte još citata u svoju igru
✅ Slobodno dodaj još citata u svoju igru
> 💡 **Savjet**: Možemo dohvatiti elemente kad god želimo u kodu koristeći `document.getElementById()`. Budući da ćemo se često referirati na te elemente, izbjeći ćemo tipografske pogreške s literalima stringova koristeći konstante. Okviri poput [Vue.js](https://vuejs.org/) ili [React](https://reactjs.org/) mogu vam pomoći bolje upravljati centralizacijom vašeg koda.
> 💡 **Dobri savjet**: Elementi se mogu dohvatiti kad god želimo u kodu koristeći `document.getElementById()`. Zbog činjenice da ćemo se na njih često pozivati, izbjegavamo tipfelere u string literalima korištenjem konstanti. Okviri poput [Vue.js](https://vuejs.org/) ili [React](https://reactjs.org/) mogu ti pomoći bolje upravljati centralizacijom koda.
>
**Zašto ovaj pristup tako dobro funkcionira:**
- **Sprječava** pravopisne pogreške pri višestrukom referiranju na elemente
**Evo zašto ovaj pristup tako dobro funkcionira:**
- **Sprječava** pogreške u pisanju prilikom višestrukog korištenja elemenata
- **Poboljšava** čitljivost koda s opisnim nazivima konstanti
- **Omogućuje** bolju podršku IDE-a s automatskim dovršavanjem i provjerom pogrešaka
- **Olakšava** refaktoriranje ako se ID-ovi elemenata kasnije promijene
- **Omogućuje** bolju podršku IDE-a s automatskim dovršavanjem i provjerom grešaka
- **Olakšava** refaktoriranje u slučaju kasnije promjene ID-eva elemenata
Odvojite trenutak da pogledate video o korištenju `const`, `let` i `var`
Uzmite minutu da pogledate video o korištenju `const`, `let` i `var`
> 🎥 Kliknite na sliku iznad za video o varijablama.
> 🎥 Klikni sliku iznad za video o varijablama.
### Dodajte logiku za početak
### Dodaj logiku za početak
Ovdje sve dolazi na svoje mjesto! 🚀 Upravo ćete napisati svoj prvi pravi event listener, a postoji nešto vrlo zadovoljavajuće u tome da vidite kako vaš kod reagira na klik gumba.
Ovdje sve počinje klikati na mjesto! 🚀 Upravo ćeš napisati svoj prvi stvarni slušatelj događaja, a postoji nešto vrlo zadovoljavajuće u gledanju kako tvoj kod reagira na klik gumba.
Razmislite o tome: negdje vani, igrač će kliknuti gumb "Start", a vaš kod mora biti spreman za njega. Nemamo pojma kada će kliknuti - možda odmah, možda nakon što popije kavu - ali kad to učini, vaša igra oživljava.
Razmisli: negdje tamo, igrač će kliknuti gumb "Start", a tvoj kod treba biti spreman za to. Ne znamo kada će kliknuti - može odmah, može nakon što popije kavu - ali kad klikne, tvoja igra oživljava.
Kada korisnik klikne `start`, trebamo odabrati citat, postaviti korisničko sučelje i postaviti praćenje za trenutnu riječ i vrijeme. Ispod je JavaScript koji trebate dodati; o njemu ćemo raspravljati odmah nakon bloka skripte.
Kad korisnik klikne `start`, trebamo odabrati citat, postaviti korisničko sučelje i postaviti praćenje za trenutnu riječ i vrijeme. Ispod je JavaScript koji trebaš dodati; razgovaramo o njemu odmah nakon bloka skripte.
- **Odabire** nasumični citat koristeći `Math.floor()` i `Math.random()`za raznolikost
**📊 Podešavanje praćenja riječi:**
- **Odabire** nasumični citat koristeći `Math.floor()` i `Math.random()`radi raznolikosti
- **Pretvara** citat u niz pojedinačnih riječi koristeći `split(' ')`
- **Resetira**`wordIndex` na 0 jer igrači počinju s prvom riječi
- **Priprema** stanje igre za novi krug
- **Resetira**`wordIndex` na 0 jer igrači počinju od prve riječi
- **Priprema** stanje igre za novu rundu
**🎨 Postavljanje i prikaz korisničkog sučelja:**
- **Stvara** niz `<span>` elemenata, omotavajući svaku riječ za pojedinačno stiliziranje
- **Spaja** span elemente u jedan string za učinkovito ažuriranje DOM-a
**🎨 Postavljanje i prikaz UI-a:**
- **Stvara** niz `<span>` elemenata, umotavajući svaku riječ za pojedinačno stiliziranje
- **Spaja** span elemente u jedan string radi efikasnog ažuriranja DOM-a
- **Ističe** prvu riječ dodavanjem CSS klase `highlight`
- **Briše** sve prethodne poruke igre kako bi osigurao čistu ploču
- **Briše** sve prethodne poruke igre za čist početak
**⌨️ Priprema tekstualnog polja:**
**⌨️ Priprema tekstualnog unosa:**
- **Briše** postojeći tekst u polju za unos
- **Postavlja fokus**na tekstualno polje kako bi igrači mogli odmah početi tipkati
- **Postavlja fokus**u textbox da igrači mogu odmah početi tipkati
- **Priprema** područje unosa za novu sesiju igre
**⏱️ Inicijalizacija mjerača vremena:**
- **Hvata** trenutni vremenski pečat koristeći `new Date().getTime()`
**⏱️ Inicijalizacija tajmera:**
- **Hvata** trenutačni vremenski žig koristeći `new Date().getTime()`
- **Omogućuje** točan izračun brzine tipkanja i vremena završetka
- **Započinje** praćenje performansi za sesiju igre
- **Pokreće** praćenje izvedbe za sesiju igre
### Dodajte logiku za tipkanje
### Dodaj logiku tipkanja
Ovdje se bavimo srcem naše igre! Ne brinite ako vam se na prvi pogled čini previše - proći ćemo kroz svaki dio, i na kraju ćete vidjeti kako je sve logično.
Ovdje ćemo se pozabaviti srcem naše igre! Ne brini ako ti se na početku čini puno – proći ćemo kroz svaki dio, a na kraju će ti sve biti vrlo logično.
Ono što ovdje gradimo prilično je sofisticirano: svaki put kad netko upiše slovo, naš kod će provjeriti što je upisano, dati povratnu informaciju i odlučiti što dalje. To je slično načinu na koji su rani procesori teksta poput WordStara iz 1970-ih pružali povratne informacije u stvarnom vremenu za tipkače.
Ono što gradimo je prilično sofisticirano: svaki put kad netko upiše slovo, naš kod će provjeriti što je napisao, dati povratnu informaciju i odlučiti što dalje. Slično je kao rani procesori teksta poput WordStar u 1970-ima koji su pružali povratne informacije u stvarnom vremenu tipkajućima.
Ova funkcija koristi pristup "vodopada", provjeravajući uvjete od najkonkretnijih do najopćenitijih. Razmotrimo svaki scenarij:
Ova funkcija koristi vodopadni pristup, provjeravajući uvjete od najspecifičnijih do najopćenitijih. Razložimo svaki scenarij:
```mermaid
flowchart TD
A[Player types character] --> B[Get current word and typed value]
B --> C{Quote complete?}
C -->|Yes| D[Show completion message with time]
C -->|No| E{Word complete with space?}
E -->|Yes| F[Clear input, move to next word, update highlight]
E -->|No| G{Typing correctly so far?}
G -->|Yes| H[Remove error styling]
G -->|No| I[Show error styling]
A[Igrač upisuje znak] --> B[Dohvati trenutnu riječ i upisanu vrijednost]
B --> C{Završena navodnica?}
C -->|Da| D[Prikaži poruku o dovršetku s vremenom]
C -->|Ne| E{Riječ završena razmakom?}
E -->|Da| F[Očisti unos, prijeđi na sljedeću riječ, ažuriraj označavanje]
E -->|Ne| G{Jesmo li do sada pravilno tipkali?}
G -->|Da| H[Ukloni stil pogreške]
G -->|Ne| I[Prikaži stil pogreške]
```
**🏁 Završetak citata (Scenarij 1):**
- **Provjerava** odgovara li upisana vrijednost trenutnoj riječi I jesmo li na posljednjoj riječi
- **Izračunava** proteklo vrijeme oduzimanjem vremena početka od trenutnog vremena
**🏁 Citat završen (Scenarij 1):**
- **Provjerava** je li unesena vrijednost jednaka trenutnoj riječi I je li to posljednja riječ
- **Izračunava** proteklo vrijeme oduzimanjem vremena početka od trenutačnog vremena
- **Pretvara** milisekunde u sekunde dijeljenjem s 1.000
- **Prikazuje** čestitku s vremenom završetka
**✅ Završetak riječi (Scenarij 2):**
- **Otkriva** završetak riječi kada unos završi razmakom
- **Provjerava** da li obrezani unos točno odgovara trenutnoj riječi
- **Briše**polje za unos za sljedeću riječ
- **Prelazi** na sljedeću riječ povećanjem `wordIndex`
**✅ Riječ završena (Scenarij 2):**
- **Detektira** završetak riječi kada unos završava razmakom
- **Provjerava** da li trimmirani unos točno odgovara trenutnoj riječi
- **Briše** unos za sljedeću riječ
- **Napreduje** na sljedeću riječ povećanjem `wordIndex`
- **Ažurira** vizualno isticanje uklanjanjem svih klasa i isticanjem nove riječi
**📝 Tipkanje u tijeku (Scenarij 3):**
- **Provjerava**počinje li trenutna riječ s onim što je dosad upisano
- **Uklanja**sve stiliziranje grešaka kako bi pokazao da je unos točan
- **Omogućuje** nastavak tipkanja bez prekida
- **Provjerava**je li trenutna riječ započeta unesenim tekstom dosad
- **Uklanja**bilo kakvo stiliziranje greške da pokaže da je unos točan
- **Dozvoljava** nastavak tipkanja bez prekida
**❌ Stanje greške (Scenarij 4):**
- **Pokreće** se kada upisani tekst ne odgovara očekivanom početku riječi
- **Primjenjuje** CSS klasu greške za trenutnu vizualnu povratnu informaciju
- **Pomaže** igračima brzo identificirati i ispraviti pogreške
- **Aktivira** se kada uneseni tekst ne odgovara očekivanom početku riječi
- **Dodaje** CSS klasu greške za trenutnu vizualnu povratnu informaciju
- **Pomaže** igračima da brzo identificiraju i isprave pogreške
## Testirajte svoju aplikaciju
## Testiraj svoju aplikaciju
Pogledajte što ste postigli! 🎉 Upravo ste izgradili pravu, funkcionalnu igru tipkanja od nule koristeći programiranje temeljeno na događajima. Odvojite trenutak da to cijenite - ovo nije mali podvig!
Pogledaj što si postigao! 🎉 Upravo si napravio pravu, funkcionalnu igru tipkanja iz temelja koristeći programiranje vođeno događajima. Uzmi trenutak da to cijenis - nije mala stvar!
Sada dolazi faza testiranja! Hoće li raditi kako je očekivano? Jesmo li nešto propustili? Evo stvari: ako nešto ne radi savršeno odmah, to je potpuno normalno. Čak i iskusni programeri redovito pronalaze greške u svom kodu. To je sve dio procesa razvoja!
Sada dolazi faza testiranja! Hoće li raditi kako treba? Jesmo li nešto propustili? Evo što: ako nešto ne radi savršeno odmah, to je potpuno normalno. Čak i iskusni programeri redovito pronalaze greške u svom kodu. To je dio procesa razvoja!
Kliknite na `start` i počnite tipkati! Trebalo bi izgledati otprilike kao animacija koju smo vidjeli prije.
Klikni na `start` i počni tipkati! Trebalo bi izgledati malo kao animacija koju smo vidjeli prije.
**Što testirati u vašoj aplikaciji:**
- **Provjerava** da klik na Start prikazuje nasumični citat
**Što testirati u svojoj aplikaciji:**
- **Provjerava** da klik na Start pokaže nasumični citat
- **Potvrđuje** da tipkanje ispravno ističe trenutnu riječ
- **Provjerava** da se stiliziranje grešaka pojavljuje za netočno tipkanje
- **Osigurava** da završavanje riječi ispravno pomiče isticanje
- **Provjerava** da se prikazuje stil greške za netočno tipkanje
- **Osigurava** da završetak riječi ispravno pomiče isticanje
- **Testira** da završetak citata prikazuje poruku o završetku s vremenom
**Uobičajeni savjeti za otklanjanje grešaka:**
- **Provjerite** konzolu preglednika (F12) za JavaScript pogreške
- **Provjerite** da svi nazivi datoteka točno odgovaraju (osjetljivo na velika i mala slova)
- **Osigurajte** da Live Server radi i pravilno se osvježava
- **Testirajte** različite citate kako biste provjerili radi li nasumični odabir
**Uobičajeni savjeti za otklanjanje pogrešaka:**
- **Provjeri** konzolu preglednika (F12) za JavaScript greške
- **Potvrdi** točnost svih naziva datoteka (pažljivo na velika i mala slova)
- **Provjeri** da je Live Server pokrenut i ispravno osvježava
- **Testiraj** različite citate radi provjere nasumičnog odabira
---
## GitHub Copilot Agent Challenge 🎮
## Izazov GitHub Copilot Agenta 🎮
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Iskoristi Agent način rada za dovršetak sljedećeg izazova:
**Opis:** Proširite igru tipkanja implementacijom sustava težine koji se prilagođava na temelju performansi igrača. Ovaj izazov pomoći će vam da vježbate napredno rukovanje događajima, analizu podataka i dinamičko ažuriranje korisničkog sučelja.
**Opis:** Proširi igru tipkanja implementirajući sustav težine koji prilagođava igru prema performansama igrača. Ovaj izazov pomoći će ti uvježbati napredno rukovanje događajima, analizu podataka i dinamičke ažuriranja UI-a.
**Zadatak:** Kreirajte sustav prilagodbe težine za igru tipkanja koji:
1. Prati brzinu tipkanja igrača (riječi po minuti) i postotak točnosti
2. Automatski se prilagođava na tri razine težine: Lako (jednostavni citati), Srednje (trenutni citati), Teško (složeni citati s interpunkcijom)
**Zadatak:** Kreiraj sustav prilagodbe težine za igru tipkanja koji:
1. Prati brzinu tipkanja igrača (riječi u minuti) i postotak točnosti
2. Automatski prilagođava na tri razine težine: Lako (jednostavni citati), Srednje (trenutni citati), Teško (kompleksni citati s interpunkcijom)
3. Prikazuje trenutnu razinu težine i statistiku igrača na korisničkom sučelju
4. Implementira brojač serija koji povećava težinu nakon 3 uzastopne dobre izvedbe
5. Dodaje vizualne povratne informacije (boje, animacije) za označavanje promjena težine
4. Implementira brojač serija koji povećava težinu nakon 3 uzastopna dobra rezultata
5. Dodaje vizualnu povratnu informaciju (boje, animacije) za označavanje promjena težine
Dodajte potrebne HTML elemente, CSS stilove i JavaScript funkcije za implementaciju ove značajke. Uključite odgovarajuće rukovanje pogreškama i osigurajte da igra ostane pristupačna s odgovarajućim ARIA oznakama.
Dodaj potrebne HTML elemente, CSS stilove i JavaScript funkcije za implementaciju ove značajke. Uključi pravilno rukovanje greškama i osiguraj pristupačnost igre s odgovarajućim ARIA oznakama.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) možeš saznati ovdje.
## 🚀 Izazov
Spremni za podizanje vaše igre tipkanja na višu razinu? Pokušajte implementirati ove napredne značajke kako biste produbili svoje razumijevanje rukovanja događajima i manipulacije DOM-om:
Spreman za podizanje svoje igre tipkanja na višu razinu? Pokušaj implementirati ove napredne značajke kako bi produbio razumijevanje rukovanja događajima i manipulacije DOM-om:
**Dodajte više funkcionalnosti:**
**Dodaj više funkcionalnosti:**
| Značajka | Opis | Vještine koje ćete vježbati |
|----------|------|----------------------------|
| **Kontrola unosa** | Onemogućite `input` event listener nakon završetka i ponovno ga omogućite kada se klikne gumb | Upravljanje događajima i kontrola stanja |
| **Upravljanje stanjem UI-a** | Onemogućite tekstualno polje kada igrač završi citat | Manipulacija svojstvima DOM-a |
| **Modalni dijalog** | Prikazivanje modalnog dijaloškog okvira s porukom o uspjehu | Napredni UI obrasci i pristupačnost |
| **Sustav najboljih rezultata** | Pohranite najbolje rezultate koristeći `localStorage` | API-ji za pohranu u pregledniku i trajnost podataka |
| **Kontrola unosa** | Onemogući slušatelja događaja `input` na završetku i ponovno ga omogući kad se klikne gumb | Upravljanje događajima i kontrola stanja |
| **Upravljanje stanjem UI-a** | Onemogući textbox kada igrač završi citat | Manipulacija DOM svojstvima |
| **Modalni dijalog** | Prikaži modalni dijalog s porukom o uspjehu | Napredni UI obrasci i pristupačnost |
| **Sustav rekorda** | Spremi najbolje rezultate koristeći `localStorage` | API-je za pohranu u pregledniku i trajnost podataka |
**Savjeti za implementaciju:**
- **Istražite** `localStorage.setItem()` i `localStorage.getItem()` za trajnu pohranu
- **Vježbajte** dodavanje i uklanjanje event listenera dinamički
- **Istražite** HTML dijaloške elemente ili CSS modalne obrasce
- **Razmotrite** pristupačnost pri onemogućavanju i omogućavanju kontrola obrasca
- **Istraži** `localStorage.setItem()` i `localStorage.getItem()` za trajnu pohranu
- **Vježbaj** dinamičko dodavanje i uklanjanje slušatelja događaja
- **Istraži** HTML dijaloge ili CSS modalne obrasce
- **Razmišljaj** o pristupačnosti prilikom onemogućavanja i omogućavanja kontrola forme
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/22)
---
## 🚀 Tvoj vremenski plan usavršavanja igre tipkanja
### ⚡ **Što možeš napraviti u sljedećih 5 minuta**
- [ ] Testiraj svoju igru tipkanja s različitim citatima da se uvjeriš da sve radi glatko
- [ ] Eksperimentiraj sa CSS stilovima - pokušaj promijeniti boju isticanja i greške
- [ ] Otvori DevTools preglednika (F12) i prati Konzolu dok igraš
- [ ] Izazovi se da završiš citat što brže možeš
### ⏰ **Što možeš postići u ovom satu**
- [ ] Dodaj više citata u niz (možda iz omiljenih knjiga ili filmova)
- [ ] Implementiraj sustav visokih rezultata koristeći `localStorage` iz izazova
- [ ] Kreiraj kalkulator riječi po minuti koji se prikazuje nakon igre
- [ ] Dodaj zvučne efekte za točno tipkanje, greške i završetak
### 📅 **Tvoja tjedna avantura**
- [ ] Napravi multiplayer verziju gdje prijatelji mogu natjecati jedan pored drugog
- [ ] Kreiraj različite razine težine s različitom složenošću citata
- [ ] Dodaj traku napretka koja pokazuje koliko je citat dovršen
- [ ] Implementiraj korisničke račune s praćenjem osobnih statistika
- [ ] Dizajniraj prilagođene teme i dopusti korisnicima da biraju željeni izgled
### 🗓️ **Tvoja mjesečna transformacija**
- [ ] Kreiraj tečaj tipkanja s lekcijama koje postupno uče pravilno postavljanje prstiju
- [ ] Razvij analitiku koja pokazuje koje slova ili riječi uzrokuju najviše pogrešaka
- [ ] Dodaj podršku za različite jezike i rasporede tipkovnica
- [ ] Integriraj edukativne API-je za dohvat citata iz književnih baza podataka
- [ ] Objavi svoj unaprijeđeni tipkarski projekt za druge da koriste i uživaju
### 🎯 **Završni pregled i razmišljanje**
**Prije nego što nastaviš, odvoji trenutak i proslavi:**
- Koji ti je bio najzadovoljavajući trenutak dok si gradio ovu igru?
- Kako sada gledaš na programiranje vođeno događajima u usporedbi s početkom?
- Koju značajku jedva čekaš dodati da igru učiniš jedinstvenom?
- Kako bi mogao primijeniti koncepte upravljanja događajima u drugim projektima?
```mermaid
journey
title Vaše putovanje samopouzdanja u programiranju događaja
section Danas
Razumijevanje događaja: 3: You
Izgradnja korisničkog sučelja: 4: You
Pisanje slušatelja događaja: 5: You
section Ovaj tjedan
Dodavanje značajki: 4: You
Otklanjanje pogrešaka: 5: You
Poboljšanje korisničkog iskustva: 4: You
section Sljedeći mjesec
Izrada složenih aplikacija: 5: You
Poučavanje drugih: 5: You
Kreiranje okvira: 5: You
```
> 🌟 **Zapamti**: Upravo si savladao jedan od osnovnih koncepata koji pokreću svaku interaktivnu web stranicu i aplikaciju. Programiranje vođeno događajima je ono što web čini živim i responzivnim. Svaki put kad vidiš padajući meni, formu koja se validira dok tipkaš ili igru koja reagira na klikove, sada razumiješ magiju iza toga. Ne učiš samo programirati - učiš stvarati doživljaje koji su intuitivni i zanimljivi! 🎉
---
## Pregled i samostalno učenje
Pročitajte o [svim dostupnim događajima](https://developer.mozilla.org/docs/Web/Events) za programere putem web preglednika i razmotrite scenarije u kojima biste koristili svaki od njih.
Pročitaj o [svim dostupnim događajima](https://developer.mozilla.org/docs/Web/Events) koje web preglednik pruža programerima i razmotri scenarije u kojima bi koristio svaki od njih.
## Zadatak
[Kreirajte novu igru tipkanja](assignment.md)
[Napravi novu tipkovničku igru](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Ovaj dokument je preveden pomoću AI prijevodne usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Proširenja za preglednike su mini-aplikacije koje poboljšavaju vaše iskustvo pregledavanja interneta. Poput izvorne vizije Tima Berners-Leeja o interaktivnom webu, proširenja proširuju mogućnosti preglednika izvan jednostavnog prikaza dokumenata. Od upravitelja lozinki koji čuvaju vaše račune do alata za odabir boja koji pomažu dizajnerima da pronađu savršene nijanse, proširenja rješavaju svakodnevne izazove pregledavanja.
Proširenja preglednika su mini-aplikacije koje poboljšavaju vaše iskustvo pregledavanja weba. Kao što je Tim Berners-Lee zamišljao interaktivni web, proširenja proširuju mogućnosti preglednika izvan jednostavnog prikaza dokumenata. Od upravitelja lozinkama koji štite vaše račune do birača boja koji pomažu dizajnerima da uhvate savršene nijanse, proširenja rješavaju svakodnevne izazove pregledavanja.
Prije nego što izradimo vaše prvo proširenje, razumjet ćemo kako preglednici funkcioniraju. Baš kao što je Alexander Graham Bell morao razumjeti prijenos zvuka prije nego što je izumio telefon, poznavanje osnova preglednika pomoći će vam da stvorite proširenja koja se besprijekorno integriraju s postojećim sustavima preglednika.
Prije nego što izradimo vaše prvo proširenje, razumimo kako preglednici rade. Baš kao što je Alexander Graham Bell trebao razumjeti prijenos zvuka prije nego što je izumio telefon, poznavanje osnovnih principa preglednika pomoći će vam da izradite proširenja koja se besprijekorno integriraju s postojećim sustavima preglednika.
Na kraju ove lekcije, razumjet ćete arhitekturu preglednika i započeti izradu svog prvog proširenja.
Na kraju ovog poglavlja razumjet ćete arhitekturu preglednika i započeti gradnju svog prvog proširenja.
```mermaid
mindmap
root((Arhitektura preglednika))
Core Components
Rendering Engine
JavaScript Engine
Network Stack
Storage APIs
User Interface
Address Bar
Tab Management
Bookmarks
Extension Icons
Extension System
Manifest Files
Content Scripts
Background Pages
Popup Windows
Security Model
Same-Origin Policy
Permissions API
Content Security
Isolated Worlds
Development Tools
DevTools Integration
Debug Console
Performance Monitor
Extension Inspector
```
## Razumijevanje web preglednika
Web preglednik je u suštini sofisticirani interpretator dokumenata. Kada u adresnu traku upišete "google.com", preglednik izvodi složeni niz operacija - zahtijeva sadržaj sa servera širom svijeta, zatim analizira i prikazuje taj kod u interaktivne web stranice koje vidite.
Web preglednik je u suštini sofisticirani tumač dokumenata. Kad upišete "google.com" u adresnu traku, preglednik izvodi složeni niz radnji - traži sadržaj s poslužitelja širom svijeta, zatim parsira i prikazuje taj kod u interaktivne web stranice koje vidite.
Ovaj proces odražava način na koji je prvi web preglednik, WorldWideWeb, dizajnirao Tim Berners-Lee 1990. godine kako bi hiperpovezane dokumente učinio dostupnima svima.
Ovaj proces odražava kako je prvi web preglednik, WorldWideWeb, dizajnirao Tim Berners-Lee 1990. godine kako bi hiperveze učinio dostupnima svima.
✅ **Malo povijesti**: Prvi preglednik zvao se 'WorldWideWeb' i stvorio ga je Sir Timothy Berners-Lee 1990. godine.
✅ **Malo povijesti**: Prvi preglednik zvao se ‘WorldWideWeb’ i stvorio ga je sir Timothy Berners-Lee 1990. godine.
- **Identificirati** gdje vaše proširenje može dodati najviše vrijednosti
- **Odabrati** prave API-je preglednika za funkcionalnost vašeg proširenja
- **Dizajnirati** proširenja koja učinkovito rade s sustavima preglednika
- **Osigurati** da vaše proširenje slijedi najbolje prakse sigurnosti preglednika
**Razumijevanje ovih značajki pomaže vam da:**
- **Prepoznate** gdje vaše proširenje može dodati najviše vrijednosti
- **Odaberete** prave API-je preglednika za funkcionalnost vašeg proširenja
- **Dizajnirate** proširenja koja učinkovito rade s pregledničkim sustavima
- **Osigurate** da vaše proširenje slijedi najbolje prakse sigurnosti preglednika
### Razmatranja za razvoj proširenja na više preglednika
### Razmatranja za razvoj na više preglednika
Različiti preglednici implementiraju standarde s blagim varijacijama, slično kao što različiti programski jezici mogu različito obrađivati isti algoritam. Chrome, Firefox i Safari imaju jedinstvene karakteristike koje programeri moraju uzeti u obzir tijekom razvoja proširenja.
Različiti preglednici standarde provode s malim varijacijama, slično kao što različiti programski jezici mogu drugačije obraditi isti algoritam. Chrome, Firefox i Safari svaki imaju jedinstvene karakteristike koje developeri moraju uzeti u obzir tijekom izrade proširenja.
> 💡 **Savjet za profesionalce**: Koristite [caniuse.com](https://www.caniuse.com) kako biste provjerili koje web tehnologije podržavaju različiti preglednici. Ovo je neprocjenjivo prilikom planiranja značajki vašeg proširenja!
> 💡 **Savjet**: Koristite [caniuse.com](https://www.caniuse.com) kako biste provjerili koje web tehnologije podržavaju različiti preglednici. Ovo je neprocjenjivo kod planiranja funkcionalnosti vašeg proširenja!
**Ključna razmatranja za razvoj proširenja:**
**Ključne stvari za razvoj proširenja:**
- **Testirajte** svoje proširenje na preglednicima Chrome, Firefox i Edge
- **Prilagodite** se različitim API-jima proširenja i formatima manifestacija preglednika
- **Rukujte** različitim karakteristikama performansi i ograničenjima
- **Osigurajte** rezervne opcije za značajke specifične za preglednik koje možda nisu dostupne
- **Prilagodite** se različitim API-jima i formatima manifest datoteka
- **Riješite** varijacije u performansama i ograničenjima
- **Omogućite** alternative za značajke specifične za određene preglednike koje možda nisu dostupne
✅ **Analitički uvid**: Možete odrediti koje preglednike vaši korisnici preferiraju instaliranjem analitičkih paketa u svoje projekte web razvoja. Ovi podaci pomažu vam da odredite prioritete koje preglednike prvo podržati.
✅ **Uvid u analitiku**: Možete odrediti koje preglednike vaši korisnici preferiraju instaliranjem analitičkih paketa u vaše web razvojne projekte. Ti podaci pomažu vam prioritetizirati koje preglednike prvo podržavati.
## Razumijevanje proširenja za preglednike
## Razumijevanje proširenja preglednika
Proširenja za preglednike rješavaju uobičajene izazove pregledavanja weba dodavanjem funkcionalnosti izravno u sučelje preglednika. Umjesto da zahtijevaju zasebne aplikacije ili složene radne procese, proširenja pružaju trenutni pristup alatima i značajkama.
Proširenja preglednika rješavaju uobičajene izazove pregledavanja dodavanjem funkcionalnosti izravno u sučelje preglednika. Umjesto da korisnici trebaju zasebne aplikacije ili složene procese, proširenja pružaju trenutačan pristup alatima i značajkama.
Ovaj koncept odražava kako su rani pioniri računalstva poput Douglasa Engelbarta zamišljali proširenje ljudskih sposobnosti tehnologijom - proširenja proširuju osnovnu funkcionalnost vašeg preglednika.
Ovaj koncept podsjeća na način kako su ranih računarskih pionira poput Douglasa Engelbarta zamišljali povećanje ljudskih sposobnosti pomoću tehnologije - proširenja nadograđuju osnovnu funkcionalnost vašeg preglednika.
```mermaid
quadrantChart
title Kategorije proširenja preglednika
x-axis Jednostavno --> Složenije
y-axis Privatna upotreba --> Profesionalni alati
quadrant-1 Alati za razvoj
quadrant-2 Rješenja za poduzeća
quadrant-3 Privatni alati
quadrant-4 Aplikacije za produktivnost
Ad Blockers: [0.3, 0.2]
Password Managers: [0.7, 0.3]
Color Pickers: [0.4, 0.8]
Code Formatters: [0.8, 0.9]
Note Taking: [0.6, 0.5]
Video Downloaders: [0.5, 0.2]
Time Trackers: [0.7, 0.6]
Screenshot Tools: [0.4, 0.4]
```
**Popularne kategorije proširenja i njihove prednosti:**
- **Alati za produktivnost**: Upravljanje zadacima, aplikacije za bilježenje i praćenje vremena koje pomažu u organizaciji
- **Poboljšanja sigurnosti**: Upravitelji lozinki, blokatori oglasa i alati za privatnost koji štite vaše podatke
- **Alati za programere**: Formatiranje koda, odabir boja i alati za otklanjanje pogrešaka koji olakšavaju razvoj
- **Poboljšanje sadržaja**: Načini čitanja, preuzimanje videozapisa i alati za snimanje zaslona koji poboljšavaju vaše iskustvo na webu
✅ **Pitanje za razmišljanje**: Koja su vaša omiljena proširenja za preglednik? Koje specifične zadatke obavljaju i kako poboljšavaju vaše iskustvo pregledavanja?
- **Alati za produktivnost**: Upravljanje zadacima, aplikacije za bilješke i vremensko praćenje koje pomažu u organizaciji
- **Sigurnosna poboljšanja**: Upravitelji lozinkama, blokatori reklama i alati za privatnost koji štite vaše podatke
- **Alati za developere**: Formatere koda, biranje boja i alati za otklanjanje pogrešaka koji ubrzavaju razvoj
- **Poboljšanje sadržaja**: Načini čitanja, preuzimatelji videa i alati za snimanje zaslona koji poboljšavaju vaše web iskustvo
✅ **Pitanje za razmišljanje**: Koja su vaša omiljena proširenja preglednika? Koje specifične zadatke obavljaju i kako poboljšavaju vaše iskustvo pregledavanja?
### 🔄 **Pedagoški pregled**
**Razumijevanje arhitekture preglednika**: Prije prelaska na razvoj proširenja, pobrinite se da možete:
- ✅ Objasniti kako preglednici obrađuju web zahtjeve i prikazuju sadržaj
- ✅ Prepoznati glavne komponente arhitekture preglednika
- ✅ Razumjeti kako se proširenja integriraju s funkcionalnošću preglednika
- ✅ Prepoznati sigurnosni model koji štiti korisnike
**Brzi samoprovjera**: Možete li pratiti put od upisivanja URL-a do prikaza web stranice?
1. **DNS upit** pretvara URL u IP adresu
2. **HTTP zahtjev** dohvaća sadržaj s poslužitelja
3. **Parsiranje** obrađuje HTML, CSS i JavaScript
4. **Prikazivanje** prikazuje konačnu web stranicu
5. **Proširenja** mogu modificirati sadržaj u više koraka
## Instalacija i upravljanje proširenjima
Razumijevanje procesa instalacije proširenja pomaže vam predvidjeti korisničko iskustvo kada ljudi instaliraju vaše proširenje. Proces instalacije standardiziran je u modernim preglednicima, s manjim varijacijama u dizajnu sučelja.
Razumijevanje procesa instalacije proširenja pomaže vam predvidjeti iskustvo korisnika kad ljudi instaliraju vaše proširenje. Proces instalacije standardiziran je kod modernih preglednika, s manjim varijacijama u dizajnu sučelja.
> **Važno**: Obavezno uključite način rada za razvojne programere i omogućite proširenja iz drugih trgovina prilikom testiranja vlastitih proširenja.
> **Važno**: Provjerite jeste li uključili način za developere te dozvolili instalaciju proširenja iz drugih trgovina prilikom testiranja svojih proširenja.
### Proces instalacije proširenja za razvoj
### Proces instalacije proširenja tijekom razvoja
Kada razvijate i testirate vlastita proširenja, slijedite ovaj tijek rada:
Kad razvijate i testirate vlastita proširenja, slijedite ovaj tijek rada:
```mermaid
flowchart TD
A[Napiši kod] --> B[Sastavi proširenje]
B --> C{Prva instalacija?}
C -->|Da| D[Učitaj nepakovano]
C -->|Ne| E[Ponovno učitaj proširenje]
D --> F[Testiraj funkcionalnost]
E --> F
F --> G{Radi ispravno?}
G -->|Ne| H[Riješi probleme]
G -->|Da| I[Spremljeno za korisnike]
H --> A
I --> J[Objavi u trgovini]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
```
```bash
# Step 1: Build your extension
# Korak 1: Izgradite svoje proširenje
npm run build
```
**Što ova naredba postiže:**
- **Kompilira** vaš izvorni kod u datoteke spremne za preglednik
- **Pakira** JavaScript module u optimizirane pakete
- **Spaja** JavaScript module u optimizirane pakete
- **Generira** konačne datoteke proširenja u mapi `/dist`
- **Priprema** vaše proširenje za instalaciju i testiranje
**Korak 2: Otvorite upravljanje proširenjima u pregledniku**
1. **Otvorite** stranicu za upravljanje proširenjima u vašem pregledniku
2. **Kliknite** gumb "Postavke i više" (ikona `...`) u gornjem desnom kutu
**Korak 2: Otiđite na Proširenja preglednika**
1. **Otvorite** stranicu za upravljanje proširenjima preglednika
2. **Kliknite** gumb "Postavke i još" (ikona `...`) u gornjem desnom kutu
3. **Odaberite** "Proširenja" iz padajućeg izbornika
**Korak 3: Učitajte svoje proširenje**
- **Za nove instalacije**: Odaberite `load unpacked` i odaberite svoju mapu `/dist`
- **Za nove instalacije**: Izaberite `load unpacked` i odaberite vašu `/dist` mapu
- **Za ažuriranja**: Kliknite `reload` pored već instaliranog proširenja
- **Za testiranje**: Omogućite "Način rada za razvojne programere" za pristup dodatnim značajkama za otklanjanje pogrešaka
- **Za testiranje**: Uključite "Način za developere" za dodatne mogućnosti otklanjanja pogrešaka
### Instalacija proširenja za produkciju
> ✅ **Napomena**: Ove upute za razvoj specifične su za proširenja koja sami izrađujete. Za instalaciju objavljenih proširenja posjetite službene trgovine proširenja preglednika poput [Microsoft Edge Add-ons trgovine](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
> ✅ **Napomena**: Ove upute za razvoj posebno su za proširenja koja sami gradite. Za instalaciju objavljenih proširenja posjetite službene trgovine proširenja preglednika poput [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
**Razumijevanje razlike:**
- **Instalacije za razvoj** omogućuju testiranje neobjavljenih proširenja tijekom razvoja
- **Instalacije iz trgovine** pružaju provjerena, objavljena proširenja s automatskim ažuriranjima
- **Ručno instaliranje** omogućuje instalaciju proširenja izvan službenih trgovina (zahtijeva način rada za razvojne programere)
**Razumijevanje razlika:**
- **Razvojne instalacije** omogućuju testiranje neobjavljenih proširenja tijekom razvoja
- **Trgovačke instalacije** nude pregledana, objavljena proširenja s automatskim ažuriranjima
- **Sideloading** omogućuje instalaciju proširenja izvan službenih trgovina (zahtijeva način za developere)
## Izrada proširenja za ugljični otisak
## Izrada vašeg proširenja za ugljični otisak
Izradit ćemo proširenje za preglednik koje prikazuje ugljični otisak potrošnje energije u vašoj regiji. Ovaj projekt demonstrira osnovne koncepte razvoja proširenja dok stvara praktičan alat za podizanje svijesti o okolišu.
Izradit ćemo proširenje preglednika koje prikazuje ugljični otisak potrošnje energije u vašoj regiji. Ovaj projekt demonstrira osnovne koncepte razvoja proširenja dok stvara koristan alat za okolišnu svijest.
Ovaj pristup slijedi princip "učenje kroz rad" koji se pokazao učinkovitim još od obrazovnih teorija Johna Deweya - kombinirajući tehničke vještine s značajnim stvarnim aplikacijama.
Ovaj pristup slijedi načelo "učenja kroz rad" koje je djelotvorno od vremena John Deweyjevih pedagoških teorija - kombinirajući tehničke vještine s korisnim stvarnim primjenama.
### Zahtjevi projekta
Prije početka razvoja, prikupimo potrebne resurse i ovisnosti:
Prije početka razvoja skupimo potrebne resurse i ovisnosti:
**Potrebni pristup API-ju:**
- **[CO2 Signal API ključ](https://www.co2signal.com/)**: Unesite svoju email adresu kako biste dobili besplatni API ključ
- **[CO2 Signal API ključ](https://www.co2signal.com/)**: Unesite svoju email adresu kako biste dobili besplatan API ključ
- **[Kod regije](http://api.electricitymap.org/v3/zones)**: Pronađite kod svoje regije koristeći [Electricity Map](https://www.electricitymap.org/map) (na primjer, Boston koristi 'US-NEISO')
**Alati za razvoj:**
**Razvojni alati:**
- **[Node.js i NPM](https://www.npmjs.com)**: Alat za upravljanje paketima za instalaciju ovisnosti projekta
- **[Početni kod](../../../../5-browser-extension/start)**: Preuzmite mapu `start` za početak razvoja
✅ **Saznajte više**: Poboljšajte svoje vještine upravljanja paketima s ovim [sveobuhvatnim modulom za učenje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
✅ **Saznajte više**: Poboljšajte svoje vještine upravljanja paketima kroz ovaj [detaljni Learn modul](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
### Razumijevanje strukture projekta
Razumijevanje strukture projekta pomaže u učinkovitom organiziranju razvojnih zadataka. Kao što je Aleksandrijska knjižnica bila organizirana za jednostavno pronalaženje znanja, dobro strukturirana baza koda čini razvoj učinkovitijim:
Razumijevanje strukture projekta pomaže učinkovito organizirati razvojni rad. Kao što je knjižnica Aleksandrije bila organizirana za lakši pristup znanju, dobro strukturirana baza koda čini razvoj efikasnijim:
├── package.json # Project dependencies and scripts
└── webpack.config.js # Build configuration
```
**Razlaganje onoga što svaka datoteka postiže:**
- **`manifest.json`**: **Definira** metapodatke proširenja, dozvole i ulazne točke
- **`index.html`**: **Stvara** korisničko sučelje koje se pojavljuje kada korisnici kliknu na vaše proširenje
- **`background.js`**: **Upravlja** pozadinskim zadacima i slušateljima događaja preglednika
- **`main.js`**: **Sadrži** konačni JavaScript nakon procesa izgradnje
**Što svaka datoteka radi:**
- **`manifest.json`**: **Definira** metapodatke proširenja, dopuštenja i početne točke
- **`index.html`**: **Kreira** korisničko sučelje koje se prikazuje kad korisnici kliknu na proširenje
- **`background.js`**: **Rukuje** pozadinskim zadacima i slušateljima događaja preglednika
- **`main.js`**: **Sadrži** konačni objedinjeni JavaScript nakon procesa izgradnje
- **`src/index.js`**: **Sadrži** vaš glavni razvojni kod koji se kompajlira u `main.js`
> 💡 **Savjet za organizaciju**: Spremite svoj API ključ i kod regije u sigurnu bilješku za jednostavno referenciranje tijekom razvoja. Trebat ćete te vrijednosti za testiranje funkcionalnosti vašeg proširenja.
> 💡 **Savjet za organizaciju**: Spremite svoj API ključ i kod regije u sigurnu bilješku radi lakšeg pristupa tijekom razvoja. Trebat će vam te vrijednosti za testiranje funkcionalnosti vašeg proširenja.
✅ **Sigurnosna napomena**: Nikada ne pohranjujte API ključeve ili osjetljive vjerodajnice u svoj repozitorij koda. Pokazat ćemo vam kako ih sigurno upravljati u sljedećim koracima.
✅ **Sigurnosna napomena**: Nikada ne spremite API ključeve ili osjetljive pristupne podatke u svoj repozitorij koda. Pokazat ćemo vam kako ih sigurno rukovati u sljedećim koracima.
## Izrada sučelja proširenja
Sada ćemo izraditi komponente korisničkog sučelja. Proširenje koristi pristup s dva ekrana: ekran za konfiguraciju za početno postavljanje i ekran za prikaz rezultata.
Sada ćemo izgraditi komponente korisničkog sučelja. Proširenje koristi pristup s dva zaslona: zaslon konfiguracije za početno postavljanje i zaslon rezultata za prikaz podataka.
Ovo slijedi princip progresivnog otkrivanja koji se koristi u dizajnu sučelja od ranih dana računalstva - otkrivanje informacija i opcija u logičnom slijedu kako bi se izbjeglo preopterećenje korisnika.
Ovo slijedi princip progresivnog otkrivanja koji se koristi u dizajnu sučelja još od ranih računarskih dana - otkrivajući informacije i opcije logičnim redoslijedom kako se korisnici ne bi preopteretili.
### Pregled prikaza proširenja
**Prikaz postavki** - Konfiguracija za prvi put:
**Zaslon postavljanja** - konfiguracija za prvi put korisnika:
**Prikaz rezultata** - Prikaz podataka o ugljičnom otisku:
**Zaslon rezultata** - prikaz podataka o ugljičnom otisku:
### Izrada obrasca za konfiguraciju
Obrazac za postavljanje prikuplja podatke o konfiguraciji korisnika tijekom prve upotrebe. Jednom konfigurirani, ovi podaci ostaju pohranjeni u memoriji preglednika za buduće sesije.
Obrazac za postavljanje prikuplja konfiguracijske podatke korisnika prilikom prvog korištenja. Nakon konfiguracije, ove informacije ostaju spremljene u pregledničku pohranu za buduće sesije.
U datoteku`/dist/index.html` dodajte ovu strukturu obrasca:
U datoteci`/dist/index.html` dodajte ovu strukturu obrasca:
```html
<formclass="form-data"autocomplete="on">
@ -232,16 +336,16 @@ U datoteku `/dist/index.html` dodajte ovu strukturu obrasca:
</form>
```
**Što ovaj obrazac postiže:**
- **Stvara** semantičku strukturu obrasca s odgovarajućim oznakama i poveznicama za unos
- **Omogućuje**funkcionalnost automatskog popunjavanja preglednika za poboljšano korisničko iskustvo
- **Zahtijeva**da oba polja budu ispunjena prije slanja koristeći atribut`required`
- **Organizira** unose s opisnim nazivima klasa za jednostavno stiliziranje i ciljanje JavaScriptom
**Što ovaj obrazac omogućuje:**
- **Kreira** semantičku strukturu obrasca s odgovarajućim oznakama i povezivanjem unosa
- **Omogućuje**automatsko dovršavanje preglednika za bolje korisničko iskustvo
- **Zahtijeva**ispunjavanje oba polja prije slanja putem atributa`required`
- **Organizira** ulaze s opisnim imenima klasa radi lakšeg stiliziranja i ciljanog JavaScript pristupa
- **Pruža** jasne upute korisnicima koji prvi put postavljaju proširenje
### Izrada prikaza rezultata
Zatim, stvorite područje rezultata koje će prikazivati podatke o ugljičnom otisku. Dodajte ovaj HTML ispod obrasca:
Zatim kreirajte područje rezultata koje će prikazivati podatke o ugljičnom otisku. Dodajte ovaj HTML ispod obrasca:
```html
<divclass="result">
@ -257,12 +361,12 @@ Zatim, stvorite područje rezultata koje će prikazivati podatke o ugljičnom ot
</div>
```
**Razlaganje onoga što ova struktura pruža:**
- **`loading`**: **Prikazuje** poruku učitavanja dok se dohvaćaju podaci iz API-ja
- **`errors`**: **Prikazuje** poruke o pogreškama ako API pozivi ne uspiju ili su podaci nevažeći
- **`data`**: **Sadrži** sirove podatke za otklanjanje pogrešaka tijekom razvoja
- **`result-container`**: **Prikazuje**formatirane informacije o ugljičnom otisku korisnicima
- **`clear-btn`**: **Omogućuje** korisnicima promjenu regije i ponovno postavljanje proširenja
**Što ova struktura pruža:**
- **`loading`**: **Prikazuje** poruku učitavanja dok se podaci s API-ja dohvaćaju
- **`errors`**: **Prikazuje** poruke o pogreškama ako pozivi API-ja zakažu ili su podaci nevažeći
- **`data`**: **Drži** sirove podatke radi otklanjanja pogrešaka tijekom razvoja
- **`result-container`**: **Prikazuje**oblikovane informacije o ugljičnom otisku korisnicima
- **`clear-btn`**: **Dopusti** korisnicima promjenu regije i ponovnu konfiguraciju proširenja
### Postavljanje procesa izgradnje
@ -274,53 +378,178 @@ npm install
**Što ovaj proces instalacije postiže:**
- **Preuzima** Webpack i druge razvojne ovisnosti navedene u `package.json`
- **Konfigurira** alat za izgradnju za kompajliranje modernog JavaScripta
- **Konfigurira** alat za izgradnju za kompilaciju modernog JavaScript koda
- **Priprema** razvojno okruženje za izradu i testiranje proširenja
- **Omogućuje**pakiranje koda, optimizaciju i značajke kompatibilnosti s različitim preglednicima
- **Omogućuje**objedinjavanje, optimizaciju i značajke međupregledničke kompatibilnosti
> 💡 **Uvid u proces izgradnje**: Webpack pakira vaš izvorni kod iz `/src/index.js` u `/dist/main.js`. Ovaj proces optimizira vaš kod za produkciju i osigurava kompatibilnost s preglednicima.
> 💡 **Uvid u proces izgradnje**: Webpack spaja vaš izvorni kod iz `/src/index.js` u `/dist/main.js`. Ovaj proces optimizira kod za produkciju i osigurava kompatibilnost s preglednicima.
### Testiranje vašeg napretka
U ovom trenutku možete testirati svoje proširenje:
1. **Pokreni** naredbu za izgradnju kako bi kompajlirao svoj kod
2. **Učitaj** dodatak u svoj preglednik koristeći način za razvojne programere
3. **Provjeri** prikazuje li se obrazac ispravno i izgleda profesionalno
4. **Provjeri** jesu li svi elementi obrasca ispravno poravnati i funkcionalni
1. **Pokrenite** naredbu za izgradnju kako biste kompajlirali svoj kod
2. **Učitajte** proširenje u svoj preglednik koristeći način rada za razvojne programere
3. **Provjerite** da se obrazac ispravno prikazuje i izgleda profesionalno
4. **Provjerite** da su svi elementi obrasca pravilno poravnati i funkcionalni
**Što si postigao:**
- **Izgradio** temeljnu HTML strukturu za svoj dodatak
- **Kreirao** sučelja za konfiguraciju i rezultate s pravilnom semantičkom oznakom
- **Postavio** moderan razvojni tijek koristeći industrijski standardne alate
- **Pripremio** temelj za dodavanje interaktivnih JavaScript funkcionalnosti
**Što ste postigli:**
- **Izradili** osnovnu HTML strukturu za svoje proširenje
- **Stvorili
**Opis:** Poboljšajte proširenje za preglednik dodavanjem validacije obrazaca i značajki povratnih informacija korisnicima kako biste unaprijedili korisničko iskustvo prilikom unosa API ključeva i kodova regije.
### 🔄 **Pedagoška provjera**
**Napredak u razvoju dodatka**: Provjeri svoje razumijevanje prije nastavka:
- ✅ Možeš li objasniti svrhu svake datoteke u strukturi projekta?
- ✅ Razumiješ li kako proces izgradnje transformira tvoj izvorni kod?
- ✅ Zašto odvajamo konfiguraciju i rezultate u različite dijelove sučelja?
- ✅ Kako struktura obrasca podržava i upotrebljivost i pristupačnost?
**Zadatak:** Kreirajte JavaScript funkcije za validaciju koje provjeravaju sadrži li polje za API ključ najmanje 20 znakova i slijedi li kod regije ispravan format (poput 'US-NEISO'). Dodajte vizualne povratne informacije mijenjanjem boje obruba polja za unos u zeleno za ispravne unose i crveno za neispravne. Također dodajte značajku za uključivanje/isključivanje prikaza API ključa radi sigurnosti.
**Razumijevanje razvojog tijeka**: Sada bi trebao moći:
1. **Izmijeniti** HTML i CSS za sučelje svog dodatka
2. **Pokrenuti** naredbu za izgradnju kako bi kompajlirao svoje izmjene
3. **Ponovno učitati** dodatak u pregledniku kako bi testirao ažuriranja
4. **Otkloniti pogreške** koristeći alate za razvojne programere u pregledniku
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Završio si prvu fazu razvoja dodataka za preglednike. Kao što su braća Wright prvo trebala razumjeti aerodinamiku prije nego što su ostvarili let, razumijevanje ovih temeljnih pojmova priprema te za izgradnju složenijih interaktivnih značajki u sljedećoj lekciji.
## Izazov GitHub Copilot Agenta 🚀
Iskoristi Agent način za dovršetak sljedećeg izazova:
**Opis:** Poboljšaj dodatak za preglednik dodavanjem validacije obrasca i značajki za povratnu informaciju korisniku radi poboljšanja korisničkog iskustva pri unosu API ključeva i kodova regija.
**Zadatak:** Kreiraj funkcije za validaciju u JavaScriptu koje provjeravaju sadrži li polje API ključa barem 20 znakova i slijedi li kod regije ispravan format (npr. 'US-NEISO'). Dodaj vizualnu povratnu informaciju promjenom boje okvira unosa u zeleno za valjane unose i crveno za nevaljane. Također dodaj značajku preklapanja za prikaz/sakrivanje API ključa radi sigurnosti.
Više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) pročitaj ovdje.
## 🚀 Izazov
Pogledajte trgovinu proširenja za preglednik i instalirajte jedno na svoj preglednik. Možete na zanimljive načine proučiti njegove datoteke. Što ste otkrili?
Pogledaj trgovinu dodataka za preglednik i instaliraj jedan u svoj preglednik. Možeš proučiti njegove datoteke na zanimljive načine. Što otkrivaš?
## Kviz nakon predavanja
## Kviz nakon lekcije
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/24)
[Kviz nakon lekcije](https://ff-quizzes.netlify.app/web/quiz/24)
## Pregled i samostalno učenje
U ovoj lekciji ste naučili nešto o povijesti web preglednika; iskoristite ovu priliku da saznate kako su izumitelji World Wide Weba zamislili njegovu upotrebu čitajući više o njegovoj povijesti. Neke korisne stranice uključuju:
U ovoj si lekciji naučio malo o povijesti web preglednika; iskoristi priliku da saznaš kako su izumitelji World Wide Weba zamišljali njegovu uporabu čitajući više o njegovoj povijesti. Korisne stranice uključuju:
[Povijest web preglednika](https://www.mozilla.org/firefox/browsers/browser-history/)
[Intervju s Timom Berners-Leeom](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
[Intervju s Timom Berners-Leejem](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
### ⚡ **Što možeš napraviti u sljedećih 5 minuta**
- [ ] Otvori stranicu za dodatke Chrome/Edge preglednika (chrome://extensions) i istraži što si instalirao
- [ ] Pogledaj karticu Mreža u alatima za razvojne programere dok učitavaš web stranicu
- [ ] Pokušaj pogledati izvor stranice (Ctrl+U) da vidiš HTML strukturu
- [ ] Istraži bilo koji element web stranice i izmijeni njegov CSS u alatima za razvojne programere
### 🎯 **Što možeš postići u ovom satu**
- [ ] Završiti kviz nakon lekcije i razumjeti osnove preglednika
- [ ] Kreirati osnovnu datoteku manifest.json za dodatak preglednika
- [ ] Izgraditi jednostavni dodatak "Hello World" koji prikazuje skočni prozor
- [ ] Testirati učitavanje dodatka u načinu za razvojne programere
- [ ] Istražiti dokumentaciju dodataka za ciljanu vrstu preglednika
### 📅 **Tvoj tjedni put razvoja dodatka**
- [ ] Dovršiti funkcionalni dodatak za preglednik s pravom korisnom funkcionalnošću
- [ ] Naučiti o sadržajnim skriptama, pozadinskim skriptama i interakcijama skočnih prozora
- [ ] Ovladati API-jima preglednika kao što su spremište, kartice i slanje poruka
- [ ] Dizajnirati korisnički pristupačna sučelja za svoj dodatak
- [ ] Testirati dodatak na različitim web stranicama i u različitim scenarijima
- [ ] Objaviti dodatak u trgovini dodataka za preglednike
### 🌟 **Tvoj mjesečni razvoj pregledničkih dodataka**
- [ ] Izgraditi više dodataka koji rješavaju različite korisničke probleme
- [ ] Naučiti napredne API-je preglednika i najbolje prakse za sigurnost
- [ ] Doprinijeti otvorenim izvorima projekata dodataka za preglednike
- [ ] Ovladati kompatibilnošću među preglednicima i progresivnim poboljšanjem
- [ ] Kreirati alate i predloške za razvoj dodataka za druge
- [ ] Postati stručnjak za pregledničke dodatke koji pomaže drugim programerima
## 🎯 Tvoj vremenski plan za usavršavanje u razvoju dodataka
```mermaid
timeline
title Napredak u razvoju proširenja za preglednik
section Osnove (15 minuta)
Razumijevanje preglednika: Osnovna arhitektura
: Proces prikaza
: Točke integracije proširenja
section Postavljanje (20 minuta)
Razvojno okruženje: Struktura projekta
: Konfiguracija alata za izgradnju
: Način rada za programere preglednika
: Proces učitavanja proširenja
section Dizajn sučelja (25 minuta)
Korisničko iskustvo: HTML struktura
: CSS stilizacija
: Validacija obrazaca
: Responsivni dizajn
section Osnovna funkcionalnost (35 minuta)
Integracija JavaScripta: Obrada događaja
: API interakcije
: Pohrana podataka
: Obrada pogrešaka
section Browser API-ji (45 minuta)
Integracija platforme: Sustav dozvola
: Storage API-ji
: Upravljanje karticama
: Kontekstni izbornici
section Napredne značajke (1 tjedan)
Profesionalna proširenja: Skripte u pozadini
: Skripte sadržaja
: Kompatibilnost između preglednika
: Optimizacija performansi
section Objavljivanje (2 tjedna)
Distribucija: Slanje u trgovinu
: Proces recenzije
: Povratne informacije korisnika
: Upravljanje ažuriranjima
section Razina stručnjaka (1 mjesec)
Ekosustav proširenja: Napredni API-ji
: Najbolje sigurnosne prakse
: Značajke u poduzeću
: Integracija okvira
```
### 🛠️ Sažetak skupa alata za razvoj dodataka
Nakon završetka ove lekcije, sada imaš:
- **Znanje o arhitekturi preglednika**: Razumijevanje renderiranja, sigurnosnih modela i integracije dodataka
- **Razvojno okruženje**: Moderan alatni lanac s Webpackom, NPM-om i mogućnostima debugiranja
- **Temelj UI/UX-a**: Semantička HTML struktura s obrascima progresivnog otkrivanja
- **Sigurnosnu osviještenost**: Razumijevanje dozvola preglednika i sigurnih razvojnih praksi
- **Koncepte kompatibilnosti među preglednicima**: Znanje o razmatranjima kompatibilnosti i pristupima testiranju
- **Integraciju API-ja**: Temelj za rad s vanjskim izvorima podataka
- **Profesionalni tijek rada**: Industrijski standardni postupci razvoja i testiranja
**Primjena u stvarnom svijetu**: Ove vještine direktno se primjenjuju na:
- **Web razvoj**: Jednostanične aplikacije i progresivne web aplikacije
- **Desktop aplikacije**: Electron i softver temeljen na webu za stolna računala
- **Mobilni razvoj**: Hibridne aplikacije i mobilna web rješenja
- **Alate za poduzeća**: Interni alati za produktivnost i automatizaciju tijeka rada
- **Open Source**: Doprinose projektima dodataka za preglednike i web standardima
**Sljedeća razina**: Spreman si za dodavanje interaktivnih funkcionalnosti, rad s API-jima preglednika i kreiranje dodataka koji rješavaju stvarne korisničke probleme!
## Zadatak
## Zadatak
[Promijenite stil vašeg proširenja](assignment.md)
[Prilagodi svoj dodatak](assignment.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden pomoću AI prevodilačke usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati službenim i autoritativnim izvorom. Za važne informacije preporučujemo profesionalni prijevod od strane ljudskog prevoditelja. Nismo odgovorni za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
Sjećate li se proširenja za preglednik koje ste počeli izrađivati? Trenutno imate lijep obrazac, ali on je zapravo statičan. Danas ćemo ga oživjeti povezivanjem s pravim podacima i dodavanjem memorije.
Razmislite o računalima za kontrolu misije Apollo - nisu samo prikazivala fiksne informacije. Neprestano su komunicirala sa svemirskim letjelicama, ažurirala podatke o telemetriji i pamtila ključne parametre misije. Takvo dinamično ponašanje gradimo danas. Vaše proširenje će se povezati s internetom, dohvatiti stvarne podatke o okolišu i zapamtiti vaše postavke za sljedeći put.
Integracija API-ja može zvučati složeno, ali zapravo se radi o tome da naučite svoj kod kako komunicirati s drugim uslugama. Bez obzira dohvaćate li podatke o vremenu, feedove društvenih mreža ili informacije o ugljičnom otisku kao što ćemo danas, sve se svodi na uspostavljanje tih digitalnih veza. Također ćemo istražiti kako preglednici mogu pohraniti informacije - slično kao što su knjižnice koristile kartoteke za pamćenje gdje se knjige nalaze.
Na kraju ove lekcije imat ćete proširenje za preglednik koje dohvaća stvarne podatke, pohranjuje korisničke postavke i pruža glatko iskustvo. Krenimo!
✅ Slijedite numerirane segmente u odgovarajućim datotekama kako biste znali gdje postaviti svoj kod.
## Postavljanje elemenata za manipulaciju u proširenju
Prije nego što vaš JavaScript može manipulirati sučeljem, potrebno je referencirati specifične HTML elemente. Zamislite to kao teleskop koji treba biti usmjeren na određene zvijezde - prije nego što je Galileo mogao proučavati Jupiterove mjesece, morao je locirati i fokusirati se na Jupiter.
U vašoj datoteci `index.js`, kreirat ćemo `const` varijable koje hvataju reference na svaki važan element obrasca. To je slično tome kako znanstvenici označavaju svoju opremu - umjesto da svaki put pretražuju cijeli laboratorij, mogu izravno pristupiti onome što im treba.
Sjećaš se onog proširenja za preglednik koje si počeo graditi? Trenutno imaš lijepo dizajniran oblik, ali on je zapravo statičan. Danas ćemo ga oživjeti povezivanjem s pravim podacima i dodavanjem memorije.
Razmisli o računalima za kontrolu misija Apolla – nisu samo prikazivala fiksne informacije. Kontinuirano su komunicirala s letjelicama, ažurirala podatke s telemetrije i pamtila ključne parametre misije. To je dinamično ponašanje koje danas gradimo. Tvoje proširenje će dohvaćati stvarne podatke o okolišu i pamtiti tvoje postavke za sljedeći put.
Integracija API-ja može zvučati komplicirano, ali to je zapravo učenje tvog koda kako komunicirati s drugim uslugama. Bilo da dohvaćaš vremenske podatke, društvene mreže ili informacije o ugljičnom otisku poput onoga što ćemo raditi danas, radi se o uspostavljanju tih digitalnih veza. Također ćemo istražiti kako preglednici mogu trajno pohraniti informacije – slično kao što su knjižnice koristile kartoteke da pamte gdje knjige pripadaju.
Na kraju ove lekcije imat ćeš proširenje preglednika koje dohvaća stvarne podatke, pohranjuje korisničke postavke i pruža glatko iskustvo. Krenimo!
```mermaid
mindmap
root((Dinamička Proširenja))
DOM Manipulacija
Odabir Elementa
Upravljanje Događajima
Upravljanje Stanjima
Ažuriranja UI
Lokalna Pohrana
Trajnost Podataka
Parovi Ključ-Vrijednost
Upravljanje Sesijama
Korisničke Preferencije
API Integracija
HTTP Zahtjevi
Autentikacija
Parsiranje Podataka
Upravljanje Pogreškama
Asinkrono Programiranje
Promisi
Async/Await
Hvatanje Pogrešaka
Kôd Koji Ne Blokira
Korisničko Iskustvo
Stanja Učitavanja
Poruke o Pogreškama
Glatke Prijelaze
Validacija Podataka
```
✅ Slijedi numerirane dijelove u odgovarajućim datotekama da znaš gdje staviti svoj kod
## Postavi elemente za manipulaciju u proširenju
Prije nego što tvoj JavaScript može manipulirati sučeljem, treba mu reference na specifične HTML elemente. To je kao teleskop koji mora biti usmjeren na određene zvijezde – prije nego je Galileo mogao proučavati Jupiterove mjeseca, morao je locirati i usredotočiti se na Jupiter.
U tvojoj datoteci `index.js` stvorit ćemo varijable `const` koje hvataju reference na svaki važan element u obliku. To je slično kao što znanstvenici označavaju svoju opremu – umjesto da svaki put pretražuju cijelu laboratoriju, mogu izravno pristupiti onome što treba.
```mermaid
flowchart LR
A[JavaScript Kod] --> B[document.querySelector]
B --> C[CSS Selektori]
C --> D[HTML Elementi]
D --> E[".form-data"]
D --> F[".region-name"]
D --> G[".api-key"]
D --> H[".loading"]
D --> I[".errors"]
D --> J[".result-container"]
E --> K[Element Obrasca]
F --> L[Polje Unosa]
G --> M[Polje Unosa]
H --> N[Element Sučelja]
I --> O[Element Sučelja]
J --> P[Element Sučelja]
style A fill:#e1f5fe
style D fill:#e8f5e8
style K fill:#fff3e0
style L fill:#fff3e0
style M fill:#fff3e0
```
```javascript
// form fields
// obrasci polja
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
- **Hvata** elemente obrasca koristeći `document.querySelector()` s CSS selektorima klase
- **Stvara** reference na polja za unos naziva regije i API ključa
- **Uspostavlja** veze s elementima za prikaz rezultata podataka o ugljičnoj potrošnji
- **Postavlja** pristup elementima korisničkog sučelja poput indikatora učitavanja i poruka o pogreškama
- **Pohranjuje** svaku referencu elementa u `const` varijablu za jednostavno ponovno korištenje u vašem kodu
## Dodavanje slušatelja događaja
Sada ćemo omogućiti vašem proširenju da reagira na korisničke radnje. Slušatelji događaja su način na koji vaš kod prati interakcije korisnika. Zamislite ih kao operatere u ranim telefonskim centralama - slušali su dolazne pozive i povezivali prave krugove kad je netko želio uspostaviti vezu.
**Evo što ovaj kod radi:**
- **Hvata** elemente obrasca koristeći `document.querySelector()` s CSS selektorima
- **Stvara** reference na ulazna polja za naziv regije i API ključ
- **Uspostavlja** veze na elemente za prikaz rezultata za podatke o potrošnji ugljika
- **Postavlja** pristup UI elementima poput pokazivača učitavanja i poruka o pogrešci
- **Sprema** svaki element u `const` varijablu radi lakšeg ponovnog korištenja kroz kod
## Dodaj slušatelje događaja
Sada ćemo učiniti da tvoje proširenje reagira na korisničke radnje. Slušatelji događaja su način na koji tvoj kod prati korisničke interakcije. Zamislimo ih kao operatere u ranim telefonskim centrima – slušali su dolazne pozive i povezivali odgovarajuće krugove kad bi netko želio uspostaviti vezu.
- **Dodaje** slušatelja za slanje obrasca koji se aktivira kada korisnici pritisnu Enter ili kliknu na slanje
- **Povezuje** slušatelja klikova na gumb za brisanje radi resetiranja obrasca
- **Prosljeđuje** objekt događaja `(e)` funkcijama za dodatnu kontrolu
- **Poziva** funkciju `init()` odmah kako bi postavila početno stanje vašeg proširenja
**Razumijevanje pojmova:**
- **Veže** slušatelja podnošenja na obrazac koji se aktivira kad korisnik pritisne Enter ili klikne podnesi
- **Povezuje** slušatelja klika na gumb za čišćenje za resetiranje obrasca
- **Prosljeđuje** objekt događaja `(e)` u funkcije za dodatnu kontrolu
- **Poziva** funkciju `init()` odmah radi postavljanja početnog stanja proširenja
✅ Primijeti ovdje korištenu sažetu sintaksu strelične funkcije. Ovaj moderni JavaScript pristup je čišći od tradicionalnih funkcijskih izraza, ali oba jednako dobro funkcioniraju!
✅ Obratite pažnju na skraćenu sintaksu streličaste funkcije koja se ovdje koristi. Ovaj moderni pristup JavaScriptu je čišći od tradicionalnih izraza funkcija, ali oba jednako dobro funkcioniraju!
### 🔄 **Pedagoški pregled**
**Razumijevanje rukovanja događajima**: Prije prelaska na inicijalizaciju, budi siguran da možeš:
- ✅ Objasniti kako `addEventListener` povezuje korisničke akcije s JavaScript funkcijama
- ✅ Razumjeti zašto prosljeđujemo objekt događaja `(e)` u funkcije za rukovanje
- ✅ Prepoznati razliku između događaja `submit` i `click`
- ✅ Opisati kada i zašto se funkcija `init()` pokreće
## Izrada funkcija za inicijalizaciju i resetiranje
**Brzi samoprovjera**: Što bi se dogodilo da zaboraviš `e.preventDefault()` u podnošenju obrasca?
*Odgovor: Stranica bi se ponovno učitala, izgubivši sav JavaScript status i prekidajući korisničko iskustvo*
Izradimo logiku inicijalizacije za vaše proširenje. Funkcija `init()` je poput navigacijskog sustava broda koji provjerava svoje instrumente - određuje trenutno stanje i prilagođava sučelje u skladu s tim. Provjerava je li netko već koristio vaše proširenje i učitava njihove prethodne postavke.
## Izradi funkcije inicijalizacije i resetiranja
Funkcija `reset()` korisnicima pruža svježi početak - slično kao što znanstvenici resetiraju svoje instrumente između eksperimenata kako bi osigurali čiste podatke.
Kreirat ćemo logiku inicijalizacije za tvoje proširenje. Funkcija `init()` je poput navigacijskog sustava broda koja provjerava instrumente – određuje trenutno stanje i prilagođava sučelje u skladu s tim. Provjerava je li netko već koristio tvoje proširenje i učitava prethodne postavke.
Funkcija `reset()` korisnicima pruža svjež početak – slično kao što znanstvenici resetiraju instrumente između eksperimenata kako bi osigurali čiste podatke.
```javascript
function init() {
// Check if user has previously saved API credentials
// Provjerite je li korisnik prethodno spremio API vjerodajnice
// Set extension icon to generic green (placeholder for future lesson)
// TODO: Implement icon update in next lesson
// Postavite ikonu ekstenzije na generičku zelenu (privremeni prikaz za buduću lekciju)
// TODO: Implementirajte ažuriranje ikone u sljedećoj lekciji
if (storedApiKey === null || storedRegion === null) {
// First-time user: show the setup form
// Korisnik prvi put: prikažite obrazac za postavljanje
form.style.display = 'block';
results.style.display = 'none';
loading.style.display = 'none';
clearBtn.style.display = 'none';
errors.textContent = '';
} else {
// Returning user: load their saved data automatically
// Povratni korisnik: automatski učitajte njihove spremljene podatke
displayCarbonUsage(storedApiKey, storedRegion);
results.style.display = 'none';
form.style.display = 'none';
@ -105,49 +208,72 @@ function init() {
function reset(e) {
e.preventDefault();
// Clear stored region to allow user to choose a new location
// Očistite pohranjenu regiju kako biste korisniku omogućili odabir nove lokacije
localStorage.removeItem('regionName');
// Restart the initialization process
// Ponovno pokrenite proces inicijalizacije
init();
}
```
**Razlaganje onoga što se ovdje događa:**
- **Dohvaća**pohranjeni API ključ i regiju iz lokalne pohrane preglednika
- **Provjerava** je li ovo prvi put da korisnik koristi proširenje (nema pohranjenih podataka) ili se radi o povratnom korisniku
**Analiza onoga što se događa:**
- **Dohvaća**spremljeni API ključ i regiju iz lokalne pohrane preglednika
- **Provjerava** je li korisnik prvi put (nema spremljenih podataka) ili vraćajući se
- **Prikazuje** obrazac za postavljanje za nove korisnike i skriva ostale elemente sučelja
- **Automatski učitava** spremljene podatke za povratne korisnike i prikazuje opciju za resetiranje
- **Automatski učitava** spremljene podatke za vraćajuće korisnike i prikazuje opciju resetiranja
- **Upravlja** stanjem korisničkog sučelja na temelju dostupnih podataka
**Ključni koncepti o lokalnoj pohrani:**
- **Čuva** podatke između sesija preglednika (za razliku od sesijske pohrane)
**Ključni pojmovi o lokalnoj pohrani:**
- **Trajno pohranjuje** podatke između sesija preglednika (za razliku od sessionStorage)
- **Pohranjuje** podatke kao parove ključ-vrijednost koristeći `getItem()` i `setItem()`
- **Vraća**`null`kada ne postoje podaci za određeni ključ
- **Pruža** jednostavan način za pamćenje korisničkih preferencija i postavki
- **Vraća**`null`ako nema podataka za određeni ključ
- **Pruža** jednostavan način za pamćenje korisničkih postavki i preferencija
> 💡 **Razumijevanje pohrane u pregledniku**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) je poput davanja vašem proširenju trajne memorije. Zamislite kako je drevna Aleksandrijska knjižnica pohranjivala svitke - informacije su ostale dostupne čak i kad su se učenjaci vraćali.
> 💡 **Razumijevanje pohrane u pregledniku**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) je poput davanja tvom proširenju trajne memorije. Razmisli kako je drevna Aleksandrijska knjižnica pohranjivala svitke – informacije su ostajale dostupne čak i kad su znanstvenici odlazili i vraćali se.
>
> **Ključne karakteristike:**
> **Ključne značajke:**
> - **Čuva** podatke čak i nakon zatvaranja preglednika
> - **Preživljava** ponovno pokretanje računala i padove preglednika
> - **Pruža** značajan prostor za pohranu korisničkih preferencija
> - **Omogućuje** trenutni pristup bez kašnjenja mreže
> **Važna napomena**: Vaše proširenje za preglednik ima vlastitu izoliranu lokalnu pohranu koja je odvojena od uobičajenih web stranica. To pruža sigurnost i sprječava sukobe s drugim web stranicama.
Svoje pohranjene podatke možete pregledati otvaranjem Alata za razvoj preglednika (F12), navigacijom na karticu **Application** i proširivanjem odjeljka **Local Storage**.
> - **Preživljava** restart računala i padove preglednika
> - **Pruža** značajan prostor za pohranu korisničkih postavki
> - **Nudi** trenutačni pristup bez mrežnih kašnjenja
> **Važna napomena**: Tvoje proširenje preglednika ima vlastitu izoliranu lokalnu pohranu koja je odvojena od redovnih web stranica. To pruža sigurnost i sprječava sukobe s drugim web-lokacijama.
Možeš pogledati svoje pohranjene podatke otvaranjemalatčkih razvojnih alata u pregledniku (F12), navigiraj do kartice **Application** i proširi odjeljak **Local Storage**.
```mermaid
stateDiagram-v2
[*] --> CheckStorage: Proširenje počinje
CheckStorage --> FirstTime: Nema pohranjenih podataka
CheckStorage --> Returning: Pronađeni podaci
FirstTime --> ShowForm: Prikaži obrazac za postavljanje
ShowForm --> UserInput: Korisnik unosi podatke
UserInput --> SaveData: Spremi u localStorage
SaveData --> FetchAPI: Dohvati podatke o ugljiku
Returning --> LoadData: Učitaj iz localStorage
LoadData --> FetchAPI: Dohvati podatke o ugljiku
FetchAPI --> ShowResults: Prikaži podatke
ShowResults --> UserAction: Korisnik reagira
UserAction --> Reset: Kliknut gumb za resetiranje
UserAction --> ShowResults: Pregledaj podatke
Reset --> ClearStorage: Ukloni pohranjene podatke
ClearStorage --> FirstTime: Povratak na postavljanje
```
> ⚠️ **Sigurnosno razmatranje**: U produkcijskim aplikacijama, pohrana API ključeva u LocalStorage predstavlja sigurnosne rizike jer JavaScript može pristupiti tim podacima. Za potrebe učenja, ovaj pristup je u redu, ali stvarne aplikacije trebaju koristiti sigurnu pohranu na strani servera za osjetljive podatke.
> ⚠️ **Sigurnosna napomena**: U proizvodnim aplikacijama pohranjivanje API ključeva u LocalStorage predstavlja sigurnosni rizik jer JavaScript može pristupiti tim podacima. Za svrhe učenja je ovaj pristup dobar, ali prave aplikacije trebaju koristiti sigurnu pohranu na strani servera za osjetljive vjerodajnice.
## Obrada slanja obrasca
## Obradi podnošenje obrasca
Sada ćemo obraditi što se događa kada netko pošalje vaš obrazac. Po defaultu, preglednici ponovno učitavaju stranicu kada se obrasci pošalju, ali mi ćemo presresti ovo ponašanje kako bismo stvorili glatko iskustvo.
Sada ćemo obraditi što se događa kad netko podnese tvoj obrazac. Zadano, preglednici ponovno učitavaju stranicu pri podnošenju obrasca, ali mi ćemo presresti to ponašanje za glatkije iskustvo.
Ovaj pristup odražava način na koji kontrola misije obrađuje komunikaciju sa svemirskim letjelicama - umjesto da resetira cijeli sustav za svaku transmisiju, održavaju kontinuirani rad dok obrađuju nove informacije.
Ovaj pristup sliči načinu na koji kontrola misije upravlja komunikacijama s letjelicama – umjesto da resetiraju cijeli sustav za svaki prijenos, održavaju kontinuirani rad dok obrađuju nove informacije.
Kreirajte funkciju koja hvata događaj slanja obrasca i izvlači korisnički unos:
Kreiraj funkciju koja hvata događaj podnošenja obrasca i izvlači unos korisnika:
```javascript
function handleSubmit(e) {
@ -156,93 +282,148 @@ function handleSubmit(e) {
}
```
**U gore navedenom, mi smo:**
- **Spriječili**defaultno ponašanje slanja obrasca koje bi osvježilo stranicu
- **Izvukli** vrijednosti korisničkog unosa iz polja za API ključ i regiju
- **Proslijedili** podatke obrasca funkciji`setUpUser()` za obradu
- **Održali** ponašanje aplikacije na jednoj stranici izbjegavajući ponovno učitavanje stranice
**U gornjem smo kodu:**
- **Spriječili**zadano ponašanje podnošenja obrasca koje bi osvježilo stranicu
- **Izvukli** vrijednosti unosa korisnika iz polja za API ključ i regiju
- **Proslijedili** podatke obrasca u funkciju`setUpUser()` za obradu
- **Održavamo** ponašanje jedne stranice time što izbjegavamo ponovno učitavanje
✅ Zapamtite da vaša polja obrasca HTML-a uključuju atribut `required`, tako da preglednik automatski provjerava da korisnici unesu i API ključ i regiju prije nego što ova funkcija bude pokrenuta.
✅ Sjeti se da su tvoja HTML polja obrasca označena atributom `required`, pa preglednik automatski provjerava postoji li unos API ključa i regije prije nego što ova funkcija radi.
## Postavljanje korisničkih preferencija
## Postavi korisničke postavke
Funkcija `setUpUser` odgovorna je za spremanje korisničkih vjerodajnica i pokretanje prvog API poziva. Ovo stvara glatki prijelaz od postavljanja do prikazivanja rezultata.
Funkcija `setUpUser`je odgovorna za spremanje korisničkih vjerodajnica i pokretanje prvog poziva API-ja. Time se stvara gladak prijelaz od postavljanja do prikaza rezultata.
```javascript
function setUpUser(apiKey, regionName) {
// Save user credentials for future sessions
// Spremi korisničke vjerodajnice za buduće sesije
localStorage.setItem('apiKey', apiKey);
localStorage.setItem('regionName', regionName);
// Update UI to show loading state
// Ažuriraj sučelje da prikaže stanje učitavanja
loading.style.display = 'block';
errors.textContent = '';
clearBtn.style.display = 'block';
// Fetch carbon usage data with user's credentials
// Dohvati podatke o potrošnji ugljika s korisničkim vjerodajnicama
displayCarbonUsage(apiKey, regionName);
}
```
**Korak po korak, evo što se događa:**
- **Spremanje** API ključa i naziva regije u lokalnu pohranu za buduću upotrebu
- **Prikazivanje** indikatora učitavanja kako bi se korisnici obavijestili da se podaci dohvaćaju
- **Brisanje** svih prethodnih poruka o pogreškama s prikaza
- **Otkrivanje** gumba za brisanje kako bi korisnici kasnije mogli resetirati svoje postavke
- **Pokretanje** API poziva za dohvaćanje stvarnih podataka o ugljičnoj potrošnji
**Korak po korak što se događa:**
- **Spremi** API ključ i naziv regije u lokalnu pohranu za buduću uporabu
- **Prikaži** indikator učitavanja da korisnici znaju da se podaci dohvaćaju
- **Očisti** prethodne poruke o pogrešci s prikaza
- **Pokaži** gumb za čišćenje da korisnici kasnije mogu resetirati postavke
- **Pokreni** poziv API-ja za dohvaćanje stvarnih podataka o potrošnji ugljika
Ova funkcija stvara besprijekorno korisničko iskustvo upravljanjem i pohranom podataka i ažuriranjem korisničkog sučelja u jednoj koordiniranoj akciji.
Ova funkcija stvara besprijekorno korisničko iskustvo upravljajući podatcima i ažuriranjima sučelja u jednoj usklađenoj akciji.
## Prikaz podataka o ugljičnoj potrošnji
## Prikaz podataka o potrošnji ugljika
Sada ćemo povezati vaše proširenje s vanjskim izvorima podataka putem API-ja. Ovo transformira vaše proširenje iz samostalnog alata u nešto što može pristupiti informacijama u stvarnom vremenu s interneta.
Sada ćemo povezati tvoje proširenje s vanjskim izvorima podataka putem API-ja. Time tvoje proširenje postaje alat koji može pristupati informacijama u stvarnom vremenu širom interneta.
**Razumijevanje API-ja**
[API-ji](https://www.webopedia.com/TERM/A/API.html) su način na koji različite aplikacije međusobno komuniciraju. Zamislite ih kao telegrafski sustav koji je povezivao udaljene gradove u 19. stoljeću - operateri su slali zahtjeve udaljenim stanicama i primali odgovore s traženim informacijama. Svaki put kad provjeravate društvene mreže, postavljate pitanje glasovnom asistentu ili koristite aplikaciju za dostavu, API-ji omogućuju te razmjene podataka.
**Ključni koncepti o REST API-jima:**
- **REST** označava 'Representational State Transfer'
[API-ji](https://www.webopedia.com/TERM/A/API.html) su način na koji različite aplikacije međusobno komuniciraju. Zamislimo ih kao telegraf koji je spajao udaljene gradove u 19. stoljeću – operateri su slali zahtjeve udaljenim stanicama i primali odgovore s traženim informacijama. Svaki put kad provjeravaš društvene mreže, postaviš pitanje glasovnom asistentu ili koristiš aplikaciju za dostavu, API-ji olakšavaju te razmjene podataka.
```mermaid
flowchart TD
A[Vaš Ekstenzija] --> B[HTTP Zahtjev]
B --> C[CO2 Signal API]
C --> D{Valjan Zahtjev?}
D -->|Da| E[Upit Bazi Podataka]
D -->|Ne| F[Vratiti Pogrešku]
E --> G[Podaci o Ugljiku]
G --> H[JSON Odgovor]
H --> I[Vaš Ekstenzija]
F --> I
I --> J[Ažuriraj UI]
subgraph "API Zahtjev"
K[Zaglavlja: auth-token]
L[Parametri: countryCode]
M[Metoda: GET]
end
subgraph "API Odgovor"
N[Intenzitet Ugljika]
O[Postotak Fosilnog Goriva]
P[Vremenska Oznaka]
end
style C fill:#e8f5e8
style G fill:#fff3e0
style I fill:#e1f5fe
```
**Ključni pojmovi o REST API-jima:**
- **REST** znači 'Representational State Transfer' (prijenos reprezentacijskog stanja)
- **Koristi** standardne HTTP metode (GET, POST, PUT, DELETE) za interakciju s podacima
- **Vraća** podatke u predvidljivim formatima, obično JSON
- **Pruža** dosljedne URL-based krajnje točke za različite vrste zahtjeva
- **Vraća** podatke u predvidivim formatima, obično JSON
- **Pruža** dosljedne URL krajnje točke za različite vrste zahtjeva
✅ [CO2 Signal API](https://www.co2signal.com/) koji ćemo koristiti pruža podatke o ugljičnoj intenzivnosti električnih mreža širom svijeta u stvarnom vremenu. Ovo pomaže korisnicima razumjeti utjecaj njihove potrošnje električne energije na okoliš!
✅ [CO2 Signal API](https://www.co2signal.com/) koji ćemo koristiti pruža podatke o intenzitetu ugljika u stvarnom vremenu iz elektroenergetskih mreža širom svijeta. To pomaže korisnicima razumjeti utjecaj njihove potrošnje električne energije na okoliš!
> 💡 **Razumijevanje asinkronog JavaScripta**: Ključna riječ [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) omogućuje vašem kodu da istovremeno obrađuje više operacija. Kada zatražite podatke od servera, ne želite da cijelo proširenje zamrzne - to bi bilo kao da kontrola zračnog prometa zaustavi sve operacije dok čeka odgovor jednog aviona.
> 💡 **Razumijevanje asinhronog JavaScripta**: [`async` ključna riječ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) omogućuje tvom kodu da istovremeno obrađuje više operacija. Kad zatražiš podatke s poslužitelja, ne želiš da se cijelo proširenje zamrzne – to bi bilo kao da zračni promet kontrola prestaje dok čekaju odgovor jednog aviona.
>
> **Ključne prednosti:**
> - **Održava** responzivnost proširenja dok se podaci učitavaju
> - **Omogućuje** nastavak izvršavanja drugog koda tijekom mrežnih zahtjeva
> - **Poboljšava** čitljivost koda u usporedbi s tradicionalnim obrascima povratnih poziva
> - **Omogućuje** graciozno rukovanje pogreškama u mreži
> - **Održava**odzivnost proširenja dok se podaci učitavaju
> - **Dopušta** izvršavanje drugih dijelova koda tijekom mrežnih zahtjeva
> - **Poboljšava** čitljivost koda u odnosu na tradicionalne obrasce pozivanja (callback)
> - **Omogućuje**elegantno upravljanje pogreškama kod mrežnih problema
Evo kratkog videa o `async`:
Evo kratki video o `async`:
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async i Await za upravljanje obećanjima")
> 🎥 Kliknite na sliku iznad za video o async/await.
Kreirajte funkciju za dohvaćanje i prikaz podataka o ugljičnoj potrošnji:
> 🎥 Klikni na gornju sliku za video o async/await.
### 🔄 **Pedagoški pregled**
**Razumijevanje asinkronog programiranja**: Prije nego što se uhvatiš za API funkciju, provjeri razumiješ li:
- ✅ Zašto koristimo `async/await` umjesto blokiranja cijelog proširenja
- ✅ Kako blokovi `try/catch` elegantno obrađuju mrežne pogreške
- ✅ Razliku između sinkronih i asinkronih operacija
- ✅ Zašto pozivi API-ja mogu ne uspjeti i kako te pogreške obraditi
**Povezivanje sa stvarnim svijetom**: Razmisli o ovim svakodnevnim asinhronim primjerima:
- **Naručivanje hrane**: Ne stojiš kraj kuhinje – dobiješ račun i radiš druge stvari
- **Slanje e-pošte**: Aplikacija ne zamrzava dok šalje – možeš pisati nove poruke
- **Učitavanje web stranica**: Slike se postupno učitavaju dok već možeš čitati tekst
**Tijek provjere autentičnosti API-ja**:
```mermaid
sequenceDiagram
participant Ext as Ekstenzija
participant API as CO2 Signal API
participant DB as Baza podataka
Ext->>API: Zahtjev sa auth-token
API->>API: Provjeri token
API->>DB: Upit za podatke o ugljiku
DB->>API: Vrati podatke
API->>Ext: JSON odgovor
Ext->>Ext: Ažuriraj UI
```
Kreiraj funkciju za dohvat i prikaz podataka o potrošnji ugljika:
```javascript
// Modern fetch API approach (no external dependencies needed)
// Moderan pristup s fetch API-jem (nije potrebna vanjska ovisnost)
async function displayCarbonUsage(apiKey, region) {
try {
// Fetch carbon intensity data from CO2 Signal API
// Dohvati podatke o ugljičnoj intenziteti s CO2 Signal API-ja
- **Literalni predlošci** s `${}` sintaksom za čisto formatiranje stringova
- **Rukovanje pogreškama** s try/catch blokovima za robusne aplikacije
- **Async/await** obrazac za graciozno rukovanje mrežnim zahtjevima
- **Destrukturiranje objekata** za izdvajanje specifičnih podataka iz odgovora API-ja
- **Lančanje metoda** za višestruke manipulacije DOM-om
✅ Ova funkcija demonstrira nekoliko važnih koncepata web razvoja - komunikaciju s vanjskim serverima, rukovanje autentifikacijom, obradu podataka, ažuriranje sučelja i graciozno rukovanje pogreškama. Ovo su temeljne vještine koje profesionalni programeri redovito koriste.
🎉 **Što ste postigli:** Kreirali ste proširenje za preglednik koje:
- **Povezuje** se s internetom i dohvaća stvarne podatke o okolišu
- **Čuva** korisničke postavke između sesija
- **Rukuje** pogreškama graciozno umjesto da se ruši
Testirajte svoj rad pokretanjem `npm run build` i osvježavanjem vašeg proširenja u pregledniku. Sada imate funkcionalni alat za praćenje ugljičnog otiska. Sljedeća lekcija će dodati funkcionalnost dinamičnih ikona kako bi se proširenje dovršilo.
- **Async/await** obrazac za elegantno upravljanje mrežnim zahtjevima
- **Destrukturiranje objekata** za izdvajanje specifičnih podataka iz API odgovora
- **Chaining metoda** za više manipulacija DOM-om
✅ Ova funkcija ilustrira nekoliko važnih koncepata web razvoja – komunikaciju s vanjskim poslužiteljima, upravljanje autentifikacijom, obradu podataka, ažuriranje sučelja i elegantno upravljanje pogreškama. To su temeljne vještine koje profesionalni programeri redovito koriste.
```mermaid
flowchart TD
A[Pokreni API Poziv] --> B[Preuzmi Zahtjev]
B --> C{Uspjeh Mreže?}
C -->|Ne| D[Greška mreže]
C -->|Da| E{Odgovor OK?}
E -->|Ne| F[API Greška]
E -->|Da| G[Parsiranje JSON-a]
G --> H{Ispravni Podaci?}
H -->|Ne| I[Greška Podataka]
H -->|Da| J[Ažuriraj UI]
D --> K[Prikaži Poruku o Grešci]
F --> K
I --> K
J --> L[Sakrij Učitavanje]
K --> L
style A fill:#e1f5fe
style J fill:#e8f5e8
style K fill:#ffebee
style L fill:#f3e5f5
```
### 🔄 **Pedagoški pregled**
**Potpuno razumijevanje sustava**: Provjeri svoje znanje o cijelom tijeku:
- ✅ Kako DOM reference omogućuju JavaScriptu kontrolu sučelja
- ✅ Zašto lokalna pohrana omogućuje trajnost između sesija preglednika
- ✅ Kako async/await pozivi API-ja rade bez zamrzavanja proširenja
- ✅ Što se događa kad pozivi API-ja zakažu i kako se greške obrađuju
- ✅ Zašto korisničko iskustvo uključuje stanje učitavanja i poruke o pogreškama
🎉 **Što si postigao:** Napravio si proširenje preglednika koje:
- **Povezuje** se na internet i dohvaća stvarne podatke o okolišu
- **Pamti** korisničke postavke između sesija
- **Rukuje** greškama elegantno umjesto da pada
- **Pruža** glatko i profesionalno korisničko iskustvo
Testiraj svoj rad pokretanjem `npm run build` i osvježi proširenje u pregledniku. Sada imaš funkcionalni tracker ugljičnog otiska. Sljedeća lekcija dodaje dinamičnu funkcionalnost ikone za dovršetak proširenja.
---
## Izazov GitHub Copilot Agent 🚀
Koristite Agent način rada za dovršavanje sljedećeg izazova:
## Izazov GitHub Copilot agenta 🚀
**Opis:** Poboljšajte proširenje za preglednik dodavanjem poboljšanja u rukovanju pogreškama i značajki korisničkog iskustva. Ovaj izazov pomoći će vam da vježbate rad s API-jima, lokalnom pohranom i manipulacijom DOM-a koristeći moderne JavaScript obrasce.
Iskoristi Agent mod za dovršetak sljedećeg izazova:
**Opis:** Poboljšajte proširenje za preglednik dodavanjem poboljšanja u obradi pogrešaka i značajki za korisničko iskustvo. Ovaj izazov će vam pomoći da uvježbate rad s API-jima, lokalnim spremištem i manipulacijom DOM-om koristeći moderne JavaScript obrasce.
**Zadatak:** Kreirajte poboljšanu verziju funkcije displayCarbonUsage koja uključuje: 1) Mehanizam ponovnog pokušaja za neuspjele API pozive s eksponencijalnim odgodama, 2) Validaciju unosa za kod regije prije nego što se izvrši API poziv, 3) Animaciju učitavanja s indikatorima napretka, 4) Predmemoriranje odgovora API-ja u lokalnoj pohrani s vremenskim oznakama isteka (predmemorija na 30 minuta), i 5) Značajku za prikaz povijesnih podataka iz prethodnih API poziva. Također dodajte odgovarajuće JSDoc komentare u stilu TypeScript-a za dokumentiranje svih parametara funkcije i tipova povratnih vrijednosti.
**Zadatak:** Napravite poboljšanu verziju funkcije displayCarbonUsage koja uključuje: 1) mehanizam ponovnog pokušaja za neuspjele pozive API-ja s eksponencijalnim vraćanjem unazad, 2) provjeru valjanosti unosa za kod regije prije poziva API-ja, 3) animaciju učitavanja s pokazivačima napretka, 4) keširanje odgovora API-ja u localStorage s vremenskim oznakama isteka (keširajte 30 minuta) i 5) značajku za prikaz povijesnih podataka iz prethodnih poziva API-ja. Također dodajte odgovarajuće JSDoc komentare u TypeScript stilu za dokumentiranje svih parametara funkcije i tipova povratka.
Saznajte više o [Agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov
Proširite svoje razumijevanje API-ja istraživanjem bogatstva API-ja preglednika dostupnih za web razvoj. Odaberite jedan od ovih API-ja preglednika i izradite malu demonstraciju:
U ovoj lekciji ste naučili o LocalStorage i API-ima, oba vrlo korisna za profesionalnog web programera. Možete li razmisliti o tome kako ove dvije stvari rade zajedno? Razmislite o tome kako biste osmislili web stranicu koja bi pohranjivala stavke koje će koristiti API.
Proširite svoje razumijevanje API-ja istraživanjem bogatstva API-ja dostupnih u pregledniku za razvoj weba. Izaberite jedan od ovih pregledničkih API-ja i napravite malu demonstraciju:
- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - Moderna alternativa XMLHttpRequest-u
**Istraživačka pitanja za razmatranje:**
- Koje stvarne probleme ovaj API rješava?
- Kako API rukuje pogreškama i rubnim slučajevima?
- Koje sigurnosne aspekte treba imati na umu pri korištenju ovog API-ja?
- Koliko je široko podržan ovaj API na različitim preglednicima?
Nakon istraživanja, identificirajte koje karakteristike API čine prijateljskim za developere i pouzdanim.
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/26)
## Pregled i samostalno učenje
Naučili ste o LocalStorage i API-jima u ovoj lekciji, oba vrlo korisna za profesionalnog web developera. Možete li razmisliti o tome kako te dvije stvari funkcioniraju zajedno? Razmislite kako biste arhitektonski postavili web stranicu koja pohranjuje stavke za korištenje API-jem.
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite karticu Application u DevTools i istražite localStorage na bilo kojoj web stranici
- [ ] Napravite jednostavan HTML obrazac i testirajte validaciju obrasca u pregledniku
- [ ] Isprobajte pohranu i dohvat podataka koristeći localStorage u konzoli preglednika
- [ ] Pregledajte podatke obrasca koji se šalju koristeći karticu Network
### 🎯 **Što možete postići u ovom satu**
- [ ] Završite kviz nakon lekcije i razumite koncepte rukovanja obrascima
- [ ] Izradite obrazac za proširenje preglednika koji sprema korisničke postavke
- [ ] Implementirajte validaciju obrasca na strani klijenta s korisnim porukama o pogreškama
- [ ] Vježbajte korištenje chrome.storage API-ja za trajnost podataka proširenja
- [ ] Izradite korisničko sučelje koje reagira na spremljene korisničke postavke
### 📅 **Vaša tjedna gradnja proširenja**
- [ ] Završite proširenje za preglednik s punom funkcionalnošću obrasca
- [ ] Ovladajte različitim opcijama spremišta: local, sync i session storage
- [ ] Implementirajte napredne značajke obrasca poput automatskog dovršavanja i validacije
- [ ] Dodajte funkcionalnost uvoza/izvoza korisničkih podataka
- [ ] Temeljito testirajte proširenje na različitim preglednicima
- [ ] Doradite korisničko iskustvo i obradu pogrešaka proširenja
### 🌟 **Vaša mjesečna stručnost u web API-jima**
- [ ] Izradite složene aplikacije koristeći razne API-je za pohranu u pregledniku
- [ ] Naučite o offline-first razvojnom pristupu
- [ ] Doprinesite open source projektima vezanim uz trajnost podataka
- [ ] Ovladajte razvojem usmjerenim na privatnost i usklađenošću s GDPR-om
- [ ] Izradite ponovo upotrebljive biblioteke za rukovanje obrascima i upravljanje podacima
- [ ] Dijelite znanja o web API-jima i razvoju proširenja
## 🎯 Vaš vremenski plan za ovladavanje razvojem proširenja
```mermaid
timeline
title Napredak u učenju integracije API-ja i pohrane
section Osnove DOM-a (15 minuta)
Reference elemenata: ovladavanje querySelector-om
: Postavljanje event listener-a
: Osnove upravljanja stanjem
section Lokalna pohrana (20 minuta)
Trajnost podataka: Pohrana ključ-vrijednost
: Upravljanje sesijom
: Rukovanje korisničkim preferencijama
: Alati za pregled pohrane
section Rukovanje formularima (25 minuta)
Korisnički unos: Validacija formulara
: Sprječavanje događaja
: Ekstrakcija podataka
: Prijelazi stanja sučelja
section Integracija API-ja (35 minuta)
Vanjska komunikacija: HTTP zahtjevi
: Obrasci autentifikacije
: Parsiranje JSON podataka
: Obrada odgovora
section Asinkrono programiranje (40 minuta)
Moderni JavaScript: Rukovanje Promise-ima
: Obrasci async/await
: Upravljanje greškama
: Operacije bez blokiranja
section Rukovanje greškama (30 minuta)
Robusne aplikacije: Try/catch blokovi
: Poruke prilagođene korisniku
: Pristojno degradiranje
: Tehnike otklanjanja pogrešaka
section Napredni obrasci (1 tjedan)
Profesionalni razvoj: Strategije keširanja
: Ograničavanje brzine
: Mehanizmi ponovnog pokušaja
: Optimizacija performansi
section Vještine za produkciju (1 mjesec)
Značajke za poduzeća: Najbolje sigurnosne prakse
: Verzije API-ja
: Praćenje i zapisivanje
: Skalabilna arhitektura
```
### 🛠️ Sažetak vašeg kompletnog alata za Full-Stack razvoj
Nakon završetka ove lekcije, sada imate:
- **Ovladavanje DOM-om**: Precizno ciljanje i manipulacija elementima
- **Stručnost u pohrani podataka**: Upravljanje trajnim podacima pomoću localStorage
- **Integracija s API-jem**: Dohvat podataka u stvarnom vremenu i autentikacija
- **Asinkrono programiranje**: Neprekidne operacije s modernim JavaScriptom
- **Rukovanje pogreškama**: Robusne aplikacije koje elegantno rješavaju neuspjehe
- **Korisničko iskustvo**: Stanja učitavanja, validacija i glatke interakcije
- **Moderni obrasci**: fetch API, async/await, i značajke ES6+
**Profesionalne vještine koje ste stekli**: Implementirali ste obrasce korištene u:
- **Web aplikacijama**: Jednostanične aplikacije s vanjskim izvorima podataka
- **Mobilnom razvoju**: API-pokretane aplikacije s offline mogućnostima
- **Desktop softveru**: Electron aplikacije s trajnom pohranom
- **Enterprise sustavima**: Autentikacija, keširanje i obrada pogrešaka
- **Modernim okvirima**: Obrasci upravljanja podacima u React/Vue/Angular
**Sljedeća razina**: Spremni ste istražiti napredne teme poput strategija keširanja, WebSocket veza u stvarnom vremenu ili složenog upravljanja stanjem!
## Zadatak
[Usvojite API](assignment.md)
[Usvoji API](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden pomoću AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
# Projekt proširenja preglednika, dio 3: Naučite o pozadinskim zadacima i performansama
Jeste li se ikada pitali zašto neka proširenja preglednika djeluju brzo i responzivno, dok druga izgledaju sporo? Tajna leži u onome što se događa iza kulisa. Dok korisnici klikaju po sučelju vašeg proširenja, cijeli svijet pozadinskih procesa tiho upravlja dohvaćanjem podataka, ažuriranjem ikona i sustavnim resursima.
# Projekt ekstenzije za preglednik dio 3: Naučite o Pozadinskim Zadatcima i Performansama
```mermaid
journey
title Vaše putovanje optimizacijom performansi
section Osnove
Nauči alate preglednika: 3: Student
Razumijevanje profiliranja: 4: Student
Identificiraj uska grla: 4: Student
section Proširene značajke
Izgradi sustav boja: 4: Student
Kreiraj pozadinske zadatke: 5: Student
Ažuriraj ikone dinamički: 5: Student
section Optimizacija
Nadziranje performansi: 5: Student
Otkloni pogreške: 4: Student
Poliraj iskustvo: 5: Student
```
Jeste li se ikada pitali što čini da neke ekstenzije za preglednik djeluju brzo i responzivno, dok druge djeluju sporo? Tajna leži u onome što se događa iza scene. Dok korisnici klikaju po sučelju vaše ekstenzije, postoji cijeli svijet pozadinskih procesa koji tiho upravljaju dohvaćanjem podataka, ažuriranjem ikona i sistemskim resursima.
Ovo je naša posljednja lekcija u seriji o proširenjima preglednika, i pobrinut ćemo se da vaš tracker ugljičnog otiska radi glatko. Dodati ćete dinamična ažuriranja ikona i naučiti kako uočiti probleme s performansama prije nego što postanu ozbiljni. To je poput podešavanja trkaćeg automobila - male optimizacije mogu napraviti ogromnu razliku u tome kako sve funkcionira.
Ovo je naša posljednja lekcija u seriji ekstenzija za preglednik, i napravit ćemo da vaš pratitelj ugljičnog otiska radi glatko. Dodati ćete dinamička ažuriranja ikona i naučiti kako prepoznati probleme s performansama prije nego što postanu problem. Kao da ugađate trkaći automobil – male optimizacije mogu napraviti veliku razliku u radu svega.
Do kraja ove lekcije imat ćete uglađeno proširenje i razumjeti principe performansi koji razlikuju dobre web aplikacije od izvrsnih. Zaronimo u svijet optimizacije preglednika.
Do kraja ćete imati dotjeranu ekstenziju i razumjeti principe performansi koji dijele dobre web aplikacije od odličnih. Idemo zaroniti u svijet optimizacije preglednika.
U našim prethodnim lekcijama izradili ste obrazac, povezali ga s API-jem i bavili se asinkronim dohvaćanjem podataka. Vaše proširenje se lijepo oblikuje.
Sada trebamo dodati završne detalje - poput promjene boje ikone proširenja na temelju podataka o ugljiku. To me podsjeća na način na koji je NASA morala optimizirati svaki sustav na svemirskom brodu Apollo. Nisu si mogli priuštiti nikakvo rasipanje ciklusa ili memorije jer su životi ovisili o performansama. Iako naše proširenje za preglednik nije toliko kritično, isti principi vrijede - učinkovit kod stvara bolje korisničko iskustvo.
U prethodnim lekcijama ste napravili obrazac, povezali ga s API-em i savladali asinkrono dohvaćanje podataka. Vaša ekstenzija lijepo poprima oblik.
Sad trebamo dodati završne detalje - poput promjene boje ikone ekstenzije na temelju podataka o ugljiku. Ovo me podsjeća kako je NASA morala optimizirati svaki sustav na Apollovom svemirskom brodu. Nisu si mogli priuštiti izgubljene cikluse ili memoriju jer su životi ovisili o performansama. Iako naša ekstenzija za preglednik nije toliko kritična, isti principi vrijede - učinkovit kod stvara bolje korisničko iskustvo.
```mermaid
mindmap
root((Performanse i Pozadinski Zadaci))
Browser Performance
Rendering Pipeline
Optimizacija Resursa
Manipulacija DOM-om
Izvršavanje JavaScripta
Profiling Tools
Alati za Programere
Kartica za Performanse
Analiza Vremenske Linije
Otkrivanje Uska Grla
Extension Architecture
Pozadinski Skripti
Skripti Sadržaja
Prosljeđivanje Poruka
Upravljanje Ikonama
Optimization Strategies
Dijeljenje Koda
Leni Učitavanje
Keširanje
Kompresija Resursa
Visual Feedback
Dinamičke Ikone
Kodiranje Bojama
Ažuriranja u Stvarnom Vremenu
Korisničko Iskustvo
```
## Osnove web performansi
Kada vaš kod radi učinkovito, ljudi to mogu *osjetiti*. Znate onaj trenutak kada se stranica učita trenutno ili animacija teče glatko? To su dobre performanse na djelu.
Performanse nisu samo brzina - radi se o stvaranju web iskustava koja se osjećaju prirodno, umjesto nespretno i frustrirajuće. U ranim danima računalstva, Grace Hopper je poznato držala nanosekundu (komad žice dug oko 30 cm) na svom stolu kako bi pokazala koliko daleko svjetlost putuje u jednoj milijardinki sekunde. To je bio njezin način objašnjavanja zašto svaki mikrosekund u računalstvu ima značaj. Istražimo alate za detekciju koji vam pomažu otkriti što usporava stvari.
> "Performanse web stranice ovise o dvije stvari: koliko brzo se stranica učitava i koliko brzo kod na njoj radi." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Tema kako učiniti vaše web stranice nevjerojatno brzim na svim vrstama uređaja, za sve vrste korisnika, u svim vrstama situacija, nije iznenađujuće opsežna. Evo nekoliko točaka koje treba imati na umu dok gradite standardni web projekt ili proširenje za preglednik.
Prvi korak u optimizaciji vaše stranice je razumijevanje onoga što se zapravo događa "ispod haube". Srećom, vaš preglednik dolazi s moćnim alatima za detekciju ugrađenim.
Da biste otvorili Alate za razvoj u Edgeu, kliknite na tri točke u gornjem desnom kutu, zatim idite na Više alata > Alati za razvoj. Ili koristite prečac na tipkovnici: `Ctrl` + `Shift` + `I` na Windowsu ili `Option` + `Command` + `I` na Macu. Kada ste tamo, kliknite na karticu Performanse - tu ćete provoditi svoje istraživanje.
Kad vaš kod radi učinkovito, ljudi to zapravo *osjete*. Znate onaj trenutak kada se stranica učitava odmah ili animacija glatko prikazuje? To su dobre performanse na djelu.
Performanse nisu samo brzina - radi se o stvaranju web iskustava koja se osjećaju prirodno, a ne nespretno i frustrirajuće. Još u ranim danima računarstva, Grace Hopper je poznato držala nanosekundu (komad žice dug oko stopu) na svom stolu kako bi pokazala koliko svjetlost putuje u jednoj milijardinki sekunde. Bio je to njen način objašnjenja zašto je svaki mikrosekund bitan u računarstvu. Istražimo alate detektiva koji vam pomažu da otkrijete što usporava stvari.
> "Performanse web stranice se sastoje od dva čimbenika: koliko brzo se stranica učita i koliko brzo kod na njoj radi." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Tema kako napraviti vaše web stranice izrazito brzim na svim vrstama uređaja, za sve vrste korisnika, u svim situacijama, nije iznenađujuće vrlo široka. Evo nekoliko točaka za pamćenje dok gradite standardni web projekt ili ekstenziju za preglednik.
Prvi korak u optimizaciji vaše stranice je razumjeti što se zapravo događa pod kapom motora. Srećom, vaš preglednik dolazi s moćnim alatima detektiva ugrađenim izravno.
```mermaid
flowchart LR
A[HTML] --> B[Analiza]
B --> C[DOM Stablo]
D[CSS] --> E[Analiza]
E --> F[CSSOM]
G[JavaScript] --> H[Izvrši]
C --> I[Stablo za prikaz]
F --> I
H --> I
I --> J[Raspored]
J --> K[Boja]
K --> L[Slojevi]
L --> M[Prikaz]
subgraph "Kritični put renderiranja"
N["1. Analiziraj HTML"]
O["2. Analiziraj CSS"]
P["3. Izvrši JS"]
Q["4. Izgradi stablo za prikaz"]
R["5. Rasporedi elemente"]
S["6. Obojaj piksele"]
T["7. Slojevi u slojevima"]
end
style M fill:#e8f5e8
style I fill:#fff3e0
style H fill:#ffebee
```
Za otvaranje Developer Tools u Edgeu kliknite na tri točkice u gornjem desnom kutu, zatim idite na Više alata > Developer Tools. Ili koristite tipkovničku prečac: `Ctrl` + `Shift` + `I` na Windowsu ili `Option` + `Command` + `I` na Macu. Kad ste tamo, kliknite na karticu Performance - ovdje ćete raditi svoju istragu.
**Evo vašeg alata za detekciju performansi:**
- **Otvorite** Alate za razvoj (koristit ćete ih stalno kao programer!)
- **Idite** na karticu Performanse - zamislite je kao tracker za kondiciju vaše web aplikacije
- **Pritisnite** gumb za snimanje i promatrajte svoju stranicu u akciji
**Evo vašeg seta alata za detektiva performansi:**
- **Otvorite**Developer Tools (koristit ćete ih stalno kao developer!)
- **Idite** na karticu Performance - zamislite to kao fitness tracker vaše web aplikacije
- **Pritisnite** gumb Snimanje (Record) i promatrajte stranicu u akciji
- **Proučite** rezultate kako biste uočili što usporava stvari
Isprobajmo ovo. Otvorite web stranicu (Microsoft.com dobro funkcionira za ovo) i kliknite gumb 'Snimanje'. Sada osvježite stranicu i promatrajte kako profiler bilježi sve što se događa. Kada zaustavite snimanje, vidjet ćete detaljan pregled kako preglednik 'skriptira', 'renderira' i 'slika' stranicu. Podsjeća me na način na koji kontrola misije prati svaki sustav tijekom lansiranja rakete - dobivate podatke u stvarnom vremenu o tome što se točno događa i kada.
✅ [Microsoftova dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ima puno više detalja ako želite dublje istražiti.
> Savjet: Očistite predmemoriju preglednika prije testiranja kako biste vidjeli kako vaša stranica radi za posjetitelje koji je prvi put posjećuju - obično je to prilično drugačije od ponovljenih posjeta!
Odaberite elemente vremenske trake profila kako biste se približili događajima koji se događaju dok se vaša stranica učitava.
Dobijte snimku performansi vaše stranice odabirom dijela vremenske trake profila i pregledom sažetka:
Provjerite ploču dnevnika događaja kako biste vidjeli je li neki događaj trajao dulje od 15 ms:
✅ Upoznajte svoj profiler! Otvorite alate za razvoj na ovoj stranici i provjerite postoje li uska grla. Koji je resurs najsporije učitan? Koji najbrže?
## Na što obratiti pažnju prilikom profiliranja
Isprobajmo ovo. Otvorite neku web stranicu (Microsoft.com dobro funkcionira za to) i kliknite gumb 'Record'. Sada osvježite stranicu i promatrajte kako profiler bilježi sve što se događa. Kad zaustavite snimanje, vidjet ćete detaljan prikaz kako preglednik 'skriptira', 'renderira' i 'crtaju' stranicu. Podsjeća me na to kako misijski kontrolori prate svaki sustav tijekom lansiranja rakete - dobivate podatke u realnom vremenu o tome što se točno događa i kada.
✅ [Microsoft Dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ima mnogo više detalja ako želite dublje zaroniti
> Profesionalni savjet: Obrišite predmemoriju preglednika prije testiranja kako biste vidjeli kako se vaša stranica ponaša za prve posjetitelje - obično je dosta drugačije od ponovljenih posjeta!
Odaberite elemente vremenske linije profila da zumirate događaje koji se odvijaju dok se vaša stranica učitava.
Dobijte snimku performansi vaše stranice odabirom dijela vremenske linije profila i pogledajte sažetak:
✅ Upoznajte se s profilerom! Otvorite developer tools na ovoj stranici i provjerite postoje li uska grla. Koji je najsporiji resurs za učitavanje? Koji najbrži?
```mermaid
flowchart TD
A[Otvorite DevTools] --> B[Idite na karticu Performanse]
B --> C[Kliknite na gumb Snimanje]
C --> D[Izvršite radnje]
D --> E[Zaustavite snimanje]
E --> F{Analizirajte rezultate}
F --> G[Provjerite vremensku crtu]
F --> H[Pregledajte mrežu]
F --> I[Ispitajte skripte]
F --> J[Identificirajte događaje slikanja]
G --> K{Dugački zadaci?}
H --> L{Veliki resursi?}
I --> M{Blokiranje renderiranja?}
J --> N{Skupi prikazi?}
K -->|Da| O[Optimizirajte JavaScript]
L -->|Da| P[Stisnite resurse]
M -->|Da| Q[Dodajte Async/Defer]
N -->|Da| R[Pojednostavite stilove]
O --> S[Ponovno testirajte]
P --> S
Q --> S
R --> S
style A fill:#e1f5fe
style F fill:#fff3e0
style S fill:#e8f5e8
```
## Na što paziti pri profiliranju
Pokretanje profilera je tek početak - prava vještina je znati što vam ti šareni grafikoni zapravo govore. Ne brinite, brzo ćete se naviknuti na njihovo čitanje. Iskusni programeri naučili su prepoznati znakove upozorenja prije nego što postanu ozbiljni problemi.
Pokretanje profilera je tek početak – prava vještina je znati što ti šareni grafovi zapravo govore. Ne brinite, naučit ćete ih čitati. Iskusni developeri znaju prepoznati znakove upozorenja prije nego što prerastu u velike probleme.
Razgovarajmo o uobičajenim sumnjivcima - problemima s performansama koji se često uvuku u web projekte. Kao što je Marie Curie morala pažljivo pratiti razine zračenja u svom laboratoriju, mi moramo paziti na određene obrasce koji ukazuju na probleme u nastajanju. Rano otkrivanje ovih problema uštedjet će vam (i vašim korisnicima) puno frustracija.
Razgovarajmo o uobičajenim krivcima – problematičnim faktorima performansi koji se često uvuku u web projekte. Kao što je Marie Curie morala pomno pratiti razine radijacije u svom laboratoriju, mi moramo paziti na određene obrasce koji nagovještavaju probleme. Rana detekcija će vam (i vašim korisnicima) uštedjeti puno frustracije.
**Veličine resursa**: Web stranice postaju sve "teže" tijekom godina, a velik dio te dodatne težine dolazi od slika. Kao da smo počeli trpati sve više i više u naše digitalne kofere.
**Veličine resursa**: Web stranice su tijekom godina postajale "teže", a velik dio tog dodatnog tereta dolazi od slika. Kao da sve više pakiramo u naše digitalne kofere.
✅ Pogledajte [Internet Archive](https://httparchive.org/reports/page-weight) kako biste vidjeli kako su se veličine stranica povećavale tijekom vremena - prilično je zanimljivo.
✅ Pogledajte [Internet Archive](https://httparchive.org/reports/page-weight) da vidite kako su se veličine stranica povećavale tijekom vremena – vrlo je otkrivajuće.
**Evo kako optimizirati svoje resurse:**
- **Komprimirajte** slike! Moderni formati poput WebP-a mogu drastično smanjiti veličinu datoteka
- **Poslužite** odgovarajuću veličinu slike za svaki uređaj - nema potrebe slati ogromne slike za desktop na telefone
- **Minimizirajte** svoj CSS i JavaScript - svaki bajt je važan
- **Koristite** lijeno učitavanje kako bi se slike preuzimale samo kada korisnici zapravo dođu do njih
**Evo kako održavati optimizirane resurse:**
- **Kompresirajte** slike! Moderni formati poput WebP mogu značajno smanjiti veličinu datoteka
- **Poslužite**pravu veličinu slike za svaki uređaj – nema potrebe slati ogromne slike za desktop na mobitele
- **Minificirajte** vaš CSS i JavaScript – svaki bajt je bitan
- **Koristite** lijeno učitavanje (lazy loading) tako da se slike preuzimaju tek kad korisnici dođu na njih skrolanjem
**Prolazi kroz DOM**: Preglednik mora izgraditi svoj Document Object Model na temelju koda koji napišete, pa je u interesu dobre performanse stranice držati oznake minimalnim, koristeći i stilizirajući samo ono što stranica treba. Na primjer, višak CSS-a povezanog sa stranicom mogao bi se optimizirati; stilovi koji se trebaju koristiti samo na jednoj stranici ne moraju biti uključeni u glavnu stilsku datoteku.
**DOM traversali**: Preglednik mora izgraditi svoj Document Object Model na temelju koda koji pišete, pa je u interesu dobre performanse stranice zadržati HTML oznake na minimum, koristiti i stilizirati samo ono što stranica treba. U tom smislu višak CSS-a povezan s jednom stranicom mogao bi se optimizirati; stilovi potrebni samo za jednu stranicu ne trebaju se uključivati u glavni stil.
**Ključne strategije za optimizaciju DOM-a:**
- **Minimizirajte** broj HTML elemenata i razine ugniježđenja
- **Uklonite** neiskorištena pravila CSS-a i učinkovito konsolidirajte stilske datoteke
- **Organizirajte** CSS tako da učitava samo ono što je potrebno za svaku stranicu
- **Strukturirajte** HTML semantički za bolje parsiranje preglednika
- **Minimizira** broj HTML elemenata i razina ugnježđivanja
- **Uklanja** neiskorištena CSS pravila i učinkovito konsolidira stilove
- **Organizira** CSS da se učitava samo ono što je potrebno za svaku stranicu
- **Strukturira** HTML semantički za bolje parsiranje preglednika
**JavaScript**: Svaki JavaScript programer trebao bi paziti na 'skripte koje blokiraju renderiranje' koje se moraju učitati prije nego što ostatak DOM-a može biti obrađen i prikazan u pregledniku. Razmislite o korištenju `defer` s vašim inline skriptama (kao što je učinjeno u modulu Terrarium).
**JavaScript**: Svaki JavaScript developer treba paziti na skripte koje blokiraju renderiranje i moraju se učitati prije nego što se DOM može parsirati i prikazati. Razmotrite korištenje `defer` atributa kod vlastitih skripti (kao što je učinjeno u modulu Terrarium).
**Moderne tehnike optimizacije JavaScripta:**
- **Koristite** atribut `defer` za učitavanje skripti nakon parsiranja DOM-a
- **Primijenite** podjelu koda za učitavanje samo potrebnog JavaScripta
- **Koristite** lijeno učitavanje za funkcionalnosti koje nisu kritične
- **Minimizirajte** korištenje teških biblioteka i okvira kad god je to moguće
- **Koristi** `defer` atribut da se skripte učitavaju nakon parsiranja DOM-a
- **Implementira** podjelu koda (code splitting) da se učitava samo potreban JavaScript
- **Primjenjuje** lijeno učitavanje za ne-kritične funkcionalnosti
- **Minimizira** upotrebu teških biblioteka i frameworka kad je moguće
✅ Isprobajte neke stranice na [Site Speed Test website](https://www.webpagetest.org/) kako biste saznali više o uobičajenim provjerama koje se provode za određivanje performansi stranice.
✅ Isprobajte neke stranice na [Site Speed Test web stranici](https://www.webpagetest.org/) da naučite više o uobičajenim provjerama za određivanje performansi stranica.
Sada kada imate ideju o tome kako preglednik renderira resurse koje mu šaljete, pogledajmo posljednje stvari koje trebate učiniti kako biste dovršili svoje proširenje:
### 🔄 **Pedagoška provjera**
**Razumijevanje performansi**: Prije nego što počnete graditi funkcionalnosti ekstenzije, pobrinite se da možete:
- ✅ Objasniti kritičnu putanju renderiranja od HTML-a do piksela
- ✅ Prepoznati uobičajena uska grla u performansama web aplikacija
- ✅ Koristiti alate developera za profiliranje performansi stranice
- ✅ Razumjeti kako veličina resursa i složenost DOM-a utječu na brzinu
### Kreirajte funkciju za izračun boje
**Brzi samoprovjera**: Što se događa kada imate JavaScript koji blokira renderiranje?
*Odgovor: Preglednik mora preuzeti i izvršiti skriptu prije nego što može nastaviti parsiranje HTML-a i renderiranje stranice*
**Utjecaj performansi u stvarnom svijetu**:
- **100 ms kašnjenja**: Korisnici osjete usporavanje
- **1 sekunda kašnjenja**: Korisnici počinju gubiti fokus
- **3+ sekunde**: 40% korisnika napušta stranicu
- **Mobilne mreže**: Performanse su još važnije
Sada ćemo kreirati funkciju koja pretvara numeričke podatke u značajne boje. Zamislite to kao sustav semafora - zeleno za čistu energiju, crveno za visoku intenzivnost ugljika.
Sad kad imate ideju o tome kako preglednik renderira resurse koje šaljete, pogledajmo posljednje stvari koje trebate napraviti da dovršite vašu ekstenziju:
Ova funkcija će uzeti podatke o CO2 iz našeg API-ja i odrediti koja boja najbolje predstavlja utjecaj na okoliš. Slično je tome kako znanstvenici koriste kodiranje bojama u toplinskim kartama za vizualizaciju složenih obrazaca podataka - od temperatura oceana do formiranja zvijezda. Dodajmo ovo u `/src/index.js`, odmah nakon onih `const` varijabli koje smo ranije postavili:
### Kreirajte funkciju za izračun boje
Sada ćemo napraviti funkciju koja pretvara numeričke podatke u značajne boje. Zamislite to kao sustav semafora - zelena za čistu energiju, crvena za visoku intenzitet ugljika.
Ova funkcija će uzimati CO2 podatke iz našeg API-ja i odrediti koju boju najbolje predstavlja utjecaj na okoliš. Slično kao što znanstvenici koriste kodiranje bojama na toplinskim kartama za vizualizaciju složenih obrasaca podataka - od temperatura oceana do formiranja zvijezda. Dodajmo ovu funkciju u `/src/index.js`, odmah nakon onih `const` varijabli koje smo ranije postavili:
API `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) je poput živčanog sustava vašeg proširenja - upravlja svim komunikacijama i zadacima iza kulisa:
> "Koristite chrome.runtime API za dohvaćanje pozadinske stranice, vraćanje detalja o manifestu i slušanje i odgovaranje na događaje u životnom ciklusu aplikacije ili proširenja. Također možete koristiti ovaj API za pretvaranje relativne putanje URL-ova u potpuno kvalificirane URL-ove."
**Zašto je Chrome Runtime API tako koristan:**
- **Omogućuje** komunikaciju između različitih dijelova vašeg proširenja
- **Upravlja** pozadinskim radom bez zamrzavanja korisničkog sučelja
✅ Ako razvijate ovo proširenje za Edge, moglo bi vas iznenaditi da koristite Chrome API. Novije verzije preglednika Edge rade na Chromium pregledničkom motoru, pa možete iskoristiti ove alate.
> **Savjet**: Ako želite profilirati proširenje preglednika, pokrenite alate za razvoj unutar samog proširenja, jer je to vlastita zasebna instanca preglednika. To vam daje pristup metrikama performansi specifičnim za proširenje.
**Evo kako ova pametna mala funkcija radi:**
- **Postavlja** dva niza - jedan za razine CO2, drugi za boje (zelena = čisto, smeđa = prljavo!)
- **Pronalazi** najbližu vrijednost stvarnom CO2 pomoću pametnog sortiranja polja
- **Uhvati** odgovarajuću boju pomoću metode findIndex()
- **Šalje** poruku Chrome pozadinskom skriptu s odabranom bojom
- **Održava** sve organizirano pomoću const deklaracija
`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) je poput živčanog sustava vaše ekstenzije – upravlja svim komunikacijama i zadacima u pozadini:
> "Koristite chrome.runtime API za dohvat pozadinske stranice, vraćanje detalja o manifestu i slušanje te reagiranje na događaje tijekom životnog ciklusa aplikacije ili ekstenzije. Također možete koristiti ovaj API za pretvaranje relativnih putanja URL-ova u potpuno kvalificirane URL-ove."
**Zašto je Chrome Runtime API tako praktičan:**
- **Omogućava** različitim dijelovima ekstenzije da međusobno komuniciraju
- **Rukuje** pozadinskim radom bez zamrzavanja korisničkog sučelja
✅ Ako razvijate ovu ekstenziju za Edge, možda će vas iznenaditi da koristite chrome API. Novije verzije Edge preglednika rade na Chromium motoru, tako da možete iskoristiti ove alate.
```mermaid
architecture-beta
group browser(logos:chrome)[Preglednik]
service popup(logos:html5)[UI iskačući prozor] in browser
service content(logos:javascript)[Skripta sadržaja] in browser
service background(database)[Skripta u pozadini] in browser
service api(logos:api)[Vanjski API] in browser
popup:R -- L:content
content:R -- L:background
background:T -- B:api
content:T -- B:api
junction junctionCenter in browser
popup:R -- L:junctionCenter
junctionCenter:R -- L:background
```
> **Profesionalni savjet**: Ako želite profilirati ekstenziju za preglednik, pokrenite dev tools iz same ekstenzije jer je to zaseban preglednički proces. To vam daje pristup metriki performansi specifičnoj za ekstenziju.
### Postavite zadanu boju ikone
Prije nego što počnemo dohvaćati stvarne podatke, dajmo našem proširenju početnu točku. Nitko ne voli gledati praznu ili pokvarenu ikonu. Počet ćemo sa zelenom bojom kako bi korisnici znali da proširenje radi od trenutka kada ga instaliraju.
Prije nego što počnemo dohvaćati stvarne podatke, dajmo ekstenziji početnu točku. Nitko ne voli gledati praznu ili nefunkcionalnu ikonu. Počet ćemo sa zelenom bojom tako da korisnici znaju da ekstenzija radi od trenutka instalacije.
U vašoj funkciji `init()`, postavimo tu zadanu zelenu ikonu:
U vašoj funkciji `init()`, postavimo zadanu zelenu ikonu:
- **Postavlja** neutralnu zelenu boju kao zadano stanje
- **Pruža** trenutnu vizualnu povratnu informaciju kada se proširenje učita
- **Uspostavlja**komunikacijski obrazac s pozadinskom skriptom
- **Osigurava** da korisnici vide funkcionalno proširenje prije nego što se podaci učitaju
- **Pruža** trenutačnu vizualnu povratnu informaciju kad se ekstenzija učitava
- **Uspostavlja**obrazac komunikacije s pozadinskim skriptom
- **Osigurava** da korisnici vide funkcionalnu ekstenziju prije učitavanja podataka
### Pozovite funkciju, izvršite poziv
Sada povežimo sve zajedno tako da se, kada stignu svježi podaci o CO2, vaša ikona automatski ažurira s odgovarajućom bojom. To je poput povezivanja završnog kruga u elektroničkom uređaju - odjednom svi pojedinačni dijelovi rade kao jedan sustav.
Sada povežimo sve zajedno tako da kad dođu svježi CO2 podaci, vaša ikona automatski ažurira ispravnu boju. Kao da spajate zadnji krug na elektroničkom uređaju - iznenada svi pojedinačni dijelovi rade kao jedan sustav.
Dodajte ovu liniju odmah nakon što dobijete podatke o CO2 iz API-ja:
Dodajte ovaj redak odmah nakon što dobijete CO2 podatke iz API-ja:
```javascript
// After retrieving CO2 data from the API
// let CO2 = data.data[0].intensity.actual;
// Nakon dohvaćanja CO2 podataka s API-ja
// dopusti CO2 = data.data[0].intensity.actual;
calculateColor(CO2);
```
**Ova integracija postiže:**
- **Povezuje**tok podataka iz API-ja sa sustavom vizualnih indikatora
- **Pokreće** automatska ažuriranja ikona kada stignu novi podaci
- **Osigurava** vizualnu povratnu informaciju u stvarnom vremenu na temelju trenutne intenzivnosti ugljika
- **Održava**odvajanje odgovornosti između dohvaćanja podataka i logike prikaza
- **Povezuje**protok podataka iz API-ja sa sustavom vizualnog indikatora
- **Pokreće** automatska ažuriranja ikone kad pristignu novi podaci
- **Osigurava** vizualnu povratnu informaciju u stvarnom vremenu na temelju trenutnog intenziteta ugljika
- **Održava**separaciju odgovornosti između dohvaćanja podataka i logike prikaza
I na kraju, u `/dist/background.js`, dodajte slušatelja za ove pozadinske akcijske pozive:
I na kraju, u `/dist/background.js`, dodajte slušač ovih poziva za pozadinske akcije:
- **Ažuriranja u stvarnom vremenu**: Dinamičke promjene ikone bazirane na živim podacima
- **Upravljanje memorijom**: Ispravno čišćenje i rukovanje resursima
**Vrijeme je za testiranje vašeg proširenja:**
- **Izgradite** sve s `npm run build`
- **Ponovno učitajte** svoje proširenje u pregledniku (ne zaboravite ovaj korak)
- **Otvorite** svoje proširenje i promatrajte kako se ikona mijenja u boji
- **Ponovno učitajte**vaše proširenje u pregledniku (ne zaboravite ovaj korak)
- **Otvorite**vaše proširenje i pratite kako se ikona mijenja u boji
- **Provjerite** kako reagira na stvarne podatke o ugljiku iz cijelog svijeta
Sada ćete na prvi pogled znati je li pravo vrijeme za pranje rublja ili biste trebali pričekati čišću energiju. Upravo ste izgradili nešto zaista korisno i naučili o performansama preglednika usput.
Sada ćete na prvi pogled znati je li dobro vrijeme za pranje rublja ili biste trebali pričekati čišću energiju. Upravo ste napravili nešto zaista korisno i usput naučili o performansama preglednika.
## Izazov GitHub Copilot Agent 🚀
## GitHub Copilot Agent Challenge 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Koristite Agent način za dovršetak sljedećeg izazova:
**Opis:** Poboljšajte mogućnosti praćenja performansi proširenja preglednika dodavanjem značajke koja prati i prikazuje vrijeme učitavanja za različite komponente proširenja.
**Opis:** Poboljšajte mogućnosti praćenja performansi vašeg pregledničkog proširenja dodavanjem značajke koja prati i prikazuje vrijeme učitavanja različitih komponenti proširenja.
**Zadatak:** Kreirajte sustav za praćenje performansi proširenja preglednika koji mjeri i bilježi vrijeme potrebno za dohvaćanje podataka o CO2 iz API-ja, izračunavanje boja i ažuriranje ikone. Dodajte funkciju pod nazivom `performanceTracker` koja koristi Performance API za mjerenje ovih operacija i prikazuje rezultate u konzoli preglednika s vremenskim oznakama i metrikama trajanja.
**Zadatak:** Kreirajte sustav za praćenje performansi pregledničkog proširenja koji mjeri i bilježi vrijeme potrebno za dohvat CO2 podataka s API-ja, izračun boja i ažuriranje ikone. Dodajte funkciju nazvanu`performanceTracker` koja koristi Performance API za mjerenje ovih operacija i prikazuje rezultate u konzoli preglednika s vremenskim oznakama i metrike trajanja.
Saznajte više o [načinu rada agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) saznajte ovdje.
## 🚀 Izazov
Evo zanimljive detektivske misije: odaberite nekoliko open source web stranica koje postoje već godinama (poput Wikipedije, GitHuba ili Stack Overflowa) i istražite njihovu povijest commitova. Možete li uočiti gdje su napravili poboljšanja u performansama? Koji su se problemi stalno pojavljivali?
**Pristup istraživanju:**
- **Pretražite** poruke commitova za riječi poput "optimizacija," "performanse" ili "brže"
- **Pronađite** obrasce - popravljaju li stalno iste vrste problema?
- **Identificirajte** uobičajene uzroke koji usporavaju web stranice
- **Podijelite** što ste otkrili - drugi developeri mogu učiti iz primjera iz stvarnog svijeta
Evo jedne zanimljive detektivske misije: odaberite nekoliko open source web stranica koje već postoje godinama (npr. Wikipedia, GitHub ili Stack Overflow) i istražite njihovu povijest commit-ova. Možete li uočiti gdje su izvršili poboljšanja performansi? Koji su se problemi često ponavljali?
**Vaš pristup istraživanju:**
- **Pretražujte** poruke commit-ova za riječi poput "optimiziraj," "performanse," ili "brže"
- **Promatrajte** obrasce - popravljaju li stalno iste vrste problema?
- **Identificirajte** uobičajene uzroke usporavanja web stranica
- **Podijelite** svoja otkrića - ostali developeri uče iz stvarnih primjera
## Kviz nakon predavanja
@ -261,7 +464,126 @@ Evo zanimljive detektivske misije: odaberite nekoliko open source web stranica k
Razmislite o prijavi na [newsletter o performansama](https://perf.email/)
Istražite neke od načina na koje preglednici procjenjuju web performanse pregledavajući kartice performansi u njihovim web alatima. Primjećujete li neke značajne razlike?
Istražite neke načine na koje preglednici mjere web performanse pregledom kartica performansi u njihovim alatima. Primjećujete li neke veće razlike?
### ⚡ **Što možete napraviti u sljedećih 5 minuta**
- [ ] Otvorite upravitelj zadataka preglednika (Shift+Esc u Chromeu) da vidite potrošnju resursa proširenja
- [ ] Koristite karticu Performanse u DevToolsima za snimanje i analizu performansi stranice
- [ ] Provjerite stranicu proširenja u pregledniku da vidite koja proširenja utječu na vrijeme pokretanja
- [ ] Isprobajte privremeno onemogućavanje proširenja da vidite razlike u performansama
### 🎯 **Što možete postići ovaj sat**
- [ ] Završite kviz nakon lekcije i razumijte koncepte performansi
- [ ] Implementirajte background skriptu za svoje pregledničko proširenje
- [ ] Naučite koristiti browser.alarms za učinkovite pozadinske zadatke
- [ ] Vježbajte slanje poruka između content i background skripti
- [ ] Mjerite i optimizirajte potrošnju resursa vašeg proširenja
### 📅 **Vaše tjedno putovanje prema performansama**
- [ ] Izradite visokoučinkovito pregledničko proširenje s pozadinskom funkcionalnošću
- [ ] Ovladate service workerima i modernom arhitekturom proširenja
- [ ] Implementirajte učinkovite strategije sinkronizacije podataka i cache-a
Dorada i testiranje: Kompatibilnost između preglednika
: Rukovanje pogreškama
: Korisničko iskustvo
: Validacija izvedbe
section Napredne značajke (1 tjedan)
Ekosustav produžetka: Chrome Web Store
: Povratne informacije korisnika
: Integracija analitike
: Upravljanje ažuriranjima
section Profesionalni razvoj (2 tjedna)
Proširenja za poduzeća: Suradnja u timu
: Pregledi koda
: CI/CD pipelinei
: Sigurnosni pregledi
section Majstorstvo stručnjaka (1 mjesec)
Platforma stručnost: Napredni Chrome API-jevi
: Optimizacija izvedbe
: Obrasci arhitekture
: Doprinose otvorenom kodu
```
### 🛠️ Vaš kompletni alatni paket za razvoj proširenja
Nakon završetka ove trilogije, savladali ste:
- **Arhitekturu preglednika**: Duboko razumijevanje integracije proširenja s pregledničkim sustavima
- **Profiliranje performansi**: Sposobnost identificiranja i otklanjanja uskih grla korištenjem razvojnih alata
- **Asinkrono programiranje**: Moderne JavaScript obrasce za responzivne, neblokirajuće operacije
- **API integraciju**: Dohvat vanjskih podataka s autentifikacijom i rukovanjem pogreškama
- **Vizualni dizajn**: Dinamička ažuriranja sučelja i generiranje grafike temeljene na Canvasu
- **Slanje poruka**: Komunikaciju između skripti u arhitekturama proširenja
- **Korisničko iskustvo**: Stanja učitavanja, rukovanje pogreškama i intuitivne interakcije
- **Vještine produkcije**: Testiranje, otklanjanje pogrešaka i optimizacija za stvarnu upotrebu
**Primjene u stvarnom svijetu**: Vaše vještine razvoja proširenja primjenjuju se izravno na:
- **Progressive Web Apps**: Sličnu arhitekturu i obrasce performansi
- **Electron Desktop Apps**: Višeplatformske aplikacije koristeći web tehnologije
- **Mobilne hibridne aplikacije**: Razvoj Cordova/PhoneGap s web API-jima
- **Poslovne web aplikacije**: Složeni nadzorne ploče i alati za produktivnost
- **Chrome DevTools proširenja**: Napredni alati za razvoj i otklanjanje pogrešaka
- **Integracija web API-ja**: Bilo koja aplikacija koja komunicira s vanjskim servisima
**Profesionalni utjecaj**: Sada možete:
- **Izgraditi** proizvodno spremna preglednička proširenja od koncepta do implementacije
- **Optimizirati** performanse web aplikacija koristeći industrijske alate za profiliranje
- **Projektirati** skalabilne sustave s pravilnim razdvajanjem odgovornosti
- **Otklanjati pogreške** složenih asinhronih operacija i komunikacije između konteksta
- **Doprinositi** open source projektima proširenja i standardima preglednika
**Sljedeće razine prilika**:
- **Chrome Web Store Developer**: Objavljivanje proširenja za milijune korisnika
- **Inženjer web performansi**: Specijalizacija u optimizaciji i korisničkom iskustvu
- **Razvijatelj pregledničke platforme**: Doprinos razvoju motora preglednika
- **Kreator okvira proširenja**: Izrada alata koji pomažu drugim programerima
- **Odnosi s developerima**: Dijeljenje znanja kroz podučavanje i stvaranje sadržaja
🌟 **Dosegnuta značajka**: Izgradili ste potpuno funkcionalno pregledničko proširenje koje demonstrira profesionalne razvojne prakse i moderne web standarde!
## Zadatak
@ -269,5 +591,7 @@ Istražite neke od načina na koje preglednici procjenjuju web performanse pregl
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju od odgovornosti**:
Ovaj dokument je preveden korištenjem AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati službenim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
@ -23,7 +23,7 @@ Ekstenzija se može koristiti ad hoc od strane korisnika nakon što se unesu API
### Zasluge
Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izradite ekstenziju za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Povremeno korištenje ove ekstenzije pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edge pregledniku, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Ekstenzije. Odatle odaberite 'Učitaj nepakirano' za učitavanje nove ekstenzije. Na upit otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
Nakon što unesete API ključ i regiju u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji.
Koristeći API C02 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste imali podsjetnik direktno u svom pregledniku o potrošnji električne energije u vašem području. Korištenje ovog prilagođenog proširenja pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Odatle odaberite 'Učitaj nekomprimirano proširenje' za učitavanje novog proširenja. Otvorite mapu 'dist' na upit i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Karti električne energije](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području i pružila vam indikator o energetski intenzivnim aktivnostima koje bi bilo prikladno obavljati. Koncept iza ovog sustava 'točaka' inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izrađujemo ekstenziju za preglednik koja vas podsjeća koliko je potrošnja električne energije u vašem području trenutno velika. Korištenje ove ekstenzije može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edge pregledniku, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za ekstenzije. Tamo odaberite 'Load unpacked' za učitavanje nove ekstenzije. Na upitu otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal ([dobijte ga putem e-pošte ovdje](https://www.co2signal.com/) - unesite svoju e-mail adresu u okvir na toj stranici) i [kod za vaše područje](http://api.electricitymap.org/v3/zones) s [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristim 'US-NEISO').
Nakon što unesete API ključ i kod područja u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području. To će vam dati indikator o tome koje energetski intenzivne aktivnosti su prikladne za vaše performanse. Koncept ove 'točke' sustava inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji.
Koristit ćemo API Signal CO2 od tmrow za praćenje potrošnje električne energije kako bismo stvorili proširenje za preglednik koje će vam omogućiti da imate podsjetnik direktno u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog prilagođenog proširenja pomoći će vam da procijenite svoje aktivnosti na temelju tih informacija.
Za instalaciju na Edge, koristite izbornik "tri točke" u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Ako već nije aktiviran, uključite Način za razvojne programere (dolje lijevo). Odaberite "Učitaj raspakirano" kako biste učitali novo proširenje. Otvorite mapu "dist" na upitu i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal API (možete ga [dobiti ovdje putem e-maila](https://www.co2signal.com/) - unesite svoju e-mail adresu u polje na toj stranici) i [kod za svoju regiju](http://api.electricitymap.org/v3/zones) koji odgovara [električnoj karti](https://www.electricitymap.org/map) (na primjer, za Boston, "US-NEISO").
Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u regiji i pružila smjernice o tome koje aktivnosti s visokim energetskim intenzitetom bi bile prikladne za izvođenje. Koncept iza ovog sustava "točaka" inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
Izradite proširenje preglednika koje koristi tmrow API za CO2 Signal kako bi pratilo potrošnju električne energije u vašem području i prikazivalo podsjetnik o tome koliko je potrošnja energije visoka. Ovo proširenje možete koristiti ad hoc kako biste donosili odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edge preglednik, pronađite panel "Proširenja" putem izbornika "tri točke" u gornjem desnom kutu preglednika. Tamo odaberite opciju "Load Unpacked" kako biste učitali novo proširenje. Kada se pojavi upit, otvorite mapu "dist" i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal ([nabavite ga ovdje putem e-maila](https://www.co2signal.com/) - unesite svoj e-mail u okvir na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristite 'US-NEISO').
Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka koja se prikazuje na traci proširenja preglednika mijenjat će boju kako bi odražavala potrošnju energije u vašem području. To će vam pomoći da odlučite koje aktivnosti zahtijevaju energiju i kada ih je najbolje obavljati. Koncept ovog sustava "točke" inspiriran je proširenjem [Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
Koristeći API CO2 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste mogli dobiti obavijesti u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na zahtjev i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (u Bostonu, na primjer, koristim 'US-NEISO').
Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika promijenit će se kako bi odražavala potrošnju energije u vašoj regiji i pružila vam smjernice o aktivnostima koje su prikladne za obavljanje. Koncept sustava 'točke' inspiriran je [proširenjem preglednika Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji.
Koristeći tmrowov C02 Signal API za praćenje potrošnje električne energije, izradite proširenje za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja ad hoc pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija.
Za instalaciju na Edgeu, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na upitu i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO').
Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' dobio sam od [Energy Lollipop proširenja](https://energylollipop.com/) za emisije u Kaliforniji.
Baš kao što NASA-ina kontrola misije koordinira više sustava tijekom lansiranja svemirske letjelice, mi ćemo izgraditi svemirsku igru koja pokazuje kako različiti dijelovi programa mogu besprijekorno surađivati. Dok stvarate nešto što zapravo možete igrati, naučit ćete osnovne programerske koncepte koji se primjenjuju na bilo koji softverski projekt.
Istražit ćemo dva temeljna pristupa organizaciji koda: nasljeđivanje i kompoziciju. Ovo nisu samo akademski koncepti – to su isti obrasci koji pokreću sve, od videoigara do bankarskih sustava. Također ćemo implementirati komunikacijski sustav nazvan pub/sub koji funkcionira poput komunikacijskih mreža koje se koriste u svemirskim letjelicama, omogućujući različitim komponentama da dijele informacije bez stvaranja ovisnosti.
Do kraja ove serije, razumjet ćete kako izgraditi aplikacije koje se mogu skalirati i razvijati – bilo da razvijate igre, web aplikacije ili bilo koji drugi softverski sustav.
## Kviz prije predavanja
# Izgradnja svemirske igre, dio 1: Uvod
```mermaid
journey
title Vaše putovanje razvojem igara
section Osnove
Nauči arhitekturu igara: 3: Student
Razumij nasljeđivanje: 4: Student
Istraži kompoziciju: 4: Student
section Komunikacija
Izradi pub/sub sustav: 4: Student
Dizajniraj tijek događaja: 5: Student
Poveži komponente: 5: Student
section Primjena
Kreiraj objekte igre: 5: Student
Primijeni obrasce: 5: Student
Planiraj strukturu igre: 5: Student
```
Baš kao što NASA-in kontrola misija koordinira višestruke sustave tijekom svemirskog lansiranja, izgradit ćemo svemirsku igru koja pokazuje kako različiti dijelovi programa mogu nesmetano surađivati. Dok stvarate nešto što možete zapravo igrati, naučit ćete ključne programske koncepte koji se primjenjuju na bilo koji softverski projekt.
Istražit ćemo dva temeljna pristupa organizaciji koda: nasljeđivanje i kompoziciju. To nisu samo akademski pojmovi – to su isti obrasci koji pokreću sve od videoigara do bankarskih sustava. Također ćemo implementirati komunikacijski sustav zvani pub/sub koji funkcionira poput komunikacijskih mreža korištenih u svemirskim letjelicama, omogućujući različitim komponentama da dijele informacije bez stvaranja ovisnosti.
Na kraju ove serije shvatit ćete kako izgraditi aplikacije koje mogu rasti i evoluirati – bilo da razvijate igre, web-aplikacije ili bilo koji drugi softverski sustav.
```mermaid
mindmap
root((Arhitektura Igre))
Object Organization
Nasljeđivanje
Kompozicija
Hijerarhije Klasa
Miješanje Ponašanja
Communication Patterns
Pub/Sub Sustav
Emitteri Događaja
Prosljeđivanje Poruka
Labava Povezanost
Game Objects
Svojstva (x, y)
Ponašanja (kretanje, sudar)
Upravljanje Životnim Ciklusom
Upravljanje Stanjima
Design Patterns
Fabrika Funkcija
Promatrački Obrazac
Sustav Komponenti
Arhitektura Vođena Događajima
Scalability
Modularni Dizajn
Održivi Kod
Strategije Testiranja
Optimizacija Učinkovitosti
```
## Predavanje - kviz
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/29)
Kako projekti postaju složeniji, organizacija koda postaje ključna. Ono što započne kao jednostavan skript može postati teško za održavanje bez odgovarajuće strukture – slično kao što su Apollo misije zahtijevale pažljivu koordinaciju između tisuća komponenti.
Kako projekti rastu u složenosti, organizacija koda postaje kritična. Ono što počinje kao jednostavan skript može postati teško za održavanje bez odgovarajuće strukture – baš kao što su misije Apollo zahtijevale pažljivu koordinaciju tisuća komponenti.
Istražit ćemo dva temeljna pristupa organizaciji koda: nasljeđivanje i kompoziciju. Svaki od njih ima svoje prednosti, a razumijevanje oba pomaže vam odabrati pravi pristup za različite situacije. Ove koncepte ćemo demonstrirati kroz našu svemirsku igru, gdje junaci, neprijatelji, pojačanja i drugi objekti moraju učinkovito međusobno djelovati.
Istražit ćemo dva temeljna pristupa za organizaciju koda: nasljeđivanje i kompoziciju. Svaki ima različite prednosti, a razumijevanje oba pomaže vam da odaberete pravi pristup za različite situacije. Pružit ćemo demonstraciju ovih koncepata kroz našu svemirsku igru, gdje heroji, neprijatelji, pojačanja i drugi objekti moraju učinkovito međusobno djelovati.
✅ Jedna od najpoznatijih knjiga o programiranju odnosi se na [obrasce dizajna](https://en.wikipedia.org/wiki/Design_Patterns).
✅ Jedna od najpoznatijih knjiga o programiranju tiče se [dizajnerskih obrazaca](https://en.wikipedia.org/wiki/Design_Patterns).
U svakoj igri postoje `objekti igre`– interaktivni elementi koji ispunjavaju vaš svijet igre. Junaci, neprijatelji, pojačanja i vizualni efekti su svi objekti igre. Svaki od njih postoji na određenim koordinatama ekrana koristeći vrijednosti `x` i `y`, slično kao što se točke postavljaju na koordinatni sustav.
U svakoj igri imate `objekte igre`– interaktivne elemente koji ispunjavaju vaš igrački svijet. Heroji, neprijatelji, pojačanja i vizualni efekti su sve objekt igre. Svaki postoji na određenim koordinate zaslona koristeći vrijednosti `x` i `y`, slično kao određivanje točaka na koordinatnom sustavu.
Unatoč njihovim vizualnim razlikama, ovi objekti često dijele osnovna ponašanja:
Unatoč njihovim vizualnim razlikama, ovi objekti često dijele temeljna ponašanja:
- **Postoje negdje**– Svaki objekt ima x i y koordinate kako bi igra znala gdje ga nacrtati
- **Mnogi se mogu kretati**– Junaci trče, neprijatelji jure, meci lete preko ekrana
- **Imaju životni vijek**– Neki ostaju zauvijek, drugi (poput eksplozija) pojavljuju se nakratko i nestaju
- **Reagiraju na stvari**– Kada se sudare, pojačanja se prikupljaju, trake zdravlja se ažuriraju
- **Postoje negdje**– Svaki objekt ima x i y koordinate tako da igra zna gdje ga nacrtati
- **Mnogi se mogu kretati**–Heroji trče, neprijatelji love, metci lete preko zaslona
- **Imaju životni vijek**– Neki traju zauvijek, drugi (kao eksplozije) se kratko pojave i nestanu
- **Reagiraju na događaje** – Kad se stvari sudare, pojačanja se skupljaju, zdravstvene trake se ažuriraju
✅ Razmislite o igri poput Pac-Mana. Možete li identificirati četiri vrste objekata navedene gore u ovoj igri?
✅ Razmislite o igri poput Pac-Mana. Možete li prepoznati četiri vrste objekata navedene gore u toj igri?
```mermaid
classDiagram
class GameObject {
+x: number
+y: number
+type: string
+exists_somewhere()
}
class MovableObject {
+moveTo(x, y)
+može_se_pomicati()
}
class TemporaryObject {
+lifespan: number
+ima_životni_vijek()
}
class InteractiveObject {
+priSudaru()
+reagira_na_stvari()
}
GameObject <|-- MovableObject
GameObject <|-- TemporaryObject
GameObject <|-- InteractiveObject
MovableObject <|-- Hero
MovableObject <|-- Enemy
MovableObject <|-- Bullet
TemporaryObject <|-- PowerUp
TemporaryObject <|-- Explosion
InteractiveObject <|-- Collectible
InteractiveObject <|-- Obstacle
```
### Izražavanje ponašanja kroz kod
Sada kada razumijete zajednička ponašanja koja dijele objekti igre, istražimo kako implementirati ta ponašanja u JavaScriptu. Ponašanje objekta možete izraziti kroz metode pridružene klasama ili pojedinačnim objektima, a postoji nekoliko pristupa koje možete odabrati.
Sad kad razumijete zajednička ponašanja koja dijele objekti igre, istražimo kako implementirati ta ponašanja u JavaScriptu. Možete izraziti ponašanje objekta kroz metode prikačene na klase ili pojedinačne objekte, a postoji nekoliko pristupa za odabir.
**Pristup temeljen na klasama**
Klase i nasljeđivanje pružaju strukturirani pristup organizaciji objekata igre. Kao taksonomski sustav klasifikacije koji je razvio Carl Linnaeus, započinjete s osnovnom klasom koja sadrži zajedničke značajke, a zatim stvarate specijalizirane klase koje nasljeđuju te osnove dok dodaju specifične sposobnosti.
Klase i nasljeđivanje pružaju strukturirani pristup organizaciji objekata igre. Kao taksonomski sustav klasifikacije koji je razvio Carl Linnaeus, počinjete s osnovnom klasom koja sadrži zajednička svojstva, a zatim stvarate specijalizirane klase koje nasljeđuju te temelje dok dodaju specifične mogućnosti.
✅ Nasljeđivanje je važan koncept za razumijevanje. Saznajte više u [MDN-ovom članku o nasljeđivanju](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
✅ Nasljeđivanje je važan koncept za razumjeti. Saznajte više u [MDN članku o nasljeđivanju](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
Evo kako možete implementirati objekte igre koristeći klase i nasljeđivanje:
```javascript
// Step 1: Create the base GameObject class
// Korak 1: Kreirajte osnovnu GameObject klasu
class GameObject {
constructor(x, y, type) {
this.x = x;
@ -63,19 +146,19 @@ class GameObject {
}
```
**Razložimo ovo korak po korak:**
- Stvaramo osnovni predložak koji svaki objekt igre može koristiti
- Konstruktor sprema gdje se objekt nalazi (`x`, `y`) i kakva je to stvar
- Ovo postaje temelj na kojem će se graditi svi vaši objekti igre
**Objasnimo to korak po korak:**
- Kreiramo osnovni predložak koji svaki objekt igre može koristiti
- Konstruktor sprema gdje se objekt nalazi (`x`, `y`) i kakav je tip objekta
- Ovo postaje temelj na kojem će svi vaši objekti igre graditi
```javascript
// Step 2: Add movement capability through inheritance
// Korak 2: Dodajte mogućnost kretanja putem nasljeđivanja
class Movable extends GameObject {
constructor(x, y, type) {
super(x, y, type); // Call parent constructor
super(x, y, type); // Pozovite konstruktor roditelja
}
// Add the ability to move to a new position
// Dodajte sposobnost kretanja na novu poziciju
moveTo(x, y) {
this.x = x;
this.y = y;
@ -83,47 +166,47 @@ class Movable extends GameObject {
}
```
**U gore navedenom, učinili smo sljedeće:**
**U gornjem primjeru smo:**
- **Proširili** klasu GameObject kako bismo dodali funkcionalnost kretanja
- **Pozvali** konstruktor roditelja koristeći `super()` za inicijalizaciju naslijeđenih svojstava
- **Dodali** metodu `moveTo()` koja ažurira poziciju objekta
- **Pozvali**roditeljski konstruktor koristeći `super()` za inicijalizaciju naslijeđenih svojstava
- **Dodali** metodu `moveTo()` koja osvježava poziciju objekta
```javascript
// Step 3: Create specific game object types
// Korak 3: Kreirajte specifične tipove objekata igre
class Hero extends Movable {
constructor(x, y) {
super(x, y, 'Hero'); // Set type automatically
super(x, y, 'Hero'); // Postavite tip automatski
}
}
class Tree extends GameObject {
constructor(x, y) {
super(x, y, 'Tree'); // Trees don't need movement
super(x, y, 'Tree'); // Drveće ne treba kretanje
}
}
// Step 4: Use your game objects
// Korak 4: Koristite svoje objekte igre
const hero = new Hero(0, 0);
hero.moveTo(5, 5); // Hero can move!
hero.moveTo(5, 5); // Junak se može kretati!
const tree = new Tree(10, 15);
// tree.moveTo() would cause an error - trees can't move
// tree.moveTo() bi uzrokovao grešku - drveće se ne može kretati
```
**Razumijevanje ovih koncepata:**
- **Stvara** specijalizirane vrste objekata koji nasljeđuju odgovarajuća ponašanja
- **Stvara** specijalizirane tipove objekata koji nasljeđuju odgovarajuća ponašanja
- **Pokazuje** kako nasljeđivanje omogućuje selektivno uključivanje značajki
- **Prikazuje** da se junaci mogu kretati dok drveće ostaje nepomično
- **Ilustrira** kako hijerarhija klasa sprječava neprimjerene radnje
- **Demonstrira** da se heroji mogu kretati dok drveće ostaje nepomično
- **Ilustrira** kako hijerarhija klasa sprječava neprimjerenadjela
✅ Odvojite nekoliko minuta da ponovno osmislite junaka iz Pac-Mana (na primjer, Inky, Pinky ili Blinky) i kako bi bio napisan u JavaScriptu.
✅ Odvojite nekoliko minuta i zamislite Pac-Man heroja (na primjer Inky, Pinky ili Blinky) kako bi bio napisan u JavaScriptu.
**Pristup kompozicijom**
**Pristup kompozicije**
Kompozicija slijedi filozofiju modularnog dizajna, slično kao što inženjeri dizajniraju svemirske letjelice s izmjenjivim komponentama. Umjesto nasljeđivanja od roditeljske klase, kombinirate specifična ponašanja kako biste stvorili objekte s točno onim funkcionalnostima koje su im potrebne. Ovaj pristup nudi fleksibilnost bez krutih hijerarhijskih ograničenja.
Kompozicija slijedi filozofiju modularnog dizajna, slično kao što inženjeri dizajniraju svemirske letjelice s izmjenjivim komponentama. Umjesto da nasljeđujete iz roditeljske klase, kombinirate specifična ponašanja kako biste stvorili objekte s točno onom funkcionalnošću koju trebaju. Ovaj pristup nudi fleksibilnost bez stroge hijerarhijske kontrole.
```javascript
// Step 1: Create base behavior objects
// Korak 1: Kreirajte osnovne objekte ponašanja
const gameObject = {
x: 0,
y: 0,
@ -138,16 +221,16 @@ const movable = {
};
```
**Evo što ovaj kod radi:**
- **Definira** osnovni `gameObject` s svojstvima pozicije i tipa
- **Stvara** zaseban objekt ponašanja`movable` s funkcionalnošću kretanja
- **Razdvaja**brige tako da podaci o poziciji i logika kretanja ostanu neovisni
**Ovaj kod radi sljedeće:**
- **Definira** osnovni `gameObject` s pozicijskim i tipovskim svojstvima
- **Stvara** zaseban `movable`objekt ponašanja s funkcionalnošću kretanja
- **Razdvaja**zabrinutosti čuvanjem podataka o poziciji i logike kretanja neovisno
// Step 3: Create factory functions for different object types
// Korak 3: Kreirajte tvorničke funkcije za različite tipove objekata
function createHero(x, y) {
return {
...movableObject,
@ -167,68 +250,127 @@ function createStatic(x, y, type) {
}
```
**U gore navedenom, učinili smo sljedeće:**
- **Kombinirali** osnovna svojstva objekta s ponašanjem kretanja koristeći spread sintaksu
- **Stvorili** funkcije tvornice koje vraćaju prilagođene objekte
- **Omogućili** fleksibilno stvaranje objekata bez krutih hijerarhija klasa
- **Dopustili** objektima da imaju točno ona ponašanja koja su im potrebna
**U gornjem primjeru smo:**
- **Kombinirali** osnovna svojstva objekta s ponašanjem kretanja pomoću spread sintakse
- **Stvorili**tvorničke funkcije koje vraćaju prilagođene objekte
- **Omogućili** fleksibilnu izradu objekata bez rigidnih hijerarhija klasa
- **Dozvolili** objektima da imaju točno ona ponašanja koja im trebaju
```javascript
// Step 4: Create and use your composed objects
// Korak 4: Kreirajte i koristite svoje složene objekte
const hero = createHero(10, 10);
hero.moveTo(5, 5); // Works perfectly!
hero.moveTo(5, 5); // Radi savršeno!
const tree = createStatic(0, 0, 'Tree');
// tree.moveTo() is undefined - no movement behavior was composed
// tree.moveTo() nije definirano - nije sastavljeno ponašanje pomicanja
```
**Ključne točke za zapamtiti:**
- **Komponira** objekte miješanjem ponašanja umjesto nasljeđivanja
- **Pruža** više fleksibilnosti od krutih hijerarhija nasljeđivanja
- **Dopustite** objektima da imaju točno one značajke koje su im potrebne
- **Koristi** modernu JavaScript spread sintaksu za čisto kombiniranje objekata
**Ključne stvari za zapamtiti:**
- **Sastavlja** objekte miješanjem ponašanja umjesto nasljeđivanja
- **Pruža** veću fleksibilnost nego strogi hijerarhijski sustavi nasljeđivanja
- **Dozvoljava** objektima točno one značajke koje trebaju
- **Koristi** modernu JavaScript spread sintaksu za čisto kombiniranje objekata
```
**Which Pattern Should You Choose?**
> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
>
**Here's when to use each approach:**
- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
- **Consider** your team's preferences and project requirements
- **Remember** that you can mix both approaches in the same application
## Communication Patterns: The Pub/Sub System
As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
**Which Pattern Should You Choose?**
✅ **Pub/Sub** stands for 'publish-subscribe'
```mermaid
quadrantChart
title Code Organization Patterns
x-axis Simple --> Complex
y-axis Rigid --> Flexible
quadrant-1 Advanced Composition
quadrant-2 Hybrid Approaches
quadrant-3 Basic Inheritance
quadrant-4 Modern Composition
Class Inheritance: [0.3, 0.2]
Interface Implementation: [0.6, 0.4]
Mixin Patterns: [0.7, 0.7]
Pure Composition: [0.8, 0.9]
Factory Functions: [0.5, 0.8]
Prototype Chain: [0.4, 0.3]
```
### Understanding the Pub/Sub Architecture
> 💡 **Profesionalni savjet**: Oba obrasca imaju svoje mjesto u modernom JavaScript razvoju. Klase su pogodne za jasno definirane hijerarhije, dok kompozicija sjaji kad vam treba maksimalna fleksibilnost.
>
**Evo kada koristiti koji pristup:**
- **Odaberite** nasljeđivanje kad imate jasne "je-objekt" odnose (Heroj *je-objekt* koji se može kretati)
- **Odaberite** kompoziciju kada vam trebaju "ima-objekt" odnosi (Heroj *ima* sposobnosti kretanja)
- **Uzmite u obzir** preferencije svog tima i zahtjeve projekta
- **Zapamtite** da možete kombinirati oba pristupa u istoj aplikaciji
### 🔄 **Pedagoški pregled**
**Razumijevanje organizacije objekata**: Prije prelaska na komunikacijske obrasce, uvjerite se da možete:
- ✅ Objasniti razliku između nasljeđivanja i kompozicije
- ✅ Prepoznati kada koristiti klase, a kada tvorničke funkcije
- ✅ Razumjeti kako ključna riječ `super()` radi u nasljeđivanju
- ✅ Prepoznati prednosti svakog pristupa u razvoju igara
**Brzi samoprovjeru**: Kako biste kreirali Letjelog neprijatelja koji može i letjeti i kretati se?
**Veza sa stvarnim svijetom**: Ovi obrasci pojavljuju se svugdje:
- **React komponente**: Props (kompozicija) vs nasljeđivanje klasa
- **Igrački engine-i**: Sustavi entiteta i komponenti koriste kompoziciju
- **Mobilne aplikacije**: UI frameworki često koriste hijerarhiju nasljeđivanja
## Komunikacijski obrasci: Pub/Sub sustav
Kako aplikacije rastu u kompleksnosti, upravljanje komunikacijom između komponenti postaje izazovno. Publish-subscribe obrazac (pub/sub) rješava ovaj problem koristeći principe slične radijskom emitiranju – jedan predajnik može dosegnuti više primatelja bez da zna tko ih sluša.
Razmotrite što se dogodi kada heroj primi štetu: zdravstvena traka se ažurira, reproduciraju se zvučni efekti, pojavljuje se vizualna povratna informacija. Umjesto da povežete objekt heroja direktno s tim sustavima, pub/sub omogućuje heroju da emitira poruku "primljena šteta". Svaki sustav koji treba reagirati može se pretplatiti na tu vrstu poruke i reagirati sukladno.
✅ **Pub/Sub** znači 'objavi-pretplati se'
```mermaid
flowchart TD
A[Junak Prima Štetu] --> B[Objavi: HERO_DAMAGED]
B --> C[Sustav Događaja]
C --> D[Pretplatnik Zdravstvene Trake]
C --> E[Pretplatnik Sustava Zvuka]
C --> F[Pretplatnik Vizualnih Efekata]
C --> G[Pretplatnik Sustava Postignuća]
D --> H[Ažuriraj Prikaz Zdravlja]
E --> I[Reproduciraj Zvuk Štete]
F --> J[Pokaži Crveni Bljesak]
G --> K[Provjeri Postignuća Preživljavanja]
style A fill:#ffebee
style B fill:#e1f5fe
style C fill:#e8f5e8
style H fill:#fff3e0
style I fill:#fff3e0
style J fill:#fff3e0
style K fill:#fff3e0
```
### Razumijevanje arhitekture Pub/Sub
The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
Obrazac pub/sub održava različite dijelove vaše aplikacije labavo povezanim, što znači da mogu surađivati bez izravnih ovisnosti. Ovo razdvajanje čini vaš kod lakšim za održavanje, testiranje i prilagodbu promjenama.
**The key players in pub/sub:**
- **Messages**– Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
- **Publishers**– The objects that shout out "Something happened!" to anyone who's listening
- **Subscribers**– The objects that say "I care about that event" and react when it happens
- **Event System**– The middleman that makes sure messages get to the right listeners
**Ključni sudionici u pub/sub:**
- **Poruke** – jednostavni tekstualni nazivi poput `'PLAYER_SCORED'` koji opisuju što se dogodilo (plus dodatne informacije)
- **Izdavači (Publishers)** – objekti koji viču "Nešto se dogodilo!" svima koji slušaju
- **Pretplatnici (Subscribers)** – objekti koji kažu "Zanima me taj događaj" i reagiraju kad se dogodi
- **Sustav događaja** – posrednik koji osigurava da poruke stignu pravim slušačima
### Building an Event System
### Izgradnja sustava događaja
Let's create a simple but powerful event system that demonstrates these concepts:
Napravimo jednostavan ali snažan sustav događaja koji demonstrira ove koncepte:
```javascript
// Step 1: Create the EventEmitter class
// Korak 1: Kreirajte klasu EventEmitter
class EventEmitter {
constructor() {
this.listeners = {}; // Store all event listeners
this.listeners = {}; // Spremite sve slušatelje događaja
}
// Register a listener for a specific message type
// Registrirajte slušatelja za određenu vrstu poruke
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
@ -236,7 +378,7 @@ class EventEmitter {
this.listeners[message].push(listener);
}
// Send a message to all registered listeners
// Pošaljite poruku svim registriranim slušateljima
emit(message, payload = null) {
if (this.listeners[message]) {
this.listeners[message].forEach(listener => {
@ -247,37 +389,37 @@ class EventEmitter {
}
```
**Razlaganje što se ovdje događa:**
- **Stvara** centralni sustav za upravljanje događajima koristeći jednostavnu klasu
- **Pohranjuje** slušatelje u objekt organiziran prema vrsti poruke
- **Registrira** nove slušatelje koristeći metodu `on()`
**Razbijanje što se ovdje događa:**
- **Kreira** centralni sustav za upravljanje događajima koristeći jednostavnu klasu
- **Sprema** slušatelje u objekt organiziran prema vrsti poruke
- **Registrira** nove slušatelje korištenjem `on()` metode
- **Emitira** poruke svim zainteresiranim slušateljima koristeći `emit()`
- **Podržava** opcionalne podatkovne pakete za prijenos relevantnih informacija
- **Podržava** opcionalne podatke koji se prenose uz poruku
### Sve na jednom mjestu: Praktičan primjer
### Spojimo sve zajedno: praktičan primjer
U redu, pogledajmo kako to funkcionira! Izgradit ćemo jednostavan sustav kretanja koji pokazuje kako čist i fleksibilan pub/sub može biti:
U redu, pogledajmo to u akciji! Izgradit ćemo jednostavan sustav kretanja koji pokazuje kako čist i fleksibilan pub/sub može biti:
```javascript
// Step 1: Define your message types
// Korak 1: Definirajte svoje vrste poruka
const Messages = {
HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
ENEMY_SPOTTED: 'ENEMY_SPOTTED'
};
// Step 2: Create your event system and game objects
// Korak 2: Kreirajte svoj sustav događaja i objekte igre
const eventEmitter = new EventEmitter();
const hero = createHero(0, 0);
```
**Evo što ovaj kod radi:**
- **Definira** objekt konstanti kako bi se spriječile pogreške u nazivima poruka
- **Stvara** instancu emitera događaja za upravljanje svim komunikacijama
- **Inicijalizira**junaka na početnoj poziciji
**Ovaj kod radi sljedeće:**
- **Definira** objekt konstanti za sprječavanje tipfelera u imenima poruka
- **Stvara** instancu emitera događaja za upravljanje komunikacijom
- **Inicijalizira**objekt heroja na početnoj poziciji
```javascript
// Step 3: Set up event listeners (subscribers)
// Korak 3: Postavite osluškivače događaja (pretplatnike)
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
hero.moveTo(hero.x - 5, hero.y);
console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
- **Povezuje** unos s tipkovnice s događajima u igri bez čvrstog povezivanja
- **Omogućuje** sustavu unosa da neizravno komunicira s objektima igre
- **Dopušta** više sustava da reagiraju na iste događaje s tipkovnice
- **Olakšava** promjenu tipki ili dodavanje novih metoda unosa
> 💡 **Savjet**: Ljepota ovog obrasca je fleksibilnost! Možete lako dodati zvučne efekte, podrhtavanje ekrana ili čestične efekte jednostavnim dodavanjem više slušatelja događaja – nema potrebe za izmjenom postojećeg koda za tipkovnicu ili kretanje.
- **Povezuje** unos s tipkovnice s događajima igre bez čvrstih ovisnosti
- **Omogućuje** sustavu unosa komunikaciju s objektima igre neizravno
- **Dopušta** više sustava da reagiraju na iste tipkovne događaje
- **Olakšava** promjenu dodjela tipki ili dodavanje novih metoda unosa
```mermaid
sequenceDiagram
participant User
participant Keyboard
participant EventEmitter
participant Hero
participant SoundSystem
participant Camera
User->>Keyboard: Pritiskuje StrelicaLijevo
Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
EventEmitter->>Hero: Pomakni se lijevo 5 piksela
EventEmitter->>SoundSystem: Pusti zvuk koraka
EventEmitter->>Camera: Prati heroja
Hero->>Hero: Ažuriraj poziciju
SoundSystem->>SoundSystem: Pusti zvuk
Camera->>Camera: Podesi prikaz
```
> 💡 **Profesionalni savjet**: Ljepota ovog obrasca je fleksibilnost! Možete lako dodati zvučne efekte, tresenje ekrana ili čestice tako da samo dodate još slušatelja događaja – nije potrebno mijenjati postojeći kod tipkovnice ili kretanja.
>
**Zašto ćete voljeti ovaj pristup:**
**Evo zašto ćete voljeti ovaj pristup:**
- Dodavanje novih značajki postaje vrlo jednostavno – samo slušajte događaje koji vas zanimaju
- Više stvari može reagirati na isti događaj bez međusobnog ometanja
- Testiranje postaje puno jednostavnije jer svaki dio radi neovisno
- Kada nešto ne radi, točno znate gdje tražiti problem
- Testiranje postaje mnogo lakše jer svaka komponenta radi neovisno
- Kad nešto zakaže, točno znate gdje potražiti grešku
### Zašto se Pub/Sub učinkovito skalira
### Zašto Pub/Sub učinkovito skalira
Obrazac pub/sub održava jednostavnost dok aplikacije postaju složenije. Bilo da upravljate desecima neprijatelja, dinamičkim ažuriranjima korisničkog sučelja ili zvučnim sustavima, obrazac podnosi povećanu složenost bez promjena u arhitekturi. Nove značajke se integriraju u postojeći sustav događaja bez utjecaja na postojeću funkcionalnost.
Obrazac pub/sub održava jednostavnost kako aplikacije rastu u složenosti. Bilo da upravljate desecima neprijatelja, dinamičnim UI ažuriranjima ili zvučnim sustavima, obrazac može podnijeti povećani opseg bez arhitektonskih promjena. Nove značajke se integriraju u postojeći sustav događaja bez utjecaja na postojeću funkcionalnost.
> ⚠️ **Uobičajena pogreška**: Nemojte stvarati previše specifičnih vrsta poruka na početku. Započnite sa širokim kategorijama i precizirajte ih kako se potrebe vaše igre budu jasnije oblikovale.
> ⚠️ **Česta pogreška**: Nemojte prerano stvarati previše specifičnih vrsta poruka. Počnite s općim kategorijama i usavršavajte ih kako potrebe vaše igre budu jasnije.
>
**Najbolje prakse koje treba slijediti:**
- **Grupirajte** povezane poruke u logičke kategorije
- **Koristite** opisne nazive koji jasno ukazuju na ono što se dogodilo
- **Održavajte** podatkovne pakete poruka jednostavnima i fokusiranima
- **Dokumentirajte** vrste poruka za suradnju tima
**Preporuke za praksu:**
- **Grupirajte** povezane poruke u logične kategorije
- **Koristite** opisna imena koja jasno označavaju što se dogodilo
- **Držite** podatke u porukama jednostavnima i fokusiranima
- **Dokumentirajte** vrste poruka radi timske suradnje
### 🔄 **Pedagoški pregled**
**Razumijevanje arhitekture vođene događajima**: Provjerite svoje razumijevanje kompletnog sustava:
- ✅ Kako pub/sub obrazac sprječava čvrstu povezanost između komponenti?
- ✅ Zašto je lakše dodavati nove značajke s arhitekturom vođenom događajima?
- ✅ Koju ulogu ima EventEmitter u komunikacijskom tijeku?
- ✅ Kako konstante poruka sprječavaju greške i poboljšavaju održivost?
**Izazov dizajna**: Kako biste rukovali ovim situacijama u igri pomoću pub/suba?
1. **Neprijatelj umire**: ažurirajte rezultat, reproducirajte zvuk, stvorite pojačanje, uklonite ga sa zaslona
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Koristite Agent način rada za dovršetak sljedećeg izazova:
**Opis:** Stvorite jednostavan sustav objekata igre koristeći i nasljeđivanje i obrazac pub/sub. Implementirat ćete osnovnu igru u kojoj različiti objekti mogu komunicirati putem događaja bez da izravno znaju jedni za druge.
**Opis:** Kreirajte jednostavan sustav objekata igre koristeći i nasljeđivanje i pub/sub obrazac. Implementirat ćete osnovnu igru u kojoj različiti objekti mogu međusobno komunicirati putem događaja bez izravnog znanja jedni o drugima.
**Zadatak:** Stvorite sustav igre u JavaScriptu s sljedećim zahtjevima: 1) Stvorite osnovnu klasu GameObject s koordinatama x, y i svojstvom tipa. 2) Stvorite klasu Hero koja proširuje GameObject i može se kretati. 3) Stvorite klasu Enemy koja proširuje GameObject i može pratiti junaka. 4) Implementirajte klasu EventEmitter za obrazac pub/sub. 5) Postavite slušatelje događaja tako da kada se junak pomakne, obližnji neprijatelji prime događaj 'HERO_MOVED' i ažuriraju svoju poziciju kako bi se približili junaku. Uključite console.log izjave kako biste prikazali komunikaciju između objekata.
**Zadatak:** Kreirajte JavaScript sustav igre s slijedećim zahtjevima: 1) Kreirajte osnovnu klasu GameObject sa koordinatama x, y i svojstvom tipa. 2) Kreirajte klasu Hero koja nasljeđuje GameObject i može se kretati. 3) Kreirajte klasu Enemy koja nasljeđuje GameObject i može loviti heroja. 4) Implementirajte klasu EventEmitter za pub/sub obrazac. 5) Postavite slušatelje događaja tako da kad se heroj pomakne, obližnji neprijatelji dobiju 'HERO_MOVED' događaj i ažuriraju svoju poziciju da se pomaknu prema heroju. Uključite console.log izraze koji pokazuju komunikaciju između objekata.
Saznajte više o [načinu rada agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) pročitajte ovdje.
## 🚀 Izazov
Razmislite kako pub-sub uzorak može unaprijediti arhitekturu igre. Identificirajte koji bi se komponenti trebali emitirati događaje i kako bi sustav trebao reagirati. Dizajnirajte koncept igre i mapirajte obrasce komunikacije između njezinih komponenti.
Razmislite kako obrazac pub-sub može poboljšati arhitekturu igre. Identificirajte koje komponente bi trebale emitirati događaje i kako bi sustav trebao reagirati. Osmislite koncept igre i mapirajte komunikacijske obrasce između njezinih komponenti.
## Kviz nakon predavanja
## Post-lecture Quiz
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/30)
Saznajte više o Pub/Sub obrascu [čitajući o njemu](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
Saznajte više o Pub/Subu [čitanjem o njemu](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite bilo koju HTML5 igru na mreži i pregledajte njezin kod pomoću DevTools-a
- [ ] Kreirajte jednostavni HTML5 Canvas element i nacrtajte osnovni oblik
- [ ] Isprobajte korištenje `setInterval` za stvaranje jednostavne petlje animacije
- [ ] Istražite Canvas API dokumentaciju i isprobajte neku metodu crtanja
### 🎯 **Što možete postići u ovom satu**
- [ ] Završite post-lesson quiz i shvatite koncepte razvoja igara
- [ ] Postavite strukturu svog projekta igre s HTML, CSS i JavaScript datotekama
- [ ] Kreirajte osnovnu petlju igre koja se kontinuirano ažurira i iscrtava
- [ ] Nacrtajte svoje prve spriteove igre na platnu
- [ ] Implementirajte osnovno učitavanje resursa za slike i zvukove
### 📅 **Vaša tjedna kreacija igre**
- [ ] Završite kompletnu svemirsku igru sa svim planiranim značajkama
- [ ] Implementirajte stanja igre (početni zaslon, igranje, kraj igre)
- [ ] Kreirajte sustav bodovanja i praćenje napretka igrača
- [ ] Učinite svoju igru responzivnom i dostupnom na različitim uređajima
- [ ] Podijelite svoju igru na mreži i prikupljajte povratne informacije od igrača
### 🌟 **Vaš mjesečni razvoj igre**
- [ ] Izradite više igara istražujući različite žanrove i mehanike
- [ ] Naučite okvir za razvoj igara poput Phaser ili Three.js
- [ ] Doprinesite otvorenim projektima razvoja igara
- [ ] Usavršite napredne obrasce programiranja igara i optimizaciju
- [ ] Izradite portfelj koji prikazuje vaše vještine razvoja igara
- [ ] Mentorirajte druge zainteresirane za razvoj igara i interaktivnih medija
## 🎯 Vaš vremenski okvir savladavanja razvoja igara
```mermaid
timeline
title Napredak u učenju arhitekture igara
section Uzorci objekata (20 minuta)
Organizacija koda: Nasljeđivanje klasa
: Uzorci kompozicije
: Fabrika funkcija
: Miješanje ponašanja
section Sustavi komunikacije (25 minuta)
Arhitektura događaja: Implementacija Pub/Sub
: Dizajn poruka
: Emitiranje događaja
: Labava povezanost
section Dizajn objekata igre (30 minuta)
Sustavi entiteta: Upravljanje svojstvima
: Kompozicija ponašanja
: Upravljanje stanjem
: Upravljanje životnim ciklusom
section Uzorci arhitekture (35 minuta)
Dizajn sustava: Sustavi komponenti
: Uzorak promatrača
: Komandni uzorak
: Stroj stanja
section Napredni koncepti (45 minuta)
Skalabilna arhitektura: Optimizacija performansi
: Upravljanje memorijom
: Modularni dizajn
: Strategije testiranja
section Koncepti game enginea (1 tjedan)
Profesionalni razvoj: Grafovi scena
: Upravljanje resursima
: Renderiranje pipelinea
: Integracija fizike
section Ovladavanje frameworkom (2 tjedna)
Moderni razvoj igara: React uzorci igara
: Optimizacija canvasa
: Osnove WebGL-a
: PWA igre
section Industrijske prakse (1 mjesec)
Profesionalne vještine: Suradnja u timu
: Pregledi koda
: Uzorci dizajna igara
: Profiliranje performansi
```
### 🛠️ Sažetak vašeg alata za arhitekturu igara
Nakon završetka ove lekcije, sada imate:
- **Majstorstvo dizajnerskih uzoraka**: Razumijevanje prednosti i nedostataka nasljeđivanja u odnosu na kompoziciju
- **Event-Driven arhitektura**: Implementacija pub/sub za skalabilnu komunikaciju
- **Objektno-orijentirani dizajn**: Hijerarhije klasa i kompozicija ponašanja
- **Moderni JavaScript**: Factory funkcije, spread sintaksa i ES6+ obrasci
- **Skalabilna arhitektura**: Prinsipi labavog sparivanja i modularnog dizajna
- **Temelji razvoja igara**: Sustavi entiteta i obrasci komponenti
- **Profesionalni uzorci**: Pristupi organizaciji koda koji su standard u industriji
**Praktična primjena**: Ovi obrasci se direktno primjenjuju na:
- **Frontend okvire**: Arhitektura komponenti i upravljanje stanjima u React/Vue
- **Backend servise**: Komunikaciju mikroservisa i event-driven sustave
- **Mobilni razvoj**: Arhitekturu i sustave notifikacija na iOS/Androidu
- **Game engine-e**: Unity, Unreal i razvoj igara na webu
- **Enterprise softver**: Event sourcing i dizajn distribuiranih sustava
- **API dizajn**: REST usluge i komunikaciju u stvarnom vremenu
**Profesionalne vještine koje ste stekli**: Sada možete:
- **Dizajnirati** skalabilne softverske arhitekture koristeći dokazane obrasce
- **Implementirati** event-driven sustave koji upravljaju složenim interakcijama
- **Birati** odgovarajuće strategije organizacije koda za različite scenarije
- **Otklanjati greške** i održavati labavo povezane sustave učinkovito
- **Komunicirati** tehničke odluke koristeći terminologiju industrijskog standarda
**Sljedeća razina**: Spremni ste implementirati ove obrasce u stvarnoj igri, istražiti napredne teme razvoja igara ili primijeniti ove arhitektonske koncepte u web aplikacijama!
🌟 **Osvojeno postignuće**: Savladali ste osnovne obrasce softverske arhitekture koji pokreću sve od jednostavnih igara do složenih enterprise sustava!
## Zadatak
[Izradite skicu igre](assignment.md)
[Mock up a game](assignment.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju od odgovornosti**:
Ovaj je dokument preveden korištenjem AI usluge za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za bitne informacije preporučuje se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakve nesporazume ili pogrešna tumačenja koja proizađu iz korištenja ovog prijevoda.
# Izgradnja svemirske igre, dio 2: Crtanje heroja i čudovišta na platno
Canvas API jedna je od najmoćnijih značajki web razvoja za stvaranje dinamičnih, interaktivnih grafika direktno u vašem pregledniku. U ovoj lekciji pretvorit ćemo taj prazan HTML `<canvas>` element u svijet igre ispunjen herojima i čudovištima. Zamislite platno kao svoju digitalnu umjetničku ploču gdje kod postaje vizualan.
Nadovezujemo se na ono što ste naučili u prethodnoj lekciji, a sada ćemo se posvetiti vizualnim aspektima. Naučit ćete kako učitati i prikazati spriteove igre, precizno pozicionirati elemente i stvoriti vizualne temelje za svoju svemirsku igru. Ovo je most između statičnih web stranica i dinamičnih, interaktivnih iskustava.
Na kraju ove lekcije imat ćete kompletan prizor igre s vašim herojskim brodom pravilno pozicioniranim i formacijama neprijatelja spremnim za bitku. Razumjet ćete kako moderne igre renderiraju grafiku u preglednicima i steći vještine za stvaranje vlastitih interaktivnih vizualnih iskustava. Istražimo grafiku na platnu i oživimo vašu svemirsku igru!
## Kviz prije predavanja
# Izradite svemirsku igru dio 2: Nacrtajte heroja i čudovišta na Canvas
```mermaid
journey
title Vaše putovanje kroz Canvas grafiku
section Osnove
Razumijevanje Canvas API-ja: 3: Student
Učenje koordinatnog sustava: 4: Student
Crtanje osnovnih oblika: 4: Student
section Rukovanje slikama
Učitavanje igre sredstava: 4: Student
Rukovanje asinkronim učitavanjem: 5: Student
Pozicioniranje spriteova: 5: Student
section Izrada igre
Kreiranje zaslona igre: 5: Student
Izgradnja formacija: 5: Student
Optimizacija performansi: 4: Student
```
Canvas API jedno je od najmoćnijih značajki web razvoja za stvaranje dinamičke, interaktivne grafike izravno u vašem pregledniku. U ovoj lekciji pretvorit ćemo prazni HTML `<canvas>` element u svijet igre ispunjen herojima i čudovištima. Zamislite canvas kao vašu digitalnu umjetničku ploču gdje kod postaje vizualan.
Nadograđujemo na ono što ste naučili u prethodnoj lekciji, a sada ćemo zaroniti u vizualne aspekte. Naučit ćete kako učitati i prikazati spriteove igre, precizno pozicionirati elemente i stvoriti vizualnu osnovu za vašu svemirsku igru. Ovo premošćuje jaz između statičkih web stranica i dinamičkih, interaktivnih iskustava.
Na kraju lekcije imat ćete potpunu scenu igre s vašim herojsko brodom pravilno pozicioniranim i neprijateljskim formacijama spremnim za borbu. Razumjet ćete kako moderni igre prikazuju grafiku u preglednicima i steći vještine za stvaranje vlastitih interaktivnih vizualnih iskustava. Krenimo istraživati canvas grafiku i oživimo vašu svemirsku igru!
```mermaid
mindmap
root((Grafika na platnu))
Canvas Element
HTML5 Značajka
2D Kontekst
Sustav Koordinata
Kontrola Piksela
Drawing Operations
Osnovni Oblik
Renderiranje Teksta
Prikaz Slika
Crtanje Putanja
Asset Management
Učitavanje Slika
Asinkrone Operacije
Obrada Pogrešaka
Performanse
Game Rendering
Pozicioniranje Sprita
Raspored Formacije
Kompozicija Scene
Ažuriranje Frejmova
Visual Effects
Boje & Stilovi
Transformacije
Animacije
Slojevi
```
## Predkviz prije predavanja
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/31)
[Predkviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/31)
## Canvas
Što je točno `<canvas>` element? To je HTML5 rješenje za stvaranje dinamičnih grafika i animacija u web preglednicima. Za razliku od običnih slika ili videa koji su statični, canvas vam daje kontrolu nad svakim pikselom na ekranu. To ga čini savršenim za igre, vizualizaciju podataka i interaktivnu umjetnost. Zamislite ga kao programabilnu površinu za crtanje gdje JavaScript postaje vaš kist.
Pa što je točno ovaj `<canvas>` element? To je HTML5 rješenje za stvaranje dinamičke grafike i animacija u web preglednicima. Za razliku od običnih slika ili videozapisa koji su statični, canvas vam daje kontrolu na razini piksela nad svime što se prikazuje na ekranu. To ga čini savršenim za igre, vizualizacije podataka i interaktivnu umjetnost. Zamislite ga kao programabilnu površinu za crtanje gdje JavaScript postaje vaša kist.
Po defaultu, canvas element izgleda kao prazan, transparentan pravokutnik na vašoj stranici. Ali tu leži njegov potencijal! Njegova prava moć dolazi do izražaja kada koristite JavaScript za crtanje oblika, učitavanje slika, stvaranje animacija i omogućavanje interakcije s korisnicima. Slično je tome kako su pioniri računalne grafike u Bell Labsu 1960-ih morali programirati svaki piksel kako bi stvorili prve digitalne animacije.
Po defaultu, canvas element izgleda kao prazan, proziran pravokutnik na vašoj stranici. Ali tu leži njegova snaga! Njegova prava moć pojavljuje se kada koristite JavaScript za crtanje oblika, učitavanje slika, stvaranje animacija i omogućavanje da stvari reagiraju na korisničke interakcije. To je slično onome kako su pioniri računalne grafike u Bell Labsu 1960-ih morali programirati svaki piksel da bi stvorili prve digitalne animacije.
✅ Pročitajte [više o Canvas API-ju](https://developer.mozilla.org/docs/Web/API/Canvas_API) na MDN-u.
@ -33,81 +78,155 @@ Evo kako se obično deklarira, kao dio tijela stranice:
- **Postavlja** atribut `id` kako biste mogli referencirati ovaj specifični canvas element u JavaScriptu
- **Definira**širinu u pikselima za kontrolu horizontalne veličine platna
- **Postavlja**visinu u pikselima za određivanje vertikalnih dimenzija platna
**Evo što ovaj kod radi:**
- **Postavlja**`id`atribut da biste mogli referencirati ovaj specifični canvas element u JavaScriptu
- **Definira**`width` u pikselima za kontrolu horizontalne veličine canvasa
- **Postavlja**`height` u pikselima za određivanje vertikalnih dimenzija canvasa
## Crtanje jednostavne geometrije
Sada kada znate što je canvas element, istražimo kako zapravo crtati na njemu! Canvas koristi koordinatni sustav koji vam može biti poznat iz matematike, ali postoji jedna važna razlika specifična za računalnu grafiku.
Canvas koristi kartezijanski koordinatni sustav s x-osom (horizontalno) i y-osom (vertikalno) za pozicioniranje svega što crtate. Ali evo ključne razlike: za razliku od koordinatnog sustava iz matematike, početna točka `(0,0)` počinje u gornjem lijevom kutu, pri čemu se vrijednosti x povećavaju kako se pomičete desno, a vrijednosti y povećavaju kako se pomičete dolje. Ovaj pristup datira iz ranih računalnih zaslona gdje su elektronske zrake skenirale od vrha prema dolje, čineći gornji lijevi kut prirodnom početnom točkom.
Sada kad znate što je canvas element, istražimo kako zapravo crtati na njemu! Canvas koristi koordinatni sustav koji bi vam mogao biti poznat iz matematike, ali postoji jedna važna posebnost vezana za računalnu grafiku.
Canvas koristi kartezijanske koordinate s x-osi (horizontalna) i y-osi (vertikalna) za pozicioniranje svega što crtate. Ali evo ključne razlike: za razliku od koordinatnog sustava iz matematike, točka ishodišta `(0,0)` počinje u gornjem lijevom kutu, pri čemu vrijednosti x rastu pomicanjem udesno, a vrijednosti y rastu pomicanjem prema dolje. Ovaj pristup datira još iz ranih računalnih prikaza gdje su elektronske snopove skenirale od vrha prema dolje, pa je gornji lijevi kut prirodna točka početka.
> Slika s [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Za crtanje na canvas elementu slijedit ćete isti trostupanjski proces koji čini temelj svih grafika na platnu. Nakon što to učinite nekoliko puta, postaje prirodno:
1. **Dobijte referencu** na svoj Canvas element iz DOM-a (kao i za bilo koji drugi HTML element)
2. **Dobijte 2D kontekst za renderiranje**– on pruža sve metode za crtanje
Za crtanje na canvas elementu slijedit ćete isti trostupanjski proces koji tvori temelj svih grafika na canvasu. Nakon što to učinite nekoliko puta, postat će vam druga priroda:
// Korak 3: Postavi boju ispune i nacrtaj pravokutnik
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height
ctx.fillRect(0, 0, 200, 200); // x, y, širina, visina
```
**Razložimo ovo korak po korak:**
- **Uzimamo** naš canvas element koristeći njegov ID i spremamo ga u varijablu
- **Dobivamo** 2D kontekst za renderiranje – to je naš alat pun metoda za crtanje
- **Kažemo** canvasu da želimo ispuniti stvari crvenom bojom koristeći svojstvo `fillStyle`
- **Crtamo** pravokutnik koji počinje u gornjem lijevom kutu (0,0) i širok je 200 piksela i visok 200 piksela
- Mi **hvata** canvas element pomoću njegovog ID-a i spremamo ga u varijablu
- Mi **dohvaćamo** 2D rendering kontekst – to je naš alatni set pun metoda za crtanje
- Mi **kažemo** canvasu da želimo ispuniti stvari crvenom bojom koristeći `fillStyle` svojstvo
- Mi **crtamo** pravokutnik započevši u gornjem lijevom kutu (0,0) koji je širok i visok 200 piksela
✅ Canvas API uglavnom se fokusira na 2D oblike, ali možete crtati i 3D elemente na web stranici; za to biste mogli koristiti [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
✅ Canvas API se većinom fokusira na 2D oblike, ali možete također nacrtati 3D elemente na web stranici; za to možete koristiti [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
Možete crtati razne stvari s Canvas API-jem, kao što su:
Možete crtati razne stvari s Canvas API-jem poput:
- **Geometrijski oblici**, već smo pokazali kako nacrtati pravokutnik, ali postoji mnogo više što možete nacrtati.
- **Tekst**, možete nacrtati tekst s bilo kojim fontom i bojom koju želite.
- **Slike**, možete nacrtati sliku na temelju slike kao što je .jpg ili .png, na primjer.
- **Geometrijskih oblika**, već smo pokazali kako nacrtati pravokutnik, ali postoji još mnogo toga što možete nacrtati.
- **Teksta**, možete nacrtati tekst s bilo kojim fontom i bojom koju želite.
- **Slika**, možete nacrtati sliku na temelju slike poput .jpg ili .png datoteke.
✅ Isprobajte! Znate kako nacrtati pravokutnik, možete li nacrtati krug na stranici? Pogledajte neke zanimljive crteže na Canvasu na CodePenu. Evo [posebno impresivnog primjera](https://codepen.io/dissimulate/pen/KrAwx).
✅ Isprobajte! Znate kako nacrtati pravokutnik, možete li nacrtati krug na stranici? Pogledajte neke zanimljive Canvas crteže na CodePen. Evo [posebno impresivnog primjera](https://codepen.io/dissimulate/pen/KrAwx).
## Učitavanje i crtanje slike
### 🔄 **Pedagoški pregled**
**Razumijevanje osnova canvasa**: Prije no što prijeđete na učitavanje slika, osigurajte da možete:
- ✅ Objasniti kako se koordinatni sustav canvasa razlikuje od matematičkih koordinata
- ✅ Razumjeti trostupanjski proces crtanja na canvasa
- ✅ Prepoznati što pruža 2D rendering kontekst
- ✅ Opišete kako fillStyle i fillRect rade zajedno
Crtanje osnovnih oblika korisno je za početak, ali većina igara treba stvarne slike! Spriteovi, pozadine i teksture ono su što daje igrama vizualnu privlačnost. Učitavanje i prikazivanje slika na platnu funkcionira drugačije od crtanja geometrijskih oblika, ali je jednostavno kad shvatite proces.
Moramo stvoriti objekt `Image`, učitati našu datoteku slike (to se događa asinkrono, što znači "u pozadini") i zatim je nacrtati na platno kad bude spremna. Ovaj pristup osigurava da se vaše slike pravilno prikazuju bez blokiranja aplikacije dok se učitavaju.
**Brzi samoprovjera**: Kako biste nacrtali plavi krug na poziciji (100, 50) s radijusom 25?
```javascript
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 50, 25, 0, 2 * Math.PI);
ctx.fill();
```
**Metode crtanja na canvasa koje sada znate**:
- **fillRect()**: Crta ispunjene pravokutnike
- **fillStyle**: Postavlja boje i uzorke
- **beginPath()**: Pokreće nove putanje za crtanje
- **arc()**: Stvara krugove i krivulje
## Učitajte i nacrtajte slikovni resurs
Crtanje osnovnih oblika korisno je za početak, ali većina igara treba stvarne slike! Spriteovi, pozadine i teksture ono su što igri daje vizualnu privlačnost. Učitavanje i prikaz slika na canvasu radi drugačije nego crtanje geometrijskih oblika, no jednostavno je jednom kad shvatite proces.
Moramo stvoriti `Image` objekt, učitati našu datoteku slike (to se odvija asinkrono, znači "u pozadini") i zatim je nacrtati na canvas kad je spremna. Ovaj pristup osigurava da se slike pravilno prikazuju bez blokiranja vaše aplikacije tijekom učitavanja.
```mermaid
sequenceDiagram
participant JS as JavaScript
participant Img as Objekt slike
participant Server as Poslužitelj datoteka
participant Canvas as Kontekst platna
JS->>Img: new Image()
JS->>Img: Postavi svojstvo src
Img->>Server: Zahtjev za datotekom slike
Server->>Img: Vrati podatke slike
Img->>JS: Pokreni onload događaj
JS->>Canvas: drawImage(img, x, y)
Canvas->>Canvas: Prikaz na zaslonu
Note over JS,Canvas: Asinkrono učitavanje sprječava blokiranje UI-ja
```
### Osnovno učitavanje slike
```javascript
const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
// Image loaded and ready to be used
// Slika učitana i spremna za korištenje
console.log('Image loaded successfully!');
};
```
**Što se događa u ovom kodu:**
- **Stvaramo** potpuno novi objekt slike za pohranu našeg spritea ili teksture
- **Kažemo** mu koju datoteku slike treba učitati postavljanjem putanje izvora
- **Slušamo** događaj učitavanja kako bismo točno znali kada je slika spremna za upotrebu
**Evo što se događa u ovom kodu:**
- Mi **stvaramo** sasvim novi Image objekt za držanje našeg spritea ili teksture
- Mi **kažemo** koju datoteku slike učitati postavljanjem izvornog puta
- Mi **slušamo** događaj učitavanja da znamo točno kada je slika spremna za korištenje
### Bolji način za učitavanje slika
### Bolji način učitavanja slika
Evo robusnijeg načina za rukovanje učitavanjem slika koji profesionalni programeri često koriste. Učitavanje slika ćemo omotati u funkciju temeljenu na Promisima – ovaj pristup, populariziran kada su JavaScript Promises postali standard u ES6, čini vaš kod organiziranijim i elegantno rješava greške:
Evo robusnijeg načina za upravljanje učitavanjem slika koji često koriste profesionalni developeri. Umotat ćemo učitavanje slike u funkciju temeljenu na Promise-u – ovaj pristup, populariziran kada su JavaScript Promises postale standard u ES6, čini vaš kod organiziranijim i lijepo upravlja greškama:
@ -163,32 +282,56 @@ async function renderGameScreen() {
}
```
**Razložimo ovo korak po korak:**
- **Učitavamo** slike heroja i čudovišta u pozadini koristeći await
- **Uzimamo** naš canvas element i dobivamo taj 2D kontekst za renderiranje koji nam treba
- **Pozicioniramo** sliku heroja točno u sredinu koristeći malo brze matematike za koordinate
- **Postavljamo** sliku čudovišta u gornji lijevi kut kako bismo započeli formaciju neprijatelja
- **Hvatamo** sve greške koje se mogu dogoditi tijekom učitavanja ili renderiranja
## Vrijeme je da počnete graditi svoju igru
**Prođimo to korak po korak:**
- Magično **učitavamo** slike heroja i čudovišta u pozadini koristeći await
- **Dohvaćamo** canvas element i dobivamo 2D rendering kontekst koji nam treba
- **Pozicioniramo** sliku heroja točno u sredinu pomoću brzih matematičkih izračuna
- **Stavljamo** sliku čudovišta u gornji lijevi kut da započnemo neprijateljsku formaciju
- **Hvataju** se potencijalne greške koje se mogu dogoditi tijekom učitavanja ili renderiranja
```mermaid
flowchart TD
A[Učitaj Sredstva] --> B{Jesu li Sve Slike Učitane?}
B -->|Ne| C[Pokaži Učitavanje]
B -->|Da| D[Uzmi Kontekst Platna]
C --> B
D --> E[Očisti Ekran]
E --> F[Nacrtaj Pozadinu]
F --> G[Nacrtaj Formaciju Neprijatelja]
G --> H[Nacrtaj Herojski Brod]
H --> I[Primijeni Vizualne Efekte]
I --> J[Prikaži Frejm]
subgraph "Proces Renderiranja"
K[Upravljanje Sredstvima]
L[Sastav Scene]
M[Crtanje Operacija]
N[Izlaz Frejma]
end
style A fill:#e1f5fe
style J fill:#e8f5e8
style I fill:#fff3e0
```
## Sad je vrijeme da započnete izradu svoje igre
Sada ćemo sve spojiti kako bismo stvorili vizualne temelje vaše svemirske igre. Imate solidno razumijevanje osnova platna i tehnika učitavanja slika, pa će vas ovaj praktični dio voditi kroz izradu kompletnog ekrana igre s pravilno pozicioniranim spriteovima.
Sada ćemo sve povezati kako bismo stvorili vizualnu osnovu vaše svemirske igre. Imate solidno razumijevanje osu canvas osnova i tehnika učitavanja slika, pa će ovaj praktični dio voditi kroz izradu kompletne igre s pravilno pozicioniranim spriteovima.
### Što izgraditi
Izradit ćete web stranicu s Canvas elementom. Trebala bi prikazivati crni ekran `1024*768`. Dostavili smo vam dvije slike:
Izradit ćete web stranicu s canvas elementom. Trebala bi prikazivati crni ekran dimenzija `1024*768`. Dobit ćete dvije slike:
Pronađite početne datoteke koje su stvorene za vas u podmapi `your-work`. Struktura vašeg projekta trebala bi sadržavati:
Pronađite početne datoteke koje su za vas kreirane u `your-work` podmapi. Struktura vašeg projekta trebala bi sadržavati:
```bash
your-work/
@ -200,46 +343,46 @@ your-work/
└── package.json
```
**Što imate na raspolaganju:**
- **Spriteovi igre** nalaze se u mapi `assets/`kako bi sve ostalo organizirano
**Evo s čim radite:**
- **Spriteovi igre** nalaze se u mapi `assets/`da bi sve bilo organizirano
- **Vaša glavna HTML datoteka** postavlja canvas element i priprema sve
- **JavaScript datoteka** u kojoj ćete napisati svu magiju za renderiranje igre
- **package.json** koji postavlja razvojni server kako biste mogli testirati lokalno
- **JavaScript datoteka** u kojoj ćete pisati svu logiku prikaza igre
- **package.json** koji postavlja razvojni server za lokalno testiranje
Otvorite ovu mapu u Visual Studio Codeu kako biste započeli razvoj. Trebat će vam lokalno razvojno okruženje s instaliranim Visual Studio Codeom, NPM-om i Node.js-om. Ako nemate postavljen `npm` na svom računalu, [evo kako ga instalirati](https://www.npmjs.com/get-npm).
Otvorite ovu mapu u Visual Studio Code za početak rada. Trebat će vam lokalno razvojno okruženje s Visual Studio Code, NPM i Node.js instaliranim. Ako nemate `npm` postavljen na računalu, [evo kako ga instalirati](https://www.npmjs.com/get-npm).
Pokrenite svoj razvojni server tako da odete u mapu `your-work`:
Pokrenite svoj razvojni server tako da se pozicionirate u `your-work` mapu:
```bash
cd your-work
npm start
```
**Ova naredba radi nekoliko prilično zanimljivih stvari:**
- **Pokreće** lokalni server na `http://localhost:5000`kako biste mogli testirati svoju igru
- **Poslužuje** sve vaše datoteke kako bi ih vaš preglednik mogao ispravno učitati
- **Prati**promjene u vašim datotekama kako biste mogli glatko razvijati
- **Pruža vam** profesionalno razvojno okruženje za testiranje svega
**Ova naredba radi neke prilično cool stvari:**
- **Pokreće** lokalni server na `http://localhost:5000`da možete testirati svoju igru
- **Poslužuje** sve vaše datoteke ispravno da ih preglednik može učitati
- **Prati**vaše datoteke za promjene da razvoj teče glatko
- **Daje vam** profesionalno razvojno okruženje za testiranje svega
> 💡 **Napomena**: Vaš preglednik će isprva prikazivati praznu stranicu – to je očekivano! Kako dodajete kod, osvježite preglednik da biste vidjeli promjene. Ovaj iterativni pristup razvoju sličan je načinu na koji je NASA izgradila Apollo računalni sustav za navođenje – testirajući svaki komponent prije integracije u veći sustav.
> 💡 **Napomena**: Vaš preglednik će inicijalno prikazati praznu stranicu – to je očekivano! Kako dodajete kod, osvježite stranicu da vidite promjene. Ovaj iterativni razvoj sličan je načinu na koji je NASA izgradila Apollo računalo za navigaciju – testirajući svaki komponentu prije integracije u veći sustav.
### Dodajte kod
Dodajte potrebni kod u `your-work/app.js` kako biste dovršili sljedeće zadatke:
Dodajte potreban kod u `your-work/app.js` da dovršite sljedeće zadatke:
1. **Nacrtajte platno s crnom pozadinom**
> 💡 **Kako**: Pronađite TODO u `/app.js` i dodajte samo dvije linije. Postavite `ctx.fillStyle` na crno, zatim koristite `ctx.fillRect()` počevši od (0,0) s dimenzijama vašeg platna. Jednostavno!
1. **Nacrtajte canvas s crnom pozadinom**
> 💡 **Evo kako**: Pronađite TODO u `/app.js` i dodajte samo dvije linije. Postavite `ctx.fillStyle` na crno, zatim upotrijebite `ctx.fillRect()` počevši od (0,0) s dimenzijama canvasa. Jednostavno!
2. **Učitajte teksture igre**
> 💡 **Kako**: Koristite `await loadAsset()` za učitavanje slika igrača i neprijatelja. Spremite ih u varijable kako biste ih kasnije mogli koristiti. Zapamtite – neće se prikazati dok ih zapravo ne nacrtate!
> 💡 **Evo kako**: Koristite `await loadAsset()` da učitate slike igrača i neprijatelja. Spremite ih u varijable da ih možete kasnije koristiti. Zapamtite – neće se prikazati dok ih doista ne nacrtate!
3. **Nacrtajte herojski brod u sredini-donjoj poziciji**
> 💡 **Kako**: Koristite `ctx.drawImage()` za pozicioniranje heroja. Za x-koordinatu pokušajte `canvas.width / 2 - 45`za centriranje, a za y-koordinatu koristite `canvas.height - canvas.height / 4` za postavljanje u donji dio.
3. **Nacrtajte herojski brod u centru na dnu**
> 💡 **Evo kako**: Koristite `ctx.drawImage()` za pozicioniranje heroja. Za x-koordinatu pokušajte `canvas.width / 2 - 45`da ga centrirate, i za y-koordinatu `canvas.height - canvas.height / 4` da ga smjestite u donji dio.
4. **Nacrtajte formaciju neprijateljskih brodova 5×5**
> 💡 **Kako**: Pronađite funkciju `createEnemies` i postavite ugniježđenu petlju. Trebat ćete malo matematike za razmak i pozicioniranje, ali ne brinite – pokazat ću vam točno kako!
4. **Nacrtajte formaciju od 5×5 neprijateljskih brodova**
> 💡 **Evo kako**: Pronađite funkciju `createEnemies` i postavite ugniježđene petlje. Trebat ćete malo matematike za razmak i pozicioniranje, ali ne brinite – pokazat ću vam točno kako!
Prvo, postavite konstante za pravilni raspored formacije neprijatelja:
Prvo, definirajte konstante za pravilno postavljanje formacije neprijatelja:
- **Koordinatni sustavi**: Prevođenje matematike u pozicije na zaslonu
- **Upravljanje spriteovima**: Učitavanje i prikazivanje grafike igre
- **Algoritmi formacija**: Matematički obrasci za organizirane rasporede
- **Asinkrone operacije**: Moderni JavaScript za glatko korisničko iskustvo
## Rezultat
Završni rezultat trebao bi izgledati ovako:
Gotovi rezultat trebao bi izgledati ovako:
## Rješenje
Pokušajte prvo sami riješiti, ali ako zapnete, pogledajte [rješenje](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
Pokušajte ga sami prvo riješiti, ali ako zapnete, pogledajte [rješenje](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
---
## Izazov GitHub Copilot Agent 🚀
## GitHub Copilot Agent izazov 🚀
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Upotrijebite Agent način za dovršetak sljedećeg izazova:
**Opis:** Poboljšajte svoje platno svemirske igre dodavanjem vizualnih efekata i interaktivnih elemenata koristeći tehnike Canvas API-ja koje ste naučili.
**Opis:** Unaprijedite svoj prostor-igru na platnu dodavanjem vizualnih efekata i interaktivnih elemenata koristeći tehnike Canvas API-ja koje ste naučili.
**Zadatak:** Napravite novu datoteku pod nazivom `enhanced-canvas.html` s platnom koje prikazuje animirane zvijezde u pozadini, pulsirajuću traku zdravlja za herojski brod i neprijateljske brodove koji se polako spuštaju. Uključite JavaScript kod koji crta treperave zvijezde koristeći nasumične pozicije i prozirnost, implementira traku zdravlja koja mijenja boju ovisno o razini zdravlja (zelena > žuta > crvena) i animira neprijateljske brodove da se spuštaju niz ekran različitim brzinama.
**Zadatak:** Kreirajte novu datoteku pod nazivom `enhanced-canvas.html` s canvasom koji prikazuje animirane zvijezde u pozadini, pulsirajuću traku zdravlja za herojski brod i neprijateljske brodove koji polako se kreću prema dolje. Uključite JavaScript kod koji crta trepereće zvijezde koristeći nasumične pozicije i neprozirnost, implementira traku zdravlja koja mijenja boju ovisno o razini zdravlja (zeleno > žuto > crveno), te animira neprijateljske brodove da se kreću dolje po zaslonu različitim brzinama.
Saznajte više o [agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov
Naučili ste o crtanju s 2D-fokusiranim Canvas API-jem; pogledajte [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) i pokušajte nacrtati 3D objekt.
Naučili ste crtati s 2D-fokusiranim Canvas API-jem; pogledajte [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) i pokušajte nacrtati 3D objekt.
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/32)
## Pregled i samostalno učenje
Saznajte više o Canvas API-ju [čitajući o njemu](https://developer.mozilla.org/docs/Web/API/Canvas_API).
## Pregled & Samostalno učenje
Saznajte više o Canvas API-ju čitajući [više o njemu](https://developer.mozilla.org/docs/Web/API/Canvas_API).
### ⚡ **Što možete napraviti u sljedećih 5 minuta**
- [ ] Otvorite konzolu preglednika i kreirajte canvas element pomoću `document.createElement('canvas')`
- [ ] Pokušajte nacrtati pravokutnik koristeći `fillRect()` na canvas kontekstu
- [ ] Eksperimentirajte s različitim bojama koristeći svojstvo `fillStyle`
- [ ] Nacrtajte jednostavan krug koristeći metodu `arc()`
### 🎯 **Što možete postići u ovom satu**
- [ ] Završite kviz nakon lekcije i razumite osnove canvasa
- [ ] Kreirajte aplikaciju za crtanje na canvasu s više oblika i boja
- [ ] Implementirajte učitavanje slika i prikaz spriteova za svoju igru
- [ ] Napravite jednostavnu animaciju koja pomiče objekte po canvasu
- [ ] Vježbajte transformacije canvasa poput skaliranja, rotacije i translacije
### 📅 **Vaš tjedan s Canvasom**
- [ ] Dovršite space igru s uglađenom grafikom i animacijama spriteova
- [ ] Ovladate naprednim tehnikama canvasa poput gradijenata, uzoraka i kompozicije
- [ ] Kreirajte interaktivne vizualizacije koristeći canvas za prikaz podataka
- [ ] Naučite optimizacije canvasa za glatki rad aplikacije
- [ ] Izradite aplikaciju za crtanje ili slikanje s različitim alatima
- [ ] Istražujte kreativne obrasce kodiranja i generativnu umjetnost s canvasom
### 🌟 **Vaša mjesec dana grafičkog majstorstva**
- [ ] Izgradite složene vizualne aplikacije koristeći Canvas 2D i WebGL
- [ ] Naučite koncepte grafičkog programiranja i osnove shader-a
- [ ] Doprinose grafičkim bibliotekama otvorenog koda i alatima za vizualizaciju
- [ ] Ovladate optimizacijom performansi za grafički zahtjevne aplikacije
- [ ] Kreirajte edukativni sadržaj o programiranju canvasa i računalnoj grafici
- [ ] Postanite stručnjak za grafičko programiranje koji pomaže drugima stvarati vizualna iskustva
## 🎯 Vaš vremenski okvir za majstorstvo Canvas grafike
```mermaid
timeline
title Napredak u učenju Canvas API-ja
section Osnove Canvasa (15 minuta)
Osnovne radnje: Referenca na element
: Pristup 2D kontekstu
: Koordinatni sustav
: Crtanje jednostavnih oblika
section Tehnike crtanja (20 minuta)
Grafički primitivci: Pravokutnici i krugovi
: Boje i stilovi
: Renderiranje teksta
: Operacije staza
section Rukovanje slikama (25 minuta)
Upravljanje resursima: Kreiranje objekta slike
: Asinhroni obrasci učitavanja
: Rukovanje pogreškama
: Optimizacija performansi
section Grafika za igre (30 minuta)
Renderiranje spriteova: Algoritmi pozicioniranja
: Izračuni formacija
: Kompozicija scene
: Renderiranje frejmova
section Napredne tehnike (40 minuta)
Vizualni efekti: Transformacije
: Animacije
: Slojevi
: Upravljanje stanjima
section Performanse (35 minuta)
Optimizacija: Efikasno crtanje
: Upravljanje memorijom
: Kontrola broja frejmova
: Keširanje resursa
section Profesionalne vještine (1 tjedan)
Produkcijska grafika: Integracija WebGL-a
: Canvas biblioteke
: Game engine-i
: Razmatranja za više platformi
section Napredna grafika (1 mjesec)
Specijalizirane aplikacije: Vizualizacija podataka
: Interaktivna umjetnost
: Efekti u stvarnom vremenu
: 3D grafika
```
### 🛠️ Sažetak vašeg alata za Canvas grafiku
Nakon završetka ove lekcije imate:
- **Majstorstvo Canvas API-ja**: Potpuno razumijevanje programiranja 2D grafike
- **Matematiku koordinata**: Precizno pozicioniranje i algoritme rasporeda
- **Upravljanje resursima**: Profesionalno učitavanje slika i rukovanje greškama
- **Rendering pipeline**: Strukturirani pristup sastavljanju scena
- **Igrinu grafiku**: Pozicioniranje spriteova i kalkulacije formacija
- **Asinkrono programiranje**: Moderne JavaScript obrasce za glatku izvedbu
- **Vizualno programiranje**: Prevođenje matematičkih koncepata u grafiku na ekranu
**Primjena u stvarnom svijetu**: Vaše Canvas vještine primjenjuju se direktno na:
- **Vizualizaciju podataka**: Grafikone, dijagrame i interaktivne nadzorne ploče
- **Razvoj igara**: 2D igre, simulacije i interaktivna iskustva
- **Digitalnu umjetnost**: Kreativno kodiranje i generativne umjetničke projekte
- **Dizajn sučelja**: Prilagođenu grafiku i interaktivne elemente
- **Obrazovni softver**: Vizualne alate za učenje i simulacije
- **Web aplikacije**: Dinamičku grafiku i vizualizacije u stvarnom vremenu
**Stečene profesionalne vještine**: Sada možete:
- **Izgraditi** prilagođena grafička rješenja bez vanjskih biblioteka
- **Optimizirati** performanse prikaza za glatko korisničko iskustvo
- **Otkloniti greške** u složenim vizualnim problemima koristeći alate preglednika
- **Dizajnirati** skalabilne grafičke sustave koristeći matematičke principe
- **Integrirati** Canvas grafiku s modernim web aplikacijskim okvirima
**Sljedeća razina**: Spremni ste dodati animaciju, korisničku interakciju, detekciju sudara ili istražiti WebGL za 3D grafiku!
🌟 **Ostvarenje**: Izgradili ste kompletan sustav za rendering igre koristeći temeljne tehnike Canvas API-ja!
## Zadatak
[Isprobajte Canvas API](assignment.md)
[Igrajte se s Canvas API-jem](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporuča se profesionalni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazuma ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda.
# Izgradnja svemirske igre, dio 3: Dodavanje kretanja
Razmislite o svojim omiljenim igrama – ono što ih čini privlačnima nisu samo lijepe grafike, već način na koji se sve kreće i reagira na vaše akcije. Trenutno je vaša svemirska igra poput prekrasne slike, ali uskoro ćemo dodati kretanje koje će je oživjeti.
Kada su NASA-ini inženjeri programirali računalo za navođenje Apollo misija, suočili su se sa sličnim izazovom: kako učiniti da svemirska letjelica reagira na unos pilota, a istovremeno automatski održava korekcije kursa? Principi koje ćemo danas naučiti odražavaju te iste koncepte – upravljanje kretanjem koje kontrolira igrač uz automatsko ponašanje sustava.
U ovoj lekciji naučit ćete kako učiniti da svemirski brodovi klize po ekranu, reagiraju na naredbe igrača i stvaraju glatke uzorke kretanja. Sve ćemo razložiti na razumljive koncepte koji se prirodno nadovezuju jedan na drugi.
Na kraju, igrači će moći upravljati svojim herojskim brodom po ekranu dok neprijateljski brodovi patroliraju iznad. Još važnije, razumjet ćete osnovne principe koji pokreću sustave kretanja u igrama.
# Izrada igre u svemiru, dio 3: Dodavanje gibanja
```mermaid
journey
title Vaše putovanje animacijom igre
section Osnove kretanja
Razumjeti principe pokreta: 3: Student
Naučiti ažuriranja koordinata: 4: Student
Implementirati osnovno kretanje: 4: Student
section Kontrole igrača
Rukovati događajima tipkovnice: 4: Student
Spriječiti zadane radnje: 5: Student
Kreirati responzivne kontrole: 5: Student
section Sustavi igre
Izgraditi petlju igre: 5: Student
Upravljati životnim ciklusom objekata: 5: Student
Implementirati pub/sub obrazac: 5: Student
```
Razmislite o svojim omiljenim igrama – ono što ih čini privlačnima nije samo lijepa grafika, već način na koji se sve kreće i reagira na vaše radnje. Trenutno je vaša igra u svemiru poput prekrasne slike, ali upravo ćemo dodati pokret koji će joj udahnuti život.
Kada su inženjeri NASA-e programirali računalo za upravljanje za Apolonske misije, suočili su se sličnim izazovom: kako natjerati svemirski brod da reagira na upravljanje pilotom dok istovremeno automatski održava korekcije kursa? Principi koje ćemo danas naučiti odražavaju te iste koncepte – upravljanje kretanjem kojim kontrolira igrač uz automatsko ponašanje sustava.
U ovom ćemo lekciji naučiti kako učiniti da se svemirski brodovi klize preko ekrana, reagiraju na zapovijedi igrača i stvaraju glatke uzorke kretanja. Sve ćemo razbiti na upravljive koncepte koji se prirodno nadovezuju jedan na drugi.
Na kraju će igrači moći letjeti svojim herojskim brodom po ekranu dok neprijateljski brodovi patroliraju iznad. Još važnije, razumjet ćete temeljne principe koji pokreću sustave kretanja u igrama.
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/33)
## Razumijevanje kretanja u igrama
## Razumijevanje gibanja u igrama
Igre oživljavaju kada se stvari počnu kretati, a postoje dva osnovna načina na koja se to događa:
Igre oživljavaju kada stvari počnu kretati, a postoje osnovno dva načina na koja se to događa:
- **Kretanje kontrolirano od strane igrača**: Kada pritisnete tipku ili kliknete mišem, nešto se pomakne. Ovo je izravna veza između vas i svijeta igre.
- **Automatsko kretanje**: Kada sama igra odluči pomaknuti stvari – poput onih neprijateljskih brodova koji trebaju patrolirati ekranom bez obzira na vaše radnje.
- **Kretanje koje kontrolira igrač**: Kad pritisnete tipku ili kliknete mišem, nešto se pomiče. To je izravna veza između vas i vašeg svijeta igre.
- **Automatsko kretanje**: Kada igra sama odlučuje pomaknuti stvari – poput onih neprijateljskih brodova koji moraju patrolirati ekranskim prostorom bez obzira na to radite li išta ili ne.
Pomicanje objekata na ekranu računala jednostavnije je nego što mislite. Sjećate li se onih x i y koordinata iz matematike? Upravo s njima radimo ovdje. Kada je Galileo 1610. pratio Jupiterove mjesece, u biti je radio isto – bilježio je položaje tijekom vremena kako bi razumio uzorke kretanja.
Pomicanje objekata na računalu je jednostavnije nego što mislite. Sjećate li se onih x i y koordinata iz matematičke nastave? Upravo s tim radimo ovdje. Kad je Galileo 1610. pratilo Jupiterove mjesece, on je ustvari radio isto – bilježio položaje tijekom vremena da bi razumio obrasce gibanja.
Pomicanje stvari na ekranu je poput stvaranja animacije u obliku flipbooka – trebate slijediti ova tri jednostavna koraka:
Pomicanje stvari na ekranu je poput stvaranja animacije kao u flipbooku – morate pratiti ova tri jednostavna koraka:
1. **Ažurirajte položaj**– Promijenite gdje bi vaš objekt trebao biti (možda ga pomaknite 5 piksela udesno)
2. **Izbrišite stari okvir**– Očistite ekran kako ne biste vidjeli sablasne tragove posvuda
3. **Nacrtajte novi okvir**– Postavite svoj objekt na njegovo novo mjesto
```mermaid
flowchart LR
A["Frejm N"] --> B["Ažuriraj pozicije"]
B --> C["Očisti platno"]
C --> D["Nacrtaj objekte"]
D --> E["Frejm N+1"]
E --> F{Nastaviti?}
F -->|Da| B
F -->|Ne| G["Kraj igre"]
subgraph "Ciklus animacije"
H["1. Izračunaj nove pozicije"]
I["2. Izbriši prethodni frejm"]
J["3. Prikaži novi frejm"]
end
style B fill:#e1f5fe
style C fill:#ffebee
style D fill:#e8f5e8
```
1. **Ažurirajte poziciju**– Promijenite mjesto na kojem vaš objekt treba biti (možda ga premjestite 5 piksela udesno)
2. **Izbrišite stari okvir**– Očistite ekran da ne biste vidjeli duhove tragova svuda oko
3. **Nacrtajte novi okvir**– Postavite svoj objekt na novo mjesto
Ako to radite dovoljno brzo, bum! Dobivate glatko kretanje koje se igračima čini prirodnim.
Učinite to dovoljno brzo, i bum! Dobivate glatko kretanje koje igračima djeluje prirodno.
Evo kako to može izgledati u kodu:
Ovako to može izgledati u kodu:
```javascript
// Set the hero's location
// Postavi lokaciju heroja
hero.x += 5;
// Clear the rectangle that hosts the hero
// Očisti pravokutnik koji sadrži heroja
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Redraw the game background and hero
// Ponovno nacrtaj pozadinu igre i heroja
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);
```
**Što ovaj kod radi:**
- **Ažurira** x-koordinatu heroja za 5 piksela kako bi se pomaknuo vodoravno
- **Briše** cijelo područje platna kako bi uklonio prethodni okvir
- **Ispunjava** platno crnom bojom pozadine
- **Ponovno crta** sliku heroja na njegovom novom položaju
**Ovo što radi ovaj kod:**
- **Ažurira** x-koordinatu heroja za 5 piksela da se pomakne horizontalno
- **Briše** cijeli canvas da ukloni prethodni okvir
- **Popunjava** canvas crnom pozadinom
- **Ponovno crta** sliku heroja na njegovoj novoj poziciji
✅ Možete li smisliti razlog zašto ponovno crtanje vašeg heroja mnogo puta u sekundi može uzrokovati troškove performansi? Pročitajte o [alternativama ovom obrascu](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
✅ Možete li smisliti razlog zašto bi ponovno crtanje heroja mnogo puta u sekundi moglo trošiti performanse? Pročitajte o [alternativama ovom uzorku](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
## Rukovanje događajima na tipkovnici
## Rukovanje događajima tipkovnice
Ovdje povezujemo unos igrača s akcijom u igri. Kada netko pritisne razmaknicu za ispaljivanje lasera ili pritisne strelicu za izbjegavanje asteroida, vaša igra mora otkriti i reagirati na taj unos.
Ovdje povezujemo unos igrača i akciju u igri. Kad netko pritisne razmaknicu da puca laserom ili pritisne strelicu da izbjegne asteroid, vaša igra mora detektirati i odgovoriti na taj unos.
Događaji na tipkovnici događaju se na razini prozora, što znači da cijeli prozor vašeg preglednika sluša te pritiske tipki. Klikovi mišem, s druge strane, mogu se vezati za određene elemente (poput klikanja na gumb). Za našu svemirsku igru, fokusirat ćemo se na kontrole tipkovnice jer one igračima daju taj klasični arkadni osjećaj.
Događaji s tipkovnice događaju se na razini prozora, što znači da cijeli vaš prozor preglednika sluša te pritiske tipki. Klikovi mišem, s druge strane, mogu biti vezani za specifične elemente (poput klika na gumb). Za našu svemirsku igru fokusirat ćemo se na kontrole s tipkovnice jer one igračima daju onaj klasični arkadni osjećaj.
Ovo me podsjeća na to kako su telegrafisti u 1800-ima morali prevoditi unos Morseove abecede u smislene poruke –radimo nešto slično, prevodimo pritiske tipki u naredbe igre.
Ovo me podsjeća na to kako su telegrafisti u 1800-ima morali prevoditi unos Morseove abecede u smislene poruke –mi radimo nešto slično, pretvaramo pritiske tipki u naredbe igre.
Za rukovanje događajem trebate koristiti metodu `addEventListener()` prozora i pružiti joj dva ulazna parametra. Prvi parametar je naziv događaja, na primjer `keyup`. Drugi parametar je funkcija koja bi se trebala pozvati kao rezultat događaja.
Da biste rukovali događajem, trebate koristiti metodu `addEventListener()` prozora i pružiti joj dva ulazna parametra. Prvi parametar je ime događaja, na primjer `keyup`. Drugi parametar je funkcija koja se treba pozvati kao rezultat događaja.
Evo primjera:
```javascript
window.addEventListener('keyup', (evt) => {
// evt.key = string representation of the key
// evt.key = nizovni prikaz tipke
if (evt.key === 'ArrowUp') {
// do something
// učini nešto
}
});
```
**Razlaganje onoga što se ovdje događa:**
- **Sluša** događaje na tipkovnici na cijelom prozoru
**Razbijajući što se događa ovdje:**
- **Sluša** događaje s tipkovnice na cijelom prozoru
- **Hvata** objekt događaja koji sadrži informacije o tome koja je tipka pritisnuta
- **Provjerava**odgovara li pritisnuta tipka određenoj tipki (u ovom slučaju, strelici gore)
- **Izvršava** kod kada je uvjet ispunjen
- **Provjerava**je li pritisnuta tipka jednaka određenoj tipki (u ovom slučaju strelica gore)
- **Izvršava** kod kad je uvjet zadovoljen
Za događaje na tipkama postoje dva svojstva na događaju koja možete koristiti za provjeru koja je tipka pritisnuta:
Za događaje s tipkovnice postoje dva svojstva na događaju koja možete koristiti da vidite koja je tipka pritisnuta:
- `key` - ovo je tekstualni prikaz pritisnute tipke, na primjer `'ArrowUp'`
- `keyCode` - ovo je brojčani prikaz, na primjer `37`, što odgovara `ArrowLeft`
- `keyCode` - ovo je brojčani prikaz, na primjer `37`, odgovara `ArrowLeft`
✅ Manipulacija događajima na tipkama korisna je i izvan razvoja igara. Koje druge primjene možete zamisliti za ovu tehniku?
✅ Manipulacija događajima tipkovnice korisna je i izvan razvoja igara. Koje druge primjene možete smisliti za ovu tehniku?
```mermaid
sequenceDiagram
participant User
participant Browser
participant EventSystem
participant GameLogic
participant Hero
User->>Browser: Pritisne tipku ArrowUp
Browser->>EventSystem: keydown događaj
EventSystem->>EventSystem: preventDefault()
EventSystem->>GameLogic: emit('KEY_EVENT_UP')
GameLogic->>Hero: hero.y -= 5
Hero->>Hero: Ažuriraj poziciju
Note over Browser,GameLogic: Tijek događaja sprječava zadane postavke preglednika
Note over GameLogic,Hero: Pub/sub obrazac omogućava čistu komunikaciju
```
### Posebne tipke: upozorenje!
Neke tipke imaju ugrađene funkcije preglednika koje mogu ometati vašu igru. Strelice pomiču stranicu, a razmaknica skrolira prema dolje – ponašanja koja ne želite kada netko pokušava upravljati svojim svemirskim brodom.
Neke tipke imaju ugrađena ponašanja u pregledniku koja mogu ometati vašu igru. Strelice pomiču stranicu, a razmaknica skakuće dolje – ponašanja koja ne želite kada netko pokušava pilotirati svoj svemirski brod.
Možemo spriječiti ova zadana ponašanja i dopustiti našoj igri da upravlja unosom. Ovo je slično tome kako su rani računalni programeri morali nadjačati sistemske prekide kako bi stvorili prilagođena ponašanja – mi to radimo na razini preglednika. Evo kako:
Možemo spriječiti ta zadana ponašanja i dopustiti našoj igri da umjesto toga obrađuje unos. Ovo je slično kako su rani programeri računala morali ignorirati prekide sustava da bi stvorili prilagođena ponašanja – samo što sad to radimo na razini preglednika. Evo kako:
```javascript
const onKeyDown = function (e) {
@ -106,12 +189,12 @@ const onKeyDown = function (e) {
- **Uvjetna logika**: reagiranje na određene kombinacije tipki
Sada ćemo razgovarati o objektima koji se kreću bez unosa igrača. Razmislite o neprijateljskim brodovima koji krstare ekranom, mecima koji lete ravno ili oblacima koji lebde u pozadini. Ovo autonomno kretanje čini vaš svijet igre živim čak i kada nitko ne dodiruje kontrole.
## Kretanje uzrokovano igrom
Koristimo ugrađene JavaScript timere za ažuriranje položaja u redovitim intervalima. Ovaj koncept je sličan načinu na koji rade klatna u satovima – redoviti mehanizam koji pokreće dosljedne, vremenski određene radnje. Evo kako to može izgledati:
Sad razgovarajmo o objektima koji se kreću bez unosa igrača. Razmislite o neprijateljskim brodovima koji krstare ekranom, metcima koji lete ravno ili oblacima koji plutaju u pozadini. Ovo autonomno kretanje čini vaš svijet igre živim čak i kad nitko ne dira kontrole.
Koristimo ugrađene JavaScript timere da ažuriramo pozicije u redovitim intervalima. Ovaj koncept sličan je radu klatna na satu – redoviti mehanizam koji pokreće dosljedne, vremenski određene radnje. Evo koliko to može biti jednostavno:
```javascript
const id = setInterval(() => {
// Move the enemy on the y axis
// Pomakni neprijatelja na y osi
enemy.y += 10;
}, 100);
```
**Što ovaj kod za kretanje radi:**
- **Stvara** timer koji se pokreće svakih 100 milisekundi
**Ovo što radi ovaj kod za kretanje:**
- **Stvara** timer koji se izvršava svakih 100 milisekundi
- **Ažurira** y-koordinatu neprijatelja za 10 piksela svaki put
- **Pohranjuje** ID intervala kako bismo ga kasnije mogli zaustaviti ako je potrebno
- **Pomiče** neprijatelja prema dolje na ekranu automatski
- **Spremi** ID intervala kako bismo ga mogli zaustaviti kasnije ako treba
- **Automatski pomiče** neprijatelja prema dolje na ekranu
## Petlja igre
Evo koncepta koji sve povezuje – petlja igre. Ako je vaša igra film, petlja igre bila bi projektor filma, prikazujući kadar za kadrom tako brzo da se sve čini kao glatko kretanje.
Evo koncepta koji sve povezuje – petlja igre. Da je vaša igra film, petlja igre bila bi filmski projektor koji prikazuje kadar za kadrom tako brzo da sve izgleda glatko.
Svaka igra ima jednu od ovih petlji koja radi u pozadini. To je funkcija koja ažurira sve objekte igre, ponovno crta ekran i kontinuirano ponavlja ovaj proces. Ovo prati vašeg heroja, sve neprijatelje, sve lasere koji lete okolo– cijelo stanje igre.
Svaka igra ima jednu takvu petlju koja radi u pozadini. To je funkcija koja ažurira sve objekte igre, ponovno crta ekran i neprestano ponavlja taj proces. Ona prati vašeg heroja, sve neprijatelje, laserske zrake– cijelo stanje igre.
Ovaj koncept me podsjeća na to kako su rani animatori poput Walta Disneya morali ponovno crtati likove kadar po kadar kako bi stvorili iluziju kretanja. Mi radimo isto, samo s kodom umjesto olovaka.
Ovaj koncept me podsjeća na to kako su rani animatorii poput Walta Disneya morali ponovno crtati likove kadar po kadar da stvaraju iluziju kretanja. Mi radimo isto, samo umjesto olovaka koristimo kod.
Evo kako tipična petlja igre može izgledati, izražena u kodu:
Ovako obično može izgledati petlja igre, izražena u kodu:
- **Briše** cijelo platno kako bi uklonila prethodni okvir
- **Ispunjava** pozadinu čvrstom bojom
- **Crta** sve objekte igre na njihovim trenutnim položajima
- **Ponavlja** ovaj proces svakih 200 milisekundi kako bi stvorila glatku animaciju
- **Upravlja** brzinom kadrova kontroliranjem intervalnog vremena
- **Briše** cijeli canvas da ukloni prethodni kadar
- **Popunjava** pozadinu solidnom bojom
- **Crta** sve objekte igre na njihovim trenutačnim pozicijama
- **Ponavlja** ovaj proces svakih 200 milisekundi da stvori glatku animaciju
- **Upravljanje** brzinom prikaza kadrova pomoću kontroliranja intervala
## Nastavak svemirske igre
Sada ćemo dodati kretanje u statičnu scenu koju ste prethodno izgradili. Pretvorit ćemo je iz snimke zaslona u interaktivno iskustvo. Proći ćemo kroz ovo korak po korak kako bismo osigurali da se svaki dio nadovezuje na prethodni.
Sad ćemo dodati kretanje statičnoj sceni koju ste prethodno izgradili. Pretvorit ćemo je iz snimke zaslona u interaktivno iskustvo. Proći ćemo korak po korak kako bi svaki dio prirodno slijedio prethodni.
Preuzmite kod odakle smo stali u prethodnoj lekciji (ili započnite s kodom u [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) mapi ako trebate svježi početak).
Uzmite kod odakle smo stali u prošloj lekciji (ili započnite s kodom u [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) mapi ako treba svježi početak).
**Evo što danas gradimo:**
- **Kontrole heroja**: Strelice će upravljati vašim svemirskim brodom po ekranu
- **Kretanje neprijatelja**: Ti vanzemaljski brodovi će započeti svoj napad
**Ovo što danas gradimo:**
- **Herojske kontrole**: Strelice će upravljati vašim svemirskim brodom po ekranu
- **Neprijateljsko kretanje**: Ti izvanzemaljski brodovi započet će svoj napredak
Krenimo s implementacijom ovih značajki.
Krenimo s implementacijom tih značajki.
## Preporučeni koraci
Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
Pronađite datoteke koje su pripremljene za vas u podmapi `your-work`. Trebale bi sadržavati sljedeće:
```bash
-| assets
@ -199,7 +322,7 @@ Pronađite datoteke koje su stvorene za vas u podmapi `your-work`. Trebale bi sa
-| package.json
```
Svoj projekt započnite u mapi `your-work` upisivanjem:
Projekt započinjete u mapi `your-work` upisivanjem:
```bash
cd your-work
@ -207,19 +330,19 @@ npm start
```
**Što ova naredba radi:**
- **Navigira**do direktorija vašeg projekta
- **Navigira**u direktorij vašeg projekta
- **Pokreće** HTTP poslužitelj na adresi `http://localhost:5000`
- **Poslužuje** datoteke vaše igre kako biste ih mogli testirati u pregledniku
- **Servira** vaše datoteke igre kako biste ih mogli testirati u pregledniku
Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`. Otvorite preglednik i unesite tu adresu, trenutno bi trebao prikazati heroja i sve neprijatelje; ništa se još ne miče!
Gорје navedenim bit će pokrenut HTTP poslužitelj na adresi `http://localhost:5000`. Otvorite preglednik i upišite tu adresu, trenutno bi trebala prikazati heroja i sve neprijatelje; još ništa ne miče se - zasad!
### Dodavanje koda
### Dodajte kod
1. **Dodajte namjenske objekte** za `heroja`, `neprijatelja` i `objekt igre`, oni bi trebali imati svojstva `x` i `y`. (Sjetite se dijela o [Nasljeđivanju ili kompoziciji](../README.md)).
1. **Dodajte posebne objekte** za `hero`, `enemy` i `game object`, trebaju imati svojstva `x` i `y`. (Sjetite se dijela o [nasljeđivanju ili kompoziciji](../README.md)).
*SAVJET* `objekt igre` trebao bi biti onaj s `x` i `y` te sposobnošću da se nacrta na platnu.
*NAPOMENA* `game object` treba biti onaj s `x` i `y` te sposobnošću crtanja na canvas.
> **Savjet**: Započnite dodavanjem nove klase `GameObject` s konstruktorom definiranim kao dolje, a zatim ga nacrtajte na platnu:
> **Savjet**: Započnite dodavanjem nove klase `GameObject` s konstruktorom kao u nastavku, a zatim je nacrtajte na canvas:
```javascript
class GameObject {
@ -241,11 +364,47 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
**Razumijevanje ove osnovne klase:**
- **Definira** zajednička svojstva koja dijele svi objekti igre (položaj, veličina, slika)
- **Uključuje** zastavicu `dead`za praćenje treba li objekt biti uklonjen
- **Pruža** metodu `draw()` koja prikazuje objekt na platnu
- **Postavlja** zadane vrijednosti za sva svojstva koja podklase mogu nadjačati
- **Uključuje** zastavicu `dead`koja prati treba li objekt ukloniti
- **Omogućuje** metodu `draw()` koja prikazuje objekt na canvasu
- **Postavlja** zadane vrijednosti za sva svojstva koja djeca klase mogu nadjačati
Sada proširite ovaj `GameObject` kako biste stvorili `Hero` i `Enemy`:
```mermaid
classDiagram
class GameObject {
+x: broj
+y: broj
+dead: boolean
+type: string
+width: broj
+height: broj
+img: Image
+draw(ctx)
}
class Hero {
+speed: broj
+type: "Hero"
+width: 98
+height: 75
}
class Enemy {
+type: "Enemy"
+width: 98
+height: 50
+setInterval()
}
GameObject <|-- Hero
GameObject <|-- Enemy
class EventEmitter {
+listeners: objekt
+on(message, listener)
+emit(message, payload)
}
```
Sada, proširite `GameObject` da biste napravili `Hero` i `Enemy`:
```javascript
class Hero extends GameObject {
@ -279,52 +438,52 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
```
**Ključni koncepti u ovim klasama:**
- **Nasljeđuje**od`GameObject` koristeći ključnu riječ `extends`
- **Nasljeđuje**iz`GameObject` koristeći ključnu riječ `extends`
- **Poziva** konstruktor roditelja s `super(x, y)`
- **Postavlja** specifične dimenzije i svojstva za svaku vrstu objekta
- **Implementira** automatsko kretanje za neprijatelje koristeći `setInterval()`
- **Postavlja** specifične dimenzije i svojstva za svaki tip objekta
- **Implementira** automatsko kretanje neprijatelja koristeći `setInterval()`
2. **Dodajte rukovatelje događajima na tipkama** za upravljanje navigacijom (pomicanje heroja gore/dolje lijevo/desno)
2. **Dodajte rukovatelje događajima za tipke** da biste upravljali kretanjem heroja gore/dolje lijevo/desno
*ZAPAMTITE* to je kartezijanski sustav, gornji lijevi kut je `0,0`. Također zapamtite dodati kod za zaustavljanje *zadanog ponašanja*
*Sjetite se* da je to kartezični sustav, gornji lijevi kut je `0,0`. Također ne zaboravite dodati kod za zaustavljanje *zadanog ponašanja*
> **Savjet**: Kreirajte svoju funkciju `onKeyDown` i povežite je s prozorom:
> **Savjet**: Napravite svoju funkciju `onKeyDown` i pridružite ju prozoru:
```javascript
const onKeyDown = function (e) {
console.log(e.keyCode);
// Add the code from the lesson above to stop default behavior
// Dodajte kod iz prethodne lekcije za zaustavljanje zadane radnje
switch (e.keyCode) {
case 37:
case 39:
case 38:
case 40: // Arrow keys
case 40: // Tipke sa strelicama
case 32:
e.preventDefault();
break; // Space
break; // Razmak
default:
break; // do not block other keys
break; // ne blokirajte druge tipke
}
};
window.addEventListener("keydown", onKeyDown);
```
**Što ovaj rukovatelj događajima radi:**
- **Sluša** događaje pritiska tipki na cijelom prozoru
- **Bilježi** kod tipke kako bi vam pomogao u otkrivanju koje se tipke pritišću
**Ovo što ovaj rukovatelj događajima radi:**
- **Sluša** događaje pritiska tipke na cijelom prozoru
- **Zapisuje** kod tipke da vam pomogne s otklanjanjem pogrešaka koje tipke se pritiskaju
- **Sprječava** zadano ponašanje preglednika za strelice i razmaknicu
- **Dopušta** ostalim tipkama da normalno funkcioniraju
- **Dopušta** ostalim tipkama da rade normalno
Provjerite konzolu preglednika u ovom trenutku i pratite pritiske tipki koji se bilježe.
Provjerite konzolu preglednika u ovom trenutku i promatrajte bilježenje pritisnutih tipki.
3. **Implementirajte** [Pub sub pattern](../README.md), ovo će održati vaš kod čistim dok slijedite preostale dijelove.
3. **Implementirajte** [Pub sub uzorak](../README.md), ovo će održati vaš kod čistim dok pratite ostatak dijelova.
Obrazac Publish-Subscribe pomaže organizirati vaš kod razdvajanjem otkrivanja događaja od rukovanja događajima. Ovo čini vaš kod modularnijim i lakšim za održavanje.
Publish-Subscribe uzorak pomaže organizirati vaš kod odvajanjem detekcije događaja od rukovanja događajem. Čini vaš kod modularnijim i lakšim za održavanje.
Za ovaj posljednji dio možete:
Za ovu zadnju fazu, možete:
1. **Dodati slušatelja događaja** na prozor:
1. **Dodajte slušača događaja** na prozor:
```javascript
window.addEventListener("keyup", (evt) => {
@ -340,13 +499,34 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
});
```
**Što ovaj sustav događaja radi:**
- **Otkriva** unos s tipkovnice i pretvara ga u prilagođene događaje igre
- **Razdvaja** otkrivanje unosa od logike igre
- **Omogućuje** jednostavnu promjenu kontrola kasnije bez utjecaja na kod igre
- **Dopušta** više sustava da reagiraju na isti unos
2. **Kreirajte klasu EventEmitter** za objavljivanje i pretplatu na poruke:
**Ovo što ovaj sustav događaja radi:**
- **Detektira** unos s tipkovnice i pretvara ga u prilagođene događaje igre
- **Razdvaja** detekciju unosa od logike igre
- **Olakšava** izmjenu kontrola kasnije bez utjecaja na kod igre
- **Dopušta** da se isti unos koristi za više sustava
```mermaid
flowchart TD
A["Unos s tipkovnice"] --> B["Slušatelj događaja prozora"]
B --> C["Emiter događaja"]
C --> D["TIPKA_DOGAĐAJ_GORE"]
C --> E["TIPKA_DOGAĐAJ_DOLJE"]
C --> F["TIPKA_DOGAĐAJ_LIJEVO"]
C --> G["TIPKA_DOGAĐAJ_DESNO"]
D --> H["Kretanje junaka"]
D --> I["Sustav zvuka"]
D --> J["Vizualni efekti"]
E --> H
F --> H
G --> H
style A fill:#e1f5fe
style C fill:#e8f5e8
style H fill:#fff3e0
```
2. **Napravite klasu EventEmitter** za objavljivanje i pretplatu na poruke:
```javascript
class EventEmitter {
@ -380,13 +560,13 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
eventEmitter = new EventEmitter();
```
**Razumijevanje postavke:**
- **Definira** konstante poruka kako bi se izbjegle pogreške u pisanju i olakšalo refaktoriranje
- **Deklarira** varijable za slike, kontekst platna i stanje igre
- **Stvara** globalni event emitter za sustav pub-sub
- **Inicijalizira**niz za pohranu svih objekata igre
**Razumijevanje postavki:**
- **Definira** konstante poruka da bi se izbjegle tipfeler i olakšala refaktorizacija
- **Deklarira** varijable za slike, kontekst canvasa i stanje igre
- **Stvara** globalnog emitera događaja za sustav pub-sub
- **Inicijalizira**polje za pohranu svih objekata igre
4. **Inicijalizirajte igru**
4. **Inicijaliziraj igru**
```javascript
function initGame() {
@ -406,9 +586,9 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
hero.x -= 5;
});
4. **Postavite petlju igre**
4. **Postavi petlju igre**
Refaktorirajte funkciju `window.onload` kako biste inicijalizirali igru i postavili petlju igre na dobar interval. Također ćete dodati laserski zrak:
Preuredi funkciju `window.onload` kako bi inicijalizirala igru i postavila petlju igre s dobrim intervalom. Također ćeš dodati laserski snop:
```javascript
window.onload = async () => {
@ -428,16 +608,16 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
};
```
**Razumijevanje postavke igre:**
**Razumijevanje postavljanja igre:**
- **Čeka** da se stranica potpuno učita prije početka
- **Dohvaća** element platna i njegov 2D kontekst za crtanje
- **Učitava** sve slikovne resurse asinkrono koristeći`await`
- **Pokreće** petlju igre koja radi u intervalima od 100 ms (10 FPS)
- **Briše** i ponovno crta cijeli ekran svaki kadar
- **Dohvaća** element canvas i njegov 2D rendering kontekst
- **Učitava** sve slikovne resurse asinkrono pomoću`await`
- **Pokreće** petlju igre koja radi na intervalima od 100 ms (10 FPS)
- **Briše** i ponovno crta cijeli zaslon svaki frame
5. **Dodajte kod** za pomicanje neprijatelja u određenim intervalima
5. **Dodaj kod** za pomicanje neprijatelja u određenom intervalu
Refaktorirajte funkciju `createEnemies()` kako biste stvorili neprijatelje i dodali ih u novu klasu gameObjects:
Preuredi funkciju `createEnemies()` da stvori neprijatelje i ubaci ih u novu klasu gameObjects:
```javascript
function createEnemies() {
@ -456,14 +636,14 @@ Gore navedeno će pokrenuti HTTP poslužitelj na adresi `http://localhost:5000`.
}
```
**Što radi stvaranje neprijatelja:**
- **Izračunava** položaje za centriranje neprijatelja na ekranu
- **Stvara** mrežu neprijatelja koristeći ugniježđene petlje
- **Dodjeljuje** sliku neprijatelja svakom objektu neprijatelja
- **Dodaje** svakog neprijatelja u globalni niz objekata igre
i dodajte funkciju `createHero()` koja će obaviti sličan proces za heroja.
**Što kreiranje neprijatelja radi:**
- **Izračunava** pozicije kako bi neprijatelji bili centrirani na zaslonu
- **Stvara** mrežu neprijatelja koristeći ugniježdene petlje
- **Dodjeljuje** sliku neprijatelja svakom objektu neprijatelja
- **Dodaje** svakog neprijatelja globalnom polju game objekata
te dodaj funkciju `createHero()` koja radi sličan proces za heroja.
```javascript
function createHero() {
hero = new Hero(
@ -474,28 +654,48 @@ i dodajte funkciju `createHero()` koja će obaviti sličan proces za heroja.
gameObjects.push(hero);
}
```
**Što radi kreacija heroja:**
- **Pozicionira** heroja na dno, u sredinu ekrana
- **Dodjeljuje** sliku heroja objektu heroja
- **Dodaje** heroja u niz objekata igre za prikaz
i na kraju, dodajte funkciju `drawGameObjects()` za početak crtanja:
**Što kreiranje heroja radi:**
- **Pozicionira** heroja na donji centar zaslona
- **Dodjeljuje** herojevu sliku hero objektu
- **Dodaje** heroja u polje game objekata za prikazivanje
i na kraju, dodaj funkciju `drawGameObjects()` za početak crtanja:
```javascript
function drawGameObjects(ctx) {
gameObjects.forEach(go => go.draw(ctx));
}
```
**Razumijevanje funkcije crtanja:**
- **Iterira** kroz sve objekte igre u nizu
- **Poziva** metodu `draw()` na svakom objektu
- **Prosljeđuje** kontekst platna kako bi se objekti mogli sami prikazati
Vaši neprijatelji trebali bi početi napredovati prema vašem svemirskom brodu heroja!
}
}
**Razumijevanje funkcije crtanja:**
- **Prolazi** kroz sve game objekte u polju
- **Poziva** metodu `draw()` za svaki objekt
- **Prosljeđuje** kontekst platna kako bi se objekti mogli prikazati
### 🔄 **Pedagoški pregled**
**Potpuno razumijevanje sistema igre**: Provjeri svoje znanje o cijeloj arhitekturi:
- ✅ Kako nasljeđivanje omogućuje Hero i Enemy da dijele zajednička svojstva GameObject-a?
- ✅ Zašto pub/sub obrazac čini tvoj kod lakše održivim?
- ✅ Koju ulogu igra petlja igre u stvaranju glatke animacije?
- ✅ Kako event listeneri povezuju korisnički unos s ponašanjem objekata u igri?
**Integracija sustava**: Tvoja igra sada demonstrira:
- **Objektno orijentirani dizajn**: Osnovne klase sa specijaliziranim nasljeđivanjem
- **Arhitektura vođena događajima**: Pub/sub obrazac za labavu povezanost
- **Okvir za animaciju**: Petlja igre s dosljednim ažuriranjima frameova
- **Rukovanje unosom**: Tipkovni događaji s onemogućavanjem default ponašanja
- **Upravljanje resursima**: Učitavanje slika i rendering spriteova
**Profesionalni obrasci**: Implementirao si:
- **Odvajanje odgovornosti**: Logika, unos i prikaz su odvojeni
- **Polimorfizam**: Svi game objekti dijele zajedničko sučelje za crtanje
- **Slanje poruka**: Čista komunikacija između komponenti
- **Upravljanje resursima**: Učinkovito rukovanje spriteovima i animacijama
Tvoji neprijatelji bi trebali početi napredovati prema tvom hero svemirskom brodu!
}
}
```
and add a `createHero()` function to do a similar process for the hero.
@ -510,68 +710,190 @@ Vaši neprijatelji trebali bi početi napredovati prema vašem svemirskom brodu
gameObjects.push(hero);
}
```
i na kraju, dodajte funkciju `drawGameObjects()` za početak crtanja:
i na kraju, dodaj funkciju `drawGameObjects()` za početak crtanja:
```javascript
function drawGameObjects(ctx) {
gameObjects.forEach(go => go.draw(ctx));
}
```
Vaši neprijatelji trebali bi početi napredovati prema vašem svemirskom brodu heroja!
Tvoji neprijatelji bi trebali početi napredovati prema tvom hero svemirskom brodu!
---
## Izazov GitHub Copilot Agent 🚀
## GitHub Copilot Agent Izazov 🚀
Evo izazova koji će poboljšati završnu obradu vaše igre: dodavanje granica i glatkih kontrola. Trenutno vaš heroj može odletjeti izvan ekrana, a kretanje može djelovati trzavo.
Evo izazova koji će poboljšati polirani izgled tvoje igre: dodavanje granica i glatkih kontrola. Trenutno tvoj heroj može odletjeti s ekrana, a kretanje može izgledati isprekidano.
**Vaša misija:** Učinite da vaš svemirski brod djeluje realističnije implementacijom granica ekrana i fluidnog kretanja. To je slično načinu na koji NASA-ini sustavi za kontrolu leta sprječavaju svemirske letjelice da prekorače sigurne operativne parametre.
**Tvoja misija:** Učini da tvoj svemirski brod izgleda realističnije implementirajući granice ekrana i tečno kretanje. Ovo je slično kao kako NASA-in sustav upravljanja letom sprječava da svemirske letjelice prelaze sigurne operativne parametre.
**Što treba izgraditi:** Stvorite sustav koji drži svemirski brod heroja na ekranu i učinite da kontrole djeluju glatko. Kada igrači drže pritisnutu tipku sa strelicom, brod bi trebao kliziti kontinuirano, umjesto da se kreće u diskretnim koracima. Razmislite o dodavanju vizualne povratne informacije kada brod dosegne granice ekrana – možda suptilni efekt koji označava rub područja igre.
**Evo što trebaš napraviti:** Kreiraj sustav koji drži tvoj hero svemirski brod na ekranu i učini kontrole glatkim. Kada igrači drže pritisnutu tipku strelice, brod bi trebao kliziti kontinuirano umjesto da se pomiče u diskretnim koracima. Razmotri dodavanje vizualne povratne informacije kada brod dosegne granice ekrana – možda diskretan efekt koji označava rub područja igre.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznaj više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov
## 🚀 Izazov
Organizacija koda postaje sve važnija kako projekti rastu. Možda ste primijetili da vaš dokument postaje pretrpan funkcijama, varijablama i klasama koje su sve izmiješane. To me podsjeća na način na koji su inženjeri organizirali kod za misiju Apollo, stvarajući jasne, održive sustave na kojima su istovremeno mogle raditi različite ekipe.
Organizacija koda postaje sve važnija kako projekti rastu. Možda si primijetio da tvoja datoteka postaje zatrpana funkcijama, varijablama i klasama pomiješanim zajedno. To me podsjeća na to kako su inženjeri koji su organizirali Apollo misiju morali stvoriti jasne, održive sustave na kojima je moglo istovremeno raditi više timova.
**Vaša misija:**
Razmišljajte kao softverski arhitekt. Kako biste organizirali svoj kod tako da ga za šest mjeseci vi (ili vaš kolega) možete razumjeti? Čak i ako sve ostane u jednoj datoteci za sada, možete stvoriti bolju organizaciju:
**Tvoja misija:**
Razmišljaj kao softverski arhitekt. Kako bi organizirao svoj kod da bi ga nakon šest mjeseci ti (ili kolega) mogao razumjeti? Čak i ako sve ostane u jednoj datoteci za sada, možeš stvoriti bolju organizaciju:
- **Grupiranje povezanih funkcija**zajedno s jasnim zaglavljima komentara
- **Razdvajanje odgovornosti** - odvojite logiku igre od prikaza
- **Korištenje dosljednih konvencija imenovanja** za varijable i funkcije
- **Stvaranje modula** ili prostora imena za organizaciju različitih aspekata vaše igre
- **Dodavanje dokumentacije** koja objašnjava svrhu svakog glavnog dijela
Sve gradimo od nule, što je fantastično za učenje, ali evo male tajne – postoje nevjerojatni JavaScript okviri koji mogu obaviti velik dio posla za vas. Kada se osjećate ugodno s osnovama koje smo obradili, vrijedi [istražiti što je dostupno](https://github.com/collections/javascript-game-engines).
Izgrađivali smo sve ispočetka, što je fantastično za učenje, ali evo male tajne – postoje neki izvrsni JavaScript frameworkovi koji mogu obaviti puno tog teškog posla za tebe. Kad se osjećaš ugodno s temeljima koje smo pokrili, vrijedi [istražiti što je dostupno](https://github.com/collections/javascript-game-engines).
Razmislite o okvirima kao o dobro opremljenoj kutiji s alatima, umjesto da svaki alat izrađujete ručno. Oni mogu riješiti mnoge od onih izazova organizacije koda o kojima smo govorili, plus ponuditi značajke koje bi vam inače trebale tjedni da ih sami izradite.
Zamislite frameworkove kao dobro opremljeni alatni set umjesto da svaki alat izrađuješ ručno. Oni mogu riješiti mnoge izazove organizacije koda o kojima smo razgovarali, plus ponuditi značajke koje bi ti same gradile tjednima.
**Stvari koje vrijedi istražiti:**
- Kako game engine-i organiziraju kod – bit ćete zadivljeni pametnim obrascima koje koriste
- Trikovi za performanse kako bi igre na platnu radile glatko kao maslac
- Moderne značajke JavaScripta koje mogu učiniti vaš kod čišćim i lakšim za održavanje
- Različiti pristupi upravljanju objektima igre i njihovim odnosima
**Vrijedi istražiti:**
- Kako igraći motori organiziraju kod – bit ćeš zadivljen pametnim obrascima koje koriste
- Trikove za performanse kako bi igre na canvasu išle glatko
- Moderne JavaScript značajke koje mogu učiniti tvoj kod čišćim i održivijim
- Različite pristupe upravljanju objektima igre i njihovim odnosima
## Zadatak
## 🎯 Tvoj vremenski plan za usavršavanje animacije igre
[Komentirajte svoj kod](assignment.md)
```mermaid
timeline
title Napredak u učenju animacije i interakcije u igri
section Osnove kretanja (20 minuta)
Osnove animacije: Animacija bazirana na okvirima
: Ažuriranja položaja
: Koordinatni sustavi
: Glatko kretanje
section Sustavi događaja (25 minuta)
Korisnički unos: Rukovanje događajima tipkovnice
: Sprječavanje zadane radnje
: Svojstva objekta događaja
: Slušanje na razini prozora
section Arhitektura igre (30 minuta)
Dizajn objekata: Obrasci nasljeđivanja
: Izrada osnovne klase
: Specijalizirana ponašanja
: Polimorfni sučelja
section Obrasci komunikacije (35 minuta)
Implementacija Pub/Sub: Emitteri događaja
: Konstante poruka
: Labava povezanost
: Integracija sustava
section Ovladavanje petljom igre (40 minuta)
Sustavi u stvarnom vremenu: Kontrola brzine okvira
: Ciklus ažuriranja/renderiranja
: Upravljanje stanjima
: Optimizacija performansi
section Napredne tehnike (45 minuta)
Profesionalne značajke: Detekcija kolizije
: Simulacija fizike
: Stroj stanja
: Sustavi komponenti
section Koncepti game enginea (1 tjedan)
Razumijevanje okvira: Sustavi entiteta i komponenti
: Grafikoni scena
: Pipeline za resurse
: Profiliranje performansi
section Vještine produkcije (1 mjesec)
Profesionalni razvoj: Organizacija koda
: Suradnja u timu
: Strategije testiranja
: Optimizacija postavljanja
```
### 🛠️ Sažetak alata za razvoj tvoje igre
Nakon završetka ove lekcije, svladao si:
- **Principi animacije**: Kretanje na temelju frameova i glatki prijelazi
- [ ] Naučiti animacijske biblioteke poput GSAP-a ili stvoriti vlastiti animacijski motor
- [ ] Doprinijeti open source projektima razvoja igara i animacije
- [ ] Savladati optimizaciju performansi za grafički zahtjevne aplikacije
- [ ] Kreirati edukativni sadržaj o razvoju igara i animaciji
- [ ] Izgraditi portfelj koji prikazuje napredne vještine interaktivnog programiranja
**Primjene u stvarnom svijetu**: Tvoje vještine animacije igre direktno se primjenjuju na:
- **Interaktivne web aplikacije**: Dinamičke nadzorne ploče i sučelja u realnom vremenu
- **Vizualizaciju podataka**: Animirani grafikoni i interaktivna grafika
- **Edukacijski softver**: Interaktivne simulacije i alati za učenje
- **Mobilni razvoj**: Igračke upravljane dodirom i gestama
- **Desktop aplikacije**: Electron aplikacije s glatkim animacijama
- **Web animacije**: CSS i JavaScript animacijske biblioteke
**Profesionalne vještine koje si stekao**: Sada možeš:
- **Arhitektirati** sustave vođene događajima koji skaliraju s kompleksnošću
- **Implementirati** glatke animacije koristeći matematičke principe
- **Debugirati** složene interakcijske sustave koristeći alate za razvoj preglednika
- **Optimizirati** performanse igre za različite uređaje i preglednike
- **Dizajnirati** održive strukture koda koristeći dokazane obrasce
**Koncepti razvoja igara koje si svladao**:
- **Upravljanje frekvencijom frameova**: Razumijevanje FPS-a i kontrola vremena
- **Rukovanje unosom**: Višekanalni tipkovnički i event sustavi
- **Životni ciklus objekata**: Obrasci stvaranja, ažuriranja i uništenja
- **Sinkronizacija stanja**: Održavanje konzistentnog stanja igre kroz frameove
- **Arhitektura događaja**: Nepovezana komunikacija između sustava igre
**Sljedeća razina**: Spreman si dodati detekciju sudara, sustave bodovanja, zvučne efekte ili istražiti suvremene frameworkove za igre poput Phaser-a ili Three.js!
🌟 **Postignuće otključano**: Izgradio si kompletan interaktivni sustav igre s profesionalnim obrascima arhitekture!
## Zadatak
[Komentiraj svoj kod](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj je dokument preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku smatra se autoritativnim izvorom. Za važne informacije preporučuje se stručni ljudski prijevod. Nismo odgovorni za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz upotrebe ovog prijevoda.
Sjetite se trenutka u Star Warsu kada su protonski torpedi Lukea pogodili ispušni otvor Zvijezde smrti. Ta precizna detekcija sudara promijenila je sudbinu galaksije! U igrama, detekcija sudara funkcionira na isti način - određuje kada objekti međusobno djeluju i što se događa nakon toga.
U ovoj lekciji dodat ćete lasersko oružje svojoj svemirskoj igri i implementirati detekciju sudara. Baš kao što NASA-ini planeri misija izračunavaju putanje svemirskih letjelica kako bi izbjegli krhotine, naučit ćete otkriti kada se objekti u igri presijecaju. Razložit ćemo to na korake koji se mogu lako pratiti.
Na kraju, imat ćete funkcionalni sustav borbe u kojem laseri uništavaju neprijatelje, a sudari pokreću događaje u igri. Isti principi detekcije sudara koriste se u svemu, od simulacija fizike do interaktivnih web sučelja.
✅ Malo istražite o prvoj računalnoj igri ikada napisanoj. Koja je bila njezina funkcionalnost?
# Izgradnja svemirske igre, 4. dio: Dodavanje lasera i detekcija sudara
Razmislite o trenutku u Ratovima zvijezda kada su Lukine proton torpede pogodile ispušni otvor Zvijezde smrti. Ta precizna detekcija sudara promijenila je sudbinu galaksije! U igrama, detekcija sudara funkcionira na isti način – određuje kada se objekti međusobno dodiruju i što se događa potom.
U ovom ćemo satu dodati lasersko oružje u vašu svemirsku igru i implementirati detekciju sudara. Baš kao što NASA-ini planerovi misija izračunavaju putanje letjelica da izbjegnu svemirski otpad, naučit ćete kako detektirati kada se nešto u igri presijeca. Razbit ćemo to na upravljive korake koji se nadovezuju jedan na drugi.
Na kraju ćete imati funkcionalan borbeni sustav u kojem laseri uništavaju neprijatelje, a sudari pokreću događaje u igri. Isti principi detekcije sudara koriste se u svemu od fizikalnih simulacija do interaktivnih web sučelja.
```mermaid
mindmap
root((Detekcija sudara))
Physics Concepts
Rectangle Boundaries
Intersection Testing
Coordinate Systems
Separation Logic
Game Objects
Laser Projectiles
Enemy Ships
Hero Character
Collision Zones
Lifecycle Management
Object Creation
Movement Updates
Destruction Marking
Memory Cleanup
Event Systems
Keyboard Input
Collision Events
Game State Changes
Audio/Visual Effects
Performance
Efficient Algorithms
Frame Rate Optimization
Memory Management
Spatial Partitioning
```
✅ Istražite malo o prvoj ikad napisanoj računalnoj igri. Koja je bila njezina funkcionalnost?
## Detekcija sudara
Detekcija sudara funkcionira poput senzora blizine na lunarnom modulu Apollo - stalno provjerava udaljenosti i pokreće upozorenja kada se objekti previše približe. U igrama, ovaj sustav određuje kada objekti međusobno djeluju i što bi se trebalo dogoditi.
Detekcija sudara radi slično kao senzori blizine na Apollo lunarnom modulu – neprestano provjerava udaljenosti i aktivira upozorenja kad objekti dođu preblizu. U igrama ovaj sustav određuje kada se objekti međusobno dodiruju i što treba slijediti.
Pristup koji ćemo koristiti tretira svaki objekt igre kao pravokutnik, slično kako sustavi za kontrolu zračnog prometa koriste pojednostavljene geometrijske oblike za praćenje zrakoplova. Ova metoda pravokutnika može se činiti osnovnom, ali je računalno učinkovita i dobro funkcionira za većinu scenarija u igrama.
Pristup koji ćemo koristiti tretira svaki igraći objekt kao pravokutnik, slično kao što sustavi za kontrolu zračnog prometa koriste pojednostavljene geometrijske oblike za praćenje zrakoplova. Ova pravokutna metoda može se činiti osnovnom, ali je računalno učinkovita i dobro radi u većini scenarija igara.
### Predstavljanje pravokutnika
Svaki objekt igre treba granice koordinata, slično kako je rover Mars Pathfinder mapirao svoju lokaciju na površini Marsa. Evo kako definiramo te granice koordinata:
Svaki igraći objekt treba koordinate granica, slično kao što je Mars Pathfinder rover mapirao svoju lokaciju na površini Marsa. Evo kako definiramo te granične koordinate:
```mermaid
flowchart TD
A["🎯 Igraći objekt"] --> B["📍 Pozicija (x, y)"]
A --> C["📏 Dimenzije (širina, visina)"]
B --> D["Gore: y"]
B --> E["Lijevo: x"]
C --> F["Dolje: y + visina"]
C --> G["Desno: x + širina"]
D --> H["🔲 Pravokutne granice"]
E --> H
F --> H
G --> H
H --> I["Spremno za detekciju sudara"]
style A fill:#e3f2fd
style H fill:#e8f5e8
style I fill:#fff3e0
```
```javascript
rectFromGameObject() {
return {
@ -42,16 +109,38 @@ rectFromGameObject() {
}
```
**Razložimo ovo:**
- **Gornji rub**: To je samo mjesto gdje vaš objekt počinje vertikalno (njegova y pozicija)
- **Lijevi rub**: Mjesto gdje počinje horizontalno (njegova x pozicija)
- **Donji rub**: Dodajte visinu na y poziciju - sada znate gdje završava!
- **Desni rub**: Dodajte širinu na x poziciju - i imate kompletne granice
**Objasnimo ovo:**
- **Gornja ivica**: To je samo mjesto gdje objekt počinje okomito (njegov y položaj)
- **Lijeva ivica**: Gdje počinje vodoravno (njegov x položaj)
- **Donja ivica**: Dodajte visinu na y položaj – sada znate gdje završava!
- **Desna ivica**: Dodajte širinu na x položaj – i imate kompletne granice
### Algoritam presijecanja
### Algoritam za presjek
Otkrivanje presijecanja pravokutnika koristi logiku sličnu onoj kako svemirski teleskop Hubble određuje preklapanje nebeskih objekata u svom vidnom polju. Algoritam provjerava razdvojenost:
Detekcija presjeka pravokutnika koristi logiku sličnu onoj kojom svemirski teleskop Hubble utvrđuje preklapanje nebeskih objekata u svom vidnom polju. Algoritam provjerava odvajanje:
```mermaid
flowchart LR
A["Pravokutnik 1"] --> B{"Testovi odvajanja"}
C["Pravokutnik 2"] --> B
B --> D["Lijevo R2 > desno R1?"]
B --> E["Desno R2 <lijevoR1?"]
B --> F["Gore R2 > dolje R1?"]
B --> G["Dolje R2 <goreR1?"]
D --> H{"Ima li Istinitih?"}
E --> H
F --> H
G --> H
H -->|Da| I["❌ Nema sudara"]
H -->|Ne| J["✅ Sudar otkriven"]
style B fill:#e3f2fd
style I fill:#ffebee
style J fill:#e8f5e8
```
```javascript
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
@ -61,60 +150,105 @@ function intersectRect(r1, r2) {
}
```
**Test razdvojenosti funkcionira poput radarskih sustava:**
**Test odvajanja radi kao radarski sustavi:**
- Je li pravokutnik 2 potpuno desno od pravokutnika 1?
- Je li pravokutnik 2 potpuno lijevo od pravokutnika 1?
- Je li pravokutnik 2 potpuno ispod pravokutnika 1?
- Je li pravokutnik 2 potpuno iznad pravokutnika 1?
Ako nijedan od ovih uvjeta nije istinit, pravokutnici se moraju preklapati. Ovaj pristup odražava način na koji operateri radara određuju jesu li dva zrakoplova na sigurnoj udaljenosti.
Ako nijedan od ovih uvjeta nije istinit, pravokutnici se moraju preklapati. Ovaj pristup nalikuje načinu na koji radarski operateri određuju jesu li dva zrakoplova na sigurnoj udaljenosti.
## Upravljanje životnim ciklusom objekata
Kada laser pogodi neprijatelja, oba objekta moraju biti uklonjena iz igre. Međutim, brisanje objekata usred petlje može uzrokovati rušenje - lekcija naučena na teži način u ranim računalnim sustavima poput Apollo Guidance Computer. Umjesto toga, koristimo pristup "označavanja za brisanje" koji sigurno uklanja objekte između okvira.
Kad laser pogodi neprijatelja, oba objekta moraju biti uklonjena iz igre. Međutim, brisanje objekata tijekom petlje može uzrokovati rušenje – lekcija naučena na teži način u ranim računalnim sustavima poput Apollo Guidance Computera. Umjesto toga, koristimo pristup "označi za brisanje" koji sigurno uklanja objekte između frejmova.
Evo kako označavamo nešto za uklanjanje:
```mermaid
stateDiagram-v2
[*] --> Active: Objekt Kreiran
Active --> Collided: Detektirana Kolizija
Collided --> MarkedDead: Postavi mrtav = istina
MarkedDead --> Filtered: Sljedeći Frejm
Filtered --> [*]: Objekt Uklonjen
Active --> OutOfBounds: Napušta Ekran
OutOfBounds --> MarkedDead
note right of MarkedDead
Sigurno nastaviti
trenutni frejm
end note
note right of Filtered
Objekti uklonjeni
između frejmova
end note
```
Evo kako nešto označimo za uklanjanje:
```javascript
// Mark object for removal
// Označi objekt za uklanjanje
enemy.dead = true;
```
**Zašto ovaj pristup funkcionira:**
- Označavamo objekt kao "mrtav", ali ga ne brišemo odmah
- To omogućuje trenutnom okviru igre da se sigurno završi
- Nema rušenja zbog pokušaja korištenja nečega što je već uklonjeno!
- To dozvoljava trenutnom frejmu igre da se sigurno završi
- Ne dolazi do rušenja uzrokovanih korištenjem nepostojećih objekata!
Zatim filtriramo označene objekte prije sljedećeg ciklusa renderiranja:
Zatim filtrirajte označene objekte prije sljedećeg ciklusa prikaza:
```javascript
gameObjects = gameObjects.filter(go => !go.dead);
```
**Što ovo filtriranje radi:**
- Stvara svježi popis samo s "živim" objektima
- Izbacuje sve što je označeno kao mrtvo
- Održava vašu igru glatkom
- Sprječava nakupljanje uništenih objekata u memoriji
**Što radi ovo filtriranje:**
- Stvara novi popis samo s "živim" objektima
- Izbacuje sve označene kao mrtve
- Održava igru glatkom
- Sprječava gomilanje uništenih objekata i time preopterećenje memorije
## Implementacija mehanike lasera
## Implementacija laserskih mehanika
Projektili lasera u igrama funkcioniraju na istom principu kao fotonski torpedi u Zvjezdanim stazama - to su diskretni objekti koji putuju ravno dok ne udare u nešto. Svaki pritisak na razmaknicu stvara novi laserski objekt koji se kreće preko ekrana.
Laserski projektili u igrama funkcioniraju na isti način kao fotonska torpeda u Zvjezdanim stazama – to su odvojeni objekti koji putuju ravnim linijama dok ne udare u nešto. Svaki pritisak tipke razmaka stvara novi laserski objekt koji se kreće preko zaslona.
Da bi ovo funkcioniralo, trebamo koordinirati nekoliko različitih dijelova:
Da bi to funkcioniralo, moramo koordinirati nekoliko različitih dijelova:
**Ključne komponente za implementaciju:**
- **Stvaranje** laserskih objekata koji se pojavljuju iz pozicije heroja
- **Rukovanje** unosom s tipkovnice za pokretanje stvaranja lasera
- **Upravljanje** kretanjem lasera i životnim ciklusom
- **Implementacija** vizualnog prikaza za laserske projektile
- **Kreirati** laserske objekte koji se pojavljuju sa položaja heroja
- **Obraditi** unos s tipkovnice za pokretanje stvaranja lasera
- **Upravljati** kretanjem i životnim ciklusom lasera
- **Implementirati** vizualni prikaz laserskih projektila
## Implementacija kontrole brzine pucanja
## Implementacija kontrole brzine paljbe
Neograničene brzine pucanja preopteretile bi motor igre i učinile igru prelaganom. Pravi sustavi oružja suočavaju se sa sličnim ograničenjima - čak su i fazeri USS Enterprisea trebali vrijeme za ponovno punjenje između pucanja.
Neograničena brzina paljbe preopteretila bi motor igre i učinila igranje previše laganim. Realni sustavi oružja imaju slična ograničenja – čak su i fazeri USS Enterprise morali imati vrijeme za ponovno punjenje između pucnjeva.
Implementirat ćemo sustav hlađenja koji sprječava prekomjerno pucanje, a istovremeno održava responzivne kontrole:
Implementirat ćemo sustav hlađenja (cooldown) koji sprječava brzo i masovno pucanje, a istovremeno održava responzivne kontrole:
```mermaid
sequenceDiagram
participant Player
participant Weapon
participant Cooldown
participant Game
Player->>Weapon: Pritisni razmak
Weapon->>Cooldown: Provjeri je li spremno
alt Oružje je spremno
Cooldown->>Weapon: spremno = istina
Weapon->>Game: Kreiraj Laser
Weapon->>Cooldown: Pokreni novi cooldown
Cooldown->>Cooldown: spremno = laž
Note over Cooldown: Čekaj 500ms
Cooldown->>Cooldown: spremno = istina
else Oružje se hladi
Cooldown->>Weapon: spremno = laž
Weapon->>Player: Nema akcije
end
```
```javascript
class Cooldown {
constructor(time) {
@ -132,42 +266,58 @@ class Weapon {
fire() {
if (!this.cooldown || this.cooldown.cool) {
// Create laser projectile
// Stvori laserski projektil
this.cooldown = new Cooldown(500);
} else {
// Weapon is still cooling down
// Oružje se još hladi
}
}
}
```
**Kako sustav hlađenja funkcionira:**
- Kada se stvori, oružje postaje "vruće" (ne može pucati još)
- Nakon isteka vremena, postaje "hladno" (spremno za pucanje)
**Kako cooldown funkcionira:**
- Kad se stvori, oružje je "vruće" (još ne može pucati)
- Nakon isteka vremena, ono postaje "hladno" (spremno za paljbu)
- Prije pucanja provjeravamo: "Je li oružje hladno?"
- Ovo sprječava prekomjerno klikanje, a istovremeno održava responzivne kontrole
- Ovo sprječava spamiranje tipke, a kontrolama omogućuje brz odgovor
✅ Pogledajte lekciju 1 u seriji svemirske igre kako biste se podsjetili na sustave hlađenja.
✅ Podsjetite se na lekciju 1 u seriji svemirskih igara o cooldown sustavima.
## Izgradnja sustava detekcije sudara
Proširit ćete postojeći kod svoje svemirske igre kako biste stvorili sustav detekcije sudara. Kao automatizirani sustav izbjegavanja sudara Međunarodne svemirske postaje, vaša igra će kontinuirano pratiti pozicije objekata i reagirati na presijecanja.
Proširit ćete postojeći kod svemirske igre za stvaranje sustava detekcije sudara. Poput automatiziranog sustava za izbjegavanje sudara na Međunarodnoj svemirskoj postaji, vaša će igra stalno nadzirati položaje objekata i reagirati na njihove presjeke.
Počevši od koda iz prethodne lekcije, dodati ćete detekciju sudara s pravilima koja određuju interakcije objekata.
> 💡 **Savjet za profesionalce**: Sprite lasera već je uključen u vašu mapu resursa i referenciran u kodu, spreman za korištenje.
Počevši od koda iz prethodne lekcije, dodat ćete detekciju sudara s posebnim pravilima koja upravljaju interakcijama objekata.
### Pravila sudara za implementirati
> 💡 **Pro Savjet**: Sprite za laser već je uključen u vašu mapu s resursima i referenciran u vašem kodu, spreman za implementaciju.
**Mehanike igre za dodati:**
1. **Laser pogodi neprijatelja**: neprijateljski objekt se uništava kad ga pogodi laserski projektil
2. **Laser dotakne granicu zaslona**: laser se uklanja kad dosegne gornju ivicu zaslona
3. **Sudaranje neprijatelja i heroja**: oba objekta uništavaju se kad se dodirnu
4. **Neprijatelj dosegne dno**: uvjet za kraj igre kad neprijatelji stignu do dna zaslona
### Pravila sudara za implementaciju
### 🔄 **Pedagoški pregled**
**Osnove detekcije sudara**: Prije implementacije, provjerite razumijevanje:
- ✅ Kako pravokutne granice definiraju zone sudara
- ✅ Zašto je testiranje za razdvojenost učinkovitije od izračuna presjeka
- ✅ Važnost upravljanja životnim ciklusom objekata u petljama igre
- ✅ Kako sustavi vođeni događajima koordiniraju reakcije sudara
**Mehanika igre za dodavanje:**
1. **Laser pogodi neprijatelja**: Objekt neprijatelja se uništava kada ga pogodi laserski projektil
2. **Laser pogodi granicu ekrana**: Laser se uklanja kada dosegne gornji rub ekrana
3. **Sudar neprijatelja i heroja**: Oba objekta se uništavaju kada se presijeku
4. **Neprijatelj dosegne dno**: Uvjet za kraj igre kada neprijatelji dosegnu donji rub ekrana
**Brzi samoprovjera**: Što bi se dogodilo da odmah brišete objekte umjesto da ih označite?
*Odgovor: Brisanje u sred petlje može uzrokovati rušenje ili preskakanje objekata tijekom iteracije*
## Postavljanje vašeg razvojnog okruženja
**Razumijevanje fizike**: Sad poznajete:
- **Sustave koordinata**: Kako položaj i dimenzije stvaraju granice
- **Logiku presjeka**: Matematičke principe iza detekcije sudara
- **Optimizaciju performansi**: Zašto su učinkoviti algoritmi važni u real-time sustavima
- **Upravljanje memorijom**: Sigurne prakse životnog ciklusa objekata za stabilnost
Dobre vijesti - već smo postavili većinu temelja za vas! Svi vaši resursi igre i osnovna struktura čekaju u podmapi `your-work`, spremni za dodavanje cool značajki sudara.
## Postavljanje razvojne okoline
Dobre vijesti - već smo postavili većinu priprema za vas! Svi vaši resursi igre i osnovna struktura čekaju vas u podmapi `your-work`, spremni za dodavanje cool značajki sudara.
### Struktura projekta
@ -182,34 +332,59 @@ Dobre vijesti - već smo postavili većinu temelja za vas! Svi vaši resursi igr
```
**Razumijevanje strukture datoteka:**
- **Sadrži** sve slike spriteova potrebne za objekte igre
- **Sadrži** sve sprite slike potrebne za igraće objekte
- **Uključuje** glavni HTML dokument i JavaScript aplikacijsku datoteku
- **Pruža** konfiguraciju paketa za lokalni razvojni server
- **Nudi** konfiguraciju paketa za lokalni razvojni poslužitelj
### Pokretanje razvojnog servera
### Pokretanje razvojog poslužitelja
Navigirajte do svoje mape projekta i pokrenite lokalni server:
Dođite u mapu projekata i pokrenite lokalni poslužitelj:
```bash
cd your-work
npm start
```
**Ova sekvenca naredbi:**
- **Mijenja** direktorij na vašu radnu mapu projekta
- **Pokreće** lokalni HTTP server na `http://localhost:5000`
- **Poslužuje** vaše datoteke igre za testiranje i razvoj
- **Omogućuje**razvoj uživo s automatskim osvježavanjem
**Ova naredba:**
- **Mijenja** direktorij u vašu radnu mapu projekta
- **Pokreće** lokalni HTTP poslužitelj na `http://localhost:5000`
- **Servira** vaše datoteke igre za testiranje i razvoj
- **Omogućuje**živi razvoj s automatskim ponovnim učitavanjem
Otvorite svoj preglednik i idite na `http://localhost:5000`kako biste vidjeli trenutno stanje svoje igre s prikazanim herojem i neprijateljima na ekranu.
Otvorite preglednik i idite na `http://localhost:5000`da vidite trenutačno stanje igre s prikazanim herojem i neprijateljima.
### Implementacija korak po korak
Kao sustavni pristup koji je NASA koristila za programiranje svemirske letjelice Voyager, implementirat ćemo detekciju sudara metodično, gradeći svaki komponent korak po korak.
Poput sustavnog pristupa NASA-e pri programiranju Voyager svemirskog broda, implementirat ćemo detekciju sudara metodično, gradeći svaki dio jedan po jedan.
- **Arhitekturu vođenu događajima**: Odvojene sustave za reakciju na sudare
- **Integraciju u game loop**: Ažuriranja fizike i koordinaciju renderiranja po frejmu
- **Sisteme unosa**: Odzivne kontrole s ograničenjem brzine i povratnom informacijom
- **Upravljanje memorijom**: Učinkovite strategije poolinga i čišćenja objekata
**Primjena u stvarnom svijetu**: Vaše vještine detekcije sudara primjenjuju se izravno na:
- **Interaktivne simulacije**: Znanstveno modeliranje i edukativni alati
- **Dizajn korisničkog sučelja**: Interakcije povlačenja i dodira
- **Vizualizaciju podataka**: Interaktivni grafovi i klikabilni elementi
- **Mobilni razvoj**: Prepoznavanje dodira i rukovanje sudarima
- **Programiranje robotike**: Planiranje putanje i izbjegavanje prepreka
- **Računalnu grafiku**: Praćenje zraka i prostorne algoritme
**Profesionalne stečeno vještine**: Sada možete:
- **Dizajnirati** učinkovite algoritme za detekciju sudara u stvarnom vremenu
- **Implementirati** fizičke sustave koji skaliraju s kompleksnošću objekata
- **Otkloniti greške** u složenim interakcijskim sustavima koristeći matematičke principe
- **Optimizirati** performanse za različiti hardver i mogućnosti preglednika
- **Arhitektirati** održive igre sustave koristeći dokazane dizajnerske obrasce
### Testiranje vaše implementacije
**Savladani koncepti razvoja igara**:
- **Simulacija fizike**: Detekcija i reakcija na sudare u stvarnom vremenu
- **Inženjering performansi**: Optimizirani algoritmi za interaktivne aplikacije
- **Sustavi događaja**: Odvojena komunikacija između komponenti igre
- **Upravljanje objektima**: Učinkoviti obrasci životnog ciklusa za dinamički sadržaj
- **Rukovanje unosom**: Odgovorne kontrole s odgovarajućim povratom
Vaša svemirska igra sada ima kompletan sustav detekcije sudara i mehaniku borbe. 🚀 Testirajte ove nove mogućnosti:
- **Navigirajte** strelicama kako biste provjerili kontrole kretanja
- **Pucajte lasere** razmaknicom - primijetite kako sustav hlađenja sprječava prekomjerno klikanje
- **Promatrajte sudare** kada laseri pogode neprijatelje, pokrećući uklanjanje
- **Provjerite čišćenje** kako uništeni objekti nestaju iz igre
**Sljedeća razina**: Spremni ste istražiti napredne fizikalne motore poput Matter.js, implementirati 3D detekciju sudara ili izgraditi složene sustave čestica!
Uspješno ste implementirali sustav detekcije sudara koristeći iste matematičke principe koji vode navigaciju svemirskih letjelica i robotiku.
🌟 **Postignuće otključano**: Izgradili ste kompletan sustav interakcije baziran na fizici s profesionalnom detekcijom sudara!
## GitHub Copilot Agent izazov 🚀
## Izazov GitHub Copilot Agenta 🚀
Koristite Agent način za dovršavanje sljedećeg izazova:
Iskoristite Agent mod za dovršetak sljedećeg izazova:
**Opis:** Poboljšajte sustav detekcije sudara implementacijom power-upova koji se nasumično pojavljuju i pružaju privremene sposobnosti kada ih pokupi herojska letjelica.
**Opis:** Poboljšajte sustav detekcije sudara implementirajući power-upove koji se nasumično pojavljuju i pružaju privremene sposobnosti kada ih prikupi herojski brod.
**Zadatak:** Kreirajte klasu PowerUp koja proširuje GameObject i implementirajte detekciju sudara između heroja i power-upova. Dodajte najmanje dvije vrste power-upova: jedan koji povećava brzinu pucanja (smanjuje hlađenje) i drugi koji stvara privremeni štit. Uključite logiku za stvaranje power-upova u nasumičnim intervalima i pozicijama.
**Zadatak:** Kreirajte klasu PowerUp koja nasljeđuje GameObject i implementirajte detekciju sudara između heroja i power-upova. Dodajte najmanje dvije vrste power-upova: jedan koji povećava brzinu paljbe (smanjuje cooldown) i drugi koji stvara privremeni štit. Uključite logiku pojavljivanja koja kreira power-upove u nasumičnim intervalima i pozicijama.
---
## 🚀 Izazov
Dodajte eksploziju! Pogledajte resurse igre u [repozitoriju Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) i pokušajte dodati eksploziju kada laser pogodi vanzemaljca.
Dodajte eksploziju! Pogledajte zalihe igre u [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) i pokušajte dodati eksploziju kada laser pogodi izvanzemaljca
Eksperimentirajte s intervalima u svojoj igri do sada. Što se događa kada ih promijenite? Pročitajte više o [JavaScript vremenskim događajima](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
Eksperimentirajte s intervalima u vašoj igri do sada. Što se događa kada ih promijenite? Pročitajte više o [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
## Zadatak
@ -459,5 +770,7 @@ Eksperimentirajte s intervalima u svojoj igri do sada. Što se događa kada ih p
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba se smatrati službenim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja proizašla iz korištenja ovog prijevoda.
# Izgradnja svemirske igre, dio 5: Bodovi i životi
## Kviz prije predavanja
[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/quiz/37)
Spremni da vaša svemirska igra postane prava igra? Dodajmo bodovanje i upravljanje životima - ključne mehanike koje su transformirale rane arkadne igre poput Space Invadersa iz jednostavnih demonstracija u zaraznu zabavu. Ovo je trenutak kada vaša igra postaje zaista igriva.
## Prikazivanje teksta na ekranu - Glas vaše igre
# Izrada igre u svemiru, dio 5: Bodovanje i životi
Spremni da vašoj igri u svemiru date stvarni osjećaj igre? Dodajmo bodovanje i upravljanje životima - osnovne mehanike koje su prve arkadne igre poput Space Invaders pretvorile iz jednostavnih demonstracija u zaraznu zabavu. Ovo je trenutak kada vaša igra postaje zaista igriva.
```mermaid
mindmap
root((Sustavi povratnih informacija u igrama))
Visual Communication
Prikaz teksta
Prikaz ikona
Psihologija boja
Dizajn izgleda
Scoring Mechanics
Vrijednosti bodova
Vremenski raspored nagrada
Praćenje napretka
Sustavi postignuća
Life Management
Rizik naspram nagrade
Agencija igrača
Uravnoteženost težine
Mehanike oporavka
User Experience
Trenutni povratni signal
Jasne informacije
Emocionalni odgovor
Petlje angažmana
Implementation
Canvas API
Upravljanje stanjima
Sustavi događaja
Učinkovitost
```
## Iscrtavanje teksta na zaslon - glas vaše igre
Kako bismo prikazali vaš rezultat, moramo naučiti kako prikazati tekst na platnu. Metoda `fillText()` vaš je glavni alat za to - ista tehnika koja se koristila u klasičnim arkadnim igrama za prikaz rezultata i informacija o statusu.
Za prikaz rezultata, trebamo naučiti kako prikazati tekst na platnu (canvas). Metoda `fillText()` je vaš glavni alat za to - ista tehnika koja se koristila u klasičnim arkadnim igrama za prikaz bodova i statusnih informacija.
```mermaid
flowchart LR
A["📝 Tekstualni sadržaj"] --> B["🎨 Stiliziranje"]
B --> C["📍 Pozicioniranje"]
C --> D["🖼️ Renderiranje platna"]
E["Obitelj fonta"] --> B
F["Veličina fonta"] --> B
G["Boja"] --> B
H["Poravnanje"] --> B
I["X Koordinata"] --> C
J["Y Koordinata"] --> C
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
Imate potpunu kontrolu nad izgledom teksta:
```javascript
@ -28,24 +92,74 @@ ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);
```
✅ Pogledajte više o [dodavanju teksta na platno](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - mogli biste se iznenaditi koliko kreativni možete biti s fontovima i stilovima!
✅ Zaronite dublje u [dodavanje teksta na platno](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - možda ćete biti iznenađeni koliko kreativni možete biti s fontovima i stiliziranjem!
## Životi - Više od samo broja
## Životi - Više od broja
U dizajnu igara, "život" predstavlja marginu pogreške igrača. Ovaj koncept potječe još iz vremena fliper automata, gdje ste dobivali više kuglica za igru. U ranim video igrama poput Asteroids, životi su igračima omogućavali da riskiraju i uče iz svojih grešaka.
U dizajnu igara, "život" predstavlja granicu pogreške igrača. Ovaj koncept potječe od pinball automata, gdje ste dobivali više kuglica za igru. U ranijim videoigrama poput Asteroids, životi su igračima davali dozvolu za rizik i učenje iz pogrešaka.
Vizualna reprezentacija ima značajnu ulogu - prikazivanje ikona brodova umjesto samo "Životi: 3" stvara trenutnu vizualnu prepoznatljivost, slično kao što su rani arkadni automati koristili ikonografiju za komunikaciju bez obzira na jezične barijere.
```mermaid
flowchart TD
A["🎮 Akcija Igrača"] --> B{"Procjena Rizika"}
B --> C["Visok Rizik, Visoka Nagrada"]
B --> D["Sigurna Strategija"]
C --> E{"Ishod"}
D --> F["Stalan Napredak"]
E -->|Uspjeh| G["🏆 Veliki Bodovi"]
E -->|Neuspjeh| H["💔 Izgubi Život"]
H --> I{"Preostali Životi?"}
I -->|Da| J["🔄 Pokušaj Ponovno"]
I -->|Ne| K["💀 Kraj Igre"]
J --> B
G --> B
F --> B
style C fill:#ffebee
style D fill:#e8f5e8
style G fill:#e3f2fd
style H fill:#fff3e0
```
Vizualni prikaz ima veliki značaj - prikazivanje ikona brodova umjesto samo "Životi: 3" stvara trenutnu vizualnu prepoznatljivost, slično kao što su rani arkadni automati koristili ikonografiju za komunikaciju preko jezičnih barijera.
## Izgradnja sustava nagrađivanja u vašoj igri
## Izgradnja sustava nagrađivanja vaše igre
Sada ćemo implementirati osnovne sustave povratnih informacija koji drže igrače angažiranima:
Sada ćemo implementirati osnovne sustave povratne informacije koji igrače drže angažiranima:
- **Sustav bodovanja**: Svaki uništeni neprijateljski brod donosi 100 bodova (okrugli brojevi su lakši za mentalno računanje). Rezultat se prikazuje u donjem lijevom kutu.
- **Brojač života**: Vaš junak počinje s tri života - standard koji su postavile rane arkadne igre kako bi uravnotežile izazov i igrivost. Svaki sudar s neprijateljem košta jedan život. Preostali životi prikazat će se u donjem desnom kutu koristeći ikone brodova .
```mermaid
sequenceDiagram
participant Player
participant GameEngine
participant ScoreSystem
participant LifeSystem
participant Display
Player->>GameEngine: Puca na neprijatelja
GameEngine->>ScoreSystem: Dodjeli bodove
ScoreSystem->>ScoreSystem: +100 bodova
ScoreSystem->>Display: Ažuriraj rezultat
Player->>GameEngine: Sudar s neprijateljem
GameEngine->>LifeSystem: Izgubi život
LifeSystem->>LifeSystem: -1 život
LifeSystem->>Display: Ažuriraj živote
alt Životi > 0
LifeSystem->>Player: Nastavi igru
else Životi = 0
LifeSystem->>GameEngine: Kraj igre
end
```
- **Sustav bodovanja**: Svaki uništeni neprijateljski brod donosi 100 bodova (zaokruženi brojevi lakši su igračima za mentalno računanje). Rezultat se prikazuje u donjem lijevom kutu.
- **Brojač života**: Vaš junak počinje s tri života - standard uspostavljen od ranih arkadnih igara za balansiranje izazova i igrivosti. Svaka kolizija s neprijateljem oduzima jedan život. Preostale živote prikazat ćemo u donjem desnom kutu koristeći ikone brodova .
## Krenimo s izgradnjom!
## Krenimo s izradom!
Prvo, postavite svoj radni prostor. Navigirajte do datoteka u mapi `your-work`. Trebali biste vidjeti ove datoteke:
Prvo postavite svoj radni prostor. Navigirajte do datoteka unutar podmape`your-work`. Trebali biste vidjeti ove datoteke:
```bash
-| assets
@ -57,24 +171,49 @@ Prvo, postavite svoj radni prostor. Navigirajte do datoteka u mapi `your-work`.
-| package.json
```
Za testiranje igre, pokrenite razvojni server iz mape `your_work`:
Za testiranje vaše igre, pokrenite razvojni server iz mape `your_work`:
```bash
cd your-work
npm start
```
Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u svom pregledniku kako biste vidjeli svoju igru. Testirajte kontrole pomoću strelica i pokušajte pucati na neprijatelje kako biste provjerili radi li sve.
Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u svojem pregledniku kako biste vidjeli svoju igru. Testirajte kontrole sa strelicama i pokušajte pucati na neprijatelje da provjerite radi li sve.
1. **Preuzmite vizualne resurse koji su vam potrebni**. Kopirajte datoteku `life.png` iz mape `solution/assets/` u svoju mapu `your-work`. Zatim dodajte `lifeImg` u svoju funkciju window.onload:
1. **Preuzmite vizualne resurse koji su vam potrebni**. Kopirajte datoteku `life.png` iz mape `solution/assets/` u svoju mapu `your-work`. Zatim dodajte lifeImg u svoju funkciju window.onload:
```javascript
lifeImg = await loadTexture("assets/life.png");
```
1. Ne zaboravite dodati `lifeImg` na popis resursa:
1. Ne zaboravite dodati `lifeImg` na svoj popis resursa:
```javascript
let heroImg,
@ -84,9 +223,9 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
eventEmitter = new EventEmitter();
```
2. **Postavite varijable za igru**. Dodajte kod za praćenje ukupnog rezultata (početak od 0) i preostalih života (početak od 3). Prikazat ćemo ih na ekranu kako bi igrači uvijek znali gdje se nalaze.
2. **Postavite varijable igre**. Dodajte kod za praćenje ukupnog rezultata (koji počinje od 0) i preostalih života (koji počinju od 3). Prikazat ćemo ih na ekranu kako bi igrači uvijek znali kada su.
3. **Implementirajte detekciju sudara**. Proširite svoju funkciju `updateGameObjects()` kako biste otkrili kada neprijatelji sudaraju s vašim junakom:
3. **Implementirajte detekciju sudara**. Proširite funkciju `updateGameObjects()` da detektira kada neprijatelji udare vašeg junaka:
```javascript
enemies.forEach(enemy => {
@ -97,15 +236,15 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
})
```
4. **Dodajte praćenje života i bodova svom junaku**.
1. **Inicijalizirajte brojače**. Ispod `this.cooldown = 0` u vašoj klasi `Hero`, postavite živote i bodove:
4. **Dodajte praćenje života i bodova vašem junaku**.
1. **Inicijalizirajte brojače**. Ispod `this.cooldown = 0` unutar klase `Hero` postavite život i bodove:
```javascript
this.life = 3;
this.points = 0;
```
1. **Prikazivanje ovih vrijednosti igraču**. Kreirajte funkcije za prikaz ovih vrijednosti na ekranu:
1. **Prikažite ove vrijednosti igraču**. Napravite funkcije za iscrtavanje tih vrijednosti na ekranu:
```javascript
function drawLife() {
@ -132,18 +271,34 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
```
1. **Povežite sve s vašom petljom igre**. Dodajte ove funkcije u svoju funkciju window.onload odmah nakon `updateGameObjects()`:
1. **Povežite sve u vašu glavnu petlju igre**. Dodajte ove funkcije u vašu funkciju window.onload odmah nakon `updateGameObjects()`:
```javascript
drawPoints();
drawLife();
```
1. **Implementirajte posljedice i nagrade u igri**. Sada ćemo dodati sustave povratnih informacija koji čine radnje igrača značajnima:
### 🔄 **Pedagoška provjera**
**Razumijevanje dizajna igre**: Prije implementacije posljedica, pobrinite se da razumijete:
- ✅ Kako vizualna povratna informacija komunicira stanje igre igračima
- ✅ Zašto dosljedni raspored elemenata korisničkog sučelja poboljšava upotrebljivost
- ✅ Psihologiju bodova i upravljanja životima
- ✅ Kako se iscrtavanje teksta na platnu razlikuje od HTML teksta
1. **Sudar košta živote**. Svaki put kad vaš junak udari u neprijatelja, gubi jedan život.
**Brzi samoprovjera**: Zašto arkadne igre uglavnom koriste zaokružene brojeve za bodovanje?
*Odgovor: Zaokruženi brojevi su lakši igračima za mentalno računanje i stvaraju zadovoljavajuće psihološke nagrade*
**Principi korisničkog iskustva**: Sada primjenjujete:
- **Vizualna hijerarhija**: Važne informacije smještene su istaknuto
- **Trenutna povratna informacija**: Ažuriranja u stvarnom vremenu na akcije igrača
- **Kognitivno opterećenje**: Jednostavna i jasna prezentacija informacija
- **Emocionalni dizajn**: Ikone i boje koje stvaraju vezu s igračem
1. **Implementirajte posljedice i nagrade igre**. Sada ćemo dodati sustave povratne informacije koji čine akcije igrača smislenima:
1. **Sudari oduzimaju živote**. Svaki put kada vaš junak udari neprijatelja, trebate izgubiti jedan život.
Dodajte ovu metodu u svoju klasu `Hero`:
Dodajte ovu metodu u klasu `Hero`:
```javascript
decrementLife() {
@ -154,9 +309,9 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
}
```
2. **Pucanje na neprijatelje donosi bodove**. Svaki uspješan pogodak donosi 100 bodova, pružajući trenutnu pozitivnu povratnu informaciju za precizno pucanje.
2. **Pucanje po neprijateljima donosi bodove**. Svaki uspješan pogodak donosi 100 bodova, što pruža trenutnu pozitivnu povratnu informaciju za precizno gađanje.
Proširite svoju klasu Hero ovom metodom za povećanje bodova:
Proširite klasu Hero ovom metodom za povećanje bodova:
```javascript
incrementPoints() {
@ -164,7 +319,7 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
}
```
Sada povežite ove funkcije s događajima sudara:
Sada povežite ove funkcije s vašim događajima sudara:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@ -179,23 +334,155 @@ Ovo pokreće lokalni server na `http://localhost:5000`. Otvorite ovu adresu u sv
});
```
✅ Zanimaju vas druge igre izrađene pomoću JavaScripta i Canvasa? Istražite malo - mogli biste se iznenaditi što je sve moguće!
Nakon implementacije ovih značajki, testirajte svoju igru kako biste vidjeli cijeli sustav povratnih informacija u akciji. Trebali biste vidjeti ikone života u donjem desnom kutu, rezultat u donjem lijevom kutu, te pratiti kako sudari smanjuju živote, dok uspješni pogoci povećavaju vaš rezultat.
Vaša igra sada ima osnovne mehanike koje su rane arkadne igre činile tako privlačnima - jasne ciljeve, trenutne povratne informacije i značajne posljedice za radnje igrača.
✅ Zanima vas koje su druge igre napravljene u JavaScriptu i Canvasu? Istražite malo - mogli biste se iznenaditi što je sve moguće!
Nakon što implementirate ove funkcionalnosti, testirajte svoju igru da vidite kompletan sustav povratne informacije u akciji. Trebali biste vidjeti ikone života u donjem desnom kutu, rezultat u donjem lijevom, i primijetiti kako sudari smanjuju živote, a uspješni hitci povećavaju rezultat.
Vaša igra sada sadrži ključne mehanike koje su ranim arkadnim igrama dale privlačnost - jasne ciljeve, trenutnu povratnu informaciju i značajne posljedice za akcije igrača.
### 🔄 **Pedagoška provjera**
**Kompletan sustav dizajna igara**: Provjerite svoje razumijevanje sustava povratne informacije igrača:
- ✅ Kako mehanike bodovanja stvaraju motivaciju i angažman igrača?
- ✅ Zašto je vizualna dosljednost važna za dizajn korisničkog sučelja?
- ✅ Kako sustav života balansira izazov i zadržavanje igrača?
- ✅ Koju ulogu igra trenutna povratna informacija u stvaranju zadovoljavajuće igrivosti?
**Integracija sustava**: Vaš sustav povratne informacije demonstrira:
- **Dizajn korisničkog iskustva**: Jasnu vizualnu komunikaciju i hijerarhiju informacija
- **Arhitekturu vođenu događajima**: Odgovorne nadogradnje na akcije igrača
- **Upravljanje stanjem**: Praćenje i prikaz dinamičkih podataka igre
- **Majstorstvo platna (Canvas)**: Iscrtavanje teksta i pozicioniranje spriteova
- **Psihologiju igara**: Razumijevanje motivacije i angažmana igrača
**Profesionalni obrasci**: Implementirali ste:
- **MVC arhitekturu**: Odvajanje logike igre, podataka i prikaza
- **Observer šablon**: Ažuriranja vođena događajima za promjene stanja igre
- **Dizajn komponenti**: Ponovno upotrebljive funkcije za prikaz i logiku
- **Optimizaciju performansi**: Efikasno iscrtavanje u petljama igre
### ⚡ **Što možete napraviti u narednih 5 minuta**
- [ ] Eksperimentirajte s različitim veličinama fonta i bojama za prikaz rezultata
- [ ] Pokušajte mijenjati vrijednosti bodova i vidite kako to utječe na osjećaj igre
- [ ] Dodajte console.log izjave za praćenje promjena bodova i života
- [ ] Testirajte granične slučajeve poput potrošnih života ili postizanja visokih rezultata
### 🎯 **Što možete postići ovaj sat**
- [ ] Završiti kviz nakon lekcije i razumjeti psihologiju dizajna igara
- [ ] Dodati zvučne efekte za bodovanje i gubitak života
- [ ] Implementirati sustav visokih rezultata koristeći localStorage
- [ ] Kreirati različite vrijednosti bodova za različite vrste neprijatelja
- [ ] Dodati vizualne efekte poput podrhtavanja ekrana pri gubitku života
### 📅 **Vaše tjedno putovanje kroz dizajn igara**
- [ ] Završiti potpunu svemirsku igru s izbrušenim sustavima povratne informacije
- [ ] Dodati postignuća i sadržaj za otključavanje
- [ ] Kreirati sustave za progresiju i balansiranje težine
- [ ] Dizajnirati korisnička sučelja za izbornike i ekrane igre završene
- [ ] Proučiti druge igre da biste razumjeli mehanizme angažmana
### 🌟 **Vaša mjesečna majstorija razvoja igara**
- [ ] Izraditi potpune igre s sofisticiranim sustavima napredovanja
- [ ] Naučiti analitiku igara i mjerenje ponašanja igrača
- [ ] Doprinijeti projektima otvorenog koda za razvoj igara
- [ ] Ovladati naprednim obrascima dizajna igara i monetizacije
- [ ] Kreirati edukativne sadržaje o dizajnu igara i korisničkom iskustvu
- [ ] Izraditi portfelj koji prikazuje vještine dizajna i razvoja igara
## 🎯 Vaš vremenski plan za majstoriju dizajna igara
```mermaid
timeline
title Napredak učenja dizajna igara i povratnih informacija igrača
section Temelj (10 minuta)
Vizualna komunikacija: Prikaz teksta
: Dizajn ikona
: Principi izgleda
: Psihologija boja
section Psihologija igrača (20 minuta)
Sustavi motivacije: Vrijednosti bodova
: Rizik nasuprot nagradi
: Povratne informacije o napretku
: Dizajn postignuća
section Tehnička implementacija (30 minuta)
Ovladavanje Canvasom: Pozicioniranje teksta
: Prikaz spriteova
: Upravljanje stanjima
: Optimizacija performansi
section Ravnoteža igre (40 minuta)
Dizajn težine: Upravljanje životima
: Krivulje bodovanja
: Zadržavanje igrača
: Pristupačnost
section Korisničko iskustvo (50 minuta)
Dizajn sučelja: Hijerarhija informacija
: Odzivne povratne informacije
: Emocionalni dizajn
: Testiranje upotrebljivosti
section Napredni sustavi (1 tjedan)
Mehanike igre: Sustavi napretka
: Integracija analitike
: Dizajn monetizacije
: Značajke zajednice
section Vještine u industriji (1 mjesec)
Profesionalni razvoj: Timsku suradnju
: Dokumentaciju dizajna
: Istraživanje igrača
: Optimizaciju platforme
```
### 🛠️ Sažetak vašeg alata za dizajn igara
Nakon završetka ove lekcije, sada ste savladali:
- **Psihologiju igrača**: Razumijevanje motivacije, rizika/nagrade i petlji angažmana
- **Vizualnu komunikaciju**: Efektivan dizajn korisničkog sučelja koristeći tekst, ikone i raspored
- **Sustave povratne informacije**: Odgovore u stvarnom vremenu na akcije i događaje igre
- **Upravljanje stanjem**: Praćenje i efikasno prikazivanje dinamičkih podataka igre
- **Iscrtavanje teksta na platnu (Canvas)**: Profesionalni prikaz teksta sa stiliziranjem i pozicioniranjem
- **Integraciju događaja**: Povezivanje korisničkih akcija s značajnim posljedicama u igri
- **Balansiranje igre**: Dizajn težine i sustava napredovanja igrača
**Primjene u stvarnom svijetu**: Vaše vještine dizajna igara primjenjuju se izravno na:
- **Dizajn korisničkog sučelja**: Kreiranje privlačnih i intuitivnih sučelja
- **Razvoj proizvoda**: Razumijevanje motivacije korisnika i povratnih petlji
- **Edukacijsku tehnologiju**: Gamifikaciju i sustave angažmana u učenju
- **Vizualizaciju podataka**: Provođenje složenih informacija na pristupačan i angažirajući način
- **Razvoj mobilnih aplikacija**: Mehanike zadržavanja i dizajn korisničkog iskustva
- **Marketinšku tehnologiju**: Razumijevanje ponašanja korisnika i optimizaciju konverzija
**Profesionalne vještine koje ste stekli**: Sada možete:
- **Dizajnirati** korisnička iskustva koja motiviraju i angažiraju korisnike
- **Implementirati** sustave povratne informacije koji efikasno usmjeravaju ponašanje korisnika
- **Balansirati** izazov i pristupačnost u interaktivnim sustavima
- **Kreirati** vizualnu komunikaciju koja funkcionira za različite skupine korisnika
- **Analizirati** ponašanje korisnika i iterirati na poboljšanjima dizajna
**Koncepti razvoja igara koje ste savladali**:
- **Motivacija igrača**: Razumijevanje što pokreće angažman i zadržavanje
- **Vizualni dizajn**: Kreiranje jasnih, atraktivnih i funkcionalnih sučelja
- **Integracija sustava**: Povezivanje više sustava igre u skladno iskustvo
- **Optimizacija performansi**: Efikasno iscrtavanje i upravljanje stanjem
- **Pristupačnost**: Dizajn za različite razine vještina i potrebe igrača
**Sljedeći korak**: Spremni ste istražiti napredne obrasce dizajna igara, implementirati analitičke sustave ili proučiti monetizaciju i strategije zadržavanja igrača!
🌟 **Postignuće otključano**: Izgradili ste kompletan sustav povratne informacije igrača s profesionalnim principima dizajna igara!
---
## Izazov GitHub Copilot Agent 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
**Opis:** Poboljšajte sustav bodovanja svemirske igre implementacijom značajke za visoki rezultat s trajnim pohranom i mehanikom bonus bodova.
## GitHub Copilot Agent Challenge 🚀
**Zadatak:** Kreirajte sustav visokih rezultata koji sprema najbolji rezultat igrača u localStorage. Dodajte bonus bodove za uzastopna uništenja neprijatelja (sustav kombinacija) i implementirajte različite vrijednosti bodova za različite vrste neprijatelja. Uključite vizualni indikator kada igrač postigne novi visoki rezultat i prikažite trenutni visoki rezultat na ekranu igre.
Upotrijebite Agent način rada da dovršite sljedeći izazov:
**Opis:** Unaprijedite sustav bodovanja svemirske igre implementacijom sustava najboljeg rezultata s trajnim spremanjem i bonusnim bodovima.
**Zadatak:** Kreirajte sustav visokih rezultata koji sprema najbolji rezultat igrača u localStorage. Dodajte bonus bodove za više uzastopnih ubijenih neprijatelja (kombo sustav) i implementirajte različite vrijednosti bodova za različite vrste neprijatelja. Uključite vizualni indikator kada igrač postigne novi najbolji rezultat i prikažite trenutni najbolji rezultat na zaslonu igre.
## 🚀 Izazov
@ -207,13 +494,15 @@ Sada imate funkcionalnu igru s bodovanjem i životima. Razmislite koje dodatne z
## Pregled i samostalno učenje
Želite istražiti više? Istražite različite pristupe sustavima bodovanja i života u igrama. Postoje fascinantni sustavi za izradu igara poput [PlayFab](https://playfab.com) koji se bave bodovanjem, ljestvicama i napretkom igrača. Kako bi integracija nečeg takvog mogla podići vašu igru na višu razinu?
Želite li istražiti više? Istražite različite pristupe bodovanju i sustavima života u igrama. Postoje fascinantni igraći engine-i poput [PlayFab](https://playfab.com) koji upravljaju bodovanjem, ljestvicama i napredovanjem igrača. Kako bi integracija takvog sustava mogla podići vašu igru na višu razinu?
## Zadatak
[Izgradite igru s bodovanjem](assignment.md)
[Izradite igru s bodovanjem](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI prijevodnog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučujemo profesionalni ljudski prijevod. Nismo odgovorni za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
# Izgradnja svemirske igre, dio 6: Kraj i ponovno pokretanje
Svaka sjajna igra treba jasne uvjete završetka i glatki mehanizam za ponovno pokretanje. Izgradili ste impresivnu svemirsku igru s kretanjem, borbom i bodovanjem - sada je vrijeme da dodate završne dijelove koji će je učiniti potpunom.
Vaša igra trenutno traje beskonačno, poput sondi Voyager koje je NASA lansirala 1977. godine - još uvijek putuju svemirom desetljećima kasnije. Iako je to u redu za istraživanje svemira, igre trebaju definirane završetke kako bi pružile zadovoljavajuće iskustvo.
Danas ćemo implementirati odgovarajuće uvjete pobjede/poraza i sustav za ponovno pokretanje. Do kraja ove lekcije imat ćete uglađenu igru koju igrači mogu završiti i ponovno igrati, baš poput klasičnih arkadnih igara koje su definirale medij.
## Kviz prije predavanja
# Izgradite svemirsku igru, dio 6: Kraj i ponovno pokretanje
Svaka izvrsna igra treba jasne uvjete završetka i glatki mehanizam ponovnog pokretanja. Izgradili ste impresivnu svemirsku igru s kretanjem, borbom i bodovanjem - sada je vrijeme da dodate završne dijelove koji je čine potpunom.
Vaša igra trenutno traje beskonačno, poput svemirskih sondi Voyager koje je NASA lansirala 1977. - i dalje putuju kroz svemir desetljećima kasnije. Iako je to u redu za istraživanje svemira, igre trebaju definirane točke završetka kako bi se stvorila zadovoljavajuća iskustva.
Danas ćemo implementirati pravilne uvjete pobjede/poraza i sustav ponovnog pokretanja. Do kraja ovog lekcije imat ćete dotjeranu igru koju igrači mogu završiti i ponovno igrati, baš kao klasične arkadne igre koje su definirale ovaj medij.
Kada bi vaša igra trebala završiti? Ovo temeljno pitanje oblikovalo je dizajn igara još od ranih dana arkadnih igara. Pac-Man završava kada vas uhvate duhovi ili očistite sve točke, dok Space Invaders završava kada vanzemaljci stignu do dna ili ih sve uništite.
Kao kreator igre, vi definirate uvjete pobjede i poraza. Za našu svemirsku igru, evo provjerenih pristupa koji stvaraju zanimljivu igru:
- **Uništeno je `N` neprijateljskih brodova**: Često se događa da, ako podijelite igru na različite razine, morate uništiti `N` neprijateljskih brodova kako biste završili razinu.
- **Vaš brod je uništen**: Postoje igre u kojima gubite igru ako je vaš brod uništen. Drugi uobičajeni pristup je koncept života. Svaki put kada je vaš brod uništen, oduzima se jedan život. Kada izgubite sve živote, gubite igru.
- **Prikupili ste `N` bodova**: Još jedan uobičajeni uvjet završetka je prikupljanje bodova. Kako ćete dobiti bodove ovisi o vama, ali često se bodovi dodjeljuju za razne aktivnosti poput uništavanja neprijateljskog broda ili prikupljanja predmeta koje neprijatelji ispuste kada su uništeni.
- **Završili ste razinu**: To može uključivati nekoliko uvjeta, kao što su uništenje `X` neprijateljskih brodova, prikupljanje `Y` bodova ili možda prikupljanje određenog predmeta.
## Implementacija funkcionalnosti za ponovno pokretanje igre
Dobre igre potiču ponovnu igrivost kroz glatke mehanizme za ponovno pokretanje. Kada igrači završe igru (ili dožive poraz), često žele odmah pokušati ponovno - bilo da poboljšaju svoj rezultat ili izvedbu.
Tetris je savršen primjer: kada blokovi dosegnu vrh, možete odmah započeti novu igru bez navigacije kroz složene izbornike. Izgradit ćemo sličan sustav za ponovno pokretanje koji čisto resetira stanje igre i brzo vraća igrače u akciju.
Kada bi vaša igra trebala završiti? Ovo temeljno pitanje oblikovalo je dizajn igara od ranih dana arkada. Pac-Man završava kad vas uhvate duhovi ili očistite sve točkice, dok Space Invaders završava kad izvanzemaljci stignu do dna ili ih sve uništite.
Kao tvorac igre, vi definirate uvjete pobjede i poraza. Za našu svemirsku igru, evo provjerenih pristupa koji stvaraju zanimljivu igru:
```mermaid
flowchart TD
A["🎮 Početak igre"] --> B{"Provjeri uvjete"}
B --> C["Broj neprijatelja"]
B --> D["Životi heroja"]
B --> E["Granica bodova"]
B --> F["Napredak razine"]
C --> C1{"Neprijatelji = 0?"}
D --> D1{"Životi = 0?"}
E --> E1{"Bodovi ≥ cilj?"}
F --> F1{"Ciljevi dovršeni?"}
C1 -->|Da| G["🏆 Pobjeda"]
D1 -->|Da| H["💀 Poraz"]
E1 -->|Da| G
F1 -->|Da| G
C1 -->|Ne| B
D1 -->|Ne| B
E1 -->|Ne| B
F1 -->|Ne| B
G --> I["🔄 Opcija ponovnog pokretanja"]
H --> I
style G fill:#e8f5e8
style H fill:#ffebee
style I fill:#e3f2fd
```
- **Uništeno je `N` neprijateljskih brodova**: Vrlo je uobičajeno da ako igru podijelite u različite razine, morate uništiti `N` neprijateljskih brodova da biste dovršili razinu
- **Vaš je brod uništen**: Postoje igre u kojima gubite ako vam brod bude uništen. Drugi čest pristup je da imate koncept života. Svaki put kad vam brod bude uništen, gubite jedan život. Kad svi životi nestanu, gubite igru.
- **Sakupili ste `N` bodova**: Još jedan čest uvjet završetka je prikupljanje bodova. Kako dobijate bodove ovisi o vama, ali česta je praksa da se bodovi dodjeljuju za različite aktivnosti poput uništavanja neprijateljskog broda ili skupljanja predmeta koje objekti *ispuste* nakon što su uništeni.
- **Dovršili ste razinu**: To može uključivati nekoliko uvjeta kao što su uništenih `X` neprijateljskih brodova, prikupljenih `Y` bodova ili skupljanje određenog predmeta.
## Implementacija funkcionalnosti ponovnog pokretanja igre
Dobre igre potiču ponovnu igrivost kroz glatke mehanizme ponovnog pokretanja. Kad igrači završe igru (ili izgube), često žele odmah pokušati ponovno - bilo da bi pobijedili svoj rezultat ili poboljšali izvedbu.
```mermaid
stateDiagram-v2
[*] --> Playing: Početak igre
Playing --> Victory: Svi neprijatelji uništeni
Playing --> Defeat: Životi = 0
Victory --> MessageDisplay: Prikaži poruku o pobjedi
Defeat --> MessageDisplay: Prikaži poruku o porazu
MessageDisplay --> WaitingRestart: Pritisnite Enter
WaitingRestart --> Resetting: Enter je pritisnut
Resetting --> CleanupMemory: Očisti intervale
CleanupMemory --> ClearEvents: Ukloni slušatelje
ClearEvents --> InitializeGame: Novi početak
InitializeGame --> Playing: Počinje nova igra
note right of MessageDisplay
Povratne informacije u boji:
Zelena = Pobjeda
Crvena = Poraz
end note
note right of Resetting
Potpuni reset stanja
sprečava curenje memorije
end note
```
Tetris to savršeno ilustrira: kad vaši blokovi dosegnu vrh, možete odmah započeti novu igru bez navigacije složenim izbornicima. Izgradit ćemo sličan sustav ponovnog pokretanja koji čisto resetira stanje igre i brzo vraća igrače u akciju.
✅ **Razmišljanje**: Razmislite o igrama koje ste igrali. Pod kojim uvjetima završavaju i kako vas potiču na ponovno pokretanje? Što čini iskustvo ponovnog pokretanja glatkim, a što frustrirajućim?
✅ **Razmišljanje**: Razmislite o igrama koje ste igrali. Koji je njihov uvjet završetka i kako ste potaknuti na ponovno pokretanje? Što čini da iskustvo ponovnog pokretanja djeluje glatko, a što frustrirajuće?
## Što ćete izgraditi
Implementirat ćete završne značajke koje će vaš projekt pretvoriti u cjelovito iskustvo igre. Ovi elementi razlikuju uglađene igre od osnovnih prototipova.
Implementirat ćete završne značajke koje vaš projekt čine potpunim igračkim doživljajem. Ti elementi razlikuju dotjerane igre od osnovnih prototipova.
**Evo što danas dodajemo:**
1. **Uvjet pobjede**: Uništite sve neprijatelje i dobijte zasluženu proslavu!
2. **Uvjet poraza**: Ostajete bez života i suočavate se s porazom na ekranu.
3. **Mehanizam za ponovno pokretanje**: Pritisnite Enter za povratak u igru - jer jedna igra nikad nije dovoljna.
4. **Upravljanje stanjem**: Čista ploča svaki put - bez preostalih neprijatelja ili čudnih grešaka iz prethodne igre.
1. **Uvjet pobjede**: Uništite sve neprijatelje i dobijte prikladnu proslavu (zaslužili ste ju!)
2. **Uvjet poraza**: Izgubite sve živote i suočite se s poraznim ekranom
3. **Mehanizam ponovnog pokretanja**: Pritisnite Enter da odmah uđete natrag - jer jedna igra nikad nije dovoljna
4. **Upravljanje stanjem**: Svaki put čist početak - bez zaostalih neprijatelja ili čudnih grešaka iz prošle igre
## Početak rada
Pripremimo vaše razvojno okruženje. Trebali biste imati sve datoteke svoje svemirske igre iz prethodnih lekcija spremne.
Pripremimo vaše razvojno okruženje. Trebali biste imati sve datoteke vaše svemirske igre iz prethodnih lekcija spremne.
**Vaš projekt trebao bi izgledati otprilike ovako:**
**Vaš projekt bi trebao izgledati otprilike ovako:**
```bash
-| assets
@ -66,7 +170,7 @@ Pripremimo vaše razvojno okruženje. Trebali biste imati sve datoteke svoje sve
-| package.json
```
**Pokrenite svoj razvojni server:**
**Pokrenite svoj razvojni poslužitelj:**
```bash
cd your-work
@ -74,19 +178,44 @@ npm start
```
**Ova naredba:**
- Pokreće lokalni server na `http://localhost:5000`
- Ispravno poslužuje vaše datoteke
- Automatski osvježava kada napravite promjene
Otvorite `http://localhost:5000` u svom pregledniku i provjerite radi li vaša igra. Trebali biste se moći kretati, pucati i komunicirati s neprijateljima. Kada to potvrdite, možemo nastaviti s implementacijom.
> 💡 **Profesionalni savjet**: Kako biste izbjegli upozorenja u Visual Studio Codeu, deklarirajte `gameLoopId` na vrhu svoje datoteke kao `let gameLoopId;` umjesto da ga deklarirate unutar funkcije `window.onload`. Ovo slijedi moderne najbolje prakse deklaracije varijabli u JavaScriptu.
- Pokreće lokalni poslužitelj na `http://localhost:5000`
- Ispravno servira vaše datoteke
- Automatski osvježava kad napravite promjene
Otvorite `http://localhost:5000` u pregledniku i provjerite radi li igra. Trebali biste moći pomicati se, pucati i komunicirati s neprijateljima. Kad to potvrdite, možemo nastaviti s implementacijom.
> 💡 **Savjet za profesionalce**: Da biste izbjegli upozorenja u Visual Studio Codeu, deklarirajte `gameLoopId` na vrhu datoteke kao `let gameLoopId;` umjesto unutar funkcije `window.onload`. Ovo prati moderne prakse deklariranja varijabli u JavaScriptu.
```mermaid
flowchart TD
A["1. Praćenje Stanja"] --> B["2. Priključnici za Događaje"]
B --> C["3. Konstante Poruka"]
C --> D["4. Kontrole Ponovnog Pokretanja"]
D --> E["5. Prikaz Poruka"]
E --> F["6. Resetiranje Sustava"]
G["jeHerojMrtav()\njeNeprijateljiMrtvi()"] --> A
H["Događaji Sudara\nDogađaji Završetka Igre"] --> B
I["KRAJ_IGRE_POBJEDA\nKRAJ_IGRE_PORAZ"] --> C
J["Tipka Enter\nOkidač Ponovnog Pokretanja"] --> D
K["Pobjeda/Poraz\nTekst Boja-kodiran"] --> E
L["Čišćenje Stanja\nSvježa Inicijalizacija"] --> F
F --> M["🎮 Cijela Igra"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
style M fill:#e1f5fe
```
## Koraci implementacije
### Korak 1: Kreiranje funkcija za praćenje uvjeta završetka
### Korak 1: Kreirajte funkcije za praćenje uvjeta završetka
Potrebne su nam funkcije koje će pratiti kada bi igra trebala završiti. Poput senzora na Međunarodnoj svemirskoj postaji koji stalno prate kritične sustave, ove funkcije će kontinuirano provjeravati stanje igre.
Potrebne su nam funkcije koje će pratiti kada igra treba završiti. Kao senzori na Međunarodnoj svemirskoj postaji koji kontinuirano nadziru kritične sustave, ove funkcije će stalno provjeravati stanje igre.
```javascript
function isHeroDead() {
@ -99,17 +228,50 @@ function isEnemiesDead() {
}
```
**Što se događa u pozadini:**
- **Provjerava** je li naš junak ostao bez života (au!)
- **Broji** koliko je neprijatelja još uvijek živo
- **Vraća**`true` kada je bojno polje čisto od neprijatelja
- **Koristi** jednostavnu logiku true/false za jednostavnost
- **Filtrira** sve objekte igre kako bi pronašao preživjele
### Korak 2: Ažuriranje rukovatelja događajima za uvjete završetka
Sada ćemo povezati ove provjere uvjeta s sustavom događaja igre. Svaki put kada se dogodi sudar, igra će procijeniti hoće li to pokrenuti uvjet završetka. Ovo stvara trenutnu povratnu informaciju za ključne događaje u igri.
**Evo što se događa u pozadini:**
- **Provjerava** jesu li svi životi vašeg heroja izgubljeni (au!)
- **Broji** koliko je neprijatelja još živo i aktivno
- **Vraća**`true` kad je bojno polje očišćeno od neprijatelja
- **Koristi** jednostavnu logiku istina/laž da sve bude jasno i jednostavno
- **Filtrira** kroz sve objekte igre kako bi pronašao preostale
### Korak 2: Ažurirajte rukovatelje događajima za uvjete završetka
Sada ćemo povezati provjeru ovih uvjeta s događajnim sustavom igre. Svaki put kad dođe do sudara, igra će procijeniti je li izazvan uvjet završetka. Ovo omogućava trenutačnu reakciju na kritične događaje.
```mermaid
sequenceDiagram
participant Collision
participant GameLogic
participant Conditions
participant EventSystem
participant Display
Collision->>GameLogic: Laser pogađa neprijatelja
GameLogic->>GameLogic: Uništavanje objekata
GameLogic->>Conditions: Provjeri isEnemiesDead()
alt Svi neprijatelji poraženi
Conditions->>EventSystem: Emitiraj GAME_END_WIN
EventSystem->>Display: Prikaži poruku o pobjedi
else Neprijatelji ostaju
Conditions->>GameLogic: Nastavi igru
end
Collision->>GameLogic: Neprijatelj pogađa heroja
GameLogic->>GameLogic: Smanji živote
GameLogic->>Conditions: Provjeri isHeroDead()
alt Životi = 0
Conditions->>EventSystem: Emitiraj GAME_END_LOSS
EventSystem->>Display: Prikaži poruku o porazu
else Životi ostaju
GameLogic->>Conditions: Provjeri isEnemiesDead()
alt Svi neprijatelji poraženi
Conditions->>EventSystem: Emitiraj GAME_END_WIN
end
end
```
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
- **Laser pogađa neprijatelja**: Oboje nestaju, dobivate bodove i provjeravamo jeste li pobijedili.
- **Neprijatelj pogađa vas**: Gubite život i provjeravamo jeste li još uvijek u igri.
- **Pametno redoslijed**: Prvo provjeravamo poraz (nitko ne želi pobijediti i izgubiti u isto vrijeme!)
- **Trenutne reakcije**: Čim se dogodi nešto važno, igra to odmah registrira.
- **Zrak laserskog zraka pogađa neprijatelja**: Oboje nestaju, dobivate bodove i provjeravamo jeste li pobijedili
- **Neprijatelj udara u vas**: Gubite život i provjeravamo jeste li još u igri
- **Pametan redoslijed**: Provjeravamo poraz prvi (niko ne želi istovremeno pobijediti i izgubiti!)
- **Odmah reagiranje**: Čim se dogodi nešto važno, igra to odmah zna
### Korak 3: Dodavanje novih konstanti poruka
### Korak 3: Dodajte nove konstante poruka
Morat ćete dodati nove vrste poruka u svoj objekt `Messages`. Ove konstante pomažu u održavanju dosljednosti i sprječavanju tipografskih pogrešaka u vašem sustavu događaja.
Morat ćete dodati nove tipove poruka u svoj `Messages` objekt konstantnih vrijednosti. Te konstante pomažu u održavanju dosljednosti i sprječavaju tipkarske pogreške u vašem događajnom sustavu.
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
**U gore navedenom, mi smo:**
- **Dodali** konstante za događaje završetka igre radi održavanja dosljednosti
- **Koristili**opisne nazive koji jasno označavaju svrhu događaja
- **Slijedili** postojeću konvenciju imenovanja za vrste poruka
**U gornjem primjeru smo:**
- **Dodali** konstante za događaje završetka igre radi bolje dosljednosti
- **Koristili**deskriptivne nazive koji jasno označavaju svrhu događaja
### Korak 4: Implementacija kontrola za ponovno pokretanje
### Korak 4: Implementirajte kontrole za ponovno pokretanje
Sada ćete dodati kontrole tipkovnice koje omogućuju igračima ponovno pokretanje igre. Tipka Enter prirodan je izbor jer se obično povezuje s potvrđivanjem radnji i pokretanjem novih igara.
Sada ćete dodati upravljanje tipkovnicom koje igračima omogućuje ponovno pokretanje igre. Tipka Enter je prirodan izbor jer je često povezana s potvrđivanjem radnji i pokretanjem novih igara.
**Dodajte detekciju tipke Enter u postojeći slušatelj događaja pritiska tipki:**
**Dodajte detekciju tipke Enter u postojeći slušatelj događaja keydown:**
- **Proširuje** vaš postojeći sustav rukovanja događajima na tipkovnici
- **Koristi** tipku Enter kao okidač za ponovno pokretanje radi intuitivnog korisničkog iskustva
- **Emitira** prilagođeni događaj koji drugi dijelovi vaše igre mogu slušati
- **Održava** isti obrazac kao i vaše ostale kontrole tipkovnice
- **Proširuje** vaš postojeći sustav upravljanja tipkovničkim događajima
- **Koristi** tipku Enter kao okidač za ponovno pokretanje za intuitivno korisničko iskustvo
- **Izdaje** prilagođeni događaj na koji ostatak igre može reagirati
- **Očuva** isti obrazac kao kod ostalih tipkovničkih kontrola
### Korak 5: Kreiranje sustava za prikaz poruka
### Korak 5: Kreirajte sustav prikaza poruka
Vaša igra treba jasno komunicirati rezultate igračima. Kreirat ćemo sustav poruka koji prikazuje stanja pobjede i poraza koristeći tekst u boji, slično terminalskim sučeljima ranih računalnih sustava gdje je zelena označavala uspjeh, a crvena signalizirala pogreške.
Vaša igra treba jasno komunicirati rezultate igračima. Napravit ćemo sustav poruka koji prikazuje stanja pobjede ili poraza koristeći tekst obojen prema značenju, slično terminalskim sučeljima ranih računalnih sustava gdje zelena označava uspjeh, a crvena greške.
**Kreirajte funkciju `displayMessage()`:**
@ -202,11 +364,11 @@ function displayMessage(message, color = "red") {
```
**Korak po korak, evo što se događa:**
- **Postavlja** veličinu i obitelj fonta za jasan, čitljiv tekst
- **Postavlja** veličinu i font za jasan, čitljiv tekst
- **Primjenjuje** parametar boje s "crvenom" kao zadanim za upozorenja
- **Centrira** tekst horizontalno i vertikalno na platnu
- **Koristi** moderne JavaScript zadane parametre za fleksibilne opcije boja
- **Koristi** 2D kontekst platna za izravno prikazivanje teksta
- **Koristi** moderne zadane parametre JavaScripta za fleksibilne opcije boja
- **Iskorištava** 2D kontekst platna za neposredno iscrtavanje teksta
**Kreirajte funkciju `endGame()`:**
@ -214,7 +376,7 @@ function displayMessage(message, color = "red") {
function endGame(win) {
clearInterval(gameLoopId);
// Set a delay to ensure any pending renders complete
// Postavite kašnjenje kako biste osigurali dovršetak svih čekajućih prikaza
setTimeout(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
@ -234,16 +396,32 @@ function endGame(win) {
```
**Što ova funkcija radi:**
- **Zamrzava** sve na mjestu - nema više kretanja brodova ili lasera
- **Uzima** kratku pauzu (200ms) kako bi se posljednji kadar završio
- **Briše** ekran i boji ga crno za dramatičan efekt
- **Zamrzava** sve u mjestu - više nema pomicanja brodova ni lasera
- **Uzima** kratku pauzu (200ms) da se zadnji okvir nacrta
- **Čisti** ekran i boji ga crno radi dramatičnog efekta
- **Prikazuje** različite poruke za pobjednike i gubitnike
- **Kodira** vijesti bojama - zeleno za dobro, crveno za... pa, ne tako dobro
- **Govori** igračima kako se vratiti u igru
- **Oboji** poruke - zeleno za dobro, crveno za... pa, ne baš dobro
- **Obavještava** igrače kako da nastave ponovo igrati
### 🔄 **Pedagoški pregled**
**Upravljanje stanjem igre**: Prije implementacije ponovnog postavljanja, osigurajte da razumijete:
- ✅ Kako uvjeti završetka stvaraju jasne ciljeve igranja
- ✅ Zašto je vizualna povratna informacija ključna za razumijevanje igrača
- ✅ Važnost pravilnog čišćenja stanja za sprječavanje curenja memorije
- ✅ Kako arhitektura vođena događajima omogućuje čiste prijelaze stanja
**Brzi samo-test**: Što bi se dogodilo da ne uklonite slušatelje događaja tijekom resetiranja?
*Odgovor: Curio bi memorijski prostor i događaji bi se duplicirali uzrokujući nepredvidivo ponašanje*
**Principi dizajna igara**: Sada implementirate:
- **Jasne ciljeve**: Igrači točno znaju što znači uspjeh ili poraz
- **Trenutnu povratnu informaciju**: Promjene stanja igre se odmah komuniciraju
- **Kontrolu korisnika**: Igrači mogu ponovno pokrenuti kad žele
- **Pouzdanost sustava**: Pravilno čišćenje sprječava greške i probleme s izvedbom
### Korak 6: Implementacija funkcionalnosti za resetiranje igre
### Korak 6: Implementirajte funkcionalnost resetiranja igre
Sustav za resetiranje mora potpuno očistiti trenutno stanje igre i inicijalizirati novu sesiju igre. To osigurava da igrači započnu svježe, bez preostalih podataka iz prethodne igre.
Sustav resetiranja treba potpuno očistiti trenutačno stanje igre i inicijalizirati novu sesiju. To osigurava čisti početak bez zaostalih podataka iz prethodne igre.
**Kreirajte funkciju `resetGame()`:**
@ -266,15 +444,15 @@ function resetGame() {
}
```
**Razumijmo svaki dio:**
- **Provjerava**je li trenutna petlja igre aktivna prije resetiranja
- **Briše** postojeću petlju igre kako bi zaustavila sve trenutne aktivnosti igre
- **Uklanja** sve slušatelje događaja kako bi spriječila curenje memorije
- **Ponovno inicijalizira** stanje igre s novim objektima i varijablama
- **Pokreće** novu petlju igre sa svim bitnim funkcijama igre
- **Održava** isti interval od 100ms za dosljedne performanse igre
**Razumimo svaki dio:**
- **Provjerava**radi li trenutačno petlja igre prije resetiranja
- **Briše** postojeću petlju igre za prekid svih aktivnosti igre
- **Uklanja** sve slušatelje događaja da spriječi curenje memorije
- **Ponovno inicijalizira** stanje igre sa svježim objektima i varijablama
- **Pokreće** novu petlju igre sa svim potrebnim funkcijama
- **Zadržava** isti interval od 100ms za konzistentnu izvedbu igre
**Dodajte rukovatelja događajem za tipku Enter u svoju funkciju`initGame()`:**
**Dodajte upravljač događaja za tipku Enter unutar funkcije`initGame()`:**
**Dodajte metodu `clear()` u svoju klasu EventEmitter:**
**Dodajte metodu `clear()` u klasu EventEmitter:**
```javascript
clear() {
@ -291,78 +469,216 @@ clear() {
```
**Ključne točke za zapamtiti:**
- **Povezuje** pritisak tipke Enter s funkcionalnošću za resetiranje igre
- **Povezuje** pritiskanje tipke Enter s funkcijom resetiranja igre
- **Registrira** ovog slušatelja događaja tijekom inicijalizacije igre
- **Pruža** čist način za uklanjanje svih slušatelja događaja tijekom resetiranja
- **Sprječava** curenje memorije čišćenjem rukovatelja događaja između igara
- **Resetira** objekt slušatelja na prazno stanje za svježu inicijalizaciju
- **Nudi** čist način za uklanjanje svih slušatelja događaja tijekom resetiranja
- **Sprječava** curenje memorije čišćenjem događajnih handlera između igara
- **Resetira** objekt slušatelja u prazno stanje za svježu inicijalizaciju
## Čestitamo! 🎉
👽 💥 🚀 Uspješno ste izgradili kompletnu igru od temelja. Poput programera koji su stvorili prve video igre 1970-ih, transformirali ste linije koda u interaktivno iskustvo s odgovarajućim mehanikama igre i povratnim informacijama korisnika. 🚀 💥 👽
👽 💥 🚀 Uspješno ste izgradili potpunu igru od početka do kraja. Kao programeri koji su 1970-ih stvorili prve videoigre, pretvorili ste redove koda u interaktivno iskustvo s pravim mehanikama igre i povratnim informacijama za korisnika. 🚀 💥 👽
**Postigli ste:**
- **Implementirali** potpune uvjete pobjede i poraza s povratnim informacijama korisnika
- **Kreirali** besprijekoran sustav za ponovno pokretanje za kontinuiranu igrivost
- **Dizajnirali** jasnu vizualnu komunikaciju za stanja igre
- **Upravljali** složenim prijelazima stanja igre i čišćenjem
- **Sastavili** sve komponente u koherentnu, igrivu igru
- **Implementirane** potpune uvjete pobjede i poraza uz povratne informacije
- **Stvoren** besprijekoran sustav ponovnog pokretanja za neprekidnu igru
- **Dizajnirana** jasna vizualna komunikacija stanja igre
- **Upravljanje** složenim prijelazima i čišćenjem stanja igre
- **Spojene** sve komponente u koherentnu, igrivu cjelinu
### 🔄 **Pedagoški pregled**
**Potpuni sustav razvoja igre**: Proslavite svoje ovladavanje cjelokupnim ciklusom razvoja igre:
- ✅ Kako uvjeti završetka stvaraju zadovoljavajuće iskustvo za igrače?
- ✅ Zašto je pravilno upravljanje stanjem ključno za stabilnost igre?
- ✅ Kako vizualna povratna informacija poboljšava razumijevanje igrača?
- ✅ Koju ulogu sustav ponovnog pokretanja ima u zadržavanju igrača?
**Majstorstvo sustava**: Vaša kompletna igra pokazuje:
- **Full-stack razvoj igara**: Od grafike do unosa i upravljanja stanjem
- **Profesionalna arhitektura**: Sustavi vođeni događajima s pravilnim čišćenjem
- **Dizajn korisničkog iskustva**: Jasne povratne informacije i intuitivne kontrole
- **Optimizacija izvedbe**: Efikasno iscrtavanje i upravljanje memorijom
- **Finalni dodiri i cjelovitost**: Svi detalji koji igru čine dovršenom
**Vještine spremne za industriju**: Implementirali ste:
- **Arhitekturu petlje igre**: Sustavi u stvarnom vremenu s dosljednom izvedbom
- **Programiranje vođeno događajima**: Odvojeni sustavi koji se učinkovito skaliraju
- **Upravljanje stanjem**: Rukovanje složenim podacima i životnim ciklusom
- **Dizajn korisničkog sučelja**: Jasna komunikacija i responzivne kontrole
- **Testiranje i otklanjanje grešaka**: Iterativni razvoj i rješavanje problema
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Igrajte svoj kompletni projekt i testirajte sve uvjete pobjede i poraza
- [ ] Eksperimentirajte s različitim parametrima uvjeta završetka
- [ ] Pokušajte dodati console.log izjave za praćenje promjena stanja igre
- [ ] Podijelite igru s prijateljima i prikupite povratne informacije
### 🎯 **Što možete postići u sljedećem satu**
- [ ] Dovršite kviz nakon lekcije i razmislite o svom putu razvoja igre
- [ ] Dodajte zvučne efekte za stanja pobjede i poraza
- [ ] Implementirajte dodatne uvjete završetka poput vremenskih ograničenja ili bonusa
- [ ] Kreirajte različite razine težine s različitim brojem neprijatelja
- [ ] Dotjerajte vizualni izgled s boljim fontovima i bojama
### 📅 **Vaše tjedno majstorstvo razvoja igara**
- [ ] Dovršite unaprijeđenu svemirsku igru s više razina i napretkom
- [ ] Dodajte napredne značajke poput pojačanja, raznih vrsta neprijatelja i specijalnog oružja
- [ ] Kreirajte sustav visokog rezultata s trajnim pohranama
- [ ] Dizajnirajte korisnička sučelja za izbornike, postavke i opcije igre
- [ ] Optimizirajte izvedbu za različite uređaje i preglednike
- [ ] Objavite igru online i podijelite je s zajednicom
### 🌟 **Vaša Mjesečna Karijera u Razvoju Igra**
- [ ] Izradite više potpunih igara istražujući različite žanrove i mehanike
- [ ] Naučite napredne okvire za razvoj igara kao što su Phaser ili Three.js
- [ ] Sudjelujte u open source projektima za razvoj igara
- [ ] Proučavajte principe dizajna igara i psihologiju igrača
- [ ] Izradite portfelj koji prikazuje vaše vještine u razvoju igara
- [ ] Povežite se s zajednicom za razvoj igara i nastavite učiti
## 🎯 Vaš Potpuni Vremenski Plan za Ovladavanje Razvojom Igara
```mermaid
timeline
title Kompletan napredak u učenju razvoja igara
section Osnove (Lekcije 1-2)
Arhitektura igre: Struktura projekta
: Upravljanje resursima
: Osnove platna
: Sustavi događaja
section Sustavi interakcije (Lekcije 3-4)
Kontrola igrača: Obrada ulaza
: Mehanike kretanja
: Detekcija sudara
: Simulacija fizike
section Mehanike igre (Lekcija 5)
Sustavi povratne informacije: Mehanizmi bodovanja
: Upravljanje životima
: Vizualna komunikacija
: Motivacija igrača
section Završetak igre (Lekcija 6)
Dorada i tok: Uvjeti završetka
: Upravljanje stanjem
: Sustavi ponovnog pokretanja
: Korisničko iskustvo
section Napredne značajke (1 tjedan)
Vještine unapređenja: Integracija zvuka
: Vizualni efekti
: Progresija razina
: Optimizacija performansi
section Profesionalni razvoj (1 mjesec)
Spremnost za industriju: Ovladavanje okvirima
: Suradnja u timu
: Razvoj portfolija
: Angažman u zajednici
section Napredovanje u karijeri (3 mjeseca)
Specijalizacija: Napredni motori igara
: Implementacija platformi
: Strategije monetizacije
: Umrežavanje u industriji
```
### 🛠️ Sažetak Vašeg Potpunog Alata za Razvoj Igara
Nakon što ste završili ovu kompletnu seriju svemirskih igara, sada ste ovladali:
- **Arhitekturom Igara**: Sustavi vođeni događajima, petlje igara i upravljanje stanjima
- **Grafičkim Programiranjem**: Canvas API, prikaz spriteova i vizualni efekti
- **Sustavima Unosa**: Rukovanje tipkovnicom, detekcija sudara i responzivna kontrola
- **Dizajnom Igara**: Povratne informacije igrača, sustavi napredovanja i mehanike angažmana
- **Optimizacijom Performansi**: Učinkovito prikazivanje, upravljanje memorijom i kontrola brzine sličica
- **Korisničkim Iskustvom**: Jasna komunikacija, intuitivne kontrole i detalji usavršenosti
- **Profesionalnim Obrasima**: Čist kod, tehnike pronalaženja pogrešaka i organizacija projekta
**Praktične Primjene**: Vaše vještine razvoja igara primjenjuju se izravno na:
- **Interaktivne Web Aplikacije**: Dinamička sučelja i sustavi u stvarnom vremenu
- **Vizualizaciju Podataka**: Animirani grafikoni i interaktivna grafika
- **Obrazovnu Tehnologiju**: Gamifikacija i angažirajuća iskustva u učenju
- **Mobilni Razvoj**: Interakcije na dodir i optimizacija performansi
- **Simulacijski Softver**: Fizikalni motori i modeliranje u stvarnom vremenu
- **Kreativne Industrije**: Interaktivna umjetnost, zabava i digitalna iskustva
**Profesionalne Vještine koje Ste Stekli**: Sada možete:
- **Arhitektirati** složene interaktivne sustave od nule
- **Rješavati Probleme** u aplikacijama u stvarnom vremenu koristeći sustavne pristupe
- **Optimizirati** performanse za glatka korisnička iskustva
- **Dizajnirati** privlačna korisnička sučelja i obrasce interakcije
- **Surađivati** učinkovito na tehničkim projektima uz pravilnu organizaciju koda
**Koncepti Razvoja Igara koje Ste Savladali**:
- **Sustavi u Stvarnom Vremenu**: Petlje igara, upravljanje brzinom sličica i performanse
- **Arhitektura Vođena Događajima**: Oslobođeni sustavi i prijenos poruka
- **Upravljanje Stanjima**: Složeno upravljanje podacima i životnim ciklusom
- **Programiranje Korisničkog Sučelja**: Grafika na canvasu i responzivni dizajn
- **Teorija Dizajna Igara**: Psihologija igrača i mehanike angažmana
**Sljedeća Razina**: Spremni ste za istraživanje naprednih okvira za igre, 3D grafiku, multiplayer sustave ili prelazak u profesionalne uloge u razvoju igara!
🌟 **Postignuće Otključano**: Završili ste cijelo putovanje razvoja igre i izgradili profesionalno kvalitetno interaktivno iskustvo od nule!
**Dobrodošli u zajednicu za razvoj igara!** 🎮✨
## Izazov GitHub Copilot Agent 🚀
## Izazov GitHub Copilot Agenta 🚀
Koristite Agent mode za dovršavanje sljedećeg izazova:
Iskoristite Agent mod za dovršetak sljedećeg izazova:
**Opis:** Poboljšajte svemirsku igru implementacijom sustava napredovanja kroz razine s povećanjem težine i dodatnim značajkama.
**Opis:** Poboljšajte svemirsku igru implementirajući sustav napredovanja razina s povećanom težinom i bonus značajkama.
**Zadatak:** Kreirajte sustav svemirske igre s više razina gdje svaka razina ima više neprijateljskih brodova s povećanom brzinom i zdravljem. Dodajte množitelj bodova koji se povećava sa svakom razinom i implementirajte pojačanja (poput brzog pucanja ili štita) koja se nasumično pojavljuju kada se neprijatelji unište. Uključite bonus za završetak razine i prikaz trenutne razine na ekranu uz postojeći rezultat i živote.
**Zadatak:** Kreirajte višerazinski svemirski sustav igre gdje svaka razina ima više neprijateljskih brodova s povećanom brzinom i zdravljem. Dodajte množitelj bodova koji se povećava s svakom razinom, te implementirajte power-upove (poput brzog pucanja ili štita) koji se nasumično pojavljuju nakon uništavanja neprijatelja. Uključite bonus za završetak razine i prikaz trenutne razine na ekranu uz postojeći rezultat i broj života.
Saznajte više o [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov za dodatno poboljšanje
## 🚀 Dodatni Izazov za Poboljšanje
**Dodajte zvuk svojoj igri**: Poboljšajte iskustvo igranja implementacijom zvučnih efekata! Razmislite o dodavanju zvuka za:
**Dodajte Zvuk u Vašu Igru**: Unaprijedite svoje iskustvo igranja implementiranjem zvučnih efekata! Razmislite o dodavanju zvuka za:
- **Pucanje lasera** kada igrač puca
- **Laserske hitce** kada igrač puca
- **Uništenje neprijatelja** kada su brodovi pogođeni
- **Oštećenje heroja** kada igrač primi udarac
- **Pobjedničku glazbu** kada je igra osvojena
- **Zvuk poraza** kada je igra izgubljena
- **Štetu heroja** kada igrač prima udarce
- **Pobjedničku glazbu** kada se igra osvoji
- **Zvuk poraza** kada se igra izgubi
**Primjer implementacije zvuka:**
```javascript
// Create audio objects
// Kreirajte audio objekte
const laserSound = new Audio('assets/laser.wav');
const explosionSound = new Audio('assets/explosion.wav');
// Play sounds during game events
// Reproducirajte zvukove tijekom događaja u igri
function playLaserSound() {
laserSound.currentTime = 0; // Reset to beginning
laserSound.currentTime = 0; // Vratite se na početak
laserSound.play();
}
```
**Što trebate znati:**
- **Kreira** audio objekte za različite zvučne efekte
- **Resetira**`currentTime` kako bi omogućio brzo ponavljanje zvučnih efekata
- **Upravlja** glasnoćom i vremenom zvuka za bolje iskustvo igre
- **Kreira**Audio objekte za različite zvučne efekte
- **Resetira**`currentTime` kako bi omogućio brzo ponavljanje zvukova
- **Upravlja** pravilima automatskog pokretanja u preglednicima pokretanjem zvukova kroz korisničke interakcije
- **Kontrolira** glasnoću i vrijeme zvuka radi boljeg iskustva igre
> 💡 **Resurs za učenje**: Istražite ovaj [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) kako biste saznali više o implementaciji zvuka u JavaScript igrama.
> 💡 **Učenje resurs**: Istražite ovaj [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) za više o implementaciji zvuka u JavaScript igrama.
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/40)
## Pregled i samostalno učenje
## Pregled i Samostalno Učenje
Vaš zadatak je stvoriti novu uzornu igru, pa istražite neke zanimljive igre kako biste vidjeli kakvu biste igru mogli izgraditi.
Vaš zadatak je izraditi svježu uzorku igre, zato istražite neke zanimljive igre da vidite kakvu biste igru mogli napraviti.
## Zadatak
[Izgradite uzornu igru](assignment.md)
[Izradite Uzorku Igru](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo da prijevod bude točan, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučujemo profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.
# Izrada aplikacije za bankarstvo, dio 1: HTML predlošci i rute u web aplikaciji
# Izrada bankarske aplikacije, dio 1: HTML predlošci i rute u web aplikaciji
Kada je Apollo 11-ov navigacijski računalni sustav 1969. godine vodio misiju na Mjesec, morao je prelaziti između različitih programa bez ponovnog pokretanja cijelog sustava. Moderne web aplikacije funkcioniraju na sličan način – mijenjaju ono što vidite bez ponovnog učitavanja svega od početka. To stvara glatko i responzivno iskustvo koje korisnici danas očekuju.
```mermaid
journey
title Vaše Putovanje Razvoja Bankarske Aplikacije
section Osnove SPA
Razumjeti jedinstvene aplikacije: 3: Student
Naučiti koncepte predložaka: 4: Student
Savladati manipulaciju DOM-om: 4: Student
section Sustavi Ruteranja
Implementirati klijentsko ruteranje: 4: Student
Upravljati poviješću preglednika: 5: Student
Kreirati navigacijske sustave: 5: Student
section Profesionalni Obrasci
Izgraditi modularnu arhitekturu: 5: Student
Primijeniti najbolje prakse: 5: Student
Kreirati korisnička iskustva: 5: Student
```
Kada je Apollo 11-ov sustav za upravljanje navigacijom 1969. godine usmjeravao prema Mjesecu, morao je prelaziti između različitih programa bez ponovnog pokretanja cijelog sustava. Moderna web aplikacija radi slično – mijenja ono što vidite bez ponovnog učitavanja svega iz početka. To stvara glatko i responzivno iskustvo koje korisnici danas očekuju.
Za razliku od tradicionalnih web stranica koje ponovno učitavaju cijele stranice za svaku interakciju, moderne web aplikacije ažuriraju samo dijelove koji se trebaju promijeniti. Ovaj pristup, slično kao što kontrolni centar prebacuje između različitih prikaza dok održava stalnu komunikaciju, stvara fluidno iskustvo na koje smo navikli.
Za razliku od tradicionalnih web stranica koje ponovno učitavaju cijele stranice za svaku interakciju, moderne web aplikacije ažuriraju samo dijelove koji trebaju promjenu. Ovaj pristup, slično kao što kontrola misije mijenja prikaze dok održava stalnu komunikaciju, stvara to fluidno iskustvo na koje smo navikli.
Evo što čini razliku tako dramatičnom:
| Tradicionalne višestranične aplikacije | Moderne jednostranične aplikacije |
| **Navigacija** | Potpuno ponovno učitavanje stranice za svaki zaslon | Trenutna promjena sadržaja |
| **Performanse** | Sporije zbog potpunog preuzimanja HTML-a | Brže s djelomičnim ažuriranjima |
| **Korisničko iskustvo** | Iznenadni treptaji stranica | Glatki prijelazi kao u aplikacijama |
| **Dijeljenje podataka** | Teško između stranica | Jednostavno upravljanje stanjem |
| **Razvoj** | Održavanje više HTML datoteka | Jedan HTML s dinamičnim predlošcima |
| **Razvoj** | Više HTML datoteka za održavanje | Jedan HTML s dinamičkim predlošcima |
**Razumijevanje evolucije:**
- **Tradicionalne aplikacije** zahtijevaju zahtjeve prema serveru za svaku navigacijsku akciju
- **Moderne SPA aplikacije** učitavaju se jednom i dinamički ažuriraju sadržaj koristeći JavaScript
- **Očekivanja korisnika** sada favoriziraju trenutne, besprijekorne interakcije
- **Prednosti performansi** uključuju smanjenu potrošnju bandwidtha i brže odgovore
- **Tradicionalne aplikacije** zahtijevaju zahtjeve serveru za svaku navigacijsku akciju
- **Moderne jednostranične aplikacije (SPA)** se učitavaju jednom i dinamički ažuriraju sadržaj korištenjem JavaScripta
- **Očekivanja korisnika** sada preferiraju trenutne i besprijekorne interakcije
- **Prednosti performansi** uključuju smanjenje propusnosti i brže odzive
U ovoj lekciji izgradit ćemo aplikaciju za bankarstvo s više ekrana koji se međusobno glatko povezuju. Kao što znanstvenici koriste modularne instrumente koji se mogu rekonfigurirati za različite eksperimente, mi ćemo koristiti HTML predloške kao višekratne komponente koje se mogu prikazati po potrebi.
U ovoj lekciji ćemo izraditi bankarsku aplikaciju s više zaslona koja teče besprijekorno. Kao što znanstvenici koriste modularne instrumente koji se mogu rekonfigurirati za različite eksperimente, mi ćemo koristiti HTML predloške kao višekratne komponente koje se mogu prikazivati prema potrebi.
Radit ćete s HTML predlošcima (višekratni nacrti za različite ekrane), JavaScript rutiranjem (sustav koji prebacuje između ekrana) i povijesnim API-jem preglednika (koji omogućuje da gumb za povratak radi kako treba). Ovo su iste osnovne tehnike koje koriste okviri poput Reacta, Vuea i Angulara.
Radit ćete s HTML predlošcima (višekratnim nacrtima za različite zaslone), JavaScript rutiranjem (sustav koji prebacuje zaslone) i povijesnim API-jem preglednika (koji omogućuje da gumb za povratak radi kako se očekuje). To su iste temeljne tehnike koje koriste okviri poput Reacta, Vuea i Angulara.
Na kraju, imat ćete funkcionalnu aplikaciju za bankarstvo koja demonstrira profesionalne principe jednostraničnih aplikacija.
Na kraju ćete imati funkcionalnu bankarsku aplikaciju koja demonstrira profesionalne principe jednostraničnih aplikacija.
Trebat će nam lokalni web poslužitelj za testiranje naše aplikacije za bankarstvo – ne brinite, to je lakše nego što zvuči! Ako ga već nemate postavljenog, samo instalirajte [Node.js](https://nodejs.org) i pokrenite `npx lite-server` iz mape vašeg projekta. Ova praktična naredba pokreće lokalni poslužitelj i automatski otvara vašu aplikaciju u pregledniku.
Trebat će nam lokalni web server za testiranje naše bankarske aplikacije – ne brinite, lakše je nego što zvuči! Ako ga već nemate postavljenog, samo instalirajte [Node.js](https://nodejs.org) i pokrenite `npx lite-server` iz vašeg projekt foldera. Ova korisna naredba pokreće lokalni server i automatski otvara vašu aplikaciju u pregledniku.
### Priprema
Na svom računalu stvorite mapu pod nazivom `bank` s datotekom pod nazivom `index.html` unutar nje. Počet ćemo s ovim HTML [boilerplateom](https://en.wikipedia.org/wiki/Boilerplate_code):
Na vašem računalu kreirajte mapu nazvanu `bank` s datotekom pod nazivom `index.html` unutar nje. Počet ćemo od ovog HTML [boilerplatea](https://en.wikipedia.org/wiki/Boilerplate_code):
```html
<!DOCTYPE html>
@ -61,12 +106,12 @@ Na svom računalu stvorite mapu pod nazivom `bank` s datotekom pod nazivom `inde
</html>
```
**Što ovaj boilerplate pruža:**
- **Postavlja** HTML5 strukturu dokumenta s pravilnom DOCTYPE deklaracijom
- **Konfigurira** kodiranje znakova kao UTF-8 za podršku međunarodnom tekstu
- **Omogućuje** responzivni dizajn s meta oznakom za kompatibilnost s mobilnim uređajima
- **Postavlja** opisni naslov koji se pojavljuje na kartici preglednika
- **Stvara** čistu sekciju tijela gdje ćemo izgraditi našu aplikaciju
**Evo što ovaj boilerplate pruža:**
- **Uspostavlja** strukturu HTML5 dokumenta s ispravnom deklaracijom DOCTYPE-a
- **Konfigurira** kodiranje znakova na UTF-8 za međunarodnu podršku teksta
- **Omogućava** responzivni dizajn s meta oznakom za viewport za kompatibilnost s mobilnim uređajima
- **Postavlja** opisni naslov koji se prikazuje na kartici preglednika
- **Kreira** čisti body odjeljak gdje ćemo graditi našu aplikaciju
> 📁 **Pregled strukture projekta**
>
@ -80,41 +125,58 @@ Na svom računalu stvorite mapu pod nazivom `bank` s datotekom pod nazivom `inde
>
> **Odgovornosti datoteka:**
> - **index.html**: Sadrži sve predloške i pruža strukturu aplikacije
> - **app.js**: Upravljanje rutiranjem, navigacijom i predlošcima
> - **Predlošci**: Definiraju korisničko sučelje za prijavu, nadzornu ploču i druge ekrane
> - **app.js**: Upravljanje rutiranjem, navigacijom i upravljanjem predlošcima
> - **Predlošci**: Definiraju korisničko sučelje za prijavu, nadzornu ploču i druge zaslone
---
## HTML predlošci
Predlošci rješavaju temeljni problem u web razvoju. Kada je Gutenberg izumio pokretni tisak u 1440-ima, shvatio je da umjesto rezbarenja cijelih stranica može stvoriti višekratne blokove slova i rasporediti ih po potrebi. HTML predlošci funkcioniraju na istom principu – umjesto stvaranja zasebnih HTML datoteka za svaki ekran, definirate višekratne strukture koje se mogu prikazati po potrebi.
Predlošci rješavaju temeljni problem u web razvoju. Kad je Gutenberg izumio pomični tip tiskanja 1440-ih, shvatio je da umjesto izrezivanja cijelih stranica, može stvoriti višekratne blokove slova i slagati ih po potrebi. HTML predlošci funkcioniraju po istom principu – umjesto stvaranja zasebnih HTML datoteka za svaki zaslon, definirate višekratne strukture koje se prikazuju prema potrebi.
Razmislite o predlošcima kao nacrtima za različite dijelove vaše aplikacije. Kao što arhitekt stvara jedan nacrt i koristi ga više puta umjesto da ponovno crta identične prostorije, mi stvaramo predloške jednom i koristimo ih po potrebi. Preglednik drži te predloške skrivenima dok ih JavaScript ne aktivira.
```mermaid
flowchart TD
A["📋 Definicija Predloška"] --> B["💬 Skriven u DOM-u"]
B --> C["🔍 JavaScript Pronalazi Predložak"]
C --> D["📋 Kloniraj Sadržaj Predloška"]
D --> E["🔗 Priključi na Vidljivi DOM"]
E --> F["👁️ Korisnik Vidi Sadržaj"]
G["Predložak za Prijavu"] --> A
H["Predložak Nadzorne Ploče"] --> A
I["Budući Predlošci"] --> A
style A fill:#e3f2fd
style D fill:#e8f5e8
style F fill:#fff3e0
style B fill:#f3e5f5
```
Zamislite predloške kao nacrte za različite dijelove vaše aplikacije. Baš kao što arhitekt stvara jedan nacrt i koristi ga više puta umjesto da ponovno crta identične sobe, mi stvaramo predloške jednom i instanciramo ih kad zatrebaju. Preglednik drži te predloške skrivene dok ih JavaScript ne aktivira.
Ako želite stvoriti više ekrana za web stranicu, jedno rješenje bilo bi stvoriti jednu HTML datoteku za svaki ekran koji želite prikazati. Međutim, ovo rješenje dolazi s nekim neugodnostima:
Ako želite stvoriti više zaslona za web stranicu, jedno rješenje bilo bi kreirati jednu HTML datoteku za svaki zaslon koji želite prikazati. Međutim, to rješenje dolazi s nekim neugodnostima:
- Morate ponovno učitati cijeli HTML prilikom prebacivanja ekrana, što može biti sporo.
- Teško je dijeliti podatke između različitih ekrana.
- Morate ponovo učitati cijeli HTML prilikom promjene zaslona, što može biti sporo.
- Teško je dijeliti podatke između različitih zaslona.
Drugi pristup je imati samo jednu HTML datoteku i definirati više [HTML predložaka](https://developer.mozilla.org/docs/Web/HTML/Element/template) koristeći element `<template>`. Predložak je višekratni HTML blok koji preglednik ne prikazuje, a treba ga instancirati u vrijeme izvođenja pomoću JavaScripta.
Drugi pristup je imati samo jednu HTML datoteku i definirati više [HTML predložaka](https://developer.mozilla.org/docs/Web/HTML/Element/template) korištenjem elementa `<template>`. Predložak je višekratni HTML blok koji preglednik ne prikazuje i koji treba biti instanciran u runtime-u putem JavaScripta.
### Izgradimo aplikaciju
### Izgradimo to
Stvorit ćemo aplikaciju za bankarstvo s dva glavna ekrana: stranicom za prijavu i nadzornom pločom. Prvo, dodajmo element rezerviranog mjesta u tijelo našeg HTML-a – ovdje će se pojaviti svi naši različiti ekrani:
Izradit ćemo bankarsku aplikaciju s dva glavna zaslona: stranicu za prijavu i nadzornu ploču. Prvo dodajmo element rezerviranog mjesta u body našeg HTML-a – ovdje će se pojavljivati svi naši različiti zasloni:
```html
<divid="app">Loading...</div>
```
**Razumijevanje ovog rezerviranog mjesta:**
- **Stvara** spremnik s ID-om "app" gdje će se prikazivati svi ekrani
- **Prikazuje** poruku učitavanja dok JavaScript ne inicijalizira prvi ekran
- **Pruža** jedinstvenu točku za montiranje našeg dinamičkog sadržaja
- **Omogućuje** jednostavno ciljanje iz JavaScripta pomoću`document.getElementById()`
- **Kreira** spremnik s ID-em "app" u kojem će se prikazivati svi zasloni
- **Prikazuje** poruku učitavanja dok JavaScript ne inicijalizira prvi zaslon
- **Pruža** jednu točku montiranja za naš dinamični sadržaj
- **Omogućava** jednostavno ciljanje iz JavaScripta korištenjem`document.getElementById()`
> 💡 **Savjet**: Budući da će sadržaj ovog elementa biti zamijenjen, možemo staviti poruku ili indikator učitavanja koji će se prikazivati dok se aplikacija učitava.
> 💡 **Savjet**: Budući da će se sadržaj ovog elementa mijenjati, možemo tamo staviti poruku ili indikator učitavanja koji će se prikazivati dok se aplikacija učitava.
Zatim dodajmo ispod HTML predložak za stranicu za prijavu. Za sada ćemo samo dodati naslov i sekciju koja sadrži poveznicu koju ćemo koristiti za navigaciju.
Sljedeće, dodajmo ispod HTML predložak za stranicu prijave. Za sada ćemo tamo staviti samo naslov i sekciju koja sadrži poveznicu koju ćemo koristiti za navigaciju.
```html
<templateid="login">
@ -125,17 +187,17 @@ Zatim dodajmo ispod HTML predložak za stranicu za prijavu. Za sada ćemo samo d
</template>
```
**Razrada ovog predloška za prijavu:**
- **Definira** predložak s jedinstvenim identifikatorom "login" za ciljanje putem JavaScripta
**Razlaganje ovog predloška za prijavu:**
- **Definira** predložak s jedinstvenim identifikatorom "login" za ciljanje JavaScriptom
- **Uključuje** glavni naslov koji uspostavlja brendiranje aplikacije
- **Sadrži** semantički element `<section>` za grupiranje povezanog sadržaja
- **Pruža** navigacijsku poveznicu koja će usmjeriti korisnike na nadzornu ploču
- **Sadrži** semantički `<section>` element za grupiranje povezanog sadržaja
- **Pruža** navigacijsku poveznicu koja će preusmjeravati korisnike na nadzornu ploču
Zatim ćemo dodati još jedan HTML predložak za stranicu nadzorne ploče. Ova stranica će sadržavati različite sekcije:
- Zaglavlje s naslovom i poveznicom za odjavu
- Trenutni saldo bankovnog računa
- Popis transakcija, prikazan u tablici
- Popis transakcija prikazan u tablici
```html
<templateid="dashboard">
@ -162,73 +224,88 @@ Zatim ćemo dodati još jedan HTML predložak za stranicu nadzorne ploče. Ova s
</template>
```
**Razumijevanje svakog dijela ove nadzorne ploče:**
- **Strukturira** stranicu sa semantičkim elementom`<header>` koji sadrži navigaciju
- **Prikazuje** naslov aplikacije dosljedno na svim ekranima radi brendiranja
- **Pruža** poveznicu za odjavu koja vodi natrag na ekran za prijavu
**Razumimo svaki dio ove nadzorne ploče:**
- **Strukturira** stranicu korištenjem semantičkog elementa`<header>` koji sadrži navigaciju
- **Prikazuje** naslov aplikacije dosljedno na svim zaslonima radi brendiranja
- **Pruža** poveznicu za odjavu koja vodi natrag na zaslon prijave
- **Prikazuje** trenutni saldo računa u namjenskoj sekciji
- **Organizira** podatke o transakcijama koristeći pravilno strukturiranu HTML tablicu
- **Definira** zaglavlja tablice za stupce Datum, Objekt i Iznos
- **Ostavlja** tijelo tablice prazno za kasnije dinamičko umetanje sadržaja
- **Organizira** podatke o transakcijama koristeći ispravno strukturiranu HTML tablicu
- **Definira** zaglavlja tablice za stupce Datum, Opis i Iznos
- **Ostavlja** tijelo tablice prazno za dinamičko umetanje sadržaja kasnije
> 💡 **Savjet**: Kada stvarate HTML predloške, ako želite vidjeti kako će izgledati, možete zakomentirati `<template>` i `</template>` linije omotavanjem u `<!-- -->`.
> 💡 **Savjet**: Kada stvarate HTML predloške, ako želite vidjeti kako će izgledati, možete komentirati linije `<template>` i `</template>` koristeći `<!-- -->`.
### 🔄 **Pedagoška provjera**
**Razumijevanje sustava predložaka**: Prije implementacije JavaScripta, osigurajte da razumijete:
- ✅ Kako se predlošci razlikuju od običnih HTML elemenata
- ✅ Zašto predlošci ostaju skriveni dok ih JavaScript ne aktivira
- ✅ Važnost semantičke HTML strukture u predlošcima
- ✅ Kako predlošci omogućuju višekratne UI komponente
✅ Zašto mislite da koristimo `id` atribute na predlošcima? Možemo li koristiti nešto drugo, poput klasa?
**Brzi samoprovjerni test**: Što se događa ako uklonite `<template>` oznake oko vašeg HTML-a?
*Odgovor: Sadržaj odmah postaje vidljiv i gubi funkcionalnost predloška*
## Oživljavanje predložaka pomoću JavaScripta
**Prednosti arhitekture**: Predlošci pružaju:
- **Višekratnost**: Jedna definicija, više instanci
Sada moramo učiniti naše predloške funkcionalnima. Kao što 3D printer uzima digitalni nacrt i stvara fizički objekt, JavaScript uzima naše skrivene predloške i stvara vidljive, interaktivne elemente koje korisnici mogu vidjeti i koristiti.
✅ Zašto mislite da koristimo `id` atribute na predlošcima? Mogu li se umjesto njih koristiti klase?
Proces slijedi tri dosljedna koraka koji čine temelj modernog web razvoja. Kada shvatite ovaj obrazac, prepoznat ćete ga u mnogim okvirima i bibliotekama.
## Oživljavanje predložaka uz JavaScript
Ako pokušate svoju trenutnu HTML datoteku u pregledniku, vidjet ćete da ostaje prikazana poruka `Loading...`. To je zato što moramo dodati neki JavaScript kod kako bismo instancirali i prikazali HTML predloške.
Sada trebamo učiniti naše predloške funkcionalnima. Kao što 3D printer uzima digitalni nacrt i stvara fizički objekt, JavaScript uzima naše skrivene predloške i stvara vidljive, interaktivne elemente koje korisnici mogu vidjeti i koristiti.
Instanciranje predloška obično se obavlja u 3 koraka:
Proces slijedi tri dosljedna koraka koji čine temelj modernog web razvoja. Kad jednom shvatite ovaj uzorak, prepoznat ćete ga u mnogim framework-ovima i bibliotekama.
1. Dohvatite element predloška u DOM-u, na primjer koristeći [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Klonirajte element predloška, koristeći [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. Priključite ga na DOM ispod vidljivog elementa, na primjer koristeći [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
Ako pokušate otvoriti vaš trenutni HTML u pregledniku, vidjet ćete da ostaje zaglavljen na prikazu `Loading...`. To je zato što trebamo dodati dio JavaScripta koji instancira i prikazuje HTML predloške.
Instanciranje predloška obično se odvija u 3 koraka:
1. Dohvatite element predloška u DOM-u, na primjer pomoću [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Klonirajte element predloška pomoću [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. Pridružite ga DOM-u ispod vidljivog elementa, na primjer pomoću [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
- **Pronalaženje**glavnog spremnika aplikacije u kojem će se sadržaj prikazati
- **Brisanje** postojećeg sadržaja iz spremnika
- **Umetanje** kloniranog sadržaja predloška u vidljivi DOM
Sada pozovite ovu funkciju s jednim od predložaka i pogledajte rezultat.
@ -253,43 +330,58 @@ Sada pozovite ovu funkciju s jednim od predložaka i pogledajte rezultat.
updateRoute('login');
```
**Što ova funkcija postiže:**
- **Aktivira** predložak za prijavu prosljeđivanjem njegovog ID-a kao parametra
- **Pokazuje** kako programatski prebacivati između različitih ekrana aplikacije
- **Prikazuje**ekran za prijavu umjesto poruke "Loading..."
**Što ovaj poziv funkcije postiže:**
- **Aktivira** predložak prijave prosljeđivanjem njegovog ID-a kao parametra
- **Prikazuje** kako programatski prebacivati između različitih zaslona aplikacije
- **Prikazuje**zaslon prijave umjesto poruke "Loading..."
✅ Koja je svrha ovog koda `app.innerHTML = '';`? Što se događa bez njega?
## Stvaranje ruta
## Izrada ruta
Rutiranje se u osnovi odnosi na povezivanje URL-ova s odgovarajućim sadržajem. Zamislite kako su rani telefonski operateri koristili razvodne ploče za povezivanje poziva – primili bi dolazni zahtjev i usmjerili ga na ispravnu destinaciju. Web rutiranje funkcionira na sličan način, uzimajući zahtjev za URL i određujući koji sadržaj prikazati.
Tradicionalno, web poslužitelji su to radili posluživanjem različitih HTML datoteka za različite URL-ove. Budući da gradimo jednostraničnu aplikaciju, moramo sami upravljati ovim rutiranjem pomoću JavaScripta. Ovaj pristup nam daje veću kontrolu nad korisničkim iskustvom i performansama.
Rutiranje je u biti povezivanje URL-ova s odgovarajućim sadržajem. Razmislite kako su rani telefonski operateri koristili kontrolne ploče za povezivanje poziva – primali su ulazni zahtjev i povezivali ga s ispravnim odredištem. Web rutiranje radi slično, uzima URL zahtjev i određuje koji sadržaj prikazati.
A["🌐 URL Putanja<br/>/dashboard"] --> B["🗺️ Objekt Ruta<br/>Pretraga"]
B --> C["🎯 ID Predloška<br/>'dashboard'"]
C --> D["📌 Pronađi Predložak<br/>getElementById"]
D --> E["👁️ Prikaži Ekran<br/>Kloniraj & Dodaj"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ Not Found"]
I --> J["🔄 Redirect to /login"]
H["📍 /unknown"] --> I["❌ Nije Pronađeno"]
I --> J["🔄 Preusmjeri na /login"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
Tradicionalno su web serveri to rješavali posluživanjem različitih HTML datoteka za različite URL-ove. Budući da izrađujemo jednostraničnu aplikaciju, moramo sami upravljati rutiranjem pomoću JavaScripta. Ovaj pristup daje nam veću kontrolu nad korisničkim iskustvom i performansama.
**Razumijevanje toka rutiranja:**
```mermaid
flowchart LR
A["🌐 URL Putanja<br/>/dashboard"] --> B["🗺️ Objekt Rute<br/>Pretraživanje"]
B --> C["🎯 ID Predloška<br/>'dashboard'"]
C --> D["📄 Pronađi Predložak<br/>getElementById"]
D --> E["👁️ Prikaži Ekran<br/>Kloniraj i Dodaj"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ Nije Pronađeno"]
I --> J["🔄 Preusmjeri na /login"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
**Razumijevanje tijeka rutiranja:**
- **Promjene URL-a** pokreću pretraživanje u našoj konfiguraciji ruta
- **Valjane rute** mapiraju se na specifične ID-ove predložaka za prikaz
- **Nevaljane rute** pokreću rezervno ponašanje kako bi se spriječila neispravna stanja
- **Prikaz predloška** slijedi trostupanjski proces koji smo naučili ranije
- **Ispravne rute** mapiraju na određene predloške za prikaz
- **Neispravne rute** pokreću rezervno ponašanje kako bi spriječile neispravna stanja
- **Prikaz predloška** slijedi postupak u tri koraka koji smo ranije naučili
Kada govorimo o web aplikaciji, nazivamo *Rutiranje* namjerom mapiranja **URL-ova** na specifične ekrane koji bi trebali biti prikazani. Na web stranici s više HTML datoteka, to se automatski obavlja jer se putanje datoteka odražavaju na URL-u. Na primjer, s ovim datotekama u vašoj projektnoj mapi:
Kada govorimo o web aplikaciji, *rutiranjem* nazivamo namjeru mapiranja **URL-ova** na određene zaslone koji se trebaju prikazati. Na web stranici s više HTML datoteka to se radi automatski jer se putanje datoteka odražavaju u URL-u. Na primjer, s ovim datotekama u vašem projektnom folderu:
```
mywebsite/index.html
@ -297,7 +389,7 @@ mywebsite/login.html
mywebsite/admin/index.html
```
Ako stvorite web poslužitelj s `mywebsite` kao korijenom, mapiranje URL-a bit će:
Ako kreirate web server s `mywebsite` kao korijenom, mapiranje URL-a bit će:
Međutim, za našu web aplikaciju koristimo jednu HTML datoteku koja sadrži sve ekrane pa nam ovo zadano ponašanje neće pomoći. Moramo ručno stvoriti ovu mapu i ažurirati prikazani predložak pomoću JavaScripta.
Međutim, za našu web aplikaciju koristimo jednu HTML datoteku koja sadrži sve zaslone, pa nam ovo zadano ponašanje neće pomoći. Moramo ručno izraditi ovu mapu i pomoću JavaScripta ažurirati prikazani predložak.
### Zadatak
Koristit ćemo jednostavan objekt za implementaciju [mape](https://en.wikipedia.org/wiki/Associative_array) između URL putanja i naših predložaka. Dodajte ovaj objekt na vrh svoje `app.js` datoteke.
Koristit ćemo jednostavan objekt za implementaciju [karte](https://en.wikipedia.org/wiki/Associative_array) između URL putanja i naših predložaka. Dodajte ovaj objekt na vrh vaše `app.js` datoteke.
```js
const routes = {
@ -321,10 +413,9 @@ const routes = {
**Razumijevanje ove konfiguracije ruta:**
- **Definira** mapiranje između URL putanja i identifikatora predložaka
- **Koristi** sintaksu objekta gdje su ključevi URL putanje, a vrijednosti sadrže informacije o predlošku
- **Omogućuje** jednostavno pretraživanje koji predložak prikazati za bilo koji dani URL
- **Omogućava** jednostavno pretraživanje koji se predložak prikazuje za određeni URL
- **Pruža** skalabilnu strukturu za dodavanje novih ruta u budućnosti
Sada malo izmijenimo funkciju `updateRoute`. Umjesto da izravno prosljeđujemo `templateId` kao argument, želimo ga dohvatiti prvo gledajući trenutni URL, a zatim koristiti našu mapu za dobivanje odgovarajuće vrijednosti identifikatora predloška. Možemo koristiti [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) za dobivanje samo dijela putanje iz URL-a.
Sada malo izmijenimo funkciju `updateRoute`. Umjesto da direktno prosljeđujemo `templateId` kao argument, želimo ga dohvatiti prvo gledajući trenutni URL, a zatim koristiti našu mapu za dobivanje odgovarajuće vrijednosti ID-a predloška. Možemo koristiti [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) da dobijemo samo odjeljak puta iz URL-a.
```js
function updateRoute() {
@ -339,50 +430,100 @@ function updateRoute() {
}
```
**Razrada onoga što se ovdje događa:**
- **Ekstrahira** trenutnu putanju iz URL-a preglednika koristeći `window.location.pathname`
- **Pretražuje** odgovarajuću konfiguraciju ruta u našem objektu ruta
- **Dohvaća**identifikator predloška iz konfiguracije ruta
- **Slijedi** isti proces prikaza predloška kao i prije
**Razlaganje onoga što se ovdje događa:**
- **Izdvaja** trenutni put iz URL-a preglednika koristeći `window.location.pathname`
- **Traži** odgovarajuću konfiguraciju rute u našem routes objektu
- **Dohvaća**ID predloška iz konfiguracije rute
- **Slijedi** isti proces renderiranja predloška kao i prije
- **Stvara** dinamički sustav koji reagira na promjene URL-a
Ovdje smo mapirali rute koje smo deklarirali na odgovarajući predložak. Možete provjeriti radi li ispravno tako da ručno promijenite URL u svom pregledniku.
✅ Što se događa ako unesete nepoznatu putanju u URL? Kako bismo to mogli riješiti?
Ovdje smo preslikali rute koje smo deklarirali na odgovarajući predložak. Možete isprobati da li radi ispravno tako da ručno promijenite URL u svom pregledniku.
✅ Što se događa ako unesete nepoznati put u URL? Kako bismo to mogli riješiti?
## Dodavanje navigacije
## Dodavanje Navigacije
S uspostavljenim rutiranjem, korisnici trebaju način za navigaciju kroz aplikaciju. Tradicionalne web stranice ponovno učitavaju cijele stranice prilikom klikanja na poveznice, ali mi želimo ažurirati i URL i sadržaj bez osvježavanja stranice. To stvara ugodnije iskustvo slično načinu na koji desktop aplikacije prelaze između različitih prikaza.
S uspostavljenim usmjeravanjem, korisnici trebaju način za navigaciju kroz aplikaciju. Tradicionalne web stranice ponovo učitavaju cijele stranice klikom na linkove, no želimo ažurirati i URL i sadržaj bez osvježavanja stranice. To stvara glađe korisničko iskustvo slično tome kako desktop aplikacije prelaze između različitih prikaza.
Moramo koordinirati dvije stvari: ažuriranje URL-a preglednika kako bi korisnici mogli spremiti stranice u oznake i dijeliti poveznice te prikazivanje odgovarajućeg sadržaja. Kada se to pravilno implementira, stvara se besprijekorna navigacija koju korisnici očekuju od modernih aplikacija.
Moramo uskladiti dvije stvari: ažuriranje URL-a preglednika kako bi korisnici mogli dodavati stranice u favorite i dijeliti poveznice, te prikazivanje odgovarajućeg sadržaja. Kada je pravilno implementirano, to stvara besprijekornu navigaciju koju korisnici očekuju od modernih aplikacija.
> 🏗️ **Uvid u arhitekturu**: Komponente navigacijskog sustava
App->>Template: Pronađi i kloniraj predložak nadzorne ploče
Template->>App: Vrati klonirani sadržaj
App->>Browser: Zamijeni sadržaj aplikacije s predloškom
Browser->>User: Prikaži zaslon nadzorne ploče
Note over User,Template: Korisnik klikne gumb za povratak u pregledniku
User->>Browser: Klikne gumb za povratak
Browser->>Browser: Povijest se vraća na /login
Browser->>App: popstate događaj pokrenut
App->>App: updateRoute() automatski pozvan
App->>Template: Pronađi i kloniraj predložak za prijavu
Template->>App: Vrati klonirani sadržaj
App->>Browser: Zamijeni sadržaj aplikacije s predloškom
Browser->>User: Prikaži zaslon prijave
```
### 🔄 **Pedagoški pregled**
**Arhitektura Jednostraničnih aplikacija (SPA)**: Provjerite svoje razumijevanje potpunog sustava:
- ✅ Kako se klijentsko usmjeravanje razlikuje od tradicionalnog usmjeravanja na strani servera?
- ✅ Zašto je History API bitan za pravilnu navigaciju u SPA?
- ✅ Kako predlošci omogućuju dinamički sadržaj bez ponovnog učitavanja stranice?
- ✅ Koju ulogu ima upravljanje događajima u presretanju navigacije?
**Integracija sustava**: Vaša SPA demonstrira:
- **Upravljanje predlošcima**: Ponovno iskoristivi UI elementi s dinamičkim sadržajem
- **Klijentsko usmjeravanje**: Upravljanje URL-om bez zahtjeva prema serveru
- **Arhitekturu pokrenutu događajima**: Reaktivna navigacija i korisničke interakcije
- **Integraciju preglednika**: Ispravan rad s poviješću i gumbima naprijed/natrag
- **Optimizaciju performansi**: Brzi prijelazi i smanjeno opterećenje servera
**Profesionalni obrasci**: Implementirali ste:
- **Odvajanje modela i prikaza**: Predlošci odvojeni od logike aplikacije
- **Upravljanje stanjem**: Sinkronizacija stanja URL-a sa prikazanim sadržajem
- **Postupno poboljšanje**: JavaScript unapređuje osnovnu HTML funkcionalnost
- **Korisničko iskustvo**: Glatka, aplikaciji slična navigacija bez osvježavanja stranice
> <20>**Uvid u arhitekturu**: Komponente navigacijskog sustava
>
> **Što gradite:**
> - **🔄 Upravljanje URL-om**: Ažurira adresnu traku preglednika bez ponovnog učitavanja stranice
> - **📋 Sustav predložaka**: Dinamički mijenja sadržaj na temelju trenutne rute
> - **📚 Integracija povijesti**: Održava funkcionalnost gumba za povratak/naprijed u pregledniku
> - **🛡️ Rukovanje greškama**: Elegantni načini za nevažeće ili nedostajuće rute
>
> **Kako komponente rade zajedno:**
> - **Prati** događaje navigacije (klikovi, promjene povijesti)
> - **Ažurira** URL koristeći History API
> - **Prikazuje** odgovarajući predložak za novu rutu
> - **Održava** besprijekorno korisničko iskustvo tijekom navigacije
> - **🔄 Upravljanje URL-om**: Ažurira adresnu traku bez ponovnog učitavanja stranice
> - **📋 Sustav predložaka**: Dinamička zamjena sadržaja ovisno o trenutnoj ruti
> - **📚 Integracija povijesti**: Održava funkcionalnost gumba za naprijed/natrag
> - **🛡️ Rukovanje pogreškama**: Lijepe zamjene za neispravne ili nedostajuće rute
>
> **Kako komponente međusobno djeluju:**
> - **Osluškuje** događaje navigacije (klikove, promjene povijesti)
> - **Ažurira** URL koristeći History API
> - **Renderira** odgovarajući predložak za novu rutu
> - **Održava** besprijekorno korisničko iskustvo kroz cijelo vrijeme
Sljedeći korak za našu aplikaciju je dodavanje mogućnosti navigacije između stranica bez ručnog mijenjanja URL-a. To podrazumijeva dvije stvari:
Sljedeći korak za našu aplikaciju je omogućiti navigaciju između stranica bez potrebe za ručnim mijenjanjem URL-a. To podrazumijeva dvije stvari:
1. Ažuriranje trenutnog URL-a
2. Ažuriranje prikazanog predloška na temelju novog URL-a
1. Ažuriranje trenutnog URL-a
2. Ažuriranje prikazanog predloška na temelju novog URL-a
Već smo se pobrinuli za drugi dio s funkcijom `updateRoute`, pa moramo smisliti kako ažurirati trenutni URL.
Drugi dio smo već riješili funkcijom `updateRoute`, pa sada moramo smisliti kako ažurirati trenutni URL.
Morat ćemo koristiti JavaScript, a posebno [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) koji omogućuje ažuriranje URL-a i stvaranje novog unosa u povijesti pregledavanja, bez ponovnog učitavanja HTML-a.
Morat ćemo koristiti JavaScript, a točnije [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) koji omogućuje ažuriranje URL-a i stvaranje novog unosa u povijesti pregledavanja, bez ponovnog učitavanja HTML-a.
> ⚠️ **Važna napomena**: Iako se HTML element sidra [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) može koristiti samostalno za stvaranje hiperveza na različite URL-ove, on će po zadanom uzrokovati ponovno učitavanje HTML-a. Potrebno je spriječiti ovo ponašanje prilikom rukovanja rutiranjem pomoću prilagođenog JavaScripta, koristeći funkciju preventDefault() na događaju klika.
> ⚠️ **Važna napomena**: Dok se HTML element sidra [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) može samostalno koristiti za stvaranje hiperveza na različite URL-ove, on će po defaultu uzrokovati ponovo učitavanje HTML-a. Potrebno je spriječiti ovo ponašanje prilikom rukovanja usmjeravanjem u prilagođenom JavaScriptu koristeći funkciju preventDefault() na događaju klika.
### Zadatak
Napravimo novu funkciju koju možemo koristiti za navigaciju u našoj aplikaciji:
Napravi novu funkciju koju ćemo koristiti za navigaciju u našoj aplikaciji:
```js
function navigate(path) {
@ -390,16 +531,16 @@ function navigate(path) {
updateRoute();
}
```
**Razumijevanje ove navigacijske funkcije:**
- **Ažurira** URL preglednika na novu putanju koristeći `history.pushState`
- **Dodaje** novi unos u povijest preglednika za pravilnu podršku gumba za povratak/naprijed
- **Pokreće** funkciju `updateRoute()` za prikaz odgovarajućeg predloška
- **Održava** iskustvo aplikacije s jednom stranicom bez ponovnog učitavanja stranice
Ova metoda prvo ažurira trenutni URL na temelju zadane putanje, a zatim ažurira predložak. Svojstvo `window.location.origin` vraća korijen URL-a, omogućujući nam da rekonstruiramo potpuni URL iz zadane putanje.
**Razumijevanje ove funkcije za navigaciju:**
- **Ažurira** URL preglednika na novi put koristeći `history.pushState`
- **Dodaje** novi unos u povijest preglednika za ispravnu podršku gumba natrag/naprijed
- **Poziva** funkciju `updateRoute()` za prikaz odgovarajućeg predloška
- **Održava** iskustvo jednostranične aplikacije bez ponovnog učitavanja stranice
Ova metoda najprije ažurira trenutni URL na temelju danog puta, zatim ažurira predložak. Svojstvo `window.location.origin` vraća korijen URL-a, omogućujući nam rekonstrukciju potpunog URL-a iz danog puta.
Sada kada imamo ovu funkciju, možemo se pobrinuti za problem koji imamo ako putanja ne odgovara nijednoj definiranoj ruti. Modificirat ćemo funkciju `updateRoute` dodavanjem rezervne opcije za jednu od postojećih ruta ako ne možemo pronaći podudaranje.
Sada kada imamo ovu funkciju, možemo riješiti problem koji se javi ako put ne odgovara nijednoj definiranoj ruti. Izmijenit ćemo funkciju `updateRoute` dodavanjem rezervne opcije na neku od postojećih ruta ako nema podudaranja.
```js
function updateRoute() {
@ -417,16 +558,16 @@ function updateRoute() {
app.appendChild(view);
}
```
**Ključne točke za zapamtiti:**
- **Provjerava** postoji li ruta za trenutnu putanju
- **Preusmjerava** na stranicu za prijavu kada se pristupi nevažećoj ruti
- **Pruža** rezervni mehanizam koji sprječava neispravnu navigaciju
- **Osigurava** da korisnici uvijek vide valjanu stranicu, čak i s netočnim URL-ovima
Ako se ruta ne može pronaći, sada ćemo preusmjeriti na stranicu `login`.
**Ključne točke za zapamtiti:**
- **Provjerava** postoji li ruta za trenutni put
- **Preusmjerava** na stranicu za prijavu kad se pristupi neispravnoj ruti
- **Nudi** rezervni mehanizam koji sprječava neispravnu navigaciju
- **Osigurava** da korisnici uvijek vide valjani ekran, čak i s pogrešnim URL-ovima
Sada kreirajmo funkciju za dobivanje URL-a kada se klikne na poveznicu i za sprječavanje zadane funkcije preglednika za ponašanje poveznica:
Ako ruta ne može biti pronađena, sada ćemo preusmjeriti na stranicu `login`.
Sada napravimo funkciju koja dohvaća URL klikom na link i sprječava zadano ponašanje preglednika:
```js
function onLinkClick(event) {
@ -434,36 +575,36 @@ function onLinkClick(event) {
navigate(event.target.href);
}
```
**Razrada ovog rukovatelja klikova:**
- **Sprječava** zadano ponašanje poveznica preglednika koristeći `preventDefault()`
- **Izvlači** odredišni URL iz elementa poveznice na koji se kliknulo
- **Poziva** našu prilagođenu funkciju navigate umjesto ponovnog učitavanja stranice
- **Održava** glatko iskustvo aplikacije s jednom stranicom
**Razlaganje ovog rukovatelja klikom:**
- **Sprječava** zadano ponašanje linka preglednika koristeći `preventDefault()`
- **Dohvaća** odredišni URL iz elementa koji je kliknut
- **Poziva** našu prilagođenu funkciju `navigate` umjesto ponovnog učitavanja stranice
- **Povezuje** svaku poveznicu s našim prilagođenim navigacijskim sustavom
- **Prosljeđuje** događaj klika našoj funkciji `onLinkClick` za obradu
**Što ova veza za `onclick` ostvaruje:**
- **Povezuje** svaki link s našim prilagođenim navigacijskim sustavom
- **Prosljeđuje** događaj klika našoj funkciji `onLinkClick` za daljnju obradu
- **Omogućuje** glatku navigaciju bez ponovnog učitavanja stranice
- **Održava**pravilnu strukturu URL-a koju korisnici mogu spremiti u oznake ili dijeliti
- **Održava**ispravan URL koji korisnici mogu dodavati u favorite ili dijeliti
Atribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) povezuje događaj `click` s JavaScript kodom, ovdje pozivom funkcije `navigate()`.
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) atribut povezuje `click` događaj s JavaScript kodom, ovdje pozivom funkcije `navigate()`.
Pokušajte kliknuti na ove poveznice, sada biste trebali moći navigirati između različitih ekrana vaše aplikacije.
Isprobajte klikom na ove linkove, sada biste trebali moći navigirati između različitih ekrana vaše aplikacije.
✅ Metoda `history.pushState` dio je HTML5 standarda i implementirana je u [svim modernim preglednicima](https://caniuse.com/?search=pushState). Ako gradite web aplikaciju za starije preglednike, postoji trik koji možete koristiti umjesto ovog API-ja: korištenjem [hasha (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prije putanje možete implementirati rutiranje koje funkcionira s redovnom navigacijom sidra i ne ponovno učitava stranicu, jer je njegova svrha bila stvaranje unutarnjih poveznica unutar stranice.
✅ Metoda `history.pushState` dio je HTML5 standarda i implementirana je u [svim modernim preglednicima](https://caniuse.com/?search=pushState). Ako razvijate web aplikaciju za starije preglednike, postoji trik koji možete koristiti umjesto ovog API-ja: korištenjem [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prije puta možete implementirati usmjeravanje koje radi s običnim navigacijama sidrom i ne učitava stranicu, jer je njegova svrha bila stvaranje internih poveznica unutar stranice.
## Omogućavanje rada gumba za povratak i naprijed
## Omogućavanje rada tipki Natrag i Naprijed
Gumbi za povratak i naprijed temeljni su za web pregledavanje, slično kao što kontrolori misija NASA-e mogu pregledavati prethodna stanja sustava tijekom svemirskih misija. Korisnici očekuju da ti gumbi rade, a kada ne rade, to narušava očekivano iskustvo pregledavanja.
Tipke natrag i naprijed su temeljne za web pregledavanje, slično kao što NASA-ini kontrolori misije mogu pregledavati prethodna stanja sustava tijekom svemirskih misija. Korisnici očekuju da te tipke rade, a kada ne rade, narušava se očekivano iskustvo pregledavanja.
Naša aplikacija s jednom stranicom treba dodatnu konfiguraciju za podršku ovih gumba. Preglednik održava povijesni stog (koji smo dodavali s `history.pushState`), ali kada korisnici navigiraju kroz ovu povijest, naša aplikacija mora reagirati ažuriranjem prikazanog sadržaja.
Naša jednostranična aplikacija treba dodatnu konfiguraciju za podršku ovog funkcionalnosti. Preglednik održava stog povijesti (koji smo dosad punili s `history.pushState`), ali kada se korisnici kreću kroz ovu povijest, naša aplikacija treba reagirati ažuriranjem prikazanog sadržaja sukladno tome.
- **Korisničke akcije** pokreću navigaciju putem klikova ili gumba preglednika
- **Aplikacija presreće** klikove na poveznice kako bi spriječila ponovno učitavanje stranice
**Ključne točke interakcije:**
- **Korisničke akcije** pokreću navigaciju klikovima ili gumbima preglednika
- **Aplikacija presreće** klikove na linkove kako bi spriječila ponovno učitavanje stranice
- **History API** upravlja promjenama URL-a i stogom povijesti preglednika
- **Predlošci** pružaju strukturu sadržaja za svaki ekran
- **Slušatelji događaja** osiguravaju da aplikacija reagira na sve vrste navigacije
- **Slušatelji događaja** osiguravaju da aplikacija odgovara na sve vrste navigacija
Korištenje`history.pushState` stvara nove unose u povijesti navigacije preglednika. To možete provjeriti držeći *gumb za povratak* vašeg preglednika, trebao bi prikazati nešto poput ovoga:
Korištenjem `history.pushState` stvaraju se novi unosi u povijest preglednika. To možete provjeriti držanjem *tipke za povratak* u pregledniku, trebala bi se prikazati povijest poput ovoga:
Ako pokušate kliknuti na gumb za povratak nekoliko puta, vidjet ćete da se trenutni URL mijenja i povijest se ažurira, ali isti predložak ostaje prikazan.
Ako pokušate nekoliko puta kliknuti gumb za povratak, vidjet ćete da se trenutni URL mijenja i povijest se ažurira, ali se prikazuje isti predložak.
To je zato što aplikacija ne zna da trebamo pozvati `updateRoute()` svaki put kada se povijest promijeni. Ako pogledate dokumentaciju za [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), možete vidjeti da ako se stanje promijeni - što znači da smo se pomaknuli na drugi URL - događaj [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) se pokreće. Iskoristit ćemo to za rješavanje ovog problema.
To je zato što aplikacija ne zna da trebamo pozvati `updateRoute()` svaki put kada se povijest promijeni. Ako pogledate dokumentaciju za [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), vidjet ćete da se prilikom promjene stanja - što znači prelazak na drugi URL - pokreće događaj [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). Iskoristit ćemo to za popravak tog problema.
### Zadatak
Kako bismo osigurali da se prikazani predložak ažurira kada se povijest preglednika promijeni, povezat ćemo novu funkciju koja poziva `updateRoute()`. To ćemo učiniti na dnu našeg `app.js` datoteke:
Kako bismo osigurali da se prikazani predložak ažurira kada se povijest preglednika promijeni, pripojit ćemo novu funkciju koja poziva `updateRoute()`. To ćemo ubaciti na dno naše datoteke `app.js`:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
**Razumijevanje ove integracije povijesti:**
- **Prati** događaje `popstate` koji se događaju kada korisnici navigiraju pomoću gumba preglednika
- **Koristi** streličnu funkciju za sažet sintaksu rukovatelja događaja
- **Automatski poziva**`updateRoute()` svaki put kada se stanje povijesti promijeni
- **Inicijalizira** aplikaciju pozivanjem `updateRoute()` kada se stranica prvi put učita
- **Osigurava** da se ispravan predložak prikazuje bez obzira na način navigacije korisnika
> 💡 **Savjet**: Koristili smo [streličnu funkciju](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) za deklariranje našeg rukovatelja događaja `popstate` radi sažetosti, ali obična funkcija bi također radila.
**Razumijevanje ove integracije s poviješću:**
- **Osluškuje**`popstate` događaje koji nastaju kada korisnici navigiraju pomoću gumba preglednika
- **Koristi** arrow funkciju radi sažetosti koda rukovatelja događaja
- **Automatski poziva**`updateRoute()` kad god se stanje povijesti promijeni
- **Inicijalizira** aplikaciju pozivom `updateRoute()` kada se stranica prvi put učita
- **Osigurava** ispravan prikaz predloška bez obzira na način navigacije korisnika
> 💡 **Savjet za profesionalce**: Ovdje smo koristili [arrow funkciju](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) za deklariranje rukovatelja `popstate` događaja zbog sažetosti, ali obična funkcija bi isto tako radila.
> 🎥 Kliknite na sliku iznad za video o streličnim funkcijama.
### 🎯 **Što možete postići u ovom satu**
- [ ] Završiti kviz poslije lekcije i razumjeti koncepte SPA arhitekture
- [ ] Dodati CSS stilizaciju kako bi vaši predlošci bankarske aplikacije izgledali profesionalno
- [ ] Implementirati 404 stranicu s ispravnim rukovanjem greškama
- [ ] Kreirati stranicu s zaslugama i dodatnom funkcionalnošću usmjeravanja
- [ ] Dodati učitavajuća stanja i prijelaze između promjena predložaka
Sada pokušajte koristiti gumbe za povratak i naprijed u vašem pregledniku i provjerite je li prikazana ruta ispravno ažurirana ovaj put.
### 📅 **Vaš jednodnevni razvojni put SPA**
- [ ] Završiti kompletnu bankarsku aplikaciju s obrascima, upravljanjem podacima i trajnošću
- [ ] Dodati napredne značajke usmjeravanja poput parametara rute i ugniježđenih ruta
- [ ] Implementirati navigacijske zaštite i usmjeravanje bazirano na autentikaciji
- [ ] Kreirati ponovo iskoristive komponente predložaka i knjižnicu komponenti
- [ ] Dodati animacije i prijelaze za uglađenije iskustvo korisnika
- [ ] Postaviti SPA na hosting platformu i pravilno konfigurirati usmjeravanje
### 🌟 **Vaša mjesečna vladavina frontend arhitekturom**
- [ ] Izgraditi složene SPA koristeći moderne okvire poput React, Vue ili Angular
- [ ] Naučiti napredne obrasce upravljanja stanjem i knjižnice
- [ ] Ovladati alatima za izgradnju i razvojnim radnim tokovima za SPA
- [ ] Implementirati značajke progresivnih web aplikacija i offline funkcionalnost
- [ ] Istražiti tehnike optimizacije performansi za velike SPA projekte
- [ ] Doprinijeti open-source SPA projektima i podijeliti svoje znanje
## 🎯 Vaš vremenski okvir za ovladavanje jednostaničnom aplikacijom
```mermaid
timeline
title Napredak učenja SPA razvoja i moderne web arhitekture
section Osnove (20 minuta)
Sustavi predložaka: HTML elementi predložaka
: Manipulacija DOM-om
: Kloniranje sadržaja
: Dinamičko prikazivanje
section Osnove usmjeravanja (30 minuta)
Navigacija na strani klijenta: Upravljanje URL-om
: History API
: Mapiranje ruta
: Obrada događaja
section Korisničko iskustvo (40 minuta)
Usavršavanje navigacije: Integracija preglednika
: Podrška za tipku za povratak
: Obrada pogrešaka
: Glatki prijelazi
section Obrasci arhitekture (50 minuta)
Profesionalni SPA-i: Sustavi komponenti
: Upravljanje stanjem
: Optimizacija performansi
: Granice pogrešaka
section Napredne tehnike (1 tjedan)
Integracija okvira: React Router
: Vue Router
: Angular Router
: Biblioteke stanja
section Vještine za produkciju (1 mjesec)
Razvoj za poduzeća: Sustavi izgradnje
: Strategije testiranja
: Sustavi postavljanja
: Praćenje performansi
```
### 🛠️ Sažetak vašeg alata za razvoj SPA
Nakon završetka ove lekcije, sada ste usavršili:
- **Arhitekturu predložaka**: Ponovno upotrebljivi HTML elementi s dinamičkim prikazom sadržaja
- **Klijentsko usmjeravanje**: Upravljanje URL-om i navigacija bez ponovnog učitavanja stranice
- **Integraciju preglednika**: Korištenje History API-a i podrška gumba naprijed/natrag
- **Sustave pokrenute događajima**: Upravljanje navigacijom i korisničkim interakcijama
- **Manipulaciju DOM-om**: Kloniranje predložaka, izmjene sadržaja i upravljanje elementima
- **Rukovanje pogreškama**: Lijepe zamjene za neispravne rute i nedostajući sadržaj
- **Obrasce za performanse**: Učinkovito učitavanje i prikazivanje sadržaja
**Primjene u stvarnom svijetu**: Vaše vještine razvoja SPA izravno se primjenjuju na:
- **Moderne web aplikacije**: React, Vue, Angular i razvoj u ostalim okvirima
- **Progresivne web aplikacije**: Aplikacije koje rade offline i imaju iskustvo slično aplikacijama
- **Enterprise nadzorne ploče**: Kompleksne poslovne aplikacije s više prikaza
- **E-trgovinu**: Katalozi proizvoda, košarice i proces kupnje
- **Upravljanje sadržajem**: Dinamičko stvaranje i uređivanje sadržaja
- **Mobilni razvoj**: Hibridne aplikacije koristeći web tehnologije
**Profesionalne vještine koje ste stekli**: Sada možete:
- **Dizajnirajte** jednostranične aplikacije s pravilnom podjelom odgovornosti
- **Implementirajte** sustave usmjeravanja na strani klijenta koji skaliraju s kompleksnošću aplikacije
- **Otklonite pogreške** u složenim navigacijskim tokovima koristeći alate za razvojne programere u pregledniku
- **Optimizirajte** izvedbu aplikacije kroz učinkovito upravljanje predlošcima
- **Dizajnirajte** korisnička iskustva koja se osjećaju domaće i responzivno
**Ovladali ste konceptima frontend razvoja**:
- **Arhitektura komponenti**: Ponovno upotrebljivi UI obrasci i sustavi predložaka
- **Sinkronizacija stanja**: Upravljanje stanjem URL-a i povijesti preglednika
- **Programiranje vođeno događajima**: Obrada korisničkih interakcija i navigacije
- **Optimizacija performansi**: Učinkovita manipulacija DOM-om i učitavanje sadržaja
- **Dizajn korisničkog iskustva**: Glatki prijelazi i intuitivna navigacija
**Sljedeća razina**: Spremni ste istražiti moderne frontend okvire, napredno upravljanje stanjem ili izgraditi složene enterprise aplikacije!
🌟 **Postignuće otključano**: Izgradili ste profesionalnu osnovu jednostanične aplikacije s modernim obrascima web arhitekture!
---
## Izazov GitHub Copilot Agent 🚀
## Izazov GitHub Copilot Agenta 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Koristite Agent mod da dovršite sljedeći izazov:
**Opis:** Poboljšajte aplikaciju za bankarstvo implementacijom rukovanja greškama i predloška za 404 stranicu za nevažeće rute, poboljšavajući korisničko iskustvo prilikom navigacije na nepostojeće stranice.
**Opis:** Poboljšajte bankarsku aplikaciju implementacijom obrade pogrešaka i predloška stranice 404 za nevažeće rute, poboljšavajući korisničko iskustvo pri navigaciji na nepostojeće stranice.
**Zadatak:** Kreirajte novi HTML predložak s ID-om "not-found" koji prikazuje korisnički prilagođenu 404 stranicu s dizajnom. Zatim modificirajte logiku rutiranja u JavaScriptu kako biste prikazali ovaj predložak kada korisnici navigiraju na nevažeće URL-ove i dodajte gumb "Idi na početnu stranicu" koji vodi natrag na stranicu za prijavu.
**Zadatak:** Kreirajte novi HTML predložak s id-om "not-found" koji prikazuje korisnički prijateljsku 404 stranicu s pogreškom uz stilizaciju. Zatim modificirajte JavaScript logiku usmjeravanja da prikaže ovaj predložak kada korisnici pristupaju nevažećim URL-ovima, i dodajte gumb "Idi na početnu" koji vraća na stranicu za prijavu.
Saznajte više o [načinu rada agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) potražite ovdje.
## 🚀 Izazov
Dodajte novi predložak i rutu za treću stranicu koja prikazuje zasluge za ovu aplikaciju.
**Ciljevi izazova:**
- **Kreirajte** novi HTML predložak s odgovarajućom strukturom sadržaja
- **Dodajte** novu rutu u vaš objekt konfiguracije ruta
- **Uključite** navigacijske poveznice prema i od stranice sa zaslugama
- **Kreirajte** novi HTML predložak s odgovarajućom sadržajnom strukturom
- **Dodajte** novu rutu u konfiguracijski objekt ruta
- **Uključite** navigacijske poveznice do i s stranice zasluga
- **Testirajte** da sva navigacija ispravno funkcionira s poviješću preglednika
## Kviz nakon predavanja
## Kviz poslije predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/42)
[Kviz poslije predavanja](https://ff-quizzes.netlify.app/web/quiz/42)
## Pregled i samostalno učenje
Rutiranje je jedan od iznenađujuće složenih dijelova web razvoja, posebno kako se web kreće od ponašanja osvježavanja stranica prema aplikacijama s jednom stranicom. Pročitajte malo o [načinu na koji Azure Static Web App usluga](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) rukuje rutiranjem. Možete li objasniti zašto su neke od odluka opisanih u tom dokumentu nužne?
Usmjeravanje je jedan od neočekivano složenih dijelova web razvoja, posebno kako web prelazi s ponašanja osvježavanja stranica na osvježavanja stranica u Jednostaničnoj aplikaciji (SPA). Pročitajte malo o [kako Azure Static Web App servis](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) rukuje usmjeravanjem. Možete li objasniti zašto su neke od odluka opisane u tom dokumentu nužne?
**Dodatni resursi za učenje:**
- **Istražite** kako popularni okviri poput React Routera i Vue Routera implementiraju rutiranje na strani klijenta
- **Istražite** razlike između rutiranja temeljenog na hashu i rutiranja putem History API-ja
- **Naučite** o renderiranju na strani poslužitelja (SSR) i kako ono utječe na strategije rutiranja
- **Istražite** kako progresivne web aplikacije (PWAs) rukovode rutiranjem i navigacijom
- **Istražite** kako popularni okviri poput React Routera i Vue Routera implementiraju usmjeravanje na strani klijenta
- **Istražite** razlike između usmjeravanja temeljenog na hash-u i usmjeravanja putem history API-ja
- **Naučite** o server-side renderiranju (SSR) i kako utječe na strategije usmjeravanja
- **Istražite** kako Progressive Web Apps (PWA) upravljaju usmjeravanjem i navigacijom
## Zadatak
[Poboljšajte rutiranje](assignment.md)
[Unaprijedite usmjeravanje](assignment.md)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden korištenjem AI servisa za prijevod [Co-op Translator](https://github.com/Azure/co-op-translator). Iako se trudimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati autentičnim i službenim izvorom. Za važne informacije preporučuje se stručno ljudsko prevođenje. Nismo odgovorni za bilo kakve nesporazume ili kriva tumačenja nastala uporabom ovog prijevoda.
A[⚡ 5 minuta] --> B[Diagnosticirajte probleme sa stanjem]
B --> C[Izradite centalni objekt stanja]
C --> D[Dodajte funkciju updateState]
D --> E[Vidi trenutna poboljšanja]
```
- **Minuta 1**: Testirajte trenutačni problem sa stanjem - prijavite se, osvježite stranicu, promatrajte odjavu
- **Minuta 2**: Zamijenite `let account = null` s `let state = { account: null }`
- **Minuta 3**: Napravite jednostavnu funkciju `updateState()` za kontrolirana ažuriranja
- **Minuta 4**: Ažurirajte jednu funkciju da koristi novi obrazac
- **Minuta 5**: Testirajte poboljšanu predvidivost i mogućnost ispravljanja pogrešaka
**Brzi dijagnostički test**:
```javascript
// Prije: Raspodijeljeno stanje
let account = null; // Izgubljeno pri osvježavanju!
// Poslije: Centralizirano stanje
let state = Object.freeze({ account: null }); // Kontrolirano i praćeno!
```
**Zašto je to važno**: U 5 minuta dobit ćete iskustvo transformacije od kaotičnog upravljanja stanjem do predvidivih, lako ispravljivih obrazaca. Ovo je temelj koji čini složene aplikacije održivima.
## 🗺️ Vaše putovanje kroz savladavanje upravljanja stanjem
```mermaid
journey
title Od Raspršenog Stanja do Profesionalne Arhitekture
section Dijagnosticiranje Problema
Identificirati probleme gubitka stanja: 3: You
Razumjeti raspršena ažuriranja: 4: You
Prepoznati potrebe arhitekture: 6: You
section Centralizacija Kontrole
Kreirati jedinstveni objekt stanja: 5: You
Implementirati kontrolirana ažuriranja: 7: You
Dodati nepromjenjive obrasce: 8: You
section Dodavanje Utrvjedenja
Implementirati localStorage: 6: You
Obraditi serijalizaciju: 7: You
Kreirati kontinuitet sesije: 9: You
section Uravnoteženje Svježine
Rješavati zastarjelost podataka: 5: You
Izgraditi sustave osvježavanja: 8: You
Postići optimalnu ravnotežu: 9: You
```
**Vaš cilj putovanja**: Do kraja ove lekcije izgradit ćete sustav upravljanja stanjem profesionalne razine koji rukuje trajnošću, svježinom podataka i predvidivim ažuriranjima - iste obrasce koji se koriste u produkcijskim aplikacijama.
Upravljanje stanjem u aplikaciji je poput navigacijskog sustava na svemirskoj letjelici Voyager – kada sve radi glatko, jedva primijetite da postoji. Ali kad nešto pođe po zlu, postaje razlika između dolaska u međuzvjezdani prostor i lutanja izgubljenog u kozmičkom bespuću. U web razvoju, stanje predstavlja sve što vaša aplikacija treba zapamtiti: status prijave korisnika, podatke iz obrazaca, povijest navigacije i privremena stanja sučelja.
Upravljanje stanjem je poput navigacijskog sustava na Voyager svemirskom brodu – kad sve radi glatko, jedva da ga primjećujete. Ali kada nešto pođe po zlu, razlika je između dosezanja međuzvjezdanog prostora i besciljnog lutanja u kozmičkoj praznini. U web razvoju, stanje predstavlja sve što vaša aplikacija treba pamtiti: status prijave korisnika, podatke obrazaca, povijest navigacije i privremena sučelja.
Kako se vaša aplikacija za bankarstvo razvijala od jednostavnog obrasca za prijavu do sofisticiranije aplikacije, vjerojatno ste se susreli s nekim uobičajenim izazovima. Osvježite stranicu i korisnici se neočekivano odjavljuju. Zatvorite preglednik i sav napredak nestaje. Pokušavate otkloniti problem i tragate kroz više funkcija koje sve mijenjaju iste podatke na različite načine.
Kako se vaša bankovna aplikacija razvila od jednostavnog obrasca za prijavu u složeniju aplikaciju, vjerojatno ste naišli na neke uobičajene izazove. Osvježite stranicu i korisnici su neočekivano odjavljeni. Zatvorite preglednik i sav napredak nestane. Prilikom otklanjanja pogrešaka lovite kroz više funkcija koje sve na različite načine mijenjaju iste podatke.
To nisu znakovi lošeg kodiranja – to su prirodne poteškoće koje se javljaju kada aplikacije dosegnu određeni prag složenosti. Svaki se programer suočava s tim izazovima dok njihove aplikacije prelaze iz "dokaza koncepta" u "proizvod spreman za upotrebu".
Ovo nisu znakovi lošeg kodiranja – to su prirodni dječji problemi koji se pojavljuju kada aplikacije dosegnu određenu razinu složenosti. Svaki programer će se susresti s tim izazovima dok njegove aplikacije prelaze iz „dokaza koncepta“ u „spremne za produkciju“.
U ovoj lekciji implementirat ćemo centralizirani sustav upravljanja stanjem koji vašu aplikaciju za bankarstvo pretvara u pouzdanu, profesionalnu aplikaciju. Naučit ćete upravljati tokovima podataka predvidljivo, pravilno čuvati korisničke sesije i stvoriti glatko korisničko iskustvo koje moderne web aplikacije zahtijevaju.
U ovoj lekciji implementirat ćemo centralizirani sustav upravljanja stanjem koji će vašu bankovnu aplikaciju pretvoriti u pouzdanu, profesionalnu aplikaciju. Naučit ćete upravljati proticima podataka predvidivo, pravilno trajno spremati korisničke sesije i stvoriti glatko korisničko iskustvo koje moderne web aplikacije zahtijevaju.
## Preduvjeti
Prije nego što zaronite u koncepte upravljanja stanjem, trebate pravilno postaviti razvojno okruženje i imati temelj svoje aplikacije za bankarstvo. Ova lekcija izravno se nadovezuje na koncepte i kod iz prethodnih dijelova ove serije.
Prije ulaska u koncepte upravljanja stanjem, trebate imati pravilno postavljeno razvojno okruženje i temelj svoje bankovne aplikacije. Ova lekcija nadograđuje direktno na koncepte i kod iz prethodnih dijelova ovog serijala.
Provjerite imate li sljedeće komponente spremne prije nego što nastavite:
Provjerite imate li spremne sljedeće komponente prije nego krenete dalje:
**Potrebna postavka:**
- Završite [lekciju o dohvaćanju podataka](../3-data/README.md) - vaša aplikacija treba uspješno učitati i prikazati podatke o računu
- Instalirajte [Node.js](https://nodejs.org) na vaš sustav za pokretanje pozadinskog API-ja
- Pokrenite [server API](../api/README.md) lokalno za rukovanje operacijama s podacima o računu
- Završite [lekciju o dohvaćanju podataka](../3-data/README.md) – vaša aplikacija treba uspješno učitavati i prikazivati podatke o računu
- Instalirajte [Node.js](https://nodejs.org) na sustav za pokretanje backend API-ja
- Pokrenite [server API](../api/README.md) lokalno radi upravljanja podacima o računu
**Testiranje vašeg okruženja:**
Provjerite radi li vaš API server ispravno izvršavanjem ove naredbe u terminalu:
Provjerite radi li vaš API server pravilno izvršavanjem ove naredbe u terminalu:
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
# -> treba vratiti "Bank API v1.0.0" kao rezultat
```
**Što ova naredba radi:**
- **Šalje** GET zahtjev vašem lokalnom API serveru
- **Testira** vezu i provjerava odgovara li server
- **Vraća** informacije o verziji API-ja ako sve radi ispravno
- **Šalje** GET zahtjev lokalnom API serveru
- **Testira** vezu i provjerava reagira li server
- **Vraća** informaciju o verziji API-ja ako sve radi ispravno
## 🧠 Pregled arhitekture upravljanja stanjem
```mermaid
mindmap
root((Upravljanje Stanjima))
Trenutni Problemi
Gubitak Sesije
Problemi Osvježavanja Stranice
Utjecaj Zatvaranja Preglednika
Problemi Resetiranja Varijabli
Raspršena Ažuriranja
Više Točaka Izmjene
Izazovi Debugiranja
Nepredvidivo Ponašanje
Nepotpuno Čišćenje
Problemi Statusa Odjave
Curjenje Memorije
Sigurnosni Problemi
Centralizirana Rješenja
Jedinstveni Objekt Stanja
Jedini Izvor Istine
Predvidiva Struktura
Skalabilna Osnova
Kontrolirana Ažuriranja
Nepromjenjivi Obrasci
Korištenje Object.freeze
Promjene Temeljene na Funkcijama
Praćenje Stanja
Upravljanje Poviješću
Vidljivost Debugiranja
Revizija Promjena
Strategije Očuvanja
Integracija localStoragea
Kontinuitet Sesije
JSON Serijalizacija
Automatska Sinkronizacija
Svježina Podataka
Osvježavanje Servera
Rukovanje Zastarjelim Podacima
Optimizacija Balansa
Optimizacija Spremišta
Minimalni Podaci
Fokus na Performansama
Sigurnosne Razmatranja
```
**Temeljno pravilo**: Profesionalno upravljanje stanjem uravnotežuje predvidivost, trajnost i performanse za stvaranje pouzdanih korisničkih iskustava koja se prilagođavaju od jednostavnih interakcija do složenih poslovnih procesa.
---
## Dijagnosticiranje trenutnih problema sa stanjem
## Dijagnosticiranje trenutačnih problema sa stanjem
Kao Sherlock Holmes koji istražuje mjesto zločina, moramo razumjeti što se točno događa u našoj trenutnoj implementaciji prije nego što riješimo misterij nestanka korisničkih sesija.
Kao Sherlock Holmes koji promatra mjesto zločina, moramo točno razumjeti što se događa u našoj trenutačnoj implementaciji prije nego što riješimo misterij nestanaka korisničkih sesija.
Provedimo jednostavan eksperiment koji otkriva temeljne izazove upravljanja stanjem:
Provest ćemo jednostavan eksperiment koji otkriva temeljne izazove upravljanja stanjem:
**🧪 Isprobajte ovaj dijagnostički test:**
1. Prijavite se u svoju aplikaciju za bankarstvo i idite na nadzornu ploču
1. Prijavite se u vašu bankovnu aplikaciju i idite na nadzornu ploču
2. Osvježite stranicu preglednika
3. Promatrajte što se događa s vašim statusom prijave
Ako ste preusmjereni natrag na zaslon za prijavu, otkrili ste klasičan problem s postojanošću stanja. Ovo ponašanje se događa jer naša trenutna implementacija pohranjuje korisničke podatke u JavaScript varijable koje se resetiraju pri svakom učitavanju stranice.
Ako ste preusmjereni natrag na ekran za prijavu, otkrili ste klasični problem trajnosti stanja. Ovo se događa jer naša trenutačna implementacija pohranjuje korisničke podatke u JavaScript varijable koje se resetiraju pri svakom učitavanju stranice.
**Problemi trenutne implementacije:**
**Problemi trenutačne implementacije:**
Jednostavna varijabla `account` iz naše [prethodne lekcije](../3-data/README.md) stvara tri značajna problema koja utječu i na korisničko iskustvo i na održivost koda:
Jednostavna varijabla `account` iz naše [prethodne lekcije](../3-data/README.md) stvara tri značajna problema koji utječu i na korisničko iskustvo i na održivost koda:
| Problem | Tehnički uzrok | Utjecaj na korisnika |
| **Gubitak sesije** | Osvježavanje stranice briše JavaScript varijable | Korisnici se moraju često ponovno prijavljivati |
| **Raspršene promjene** | Više funkcija izravno mijenja stanje | Otklanjanje grešaka postaje sve teže |
| **Nepotpuno čišćenje** | Odjava ne briše sve reference stanja | Potencijalni sigurnosni i privatni problemi |
| **Raspršena ažuriranja** | Više funkcija mijenja stanje izravno | Otklanjanje pogrešaka postaje sve teže |
| **Nepotpuno čišćenje** | Odjava ne briše sve reference na stanje | Mogući sigurnosni i privatnosni problemi |
**Arhitektonski izazov:**
Kao što je dizajn Titanica s odvojenim odjeljcima izgledao robusno dok se više odjeljaka nije istovremeno napunilo vodom, rješavanje ovih problema pojedinačno neće riješiti temeljni arhitektonski problem. Potrebno nam je sveobuhvatno rješenje za upravljanje stanjem.
Poput dizajna Titanica s dijeljenim pretincima koji se činilo čvrstim dok se nisu istovremeno poplavili više pretinaca, rješavanje ovih problema pojedinačno neće otkloniti temeljni arhitektonski problem. Potreban je sveobuhvatan sustav upravljanja stanjem.
> 💡 **Što zapravo pokušavamo postići ovdje?**
[Upravljanje stanjem](https://en.wikipedia.org/wiki/State_management) zapravo se svodi na rješavanje dviju temeljnih zagonetki:
[Upravljanje stanjem](https://en.wikipedia.org/wiki/State_management) ustvari je rješavanje dva temeljna pitanja:
1. **Gdje su moji podaci?**: Praćenje koje informacije imamo i odakle dolaze
2. **Jesu li svi na istoj stranici?**: Osiguravanje da ono što korisnici vide odgovara onome što se zapravo događa
2. **Jesu li svi na istoj stranici?**: Osiguravanje da korisnici vide što se zapravo događa
**Naš plan igre:**
Umjesto da se vrtimo u krug, stvorit ćemo **centralizirani sustav upravljanja stanjem**. Zamislite to kao da imate jednu stvarno organiziranu osobu koja je zadužena za sve važne stvari:
**Razumijevanje ovog toka podataka:**
- **Centralizira** sve podatke aplikacije na jednom mjestu
- **Usmjerava** sve promjene stanja kroz kontrolirane funkcije
- **Osigurava** da sučelje ostane sinkronizirano s trenutnim stanjem
- **Pruža** jasan, predvidljiv obrazac za upravljanje podacima
Umjesto da jurnjamo u krug, stvorit ćemo **centralizirani sustav upravljanja stanjem**. Zamislite to kao ako imate jednu stvarno organiziranu osobu koja vodi sve važne stvari:
```mermaid
flowchart TD
A[Korisnička radnja] --> B[Upravitelj događaja]
B --> C[Funkcija ažuriranjaStanja]
C --> D{Provjera stanja}
D -->|Ispravno| E[Stvori novo stanje]
D -->|Neispravno| F[Rukovanje greškom]
E --> G[Object.freeze]
G --> H[Ažuriraj localStorage]
H --> I[Pokreni ažuriranje UI-a]
I --> J[Korisnik vidi promjene]
F --> K[Korisnik vidi grešku]
subgraph "Sloj upravljanja stanjem"
C
E
G
end
subgraph "Sloj trajnosti"
H
L[localStorage]
H -.-> L
end
```
**Razumijevanje ovog protoka podataka:**
- **Centralizira** sav podatkovni sadržaj aplikacije na jednom mjestu
- **Upravlja** svim promjenama stanja kroz kontrolirane funkcije
- **Osigurava** da je korisničko sučelje sinkronizirano sa trenutačnim stanjem
- **Pruža** jasan, predvidiv obrazac za upravljanje podacima
> 💡 **Profesionalni uvid**: Ova lekcija fokusira se na temeljne koncepte. Za složene aplikacije, biblioteke poput [Redux](https://redux.js.org) nude naprednije značajke upravljanja stanjem. Razumijevanje ovih osnovnih principa pomoći će vam da savladate bilo koju biblioteku za upravljanje stanjem.
> 💡 **Stručni uvid**: Ova lekcija fokusira se na temeljne koncepte. Za složene aplikacije, biblioteke poput [Redux](https://redux.js.org) nude naprednije mogućnosti upravljanja stanjem. Razumijevanje ovih osnovnih principa pomoći će vam savladati bilo koju biblioteku za upravljanje stanjem.
> ⚠️ **Napredna tema**: Nećemo pokrivati automatska ažuriranja sučelja koja se pokreću promjenama stanja, jer to uključuje koncepte [reaktivnog programiranja](https://en.wikipedia.org/wiki/Reactive_programming). Smatrajte ovo izvrsnim sljedećim korakom za vaš proces učenja!
> ⚠️ **Napredna tema**: Nećemo pokrivati automatska ažuriranja UI-a pokrenuta promjenama stanja, jer to uključuje koncepte [Reaktivnog programiranja](https://en.wikipedia.org/wiki/Reactive_programming). Smatrajte to izvrsnim sljedećim korakom u vašem učenju!
### Zadatak: Centralizacija strukture stanja
### Zadatak: Centralizirajte strukturu stanja
Započnimo transformaciju našeg raspršenog upravljanja stanjem u centralizirani sustav. Ovaj prvi korak postavlja temelj za sve nadolazeće poboljšanja.
Započnimo transformaciju našeg raspršenog upravljanja stanjem u centralizirani sustav. Ovaj prvi korak postavlja temelj za sva sljedeća poboljšanja.
**Korak 1: Kreirajte centralizirani objekt stanja**
**Korak 1: Kreirajte centralni objekt stanja**
Zamijenite jednostavnu deklaraciju `account`:
@ -121,14 +245,14 @@ let state = {
```
**Zašto je ova promjena važna:**
- **Centralizira** sve podatke aplikacije na jednom mjestu
- **Priprema** strukturu za dodavanje više svojstava stanja kasnije
- **Stvara** jasnu granicu između stanja i drugih varijabli
- **Postavlja** obrazac koji se skalira kako vaša aplikacija raste
- **Centralizira** sve podatke aplikacije na jedno mjesto
- **Priprema** strukturu za dodavanje više svojstava u stanju kasnije
- **Stvara** jasnu granicu između stanja i ostalih varijabli
- **Postavlja** obrazac koji se može skalirati kako aplikacija raste
**Korak 2: Ažurirajte obrasce pristupa stanju**
Ažurirajte svoje funkcije kako bi koristile novu strukturu stanja:
Ažurirajte funkcije da koriste novu strukturu stanja:
**U funkcijama `register()` i `login()`**, zamijenite:
```js
@ -140,60 +264,92 @@ S:
state.account = ...
```
**U funkciji `updateDashboard()`**, dodajte ovu liniju na vrh:
**U funkciji `updateDashboard()`**, na vrh dodajte ovu liniju:
```js
const account = state.account;
```
**Što ove promjene postižu:**
- **Održavaju** postojeću funkcionalnost uz poboljšanje strukture
**Što ova ažuriranja postižu:**
- **Održavaju** postojeću funkcionalnost dok poboljšavaju strukturu
- **Pripremaju** vaš kod za sofisticiranije upravljanje stanjem
- **Stvaraju** dosljedne obrasce za pristup podacima stanja
- **Postavljaju** temelj za centralizirana ažuriranja stanja
> 💡 **Napomena**: Ovo preuređenje ne rješava odmah naše probleme, ali stvara ključni temelj za moćna poboljšanja koja slijede!
> 💡 **Napomena**: Ova refaktorizacija odmah ne rješava naše probleme, ali gradi bitan temelj za moćna poboljšanja koja slijede!
**Zastanite i razmislite**: Upravo ste implementirali temelj centraliziranog upravljanja stanjem. Ovo je ključna arhitektonska odluka.
**Brza samoprocjena**:
- Možete li objasniti zašto je bolje centralizirati stanje u jednom objektu nego imati raspršene varijable?
- Što bi se dogodilo ako zaboravite ažurirati neku funkciju da koristi `state.account`?
- Kako ovaj obrazac priprema vaš kod za naprednije značajke?
**Poveznica s realnim svijetom**: Obrasci centralizacije koje ste naučili temelj su modernih frameworka poput Redux, Vuex i React Context. Gradite isti arhitektonski pristup koji se koristi u velikim aplikacijama.
**Izazovno pitanje**: Ako biste trebali dodati korisničke postavke (temu, jezik) u vašu aplikaciju, gdje biste ih uveli u strukturu stanja? Kako bi se to skaliralo?
## Implementacija kontroliranih ažuriranja stanja
S našim stanjem centraliziranim, sljedeći korak uključuje uspostavljanje kontroliranih mehanizama za izmjene podataka. Ovaj pristup osigurava predvidljive promjene stanja i olakšava otklanjanje grešaka.
S obzirom da je naše stanje centralizirano, sljedeći je korak uspostavljanje kontroliranih mehanizama za izmjene podataka. Ovaj pristup osigurava predvidive promjene stanja i lakše otklanjanje pogrešaka.
Osnovni princip nalikuje kontroli zračnog prometa: umjesto da se dopušta više funkcija da neovisno mijenjaju stanje, sve promjene ćemo kanalizirati kroz jednu kontroliranu funkciju. Ovaj obrazac pruža jasan pregled kada i kako dolazi do promjena podataka.
Temeljno pravilo slično je kontroli zračnog prometa: umjesto da više funkcija samostalno mijenja stanje, usmjerit ćemo sve promjene kroz jednu kontroliranu funkciju. Ovaj obrazac pruža jasan nadzor o tome kada i kako se podaci mijenjaju.
**Upravljanje nepromjenjivim stanjem:**
Naš objekt `state` tretirat ćemo kao [*nepromjenjiv*](https://en.wikipedia.org/wiki/Immutable_object), što znači da ga nikada nećemo izravno mijenjati. Umjesto toga, svaka promjena stvara novi objekt stanja s ažuriranim podacima.
Posmatrat ćemo naš objekt `state` kao [*nepromjenjiv*](https://en.wikipedia.org/wiki/Immutable_object), što znači da ga nikada ne mijenjamo izravno. Svaka promjena stvara novi objekt stanja sa ažuriranim podacima.
Iako se ovaj pristup u početku može činiti neučinkovitim u usporedbi s izravnim izmjenama, pruža značajne prednosti za otklanjanje grešaka, testiranje i održavanje predvidljivosti aplikacije.
Iako ovaj pristup možda na prvu izgleda neučinkovit u odnosu na izravne promjene, donosi značajne prednosti u otklanjanju pogrešaka, testiranju i održavanju predvidivosti aplikacije.
**Prednosti upravljanja nepromjenjivim stanjem:**
| Prednost | Opis | Utjecaj |
|----------|------|---------|
| **Predvidljivost** | Promjene se događaju samo kroz kontrolirane funkcije | Lakše za otklanjanje grešaka i testiranje |
| **Praćenje povijesti** | Svaka promjena stanja stvara novi objekt | Omogućuje funkcionalnost poništavanja/ponovnog izvršavanja |
| **Optimizacija performansi** | Jednostavno je otkriti kada se stanje stvarno promijenilo | Omogućuje učinkovita ažuriranja UI-ja |
**Nepromjenjivost u JavaScriptu s `Object.freeze()`:**
**JavaScript nepokretnost s `Object.freeze()`:**
JavaScript pruža [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) za sprječavanje izmjena objekata:
JavaScript nudi [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) kako bi spriječio izmjene objekata:
// Any attempt to modify immutableState will throw an error
// Svaki pokušaj izmjene immutableState će izazvati pogrešku
```
**Razlaganje onoga što se ovdje događa:**
- **Sprječava** izravna dodjeljivanja ili brisanja svojstava
- **Izbacuje** iznimke ako se pokušaju izvršiti izmjene
- **Osigurava** da promjene stanja moraju proći kroz kontrolirane funkcije
- **Stvara** jasan ugovor o tome kako se stanje može ažurirati
> 💡 **Dubinsko istraživanje**: Saznajte razliku između *plitkih* i *dubokih* nepromjenjivih objekata u [MDN dokumentaciji](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). Razumijevanje ove razlike ključno je za složene strukture stanja.
**Što se događa ovdje:**
- **Sprečava** izravne postavke ili brisanja svojstava
- **Baca** iznimke ako se pokuša izmjena
- **Osigurava** da promjene stanja moraju ići kroz kontrolirane funkcije
- **Stvara** jasan ugovor kako se stanje može ažurirati
> 💡 **Dubinski pogled**: Saznajte razliku između *plitkog* i *dubokog* zamrzavanja objekata u [MDN dokumentaciji](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). Razumijevanje ove razlike ključno je za složene strukture stanja.
@ -204,9 +360,9 @@ function updateState(property, newData) {
}
```
U ovoj funkciji stvaramo novi objekt stanja i kopiramo podatke iz prethodnog stanja koristeći [*operator širenja (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Zatim nadjačavamo određeno svojstvo objekta stanja novim podacima koristeći [notaciju zagrada](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` za dodjelu. Na kraju, zaključavamo objekt kako bismo spriječili izmjene koristeći `Object.freeze()`. Trenutno imamo samo svojstvo `account` pohranjeno u stanju, ali s ovim pristupom možete dodati koliko god želite svojstava u stanje.
U ovoj funkciji stvaramo novi objekt stanja i kopiramo podatke iz prethodnog stanja koristeći [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Zatim prepisujemo određeno svojstvo objekta stanja novim podacima koristeći [zagrade](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` za dodjelu. Na kraju zaključavamo objekt da spriječimo izmjene koristeći `Object.freeze()`. Trenutno u stanju samo imamo svojstvo `account`, ali ovim pristupom možete dodati koliko god svojstava vam treba.
Također ćemo ažurirati inicijalizaciju `state` kako bismo osigurali da je početno stanje također zaključano:
Također ćemo ažurirati početnu inicijalizaciju `state` kako bismo osigurali da je početno stanje također zamrznuto:
```js
let state = Object.freeze({
@ -220,13 +376,13 @@ Nakon toga, ažurirajte funkciju `register` zamjenom dodjele `state.account = re
updateState('account', result);
```
Učinite isto s funkcijom `login`, zamjenjujući`state.account = data;` s:
Isto učinite u funkciji `login`, zamijenite`state.account = data;` s:
```js
updateState('account', data);
```
Sada ćemo iskoristiti priliku da riješimo problem nečišćenja podataka o računu kada korisnik klikne na *Odjava*.
Iskoristit ćemo priliku i riješiti problem da se podaci o računu ne brišu kada korisnik klikne *Logout*.
Kreirajte novu funkciju `logout()`:
@ -237,71 +393,91 @@ function logout() {
}
```
U `updateDashboard()`, zamijenite preusmjeravanje `return navigate('/login');` s `return logout();`;
U `updateDashboard()`, zamijenite preusmjeravanje `return navigate('/login');` s `return logout()`;
Pokušajte registrirati novi račun, odjaviti se i ponovno prijaviti kako biste provjerili radi li sve ispravno.
Isprobajte registraciju novog računa, odjavu i ponovnu prijavu kako biste provjerili da sve i dalje radi ispravno.
> Savjet: možete pogledati sve promjene stanja dodavanjem `console.log(state)` na dno `updateState()` i otvaranjem konzole u alatima za razvoj vašeg preglednika.
> Savjet: možete pratiti sve promjene stanja dodavanjem `console.log(state)` na dno funkcije `updateState()` i otvaranjem konzole u alatima za razvoj preglednika.
## Implementacija postojanosti podataka
## Implementacija trajnosti podataka
Problem gubitka sesije koji smo ranije identificirali zahtijeva rješenje za postojanost koje održava korisničko stanje tijekom sesija preglednika. Ovo transformira našu aplikaciju iz privremenog iskustva u pouzdan, profesionalni alat.
Problem gubitka sesije koji smo ranije identificirali zahtijeva rješenje trajnosti koje održava stanje korisnika kroz sesije preglednika. Time se naša aplikacija iz privremenog iskustva pretvara u pouzdan, profesionalan alat.
Razmislite o tome kako atomski satovi održavaju precizno vrijeme čak i tijekom prekida napajanja pohranjujući ključne podatke u nehlapljivu memoriju. Slično tome, web aplikacijama su potrebni mehanizmi za trajnu pohranu kako bi sačuvale bitne korisničke podatke tijekom sesija preglednika i osvježavanja stranica.
Razmislite kako atomski satovi održavaju precizno vrijeme čak i tijekom nestanka struje tako da pohranjuju kritično stanje u neisparivoj memoriji. Slično tome, web aplikacije trebaju mehanizme trajne pohrane kako bi sačuvale ključne korisničke podatke kroz sesije preglednika i osvježavanja stranica.
**Strateška pitanja za postojanost podataka:**
**Strateška pitanja za trajnost podataka:**
Prije implementacije postojanosti, razmotrite ove ključne čimbenike:
Prije implementacije trajnosti, razmotrite ove ključne čimbenike:
| Pitanje | Kontekst aplikacije za bankarstvo | Utjecaj odluke |
- **Pretvara** JavaScript objekte u JSON stringove koristeći [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
- **Rekonstruira** objekte iz JSON-a koristeći [`JSON.parse()`](
> 💡 **Napredna opcija**: Za složene offline aplikacije s velikim skupovima podataka, razmotrite [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Pruža punu bazu podataka na strani klijenta, ali zahtijeva složeniju implementaciju.
### Zadatak: Implementacija lokalne pohrane (localStorage) za trajnost podataka
**Razumijevanje serijalizacije:**
- **Pretvara** JavaScript objekte u JSON stringove pomoću [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
- **Rekonstruira** objekte iz JSON-a pomoću [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
- **Automatski obrađuje** kompleksne ugniježđene objekte i nizove
- **Ne uspijeva** za funkcije, neodređene vrijednosti i cikličke reference
> 💡 **Napredna opcija**: Za složene offline aplikacije s velikim skupovima podataka razmotrite [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Pruža punu bazu podataka na strani klijenta, ali zahtijeva složeniju implementaciju.
```mermaid
quadrantChart
title Opcije spremanja u pregledniku
x-axis Niska složenost --> Visoka složenost
y-axis Kratko trajanje --> Dugo trajanje
quadrant-1 Profesionalni alati
quadrant-2 Jednostavna trajnost
quadrant-3 Privremeno spremanje
quadrant-4 Napredni sustavi
localStorage: [0.3, 0.8]
sessionStorage: [0.2, 0.2]
HTTP Cookies: [0.6, 0.7]
IndexedDB: [0.9, 0.9]
Memory Variables: [0.1, 0.1]
```
### Zadatak: Implementirajte trajnu pohranu u localStorage
Implementirajmo trajnu pohranu kako bi korisnici ostali prijavljeni dok se eksplicitno ne odjave. Koristit ćemo `localStorage` za pohranu podataka o računu između sesija preglednika.
Implementirajmo trajnu pohranu tako da korisnici ostaju prijavljeni dok se eksplicitno ne odjave. Koristit ćemo `localStorage` za pohranu podataka računa kroz sesije preglednika.
**Korak 1: Definirajte konfiguraciju pohrane**
@ -309,31 +485,31 @@ Implementirajmo trajnu pohranu kako bi korisnici ostali prijavljeni dok se ekspl
const storageKey = 'savedAccount';
```
**Što ova konstanta omogućuje:**
- **Stvara** dosljedan identifikator za naše pohranjene podatke
- **Sprječava** tipografske pogreške u referencama ključeva pohrane
- **Olakšava** promjenu ključa pohrane ako je potrebno
- **Prati** najbolje prakse za održavanje koda
**Što ova konstanta pruža:**
- **Stvara** dosljedni identifikator za naše pohranjene podatke
- **Sprečava** tipfelere u referencama ključa pohrane
- **Olakšava** promjenu ključa za pohranu ako je potrebno
- **Prati** najbolje prakse za održiv kod
**Korak 2: Dodajte automatsku trajnost**
**Korak 2: Dodajte automatsku pohranu**
Dodajte ovu liniju na kraj funkcije `updateState()`:
Dodajte ovaj redak na kraj funkcije `updateState()`:
- **Pretvara** objekt računa u JSON string za pohranu
- **Spremanje** podataka koristeći naš dosljedan ključ pohrane
- **Izvršava** se automatski kad god dođe do promjena stanja
- **Osigurava** da su pohranjeni podaci uvijek sinkronizirani s trenutnim stanjem
**Objašnjenje što se ovdje događa:**
- **Pretvara** objekt računa u JSON string za pohranu
- **Spremi** podatke koristeći naš dosljedni ključ pohrane
- **Izvršava** se automatski kad se stanje promijeni
- **Osigurava** da su pohranjeni podaci uvijek sinkronizirani sa trenutnim stanjem
> 💡 **Prednost arhitekture**: Budući da smo centralizirali sva ažuriranja stanja kroz `updateState()`, dodavanje trajnosti zahtijevalo je samo jednu liniju koda. Ovo pokazuje snagu dobrih arhitektonskih odluka!
> 💡 **Prednost arhitekture**: Budući da smo centralizirali sve promjene stanja kroz `updateState()`, dodavanje pohrane zahtijevalo je samo jedan redak koda. Ovo pokazuje snagu dobrih arhitektonskih odluka!
**Korak 3: Vratite stanje pri učitavanju aplikacije**
**Korak 3: Vratite stanje pri pokretanju aplikacije**
Kreirajte funkciju za inicijalizaciju kako biste vratili spremljene podatke:
Napravite funkciju inicijalizacije koja vraća spremljene podatke:
```js
function init() {
@ -342,7 +518,7 @@ function init() {
updateState('account', JSON.parse(savedAccount));
}
// Our previous initialization code
// Naš prethodni kod za inicijalizaciju
window.onpopstate = () => updateRoute();
updateRoute();
}
@ -350,48 +526,62 @@ function init() {
init();
```
**Razumijevanje procesa inicijalizacije:**
- **Dohvaća** prethodno spremljene podatke o računu iz localStorage
- **Parsira** JSON string natrag u JavaScript objekt
- **Ažurira** stanje koristeći našu kontroliranu funkciju ažuriranja
- **Vraća** korisničku sesiju automatski pri učitavanju stranice
- **Izvršava** se prije ažuriranja ruta kako bi osigurao dostupnost stanja
**Razumijevanje procesa inicijalizacije:**
- **Dohvaća** prethodno spremljene podatke računa iz localStorage
- **Parsira** JSON string natrag u JavaScript objekt
- **Ažurira** stanje pomoću naše kontrolirane funkcije za ažuriranje
- **Automatski vraća** korisničku sesiju prilikom učitavanja stranice
- **Izvršava** se prije ažuriranja ruta da osigura dostupnost stanja
**Korak 4: Optimizirajte zadanu rutu**
Ažurirajte zadanu rutu kako biste iskoristili trajnost:
Ažurirajte zadanu rutu kako biste iskoristili trajnu pohranu:
U `updateRoute()`, zamijenite:
```js
// Replace: return navigate('/login');
// Zamijeni: return navigate('/login');
return navigate('/dashboard');
```
**Zašto ova promjena ima smisla:**
- **Iskorištava** naš novi sustav trajnosti učinkovito
- **Omogućuje** da dashboard provjerava autentifikaciju
- **Automatski preusmjerava** na prijavu ako ne postoji spremljena sesija
**Zašto je ova promjena smislenija:**
- **Iskorištava** naš novi sustav trajne pohrane učinkovito
- **Dopušta** nadzornoj ploči da provodi provjere autentifikacije
- **Automatski preusmjerava** na prijavu ako nema spremljene sesije
- **Stvara** besprijekorno korisničko iskustvo
**Testiranje vaše implementacije:**
1. Prijavite se u svoju aplikaciju za bankarstvo
2. Osvježite stranicu preglednika
3. Provjerite ostajete li prijavljeni i na dashboardu
4. Zatvorite i ponovno otvorite preglednik
5. Vratite se u aplikaciju i potvrdite da ste još uvijek prijavljeni
1. Prijavite se u svoju bankarsku aplikaciju
2. Osvježite stranicu preglednika
3. Provjerite ostajete li prijavljeni i na nadzornoj ploči
4. Zatvorite i ponovno otvorite preglednik
5. Vratite se u aplikaciju i potvrdite da ste i dalje prijavljeni
🎉 **Postignuće otključano**: Uspješno ste implementirali upravljanje trajnim stanjem! Vaša aplikacija sada funkcionira kao profesionalna web aplikacija.
### 🎯 Pedagoška provjera: Arhitektura trajnosti
**Razumijevanje arhitekture**: Implementirali ste sofisticirani sloj trajnosti koji balansira korisničko iskustvo i složenost upravljanja podacima.
🎉 **Postignuće otključano**: Uspješno ste implementirali upravljanje trajnim stanjem! Vaša aplikacija sada se ponaša kao profesionalna web aplikacija.
**Ključni pojmovi usvojeni**:
- **Serijalizacija JSON-a**: Pretvaranje složenih objekata u pohranjive stringove
- **Automatska sinkronizacija**: Promjene stanja pokreću trajnu pohranu
- **Vraćanje sesije**: Aplikacije mogu obnoviti korisnički kontekst nakon prekida
- **Centralizirana trajnost**: Jedna funkcija za ažuriranje upravlja svim pohranama
## Balansiranje trajnosti s svježinom podataka
**Povezanost s industrijom**: Ovaj obrazac trajnosti temelj je Progressive Web Apps (PWA), offline-prve aplikacije i modernih mobilnih web iskustava. Gradite mogućnosti na profesionalnoj razini.
Naš sustav trajnosti uspješno održava korisničke sesije, ali uvodi novi izazov: zastarjelost podataka. Kada više korisnika ili aplikacija mijenja iste podatke na serveru, lokalno spremljene informacije postaju zastarjele.
**Pitanje za razmišljanje**: Kako biste izmijenili ovaj sustav da podrži više korisničkih računa na istom uređaju? Razmotrite implikacije privatnosti i sigurnosti.
Ova situacija podsjeća na vikinške navigatore koji su se oslanjali na pohranjene karte zvijezda i trenutna opažanja nebeskih tijela. Karte su pružale dosljednost, ali navigatori su trebali svježa opažanja kako bi uzeli u obzir promjenjive uvjete. Slično tome, naša aplikacija treba i trajno korisničko stanje i svježe podatke sa servera.
## Uravnoteživanje trajnosti i svježine podataka
Naš sustav trajnosti uspješno održava korisničke sesije, ali uvodi novi izazov: zastarjelost podataka. Kad više korisnika ili aplikacija mijenjaju iste podatke na poslužitelju, lokalno pohranjene informacije zastarijevaju.
Ova situacija podsjeća na vikinške pomorce koji su se oslanjali i na spremljene karte zvijezda i na aktualna opažanja neba. Karte su pružale stabilnost, ali navigatori su trebali svježe podatke kako bi se prilagodili promjenjivim uvjetima. Slično tome, naša aplikacija treba i trajno stanje korisnika i aktualne podatke s poslužitelja.
**🧪 Otkrivanje problema zastarjelosti podataka:**
1. Prijavite se na dashboard koristeći račun `test`
1. Prijavite se u nadzornu ploču sa `test` računom
2. Pokrenite ovu naredbu u terminalu kako biste simulirali transakciju iz drugog izvora:
3. Osvježite stranicu nadzorne ploče u pregledniku
4. Promatrajte prikazuje li se nova transakcija
**Što ovaj test pokazuje:**
- **Pokazuje** kako localStorage može postati "zastario" (zastarjeli podaci)
- **Simulira** scenarije iz stvarnog svijeta gdje se podaci mijenjaju izvan vaše aplikacije
- **Otkriva**napetost između trajnosti i svježine podataka
**Što ovaj test pokazuje:**
- **Pokazuje** kako lokalna pohrana može postati “zastarjela”
- **Simulira** scenarije iz stvarnog svijeta gdje podaci mijenjaju izvan vaše aplikacije
- **Otkriva**sukob između trajnosti i svježine podataka
**Izazov zastarjelosti podataka:**
| Problem | Uzrok | Utjecaj na korisnika |
|---------|-------|----------------------|
| **Zastarjeli podaci** | localStorage se nikada automatski ne ažurira | Korisnici vide zastarjele informacije |
| **Promjene na serveru** | Druge aplikacije/korisnici mijenjaju iste podatke | Nekonzistentni prikazi na različitim platformama |
| **Cache vs. stvarnost** | Lokalna pohrana ne odgovara stanju na serveru | Loše korisničko iskustvo i zbunjenost |
|---------|-------|---------------------|
| **Zastarjeli podaci** | localStorage se nikada ne briše automatski | Korisnici vide zastarjele informacije |
| **Promjene na poslužitelju** | Druge aplikacije/korisnici mijenjaju iste podatke | Nekonzistentan prikaz na različitim platformama |
| **Predmemorija vs. stvarnost** | Lokalna predmemorija ne odgovara stanju poslužitelja | Loše korisničko iskustvo i zbunjenost |
**Strategija rješenja:**
Implementirat ćemo uzorak "osvježavanja pri učitavanju" koji balansira prednosti trajnosti s potrebom za svježim podacima. Ovaj pristup održava glatko korisničko iskustvo uz osiguranje točnosti podataka.
### Zadatak: Implementacija sustava za osvježavanje podataka
Implementirat ćemo uzorak "osvježi pri učitavanju" koji uravnotežuje prednosti trajnosti i potrebu za svježim podacima. Ovaj pristup održava glatko korisničko iskustvo uz točnu podatkovnu točnost.
```mermaid
sequenceDiagram
participant U as Korisnik
participant A as Aplikacija
participant L as localStorage
participant S as Poslužitelj
U->>A: Otvara aplikaciju
A->>L: Učitaj spremljeno stanje
L-->>A: Vrati predmemorirane podatke
A->>U: Odmah pokaži UI
A->>S: Dohvati svježe podatke
S-->>A: Vrati trenutne podatke
A->>L: Ažuriraj predmemoriju
A->>U: Ažuriraj UI sa svježim podacima
```
### Zadatak: Implementirajte sustav osvježavanja podataka
Kreirat ćemo sustav koji automatski dohvaća svježe podatke sa servera dok zadržava prednosti našeg sustava trajnog stanja.
Napravit ćemo sustav koji automatski dohvaća svježe podatke s poslužitelja, dok zadržava prednosti našeg upravljanja trajnim stanjem.
**Korak 1: Kreirajte funkciju za ažuriranje podataka o računu**
**Korak 1: Napravite ažurirač podataka računa**
```js
async function updateAccountData() {
@ -443,15 +649,15 @@ async function updateAccountData() {
}
```
**Razumijevanje logike ove funkcije:**
- **Provjerava** je li korisnik trenutno prijavljen (postoji state.account)
- **Preusmjerava** na odjavu ako ne postoji valjana sesija
- **Dohvaća** svježe podatke o računu sa servera koristeći postojeću funkciju `getAccount()`
title Profesionalno Upravljanje Stanjima - Putovanje
section Prepoznavanje Problema
Dijagnoza Problema sa Stanjima
: Prepoznati probleme gubitka sesije
: Razumjeti probleme rasutih ažuriranja
: Prepoznati arhitektonske potrebe
section Osnove Arhitekture
Centralizirani Dizajn Stanja
: Kreirati jedinstvene objekte stanja
: Implementirati kontrolirane obrasce ažuriranja
: Uspostaviti nepromjenjive principe
Predvidljiva Ažuriranja
: Ovladati korištenjem Object.freeze()
: Izgraditi sisteme prikladne za otklanjanje pogrešaka
: Kreirati skalabilne obrasce
section Usavršavanje Persistencije
Integracija lokalnogSkladišta
: Rukovati JSON serijalizacijom
: Implementirati automatsku sinkronizaciju
: Kreirati kontinuitet sesije
Ravnoteža Svježine Podataka
: Riješiti izazove zastarjelosti
: Izgraditi mehanizme osvježavanja
: Optimizirati performanse nasuprot točnosti
section Profesionalni Obrasci
Sistemi Spremni za Proizvodnju
: Implementirati obradu grešaka
: Kreirati održive arhitekture
: Slijediti najbolje prakse industrije
Napredne Mogućnosti
: Spremno za integraciju okvira
: Pripremljeno za složene potrebe stanja
: Osnova za značajke u realnom vremenu
```
**🎓 Prekretnica diplome**: Uspješno ste izgradili kompletan sustav upravljanja stanjem koristeći iste principe koji pokreću Redux, Vuex i druge profesionalne biblioteke za stanje. Ti obrasci skaliraju od jednostavnih aplikacija do enterprise rješenja.
🎉 **Postignut savršen balans**: Vaša aplikacija sada kombinira glatko iskustvo trajnog stanja s točnošću svježih podataka sa servera!
**🔄 Sljedeće razine mogućnosti**:
- Spremni za svladavanje frameworka za upravljanje stanjem (Redux, Zustand, Pinia)
- Pripremljeni za implementaciju real-time značajki putem WebSocket-a
- Opremljeni za izgradnju offline-prvih Progressive Web Apps
- Temelj spreman za napredne obrasce poput strojnih stanja i promatrača
## Izazov za GitHub Copilot agenta 🚀
## Izazov GitHub Copilota Agent 🚀
Koristite Agent način rada za dovršavanje sljedećeg izazova:
Koristite Agent mod za dovršetak sljedećeg izazova:
**Opis:** Implementirajte sveobuhvatan sustav upravljanja stanjem s funkcionalnošću poništavanja/ponovnog izvršavanja za aplikaciju za bankarstvo. Ovaj izazov pomoći će vam da vježbate napredne koncepte upravljanja stanjem, uključujući praćenje povijesti stanja, nepromjenjiva ažuriranja i sinkronizaciju korisničkog sučelja.
**Opis:** Implementirajte sveobuhvatan sustav upravljanja stanjem s undo/redo funkcionalnošću za bankarsku aplikaciju. Ovaj izazov će vam pomoći uvježbati napredne koncepte upravljanja stanjem uključujući praćenje povijesti stanja, nepromjenjive druge ažuriranja i sinkronizaciju sučelja.
**Zadatak:** Kreirajte poboljšani sustav upravljanja stanjem koji uključuje: 1) Niz povijesti stanja koji prati sva prethodna stanja, 2) Funkcije za poništavanje i ponovno izvršavanje koje mogu vratiti prethodna stanja, 3) UI gumbe za operacije poništavanja/ponovnog izvršavanja na dashboardu, 4) Maksimalni limit povijesti od 10 stanja kako bi se spriječili problemi s memorijom, i 5) Pravilno čišćenje povijesti kada se korisnik odjavi. Osigurajte da funkcionalnost poništavanja/ponovnog izvršavanja radi s promjenama stanja računa i da se trajno pohranjuje između osvježavanja preglednika.
**Zadatak:** Kreirajte poboljšani sustav upravljanja stanjem koji uključuje: 1) niz povijesti stanja koji prati sva prethodna stanja, 2) funkcije undo i redo koje mogu vratiti prethodna stanja, 3) UI gumbe za undo/redo na nadzornoj ploči, 4) maksimalnu veličinu povijesti od 10 stanja radi sprječavanja problema s memorijom, i 5) pravilno čišćenje povijesti kada se korisnik odjavi. Osigurajte da undo/redo funkcionalnost radi s promjenama na stanju računa i traje kroz osvježavanja preglednika.
Saznajte više o [Agent načinu rada](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
Više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) pročitajte ovdje.
## 🚀 Izazov: Optimizacija pohrane
Vaša implementacija sada učinkovito upravlja korisničkim sesijama, osvježavanjem podataka i stanjem. Međutim, razmislite je li naš trenutni pristup optimalno balansiran između učinkovitosti pohrane i funkcionalnosti.
Vaša implementacija sada učinkovito upravlja korisničkim sesijama, osvježavanjem podataka i upravljanjem stanjem. Ipak, razmislite je li naš trenutni pristup optimalan u balansiranju učinkovitosti pohrane i funkcionalnosti.
Poput šahovskih majstora koji razlikuju ključne figure od onih koje se mogu žrtvovati, učinkovito upravljanje stanjem zahtijeva prepoznavanje podataka koji moraju biti trajno pohranjeni naspram onih koji bi uvijek trebali biti svježi sa servera.
Kao velemajstori šaha koji razlikuju ključne figure i zamjenjive pijune, učinkovito upravljanje stanjem zahtijeva prepoznavanje koji podaci moraju trajati naspram onih koji bi uvijek trebali biti svježi s poslužitelja.
**Analiza optimizacije:**
Procijenite svoju trenutnu implementaciju localStorage i razmotrite ova strateška pitanja:
- Koje su minimalne informacije potrebne za održavanje autentifikacije korisnika?
- Koji se podaci mijenjaju dovoljno često da lokalno predmemoriranje pruža malo koristi?
- Kako optimizacija pohrane može poboljšati performanse bez narušavanja korisničkog iskustva?
Procijenite svoju trenutnu implementaciju localStorage-a i razmislite o ovim strateškim pitanjima:
- Koje je minimalne informacije potrebno za održavanje autentifikacije korisnika?
- Koji se podaci toliko često mijenjaju da lokalna predmemorija nema velike koristi?
- Kako optimizacija pohrane može poboljšati performanse bez narušavanja iskustva korisnika?
Ova vrsta arhitektonske analize razlikuje iskusne programere koji uzimaju u obzir i funkcionalnost i učinkovitost u svojim rješenjima.
**Strategija implementacije:**
- **Identificirajte** ključne podatke koji moraju biti trajno pohranjeni (vjerojatno samo identifikacija korisnika)
- **Modificirajte** svoju implementaciju localStorage kako biste pohranjivali samo kritične podatke sesije
- **Osigurajte** da se svježi podaci uvijek učitavaju sa servera prilikom posjeta dashboardu
- **Testirajte** da vaš optimizirani pristup održava isto korisničko iskustvo
**Strategija implementacije:**
- **Identificirajte**bitne podatke koji moraju trajati (vjerojatno samo identifikacija korisnika)
- **Izmijenite** lokalnu implementaciju pohrane tako da pohranjuje samo ključne podatke sesije
- **Osigurajte** da se svježi podaci uvijek učitavaju s poslužitelja pri posjetu nadzornoj ploči
- **Testirajte** da optimizirani pristup zadržava isto korisničko iskustvo
**Napredna razmatranja:**
- **Usporedite** kompromise između pohrane punih podataka o računu i samo autentifikacijskih tokena
**Napredna razmatranja:**
- **Usporedite** kompromise između pohrane kompletnog računa i samo autentifikacijskih tokena
- **Dokumentirajte** svoje odluke i razloge za buduće članove tima
Ovaj izazov pomoći će vam da razmišljate kao profesionalni programer koji uzima u obzir i korisničko iskustvo i učinkovitost aplikacije. Uzmite si vremena za eksperimentiranje s različitim pristupima!
Ovaj izazov pomoći će vam da razmišljate kao profesionalni programer koji uvažava i korisničko iskustvo i učinkovitost aplikacije. Uzmite si vremena za eksperimentiranje!
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/48)
---
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za važne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.
Nakon završetka ovog zadatka, vaša aplikacija za bankarstvo trebala bi imati potpuno funkcionalnu značajku "Dodaj transakciju" koja izgleda i ponaša se profesionalno:
U ovom projektu naučit ćete kako izgraditi fiktivnu banku. Ove lekcije uključuju upute o tome kako postaviti web aplikaciju i definirati rute, izraditi forme, upravljati stanjem i dohvatiti podatke s API-ja od kojeg možete preuzeti podatke banke.
# Korištenje uređivača koda: Savladavanje VSCode.dev-a
# Korištenje urednika koda: Ovladavanje VSCode.dev
Sjećate li se u *Matrixu* kada se Neo morao spojiti na ogromni računalni terminal kako bi pristupio digitalnom svijetu? Današnji alati za web razvoj su potpuno suprotni – nevjerojatno moćni alati dostupni s bilo kojeg mjesta. VSCode.dev je uređivač koda temeljen na pregledniku koji donosi profesionalne alate za razvoj na bilo koji uređaj s internetskom vezom.
Sjetite se u *The Matrixu* kada se Neo morao spojiti na masivni računalni terminal kako bi pristupio digitalnom svijetu? Današnji alati za web razvoj su sasvim druga priča – nevjerojatno moćne mogućnosti dostupne s bilo kojeg mjesta. VSCode.dev je uređivač koda baziran u pregledniku koji donosi profesionalne razvojne alate na bilo koji uređaj s internet vezom.
Baš kao što je tiskarski stroj učinio knjige dostupnima svima, a ne samo pisarima u samostanima, VSCode.dev demokratizira kodiranje. Možete raditi na projektima s računala u knjižnici, školskom laboratoriju ili bilo gdje gdje imate pristup pregledniku. Bez instalacija, bez ograničenja poput "trebam svoj specifični setup".
Baš kao što je tiskarski stroj učinio knjige dostupnima svima, ne samo redovnicima u samostanima, VSCode.dev demokratizira kodiranje. Možete raditi na projektima s računala u knjižnici, školskog laboratorija ili bilo gdje gdje imate pristup pregledniku. Nema instalacija, nema ograničenja “trebam svoju specifičnu konfiguraciju”.
Na kraju ove lekcije, razumjet ćete kako se kretati kroz VSCode.dev, otvarati GitHub repozitorije izravno u pregledniku i koristiti Git za kontrolu verzija – sve vještine na koje se profesionalni programeri oslanjaju svakodnevno.
Do kraja ove lekcije razumjet ćete kako upravljati VSCode.dev-om, otvarati repozitorije s GitHuba izravno u pregledniku i koristiti Git za kontrolu verzija – sve vještine na kojima se profesionalni developeri oslanjaju svakodnevno.
## ⚡ Što možete učiniti u sljedećih 5 minuta
**Brzi početni put za zaposlene developere**
```mermaid
flowchart LR
A[⚡ 5 minuta] --> B[Posjeti vscode.dev]
B --> C[Poveži GitHub račun]
C --> D[Otvori bilo koji repozitorij]
D --> E[Odmah počni uređivati]
```
- **Minuta 1**: Otiđite na [vscode.dev](https://vscode.dev) - nema potrebe za instalacijom
- **Minuta 2**: Prijavite se s GitHubom za povezivanje vaših repozitorija
- **Minuta 3**: Isprobajte URL trik: promijenite `github.com` u `vscode.dev/github` u bilo kojem URL-u repozitorija
- **Minuta 4**: Kreirajte novu datoteku i gledajte kako automatski radi isticanje sintakse
- **Minuta 5**: Napravite promjenu i pošaljite je putem panela za kontrolu izvora
**Brzi testni URL**:
```
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
```
**Zašto je ovo važno**: U 5 minuta iskusit ćete slobodu kodiranja bilo gdje pomoću profesionalnih alata. Ovo predstavlja budućnost razvoja – pristupačnu, moćnu i neposrednu.
## 🗺️ Vaše putovanje učenjem kroz razvoj u oblaku
```mermaid
journey
title Od lokalne postavke do majstorstva razvoja u oblaku
section Razumijevanje platforme
Otkrijte uređivanje putem weba: 4: You
Povežite se s GitHub ekosustavom: 6: You
Ovladavanje navigacijom sučelja: 7: You
section Vještine upravljanja datotekama
Stvaranje i organiziranje datoteka: 5: You
Uređivanje s isticanjem sintakse: 7: You
Navigirajte strukturama projekta: 8: You
section Ovladavanje verzioniranjem
Razumjeti Git integraciju: 6: You
Vježbajte tijekove rada s commit-ovima: 8: You
Ovladavanje obrascima suradnje: 9: You
section Profesionalna prilagodba
Instalirajte moćne proširenja: 7: You
Konfigurirajte razvojno okruženje: 8: You
Izgradite osobne tijekove rada: 9: You
```
**Vaš cilj putovanja**: Do kraja ove lekcije ovladat ćete profesionalnim razvojnim okruženjem u oblaku koje radi s bilo kojeg uređaja, omogućavajući vam kodiranje istim alatima koje koriste developeri u velikim tehnološkim tvrtkama.
## Što ćete naučiti
Nakon što zajedno prođemo kroz ovo, moći ćete:
Nakon što ovo zajedno prođemo, moći ćete:
- Snalaziti se u VSCode.dev kao da je vaš drugi dom – pronalaziti sve što vam treba bez gubljenja
- Otvoriti bilo koji GitHub repozitorij u pregledniku i odmah početi uređivati (ovo je stvarno magično!)
- Upravljati VSCode.dev-om kao da vam je drugi dom – pronalaziti sve što vam treba bez gubljenja
- Otvoriti bilo koji GitHub repozitorij u pregledniku i odmah početi s uređivanjem (ovo je prilično magično!)
- Koristiti Git za praćenje promjena i spremanje napretka kao profesionalac
- Poboljšati svoj uređivač ekstenzijama koje ubrzavaju i čine kodiranje zabavnijim
- Kreirati i organizirati datoteke projekta s povjerenjem
- Pojačati svoj uređivač s ekstenzijama koje ubrzavaju i uljepšavaju kodiranje
- S povjerenjem stvarati i organizirati datoteke projekta
## Što vam je potrebno
## Što će vam trebati
Zahtjevi su jednostavni:
- Besplatan [GitHub račun](https://github.com) (vodit ćemo vas kroz proces kreiranja ako je potrebno)
- Besplatan [GitHub račun](https://github.com) (pomoći ćemo vam s kreacijom ako treba)
- Osnovno poznavanje web preglednika
- Lekcija o osnovama GitHuba pruža korisnu pozadinu, iako nije nužna
- Lekcija GitHub Basics pruža korisne informacije, ali nije nužna
> 💡 **Novi ste na GitHubu?** Kreiranje računa je besplatno i traje nekoliko minuta. Kao što knjižnična iskaznica omogućuje pristup knjigama diljem svijeta, GitHub račun otvara vrata repozitorijima koda na internetu.
> 💡 **Novi ste na GitHubu?** Kreiranje računa je besplatno i traje nekoliko minuta. Kao što vam knjižnična iskaznica daje pristup knjigama širom svijeta, GitHub račun otvara vrata kod repozitorijima diljem interneta.
## Zašto su uređivači koda temeljeni na webu važni
## 🧠 Pregled ekosustava razvoja u oblaku
Prije interneta, znanstvenici na različitim sveučilištima nisu mogli lako dijeliti istraživanja. Zatim je došao ARPANET 1960-ih, povezujući računala na udaljenostima. Uređivači koda temeljeni na webu slijede isti princip – čine moćne alate dostupnima bez obzira na vašu fizičku lokaciju ili uređaj.
Uređivač koda služi kao vaš radni prostor za razvoj, gdje pišete, uređujete i organizirate datoteke koda. Za razliku od jednostavnih uređivača teksta, profesionalni uređivači koda pružaju isticanje sintakse, otkrivanje grešaka i značajke upravljanja projektima.
```mermaid
mindmap
root((VSCode.dev Majstorstvo))
Platform Benefits
Accessibility
Neovisnost Uređaja
Nije Potrebna Instalacija
Trenutna Ažuriranja
Univerzalni Pristup
Integration
GitHub Povezivanje
Sinkronizacija Repozitorija
Trajnost Postavki
Spremno za Suradnju
Development Workflow
File Management
Struktura Projekta
Isticanje Sintakse
Uređivanje u Više Kartica
Značajke Automatskog Spremanja
Version Control
Git Integracija
Radni Tokovi Commitanja
Upravljanje Granama
Praćenje Promjena
Customization Power
Extensions Ecosystem
Alati za Produktivnost
Podrška za Jezike
Opcije Tema
Prilagođeni Prečaci
Environment Setup
Osobne Preferencije
Konfiguracija Radnog Prostora
Integracija Alata
Optimizacija Radnog Toka
Professional Skills
Industry Standards
Kontrola Verzija
Kvaliteta Koda
Suradnja
Dokumentacija
Career Readiness
Rad na Daljinu
Razvoj u Oblaku
Tim Projekti
Otvoreni Izvor
```
**Temeljno načelo**: Razvojna okruženja bazirana na oblaku predstavljaju budućnost kodiranja - pružaju profesionalne alate koji su dostupni, suradnički i neovisni o platformi.
## Zašto su web-bazirani uređivači koda važni
Prije interneta, znanstvenici na različitim sveučilištima nisu mogli lako dijeliti istraživanja. Tada je u 1960-ima nastao ARPANET, povezujući računala na daljinu. Web-bazirani uređivači koda slijede isto načelo – čine moćne alate dostupnim bez obzira na vašu fizičku lokaciju ili uređaj.
Uređivač koda služi kao vaš razvojni radni prostor, gdje pišete, uređujete i organizirate kodne datoteke. Za razliku od jednostavnih tekstualnih uređivača, profesionalni uređivači koda pružaju isticanje sintakse, otkrivanje pogrešaka i mogućnosti upravljanja projektima.
VSCode.dev donosi ove mogućnosti u vaš preglednik:
**Prednosti uređivanja temeljenog na webu:**
**Prednosti web-baziranog uređivanja:**
| Značajka | Opis | Praktična korist |
|----------|------|------------------|
| **Neovisnost o platformi** | Radi na bilo kojem uređaju s preglednikom | Rad s različitih računala bez problema |
| **Nema potrebe za instalacijom** | Pristup putem web URL-a | Zaobilazi ograničenja instalacije softvera |
| **Automatska ažuriranja** | Uvijek koristi najnoviju verziju | Pristup novim značajkama bez ručnih ažuriranja |
| **Integracija s repozitorijem** | Izravna povezanost s GitHubom | Uređivanje koda bez lokalnog upravljanja datotekama |
|---------|-------------|----------|
| **Neovisnost o platformi** | Radi na bilo kojem uređaju s preglednikom | Radite s raznih računala bez problema |
| **Nema potrebe za instalacijom** | Pristup kroz web URL | Zaobiđite ograničenja instalacije softvera |
| **Automatska ažuriranja** | Uvijek radi najnoviju verziju | Pristup novim značajkama bez ručnih ažuriranja |
| **Integracija s repozitorijem** | Izravna veza na GitHub | Uređujte kod bez upravljanja lokalnim datotekama |
**Praktične implikacije:**
- Kontinuitet rada u različitim okruženjima
- Dosljedno sučelje bez obzira na operativni sustav
- Mogućnosti trenutne suradnje
- Smanjeni zahtjevi za lokalnu pohranu
- Kontinuitet rada u različitim okruženjima
- Konzistentno sučelje bez obzira na operativni sustav
- Neposredne mogućnosti suradnje
- Smanjene potrebe za lokalnim prostorom za pohranu
## Istraživanje VSCode.dev-a
Baš kao što je laboratorij Marie Curie sadržavao sofisticiranu opremu u relativno jednostavnom prostoru, VSCode.dev pakira profesionalne alate za razvoj u sučelje preglednika. Ova web aplikacija pruža istu osnovnu funkcionalnost kao i uređivači koda za stolna računala.
Baš kao što je laboratorij Marie Curie sadržavao sofisticiranu opremu u relativno jednostavnom prostoru, VSCode.dev pakira profesionalne razvojne alate u sučelje preglednika. Ova web aplikacija pruža istu osnovnu funkcionalnost kao i desktop uređivači koda.
Započnite navigacijom na [vscode.dev](https://vscode.dev) u svom pregledniku. Sučelje se učitava bez preuzimanja ili instalacije sustava – izravna primjena principa računalstva u oblaku.
Počnite tako da otvorite [vscode.dev](https://vscode.dev) u svom pregledniku. Sučelje se učitava bez preuzimanja ili instalacija na sustav – neposredna primjena principa računarstva u oblaku.
### Povezivanje vašeg GitHub računa
Baš kao što je telefon Alexandera Grahama Bella povezivao udaljene lokacije, povezivanje vašeg GitHub računa spaja VSCode.dev s vašim repozitorijima koda. Kada se od vas zatraži da se prijavite na GitHub, preporučuje se prihvaćanje ove veze.
Baš kao što je telefon Alexandera Grahama Bella povezivao udaljena mjesta, povezivanje vašeg GitHub računa spaja VSCode.dev s vašim repozitorijima. Kada se zatraži prijava putem GitHuba, preporučuje se prihvatiti ovu vezu.
**Integracija s GitHubom omogućuje:**
- Izravan pristup vašim repozitorijima unutar uređivača
- Sinkronizirane postavke i ekstenzije na različitim uređajima
- Pojednostavljeni tijek spremanja na GitHub
**Integracija s GitHubom pruža:**
- Izravan pristup vašim repozitorijima unutar uređivača
- Sinkronizirane postavke i ekstenzije na svim uređajima
- Jednostavniji tijek spremanja na GitHub
- Personalizirano razvojno okruženje
### Upoznavanje vašeg novog radnog prostora
### Upoznavanje s vašim novim radnim prostorom
Kada se sve učita, vidjet ćete prekrasno čisto radno okruženje dizajnirano da vas usmjeri na ono što je važno – vaš kod!
Kad se sve učita, vidjet ćete prelijepo čist radni prostor dizajniran da vas usredotoči na ono najvažnije– vaš kod!
- **Traka aktivnosti** (ona traka s lijeve strane): Vaša glavna navigacija s Explorerom 📁, Pretraživanjem 🔍, Kontrolom izvora 🌿, Ekstenzijama 🧩 i Postavkama ⚙️
- **Bočna traka** (panel pored nje): Mijenja se kako bi vam prikazala relevantne informacije na temelju onoga što ste odabrali
- **Područje uređivača** (veliki prostor u sredini): Ovdje se događa magija – vaš glavni prostor za kodiranje
**Evo ture po susjedstvu:**
- **Traka aktivnosti** (ona traka s lijeve strane): Glavna navigacija s Explorerom 📁, Pretraživanjem 🔍, Kontrolom izvora 🌿, Ekstenzijama 🧩 i Postavkama ⚙️
- **Bočna traka** (panel pored nje): Mijenja se da vam pokaže relevantne informacije prema odabiru
- **Područje uređivača** (veliki prostor u sredini): Tu se događa čarolija – vaše glavno područje za kodiranje
**Odvojite trenutak za istraživanje:**
- Kliknite na ikone na traci aktivnosti i pogledajte što svaka od njih radi
- Primijetite kako se bočna traka ažurira kako bi prikazala različite informacije – prilično zgodno, zar ne?
- Pogled na Explorer (📁) vjerojatno će biti mjesto gdje ćete provoditi većinu vremena, pa se udobno smjestite
**Uzmite trenutak za istraživanje:**
- Klikajte po ikonama na Traci aktivnosti i vidite što svaka radi
- Primijetite kako se bočna traka ažurira s različitim informacijama – prilično zgodno, zar ne?
- Pogled Explorera (📁) je mjesto gdje ćete vjerojatno provesti najviše vremena, stoga se upoznajte s njim
```mermaid
flowchart TB
subgraph "Arhitektura sučelja VSCode.dev"
A[Traka aktivnosti] --> B[Istraživač 📁]
A --> C[Pretraživanje 🔍]
A --> D[Upravljanje izvorom 🌿]
A --> E[Proširenja 🧩]
A --> F[Postavke ⚙️]
B --> G[Stablo datoteka]
C --> H[Pronađi i zamijeni]
D --> I[Git status]
E --> J[Tržnica proširenja]
F --> K[Konfiguracija]
L[Bočna traka] --> M[Panel konteksta]
N[Područje uređivača] --> O[Datoteke koda]
P[Terminal/Izlaz] --> Q[Naredbeni redak]
end
```
## Otvaranje GitHub repozitorija
Prije interneta, istraživači su morali fizički putovati u knjižnice kako bi pristupili dokumentima. GitHub repozitoriji funkcioniraju slično – to su zbirke koda pohranjene na daljinu. VSCode.dev eliminira tradicionalni korak preuzimanja repozitorija na vaše lokalno računalo prije uređivanja.
Prije interneta, istraživači su morali fizički putovati do knjižnica kako bi pristupili dokumentima. GitHub repozitoriji funkcioniraju slično – to su zbirke koda pohranjene daljinski. VSCode.dev uklanja tradicionalni korak preuzimanja repozitorija na lokalno računalo prije uređivanja.
Ova mogućnost omogućuje trenutni pristup bilo kojem javnom repozitoriju za pregled, uređivanje ili doprinos. Evo dva načina za otvaranje repozitorija:
Ova mogućnost omogućuje neposredan pristup bilo kojem javnom repozitoriju za pregledavanje, uređivanje ili doprinos. Evo dva načina za otvaranje repozitorija:
### Metoda 1: Klikni i otvori
### Metoda 1: Klikni i odaberi
Ovo je savršeno kada tek započinjete s VSCode.dev-om i želite otvoriti određeni repozitorij. Jednostavno je i prilagođeno početnicima:
Savršena je kada tek započinjete u VSCode.dev-u i želite otvoriti određeni repozitorij. Jednostavna je i prilagođena početnicima:
**Kako to učiniti:**
**Evo kako to učiniti:**
1. Idite na [vscode.dev](https://vscode.dev) ako već niste tamo
2. Potražite gumb "Open Remote Repository" na početnom zaslonu i kliknite ga
1. Otiđite na [vscode.dev](https://vscode.dev) ako već niste tamo
2. Potražite gumb "Open Remote Repository" na početnom zaslonu i kliknite ga
3. Zalijepite URL bilo kojeg GitHub repozitorija (probajte ovaj: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Pritisnite Enter i gledajte magiju!
3. Zalijepite bilo koji URL GitHub repozitorija (probajte ovaj: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Pritisnite Enter i gledajte čaroliju!
**Savjet za profesionalce - Prečac za Command Palette:**
**Pro savjet - Prečac do Command Palette-a:**
Želite se osjećati kao čarobnjak za kodiranje? Isprobajte ovu tipkovničku prečicu: Ctrl+Shift+P (ili Cmd+Shift+P na Macu) za otvaranje Command Palette:
Želite li se osjećati kao čarobnjak kodiranja? Isprobajte ovaj prečac na tipkovnici: Ctrl+Shift+P (ili Cmd+Shift+P na Macu) za otvaranje Command Palette-a:
**Command Palette je kao tražilica za sve što možete učiniti:**
- Upišite "open remote" i pronaći će otvarač repozitorija za vas
- Pamti repozitorije koje ste nedavno otvorili (super korisno!)
- Kad se naviknete na to, osjećat ćete se kao da kodirate brzinom svjetlosti
- To je u osnovi VSCode.dev-ova verzija "Hej Siri, ali za kodiranje"
**Command Palette je kao tražilica za sve što možete napraviti:**
- Upisite "open remote" i pronaći će otvoritelj repozitorija za vas
- Pamti repozitorije koje ste nedavno otvorili (vrlo korisno!)
- Kad se naviknete, osjećat ćete se kao da kodirate munjevitom brzinom
- To je zapravo VSCode.dev-ova verzija "Hej Siri, ali za kodiranje"
### Metoda 2: Tehnika izmjene URL-a
### Metoda 2: Tehnika promjene URL-a
Baš kao što HTTP i HTTPS koriste različite protokole dok zadržavaju istu strukturu domene, VSCode.dev koristi obrazac URL-a koji odražava GitHub-ov sustav adresiranja. Bilo koji URL GitHub repozitorija može se izmijeniti kako bi se otvorio izravno u VSCode.dev.
Baš kao što HTTP i HTTPS koriste različite protokole, a zadržavaju isti oblik domene, VSCode.dev koristi URL obrazac koji oponaša GitHub-ov sustav adresiranja. Bilo koji URL GitHub repozitorija može se modificirati da se otvori izravno u VSCode.dev-u.
**Obrazac transformacije URL-a:**
@ -132,242 +256,382 @@ Baš kao što HTTP i HTTPS koriste različite protokole dok zadržavaju istu str
| **Bilo koji dostupni repo** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
| **Bilo koji dostupan repo** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
**Implementacija:**
- Zamijenite `github.com` s `vscode.dev/github`
- Sve ostale dijelove URL-a ostavite nepromijenjenima
- Radi s bilo kojim javno dostupnim repozitorijem
- Omogućuje neposredan pristup uređivanju
**Primjena:**
- Zamijenite `github.com` s `vscode.dev/github`
- Ostatak URL-a ostaje nepromijenjen
- Radi s bilo kojim javno dostupnim repozitorijem
- Omogućuje trenutni pristup za uređivanje
> 💡 **Savjet koji mijenja život**: Dodajte u favorite VSCode.dev verzije svojih omiljenih repozitorija. Imam favorite poput "Edit My Portfolio" i "Fix Documentation" koji me voze izravno u način uređivanja!
> 💡 **Savjet koji mijenja život**: Označite VSCode.dev verzije svojih omiljenih repozitorija. Imam oznake poput "Uredi moj portfolio" i "Popravi dokumentaciju" koje me odmah vode u način uređivanja!
**Koju metodu koristiti?**
- **Putem sučelja**: Odlično kad istražujete ili ne pamtite točan naziv repozitorija
- **URL trik**: Savršeno za munjeviti pristup kad točno znate gdje idete
**Koju metodu koristiti?**
- **Putem sučelja**: Odlično kada istražujete ili se ne možete sjetiti točnih naziva repozitorija
- **Trik s URL-om**: Savršeno za munjeviti pristup kada točno znate kamo idete
### 🎯 Pedagoška provjera: Pristup razvoju u oblaku
**Zastanite i razmislite**: Upravo ste naučili dva načina za pristupanje kod repozitorijima putem web preglednika. Ovo predstavlja temeljnu promjenu u načinu razvoja softvera.
**Brza samoocjena**:
- Možete li objasniti zašto web-bazirano uređivanje eliminira tradicionalno "postavljanje razvojne okoline"?
- Koje prednosti pruža tehnika promjene URL-a u odnosu na lokalno kloniranje preko Gita?
- Kako ovaj pristup mijenja način na koji biste mogli doprinositi otvorenim projektima?
**Povezanost sa stvarnim svijetom**: Velike tvrtke poput GitHub, GitLab i Replit izgradile su svoje razvojne platforme na ovim načelima baziranim na oblaku. Vi učite iste radne tokove koje koriste profesionalni razvojni timovi širom svijeta.
**Izazovno pitanje**: Kako bi razvoj baziran na oblaku mogao promijeniti način na koji se kodiranje podučava u školama? Razmotrite zahtjeve za uređajima, upravljanje softverom i mogućnosti suradnje.
## Rad s datotekama i projektima
Sada kada ste otvorili repozitorij, krenimo s izradom! VSCode.dev vam pruža sve što vam je potrebno za kreiranje, uređivanje i organiziranje vaših datoteka koda. Zamislite to kao svoju digitalnu radionicu – svaki alat je tamo gdje vam treba.
Sad kad imate otvoren repozitorij, krenimo s izgradnjom! VSCode.dev daje sve što vam treba da stvarate, uređujete i organizirate svoje kodne datoteke. Razmislite o njemu kao o svojoj digitalnoj radionici– svaki alat je tamo gdje vam treba.
Zaronimo u svakodnevne zadatke koji će činiti većinu vašeg tijeka rada kodiranja.
Zaronimo u svakodnevne zadatke koji će činiti većinu vašeg rasporeda kodiranja.
### Kreiranje novih datoteka
Baš kao što se nacrti organiziraju u uredu arhitekta, kreiranje datoteka u VSCode.dev slijedi strukturirani pristup. Sustav podržava sve standardne vrste datoteka za web razvoj.
Baš kao što se plovila u arhitektovom uredu organiziraju, kreiranje datoteka u VSCode.dev-u slijedi strukturirani pristup. Sustav podržava sve standardne tipove datoteka za web razvoj.
**Proces kreiranja datoteka:**
**Proces kreiranja datoteke:**
1. Idite na ciljani folder u bočnoj traci Explorer
2. Pređite mišem preko naziva foldera kako biste otkrili ikonu "New File" (📄+)
3. Unesite naziv datoteke uključujući odgovarajuću ekstenziju (`style.css`, `script.js`, `index.html`)
4. Pritisnite Enter za kreiranje datoteke
1. Navigirajte do ciljnog foldera u bočnom pretraživaču (Explorer sidebar)
2. Zadržite pokazivač na imenu foldera da se pojavi ikona "Nova datoteka" (📄+)
3. Unesite ime datoteke uključujući odgovarajuću ekstenziju (`style.css`, `script.js`, `index.html`)
4. Pritisnite Enter za stvaranje datoteke
**Konvencije imenovanja:**
- Koristite opisne nazive koji ukazuju na svrhu datoteke
- Uključite ekstenzije datoteka za pravilno isticanje sintakse
- Slijedite dosljedne obrasce imenovanja kroz projekte
**Konvencije imenovanja:**
- Koristite opisna imena koja označavaju svrhu datoteke
- Uključite ekstenzije datoteka radi pravilnog isticanja sintakse
- Slijedite dosljedne obrasce imenovanja kroz projekte
- Koristite mala slova i crtice umjesto razmaka
### Uređivanje i spremanje datoteka
Ovdje počinje prava zabava! Uređivač VSCode.dev-a prepun je korisnih značajki koje čine kodiranje glatkim i intuitivnim. To je kao da imate stvarno pametnog asistenta za pisanje, ali za kod.
Evo gdje prava zabava počinje! Uređivač VSCode.dev je prepun korisnih značajki koje čine kodiranje glatkim i intuitivnim. Kao da imate zaista pametnog asistenta za pisanje, ali za kod.
**Vaš tijek rada pri uređivanju:**
**Vaš tijek rada za uređivanje:**
1. Kliknite bilo koju datoteku u Exploreru da je otvorite u glavnom prostoru
2. Počnite tipkati i gledajte kako vam VSCode.dev pomaže bojama, sugestijama i pronalaženjem pogrešaka
3. Spremite posao sa Ctrl+S (Windows/Linux) ili Cmd+S (Mac) – iako se automatski sprema!
1. Kliknite na bilo koju datoteku u Exploreru kako biste je otvorili u glavnom području
2. Počnite tipkati i gledajte kako vam VSCode.dev pomaže bojama, prijedlozima i otkrivanjem grešaka
3. Spremite svoj rad s Ctrl+S (Windows/Linux) ili Cmd+S (Mac) – iako se automatski sprema!
**Zanimljive stvari koje se događaju dok kodirate:**
- Vaš kod se lijepo oboji kako bi bio lakši za čitanje
- VSCode.dev predlaže dovršetke dok tipkate (kao automatsko ispravljanje, ali puno pametnije)
- Hvata tipografske greške i pogreške prije nego što ih spremite
- Možete imati više otvorenih datoteka u karticama, baš kao u pregledniku
**Hladne stvari koje se događaju dok kodirate:**
- Vaš kod je prekrasno obojen za lakše čitanje
- VSCode.dev predlaže dovršetke dok tipkate (kao automatska ispravka, ali puno pametnije)
- Uočava tipfeler i greške prije nego što uopće spremite
- Možete imati više datoteka otvorenih u karticama, baš kao u pregledniku
- Sve se automatski sprema u pozadini
> ⚠️ **Brzi savjet**: Iako automatsko spremanje radi svoj posao, pritiskanje Ctrl+S ili Cmd+S i dalje je dobra navika. Odmah sprema sve i pokreće dodatne korisne značajke poput provjere grešaka.
> ⚠️ **Brzi savjet**: Iako je automatsko spremanje sjajno, navika pritiskanja Ctrl+S ili Cmd+S još je uvijek dobra. Odmah sprema sve i pokreće dodatne korisne funkcije poput provjere pogrešaka.
### Kontrola verzija s Gitom
Baš kao što arheolozi stvaraju detaljne zapise slojeva iskopavanja, Git prati promjene u vašem kodu tijekom vremena. Ovaj sustav čuva povijest projekta i omogućuje vam povratak na prethodne verzije kada je to potrebno. VSCode.dev uključuje integriranu funkcionalnost Gita.
**Sučelje za kontrolu izvora:**
Baš kao što arheolozi stvaraju detaljne zapise slojeva iskapanja, Git prati promjene u vašem kodu tijekom vremena. Taj sustav čuva povijest projekta i omogućava vraćanje na prethodne verzije kad je potrebno. VSCode.dev uključuje integriranu Git funkcionalnost.
1. Pristupite panelu Source Control putem ikone 🌿 na traci aktivnosti
2. Izmijenjene datoteke pojavljuju se u odjeljku "Changes"
3. Boje označavaju vrste promjena: zelena za dodatke, crvena za brisanja
**Sučelje kontrole izvora:**
1. Pristupite panelu Kontrola izvora preko ikone 🌿 na Traci aktivnosti
2. Izmijenjene datoteke pojavljuju se u odjeljku "Promjene"
3. Boje označavaju tip promjene: zeleno za dodan tekst, crveno za izbrisano
**Spremanje vašeg rada (tijek commit-a):**
**Spremanje rada (workflow za commit):**
```mermaid
flowchart TD
A[Make changes to files] --> B[View changes in Source Control]
B --> C[Stage changes by clicking +]
C --> D[Write descriptive commit message]
D --> E[Click checkmark to commit]
E --> F[Changes pushed to GitHub]
```
**Evo vašeg korak-po-korak procesa:**
- Kliknite na ikonu "+" pored datoteka koje želite spremiti (time ih "postavljate")
- Provjerite jeste li zadovoljni svim postavljenim promjenama
- Napišite kratku bilješku koja objašnjava što ste učinili (to je vaša "commit poruka")
- Kliknite gumb za potvrdu kako biste sve spremili na GitHub
- Ako se predomislite oko nečega, ikona za poništavanje omogućuje vam odbacivanje promjena
**Pisanje dobrih commit poruka (lakše je nego što mislite!):**
- Samo opišite što ste učinili, poput "Dodaj kontakt obrazac" ili "Popravi neispravnu navigaciju"
- Neka bude kratko i jasno – razmislite o duljini tvita, a ne eseja
- Započnite s glagolima poput "Dodaj", "Popravi", "Ažuriraj" ili "Ukloni"
- **Dobri primjeri**: "Dodaj responzivni navigacijski izbornik", "Popravi probleme s mobilnim izgledom", "Ažuriraj boje za bolju pristupačnost"
> 💡 **Brzi savjet za navigaciju**: Koristite izbornik hamburger (☰) u gornjem lijevom kutu za povratak na vaš GitHub repozitorij i pregled vaših potvrđenih promjena online. To je kao portal između vašeg okruženja za uređivanje i doma vašeg projekta na GitHubu!
## Poboljšanje funkcionalnosti s ekstenzijama
Baš kao što radionica majstora sadrži specijalizirane alate za različite zadatke, VSCode.dev se može prilagoditi ekstenzijama koje dodaju specifične mogućnosti. Ovi alati koje razvija zajednica rješavaju uobičajene potrebe razvoja poput formatiranja koda, pregleda uživo i poboljšane integracije s Gitom.
Tržište ekstenzija sadrži tisuće besplatnih alata koje su razvili programeri diljem svijeta. Svaka ekstenzija rješava određene izazove u tijeku rada, omogućujući vam da izgradite personalizirano razvojno okruženje prilagođeno vašim specifičnim potrebama i preferencijama.
### Pronalaženje savršenih ekstenzija
Tržište ekstenzija je stvarno dobro organizirano, tako da se nećete izgubiti dok tražite ono što vam treba. Dizajnirano je da vam pomogne otkriti i specifične alate i zanimljive stvari za koje niste ni znali da postoje!
**Kako doći do tržišta:**
1. Kliknite na ikonu Ekstenzije (🧩) na traci aktivnosti
2. Pregledajte ili potražite nešto specifično
3. Kliknite na bilo što što vam se čini zanimljivo
- Svako proširenje prikazuje ocjene, broj preuzimanja i recenzije stvarnih korisnika
- Dobivate snimke zaslona i jasne opise što svako od njih radi
- Sve je jasno označeno informacijama o kompatibilnosti
- Predložena su slična proširenja kako biste mogli usporediti opcije
### Instaliranje proširenja (Super jednostavno!)
Dodavanje novih funkcionalnosti vašem editoru jednostavno je kao klik na gumb. Proširenja se instaliraju u sekundi i odmah počinju raditi – bez ponovnog pokretanja, bez čekanja.
**Evo što trebate učiniti:**
1. Potražite ono što želite (probajte pretražiti "live server" ili "prettier")
2. Kliknite na ono što vam se čini dobro kako biste vidjeli više detalja
- Nove funkcionalnosti odmah se pojavljuju u vašem sučelju
- Sve počinje raditi odmah (ozbiljno, toliko je brzo!)
- Ako ste prijavljeni, proširenje se sinkronizira na svim vašim uređajima
**Neka proširenja koja bih preporučio za početak:**
- **Live Server**: Pogledajte kako se vaša web stranica ažurira u stvarnom vremenu dok kodirate (ovo je čarobno!)
- **Prettier**: Automatski čini vaš kod čistim i profesionalnim
- **Auto Rename Tag**: Promijenite jedan HTML tag i njegov partner se također ažurira
- **Bracket Pair Colorizer**: Obojava vaše zagrade kako se ne biste izgubili
- **GitLens**: Poboljšava vaše Git funkcionalnosti s puno korisnih informacija
### Prilagodba vaših proširenja
Većina proširenja dolazi s postavkama koje možete prilagoditi kako bi radila točno onako kako želite. Zamislite to kao podešavanje sjedala i ogledala u automobilu – svatko ima svoje preferencije!
**Podešavanje postavki proširenja:**
1. Pronađite instalirano proširenje u panelu Proširenja
2. Potražite malu ikonu zupčanika (⚙️) pored njegovog imena i kliknite na nju
3. Odaberite "Extension Settings" iz padajućeg izbornika
4. Prilagodite postavke dok ne budu savršene za vaš način rada
**Uobičajene stvari koje biste mogli prilagoditi:**
- Kako se vaš kod formatira (tabovi vs razmaci, duljina linije itd.)
- Koje prečace na tipkovnici pokreću različite radnje
- S kojim vrstama datoteka proširenje treba raditi
- Uključivanje ili isključivanje specifičnih funkcionalnosti kako bi sve ostalo pregledno
### Organiziranje vaših proširenja
Kako otkrivate više zanimljivih proširenja, poželjet ćete održavati svoju kolekciju urednom i funkcionalnom. VSCode.dev to čini vrlo jednostavnim za upravljanje.
**Opcije za upravljanje proširenjima:**
| Što možete učiniti | Kada je korisno | Savjet |
|--------|---------|----------|
| **Onemogućiti** | Testiranje uzrokuje li proširenje probleme | Bolje nego deinstalirati ako ga možda želite vratiti |
| **Deinstalirati** | Potpuno uklanjanje proširenja koja vam ne trebaju | Održava vaše okruženje čistim i brzim |
| **Ažurirati** | Dobivanje najnovijih funkcionalnosti i ispravki grešaka | Obično se događa automatski, ali vrijedi provjeriti |
**Kako ja volim upravljati proširenjima:**
- Svakih nekoliko mjeseci pregledam što sam instalirao i uklonim sve što ne koristim
- Održavam proširenja ažuriranima kako bih dobio najnovija poboljšanja i sigurnosne zakrpe
- Ako nešto izgleda sporo, privremeno onemogućim proširenja kako bih vidio uzrokuje li jedno od njih problem
- Čitam bilješke o ažuriranjima kad proširenja dobiju veće nadogradnje – ponekad se pojave zanimljive nove funkcionalnosti!
> ⚠️ **Savjet za performanse**: Proširenja su sjajna, ali previše njih može usporiti rad. Fokusirajte se na ona koja vam stvarno olakšavaju život i ne bojte se deinstalirati ona koja nikada ne koristite.
## Izazov GitHub Copilot Agent 🚀
Poput strukturiranog pristupa koji NASA koristi za svemirske misije, ovaj izazov uključuje sustavnu primjenu VSCode.dev vještina u cjelovitom scenariju radnog procesa.
**Cilj:** Demonstrirati vještinu rada s VSCode.dev uspostavljanjem sveobuhvatnog radnog procesa za web razvoj.
**Zahtjevi projekta:** Koristeći pomoć u Agent modu, dovršite ove zadatke:
1. Forkajte postojeći repozitorij ili kreirajte novi
2. Uspostavite funkcionalnu strukturu projekta s HTML, CSS i JavaScript datotekama
3. Instalirajte i konfigurirajte tri proširenja koja poboljšavaju razvoj
4. Vježbajte kontrolu verzija s opisnim porukama commit-a
5. Eksperimentirajte s kreiranjem i izmjenom grana za funkcionalnosti
6. Dokumentirajte proces i naučeno u README.md datoteci
Ova vježba konsolidira sve VSCode.dev koncepte u praktičan radni proces koji se može primijeniti na buduće razvojne projekte.
A[Napravi promjene u datotekama] --> B[Pogledaj promjene u Kontroli izvora]
B --> C[Postavi promjene klikom na +]
C --> D[Napiši opisnu poruku commit-a]
D --> E[Klikni kvačicu za commit]
E --> F[Promjene poslane na GitHub]
```
```mermaid
stateDiagram-v2
[*] --> Modified: Uredi datoteke
Modified --> Staged: Klikni + za pripremu
Staged --> Modified: Klikni - za uklanjanje iz pripreme
- Kliknite "+" ikonu pored datoteka koje želite spremiti (time ih "stage-ate")
- Dvaput provjerite jeste li zadovoljni sa svim pripremljenim promjenama
- Napišite kratku bilješku u kojoj objašnjavate što ste napravili (to je vaša "poruka potvrde")
- Kliknite na gumb s kvačicom da sve spremite na GitHub
- Ako promijenite mišljenje, ikona za poništavanje omogućava vam da odbacite promjene
**Pisanje dobrih poruka potvrda (to je lakše nego što mislite!):**
- Jednostavno opišite što ste napravili, poput "Dodaj kontakt obrazac" ili "Popravi neispravnu navigaciju"
- Držite ih kratkima i jasnima – duljine tvita, ne eseja
- Počnite s radnjama poput "Dodaj", "Popravi", "Ažuriraj" ili "Ukloni"
- **Dobri primjeri**: "Dodaj responzivni navigacijski meni", "Popravi probleme s mobilnim prikazom", "Ažuriraj boje radi bolje pristupačnosti"
> 💡 **Brzi savjet za navigaciju**: Koristite hamburger meni (☰) u gornjem lijevom kutu da se brzo vratite u svoj GitHub repozitorij i vidite svoje potvrđene promjene online. Kao portal između vašeg okruženja za uređivanje i doma vašeg projekta na GitHubu!
## Poboljšanje funkcionalnosti s proširenjima
Baš kao što radionica obrtnika sadrži specijalizirane alate za različite zadatke, VSCode.dev se može prilagoditi proširenjima koja dodaju specifične mogućnosti. Ti dodaci razvijeni od strane zajednice rješavaju uobičajene potrebe razvoja kao što su oblikovanje koda, živi pregled i poboljšana integracija Git-a.
Tržište proširenja domaćin je tisućama besplatnih alata koje su stvorili programeri širom svijeta. Svako proširenje rješava određene izazove radnog toka, omogućujući vam da izgradite personalizirano razvojno okruženje prilagođeno vašim potrebama i preferencijama.
Saznajte više o [Agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
```mermaid
mindmap
root((Ekosustav Proširenja))
Bitne Kategorije
Produktivnost
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Kvaliteta Koda
Prettier
ESLint
Spell Checker
Error Lens
Podrška za Jezik
HTML CSS Podrška
JavaScript ES6
Python Proširenje
Markdown Pregled
Temi & UI
Dark+ Modern
Material Icon Tema
Peacock
Rainbow Brackets
Metode Otkrića
Popularni Rangovi
Broj Preuzimanja
Ocjene Korisnika
Nedavna Ažuriranja
Pregledi Zajednice
Preporuke
Prijedlozi Radnog Prostora
Na Osnovu Jezika
Specifično za Radni Tok
Timski Standardi
```
### Pronalazak vaših savršenih proširenja
Tržište proširenja je zaista dobro organizirano, pa se nećete izgubiti tražeći ono što vam treba. Dizajnirano je da vam pomogne otkriti i specifične alate i zanimljive stvari za koje niste ni znali!
**Kako doći do tržišta proširenja:**
1. Kliknite ikonu Proširenja (🧩) na Traci aktivnosti
2. Pregledavajte ili pretražujte nešto specifično
3. Kliknite na bilo što što izgleda zanimljivo da biste saznali više
| **Instalirano** | Proširenja koja ste već dodali | Vaš osobni alatni set za kodiranje |
| **Popularno** | Favoriti mase | Na što se većina programera pouzdaje |
| **Preporučeno** | Pametne preporuke za vaš projekt | Korisni savjeti VSCode.dev-a |
**Što olakšava pregledavanje:**
- Svako proširenje prikazuje ocjene, broj preuzimanja i recenzije stvarnih korisnika
- Dobivate snimke zaslona i jasne opise što svako radi
- Sve je jasno označeno informacijama o kompatibilnosti
- Predlažu se slična proširenja za usporedbu opcija
### Instalacija proširenja (vrlo je jednostavno!)
Dodavanje novih mogućnosti vašem uređivaču jednostavno je kao klik na gumb. Proširenja se instaliraju za nekoliko sekundi i odmah počinju raditi – bez ponovnih pokretanja i čekanja.
**Sve što trebate učiniti:**
1. Pretražite što želite (probajte "live server" ili "prettier")
2. Kliknite na ono što vam se sviđa za više detalja
- Sve počinje raditi odmah (ozbiljno, toliko je brzo!)
- Ako ste prijavljeni, proširenje se sinkronizira na svim vašim uređajima
**Neka proširenja koja bih preporučio da počnete koristiti:**
- **Live Server**: Vidi svoje web stranice ažurirane u stvarnom vremenu dok kodiraš (ovo je čarobno!)
- **Prettier**: Automatski čisti i profesionalizira tvoj kod
- **Auto Rename Tag**: Promijeni jedan HTML tag, a njegov partner se također ažurira
- **Bracket Pair Colorizer**: Boja označava vaše zagrade da se nikada ne izgubite
- **GitLens**: Nadograđuje vaše Git funkcije s gomilom korisnih informacija
### Prilagođavanje vaših proširenja
Većina proširenja dolazi s postavkama koje možete podesiti kako bi radila točno onako kako želite. Zamislite to kao podešavanje sjedala i retrovizora u automobilu – svatko ima svoje preferencije!
**Podešavanje postavki proširenja:**
1. Pronađite instalirano proširenje u panelu Proširenja
2. Potražite malu ikonu zupčanika (⚙️) pored imena i kliknite na nju
3. Izaberite "Extension Settings" iz padajućeg izbornika
4. Prilagodite dok vam radni tok ne odgovara savršeno
- Kako se vaš kod formatira (tabovi vs razmaci, duljina linije, itd.)
- Koje prečace na tipkovnici pokreću različite radnje
- S kojim vrstama datoteka proširenje treba raditi
- Uključivanje ili isključivanje određenih značajki da bi sučelje bilo čisto
### Održavanje organizacije vaših proširenja
## Zadatak
Kako otkrivate sve više cool proširenja, htjet ćete održati svoju kolekciju urednom i da sve teče glatko. VSCode.dev ovo čini vrlo lako za upravljanje.
Vrijeme je da ove vještine testirate u stvarnom projektu! Imam praktičan projekt koji će vam omogućiti da vježbate sve što smo pokrili: [Izradite web stranicu životopisa koristeći VSCode.dev](./assignment.md)
**Vaše opcije upravljanja proširenjima:**
Ovaj zadatak vodi vas kroz izradu profesionalne web stranice životopisa u potpunosti u vašem pregledniku. Koristit ćete sve VSCode.dev funkcionalnosti koje smo istražili, a na kraju ćete imati i sjajnu web stranicu i čvrsto samopouzdanje u vašem novom radnom procesu.
| Što možete učiniti | Kada je korisno | Profesionalni savjet |
| **Onemogući** | Testirate je li proširenje uzrok problema | Bolje od deinstalacije ako možda želite vratiti |
| **Deinstaliraj** | Potpuno uklanjanje proširenja koja ne trebate | Održava okruženje čistim i brzim |
| **Ažuriraj** | Dobivanje najnovijih značajki i ispravaka | Obično se događa automatski, ali vrijedi provjeriti |
## Nastavite istraživati i razvijati svoje vještine
**Kako ja volim upravljati proširenjima:**
- Svakih nekoliko mjeseci pregledavam što sam instalirao i uklonim ono što ne koristim
- Održavam proširenja ažurnima da imam najnovija poboljšanja i sigurnosne ispravke
- Ako nešto usporava, privremeno onemogućim proširenja da vidim je li štogod krivac
- Čitam bilješke o ažuriranjima kod velikih nadogradnji – ponekad imaju super nove značajke!
Sada imate čvrste temelje, ali postoji još toliko zanimljivih stvari za otkriti! Evo nekoliko resursa i ideja za podizanje vaših VSCode.dev vještina na višu razinu:
> ⚠️ **Savjet za performanse**: Proširenja su sjajna, ali previše njih može usporiti vaš uređivač. Fokusirajte se na ona koja vam stvarno olakšavaju život i ne bojte se deinstalirati ona koja nikada ne koristite.
**Službeni dokumenti koje vrijedi spremiti:**
- [VSCode Web Dokumentacija](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Potpuni vodič za uređivanje u pregledniku
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Kada želite još više snage u oblaku
**Zanimljive funkcionalnosti za daljnje istraživanje:**
- **Prečaci na tipkovnici**: Naučite kombinacije tipki koje će vas pretvoriti u pravog majstora kodiranja
- **Postavke radnog prostora**: Postavite različita okruženja za različite vrste projekata
- **Višekorijenski radni prostori**: Radite na više repozitorija istovremeno (super korisno!)
- **Integracija terminala**: Pristupite alatima naredbenog retka izravno u vašem pregledniku
**Razumijevanje arhitekture**: Naučili ste kako prilagoditi profesionalno razvojno okruženje koristeći proširenja stvorena od strane zajednice. Ovo odražava kako timovi u poduzećima grade standardizirane alate.
**Ideje za vježbanje:**
- Pridružite se nekim open-source projektima i doprinesite koristeći VSCode.dev – sjajan način za doprinos zajednici!
- Isprobajte različita proširenja kako biste pronašli savršenu postavu
- Kreirajte predloške projekata za vrste web stranica koje najčešće izrađujete
- Vježbajte Git radne procese poput grananja i spajanja – ove vještine su zlata vrijedne u timskim projektima
**Ključni usvojeni pojmovi**:
- **Pronalaženje proširenja**: Pronalazak alata koji rješavaju specifične razvojne izazove
- **Konfiguracija okruženja**: Prilagođavanje alata osobnim ili timskim preferencijama
- **Optimizacija performansi**: Balansiranje funkcionalnosti i performansi sustava
- **Zajednički rad zajednice**: Korištenje alata koje je stvorila globalna zajednica programera
---
**Povezanost s industrijom**: Ekosustavi proširenja pokreću glavne razvojne platforme poput VS Code, Chrome DevTools i modernih IDE-a. Razumijevanje kako evaluirati, instalirati i konfigurirati proširenja ključno je za profesionalne razvojne tokove.
**Savladali ste razvoj u pregledniku!** 🎉 Kao što je izum prijenosnih instrumenata omogućio znanstvenicima provođenje istraživanja na udaljenim lokacijama, VSCode.dev omogućuje profesionalno kodiranje s bilo kojeg uređaja povezanog na internet.
**Pitanje za razmišljanje**: Kako biste pristupili uspostavljanju standardiziranog razvojog okruženja za tim od 10 developera? Razmotrite dosljednost, performanse i individualne preferencije.
Ove vještine odražavaju trenutne industrijske prakse – mnogi profesionalni programeri koriste razvojna okruženja temeljena na oblaku zbog njihove fleksibilnosti i dostupnosti. Naučili ste radni proces koji se može skalirati od individualnih projekata do velikih timskih suradnji.
## 📈 Vaša vremenska crta usavršavanja u razvoju u oblaku
Primijenite ove tehnike na vaš sljedeći razvojni projekt! 🚀
```mermaid
timeline
title Profesionalno putovanje razvoja u oblaku
section Osnove platforme
Razumijevanje razvoja u oblaku
: Savladajte koncepte uređivanja putem mreže
: Povežite obrasce integracije GitHub-a
: Kretanje profesionalnim sučeljima
section Savladavanje radnog toka
Upravljanje datotekama i projektima
: Izradite organizirane strukture projekata
: Savladajte prednosti isticanja sintakse
: Upravljanje radnim tokovima uređivanja s više datoteka
Integracija kontrole verzija
: Razumite vizualizaciju Git-a
: Prakticirajte standarde poruka za commit
: Savladajte radne tokove praćenja promjena
section Prilagodba okruženja
Ekosustav proširenja
: Otkrijte proširenja za produktivnost
: Konfigurirajte razvojne postavke
: Optimizirajte izvedbu naspram funkcionalnosti
Profesionalna postava
: Izgradite konzistentne radne tokove
: Izradite konfiguracije za višekratnu upotrebu
: Uspostavite timske standarde
section Spremnost za industriju
Razvoj prvenstveno u oblaku
: Savladajte prakse udaljenog razvoja
: Razumite suradničke radne tokove
: Izgradite vještine neovisne o platformi
Profesionalne prakse
: Slijedite industrijske standarde
: Izradite održive radne tokove
: Pripremite se za timsko okruženje
```
**🎓 Prekretnica diplomiranja**: Uspješno ste svladali razvoj u oblaku koristeći iste alate i tokove rada koje koriste profesionalni developeri u velikim tehnološkim tvrtkama. Te vještine predstavljaju budućnost razvoja softvera.
**🔄 Sljedeće razine sposobnosti:**
- Spremni za istraživanje naprednih platformi za razvoj u oblaku (Codespaces, GitPod)
- Pripremljeni za rad u distribuiranim razvojnim timovima
- Opremljeni za doprinos open source projektima na globalnoj razini
- Postavljena osnova za moderne DevOps i prakse kontinuirane integracije
## Izazov GitHub Copilot agenta 🚀
Kao što NASA koristi strukturirani pristup za svemirske misije, ovaj izazov uključuje sustavnu primjenu vještina VSCode.dev-a u potpunom scenariju radnog toka.
**Zahtjevi projekta:** Uz pomoć Agent moda, dovršite ove zadatke:
1. Napravite fork postojećeg repozitorija ili stvorite novi
2. Uspostavite funkcionalnu strukturu projekta s HTML, CSS i JavaScript datotekama
3. Instalirajte i konfigurirajte tri proširenja za poboljšanje razvoja
4. Vježbajte kontrolu verzija s opisnim porukama potvrde
5. Eksperimentirajte s kreiranjem i izmjenom feature grana
6. Dokumentirajte proces i naučeno u README.md datoteci
Ova vježba konsolidira sve VSCode.dev koncepte u praktični radni tok koji se može primijeniti na buduće razvojne projekte.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## Zadatak
Vrijeme je da ove vještine stavite na pravi test! Imam praktični projekt koji će vam omogućiti da vježbate sve što smo pokrili: [Izradite web stranicu životopisa koristeći VSCode.dev](./assignment.md)
Ovaj zadatak vodi vas kroz izradu profesionalne web stranice životopisa potpuno u pregledniku. Koristit ćete sve VSCode.dev značajke koje smo istražili, a na kraju ćete imati i izvrsnu web stranicu i snažno samopouzdanje u svoj novi radni tok.
## Nastavite istraživati i razvijati svoje vještine
Imate sada solidnu osnovu, ali postoji još toliko zanimljivih stvari za otkriti! Evo nekoliko izvora i ideja za podizanje vaših VSCode.dev vještina na višu razinu:
**Službena dokumentacija koju vrijedi označiti:**
- [VSCode Web Dokumentacija](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Potpuni vodič za uređivanje u pregledniku
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Za one koji žele još moćnije mogućnosti u oblaku
**Zanimljive značajke za sljedeće isprobati:**
- **Tipkovnički prečaci**: Naučite kombinacije tipki koje će vas učiniti vještim kao ninja kodiranja
- **Postavke radnog prostora**: Postavite različita okruženja za različite vrste projekata
- **Višekorijenski radni prostori**: Radite na više repozitorija istovremeno (super praktično!)
- **Integracija terminala**: Pristupite alatima naredbenog retka direktno u pregledniku
**Ideje za vježbu:**
- Uključite se u open source projekte i doprinosite koristeći VSCode.dev – izvrstan način da se vratite zajednici!
- Isprobajte različita proširenja da pronađete idealnu postavku za sebe
- Kreirajte predloške projekata za vrste stranica koje najčešće gradite
- Vježbajte Git tokove rada poput grananja i spajanja – te vještine su zlato u timskim projektima
---
**Savladali ste razvoj u pregledniku!** 🎉 Kao što je izum prijenosnih instrumenata omogućio znanstvenicima istraživanje na udaljenim lokacijama, VSCode.dev omogućava profesionalno kodiranje s bilo kojeg uređaja povezanog na internet.
Te vještine odražavaju suvremene industrijske prakse – mnogi profesionalni developeri koriste razvojna okruženja u oblaku zbog njihove fleksibilnosti i pristupačnosti. Naučili ste radni tok koji se može skalirati od individualnih projekata do velikih timskih suradnji.
Primijenite ove tehnike u svom sljedećem razvojnom projektu! 🚀
---
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne odgovaramo za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Izjava o odricanju odgovornosti**:
Ovaj dokument je preveden korištenjem AI prevoditeljskog servisa [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazume ili krivo tumačenje proizašla iz korištenja ovog prijevoda.
@ -78,7 +78,7 @@ Budući da VSCode.dev zahtijeva barem jednu datoteku za otvaranje repozitorija,
4. **Napišite** poruku za commit: "Dodaj početnu HTML strukturu"
5. **Kliknite** "Commit new file" za spremanje promjena
**Što se postiže ovim početnim postavljanjem:**
- **Postavlja** pravilnu HTML5 strukturu dokumenta sa semantičkim elementima
@ -104,7 +104,7 @@ Sada kada je temelj vašeg repozitorija postavljen, prebacimo se na VSCode.dev z
✅ **Indikator uspjeha**: Trebali biste vidjeti datoteke svog projekta u bočnoj traci Explorer i `index.html` dostupan za uređivanje u glavnom području uređivača.
@ -448,7 +448,7 @@ Ekstenzije poboljšavaju vaše iskustvo razvoja pružajući mogućnosti za pregl
**Rezultati odmah nakon instalacije:**
Nakon instalacije CodeSwinga, vidjet ćete pregled uživo vaše web stranice za životopis u uređivaču. To vam omogućuje da vidite kako vaša stranica izgleda dok unosite promjene.
**Razumijevanje poboljšanog sučelja:**
- **Podijeljeni prikaz**: **Prikazuje** vaš kod na jednoj strani i pregled uživo na drugoj
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
# Razvoj weba za početnike - Nastavni plan i program
Naučite osnove web razvoja uz naš sveobuhvatni 12-tjedni tečaj koji su osmislili Microsoft Cloud Advocates. Svaka od 24 lekcije bavi se JavaScriptom, CSS-om i HTML-om kroz praktične projekte poput terarija, proširenja za preglednike i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu metodologiju učenja kroz projekte. Započnite svoje putovanje kodiranja već danas!
Naučite osnove web razvoja s našim opsežnim 12-tjednim tečajem kojeg vodi Microsoft Cloud Advocates. Svaka od 24 lekcije dubinski obrađuje JavaScript, CSS i HTML kroz praktične projekte poput terarija, proširenja za preglednik i svemirskih igara. Sudjelujte u kvizovima, raspravama i praktičnim zadacima. Poboljšajte svoje vještine i optimizirajte zadržavanje znanja uz našu učinkovitu projektnu pedagogiju. Započnite svoje programersko putovanje danas!
Pridružite se Azure AI Foundry Discord zajednici
[](https://discord.com/invite/ByRwuEEgH4)
**Ako želite dodati dodatne prijevode, podržani jezici navedeni su [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> **Želite li klonirati lokalno?**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
> Ovo spremište uključuje prevode na više od 50 jezika što značajno povećava veličinu preuzimanja. Za kloniranje bez prijevoda, koristite sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ovo vam daje sve što vam treba za dovršetak tečaja uz znatno brže preuzimanje.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ako želite dodatne jezike prijevoda, podržani jezici navedeni su [ovdje](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jeste li student?_
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći resurse za početnike, studentske pakete i čak načine kako dobiti besplatne certifikate. Ovo je stranica koju želite spremiti i povremeno provjeravati jer se sadržaj mijenja svaki mjesec.
Posjetite [**Student Hub stranicu**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) gdje ćete pronaći početničke resurse, studentske pakete i čak načine kako dobiti besplatni certifikat. Ovo je stranica koju želite označiti i povremeno provjeravati jer redovito mijenjamo sadržaj.
### 📣 Obavijest - Novi izazovi s GitHub Copilot Agent modom!
### 📣 Najava - Novi izazovi za GitHub Copilot Agent mod!
Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov za vas koji možete riješiti koristeći GitHub Copilot i Agent mod. Ako ga dosad niste koristili, Agent mod ne samo da generira tekst, već može i kreirati i uređivati datoteke, pokretati naredbe i još mnogo toga.
Dodani su novi izazovi, potražite "GitHub Copilot Agent Challenge 🚀" u većini poglavlja. To je novi izazov koji trebate dovršiti koristeći GitHub Copilot i Agent mod. Ako prije niste koristili Agent mod, on nije samo za generiranje teksta, već može i kreirati i uređivati datoteke, pokretati naredbe i još mnogo toga.
### 📣 Obavijest - _Novi projekt za izradu koristeći generativnu AI_
### 📣 Najava - _Novi projekt za izgradnju uz Generativnu AI_
Upravo je dodan novi projekt AI asistenta, pogledajte [projekt](./09-chat-project/README.md)
Upravo dodan novi projekt AI asistenta, pogledajte [projekt](./9-chat-project/README.md)
### 📣 Obavijest - _Novi kurikulum_ o generativnoj AI za JavaScript upravo je objavljen
### 📣 Najava - _Novi nastavni plan_ o Generativnoj AI za JavaScript upravo je objavljen
Ne propustite naš novi kurikulum o generativnoj AI!
Ne propustite naš novi nastavni plan o Generativnoj AI!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za početak!
Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite!
Svaka lekcija uključuje zadatak za rješavanje, provjeru znanja i izazov koji će vas voditi kroz učenje tema kao što su:
- Pisanje upita i inženjering upita
Svaka lekcija uključuje zadatak za dovršetak, provjeru znanja i izazov koji vas vodi kroz teme poput:
- Promptovanje i inženjering promptova
- Generiranje aplikacija za tekst i slike
- Aplikacije za pretraživanje
- Pretraživačke aplikacije
Posjetite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) i započnite!
Posjetite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) za početak!
## 🌱 Početak
> **Nastavnici**, [uključili smo nekoliko prijedloga](for-teachers.md) o tome kako koristiti ovaj kurikulum. Voljeli bismo čuti vaše povratne informacije [u našem forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## 🌱 Početak rada
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite s kvizom prije predavanja, nastavite čitanjem materijala za predavanje, dovršite razne aktivnosti i provjerite svoje razumijevanje kvizom nakon predavanja.
> **Nastavnici**, uključili smo [neke prijedloge](for-teachers.md) o tome kako koristiti ovaj nastavni plan. Voljeli bismo vaše povratne informacije [u našem forumu za diskusije](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Kako biste poboljšali svoje iskustvo učenja, povežite se s kolegama i radite zajedno na projektima! Rasprave su dobrodošle u našem [forumu za raspravu](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.
**[Učenici](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, za svaku lekciju započnite predpredavanjem kvizom, zatim pročitajte predavanje, dovršite razne aktivnosti i provjerite razumijevanje putem postpredavačkog kviza.
Za daljnje obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne materijale za učenje.
Za poboljšanje vašeg iskustva učenja, povežite se s kolegama i radite na projektima zajedno! Rasprave su poticane na našem [forumu za diskusije](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gdje će naš tim moderatora biti dostupan za odgovore na vaša pitanja.
Za dodatno obrazovanje, toplo preporučujemo istraživanje [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) za dodatne materijale za studij.
### 📋 Postavljanje vašeg okruženja
Ovaj kurikulum ima razvojno okruženje spremno za korištenje! Kada započnete, možete odabrati pokretanje kurikuluma u [Codespace](https://github.com/features/codespaces/) (_okruženje temeljeno na pregledniku, bez potrebe za instalacijom_), ili lokalno na vašem računalu koristeći tekstualni editor poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ovaj nastavni plan ima spremno razvojno okruženje! Kako započinjete, možete izabrati pokretanje nastavnog plana u [Codespace-u](https://github.com/features/codespaces/) (_okruženju baziranom na pregledniku, bez potrebe za instalacijama_), ili lokalno na vašem računalu koristeći tekstualni uređivač poput [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Kreirajte svoj repozitorij
Kako biste lako spremili svoj rad, preporučuje se da kreirate vlastitu kopiju ovog repozitorija. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Ovo će kreirati novi repozitorij u vašem GitHub računu s kopijom kurikuluma.
#### Kreirajte svoje spremište
Kako biste lako spremali svoj rad, preporučuje se da napravite vlastitu kopiju ovog spremišta. To možete učiniti klikom na gumb **Use this template** na vrhu stranice. Time ćete stvoriti novo spremište na vašem GitHub računu sa kopijom nastavnog plana.
Slijedite ove korake:
1. **Forkajte repozitorij**: Kliknite na gumb "Fork" u gornjem desnom kutu ove stranice.
U vašoj kopiji ovog repozitorija koju ste kreirali, kliknite gumb **Code** i odaberite **Open with Codespaces**. Ovo će kreirati novi Codespace za rad.
U vašoj kopiji ovog spremišta koju ste stvorili, kliknite gumb **Code** i odaberite **Open with Codespaces**. Time će se kreirati novi Codespace u kojem ćete raditi.
#### Pokretanje kurikuluma lokalno na vašem računalu
#### Pokretanje nastavnog plana lokalno na vašem računalu
Za pokretanje ovog kurikuluma lokalno na vašem računalu, trebat će vam tekstualni editor, preglednik i alat za naredbeni redak. Naša prva lekcija, [Uvod u programske jezike i alate za rad](../../1-getting-started-lessons/1-intro-to-programming-languages), provest će vas kroz razne opcije za svaki od ovih alata kako biste odabrali ono što vam najbolje odgovara.
Za pokretanje ovog nastavnog plana lokalno na vašem računalu, potreban vam je tekstualni uređivač, preglednik i alat za naredbeni redak. Naša prva lekcija, [Uvod u programske jezike i alate struke](../../1-getting-started-lessons/1-intro-to-programming-languages), pružit će vam različite opcije za svaki od ovih alata kako biste mogli odabrati ono što vam najviše odgovara.
Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao vašeg editora, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Možete preuzeti Visual Studio Code [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Preporučujemo korištenje [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kao uređivača, koji također ima ugrađeni [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code možete preuzeti [ovdje](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonirajte svoj repozitorij na svoje računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
[CodeSpace](./images/createcodespace.png)
1. Klonirajte svoje spremište na računalo. To možete učiniti klikom na gumb **Code** i kopiranjem URL-a:
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` s URL-om koji ste upravo kopirali:
[CodeSpace](./images/createcodespace.png)
Zatim otvorite [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) unutar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i pokrenite sljedeću naredbu, zamjenjujući `<your-repository-url>` URL-om koji ste upravo kopirali:
```bash
git clone <your-repository-url>
@ -120,79 +135,80 @@ Naša preporuka je korištenje [Visual Studio Code](https://code.visualstudio.co
2. Otvorite mapu u Visual Studio Code. To možete učiniti klikom na **File** > **Open Folder** i odabirom mape koju ste upravo klonirali.
> Preporučeni Visual Studio Code dodaci:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - za pregled HTML stranica unutar Visual Studio Code-a
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za brže pisanje koda
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - za pomoć pri bržem pisanju koda
## 📂 Svaka lekcija uključuje:
- opcionalnu skicu
- opcionalni dodatni video
- kviz za zagrijavanje prije lekcije
- opcionalnu skice
- dodatni video (opcionalno)
- zagrijavajući kviz prije lekcije
- pisanu lekciju
- za lekcije temeljene na projektima, vodiče korak po korak kako izraditi projekt
- za lekcije temeljene na projektima, vodiče korak-po-korak za izgradnju projekta
- provjere znanja
- izazov
- dodatno čitanje
- dodatnu literaturu
- zadatak
- [kviz nakon lekcije](https://ff-quizzes.netlify.app/web/)
> **Napomena o kvizovima**: Svi kvizovi nalaze se u mapi Quiz-app, ukupno 48 kvizova s po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), a aplikacija za kviz može se pokrenuti lokalno ili postaviti na Azure; slijedite upute u mapi `quiz-app`.
> **Napomena o kvizovima**: Svi kvizovi se nalaze u mapi Quiz-app, ukupno 48 kvizova od po tri pitanja. Dostupni su [ovdje](https://ff-quizzes.netlify.app/web/), aplikaciju za kviz možete pokrenuti lokalno ili je postaviti na Azure; slijedite upute u mapi `quiz-app`.
## 🗃️ Lekcije
| | Naziv projekta | Poučeni koncepti | Ciljevi učenja | Povezana lekcija | Autor |
| | Naziv projekta | Pojmovi koji se podučavaju | Ciljevi učenja | Povezana lekcija | Autor |
| 01 | Početak rada | Uvod u programiranje i alate za rad | Naučite osnovne temelje većine programskih jezika i o softveru koji pomaže profesionalnim programerima u njihovom poslu | [Uvod u programske jezike i alate za rad](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Početak rada | Osnove GitHuba, uključujući rad u timu | Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Početak rada | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Osnove JS | Tipovi podataka u JavaScriptu | Osnove tipova podataka u JavaScriptu | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Osnove JS | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logičkim tokom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Osnove JS | Donošenje odluka s JS | Naučite kako stvoriti uvjete u svom kodu koristeći metode za donošenje odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Osnove JS | Nizovi i petlje | Radite s podacima koristeći nizove i petlje u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terarij](./3-terrarium/solution/README.md) | HTML u praksi | Izradite HTML za stvaranje online terarija, fokusirajući se na izradu izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terarij](./3-terrarium/solution/README.md) | CSS u praksi | Izradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući izradu responzivne stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terarij](./3-terrarium/solution/README.md) | Zatvaranja u JavaScriptu, manipulacija DOM-a | Izradite JavaScript kako bi terarij funkcionirao kao sučelje za povlačenje/ispust, fokusirajući se na zatvaranja i manipulaciju DOM-a | [Zatvaranja u JavaScriptu, manipulacija DOM-a](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izradite igru tipkanja | Naučite kako koristiti događaje na tipkovnici za upravljanje logikom svoje JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako postaviti prve elemente dodatka za preglednik | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Izrada obrasca, pozivanje API-ja i pohrana varijabli u lokalnu memoriju | Izradite JavaScript elemente svog dodatka za preglednik kako biste pozvali API koristeći varijable pohranjene u lokalnoj memoriji | [API-ji, obrasci i lokalna memorija](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Koristite pozadinske procese preglednika za upravljanje ikonom dodatka; naučite o web performansama i nekim optimizacijama za poboljšanje | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Svemirska igra](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći klase i kompoziciju te Pub/Sub uzorak, kao pripremu za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Svemirska igra](./6-space-game/solution/README.md) | Crtanje na platno | Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na ekranu | [Crtanje na platno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Svemirska igra](./6-space-game/solution/README.md) | Pomicanje elemenata po ekranu | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijanske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Svemirska igra](./6-space-game/solution/README.md) | Detekcija sudara | Napravite da se elementi sudaraju i međusobno reagiraju koristeći pritiske tipki te osigurajte funkciju hlađenja za performanse igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Svemirska igra](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Svemirska igra](./6-space-game/solution/README.md) | Završavanje i ponovno pokretanje igre | Naučite o završavanju i ponovnom pokretanju igre, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankovna aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako stvoriti okvir arhitekture web stranice s više stranica koristeći rute i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankovna aplikacija](./7-bank-project/solution/README.md) | Izrada obrasca za prijavu i registraciju | Naučite o izradi obrazaca i rukovanju rutinama za validaciju | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankovna aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci teku u i iz vaše aplikacije, kako ih dohvatiti, pohraniti i ukloniti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankovna aplikacija](./7-bank-project/solution/README.md) | Koncepti upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga programatski upravljati | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Preglednik/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako koristiti uređivač koda| [Koristite VScode uređivač koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izraditi vlastitog AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| 01 | Uvod u programiranje | Uvod u programiranje i alati struke | Naučite osnovne osnove većine programskih jezika i o softveru koji pomaže profesionalnim developerima u njihovom radu | [Uvod u programske jezike i alate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Uvod u programiranje | Osnove GitHuba, uključuje rad u timu | Kako koristiti GitHub u svom projektu, kako surađivati s drugima na kodnoj bazi | [Uvod u GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Uvod u programiranje | Pristupačnost | Naučite osnove web pristupačnosti | [Osnove pristupačnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS osnove | JavaScript tipovi podataka | Osnove JavaScript tipova podataka | [Tipovi podataka](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS osnove | Funkcije i metode | Naučite o funkcijama i metodama za upravljanje logikom aplikacije | [Funkcije i metode](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | JS osnove | Donošenje odluka u JS | Naučite kako kreirati uvjete u vašem kodu koristeći metode donošenja odluka | [Donošenje odluka](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS osnove | Nizovi i petlje | Rad s podacima korištenjem nizova i petlji u JavaScriptu | [Nizovi i petlje](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarij](./3-terrarium/solution/README.md) | HTML u praksi | Izgradite HTML za kreiranje online terarija, fokusirajući se na izgradnju izgleda | [Uvod u HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarij](./3-terrarium/solution/README.md) | CSS u praksi | Izgradite CSS za stiliziranje online terarija, fokusirajući se na osnove CSS-a uključujući prilagodbu stranice | [Uvod u CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarij](./3-terrarium/solution/README.md) | JavaScript zatvaranja, manipulacija DOM-om | Izradite JavaScript da terarij funkcionira kao sučelje povuci/pusti, fokusirajući se na zatvaranja i manipulaciju DOM-a | [JavaScript zatvaranja, manipulacija DOM-om](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Igra tipkanja](./4-typing-game/solution/README.md) | Izgradnja igre tipkanja | Naučite kako koristiti događaje s tipkovnice za upravljanje logikom vaše JavaScript aplikacije | [Programiranje vođeno događajima](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Rad s preglednicima | Naučite kako preglednici rade, njihovu povijest i kako napraviti prve elemente dodatka za preglednik | [O preglednicima](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Izgradnja obrasca, pozivanje API-ja i pohrana varijabli u lokalnu pohranu | Izgradite JavaScript elemente svog dodatka za preglednik za pozivanje API-ja koristeći varijable pohranjene u lokalnu pohranu | [API-ji, obrasci i lokalna pohrana](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zeleni dodatak za preglednik](./5-browser-extension/solution/README.md) | Pozadinski procesi u pregledniku, web performanse | Iskoristite pozadinske procese preglednika za upravljanje ikonama dodatka; naučite o web performansama i nekim optimizacijama | [Pozadinski zadaci i performanse](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Igra u svemiru](./6-space-game/solution/README.md) | Napredniji razvoj igara s JavaScriptom | Naučite o nasljeđivanju koristeći i klase i kompoziciju te Pub/Sub obrazac, u pripremi za izradu igre | [Uvod u napredni razvoj igara](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Igra u svemiru](./6-space-game/solution/README.md) | Crtanje na platnu | Naučite o Canvas API-ju, koji se koristi za crtanje elemenata na zaslon | [Crtanje na platnu](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Igra u svemiru](./6-space-game/solution/README.md) | Pomicanje elemenata po zaslonu | Otkrijte kako elementi mogu dobiti pokret koristeći kartezijske koordinate i Canvas API | [Pomicanje elemenata](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Igra u svemiru](./6-space-game/solution/README.md) | Detekcija sudara | Izradite sudare elemenata i reakcije na njih pomoću pritiska tipki te dodajte funkciju hlade za osiguravanje performansi igre | [Detekcija sudara](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Igra u svemiru](./6-space-game/solution/README.md) | Vođenje rezultata | Izvršite matematičke izračune na temelju statusa i performansi igre | [Vođenje rezultata](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Igra u svemiru](./6-space-game/solution/README.md) | Završetak i ponovno pokretanje igre | Naučite kako završiti i ponovno pokrenuti igru, uključujući čišćenje resursa i resetiranje vrijednosti varijabli | [Uvjet završetka](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | HTML predlošci i rute u web aplikaciji | Naučite kako napraviti kostur višestranične web stranice koristeći rutiranje i HTML predloške | [HTML predlošci i rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Izgradnja obrasca za prijavu i registraciju | Naučite o izgradnji obrazaca i rukovanju validacijama | [Obrasci](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Metode dohvaćanja i korištenja podataka | Kako podaci ulaze u vašu aplikaciju i izlaze iz nje, kako ih dohvatiti, pohraniti i odložiti | [Podaci](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankarska aplikacija](./7-bank-project/solution/README.md) | Pojmovi upravljanja stanjem | Naučite kako vaša aplikacija zadržava stanje i kako ga upravljati programatski | [Upravljanje stanjem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Preglednik/VScode kod](../../8-code-editor) | Rad s VScode | Naučite kako koristiti urednik koda| [Koristite VScode uređivač koda](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Rad s AI | Naučite kako izgraditi vlastitog AI asistenta | [AI Asistent projekat](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogija
Naš kurikulum osmišljen je s dva ključna pedagoška principa:
Naš nastavni program dizajniran je s dva ključna pedagoška principa na umu:
* učenje temeljeno na projektima
* česti kvizovi
Program poučava osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web programeri. Studenti će imati priliku steći praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu svemirskih osvajača i bankovne aplikacije za poslovanje. Do kraja serije, studenti će steći solidno razumijevanje web razvoja.
Program uči osnove JavaScripta, HTML-a i CSS-a, kao i najnovije alate i tehnike koje koriste današnji web developeri. Studenti će imati priliku razviti praktično iskustvo izradom igre tipkanja, virtualnog terarija, ekološki prihvatljivog dodatka za preglednik, igre u stilu svemirskog invazivnog napadača te bankarske aplikacije za tvrtke. Na kraju serije, studenti će steći solidno razumijevanje razvoja weba.
> 🎓 Prve lekcije iz ovog kurikuluma možete pohađati kao [Put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Možete odraditi prve lekcije iz ovog nastavnog programa kao [put učenja](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Osiguravanjem da sadržaj odgovara projektima, proces postaje zanimljiviji za studente, a zadržavanje koncepata se povećava. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u koncepte, u kombinaciji s videom iz kolekcije "[Serija za početnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorijala, čiji su autori neki od suradnika ovog kurikuluma.
Osiguravanjem da sadržaj bude usklađen s projektima, proces postaje zanimljiviji studentima i povećava se zadržavanje koncepta. Također smo napisali nekoliko početnih lekcija o osnovama JavaScripta za uvod u pojmove, uparene s videom iz kolekcije "[Serija za početnike: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", čiji su neki autori pridonijeli ovom nastavnom programu.
Osim toga, kviz s niskim rizikom prije predavanja usmjerava namjeru studenta prema učenju teme, dok drugi kviz nakon predavanja osigurava daljnje zadržavanje. Ovaj kurikulum osmišljen je da bude fleksibilan i zabavan te se može pohađati u cijelosti ili djelomično. Projekti započinju malim koracima i postaju sve složeniji do kraja 12-tjednog ciklusa.
Osim toga, kviz s niskim ulaznim zahtjevima prije nastave postavlja namjeru učenika prema učenju teme, dok drugi kviz nakon nastave osigurava daljnje zadržavanje znanja. Ovaj je nastavni program dizajniran da bude fleksibilan i zabavan te se može koristiti u cijelosti ili djelomično. Projekti počinju mali i postaju sve složeniji do kraja 12-tjednog ciklusa.
Iako smo namjerno izbjegavali uvođenje JavaScript okvira kako bismo se usredotočili na osnovne vještine potrebne web programeru prije usvajanja okvira, dobar sljedeći korak nakon završetka ovog kurikuluma bio bi učenje o Node.js-u putem druge kolekcije videozapisa: "[Serija za početnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Iako smo svjesno izbjegavali uvođenje JavaScript okvira kako bismo se koncentrirali na osnovne vještine potrebne web developerima prije usvajanja okvira, dobar sljedeći korak nakon ovog nastavnog programa bilo bi učenje o Node.js putem druge kolekcije videa: "[Serija za početnike: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Posjetite naše [Smjernice ponašanja](CODE_OF_CONDUCT.md) i [Smjernice za doprinos](CONTRIBUTING.md). Vaše konstruktivne povratne informacije su dobrodošle!
> Posjetite naše smjernice [Kodeksa ponašanja](CODE_OF_CONDUCT.md) i [Doprinos](CONTRIBUTING.md). Cijenimo vašu konstruktivnu povratnu informaciju!
## 🧭 Pristup bez interneta
## 🧭 Izvanmrežni pristup
Ovu dokumentaciju možete koristiti offline pomoću [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na svoj lokalni uređaj, a zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će biti poslužena na portu 3000 na vašem lokalnom računalu: `localhost:3000`.
Ovu dokumentaciju možete pokrenuti i izvan mreže koristeći [Docsify](https://docsify.js.org/#/). Forkajte ovaj repozitorij, [instalirajte Docsify](https://docsify.js.org/#/quickstart) na vaš lokalni stroj, a zatim u korijenskoj mapi ovog repozitorija upišite `docsify serve`. Web stranica će biti dostupna na portu 3000 na vašem lokalnom računalu: `localhost:3000`.
## 📘 PDF
@ -200,57 +216,65 @@ PDF svih lekcija možete pronaći [ovdje](https://microsoft.github.io/Web-Dev-Fo
## 🎒 Ostali tečajevi
Naš tim proizvodi i druge tečajeve! Pogledajte:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Serija o generativnoj umjetnoj inteligenciji
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Serija generativne AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Osnovno učenje
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Serija Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ako zapnete ili imate pitanja o izradi AI aplikacija, pridružite se:
Ako zapnete ili imate pitanja o izradi AI aplikacija. Pridružite se drugim učenicima i iskusnim programerima u raspravama o MCP-u. To je podržavajuća zajednica gdje su pitanja dobrodošla i znanje se slobodno dijeli.
[](https://aka.ms/foundry/discord)
Ako imate povratne informacije o proizvodu ili naiđete na greške tijekom izrade, posjetite:
Ako imate povratne informacije o proizvodu ili greške tijekom izrade posjetite:
[](https://aka.ms/foundry/forum)
Ovaj repozitorij licenciran je pod MIT licencom. Pogledajte datoteku [LICENSE](../../LICENSE) za više informacija.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Odricanje od odgovornosti**:
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.
Ovaj je dokument preveden koristeći AI uslugu prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja proizašla iz korištenja ovog prijevoda.
localizeflow[bot]
1 month ago