JS DEV

JS DEV

JSDEV nu reprezinta doar prescurtarea de la JavaScript Developer ci si o colectie de functii JavaScript create de mine si pe care le puteti folosi in proiectele voastre. Majoritatea functiilor au putine linii de cod si din acest motiv veti intelege repede modul cum acestea functioneaza. Majoritatea functiilor vor avea parametri iar acestia reprezinta cheia eficientei si simplitatii functiilor.

SEE ALL FUNCTIONS

DOM

addComment

Functia addComment va adauga un comentariu inainte si dupa o eticheta HTML. Functia addComment va avea trei parametri. Primul va fi eticheta HTML tinta, al doilea parametru va fi un string reprezentand textul de dinaintea etichetei iar parametrul trei va fi tot un string si acesta va fi adaugat la sfarsitul etichetei HTML. Aceasta functie este foarte utila in momentele cand ai in fata un document HTML pe care vrei sa il structurezi prin comentarii si astfel il intelegi mai usor si il poti depana mai usor.

			// → SINTAX ↓
			addComment(target, text before, text after);
			// → EXAMPLE
			addComment('h1','start h1','end h1');
			addComment('.box','start box','end box');
			addComment('#dom','start dom','end dom');
		
addComment

addNodeBefore

Dupa cum ii spune si numele, functia addNodeBefore va adauga un nod inaintea unui element. Functia va avea doi sau trei parametri. Parametrul unu este reprezentat de eticheta HTML tinta si este un string, parametrul doi reprezinta elementul pe care il vom adauga inaintea elementului tinta si poate fi un string sau un array. Daca parametrul doi este un array atunci prima valoare este un string reprezentand numele etichetei HTML iar a doua valoare este un array ce va contine doua string-uri reprezentand atributul si valoarea etichetei HTML pe care o vom adauga inaintea elementului tinta. Parametrul trei este optional si acesta trebuie sa fie tot un string.

			// → SINTAX ↓
			addNodeBefore(target,string,optionalStringText);
			// → OR
			addNodeBefore(target,[nodeName,[nodeNameAttribute,nodeNameValue]],optionalStringText);
			// → EXAMPLE 1
			addNodeBefore('.box',['code',['id','code']],'/* code here */');
			addNodeBefore('#code',['tt',['class','tt']],'Your code... ');
			addNodeBefore('tt','code','...another code. ');
			// → EXAMPLE 2
			addNodeBefore('.box',['div',['class','before-box']],'Some text here.');
			// → EXAMPLE 3
			addNodeBefore('.box','div','Some text here.');
			// →
			
addNodeBefore

addNodeAfter

Functia addNodeAfter este aproape identica cu addNodeBefore iar singura diferenta este ca prima va adauga un nod dupa elementul tinta.

			// → SINTAX ↓
			addNodeAfter(target,string,optionalStringText);
			// → OR
			addNodeAfter(target,[nodeName,[nodeNameAttribute,nodeNameValue]],optionalStringText);
			// → EXAMPLE 1
			addNodeAfter('.box',['code',['id','code']],'/* code here */');
			addNodeAfter('#code',['tt',['class','tt']],'Your code... ');
			addNodeAfter('tt','code','...another code. ');
			// → EXAMPLE 2
			addNodeAfter('.box',['div',['class','before-box']],'Some text here.');
			// → EXAMPLE 3
			addNodeAfter('.box','div','Some text here.');
			// →
		
addNodeAfter

animateLetters

Functia animateLetters este o functie foarte folositoare daca vreti sa adaugati diferite efecte pe text, scopul pentru care v-o recomand s-o folositi. Functia va adauga o clasa CSS pe primul element tinta (eticheta HTML) si apoi va adauga o alta clasa CSS pe care o va inlatura dupa un anumit timp dat de noi, exact cum se poate vedea in urmatoarele doua exemple.

			// ↓ EXAMPLE 1
			// → CSS
			.s1{ transition: all .2s; }
			.s2{ font-size: 1.4em; }
			// → JS 
			animateLetters('h1', 'mouseenter', 's1', 's2', 200);
		
			// ↓ EXAMPLE 2					
			// → CSS
			.s3{ transition: all 1s; }
			.s4{ background: black; color: white; }
			// → JS 
			animateLetters('p', 'mouseenter', 's3', 's4', 200);
		
animateLetters

addElements

Functia addElements va adauga in DOM un element parinte ce poate avea un atribut cu o valoare. Elementul parinte va avea un element copil cu cel mai adesea un text, exact cum este aratat in urmatoarea sintaxa a functiei. Retineti ca primul parametru al functiei este elementul tinta din DOM unde vom adauga elementele noastre indiferent daca este selectat dupa o eticheta HTML, un id sau o clasa CSS, dupa cum se poate vedea in exemplele de mai jos.

			// → SINTAX ↓
			// → addElements(targetElement, [elementParentToAdd,[elementParentAttribute, attributeParentValue], elementChildToAdd], elementChildTextToAdd);
		
			addElements('body',['section', ['id','section']],'h1','Title text');
			addElements('article',['p', ['class','p']],'span','span text');
			addElements('.p',['code', ['class','code']],'tt',' tt text');
			addElements('#section',['code', ['class','code']],'tt',' tt text');
		
addElements

alwaysScrollToBottom

