JS snippets razno (tips & tricks)

Pozajmljivanje metode iz drugog objekta

Metode call, apply i bind se koriste da definišu značenje rezervisane reči this, medjutim to nam takodje omogućava da sa promenom značenja “this” objekat može da “pozajmi” metodu drugog objekata, kao u sledećem primeru:

objekat1 = {
    name:'Pera',
    greet:function(){
        alert('Zdravo, '+this.name)
    }
};
objekat2 = {
    name:'Mika'
};
objekat1.greet.call(objekat2); // Vraca: Zdravo Mika

objekat1 = {

name:'Pera',

greet:function(){

alert('Zdravo, '+this.name)

}

};

objekat2 = {

name:'Mika'

};

objekat1.greet.call(objekat2); // Vraca: Zdravo Mika

Čest je slučaj da se pozamljuje neka od metoda Array-a koji su ugradjenih u njegov prototype objekat.

Array.prototype.slice.call (nekiObjekat);

1	Array.prototype.slice.call (nekiObjekat);

Na ovaj način smo pozajmili Array-ovu metodu slice nekom objektu.

Konvertovanje array like objekata u niz

U JavaScript-u se javljaju “array-like” objekti, koji liče na nizove ali nisu nizovi (npr. NodeList). Takvi objekti nemaju sve metode koje ima standardni niz npr. slice, concat, sort, reduce, map, filter… Takodje može da se javi potreba da prebacimo objekat arguments koji čuva u sebi argumente funkcije u niz ili čak da prebacimo string u niz. Konvertovanje “array like” objekata u standardni niz, možemo uraditi na više načina:

“Array-like” objekat možemo lako da konvertujemo u niz sa metodom slice(). Ali metoda slice() nije dostupna, stoga moramo da koristimo metodu call() da bi “pozajmili” metodu slice() od nizova. Pa bi krajnji izraz izgledao ovako:

Array.prototype.slice.call (arrayLike)

// Često se vidja identična funcionalnost ali kraće napisana:
[].slice.call(arrayLike)

Array.prototype.slice.call (arrayLike)

// Često se vidja identična funcionalnost ali kraće napisana:

[].slice.call(arrayLike)

Ukoliko ima dosta manipulacije sa DOM-om i arrayLike objektima, dobro je napraviti funkciju, i pozivati je kad god je potrebno:

function napraviNiz (arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}

//Primer:
var checkBoxObject = document.querySelectorAll('input');
var checked = napraviNiz(checkBoxObject);
checked.forEach(function(arrayItem) {
    console.log(arrayItem.value);
});

function napraviNiz (arrayLike) {

return Array.prototype.slice.call(arrayLike);

}

//Primer:

var checkBoxObject = document.querySelectorAll('input');

var checked = napraviNiz(checkBoxObject);

checked.forEach(function(arrayItem) {

console.log(arrayItem.value);

});

Koristeći funkciju from() koja lako konvertuje sve array-like elemente u standardni niz

Array.from(arrayLike, [nekaMapFunkcija, [thisArg]])

1	Array.from(arrayLike, [nekaMapFunkcija, [thisArg]])

arrayLike – naziv elementa koji treba da se prebaci u niz
nekaMapFunkcija – Opciona Map funkcija koja moze da se pozove za svaki element niza
thisArg – vrednost na koju će da ukazuje ključna reč this u okviru map funkcije

var konvertovanNiz = [...arrayLike];

1	var konvertovanNiz = [...arrayLike];

Koristeći jQuery.makeArray() funkciju jednostavno prebacujemo array-like
objekte u niz:

$.makeArray(arrayLike);

1	$.makeArray(arrayLike);

Provera promenjive sa “!!” operatorom

