Curs Javascript


Definire si Utilizare Array

Array este un obiect care poate sa contina mai multe valori intr-o singura variabila. Aceste valori sunt ordonate cu un index numeric incepand de la 0.
Un Array se poate crea adaugand valorile intre paranteze patrate, sau cu formula: new Array().
Valorile se pot adauga si dupa definirea array-ului.

- Sintaxa cu paranteze patrate:
let nume_array =['v1', 'v2', 'v3'];

//sau
let nume_array =[];
nume_array[0] ='v1';
nume_array[1] ='v2';
nume_array[2] ='v3';

- Sintaxa cu 'new':
let nume_array = new Array('v1', 'v2', 'v3');

//sau
let nume_array = new Array();
nume_array[0] ='v1';
nume_array[1] ='v2';
nume_array[2] ='v3';
- 'nume_array' poate fi orice nume de variabila.
- valorile adaugate pot fi orice tip de valoare: string (sir), numar, boolean (true /false), obiect (chiar si un alt array).

Accesare element din Array

Fiecare valoare adaugata intr-un Array devine un element al Array-ului si are asociat un index numeric. Cu acest index se poate accesa oricare element din array.

- Sintaxa:
nume_array[index]
Indexul incepe de la 0. Primul element are index 0, al doilea are index 1, al treilea index 2, etc.

- Exemplu, se defineste un Array cu trei elemente si se scrie in pagina valoarea de la al doilea element (cu index 1).
<script>
//se defineste un array cu 3 elemente si se acceseaza elementul al doilea
let arr =['HTML', 'JavaScript', 890];
var v2 = arr[1];
document.write(v2); //JavaScript
</script>

Adaugare si Modificare elemente in Array

Dupa ce a fost creat un array, se poat adauga elemente noi in el sau modifica cele deja adaugate; folosind acceeasi formula ca la accesare, cu indexul intre paranteze patrate.
- Sintaxa:
nume_array[index] ='valoare';

Un mod simplu de a adauga un nou element la sfarsitul unui array (dupa ultimul adaugat) e cu metoda push(), aceasta adauga unul sau mai multe elemente la sfarsitul unui array.
- Sintaxa:
var nume_array =['v1'];
nume_array.push('v2', 'v3');

Numarul de elemente dintr-un array se poate afla cu proprietatea length.
Indexul ultimului element se poate afla cu: (array.length -1).

- Exemplu, la un Array cu doua elemente se modifica valoarea de la al doilea element si se mai adauga unul.
<script>
//array cu 2 elemente
let arr =['HTML', 'PHP'];

//modifica al doilea element
arr[1] ='Tutorial JS';

//adauga un nou element dupa ultimul
arr.push('New item');

//test, arr are acum 3 elemente
document.write('<br>Array-ul arr are '+ arr.length +' elemente. Al doilea e: '+ arr[1]);
</script>

Parcurgere Array

Un Array poate fi parcurs cu instructiune for() sau cu metoda forEach().
- Exemplu cu for(), parcurge si afiseaza vloarea elementelor dintr-un array.
<script>
//array cu 4 elemente
let arr =['HTML', 'CSS', 'JavaScript', 'PHP'];

//parcurge array-ul si scrie valoarea fiecarui element
for(var i=0; i<arr.length; i++){
 document.write('<br>'+ arr[i]);
}
</script>
Metoda forEach() preia ca argument o functie 'callback' cu 3 argumente.
- Sintaxa:
array.forEach(callbackF)
- 'callbackF' e o functie care se executa pt. fiecare element, si poate avea trei argumente.
callbackF(val, index, array)
- Exemplu cu forEach(), parcurge si afiseaza indexul si vloarea elementelor dintr-un array.
<script>
//functia callback pt. forEach()
let parseArr =(v, i)=>{
 //scrie indexul si valoarea elementului
 document.write('<br>'+ i +' - '+ arr[i]);
}

//array cu 4 elemente
let arr =['HTML', 'CSS', 'JavaScript', 'PHP'];

//parcurge array-ul cu forEach() si functia parseArr()
arr.forEach(parseArr);
</script>

Ca performanta, for() e mai rapid decat forEach().
- Un array se poate parcurge si cu instructiunile: for..in si for..of, vedeti lectia de la: marplo.net/javascript/instructiuni-repetitive-for


Lucru cu elemente din Array

JavaScript contine numeroase metode pentru lucru cu elementele unui array. O lista cu aceste metode gasiti la pagina de la adresa: marplo.net/javascript/metode-obiect-array
Iata cateva exemple.


- Verificare daca o variabila e array. Se aplica metoda: Array.isArray().
let arr =['MarPlo.net', 'GamV.eu', 90];

//daca arr e array, afiseaza primul element
if(Array.isArray(arr)) document.write('- Primul elm.: '+arr[0]);
- Aranjare array in ordine alfabetica. Se aplica metoda sort().
let arr =['ef', 'a8', 9, 78];
arr.sort(); //aranjeaza in ordine alfabetica

console.log(arr); //[78, 9, 'a8', 'ef']
- Suma si Produsul elementelor dintr-un array. Se aplica metoda reduce() cu o functie callback.
const arr =[1, 2, 3, 4];

//suma elementelor din arr
const ar_sum = arr.reduce((a, b)=>a+b);

//produsul elementelor din arr
const ar_prd = arr.reduce((a, b)=>a*b);

document.write('<p>Suma numerelor din [1, 2, 3, 4] e: '+ar_sum+', Produsul: '+ar_prd+'</p>');

Array Multidimensional

La elementele unui array se poate adauga ca valoare un alt array.
Elementele array-ului interior se acceseaza ierarhic incepand de la array-ul principal.
- Sintaxa:
array[index_array_intern][index_elm]
- Exemplu cu un array Bidimensional:
<div id='dv1'>JS, array Bidimensional</div>

<script>
//se defineste un array bidimensional (elementul al doilea e un array)
let arr =[
 'Web develop',
 ['html', 'css', 'javascript'],
 'xyz'
];

//indexul ultimului element din array-ul interior (care e la arr[1])
let ix = arr[1].length -1;

//preia valoarea primului element din 'arr' si a ultimului din array interior
let title = arr[0];
let tutor = arr[1][ix];

//adauga in #dv1 valorile preluate
document.getElementById('dv1').innerHTML ='<h3>'+ title +'</h3>Tutorial '+ tutor;
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenĂ­simo"
mai bun mai putin bun extrem de bun
Este fruto es buenĂ­simo.
- Acest fruct este extrem /nemaipomenit de bun.
Obiectul Array

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (124376)
  2. Pronumele personal (9408)
  3. Ser, estar, tener sau haber (952)
  4. Limba spaniola curs online incepatori si avansati (31347)
  5. PHP PDO Introducere Conectari la Baze de Date (2162)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (181)
  2. Coduri pt culori (93)
  3. Gramatica limbii engleze - Prezentare Generala (92)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (78)
  5. Cursuri limba engleza gratuite si lectii online (73)