Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
module:11-basic-web-dev:lectie-07 [2014/10/25 17:10] astoican |
module:11-basic-web-dev:lectie-07 [2017/01/14 00:40] giorgiana.vlasceanu [Task-uri] |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
- | ====== Lecția 7: JavaScript Continuare. ====== | + | ====== Lecția 7: JavaScript Continuare ====== |
=== Tutorial === | === Tutorial === | ||
Linia 10: | Linia 10: | ||
* Funcții în JavaScript | * Funcții în JavaScript | ||
- | Data trecută am discutat și despre cum se preia o valoare ce este introdusă în fereastra de Prompt, deoarece ați intrebat cu toții, acum vom prezenta și acest luctu: | + | Data trecută am discutat și despre cum se preia o valoare ce este introdusă în fereastra de Prompt, deoarece ați intrebat cu toții, acum vom prezenta și acest lucru: |
<code html> | <code html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Linia 27: | Linia 27: | ||
</code> | </code> | ||
- | ===== Instrucținuea condiționala switch ===== | + | ===== Instrucțiunea condiționala switch ===== |
Această instrucțiune este folosită pentru a compara o valoare cu alte valori dintr-o listă. | Această instrucțiune este folosită pentru a compara o valoare cu alte valori dintr-o listă. | ||
Linia 33: | Linia 33: | ||
<code html> | <code html> | ||
switch (expresie) { | switch (expresie) { | ||
- | casevaloare1: | + | case valoare1: |
cod executat daca expresie = valoare1 | cod executat daca expresie = valoare1 | ||
break | break | ||
- | casevaloare2: | + | case valoare2: |
cod executat daca expresie = valoare2 | cod executat daca expresie = valoare2 | ||
break | break | ||
- | casevaloare3: | + | case valoare3: |
cod executat daca expresie = valoare3 | cod executat daca expresie = valoare3 | ||
break | break | ||
Linia 48: | Linia 48: | ||
Mai întâi este evaluată expresia dintre paranteze rotunde, dupa care valoarea expresiei este comparată pe rând cu valoarea determinată de **case**. Dacă se găsește o identitate se execută codul asociat **case-ului** respectiv și se iese din instrucțiunea **switch**, altfel se execută codul de după **default**. | Mai întâi este evaluată expresia dintre paranteze rotunde, dupa care valoarea expresiei este comparată pe rând cu valoarea determinată de **case**. Dacă se găsește o identitate se execută codul asociat **case-ului** respectiv și se iese din instrucțiunea **switch**, altfel se execută codul de după **default**. | ||
- | ===== Instrucțiuni ciclice(repetitive) ===== | + | ===== Instrucțiuni ciclice (repetitive) ===== |
Instrucțiunile repetitive se folosesc atunci când se dorește efectuarea unei comenzi de mai multe ori. | Instrucțiunile repetitive se folosesc atunci când se dorește efectuarea unei comenzi de mai multe ori. | ||
Linia 67: | Linia 67: | ||
* **incepere_nr** este folosit la inițializare, pentru a da o valoare inițială numarului de repetări | * **incepere_nr** este folosit la inițializare, pentru a da o valoare inițială numarului de repetări | ||
* **conditie_nr** specifică daca numarul de cicluri respectă codiția, dacă da, se execută incă o dată codul dintre acolade | * **conditie_nr** specifică daca numarul de cicluri respectă codiția, dacă da, se execută incă o dată codul dintre acolade | ||
- | * **ciclu incrementează** sau decrementează valoarea la care a ajuns contorul ciclului. | + | * **ciclu** incrementează sau decrementează valoarea la care a ajuns contorul ciclului. |
Exemplu: | Exemplu: | ||
Linia 86: | Linia 86: | ||
</code> | </code> | ||
- | După cum se poate observa, codul este executat de 4 ori, deoarece **x=1** specifică inițializarea variabilei x, **x<5** reprezintă condiția care trebuie să fie adevărată pentru a fi executat codul dintre acolade, iar **x++** este folosit pentru a incrementa cu o unitate valoarea variabilei x. Astfel x va ajunge să ia valorile 1, 2, 3 și 4, după care se va ori, deoarece 4 este cea mai mare valoare mai mică ca 5. | + | După cum se poate observa, codul este executat de 4 ori, deoarece **x=1** specifică inițializarea variabilei x cu valoare 1, **x<5** reprezintă condiția care trebuie să fie adevărată pentru a fi executat codul dintre acolade, iar **x++** este folosit pentru a incrementa cu o unitate valoarea variabilei x. Astfel x va ajunge să ia valorile 1, 2, 3 și 4, după care se va opri, deoarece 4 este cea mai mare valoare mai mică decât 5. |
- | ==== Instrunțiunea for … in ===== | + | ==== Instrucțiunea for … in ===== |
Această instrucțiune se folosește pe obiecte din JavaScript (despre care vom învăța tot în această lecție). | Această instrucțiune se folosește pe obiecte din JavaScript (despre care vom învăța tot în această lecție). | ||
Linia 124: | Linia 124: | ||
- | ==== Instrunțiunea while ===== | + | ==== Instrucțiunea while ===== |
Această instrucțiune execută codul aflat între colade atâta timp cât condiția dintre paranteze rotunde este adevărată. | Această instrucțiune execută codul aflat între colade atâta timp cât condiția dintre paranteze rotunde este adevărată. | ||
Linia 153: | Linia 153: | ||
</code> | </code> | ||
- | ==== Instrunțiunea do ... while ===== | + | ==== Instrucțiunea do ... while ===== |
Foarte asemănătoare cu instrucținea while, instrucțiunea do … while mai întâi execută codul dintre acolade după care este verificată condiția, după care repetă până când condiția devine falsă. | Foarte asemănătoare cu instrucținea while, instrucțiunea do … while mai întâi execută codul dintre acolade după care este verificată condiția, după care repetă până când condiția devine falsă. | ||
Linia 194: | Linia 194: | ||
Sintaxa pentru a folosi un obiect este: | Sintaxa pentru a folosi un obiect este: | ||
<code html> | <code html> | ||
- | obiect.prorietate | + | obiect.proprietate |
obiect.metoda() // parantezele rotunde arată că se referă la o metodă ci nu la o proprietate. | obiect.metoda() // parantezele rotunde arată că se referă la o metodă ci nu la o proprietate. | ||
</code> | </code> | ||
Linia 239: | Linia 239: | ||
Cu operatorul **new** se poate crea o "instanță" (incepere) a obiectului **Array**, ca în exemplul următor: | Cu operatorul **new** se poate crea o "instanță" (incepere) a obiectului **Array**, ca în exemplul următor: | ||
- | *var nume_colegi = new Array(4) | + | <code html> var nume_colegi = new Array(4) </code> |
Între paranteze rotunde este trecut numărul de elemente al tabloului, în acest caz 4. | Între paranteze rotunde este trecut numărul de elemente al tabloului, în acest caz 4. | ||
Pentru a adăuga elemente în tablou procedăm astfel: | Pentru a adăuga elemente în tablou procedăm astfel: | ||
- | <note>nume_colegi[0] = "Cristi" | + | <code html> |
+ | nume_colegi[0] = "Cristi" | ||
nume_colegi[1] = "Ion" | nume_colegi[1] = "Ion" | ||
nume_colegi[2] = "Simona" | nume_colegi[2] = "Simona" | ||
- | nume_colegi[3] = "Adi"</note> | + | nume_colegi[3] = "Adi" |
+ | </code> | ||
sau se mai poate scrie și astfel: | sau se mai poate scrie și astfel: | ||
- | **var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');** | + | <code html> var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');</code> |
Pentru a prelua un element dintr-un tablou scriem numele tabloului iar între paranteze pătrate punem index-ul elementului pe care dorim să-l extragem. | Pentru a prelua un element dintr-un tablou scriem numele tabloului iar între paranteze pătrate punem index-ul elementului pe care dorim să-l extragem. | ||
Exemplu: | Exemplu: | ||
+ | <code html> | ||
coleg = nume_colegi[0] | coleg = nume_colegi[0] | ||
colega = nume_colegi[2] | colega = nume_colegi[2] | ||
+ | </code> | ||
- | Și obiectul Array are proprietatea length și mai multe metode printre care: | + | Și obiectul **Array** are proprietatea **length** și mai multe metode printre care: |
- | concat() - Returnează un tablou rezultat din concatenarea a două tablouri | + | *concat() - Returnează un tablou rezultat din concatenarea a două tablouri |
- | reverse() - Returnează inversul unui tablou | + | *reverse() - Returnează inversul unui tablou |
- | sort() - Returnează tabloul ordonat | + | *sort() - Returnează tabloul ordonat |
Exemplu: | Exemplu: | ||
+ | <code html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var nume_colegi = new Array(); | var nume_colegi = new Array(); | ||
Linia 268: | Linia 273: | ||
nume_colegi[2] = "Simona"; | nume_colegi[2] = "Simona"; | ||
nume_colegi[3] = "Adi"; | nume_colegi[3] = "Adi"; | ||
- | |||
var nr_elemente = nume_colegi.length; | var nr_elemente = nume_colegi.length; | ||
Linia 274: | Linia 278: | ||
document.write("<br />Nume coleg: " + nume_colegi[2]); | document.write("<br />Nume coleg: " + nume_colegi[2]); | ||
</script> | </script> | ||
+ | </code> | ||
Rezultat: | Rezultat: | ||
+ | <code html> | ||
Numarul de elemente din tablu: 4 | Numarul de elemente din tablu: 4 | ||
Nume coleg: Simona | Nume coleg: Simona | ||
+ | </code> | ||
Exemplu: | Exemplu: | ||
+ | <code html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var nume_colegi = new Array(); | var nume_colegi = new Array(); | ||
Linia 289: | Linia 297: | ||
document.write(nume_colegi.sort()); | document.write(nume_colegi.sort()); | ||
</script> | </script> | ||
+ | </code> | ||
Rezultat: | Rezultat: | ||
- | Adi,Cristi,Ion,Simona | + | <code html> |
+ | Adi,Cristi,Ion,Simona | ||
+ | </code> | ||
+ | |||
+ | ===== Funcții în JavaScript ===== | ||
+ | Am vom începe să vorbim și despre funcții. Funcțiile ajută la divizarea și structurarea codului. O funcție poate conține mai multe instrucțiuni și comenzi care ulterior pot fi utilizate ușor și de mai multe ori prin apelarea funcției care le conține. | ||
+ | |||
+ | ===Crearea unei funcții=== | ||
+ | O funcție se definește la începutul fișierului în secțiunea head. | ||
+ | <code html> | ||
+ | function nume_functie(argument1, argument, ...) { | ||
+ | codul care va fi executat | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | Unele funcții pot returna un rezultat iar pentru aceasta se foloseste instrucțiunea return. | ||
+ | |||
+ | Exemplu: | ||
+ | <code html> | ||
+ | function suma(x, y) { | ||
+ | z = x+y; | ||
+ | return z | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | Această funcție adună cei doi parametrii ai funcției suma și returnează rezultatul ca fiind suma celor doi parametrii. | ||
+ | |||
+ | ===Apelarea funcțiilor=== | ||
+ | O funcție poate fi apelată astfel: | ||
+ | <code html> | ||
+ | nume_functie(argument1, argument, ...); // dacă funcția are parametrii | ||
+ | nume_functie() // dacă funcția nu are parametrii | ||
+ | </code> | ||
+ | |||
+ | Mai jos este prezentat un exemplu simplu de utilizare a funcțiilor: | ||
+ | <code html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function exemplu1() { | ||
+ | return document.write("Bine ati venit!") | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <script type="text/javascript"> | ||
+ | exemplu1() | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | ===== Task-uri ===== | ||
+ | *Creați un vector de șiruri și unul de numere. | ||
+ | *Afișați elementele vectorului de șiruri folosind instrucțiunea "while". | ||
+ | *Afișați elementele vectorului de șiruri folosind instrucțiunea "do … while". | ||
+ | *Verificați dacă un șir dat de voi conține numere divizibile cu 3. | ||
+ | *Verificați dacă un șir dat de voi conține numere divizibile cu 2 și cu 5. | ||
+ | *Verificați dacă doi vectori au aceleași elemente în aceeași ordine folosind "for". | ||
+ | *Afișați un vector în sens invers. | ||
+ | |||
+ | ===== Bonus: ===== | ||
+ | |||
+ | 1. Verificați în vectorul de șiruri dacă exista duplicate. | ||
+ | |||
+ | 2. Verificați dacă un vector este simetric. | ||
+ | |||
+ | 3. Creați o matrice de elemente. Afișați matricea. |