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
Clic pe tag-ul HTML care afiseaza o linie orizontala.
<br> <em> <hr>
Continut ...
<hr />
Alt continut sub linie ...
Care proprietate CSS defineste culoarea textului?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");
Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?
array_merge() explode() implode()
$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
Indicati asocierea corecta: "luna-anotimp".
April - Autumn October - Spring July - Summer
July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.
Indicati asocierea corecta: "luna-anotimp".
Octubre - Primavera Julio - Verano Abril - Otoño
Julio es un hermoso mes de verano.
- Iulie este o frumoasa luna de vara.
Obiectul Array

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278854)
  2. CSS3 opacity (1121)
  3. Creare si editare pagini HTML (87056)
  4. Sunt sfântul Fiu al lui Dumnezeu (56)
  5. Scrieri pentru Fratele Meu (624)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (233)
  2. Gramatica limbii engleze - Prezentare Generala (134)
  3. Coduri pt culori (114)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (100)
  5. Cursuri limba engleza gratuite si lectii online (96)