Lecția 7: JavaScript Continuare

Î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:

<script type="text/javascript">
      var your_name = window.prompt("Introduceti numele", "Nume");
      window.alert(your_name);
</script>

Dacă doriți să comentați cod în JavaScript puteți realiza acest lucru astfel:

<script type="text/javascript">
<!--
cod comentat (nu va fi executat)
//-->
</script>

Această instrucțiune este folosită pentru a compara o valoare cu alte valori dintr-o listă.

Sintaxa:

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
}

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ț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

Sintaxa:

for (incepere_nr; conditie_nr; ciclu) {
    cod care va fi executat
}

• 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:

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

Rezultat:

x este 1
x este 2
x este 3
x este 4 

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.

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

Sintaxa:

for (nume_proprietate in obiect) {
    instructiuni
}

Exemplu:

<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>

Rezultat:

Cristi
Ion
Simona
Adi

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

Sintaxa:

while (conditie) {
    codul care va fi executat
}

Exemplu:

<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>

Rezultat:

x este 1
x este 2
x este 3
x este 4 

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ă:

do {
    codul care va fi executat
    }
while (conditie)

Exemplu:

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

Rezultat:

x este 8

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.

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:

obiect.proprietate
obiect.metoda()    // parantezele rotunde arată că se referă la o metodă ci nu la o proprietate.

Punct (.) se folosește pentru a specifica cine deține proprietatea sau metoda aleasă.

Exemple de obiecte:

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:

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

Rezultat:

Digital Kids. 

Exelmplul 2:

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

Rezultat:

K

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:

 var nume_colegi = new Array(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:

nume_colegi[0] = "Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] = "Simona"
nume_colegi[3] = "Adi"

sau se mai poate scrie și astfel:

 var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');

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:

coleg = nume_colegi[0]
colega = nume_colegi[2] 

Ș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:

<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>

Rezultat:

Numarul de elemente din tablu: 4
Nume coleg: Simona 

Exemplu:

<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>

Rezultat:

Adi,Cristi,Ion,Simona

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.

O funcție se definește la începutul fișierului în secțiunea head.

function nume_functie(argument1, argument, ...) {
    codul care va fi executat
}

Unele funcții pot returna un rezultat iar pentru aceasta se foloseste instrucțiunea return.

Exemplu:

function suma(x, y) {
    z = x+y;
    return z
}

Această funcție adună cei doi parametrii ai funcției suma și returnează rezultatul ca fiind suma celor doi parametrii.

O funcție poate fi apelată astfel:

nume_functie(argument1, argument, ...);        // dacă funcția are parametrii
nume_functie()                    // dacă funcția nu are parametrii

Mai jos este prezentat un exemplu simplu de utilizare a funcțiilor:

<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>

• 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.

• Verificați în vectorul de șiruri dacă exista duplicate.
• Verificați dacă un vector este simetric.
• Creați o matrice de elemente. Afișați matricea.