JS snippets u radu sa nizovima

Da li je ulaz niz?

Problem provere tipa podatka se zasniva na činjenici da se pri korišćenju metode toString() niz prebacuje u sledeći string: “[object Array]”.

Prečišćavanje elemenata niza

U sledećem snippet-u je prikazana funkcija koja eliminiše “nepoželjne” članove niza: null, “”, false, undefined i NaN.

Razlike u dva niza

U sledećem snippet-u prikazano rešenje nalazi sve članove niza koji se ne nalaze u oba niza.

Brisanje duplikatnih vrednosti u nizu

a) Niz primitiva

Prebacivanje niza u privremeni objekat (vrednosti niz u ključeve objekta), zatim vršiti iteracije kroz ključeve objekta sa operatorom in:

Ovaj pristup ne održava redosled i ne razlikuje broj od “broj” (1 == “1”)

Ovde se koristi metoda filter() koja uzima callback funkciju kao argument. Callback funkcija testira svaki član niza (prema nekom uslovu), i ako je uslov ispunjen ubacuje (vraća) element u novi niz. Callback funkciji se automatski prosledjuju tri parametra currentValue, index, nizDuplikata.
U našem uslovu se koristi funkcija indexOf() koja pretražuje niz i nalazi index člana niza na osnovu njegove vrednosti. Ukoliko se indeks niza dobijen korišćenjem metode nizDuplikata.indexOf(currentValue) poklapa sa trenutnim indeksom to znači da nije bilo takve vrednosti. Ukoliko postoje dve iste vrednosti u nizu, pri pretrazi sa metodom indexOf() prva vrednost će da “prodje” uslov, dok druga neće jer će vratiti indeks od prve vrednosti, što se neće poklopiti sa trenutnim indeksom.

Set je nova vrsta kolekcije podataka koja se pojavila sa ES6. Glavna karakteristika ove kolekcije je da sadži samo jedinstvene vrednosti u kolekciji.

Postupak:
Prvo se napravi set objekat koji ima jedinstvene vrednosti, zatim se sa for..of iteracijom kroz set objekat napravi niz. Ovaj postupak je mogao da se “skrati” korišćenjem ES6 metode from() koja pravi niz:

b) Niz objekata

Za razliku od primitiva koji se čuvaju prema vrednosti, objekti se čuvaju prema referenci, stoga prethodni pristupi neće dati dobre rezultate.

Za pronalaženje duplikata niza koristićemo metodu filter() koja pravi novi niz od elemenata niza koji su prošli neki test i vratili TRUE. Pri punjenju pomoćnog objekta sa parovima key/value (ključ/vrednost), svaki ključ se konvertuje u string, stoga ne možemo da razlikujemo broj 1 od string-a “1”. Ali korišćenje izraza JSON.stringify(el) nam omogućava da se ipak razlikuju. Ovaj izraz vraća različite vrednosti u zavisnosti od tipa, što se vidi na sledećem primeru:

Spajanje dva niza

Spajanje dva niza (sa duplikatima)

Spajenje dva niza u novi niz sa metodom concat() generiše novi niz. Medjutim ova metoda nije dobra kod velikih nizova jer troši resurse kreiranjem novog niza.

Metoda push() ne generiše novi niz, pa je zbog toga štedljivija po pitanju resursa u odnosu na metodu concat(), pa je ova metoda preporučena u slučaju rada sa velikim nizovima. Medjutim ovaj način ima ogranjičenje, niz koji se dodaje (u ovome slučaju array2) ne može da ima veći broj članova od maksimalnog broj parametara koje funkcija može da primi (Chrome33: 65535, Firefox27:262143, IE11: 131071, Opera12: 1048576).

ili

Napomena: Pogledajte ovde zbog čega se koristi apply() metoda u prethodnim izrazima.

Spajanje dva niza je jednostavno korišćenjem spread opteratora:

Spajanje dva niza (bez duplikata)

Pravljenje klona niza