Functia alwaysScrollToBottom va forta un element sa fie cu bara de scroll in partea de jos in momentul cand aceasta functie ruleaza si va trebui sa ruleze ori de cate ori in elementul declarat ca singur parametru ii sunt adaugate informatii de tip text. Recomand cu tarie ca elementul tinta sa contina valoarea pe inaltime in pixeli dar si proprietatea overflow cu valoarea scroll sau hidden iar pe aceasta din urma v-o recomand.

			// → CSS TO HTML ELEMENT - ALWAYS HEIGHT PIXELS VALUE AND OVERFLOW HIDDEN OR SCROLL
			// → EXAMPLE
			#id-name{ height: 100px; overflow: hidden; }
		
			// → SINTAX ↓
			alwaysScrollToBottom(elementTarget);
			// → EXAMPLE ↓
			alwaysScrollToBottom('#id-name');
			// →
			alwaysScrollToBottom('.class-name');					
			// → ALWAYS IN THIS FORMULA
			// → setInterval(function(){ /* some code */; alwaysScrollToBottom('#id-name'); }, 1000);
		
alwaysScrollToBottom

dragAndDropElement

Functia dragAndDropElement iti ofera posibilitatea sa muti un element din pagina in alt loc si inapoi. Functia va avea doi parametri obligatorii sub forma de string. Primul parametru reprezinta elementul tinta care va fi mutat iar cel de al doilea parametru va fi elementul tinta care va primi elementul. De retinut ca cei doi parametri reprezinta si elementele tinta selectate de functie numai dupa un id si din acest motiv ambele elemente trebuie sa contina deja aceste atribute.

			// → SINTAX ↓
			// → dragAndDropElement('elementWithIdNameToMove','elementWithIdNameToRecive');
			// → EXAMPLE ↓
			dragAndDropElement('one','two');
		
dragAndDropElement

upperCaseFirstLetter

Functia upperCaseFirstLetter va avea un singur parametru iar acesta va fi reprezentat de eticheta HTML tinta caruia vrem sa ii schimbam prima litera a fiecarui cuvant din lowercase in uppercase. Ca si parametru putem folosi si un anumit element tinta dupa o clasa CSS dupa cum se poate vedea in urmatorul exemplu.

			upperCaseFirstLetter('h1');
			upperCaseFirstLetter('p');
			upperCaseFirstLetter('.numeClasaCSS');
		
upperCaseFirstLetter

openExternalLinksInNewTab

Functia openExternalLinksInNewTab va deschide orice link extern intr-un alt tab prin adaugarea atributului target cu valoarea _blank. Pentru a realiza cu succes acest lucru, functia va avea nevoie de un string, string ce este si singur parametru, care va fi numele domeniului site-ului gazda, exact ca in exemplele de mai jos.

			// → SINTAX
			openExternalLinksInNewTab(stringWithYourDomain);
			// → EXAMPLES
			openExternalLinksInNewTab('jsdev');
			openExternalLinksInNewTab('jsdev.ro');
			openExternalLinksInNewTab('arta-web');
			openExternalLinksInNewTab('arta-web.ro');
		
openExternalLinksInNewTab

showParagraphLetters

Functia showParagraphLetters va adauga din nou continutul unui paragraf, litera cu litera lasand impresia ca este tastat de cineva care scrie foarte repede. Functia showParagraphLetters poate avea zero sau maxim trei parametri. Primul parametru va fi legat de culoarea fiecarei litere, al doilea parametru este legat de o eticheta HTML, eticheta in care vrem sa adaugam fiecare litera iar aceasta eticheta nu va avea caracterele speciale specifice HTML-ului, ci doar literele si in cele din urma ultimul parametru este reprezentat de evenimentul la care sa fie declansata functia. Evenimentul de baza este evenimentul click. De retinut ca functia va fi executata doar o singura data in momentul cand pagina este incarcata.

			showParagraphLetters('#222e43', 'b', 'mouseenter');
			showParagraphLetters('rgb(200,125,36)', 'i');
			showParagraphLetters('green', 'tt');
		
showParagraphLetters

setAttributeByTagName

Functia setAttributeByTagName va adauga un atribut cu o valoare unui element copil ce se afla intr-un element parinte. Functia va avea patru parametri sub forma de string. Primul este reprezentat de elementul parinte tinta, al doilea parametru este reprezentat de elementul copil tinta si la acesta trebuie sa ii dam valoare ce in DOM este dupa tagName (numele etichetei scris cu litera mare), parametrul trei este reprezentat de atribut si in cele din urma parametrul patru este reprezentat de valoarea atributului.

					
			// → SINTAX ↓
			setAttributeByTagName(parentNodeElementTarget, childNodeElementTarget, attribute, value);
			// → EXAMPLE ↓
			setAttributeByTagName('.box','A','target','_blank');
			// → 
			setAttributeByTagName('.box','H2','class','preview');
		
setAttributeByTagName

changeLettrersColor

Functia changeLettrersColor va schimba culoarea fiecarei litere dintr-o eticheta HTML ce contine text. Functia va avea cinci parametri si primi trei sunt reprezentati de string-uri sub forma de culori, exact ca in urmatoarele exemple. Parametru patru este reprezentat de eticheta HTML tinta iar parametrul cinci va fi reprezentat de evenimentul la care sa fie declansata functia. Default acesta este click. De retinut ca functia va fi executata doar o singura data cand pagina este incarcata.

			changeLettrersColor('#fff', 'aqua', '#109ea1', 'p', 'click');
			changeLettrersColor('#fff', 'aqua', '#109ea1', 'h2', 'mouseenter');
			changeLettrersColor('#fff', 'aqua', '#109ea1', 'h2', 'mouseenter');
		
changeLettrersColor

styleEveryWord