Ukoliko se javi potreba da se proveri da li neka promenjiva postoji i da li ima validnu vrednost, najlakši način je koristiti izraz !!variable. Ovaj izraz automatski prebacuje u boolean-ovu vrednost, a ukoliko je vrednost promenjive undefined, “”, 0, null, or NaN vraća FALSE u suprotnom vraća TRUE. Isti efekat se dobija korišćenjem funkcije Boolean(el).

Primer

function Racun(kes) {
  this.kes = kes;
  this.imaPare = !!kes;  // Isti efekat  this.imaPare = Boolean(kes);
}
var nekiRacun = new Racun(100.50);
console.log(nekiRacun.kes); // 100.50
console.log(nekiRacun.imaPare); // Vraca: TRUE

var emptyRacun = new Racun(0);
console.log(emptyRacun.kes); // 0
console.log(emptyRacun.imaPare); // Vraca: FALSE

function Racun(kes) {

this.kes = kes;

this.imaPare = !!kes; // Isti efekat this.imaPare = Boolean(kes);

}

var nekiRacun = new Racun(100.50);

console.log(nekiRacun.kes); // 100.50

console.log(nekiRacun.imaPare); // Vraca: TRUE

var emptyRacun = new Racun(0);

console.log(emptyRacun.kes); // 0

console.log(emptyRacun.imaPare); // Vraca: FALSE

Sakrivanje slika sa greškom

Targetovanje slika sa greškom je moguće zahvaljujući tome što browser okida error dogadjaj kada ne može da nadje sliku.

$("img").error(function(){
        $(this).hide();
});

$("img").error(function(){

$(this).hide();

});

Sticky header

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

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

Scroll to the top

HTML

<button id="top">na vrh</button>

1	<button id="top">na vrh</button>

JavaScript

$("#top").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

$("#top").click(function() {

$("html, body").animate({ scrollTop: 0 }, "slow");

return false;

});

Autorastuća textarea

See the Pen Autorastuća text area by Web programiranje (@chos) on CodePen.

Detekcija Browser-a

function BrowserDetection() {
 // Provera da li je IE
 if (navigator.userAgent.search("MSIE") >= 0) {
   // Ovde ide kondicionalni kod za IE
 }
 // Provera da li je Chrome
 else if (navigator.userAgent.search("Chrome") >= 0) {
   // Ovde ide kondicionalni kod za Chrome
 }
 // Provera da li je Firefox
 else if (navigator.userAgent.search("Firefox") >= 0) {
   // Ovde ide kondicionalni kod za Firefox Code here
 }
 // Provera da li je Safari
 else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
   // Ovde ide kondicionalni kod za Safari
 }
 // Provera da li je Opera
 else if (navigator.userAgent.search("Opera") >= 0) {
   // Ovde ide kondicionalni kod za Opera
 }
}

function BrowserDetection() {

// Provera da li je IE

if (navigator.userAgent.search("MSIE") >= 0) {

// Ovde ide kondicionalni kod za IE

}

// Provera da li je Chrome

else if (navigator.userAgent.search("Chrome") >= 0) {

// Ovde ide kondicionalni kod za Chrome

}

// Provera da li je Firefox

else if (navigator.userAgent.search("Firefox") >= 0) {

// Ovde ide kondicionalni kod za Firefox Code here

}

// Provera da li je Safari

else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {

// Ovde ide kondicionalni kod za Safari

}

// Provera da li je Opera

else if (navigator.userAgent.search("Opera") >= 0) {

// Ovde ide kondicionalni kod za Opera

}

function fadeOut(el, duration) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 1;
    (function fade() { (s.opacity -= step) < 0 ? s.display = "none" : setTimeout(fade, 25); })();
}

function fadeIn(el, duration, displayType) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 0;
    s.display = displayType || "block";
    (function fade() { (s.opacity = parseFloat(s.opacity)+step) > 1 ? s.opacity = 1 : setTimeout(fade, 25); })();
}

function fadeOut(el, duration) {

var s = el.style, step = 25/(duration || 300);

s.opacity = s.opacity || 1;

(function fade() { (s.opacity -= step) < 0 ? s.display = "none" : setTimeout(fade, 25); })();

}

