Cauta rapid aici ↑

Metode JavaScript pe care le vei folosi cel mai des

Urmatoarele metode le vei folosi cel mai des in script-urile tale chiar daca limbajul JavaScript ne ofera o multime de metode pentru aproape orice situatie. Aceste metode le-am folosit de-a lungul timpului in diferite script-uri cand am avut nevoie sa rezolv un task la serviciu sau am vrut sa creez un script care sa faca ceva interesant. Daca vreti sa vedeti o lista cu metode in ordine alfabetica, atunci va invit sa dati click pe urmatorul link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index.

Metoda addEventListener

Metoda addEventListener() este cel mai des folosita in script-uri si nu face altceva decat sa astepte ca un eveniment sa fie declansat pe un anumit element din pagina. Aceasta metoda se ataseaza pe elementul selectat si doi parametri obligatorii si unul optional reprezentat de catre o valoare boleana. Exista si un opus al acestei metode si aceasta este removeEventListener().

Metoda join

Metoda join() este cel mai adesea folosita in situatia in care vrei sa i-ei toate variabilele dintr-un array si sa le pui intr-un string. In interiorul metodei join trebuie sa ii punem un separator sau mai bine spus un argument text. In cazul in care nu punem nici-un argument si lasam parantezele asa goale, atunci metoda join() va separa toate valorile din array cu valoarea de baza care este o virgula. Noi putem pune ca argument orice caracter ne dorim sau chiar un text, metoda join() va separa valorile din array cu ce am pus intre ghilimele.

    	var arr = ['Inna','Andreea'];
        var string = arr.join(' si ');
        console.log(string); // Inna si Andreea
    

Metoda split

Metoda split() este opusul metodei join() si este foarte utila. In acest exemplu o voi folosi pentru a creea un array cu toate cuvintele separate de caracterul spatiu. In cazul in care nu vom pune nici-un argument de separare care se afla in string si vom lasa metoda split() fara nici-un argument, atunci metoda split() va pune intr-o singura valoare intreg string-ul.

    	var string = 'Inna si Andreea';
        var arr = string.split(' ');
        console.log(arr); // ['Inna','si','Andreea']
    

Metoda substr

Metoda substr() se foloseste pe string-uri si va taia din string portiunea de text cuprinsa intre cele doua argumente. Numaratoarea incepe de la cifra zero si merge pana la intreaga lungime a string-ului. In situatia in care vrem sa stergem ultimul caracter din string, atunci va trebui sa inlocuim cel de-al doilea argument cu urmatoarea declaratie pe care nu mai este nevoie sa v-o explic. string.length-1

    	var string = 'JavaScript este limbajul meu preferat';
        console.log(string.substr(0,10)); // JavaScript
    

Metoda parse

Metoda parse() este folosita tot pe string-uri insa pe string-uri ce contin cod JSON. Practic intreg obiectul JSON este transformat in string prin punerea acestuia intre ghilimele. In aceasta situatie ajungem daca facem acest lucru manual in script sau primim date de pe server printr-un request AJAX si aceste date vin intotdeauna sub forma de string. Sa presupunem ca avem generat de catre server un fisier cu extensia JSON ce contine obiectul JSON cu date din baza de date. Aceste date sunt in proprietatea responseText a obiectului XMLHttpRequest. Pentru convertirea acestora intr-un obiect JSON va trebui sa ne folosim de metoda parse() pe obiectul JSON. In urmatorul exemplu va voi arata ceva mai simplu pentru ca sunt convins ca ati inteles ideea.

    	var string = '{"limbaj":"JavaScript","meseria":"JavaScript Engineer"}';
        var json = JSON.parse(string);
        console.log(json); // Object {"limbaj":"JavaScript", "meseria":"JavaScript Engineer"}
    

Metoda parseInt

Metoda parseInt() este si ea foarte utila si rolul acesteia este de transforma o valoare numerica dintr-o variabila string intr-o variabila numerica.

    	var string = '5';
        var n = parseInt(string);
        console.log(typeof n); // number
    

Metoda indexOf

Metoda indexOf() este foarte utila si se foloseste tot pe string-uri. Rolul acesteia este de a cauta in string dupa un caracter anume. Cel mai adesea aceasata metoda este folosita la validarea unui camp de formular, mai exact la validarea unei adrese de email prin cautarea caracterului @. Metoda indexOf() cauta de la inceputul string-ului.

Metoda lastIndexOf

Metoda lastIndexOf() este folosita la fel ca si metoda indexOf() la cautarea unui caracter anume dintr-un string. Diferenta fata de metoda indexOf() este ca aceasta metoda cauta de la sfarsitul string-ului.

Metodele Function, Number, String, Array

Aceste metode ale obiectului window reprezinta diferite functii de baza pentru fiecare tip de date in parte. Impreuna cu proprietatea prototype putem adauga diferite metode si proprietatii pentru fiecare in parte ca setare de baza insa noi nu le vom folosi pentru acest lucru ci pentru a converti diferite date la ce tip de date vrem sa avem.