Functia styleEveryWord va adauga o clasa CSS pe fiecare cuvant dintr-o eticheta HTML. Functia styleEveryWord va fi executata o singura data cand pagina este incarcata. Functia va avea doi sau trei parametri obligatorii. Parametrul unu va fi reprezentat de elementul tinta din pagina, parametrul doi va fi reprezentat de numele clasei CSS pe care sa o foloseasca iar parametrul trei este reprezentat de evenimentul la care aceasta functie sa fie declansata. Parametrul trei este optional si in cazul in care acesta lipseste, evenimentul de baza este evenimentul click. Functia styleEveryWord face doar o parte din toata treaba iar restul este reprezentat de asa zisele evenimente din limbajul CSS cu singurul scop de a nu bloca motorul JavaScript pe aceasta functie in momentul cand eticheta HTML contine foarte mult text.

			// → CSS EXAMPLE CLASS
			.styleEveryWord:hover{ font-style: italic; font-weight: bold; cursor: pointer; }
		
			// → SINTAX
			styleEveryWord(targetElement, cssClassName, eventToTrigger);
			// → EXAMPLE
			styleEveryWord('p','styleEveryWord','mouseenter');
		
styleEveryWord

detectBrowserLanguageAndGoTo

Functia detectBrowserLanguageAndGoTo va detecta limba pe care utilizatorul o are setata in browser si in functie de ce limba are setata noi il putem redirectiona automat in pagina unde textul este tradus in limba lui. Este indicat ca aceasta functie sa ruleze doar in pagina radacina a site-ului, in caz contrar utilizatorul va fi redirectionat in permanenta catre pagina setata de catre noi. Functia detectBrowserLanguageAndGoTo va avea doi parametri obligatorii iar acestia vor fi reprezentati de doua array-uri. In aceste array-uri vom adauga limba detectata si url-ul catre pagina tinta iar acestea vor fi obligatoriu in aceeasi ordine, exact ca in exemplul urmator.

			// → SINTAX
			detectBrowserLanguageAndGoTo(arrayWithLanguage, arrayWithPageDestination);
			// → EXAMPLE
			detectBrowserLanguageAndGoTo(['en-US', 'ro'],['http://www.jsdev.ro/en/','http://www.jsdev.ro']);
		
detectBrowserLanguageAndGoTo

removeOneByOne

Functia removeOneByOne va inlatura unul cate unul elementele din pagina (mai exact din DOM) la un anumit eveniment ales de noi. Functia va avea obligatoriu doi parametri. Primul este reprezentat de toate etichetele HTML tinta si cel de al doilea element va fi reprezentat de evenimentul la care vrem sa fie declansata functia.

			removeOneByOne('p', 'click');
			// → 
			//removeOneByOne('.cssClassName', 'click');
			// → 
		
removeOneByOne

hideAllThisTags

Asa cum sugereaza si numele functiei, functia hideAllThisTags va ascunde toate etichetele html prezentate in singurul parametru al functiei. Desi elementele nu se vor mai vedea in fereastra browser-ului si nu vor mai ocupa spatiu, acestea vor fi in continuare prezente in DOM. Pentru ca functia sa poata rula va avea nevoie de clasa CSS de mai jos, clasa CSS pe care o va adauga fiecarei eticheta HTML prezentata ca parametru.

			// → CSS CLASS TO USE
			.dn{ display: none; }
		
			hideAllThisTags('section');
			// →
			hideAllThisTags('article');
			// →
			hideAllThisTags('h1');
			// →
			hideAllThisTags('.cssClassName');
		
hideAllThisTags

showAllThisTags

Functia showAllThisTags este opusul functiei hideAllThisTags si va inlatura aceeasi clasa CSS prin care am ascuns etichetele HTML din pagina.

			// → THIS CSS CLASS WILL REMOVE
			.dn{ display: none; }
		
			showAllThisTags('section');
			// →
			showAllThisTags('article');
			// →
			showAllThisTags('h1');
			// →
			showAllThisTags('.cssClassName');
		
showAllThisTags

removeAllThisTags

Functia removeAllThisTags va inlatura din fereastra browser-ului si din DOM toate etichetele HTML care sunt prezentate in singurul parametru al functiei, exact ca in urmatoarele exemple.

			removeAllThisTags('p');
			// →
			removeAllThisTags('span');
			// →
			removeAllThisTags('tt');
			// →
			removeAllThisTags('h2');
			// →
		
removeAllThisTags

removeAllThisTagsIf

Functia removeAllThisTagsIf va inlatura din DOM toate etichetele HTML ce contin numele clasei CSS declarata ca prim parametru al functiei (cu caracterul punct inainte) si care contine unul sau mai multe etichete HTML copil ce vor ocupa spatiu in pagina prin diferite proprietatii CSS. Utilitatea acestei functii devine in momentul cand etichetele HTML nu contin nimic dar vor contine in viitor diferite informatii si in acel moment functia removeAllThisTagsIf nu va mai ascunde elementul pentru ca a depasit valoarea numerica declarata in cel de al doilea parametru al functiei. Valoarea numerica este folosita de functie cu scopul de a gasi toate etichetele ce contin clasa CSS tinta (elementul parinte este recomandat) si va inlatura toate etichetele ce au un numar mai mic sau egal cu valoarea numerica. Asadar atentie cum folositi functia.

			// → SINTAX ↓
			removeAllThisTagsIf('.cssClassName', number);
			// → 
			removeAllThisTagsIf('.box', 184);
		
removeAllThisTagsIf

nextSiblingContent

Functia nextSiblingContent va returna un string cu continutul urmatorului element pe care il gaseste, element ce se gaseste in acel element parinte si la acelasi nivel.

			nextSiblingContent('#box')
			// → string
			nextSiblingContent('.box')
			// → string
			nextSiblingContent('h1')
			// → string
			nextSiblingContent('strong')
		