function fadeIn(el, duration, displayType) {

var s = el.style, step = 25/(duration || 300);

s.opacity = s.opacity || 0;

s.display = displayType || "block";

(function fade() { (s.opacity = parseFloat(s.opacity)+step) > 1 ? s.opacity = 1 : setTimeout(fade, 25); })();

}

Primer

See the Pen FadeOut/FadeIn efekat by Web programiranje (@chos) on CodePen.

$("selector").fadeOut(duration)
$("selector").fadeIn(duration)

1 2	$("selector").fadeOut(duration) $("selector").fadeIn(duration)

Primer

See the Pen Fadeout/Fadein jQuery by Web programiranje (@chos) on CodePen.

Zamena dela teksta u string-u

Zamena dela teksta u string-u se vrši sa string metodom replace(). Ova metoda vraća novi string sa zamenjenim delovima:

nekiString.replace(regex|deoZaZamenu, novaReč|function)

1	nekiString.replace(regex\|deoZaZamenu, novaReč\|function)

regex je ili literal ili RegExp konstruktor koji kreira regular expression patern. Najčešći flags koji se koriste su:

g – globalno nalazi sva poklapanja (ukoliko ga nema pretraga staje kad nadje prvo poklapanje!)
i – ignoriše veličinu slova

Primer

var str = 'Apples are round, and apples are juicy.';
var newstr = str.replace(/apples/gi, 'oranges');
console.log(newstr); // Vraca: "oranges are round, and oranges are juicy."

var str = 'Apples are round, and apples are juicy.';

var newstr = str.replace(/apples/gi, 'oranges');

console.log(newstr); // Vraca: "oranges are round, and oranges are juicy."

Pretraga string-a

Metoda String.prototype.indexOf() vraća index od prvog nadjenog stringa unutar string-a, opcioni drugi atribut definiše index od koga treba započeti pretragu.

nekiString.indexOf(searchValue[, fromIndex])

1	nekiString.indexOf(searchValue[, fromIndex])

Ukoliko ne nedje traženi string metoda vraća vrednost -1. Obratiti pažnju na činjenicu da je ova funkcija case sensitive.. Više o ovoj metodi pogledajte u dokumentaciji na stranici MDN developer.mozilla

var nekiString ="Dobar programer";
console.log(nekiString.indexOf('programer')); // Vraća: 6
console.log(nekiString.indexOf('Programer')); // Vraća: -1
console.log(nekiString.indexOf('r')); // Vraća: 4

var nekiString ="Dobar programer";

console.log(nekiString.indexOf('programer')); // Vraća: 6

console.log(nekiString.indexOf('Programer')); // Vraća: -1

console.log(nekiString.indexOf('r')); // Vraća: 4

Ukoliko se u metodi indexOf() koriste dva atributa onda drugi atribut definiše od kog index-a da se počne pretraga.

Primer

function pretraziString(element, string) {
    var nadjeniClanovi = [];
    var brojac = 0;
    var indexNadjenog = string.indexOf(element);
    while (indexNadjenog != -1) {
        brojac++;
        nadjeniClanovi.push(indexNadjenog);
        indexNadjenog = string.indexOf(element, indexNadjenog + 1); //Napomena: drugi atribut definiše od kog index-a da se počne pretraga
    }
    console.log("Element se pojavljije " + brojac + " puta, na mestima sa index-om ", nadjeniClanovi);
}

var str = 'Ovo je neki string';
pretraziString ("e", str); // Vraca: "Element se pojavljije 2 puta, na mestima sa index-om " [5, 8]