Ukoliko želimo da napravimo novi niz koji će da zauzme novo mesto u memoriji pri čemu će da sadrži kopiju nekog niza u ovom trenutku, koristićemo sledeći snippet:

Dobijanje poslednjih članova niza

Poslednji članovi niza se dobijaju koristeći metodu slice() ali sa negativnim argumentom -1:

Pronalaženje člana niza prema vrednosti

U sledećem snippet-u se koristi metoda indexOf() koja vraća index traženog elementa koji se nalazi u nizu ili vraća vrednost -1 ako ga niz ne sadrži. Ukoliko se u metodi indexOf() koriste dva atributa onda drugi atribut definiše od kog index-a da se počne pretraga.

Primer

Uklanjanje odredjenog člana niza

Uklanjanje odredjenog člana niza izabranog prema vrednosti člana:

Pražnjenje niza

Kod ovog načina treba obratiti pažnju da se na ovaj način briše sadržaj memorije na koju referenca te promenjive ukazuje, pa ako postoji još neka promenjiva koja ima istu referencu na taj deo memorije i kod nje će doći do izmene.

Ovaj način koristimo ukoliko želimo da obrišemo članove niza ali da ne obrišemo referencu. Izraz “niz=[]” dodeljuje novi prazan niz promenjivoj i ne utiče na druge reference. Treba napomenuti da ovaj način troši memoriju jer je mesto u memoriji gde je čuvan stari niz još uvek zauzeto starim podacima o nizu.

Sortiranja

Sortiranje niza stringova

Sortiranje liste

See the Pen JS sort list by Web programiranje (@chos) on CodePen.


See the Pen Sortiranje liste jQuery by Web programiranje (@chos) on CodePen.


Sortiranje niza brojeva

Metoda sort()je inicijalno namenjena za sortiranje niza stringova, stoga pri sortiranju niza brojeva daje pogrešne rezultate.

Rešenje

Za korišćenje sa brojevima je potrebno dodati funkciju poredjenja.

js sort algoritam

js sort algoritam
js sort algoritam

js sort algoritam

js sort algoritam
js sort algoritam

js sort algoritam

Max i min element niza

Mešanje redosleda elemenata niza

Metoda sort() uzima za parametar callback funkciju koja “funkcija za poredjenje” (ili negativan broj ili nulu ili pozitivan broj), metoda sort() zna koji je broj veći, a koji je manji. Stoga ako “zeznemo” sort() metodu i vraćamo joj slučajne rezultate i ona će da vrati slučajno izmešane brojeve niza.

Ovaj način koristi Fisher–Yates algoritam:

Izvlačenje random člana niza

Prebacivanje niza u listu elemenata

Neke ugradjene funkcije u JavaScript-u npr. Math.max() ne prihvataju niz kao argument već listu. Stoga se javlja potreba da transformišemo niz u listu, a to možemo uraditi na sledeće načine:

Funkcija apply() može da prihvati niz kao argument, pa iako joj to nije glavna namena, često se koristi da “pretvori” niz u listu argumenata. Prvi argument apply() funkcije mora da bude objekat na koji ukazuje this ključna reč (ovo je primarna namena funkcije apply), a drugi je niz koji se prosledjuje callback funkciji kao lista argumenata.

Primer

U sledećem primeru funkcija Math objekta prihvata samo listu argumenata (ne i niz), pa se pre nje koristi apply():

Primer

Metodi push() je potrebno da se prosledjuje lista elemenata u vidu alrgumenata, kao na sledećem primeru:.

Medjutim ako želimo da prosledimo ceo niz, potrebno je da ka prosledimo kao listu, a za to ćemo koristi apply() metodu koja očekuje kao drugi argument listu, pa će implicitno prebaciti niz u listu:

Ovaj način zahteva korišćenje ES6 spread operator-a:


JS snippets u radu sa DOM-om

Uvod

U ovome članku sam pokušao da sakupim JavaScript isečke koda (eng. code snippets), koji mogu biti korisni u svakodnevnom radu sa DOM-om. Skoro svi snippet-i su napisani u dve verzije, koristeći samo plain JavaScript ili uz pomoć jQuery biblioteke.