nextSiblingContent

nextSibling

Functia nextSibling este aproape identica cu nextSiblingContent iar diferenta este ca prima va returna intreg obiectul urmator, obiect nod din DOM pe acelasi nivel ca si elementul declarat in singurul parametru al functiei.

			nextSibling('#box')
			// → DOM NODE
			nextSibling('.box')
			// → DOM NODE
			nextSibling('h1')
			// → DOM NODE
			nextSibling('strong')
		
nextSibling

removeAllSibling

Functia removeAllSibling va avea un singur parametru, parametru tinta si va inlatura toate elementele care se afla la acelasi nivel cu elementul nod (eticheta HTML) declarat ca parametru al functiei. Dupa cum spune si numele functiei, aceasta va pastra in elementul parinte singurul element care se afla ca parametru al functiei.

			removeAllSibling(elementNodeToKeep);
			// →
			removeAllSibling('#id-element-node');
			// →
			removeAllSibling('.first-class-element-node');
			// →
		
removeAllSibling

createCircle

Functia createCircle va adauga un element HTML in pagina pe lateralele pagini. Elementul este animat cu scopul de a se mari si pierde din opacitate si cand ajunge la o scara de 300% sau cand animatia din CSS s-a terminat, functia createCircle va inlatura din DOM elementul respectiv. Efectul este doar vizual si foarte frumos. Va recomand sa faceti mici cerculete cu mouse-ul.

			// → CSS CLASS
			.circle{ width: 50px; height: 50px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 999999; }
			@keyframes circle{ to{ transform: scale(3); opacity: 0; } }
		
			// → 
			window.addEventListener('mousemove', createCircle);
		
createCircle

stopWatch

Functia stopWatch va avea obligatoriu trei parametri si va adauga in pagina un cronometru descrescator reprezentand secunde si optional minute pana cand o functie callback sau declarata in alta parte va fi executata. Primul parametru este reprezentat de elementul HTML unde functia va adauga timpul ramas. Parametrul doi este un array cu valori numerice si daca array-ul contine doar o singura valoare numerica, functia stopWatch va interpreta ca este vorba doar despre numarul de secunde, daca array-ul contine doua valori numerice atunci prima valoare numerica este interpretata ca fiind valoarea pentru minute iar cea de a doua valoare numerica este interpretata ca fiind valoarea pentru numarul de secunde. Parametrul trei al functiei stopWatch este reprezentat de catre o functie callback sau o functie declarata in alta parte si in acest caz va trebui sa scrieti doar numele functiei ce va fi executata in momentul cand functia stopWatch a ajuns la final cu cronometrul.

			// → SINTAX ↓
			stopWatch(target, [numberThatRepresentSeconds], callback });
			// → OR
			stopWatch(target, [numberThatRepresentMinutes, numberThatRepresentSeconds], callback });
			// → EXAMPLE
			stopWatch('#time', [15], function callback(){ alert('Done.') });
			stopWatch('.time', [2,15], function callback(){ alert('Done.') });
			stopWatch('#time', [1,15], function callback(){ alert('Done.') });
			stopWatch('.time', [1,15], function callback(){ alert('Done.') });
		
stopWatch

addIdAttribute

Dupa cum spune si numele functiei, functia addIdAttribute va adauga un id pe toate etichetele HTML din pagina declarate in singurul parametru al functiei. Functia va lua continutul text din fiecare eticheta si o va folosi ca valoare pentru fiecare id. Va recomand sa folositi aceasta functie pe etichete HTML ce nu contin deja atributul id si pe titluri de nivel 2 sau 3 (h2, h3). Folosirea functiei pe aceste titluri de nivel 2 si/sau 3 este foarte utila cand vreti sa navigati in pagina dupa un id.

			// → SINTAX ↓
			addIdAttribute(elementNode);
			// → EXAMPLE
			addIdAttribute('.box');
			// →
			addIdAttribute('h2');
		
addIdAttribute

addIdAttributeToParent

Functia addIdAttributeToParent este aproape identica cu addIdAttribute iar singura diferenta este ca adauga atributul id elementului parinte.

			// → SINTAX ↓
			addIdAttributeToParent(elementNode);
			// → EXAMPLE
			addIdAttributeToParent('.box');
			// →
			addIdAttributeToParent('h2');
		
addIdAttributeToParent

getDayName

Functia getDayName va returna un string cu numele zilei in care suntem astazi.

			getDayName();
			// →
		
getDayName

runCallbackOnAll

Functia runCallbackOnAll va executa o functie pe toate elementele tinta din pagina in momentul cand este declansat un eveniment dat de noi. Functia va avea trei parametri. Primul va fi reprezentat de eticheta HTML tinta, al doilea parametru este reprezentat de evenimentul la care functia sa fie executata si in cele din urma parametrul trei este reprezentat de o functie, functie ce poate fi sub forma unei functii anonime sau o functie scrisa in alta parte de cod si in acest caz ii putem scrie doar numele acesteia.

			// → SINTAX ↓
			runCallbackOnAll(elementTarget, event, callback)
			// →
			runCallbackOnAll('.box','click',function(){ alert(1) });
			// →
			function callback(){ this.innerHTML = 1 }
			runCallbackOnAll('p','mouseenter', callback);
		
runCallbackOnAll

runAfterPageLoad

Functia runAfterPageLoad va rula o functie in momentul cand intreg documentul a fost incarcat inclusiv fisierele externe. Functia va avea un singur parametru iar acesta poate fi o functie anonima callback sau o functie declarata in alta parte.

			// → SINTAX ↓
			runAfterPageLoad(callback);
			// → EXAMPLE
			runAfterPageLoad(function(){console.log('page loaded')});
			// →
		
