History

softchris bde9da6dad 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Osnove JavaScripta: Nizovi i petlje

Sketchnote autorice Tomomi Imura

Kviz prije predavanja

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!

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.

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.

✅ Nizovi su svuda oko nas! Možete li smisliti primjer stvarnog života koji uključuje niz, poput niza solarnih panela?

Kreiranje nizova

Kreiranje niza je vrlo jednostavno - samo koristite uglate zagrade!

// Empty array - like an empty shopping cart waiting for items
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.

Također možete odmah popuniti svoj niz početnim vrijednostima:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
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

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.

Indeks	Vrijednost	Opis
0	"Čokolada"	Prvi element
1	"Jagoda"	Drugi element
2	"Vanilija"	Treći element
3	"Pistacija"	Č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.

Pristup elementima niza:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Razlaganje onoga što se ovdje događa:

Koristi notaciju s uglatim zagradama i brojem indeksa za pristup elementima
Vraća vrijednost pohranjenu na određenoj poziciji u nizu
Počinje brojati od 0, čineći prvi element indeksom 0

Modificiranje elemenata niza:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

U gornjem primjeru smo:

Modificirali element na indeksu 4 iz "Rocky Road" u "Butter Pecan"
Dodali novi element "Cookie Dough" na indeksu 5
Automatski proširili duljinu niza dodavanjem izvan trenutnih granica

Duljina niza i uobičajene metode

Nizovi dolaze s ugrađenim svojstvima i metodama koje olakšavaju rad s podacima.

Pronalaženje duljine niza:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Ključne točke za zapamtiti:

Vraća ukupan broj elemenata u nizu
Ažurira se automatski kada se elementi dodaju ili uklone
Pruža dinamičko brojanje korisno za petlje i provjeru valjanosti

Osnovne metode niza:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns 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)
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.

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.

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.

Struktura for petlje:

Komponenta	Svrha	Primjer
Inicijalizacija	Postavlja početnu točku	`let i = 0`
Uvjet	Kada nastaviti	`i < 10`
Inkrement	Kako ažurirati	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Korak po korak, evo što se događa:

Inicijalizira varijablu brojača 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?

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.

Karakteristike while petlje:

Nastavlja se izvršavati dok je uvjet istinit
Zahtijeva ručno upravljanje bilo kojim varijablama brojača
Provjerava uvjet prije svake iteracije
Rizikuje beskonačne petlje ako uvjet nikada ne postane lažan

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

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
Uključuje sigurnosne mehanizme za sprječavanje beskonačnog izvršavanja

Moderni alternativni oblici petlji

JavaScript nudi modernu sintaksu petlji koja može učiniti vaš kod čitljivijim i manje sklonim greškama.

For...of petlja (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Ključne prednosti for...of:

Eliminira upravljanje indeksima i potencijalne greške u brojanju
Pruža direktan pristup elementima niza
Poboljšava čitljivost koda i smanjuje složenost sintakse

Metoda forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Što trebate znati o forEach:

Izvršava funkciju za svaki element niza
Pruža vrijednost elementa i indeks kao parametre
Ne može se zaustaviti prije vremena (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.

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.

Tradicionalna obrada nizova:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Razumimo svaki pristup:

Koristi svojstvo duljine niza za određivanje granice petlje
Pristupa elementima prema indeksu u tradicionalnim for petljama
Pruža direktan pristup elementima u for...of petljama
Obrađuje svaki element niza točno jednom

Praktičan primjer obrade podataka:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Evo kako ovaj kod funkcionira:

Inicijalizira varijable za praćenje zbroja i ekstremnih vrijednosti
Obrađuje svaku ocjenu jednom učinkovitom petljom
Akumulira ukupni zbroj za izračun prosjeka
Prati najviše i najniže vrijednosti tijekom iteracije
Izračunava konačnu statistiku nakon završetka petlje

✅ Eksperimentirajte s iteracijom kroz niz koji sami osmislite u konzoli vašeg preglednika.

Izazov GitHub Copilot Agent 🚀

Koristite Agent način rada za dovršavanje 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.

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.

Više o agent načinu rada saznajte ovdje.

🚀 Izazov

JavaScript nudi nekoliko modernih metoda za rad s nizovima koje mogu zamijeniti tradicionalne petlje za specifične zadatke. Istražite forEach, for-of, map, filter i reduce.

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

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 i isprobajte neke od njih (poput push, pop, slice i splice) na nizu koji sami osmislite.

Zadatak

Prođite kroz niz

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje 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.