function pretraziString(element, string) {

var nadjeniClanovi = [];

var brojac = 0;

var indexNadjenog = string.indexOf(element);

while (indexNadjenog != -1) {

brojac++;

nadjeniClanovi.push(indexNadjenog);

indexNadjenog = string.indexOf(element, indexNadjenog + 1); //Napomena: drugi atribut definiše od kog index-a da se počne pretraga

}

console.log("Element se pojavljije " + brojac + " puta, na mestima sa index-om ", nadjeniClanovi);

}

var str = 'Ovo je neki string';

pretraziString ("e", str); // Vraca: "Element se pojavljije 2 puta, na mestima sa index-om " [5, 8]

Primer: filtriranje liste

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

Brojanje reči u tekstu

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

Zaokruživanje decimalnog broja

JavaScript ima veoma čudan pristup decimalnim brojevima:

x= 0.1*0.2;
console.log(x);  //Vraća: 0.020000000000000004

1 2	x= 0.1*0.2; console.log(x); //Vraća: 0.020000000000000004

Zbog ovakvih neželjenih rezultata je potrebno zaokružiti broj.

Ova funkcija je najsličnija zakruživanju iz škole.

Defaultno ponašanje

Po default-u ova metoda zaokružuje na najbliži ceo broj:

Math.round( 20.49); //  20
Math.round(1.532); // 2
Math.round(1.235); // 1
Math.round(27.94); // 28
Math.round(0.0005); // 0

Math.round( 20.49); // 20

Math.round(1.532); // 2

Math.round(1.235); // 1

Math.round(27.94); // 28

Math.round(0.0005); // 0

Zakruživanje na decimalu

Ako želimo da zaokružimo na decimale potrebno je da se koristimo trikom:

Math.round(number * 100) / 100  // za zaokruživanje na dve decimale

1	Math.round(number * 100) / 100 // za zaokruživanje na dve decimale

Unapredjena verzija zaokruživanje na decimale

Za zakoruživanje na decimalu treba koristi narednu funkciju koja prihvata kao argumente broj za zaokruživanje i broj decimala na koje želimo da zaokružimo.

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
console.log(round(1.55505, 2)); // Vraca: 1.56

function round(value, decimals) {

return Number(Math.round(value+'e'+decimals)+'e-'+decimals);

}

console.log(round(1.55505, 2)); // Vraca: 1.56

Medjutim i ovaj način ima manu za slučaj:

console.log(round(0.00005, 2));   //Vraća: 0

1	console.log(round(0.00005, 2)); //Vraća: 0

Ova metoda vraća prvi manji ceo broj od ponudjenog broja

Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46
Math.floor(-45.95); // -46

Math.floor( 45.95); // 45

Math.floor( 45.05); // 45

Math.floor( 4 ); // 4

Math.floor(-45.05); // -46

Math.floor(-45.95); // -46

Ova metoda vraća prvi veći ceo broj od ponudjenog broja:

Math.ceil( 45.95); //  46
Math.ceil( 45.05); //  46
Math.ceil(  4   ); //   4
Math.ceil(  7.05); //   8
Math.ceil(-45.05); // -45
Math.ceil(-45.95); // -45

Math.ceil( 45.95); // 46

Math.ceil( 45.05); // 46

Math.ceil( 4 ); // 4

Math.ceil( 7.05); // 8

Math.ceil(-45.05); // -45

Math.ceil(-45.95); // -45

Ova metoda vraća ceo broj tako što ukloni decimale:

Math.trunc(13.37);    // 13
Math.trunc(42.84);    // 42
Math.trunc(0.123);    //  0
Math.trunc(-0.123);   // -0`
Math.trunc('-1.123'); // -1

Math.trunc(13.37); // 13

Math.trunc(42.84); // 42

Math.trunc(0.123); // 0

Math.trunc(-0.123); // -0`

Math.trunc('-1.123'); // -1

Generisanje random broja

function randomBroj(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

function randomBroj(min,max) {

return Math.floor(Math.random()*(max-min+1)+min);

}

Primer

randomBroj(1,100);   // Vraća: random broj u rasponu od 1 do 100

1	randomBroj(1,100); // Vraća: random broj u rasponu od 1 do 100

Ispisivanje datuma

a) Format: samo datum