runAfterPageLoad

ARRAY

splitInTwo

Functia splitInTwo va imparte continutul dintr-un array in doua array-uri mai mici pe care le va adauga in interiorul array-ului returnat. Functia va avea doi parametri. Primul va fi reprezentat de numele array-ului tinta sau un simplu array cu valori iar cel de-al doilea parametru va fi reprezentat de o valoare numerica, valoare ce va reprezenta locul de unde functia sa imparta array-ul tinta in doua array-uri mai mici. In cazul in care parametrul doi are valoarea mai mare decat lungimea array-ului prezentat ca parametrul unu, functia ii va atribui valoarea parametrului doi la lungimea parametrului unu.

			var x = [1,2,3,4,5,6,7,8,9];
			var y = splitInTwo(x,5);
			// → y = [[1,2,3,4,5], [6,7,8,9]];
			console.log(splitInTwo([1,2,3,4,5,6,7,8,9],1));
			// → [[1],[2,3,4,5,6,7,8,9]];
			console.log(splitInTwo([1,2,3,4,5,6,7,8,9],5));
			// → [[1,2,3,4,5], [6,7,8,9]];
			console.log(splitInTwo(['Inna', 'Andreea', 'Candice', 'Beatrice', 'Lili'],15));
			// → [['Inna', 'Andreea', 'Candice', 'Beatrice', 'Lili'],[]]
		
splitInTwo

onlyNumbers