js iseci koda - code snippets

Document Ready

U sledećim primerima je prikazan “event listener” koji čeka trenutak kada je DOM učitan da bi JavScript mogao sa njim da manipuliše. Isto bi se dobilo kada bi JavaScript kod stavili na kraj body-ja tj. ispred samog zatvarajućeg taga “body”.



Document Load

Dogadjaj load se “okida” tek kad se učita cela stranica sa svim CSS stilovima, slikama



Selektovanje DOM elemenata

Selektovanje preko CSS selektora

HTML

JavaScript
Izbor svih elemenata koji zadovoljavaju selektor

Primer

Izbor samo prvog elementa koji zadovoljava selektor

Ukoliko želimo da sa plain JS vratimo samo prvi element koji zadovoljava kriterijum selektora možemo da koristimo:

Sintaksa za starije browsere

Ukoliko postoji potreba da se zadovolje browseri koji su stariji od IE 11, onda je potrebno da se koriste sledeći JS selektori:

Primer

Selektovanje roditelja

HTML

JavaScript


Selektovanje sve dece

HTML

JavaScript

Naredne naredbe vraćaju niz elemenata sa svom decom izabranog selektora. U nrednim primerima je potrevon selektovati sve li elemente:


NAPOMENA:
Treba naglasiti da “childNodes” vraća kao dete elementa čak i prazan prostor izmedju HTML tagova (kao prazan text node)


Selektovanje prvog deteta

HTML

JavaScript

Ukoliko je želite prvo dete onda mogu da se koriste sledeće naredbe:


NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i prvog elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje poslednjeg deteta

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje prethodnog rodjaka

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje narednog rodjaka

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje svih rodjaka

HTML

JavaScript

U ovom primeru funkcija nadjiRodjake pravi novi niz od dece roditelja koji zadovoljavaju uslov. Dodaje elemente u niz ako ne postoji filter ili ako filter vraća neki element, sve dok postoji sledeći rodjak.

Filtriranje selektovanih elemenata

Redukovanje elemenata koji zadovoljavaju targetirani selektor ukoliko “prodju” test filtera. Test filtera može biti drugi selektor a najčešće je filter funkcija:

HTML

JavaScript

ili koristeći funkciju

Manipulacija DOM elementima

Pravljenje elementa



Dodavanje elementa kao deteta

Dodavanje novog elementa kao poslednjeg deteta kod svakog selektovanog elementa.


NAPOMENA:
Obratiti pažnju da se uz innerHTML koristi operator dodavanja i dodeljivanja “+=”, jer ako se koristi samo operator dedeljivanja “=” onda se pri menjanju DOM-a gaze svi elementi unutar elementa “roditelj” i pravi se novi modifikovani DOM, a ako postoje Event handlers koji su bili zakačeni za “stari DOM”, sada NE POSTOJE!

I varijanta

II varijanta:

Kloniranje elementa

Ukoliko je parametar “true” pravi se “deep copy” tj. kopija sa svim atributima i “child” elementima, dok ako se izabere “false” kopira se bez “child” elemenata.


Dodavanje pre elementa

Ako je referenceNode null onda se ubacuje na kraju liste svih childNodes (isto kao appendChild).

Primer dodavanja elementa u listu

Dodavanje posle elementa

Iako u JavaScript-u postoji insertBefore, medjutim NE POSTOJI insertAfter, stoga je potrebno da se pribegne “lukavstvu”:

Primer dodavanja elementa u listu

Brisanje elementa


Brise SVE span elemente

Brise samo span elemente sa ID=”izabrani”

Brisanje sve dece elementa



Obavijanje elementa sa elementom

HTML

JavaScript


Rezultat

Zamena elementa drugim

HTML

JavaScript

Primer

Provera da li postoji selektor (is)


Primer

U narednim snippet-ima se dobija booleanova vrednost, stoga ako je odgovor “true” onda su jednaki selektori. Uglavnom se koristi uz “if”.

Rad sa sadržajem DOM-a

Dobijanje sadržaja (teksta) unutar elementa

