Cuprins

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:

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>

Instrucțiunea condiționala switch

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

Instrucțiunea for

Sintaxa:

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

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.

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:

for (nume_proprietate in obiect) {
    instructiuni
}

Instrucțiunea for … in parcurge cheile obiectului ci nu valorile.

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

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:

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 

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

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.

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:

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:

Obiectul string

String este folosit pentru a prelua text.

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

 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:

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

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.

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.

Apelarea funcțiilor

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>

Task-uri

Bonus: