02.04 - nizovi u JavaScriptu - neke metode - vežbe
Zadatak:
Napraviti web stranicu u kojoj će sa vežbati rad sa nizovima
Za prvi deo zadatka postaviti dva paragrafa i dugmiće, kao na slici slika table 1
Za drugi deo zadatka kreirati niz brojeva i funkcije za unos novog elementa niza (na početak i na kraj niza), kao i funkcije za uklanjanje elementa niza (sa početka i sa kraja), kao na slici slika table 2
Nastavak zadatka:
Za treći deo zadatka u html dodati dugmiće za
- prikaz elemenata niza, ali jedan ispod drugog,
- obrtanje redosleda elemenata,
- sortiranje niza
Odgovarajući JavaScript kod je sakriven iza dugmića gde se vidi još jedna slika table (js)
Objašnjenja: (teorija i primeri)
Da se podsetimo:
- u našem slučaju smo niz kreirali pomoću konstruktora kojem su kao argumenti prosleđeni svi elementi niza
niz = new Array(1,2,3,4,5,6,7,8,9);
...Pošto nije navedeno ni let ni var, niz je u ovom slučaju globalno vidljiv svuda!
(iako ova opcija nije bila neophodna za ovaj zadatak)
U HTML kodu su postavljeni dugmići i u njim apoziv odgovarajuće finkcije kada se klikne na dugme. ( Ne zaboravite da prilikom poziva funkcije navedete i zagrade )
Neke funkcije (modernije je reći metode) koje koristimo na času su objašnjene u nastavku
Metode push() i pop()
Metode push() i pop() omogućavaju da se sa nizovima radi kao da su stekovi. Metoda push() dodaje jedan ili više elemenata na kraj niza i vraća novu dužinu niza. Metoda pop() radi suprotno - briše poslednji elemenat niza i vraća uklonjenu vrednost. Obe metode direktno menjaju izvorni niz umesto da prave izmenjenu kopiju niza. Kombinacijom metoda push() i pop() može se realizovati stek koji radi po principu ,,poslednji koji je unesen unutra, prvi će izaći napolje"(LIFO - Last In First Out).
Metoda push()
- služi za dodavanje novog elementa u niz - i to na kraj niza (poredite se pez figuricom i ubacivanjem bombone u nju)
let el = prompt("unesi novi element niza");
niz.push(el);
Kada se upotrebi funkcija push(el), to znači da je na kraj niza dodat novi element u koji se ubacuje sadržaj promenljive el, a ukupan broj elemenata niza ja sada uvećan za jedan.
Metoda pop()
- služi za izbacivanje elementa sa kraja niza (poredite se pez figuricom - kada izbacujete bombonu)
niz.pop();
-
ujedno može i da se taj element preuzme za korišćenje
element = niz.pop();
Jednom kada se izvrši funkcija pop(), taj element koji je bio na kraju niza je uklonjen iz niza i više mu se ne može pristupati, a broj elemenata niza je za jedan manji nego pre toga !
Metode unshift() i shift()
Metode unshift() i shift() umeću i uklanjaju elemente od početka niza. Metoda unshift() dodaje element na početak niza, pomera postojeće elemente na pozicije s višim indeksima da bi napravila prostor za nove elemente, i vraća novu dužinu niza. Metoda shift() uklanja i vraća prvi element niza, pomerajući sve naredne elemente na poziciju sa indeksom umanjenim za jedan.
Metoda unshift()
- služi za dodavanje novog elementa u niz - i to na POČETAK niza
let el = prompt("unesi novi element niza");
niz.unshift(el);
Kada se upotrebi funkcija unshift(el), to znači da je na početak niza dodat novi element u koji se ubacuje sadržaj promenljive el, a ukupan broj elemenata niza ja sada uvećan za jedan.
Metoda shift()
- služi za izbacivanje elementa sa POČETKA niza
niz.shift();
-
ujedno može i da se taj element preuzme za korišćenje
element = niz.shift();
Jednom kada se izvrši funkcija shift(), taj element koji je bio na početku niza je uklonjen iz niza i više mu se ne može pristupati, a broj elemenata niza je za jedan manji nego pre toga !
Podsetite se:
Ako se prilikom klika na dugme treba izvršiti neka metoda nad celim nizom, i ako je ceo kod kratak, ne mora se kreirati nova funkcija.
U našem zadatku je poslednji deo - sortiranje niza - izvršen na taj način:
U HTML kodu je dodato dugme:
<button onclick="niz.sort()"> SORTIRAJ NIZ <button>
...