Functia onlyNumbers va testa fiecare tip de valoare dintr-un array si va sterge orice valoare ce nu este numerica. Functia va returna un array cu toate valorile numerice din array-ul pe care l-a parcurs.

			var x = [1,2,3,',false,4,'cool', null, function a(){}];
			var y = onlyNumbers(x);
			// → y = [1, 2, 3, 4];
			console.log(onlyNumbers([1,2,3,',false,4,'cool', null, function a(){}]));
			// → [1, 2, 3, 4];
		
onlyNumbers

onlyStrings

Functia onlyStrings lucreaza asemanator cu functia onlyNumbers iar diferenta o face ca functia onlyStrings va returna un array cu valorile string din array-ul pe care l-a parcurs.

			var x = [1,2,3,',false,4,'cool', null, function a(){}];
			var y = onlyStrings(x);
			// → y = ["", "cool"];
			console.log(onlyStrings([1,2,3,'',false,4,'cool', null, function a(){}]));
			// → ["", "cool"];
		
onlyStrings

dropValue

Functia dropValue va avea doi parametri. Primul va fi un array sau numele unei variabile array iar cel de-al doilea va fi o valoare numerica, valoare prin care vom identifica ce valoare sa extragem din primul argument al functiei. Daca al doilea parametru al functiei nu este definit sau este mai mare decat lungimea primului argument, functia va returna intreg array-ul ce este reprezentat ca prim argument.

			var x = [1,2,3,4,5,6,7,8,9,10];
			var y = dropValue(x, 10);
			// → y = [10];
			console.log(dropValue([1,2,3,4,5,6,7,8,9,10],10));
			// → [10];
			console.log(dropValue([5,2,53,64,1,6,17,89,90,1000],10));
			// → [1000];
		
dropValue

randomValues

Functia randomValues va avea doi parametri obligatorii. Primul parametru va fi reprezentat de o valoare numerica ce va reprezenta lungimea array-ului returnat, al doilea parametru va fi reprezentat de valoarea maxima pe care o pot avea valorile din array-ul returnat.

			console.log(randomValues(5,100));
			// unul dintre exemple
			// → [69, 85, 46, 41, 18]
		
randomValues

randomValuesMinMax

Functia randomValuesMinMax functioneaza asemanator cu randomValues iar diferenta este ca functia randomValuesMinMax va avea trei parametri. Al doilea si al treilea parametru vor reprezenta valorile minime si maxime ce vor fi returnate in array.

			console.log(randomValuesMinMax(10,50,100));
			// unul din exemple
			// → [91, 98, 60, 83, 76, 92, 66, 51, 96, 78]
		
randomValuesMinMax

flattenArrays

Functia flattenArrays va uni valorile dintr-un array de array-uri intr-unul singur.

			console.log(flattenArrays([['me', 'john'],['you','candice'],['couple','yes']]));
			// → ["me", "john", "you", "candice", "couple", "yes"];
			console.log(flattenArrays([['me', 'john', 'cool man'],['you','candice', 'very hot'], ['couple','yes', 'forever']]));
			// → ["me", "john", "cool man", "you", "candice", "very hot", "couple", "yes", "forever"];
		
flattenArrays

calculate

Functia calculate va avea obligatoriu doi parametri, in caz contrar functia va returna o valoare iar aceasta va fi cifra zero. Acestia pot fi reprezentati de doua valori numerice sau de doua array-uri ce pot contine valorile numerice si sub forma de string. Parametri functiei pot fi prezenti doar sub forma unor valori numerice sau adaugate in doua array-uri, exact ca in exemplele de mai jos.

			console.log(calculate(1,2));
			// → 3
			console.log(calculate([1],[2,3]));
			// → 6
			console.log(calculate(['1'],['2',4]));
			// → 7
			console.log(calculate());
			// → 0
		
calculate

extract

Functia extract va avea obligatoriu trei parametri. Primul va fi un array sau o variabila declarata in alta parte ce este un array. Al doilea si al treilea parametru vor fi reprezentati de valori numerice, valori ce reprezinta locul de unde se vor extrage datele din array. Parametrul trei nu trebuie sa fie mai mic decat parametrul doi si nici mai mare decat lungimea array-ului. Daca totusi parametrul trei este mai mare decat lungimea array-ului, atunci parametrul trei va primi valoarea identica cu lungimea array-ului. Daca parametrul doi este mai mare decat parametrul trei, atunci functia va returna un array gol.

			console.log(extract([1,2,3,4,5,6,7,8,9,10],5,9));
			// → [6, 7, 8];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],2,8));
			// → [3,4,5,6,7];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],2,11));
			// → [3,4,5,6,7,8,9,10];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],5,2));
			// → [];
		
extract

incrementBy

Functia incrementBy va avea doi parametri obligatorii. Primul va fi array-ul tinta ce contine valorile numerice indiferent daca acestea vor fi sau nu sub forma unui string iar cel de al doilea parametru va fi valoarea cu care fiecare valoare din array va fi incrementata. Si parametrul doi poate fi prezent sub forma unui string, rezultatul va fi identic pentru ca functia incrementBy va converti valoarea string la valoare numerica.

			console.log(incrementBy([1,2,3,4],5));
			// → [6, 7, 8, 9]
		
incrementBy

decrementBy

Functia decrementBy functioneaza aproape identic cu incrementBy iar diferenta o face ca aceasta va decrementa toate valorile numerice din array-ul tinta cu valoarea specificata in al doilea argument.

			console.log(decrementBy([1,2,3,4],5));
			// → [-4, -3, -2, -1]
		
decrementBy

joinWith

Functia joinWith va concatena toate valorile dintr-un array cu o valoare reprezentata de cel de-al doilea parametru. Parametrul trei este ultimul al functiei si acesta va contine valoarea pe care o vrem adaugata la sfarsit. Recomand folosirea acestei functii doar pe array-uri de string-uri iar rezultatul final va fi un string cu toate valorile din array, exact ca in exemplul de mai jos.

			console.log(joinWith(['Inna','Candice','are at my home'],' and ','.'));
			// → Inna and Candice are at my home.					
			var arrayOfStrings = ['Inna','Candice','are at my home'];
			var result = joinWith(arrayOfStrings,' and ','.');
			console.log(result);
			// → Inna and Candice are at my home.
		
joinWith

moduloBy

Functia moduloBy va avea doi sau trei parametri. Primul va fi un array cu valori numerice ce urmeaza sa ii fie testate fiecare valoare, al doilea parametru va fi o valoare numerica cu care vom testa pentru modulo fiecare valoare din array si cel de-al treilea parametru este optional. In cazul in care acesta lipseste, valoarea acestuia este zero. Daca cel de-al treilea parametru este prezent atunci operatia de modulo va returna true daca si numai daca rezultatul este modulo cu parametrul trei.

			console.log(moduloBy([1,2,3,4,5,6,5,2,3],3,2));
			// → [2, 5, 5, 2];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],3));
			// → [3, 6, 3];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],2.5));
			// → [5, 5];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],2.5,0));
			// → [5, 5];
		
moduloBy

reverse

Foloseste aceasta functie daca vrei sa inversezi ordinea elementelor dintr-un array. Functia va avea un singur parametru iar acesta va fi un array tinta.

			console.log(reverse([1,2,3]));
			// → [3, 2, 1]
			console.log(reverse(['Anna','Beatrice','Candice']));
			// → ["Candice", "Beatrice", "Anna"]
		
reverse

reverseByModulo

Functia reverseByModulo este asemanatoare cu functia reverse iar diferenta o face cel de-al doilea parametru. Acest parametru va testa pentru modulo fiecare valoare numerica din array si in cazul in care rezultatul este egal cu zero, functia va returna true si va adauga acel element in array-ul returnat. In caz contrar, functia va sterge elementul.

			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],1));
			// → [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],2));
			// → [12, 10, 8, 6, 4, 2]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],3));
			// → [12, 9, 6, 3]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],4));
			// → [12, 8, 4]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],5));
			// → [10, 5]
		
reverseByModulo

sortedByValue

Functia sortedByValue va sorta elementele dintr-un array in functie de o valoare pe care i-o dam in cel de al doilea parametru. Valorile care sunt mai mici decat parametrul doi al functiei nu vor fi adaugate in array-ul returnat.

			console.log(sortedByValue([4,9,5,33,6,455,55,88,11,15,45,81,22,24,35,456,56],5));
			// → [5, 6, 9, 11, 15, 22, 24, 33, 35, 45, 55, 56, 81, 88, 455, 456]
			console.log(sortedByValue([4,9,5,33,6,455,55,88,11,15,45,81,22,24,35,456,56],455));
			// → [455, 456]
		
sortedByValue

getLowerValue

Functia va avea un singur parametru iar acesta va fi un array cu valori numerice. Functia va returna valoarea cea mai mica dintre ele.

			console.log(getLowerValue([99,55,44,22,7,6,220]));
			// → 6
			console.log(getLowerValue([99,55,44,22,71,60,220]));
			// → 22
		
getLowerValue

getBiggestValue

Functia va avea un singur parametru iar acesta va fi un array cu valori numerice. Functia va returna valoarea cea mai mare dintre ele.

			console.log(getBiggestValue([99,55,44,22,7,6,200]));
			// → 200
			console.log(getBiggestValue([99,55,404,202,71,60]));
			// → 404
		
getBiggestValue

countElement

Asa cum spune si numele, functia countElement numara de cate ori este prezent un element intr-un array, array ce reprezinta primul parametru iar cel de al doilea parametru este elementul pe care vrem sa il numaram. In cazul in care parametrul doi nu este prezent functia countElement va returna cifra zero.

			console.log(countElement(['a','b','c','d','a','b','c','d','a','b','c','d',],'a'));
			// → 3
			console.log(countElement(['a','b','c','d','a','b','c','d','a','b','c','d',]));
			// → 0
		
countElement

duplicate

Functia va avea un singur parametru si acesta va fi un array cu valori. Functia va returna un alt array cu fiecare valoare din array-ul parametru duplicata.

			console.log(duplicate([1,2,3]));
			// → [1, 1, 2, 2, 3, 3]
		
duplicate

multiplyByValue

Functia multiplyByValue va inmulti fiecare valoare din array la o valoare pe care i-o dam. Array-ul va fi primul parametru iar valoarea cu care vom inmulti va fi al doilea parametru.

			console.log(multiplyByValue([1,2,3,4,5,6,7,8,9,10],5));
			// → [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
		
multiplyByValue

size

Functia size va avea un singur parametru si va returna o valoare numerica reprezentand lungimea acestuia.

			console.log(size('Google'));
			// → 6
			console.log(size([1,2,3,4,5]));
			// → 5
			console.log(size());
			// → 0
		
size

isArray

Functia isArray va testa singurul parametru pe care il are pentru a vedea daca acesta este un array si in cazul in care acesta este un array, functia isArray va returna true, in caz contrar va returna false.

			console.log(isArray([]));
			// → true
			console.log(isArray({}));
			// → false
		
isArray

STRING

uniqueValue

Functia uniqueValue va returna o valoare numerica sau o valoare string. Daca vrem ca functia sa ne returneze doar o valoare numerica atunci nu trebuie sa ii dam nici-un parametru. In cazul in care ne dorim ca functia sa returneze o valoare string, atunci va trebui sa ii dam si un parametru string. De acest parametru vom atasa o valoare numerica iar rezultatul va fi un string unic.

			console.log(uniqueValue());
			// → ex. 1464728274563
			console.log(uniqueValue('unique_'));
			// → ex. unique_1937471262
		
uniqueValue

noSpace

Asa cum spune si numele functiei, functia noSpace va inlocui caracterul spatiu cu un alt caracter ales de noi. Functia noSpace va avea doi parametri. Primul este reprezentat de string-ul tinta caruia ii vom inlocui toate caracterele spatiu iar parametrul doi este reprezentat de un alt caracter pe care il dam noi. Parametrul doi poate avea orice caracter ne dorim, fie el litera, cifra sau un alt caracter special si desi ii putem da mai mult de un caracter, functia noSpace va folosi doar primul caracter.

			console.log(noSpace('Anna and Candice are at my home.', '_'));
			// → Anna_and_Candice_are_at_my_home.
			console.log(noSpace('Anna and Candice are at my home.', '*'));
			// → Anna*and*Candice*are*at*my*home.
			console.log(noSpace('Anna and Candice are at my home.', '*_'));
			// → Anna*and*Candice*are*at*my*home.
		
noSpace

modifyWord

Functia modifyWord va modifica un cuvant dintr-un string cu un alt cuvant dat de noi. Functia modifyWord va avea trei parametri. Primul va fi un string sau numele unei variabile ce contine un string, al doilea parametru este cuvantul tinta pe care vrem sa il inlocuim din string si in cele din urma parametrul trei va fi reprezentat de cuvantul pe care il vom adauga in locul parametrului doi. Retineti ca functia va inlocui acel cuvant la nivel global in acel string si nu va tine cont daca este scris cu litera mica sau mare.

			console.log(modifyWord('Apple Apple Apple','apple', 'steve jobs'));
			// → steve jobs steve jobs steve jobs
		
modifyWord

EXTRA

hexadecimalToRGBA

Dupa cum spune si numele functiei, functia hexadecimalToRGBA va converti o culoare reprezentata pe scara hexazecimala la o valoare rgba. Functia va avea unul sau maxim doi parametrii. Primul parametru este reprezentat de valoarea culori sub forma hexazecimala cu lungimea obligatorie de sase caractere si/sau litere plus caracterul diez. Parametrul doi al functiei este optional si reprezinta valoarea alpha. In cazul in care nu i-o atribuiti functiei, valoarea alpha va avea valoarea de baza 1.

			// → SINTAX ↓
			hexadecimalToRGBA(hexadecimalValue, optionalAlphaValue);
			// → EXAMPLE
			console.log(hexadecimalToRGBA('#0f5e58'));
			// → rgba(15,94,88,1)
			console.log(hexadecimalToRGBA('#3e615e','0.7'));
			// → rgba(62,97,94,0.7)
		
hexadecimalToRGBA

squareEffectOnTag

Functia squareEffectOnTag va adauga cate o eticheta div pe fiecare latura a unei alte etichete si apoi aceste patru etichete se vor uni creind un efect animat de linie pe eticheta HTML tinta. Functia squareEffectOnTag va avea doi parametrii. Primul este eticheta HTML tinta si cel de al doilea parametru va fi evenimentul la care functia sa fie declansata. Recomand cu tarie evenimentul mouseover. Functia squareEffectOnTag va inlatura din DOM aceste patru etichete div ce creeaza acest efect in momentul cand plecam cu cursorul mouse-ului de pe elementul tinta daca si numai daca functia este aplicata pe mai mult de un singur element. De retinut ca veti avea nevoie de urmatoarele clase CSS.

Folosirea liniei de cod *{ position: relative; } va ajuta functia sa pozitioneze corect cele patru div-uri la pozitia absoluta a acelui div tinta si nu la pozitia absoluta a etichetei body. In mod normal nu ar trebui sa schimbe cu nimic layout-ul pagini voastre pentru ca aceasta linie de cod, prin caracterul asterisk, va schimba pozitia de baza a fiecarei etichete HTML la pozitia relativa. Recomand sa verificati inca odata sa vedeti daca layout-ul paginii s-a schimbat.

			// → YOU WILL NEED THIS CSS CLASSES ↓
			*{ position: relative; }
			.d1, .d2, .d3, .d4{ width: 1px; height: 1px; transition: all 1s; background: #015b7e; position: absolute; }
			.d1, .d2{ top: 0%; left: 0%; }
			.d3, .d4{ float: right; right: 0%; bottom: 0%; }
			.d1-1, .d3-1{ width: 100%; }
			.d2-1, .d4-1{ height: 100%; }
		
			// → SINTAX ↓
			squareEffectOnTag(target, event);
			// →
			squareEffectOnTag('.box', 'mouseover');
		
squareEffectOnTag

luckyNumber

Functia luckyNumber va aduna cifrele din cei trei parametri obligatorii, parametri ce vor reprezenta o zi de nastere. Functia va aduna cifrele din fiecare parametru pana va ajunge la una singura si la sfarsit le va mai aduna inca odata pana va ramane una singura iar aceasta este cifra returnata. Data minima pe care functia o accepta este 1.1.1900 iar cea maxima este pana la sfarsitul anului curent chiar.

			// → SINTAX ↓
			luckyNumber(day, month, year);
			console.log(luckyNumber(28,10,1945));
			// → 3
			console.log(luckyNumber('28','10','1945'));
			// → 3
		
			// → ALGORITM ↓
			// → 2 + 8 = 10; 1 + 0 = 1; day = 1;
			// → 1 + 0 = 1; month = 1;
			// → 1 + 9 + 4 + 5 = 19; 1 + 9 = 10; 1 + 0 = 1; year = 1;
			// → day + month + year = 3; return 3;
		
luckyNumber

virtualKeyboard

Functia virtualKeyboard va afisa in pagina o tastatura virtuala ce va contine doar caracterele speciale, literele si cifrele si nu are inclusa si partea de functionalitate ale celorlante taste. Scopul functiei este acela de a folosi o tastatura virtuala cu scopul de a insera diferite string-uri intr-un camp de input. Functia lucreaza impreuna cu limbajul CSS iar mai jos aveti minimul de limbaj CSS pe care trebuie sa il aveti. Un alt aspect foarte important este acela ca functia va pozitiona tastatura virtuala automat sub eticheta HTML tinta si din acest caz nu este nevoie sa ii dati in CSS proprietatii care vor pozitiona tastatura.

Functia virtualKeyboard va avea doi parametrii. Primul este reprezentat de eticheta tinta din formular ce contine un anume id sau o clasa CSS. Recomand folosirea id-ului. Parametrul doi este reprezentat de evenimentul la care functia sa fie declansata si astfel sa ne arate tastatura virtuala. Recomand evenimentul click. Functia nu interactioneaza cu tastatura reala si din acest motiv le puteti folosi impreuna, rezultatul este identic.

			// → You will need this CSS classes and id's
			#k{	width: 450px; padding: 2px; box-shadow: 0px 3px 3px -3px black;	border: 3px solid #CCC; background: white; position: absolute; z-index: 999999; }
		   	.r{	width: 100%; height: 30px; margin-top: 2px; display: inline-block; }
		   	.r:first-of-type{ height: 20px; }
		   		.l{ width: 420px; float: left; }
		   		#r{ width: 20px; float: right; cursor: pointer; }
		   			.b{	width: 20px; height: 28px; font-weight: 200; font-size: 1.1em; text-align: center; float: left;	cursor: pointer; color:#FFF; margin:0px 2px; box-shadow:0px 3px 3px -3px black;	border:1px solid #c53421; background: linear-gradient(#f76501, #fa3418); }
		   			.b:hover{ background: linear-gradient(#fa3418, #f76501); box-shadow: none; }
		   			#b1{ width: 98px; }
		
			// → SINTAX ↓
			virtualKeyboard(target, event)
			// → EXAMPLE
			virtualKeyboard('#i', 'click')
		
virtualKeyboard

randomPassword

Functia randomPassword va returna un string cu lungimea maxima de patru caractere si va putea contine litere scrise cu litera mica si/sau mare, una din cifrele de la zero la noua inclusiv si un caracter special. Functia va avea un singur parametru iar acesta va fi un array cu unul sau maxim patru cuvinte cheie iar aceste cuvinte le puteti vedea si in sintaxa de mai jos. Rolul acestor cuvinte este sa ii transmite-ti functiei ce caractere sa contina string-ul returnat.

			// → SINTAX ↓
			randomPassword([optionalLOWERstring,optionalUPPERstring,optionalNUMBERstring,optionalSIMBOLSstring]);
			randomPassword(['lower','upper','number','simbols']);
			// → EXAMPLE 1
			console.log(randomPassword(['lower','upper','number','simbols']));
			// → kX7-
			// → EXAMPLE 2
			console.log(randomPassword(['lower','upper','number']));
			// → nU1
			// → EXAMPLE 3
			console.log(randomPassword(['upper','number','simbols']) + randomPassword(['lower','upper','number','simbols']));
			// → W0|iY1%
			// → EXAMPLE 4
			console.log(randomPassword(['lower','upper','number','simbols']) + randomPassword(['lower','upper','number','simbols']));
			// → uH5*nV1?
		
randomPassword
Total page view 14127. Yesterday 196. Page visit today 15.
Trimite un mesaj
Salut
Anuleaza