Naredni snippet-i vraćaju tekst odredjenog elementa:



Ubacivanje ili zamena sadržaja (teksta) unutar elementa

Naredni snippet-i menjaju postojeći tekst sa novim:



outerHTML elementa

HTML

JavaScript

Za HTML prezentaciju selektovanog elementa koristimo:


Jedan od retkih slučajeva kada jQuery nema direktnu metodu za neki problem a Plain JS ga ima, stoga se rešava zaobilazno (u “privremenom div elementu klonira naš element).

Vrednost unutar “input” ili “textarea”

Primer

JavaScript

Primer

JavaScript

Radio unput

HTML

JavaScript

Select

HTML

JavaScript

Rad sa HTML atributima

Dobijanje vrednosti HTML atributa

NAPOMENA:
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
HTML

Ostalim atributima koji nemaju svoju “ličnu” metodu možemo pristupiti na sledeći način:



Dobijanje vrednosti DATA atributa

Moram napomenuti da se ovaj podatak se može dobiti lako i prethodnim načinom kao običan HTML atribut.

NAPOMENA:
Ne koristiti velika slova u nazivima data atributa već koristiti crtice izmedju!

HTML

JavaScript

NAPOMENA:
Pri pozivanju u sklopu “dataset” syntax-e koristiti camelCase!


Setovanje vrednosti atributa

NAPOMENA:
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
HTML

JavaScript


NAPOMENA:
Dodati atributi se ne vide fizički u DOM-u, nego su sačuvani u memoriji.

Provera da li elemenat ima klasu

NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10


Dodavanje klase elementu

NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10


Uklanjanje klase

NAPOMENA:
Ovaj objekat classList nije podržan kod IE za verzije manje od IE10


Naizmenično dodavanje i brisanje klase (togle)

HTML

JavaScript
Bez toggle()

See the Pen Toogle plainJS by Web programiranje (@chos) on CodePen.

Sa togle()

NAPOMENA:
Ova metoda nije podržana u IE (pogledajte tabelu kompatibilnosti ovde)

Primer

Mix

Ili mix prethodna dva primera

See the Pen EvaKoN by Web programiranje (@chos) on CodePen.


Primer

Styling elementa

Dobijanje svojstava elementa

Pošto “getComputedStyle()” metoda vraća vrednosti svih svojstava u vidu “CSSStyleDeclaration” objekata, potrebno je koristi još i metodu getPropertyValue:

Primer

Primer

Definisanje CSS svojstava elementu

Definisanje jednog svojstva

Primer

Definisanje više svojstava odjednom

Primer

Definisanje vrednosti svojstva

Definisanje više svojstava odjednom

Show, hide i toggle

NAPOMENA:
Metode show() i toggle() zahtevaju i drugi atribut koji može biti: “block”, “flex” “inline-block”, “inline” …

Primer

NAPOMENA:
Sve tri metode imaju “ugradjenu” animaciju. Ukoliko želimo animaciju dovoljno je da prosledimo atribut funkciji koji definiše dužinu trajanja animacije. Sa ovim metodama se animira width, height, i opacity simultano. Takodje je moguće sa drugim atributom promeniti defaultni tip animacije “swing”.

Primer

Pozicija elementa

Visina i širina elementa

Box sa padding-om i border-om

Slično može da se dobije sa getBoundingClientRect() metodom (podržana >=IE9)

Box sa podding-om, borderom i marginom

Box bez border-a

Box sa padding-om i border-om

Box sa podding-om, borderom i marginom

Box bez border-a

Rastojanje elementa do roditelja

Vrednost od ivice izabranog elementa do ivice prvog “ne statičnnog” roditelja (onaj koji nema svojstvo position:”static”). Posmatra se leva i gornja ivica elementa.



Rastojanje elementa do dokumenta

Primer

Slično može da se dobije sa getBoundingClientRect() metodom:

Provera vidljivosti elementa u viewport-u

Sa narednim snippet-om proveravamo dali je izabrani element ceo vidljiv u viewport-u.