var trenutniDatum = function(separator){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();

if(dd<10) {dd='0'+dd;}
if(mm<10) {mm='0'+mm;}
return (mm+separator+dd+separator+yyyy);
};
console.log(trenutniDatum('/'));  // Vraca: "07/26/2017"
console.log(trenutniDatum('-'));  // Vraca:"07-26-2017"

var trenutniDatum = function(separator){

var today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1;

var yyyy = today.getFullYear();

if(dd<10) {dd='0'+dd;}

if(mm<10) {mm='0'+mm;}

return (mm+separator+dd+separator+yyyy);

};

console.log(trenutniDatum('/')); // Vraca: "07/26/2017"

console.log(trenutniDatum('-')); // Vraca:"07-26-2017"

b) Format: datum i vreme

var date = new Date();

function stringDate(date) {
  var mm = date.getMonth()+1;
      mm = (mm<10?"0"+mm:mm);
  var dd = date.getDate();
      dd = (dd<10?"0"+dd:dd);
  var hh = date.getHours();
      hh = (hh<10?"0"+hh:hh);
  var min = date.getMinutes();
  min = (min<10?"0"+min:min);
  return mm+'/'+dd+'/'+date.getFullYear()+" "+hh+":"+min;
}

console.log(stringDate(date));  // Vraća "07/24/2017 17:15"

var date = new Date();

function stringDate(date) {

var mm = date.getMonth()+1;

mm = (mm<10?"0"+mm:mm);

var dd = date.getDate();

dd = (dd<10?"0"+dd:dd);

var hh = date.getHours();

hh = (hh<10?"0"+hh:hh);

var min = date.getMinutes();

min = (min<10?"0"+min:min);

return mm+'/'+dd+'/'+date.getFullYear()+" "+hh+":"+min;

}

console.log(stringDate(date)); // Vraća "07/24/2017 17:15"

c) Format – datum sa nazivom dana i meseca

var now = new Date();
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
}
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

document.write(today);  // Vraca: Monday, July 24, 2017

var now = new Date();

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function fourdigits(number) {

return (number < 1000) ? number + 1900 : number;

}

today = days[now.getDay()] + ", " +

months[now.getMonth()] + " " +

date + ", " +

(fourdigits(now.getYear())) ;

document.write(today); // Vraca: Monday, July 24, 2017

Da li je prestupna godina?

function jePrestupna(year) {
     return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
}

console.log(jePrestupna(2015)); // Vraća: False
console.log(jePrestupna(2016)); // Vraća: True

function jePrestupna(year) {

return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);

}

console.log(jePrestupna(2015)); // Vraća: False

console.log(jePrestupna(2016)); // Vraća: True

Prevencija višestrukog submit-a forme

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

Podelite:

Web Programiranje

Skripte

JS snippets razno (tips & tricks)

Pozajmljivanje metode iz drugog objekta

Konvertovanje array like objekata u niz

Provera promenjive sa “!!” operatorom

Primer

Sakrivanje slika sa greškom

Sticky header

Scroll to the top

HTML

JavaScript

Autorastuća textarea

Detekcija Browser-a

Efekti: fadeOut & fadeIn

Primer

Primer

Zamena dela teksta u string-u

Primer

Pretraga string-a

Primer

Primer: filtriranje liste

Brojanje reči u tekstu

Zaokruživanje decimalnog broja

Defaultno ponašanje

Zakruživanje na decimalu

Unapredjena verzija zaokruživanje na decimale

Generisanje random broja

Primer

Ispisivanje datuma

a) Format: samo datum

b) Format: datum i vreme

c) Format – datum sa nazivom dana i meseca

Da li je prestupna godina?

Prevencija višestrukog submit-a forme

Ostavite komentar