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 tag adauga imagine in pagina web?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walking
I have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fui
Yo fui entrenador.
- Am fost antrenor.
Obiectul Array

Last accessed pages

  1. Accentul si Pronuntia (27427)
  2. Proverbe, expresii si zicatori (23261)
  3. Liste HTML - UL, OL (10635)
  4. Verbe reflexive 1 (10796)
  5. Functii predefinite si Coduri PHP (3074)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1358)
  2. Exercitii engleza - English Tests and exercises - Grammar (1085)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (1079)
  4. Gramatica limbii engleze - Prezentare Generala (1030)
  5. Prezentul simplu - Exercitii si teste incepatori (887)