24/25.3 WEB programiranje 3

0 - nastavak rada sa zadatkom iz prethodne lekcije

U istom folderu gde su fajlovi iz prethodne lekcije kreirati petlje2.html i povezati ga sa istim css i js fajlovima

Na sve tri web stranice treba da su linkovi ka druge dve web stranice - sa svake da se može stići na ostale dve.

U novonapravljenom html fajlu kreirati po dugme za svaki od delova koda koji se radi - po izboru učenika - i paragraf sa id-jem u koji se smešta rezultat.

Na primer, ako treba ispisati niz od 1 do 5 i ako se koristi for petlja

<!-- za HTML kod -->
<button onclick="funkcija1()"> Dugme1 <button> ....  <p id="niz1"> Niz: </p>

// JavaScript kod bi bio ...
function funkcija1(){
 for(let i=0; i<5; i++) 
    document.getElementById("niz1").innerHTML += (" "+ i);
}

Na kraju uraditi i zadatke iz dela za vežbe.

Ciklusi su ključni koncepti u programiranju koji omogućavaju ponavljanje određenih blokova koda dok su ispunjeni određeni uslovi. JavaScript nudi nekoliko vrsta ciklusa, a u ovoj lekciji ćemo se fokusirati na osnovni for ciklus i specifični for...in ciklus.

1. for ciklus

for ciklus je najčešće korišćen ciklus za ponavljanje niza ili za izvršavanje zadatog bloka koda više puta. Sintaksa for ciklusa u JavaScript-u sastoji se od tri dela:

• Inicijalizacija: Definisanje početne vrednosti brojača.
• Uslov: Provera uslova, ako je tačan, ciklus nastavlja izvršavanje.
• Ažuriranje: Menjanje brojača nakon svake iteracije.

Sintaksa for ciklusa:

for (inicijalizacija; uslov; ažuriranje) {
    // Blok koda koji će se izvršavati
}

Primer for ciklusa:

for (let i = 0; i < 5; i++) {
    console.log("Broj je " + i);
}

Broj je 0
Broj je 1
Broj je 2
Broj je 3
Broj je 4

2. for...in ciklus

for...in ciklus se koristi za iteraciju kroz sva svojstva objekta. On prolazi kroz sve ključne vrednosti objekta (ne kroz elemente niza, već ključeve u objektu).

Sintaksa for...in ciklusa:

for (let ključ in objekat) {
    // Blok koda koji se izvršava za svako svojstvo
}

Primer for...in ciklusa sa objektima:

let osoba = { ime: "Marko", godine: 25, grad: "Beograd" };

for (let kljuc in osoba) {
    console.log(kljuc + ": " + osoba[kljuc]);
}

U ovom primeru:

• for...in prolazi kroz sva svojstva objekta osoba.
• kljuc je svako svojstvo (ime, godine, grad).
• osoba[kljuc] vraća vrednost tog svojstva.

ime: Marko
godine: 25
grad: Beograd

3. Razlika između for i for...in

• for ciklus se koristi za iteraciju kroz nizove (element po element) ili kada je potrebno više kontrole nad brojačem.
• for...in ciklus je dizajniran za iteraciju kroz sva svojstva objekta (ključevi objekata).

4. Kombinacija for ciklusa sa nizovima

Nizovi su strukture podataka koje sadrže više vrednosti. Kada želite da prolazite kroz niz i obrađujete njegove elemente, koristite for ciklus.

Primer for ciklusa sa nizovima:

let brojevi = [10, 20, 30, 40, 50];

for (let i = 0; i < brojevi.length; i++) {
    console.log(brojevi[i]);
}

U ovom primeru koristimo for ciklus da iteriramo kroz niz brojevi, gde je i indeks elementa, a brojevi[i] vraća vrednost tog elementa.

10
20
30
40
50

5. Vežba:

1. Kreirajte niz imena, koristite for ciklus da ih sve ispišete u konzoli.
2. Kreirajte objekat sa informacijama o automobilu (marka, model, godina), zatim koristite for...in da ispišete sva svojstva objekta.