08.04 - rad sa nizovima u JavaScript-u .... metode (1. deo)
Uređivanje nije završeno - zasad su prikazane samo slike table iz učionice, a lekcija će biti naknadno objašnjena ...
Ovo se radi u bloku od 3 časova po 30 minuta !
JavaScript nizovi
*** sledeći JavaScript kod se radi na web stranici, redom, kao na času ***
1. deo: slika table sa časa:
Da se podsetimo:
• Elemente u niz smo smeštali tako što u definisani niz navođenjem indeksa smestimo element
let niz = new Array();
niz[0] = "Jabuka";
niz[1] = "Limun";
niz[2] = "Kivi";
Elemente niza dalje možemo ispisati ili pogledati niz pomoću alert ili console.log()
alert(niz[0]); // iskače prozor u kojem piše Jabuka - pristup prvom elementu niza
console.log(niz); // u konzoli se vidi da je u pitanju niz, broj elemenata, koji su elementi i njihov tip :)
Niz možemo deklarisati i na sledeći način:
let emails = ["s@s.com", "a@acme.com"]; // niz od dva elementa je deklarisan i postavljene vrednosti u ta dva elementa
Nizu na kraj možemo da dodamo novi element, uz pomoć metode .push("element koji ubacujemo")
emails.push("abcd@email.com"); // niz se proširuje: sada ima 3 elementa, a na poslednjem mestu je ovaj koji je dodat
console.log(emails); // provera - šta je sada u nizu
Metoda splice()
Ova metoda se koristi ako želimo da
- uklonimo iz niza jedan ili više elemenata počev od zadate pozicije u nizu
- ili
- dodamo jedan ili više elemenata počev od zadate pozicije u nizu
U našim zadacima koristimo pozivanje ove metode sa dva ili tri parametra, u zavisnosti od zahteva zadatka.
Kako se poziva:
nazivNiza.splice(pozicijaOdakleSeRadi, kolikoBrišemo, element_ili_elementi_kojeDodajemo)
U našem zadatku:
emails.splice(1,1); // uklanja drugi element - počev od pozicije sa indeksom 1 uklanja 1 element
console.log(emails); // provera - šta je sada u nizu
emails.splice(1, 0, "pera@kojot.org"); // počev od pozicije sa indeksom 1, uklanja 0 elemenata, dodaje element koji je naveden
console.log(emails); // provera - šta je sada u nizu
emails.splice(1, 0, "sima@g.com", "juca@g.com", "maca@g.com"); // po;ev od poyicije sa indeksom 1, uklanja 0, dodaje 3 elementa
console.log(emails); // provera
2. deo - slika table sa časa:
Svojstvo length
Svi nizovi imaju svojstvo length koje predstavlja broj elemenata niza
Svojstvo length niza se automatski ažurira prilikom dodavanja ili uklanjanja elemenata iz niza.
var niz2 = new Array();
let x = niz2.length;
console.log(x); // ispisuje 0
let niz3 = new Array(5);
let y = niz3.length;
console.log(y); // ispisuje 5
let niz4 = new Array();
niz[5] = 10;
let z = niz4.length;
console.log(z); // ispisuje 6 (ima 5 nedefinisanih elemenata i jedan koji je definisan)
let niz5 = new Array();
niz5[10] = 20;
z = niz5.length;
console.log(z); // ispisuje 11 (10 nedefinisanih i 1 definisan element niza)
// ovo je kraj prve skripte - nastavlja se sa kombinovanjem HTMl koda i JavaScript skripti
3. deo - slika table sa časa:
FOR petlja
Pristup elementima niza može da se vrši pomoću for petlje, na isti način kao i u drugim programskim jezicima
U našem primeru, prvo dodajemo div deo sa samo jednim paragrafom:
<div id = "d">
<p> ispis elemenata niza </p>
</div>
<script>
let sport = ["fudbal", "košarka", "rukomet", "odbojka"];
let div = document.getElementById("d");
for(let i = 0; i < sport.length; i++)
{
div.innerHTML += (" <br> " + sport[i]);
}
<script>
- Ovde je prvo kreiran niz sport sa 4 elementa.
- Zatim je kreirana lokalna promenljiva div u koju je smešten ceo div sa id="d".
- kroz petlju se u div nadodaje ono što je u zagradama (prelazak u naredni red i sledeći element niza sport)
- for petlja ide od indeksa 0 do indeksa sport.length-1
Ovaj pristup je dobar ako smo sigurni da su svi elementi u nizu definisani ! (tj. ako nema nedefinisanih elemenata u nizu).
Šta ako nisu svi elementi niza definisani (ili nismo sigurni u to) ?
2. način pisanja for petlje: (potrebno nam je za kasnije)
for(let i in sport) {
// radi sa sport[i]
}
Metoda join()
- konvertuje sve elemente niza u stringove i nadovezuje ih.
- ako se ne postavi ništa u zagrade, elementi niza će biti razdvojeni zarezom
- ako se postavi neki string ili slovo u zagrade kao argument, onda će to biti separator između pojedinih elemenata niza
<p id="j"> metodom join() nad nizom sport dobijamo: </p>
<script>
document.getElementById("j").innerHTML += (" <br> " + sport.join());
</script>
<p id="3"> Metodom join("#") nad nizom sport dobijamo: </p>
<script>
document.getElementById("3").innerHTML += ( " <br> " + sport.join("#");
</script>
U ovom delu se radi sledeće:
- postavlja se paragraf sa id="j"
- u taj paragraf se nadovezuje (sa prelaskom u naredni red) ono što se dobije sa sport.join()
- - elementi niza razdvojeni zarezima
- zatim se postavlja još jedan paragraf (sa id="3")
- u njega se dodaje ono što se dobije sa sport.join("#")
- elementi niza razdvojeni znakom #
4. deo - slika table sa časa:
Metoda reverse()
- obrće redosled elemenata niza
<p id="o"> obrćemo niz sportova: </p>
<script>
sport.reverse();
document.getElementById("o").innerHTML += sport.join();
</script>
Ovde se obrće redosled elemenata niza, pa se pomoću metode join() ispisuju svi elementi niya redom - u nastavku paragrafa !
Metoda sort()
- služi za sortiranje niza
- ako se ne navedu nikakvi argumenti u zagradama, tada se sortiranje vrši po abecednom redu
<p id="s"> sortiramo niz sportova: </p>
<script>
sport.sort();
document.getElementById("s").innerHTML += sport.join();
</script>
- nakon poziva ove metode, niz ostaje sortiran.
5. deo - slika table sa časa:
Metoda slice()
- vraća podniz navedenog niza
- ako se navede samo jedan argument, to znači od kojeg indeksa pa sve do kraja
- Ako je argument negativan on predstavlja element niza na određenoj poziciji u odnosu na poslednji element niza.
- Ako se navedu dva argumenta, to znači odakle se počinje i koliko elemenata niza sa uzima
<p id="deo1"> deo sportova - prva dva su: </p>
<script>
let prvaDva = sport.slice(0,2);
document.getElementById("deo1").innerHTML += prvaDva.join();
</script>
<p id="deo2"> jedna verzija OD NAZAD: </p>
<script>
let x3 = sport.slice(-2);
document.getElementById("deo2").innerHTML += x3.join();
</script>
.fajl/prezentacija sa nekim objašnjenjima metoda koje su do sada korišćene :