Metoda push

Dupa cum ati vazut pana acum, am folosit ori de cate ori am avut nevoie de metoda push(). Aceasta metoda este special conceputa pentru lucrul pe array-uri. Metoda push() adauga un element in array de la inceputul acestuia.

    	var number = 1, string = 'text', arr = [];
        arr.push(number);
        arr.push(string);
        console.log(arr); // [1,'text']
    

Metoda filter

Metoda filter() este foarte puternica si folositoare. Cu ajutorul acestei metode putem parcurge un array declarat inainte si transformam acel array intr-un altul ce contine doar o parte de date din array-ul initial. Metoda filter() va avea ca parametru o functie anonima callback. In interiorul acestei functii vom parcurge array-ul initial si vom testa fiecare valoare pentru a vedea daca corespunde unor cerinte. Daca vreti sa vedeti un alt exemplu mai complex, atunci va invit sa mergeti la aceasta pagina autocomplete.

    	var arr = [1,2,3,4,5,6,7,8,9,10], 
		    newArr = arr.filter(function(a){
            	if(a % 2 == 0){
                	return a;
                }
             });
        console.log(newArr); // [2,4,6,8,10]
    

Metoda match

Metoda match() este special creata pentru a testa pentru potrivire un text in expressile regulate. Daca vreti sa vedeti un mic exemplu cu aceasta metoda in actiune va invit sa vizitati pagina autocomplete ce isi are link-ul in paragraful anterior.

Metoda replace

Metoda replace() este si ea folosita in expresiile regulate. Scopul acesteia este de a inlocui o litera sau mai multe dintr-un text cu o alta litera sau mai multe ori cu un caracter special sau absolut nimic. Un exemplu foarte bun il puteti vedea in script-ul urmator sau la aceasta pagina lucrul cu expresii regulate.

Metodele add, remove si toggle ale obiectului classList

De cand am aflat de classList API am folosit ori de cate ori a fost nevoie de acest obiect si cu metodele acestuia. Nu mai trebuie sa spun ceea ce fac metodele add(), remove() si toggle(), insa daca vrei neaparat sa astiti va invit sa vizitati aceasta pagina classList API

Metoda setAttribute

Metoda setAttribute() este foarte veche si inca este des intalnita. Rolul acesteia este de a seta un atribut pentru un element din pagina in DOM. Acest atribut va putea fi vazut doar daca efectuam click dreapta pe acel element si apoi inspect element in meniul nou aparut. In acest fel putem sa setam diferite atribute diferitelor elemente din pagina fara a afecta codul HTML. In aceasta situatie vom ajunge doar daca nu vrem sa afectam codul HTML si cum interpreteaza motoarele de cautare pagina noastra. Practic putem in acest fel sa ii oferim doua tipuri de stil paginii noastre. Primul cu HTML si CSS si al doilea cu CSS si JavaScript in mod dinamic.

Pentru orice metoda care adauga ceva in pagina exista si o metoda care inlatura ce cealanta metoda a adaugat iar metoda removeAttribute() face acest lucru foarte bine. Avantajul acestor metode este acela ca ele sunt recunoscute de catre browserele mai vechi.

Metodele toLowerCase si toUpperCase

Metodele toLowerCase() si toUpperCase() au fiecare un scop precis iar acesta este sa afiseze cu litere mici sau mari un text anume. Nu cred ca este nevoie sa va spun ce face una si cealanta.

Metodele appendChild, createElement si createTextNode

Metodele appendChild(), createElement() si createTextNode() merg mana in mana si sunt folosite pentru a creea un element, apoi a insera continut in acel element si in cele din urma pentru a insera acel element in DOM. Mai multe detalii in aceasta pagina javascript metodele createElement createTextNode si appendChild

Metodele document.getElementById, document.getElementsByTagName, document.getElementsByClassName, document.getElementsByName, document.querySelector si document.querySelectorAll

Metodele din obiectul document si anume...document.getElementById(), document.getElementsByTagName(), document.getElementsByClassName(), document.getElementsByName(), document.querySelector() si document.querySelectorAll() sunt folosite pentru a selecta unul sau mai multe elemente din pagina. Cu siguranta stiti ce fac fiecare in parte si din acest motiv va sugerez sa va creati propriile functii care sa va returneze exact aceste metode ale obiectului document.

Metodele setInterval si setTimeout

Aceste metode sunt foarte folosite. Asa cum le spune si numele, aceste metode seteaza un interval sau o singura unitate de timp la care sa ruleze primul parametru care este intotdeauna o functie, fie ca este vorba de o functie anonima callback sau o functie declarata oriunde in script. Cel de-al doilea parametru este reprezentat numeric si reprezinta unitatea de timp exprimata in milisecunde, 1000 reprezinta 1 secunda.