Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 7: JavaScript Continuare ======

=== Tutorial ===

În lecția precedentă am învățat de variabile, instrucțiunile condoționale if și if … else, și de Ferestrele Alert, Prompt și Confirm.
În lecția de astăzi vom continua în ceeași notă (în mare parte :-) ) și vom discuta despre:
* instrucținea condițională switch
* instrucțini ciclice for, for … in, while și do … while
* Obiecte î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 lucru:
<code html>
<script type="text/javascript">
      var your_name = window.prompt("Introduceti numele", "Nume");
      window.alert(your_name);
</script>
</code>

Dacă doriți să comentați cod în JavaScript puteți realiza acest lucru astfel:
<code html>
<script type="text/javascript">
<!--
cod comentat (nu va fi executat)
//-->
</script>
</code>

===== Instrucțiunea condiționala switch =====
Această instrucțiune este folosită pentru a compara o valoare cu alte valori dintr-o listă. 

Sintaxa:
<code html>
switch (expresie) {
case valoare1:
    cod executat daca expresie = valoare1
    break
case valoare2:
    cod executat daca expresie = valoare2
    break
case valoare3:
    cod executat daca expresie = valoare3
    break
default:
    cod executat daca expresie e diferit de valoare1, valoare2 sau valoare3
}
</code>
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țiunile repetitive se folosesc atunci când se dorește efectuarea unei comenzi de mai multe ori.
În JavaScript există patru tipuri de instrucțiuni repetitive:
*for
*for … in
*while
*do … while

==== Instrucțiunea for =====

Sintaxa:
<code html>
for (incepere_nr; conditie_nr; ciclu) {
    cod care va fi executat
}
</code>
* **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
* **ciclu** incrementează sau decrementează valoarea la care a ajuns contorul ciclului.

Exemplu:
<code html>
<script type="text/javascript">
for (x=1; x<5; x++) {
    document.write("<br /> x este " + x);
}
</script> 
</code>

Rezultat:
<code html>
x este 1
x este 2
x este 3
x este 4 
</code>

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.

==== Instrucțiunea for … in  =====

Această instrucțiune se folosește pe obiecte din JavaScript (despre care vom învăța tot în această lecție).

Sintaxa:
<code html>
for (nume_proprietate in obiect) {
    instructiuni
}
</code>
<note important>Instrucțiunea **for … in** parcurge cheile obiectului ci nu valorile.</note>

Exemplu:
<code html>
<script type="text/javascript">
      var nume_colegi = new Array();
      nume_colegi[0] = "Cristi"
      nume_colegi[1] = "Ion"
      nume_colegi[2] = "Simona"
      nume_colegi[3] = "Adi"
      var x;
      for(x in nume_colegi)  {
        document.write(nume_colegi[x] + "<br />");
       }
</script>
</code>

Rezultat:
<code html>
Cristi
Ion
Simona
Adi
</code>


==== Instrucțiunea while =====
Această instrucțiune execută codul aflat între colade atâta timp cât condiția dintre paranteze rotunde este adevărată.

Sintaxa:
<code html>
while (conditie) {
    codul care va fi executat
}
</code>

Exemplu:
<code html>
<script type="text/javascript">
var x = 1;        // inițializarea variabilei x
while (x<5) {        // verificare condiție
    document.write("<br /> x este "+x);
    x++;        // incrementarea variabilei x
}
</script>
</code>

Rezultat:
<code html>
x este 1
x este 2
x este 3
x este 4 
</code>

==== 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ă.

Sintaxă:
<code html>
do {
    codul care va fi executat
    }
while (conditie)
</code>

Exemplu:
<code html>
<script type="text/javascript">
var x = 8;
do {
    document.write("<br /> x este "+x);
    x++;
    }
while (x<5)
</script>
</code>

Rezultat:
<code html>
x este 8
</code>

După cum se poate vedea variabila x exte inițializată cu 8 (x=8), iar condiția este x<5. Cu toate acestea se afișează totuși un rezultat deoarece condiția este verificată după ce codul dintre acolade a fost executat.

===== Obiecte în JavaScript =====
Acum a sosit timpul să vorbim despre obiecte.
În lumea din jurul nostru obiectele sunt de exemplu: o carte, o mașină, un televizor, ect. În JavaScript obiectele pot fi: o fereastră, un formular, un buton, o imagine, etc.

Toate elementele dintr-o pagină sunt văzute în JavaScript ca fiind obiecte.
Obiectele au anumite proprietăți, de exemplu în lumea reală televizoarele au butoane, mașinile au roți; așa și în JavaScript **obiectele** au **proprietăți**: formularele au butone, ferestrele au titluri, etc.

Pe lângă proprietăți obiectele mai au și **metode**. **Metodele** reprezintă funcțiile pe care un obiect poate să le facă.

Sintaxa pentru a folosi un obiect este:
<code html>
obiect.proprietate
obiect.metoda()    // parantezele rotunde arată că se referă la o metodă ci nu la o proprietate.
</code>
Punct (.) se folosește pentru a specifica cine deține proprietatea sau metoda aleasă.

Exemple de obiecte:
==== Obiectul string ====
**String** este folosit pentru a prelua text.
*are proprietatea length
*are mai multe metode printre care: - 
**bold() - Returneaza un sir cu litere ingrosate
**charAt() - Returneaza un caracter de la pozitia care este specificata

Exemplul 1:
<code html>
<script type="text/javascript">
var str = "Digital Kids.";
document.write(str.bold());
</script>
</code>

Rezultat:
<code html>
Digital Kids. 
</code>

Exelmplul 2:
<code html>
<script type="text/javascript">
var str = "Digital Kids.";
document.write(str.charAt(8));
</script>
</code>

Rezultat:
<code html>
K
</code>

==== Obiectul Array (tablou sau matrice) ====
Obiectul **Array** (numit si matrice sau tablou de date) se folosește pentru a stoca mai multe valori într-un singur nume de variabilă.

Fiecare valoare stocată devine un element al tabloului, acesta are asociat un "numar index" (sau cheie, care implicit începe de la 0). Cu ajutorul acestei chei se poate face referire la oricare element din tablou.  

Cu operatorul **new** se poate crea o "instanță" (incepere) a obiectului **Array**, ca în exemplul următor:         
<code html> var nume_colegi = new Array(4) </code>
Î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:
<code html>
nume_colegi[0] = "Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] = "Simona"
nume_colegi[3] = "Adi"
</code>

sau se mai poate scrie și astfel:
<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.
Exemplu:
<code html>
coleg = nume_colegi[0]
colega = nume_colegi[2] 
</code>

Și obiectul **Array** are proprietatea **length** și mai multe metode printre care:
*concat() - Returnează un tablou rezultat din concatenarea a două tablouri 
*reverse() - Returnează inversul unui tablou 
*sort() - Returnează tabloul ordonat

Exemplu:
<code html>
<script type="text/javascript">
var nume_colegi = new Array();
nume_colegi[0] = "Cristi";
nume_colegi[1] = "Ion";
nume_colegi[2] = "Simona";
nume_colegi[3] = "Adi";

var nr_elemente = nume_colegi.length;
document.write("Numarul de elemente din tablu: " + nr_elemente);
document.write("<br />Nume coleg: " + nume_colegi[2]);
</script>
</code>

Rezultat:
<code html>
Numarul de elemente din tablu: 4
Nume coleg: Simona 
</code>

Exemplu:
<code html>
<script type="text/javascript">
var nume_colegi = new Array();
nume_colegi[0] = "Cristi";
nume_colegi[1] = "Ion";
nume_colegi[2] = "Simona";
nume_colegi[3] = "Adi";

document.write(nume_colegi.sort());
</script>
</code>

Rezultat:
<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 =====


1. Creați un vector de șiruri și unul de numere

2. Afișați elementele vectorului de șiruri folosind instrucțiunea "while"

3. Afișați elementele vectorului de șiruri folosind instrucțiunea "do … while"

4. Verificați dacă un șir dat de voi conține numere divizibile cu 3

5. Verificați dacă un șir dat de voi conține numere divizibile cu 2 și cu 5

6. Verificați dacă doi vectori au aceleași elemente în aceeași ordine folosind "for"

7. 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
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
