În Tutoriale

Programarea în JavaScript: Ghid introductiv (III)

logo JavaScript

Continuăm explorarea limbajului JavaScript prin intermediul tutorialului marca Udemy. În această parte a seriei, ne vom familiariza cu conceptele de obiecte și bucle.

Bucle

Buclele permit repetarea unui fragment de cod până când returnează fals. Există trei tipuri de bucle mai des întâlnite, după cum urmează.

Bucla For

Bucla For, cel mai comun tip de buclă, vă permite să rulați codul de un număr definit de ori, și ține socoteala numărului de bucle prin fragmentul de cod. Aici este structura:

for (var i = 1; i < 10; i  ) {
Acest cod rulează. 
} 

Să analizăm bucla For.

După cum puteți observa, ca și în cazul expresiei if, există o condiție de îndeplinit, între paranteze. Această condiție are trei părți. Cuvântul for întotdeauna inaugurează buclele for în JavaScript.

var i = 0; inițializează variabila și o stabilește la 0. Ca și convenție, se utilizează var i, cu toate că puteți denumi variabila oricum doriți (de exemplu var x, var taco). Ideea din spatele acestei convenții are legătură cu faptul că bucla for este utilizată adesea asupra unui șir – o listă de valori cărora le sunt atribuite poziții index, începând de la 0. După cum probabil ați ghicit deja, i-ul din var i este prescurtarea de la index.

Vom face o analiză mai aprofundată a șirurilor mai târziu în cadrul acestui tutorial.

i < 10; pune o condiție legată de numărul de iterații ale buclei.

Cât timp variabila i este mai mică decât 10, fragmentul de cod va rula. O variabilă cu valoarea unui număr poate, de asemenea, să fie utilizată în locul unui număr propriu-zis.

Acum, să examinăm porțiunea finală a condiției, i++; acesta incrementează valoarea fiecărui număr cu 1. așadar, i++ incrementează var i cu 1 de fiecare dată când bucla rulează. Bucla va rula până când var i atinge valoarea 10, punct în care blocul de cod se va opri din rulare.

Bucla While

O buclă while repetă un fragment de cod până când condiția returnează fals. Puteți utiliza aceasta când nu aveți un număr determinat de bucle dorite, sau atunci când doriți să iterați până când o anumită condiție returnează adevărat. Exemple:

var x = 0;
var y = 1;

while(x < 10) {
x++;
y--;
}

În acest exemplu, observăm că bucla while va rula continuu până când variabila x atinge 10, cu x++ incrementând x cu 1 și y- decrementând y cu 1 de fiecare dată când bucla rulează.

Do While

Acest tip de buclă este ca un while, dar va rula o porțiune de cod cel puțin o dată, indiferent dacă se întrunește sau nu condiția specifică. Exemplu:

var count = 20;

do {

alert(%u201CLoop de loop!);
count  ;

} while (count < 20);

Observați că în bucla Do While, fragmentul de cod precedă condiția, făcând ca acest cod să se execute cel puțin o dată. Chiar dacă nu se îndeplinește condiția, codul tot va rula prima dată prin buclă.

Bucle infinite

Dacă rulați o buclă cu o condiție care niciodată nu returnează fals, va rezulta o buclă infinită. Fragmentul de cod se va tot executa până când browserul va rămâne fără memorie. E categoric de evitat această situație. Omisiunea accidentală a unui counter poate conduce la o buclă infinită.

Funcții

O funcție constă într-un fragment de cod reutilizabil, conținând expresii care urmăresc să realizeze un anumit task.

Sintaxa

O funcție se creează – sau se declară – prin keywordul function, care precedă numele funcției, care este urmat de paranteze. Fragmentul de cod urmează, încadrat între acolade. Exemplu:

function myFunction ( ) {
code block
}

Numele funcțiilor

La fel ca numele variabilelor, numele funcțiilor pot conține litere, numere, underscore-uri și semnul dolarului.

Apelarea/invocarea funcțiilor

Puteți apela sau invoca o funcție, permițând astfel codului ei să ruleze, utilizând numele funcției urmat de paranteze și un punct și virgulă. Exemplu:

myFunction( );

Parametri și argumente

Informațiile oferite către funcții se numesc parametri, care sunt separați de virgulă. Parametrii sunt nume, în timp ce argumentele sunt valorile efective transmise funcțiilor. Exemple:

function areaRectangle (width, height) {
alert (“The area is  ” + (width * height) + “  feet.”);
}
areaRectangle(10, 20);

În primul exemplu, parametrii de lungime și lățime au fost transmiși funcției. În cel de-al doilea exemplu, argumentele 10 și 20 au fost transmise către funcția invocată.

Notă: Argumentele pot fi, de asemenea, variabile.

Statementul return

În JavaScript, un statement return oprește rularea unei funcții și returnează valoarea rezultantă a funcției. De asemenea, valorile returnate pot fi stocate în variabile.

Exemplu:

function addNumbers(a, b) {
     return a + b;
}
var x = addNumbers (2, 4);

Atunci când funcția întâlnește un statement return, părăsim funcția după ce valoarea este returnată. Valoarea returnată de 6 va fi stocată în variabila x.

Funcții în variabile

Funcțiile pot fi salvate ca valoarea unei variabile. Și puteți să chemați/invocați funcția utilizând numele variabilei, urmat de paranteze.

Exemplu:

var subtract = function (a, b) {
return a - b;
}
var answer = subtract(5, 3);

Parametrii a și b sunt transmiși către funcție.

În fragmentul de cod, keywordul return arată că valoarea lui a – b va fi returnată înainte de oprirea execuției codului. În ultima linie, observăm că funcția subtract este apelată, cu argumentele 5 și 3. Valoarea returnată de 2 este apoi stocată în variabila answer.

Funcții anonime

O funcție fără nume este o funcție anonimă.

Funcțiile stocate în variabile nu necesită nume de funcții pentru că ele sunt invocate cu numele variabilelor. Întrucât aceste funcții stocate în variabile rezidă acolo unde în mod normal ar exista expresii, ele se numesc expresii funcție (function expressions).

Exemplu:

var area = function(width, height) {
return width * height;
};
var answer = area(5, 10);

Domeniul de aplicare a variabilelor

Locația variabilelor determină capacitatea pe care o aveți de a le utiliza.

Variabile locale/Variabile la nivel de funcție:

  • Variabile inițializate în cadrul unei funcții utilizând keywordul var
  • Puteți utiliza aceste variabile doar în cadrul acestei funcții
  • Au domeniu de aplicare local/la nivel de funcție
  • Sunt șterse la finalizarea funcției
  • Diferite funcții pot avea în comun nume de variabile locale, pentru că o variabilă locală nu afectează spațiul din afara funcției
  • Parametrii funcției se comportă ca variabile locale

Variabile globale:

  • Variabile ințializate în afara unei funcții
  • Pot fi utilizate oriunde
  • Au domeniu de aplicare global
  • Sunt șterse atunci când pagina este închisă
  • Atenție: pot cauza conflicte de denumire
  • Atenție: orice variabile nedeclarate cu keywordul var, automat devin globale ca domeniu de aplicare

Exemplu:

function findSum(num1, num2) {
var sum = num1 + num2;
return sum;
}
var answer = findSum (2, 5);

*var sum este o variabilă locală pentru că a fost declarată în cadrul funcției, utilizând keywordul var

*var answer este o variabilă globală pentru că a fost creată în afara funcției

Obiecte

Obiectele permit organizarea variabilelor JavaScript. Un obiect JavaScript are proprietăți, la fel ca un obiect material. Dacă o proprietate se leagă de comportamentul obiectului și are o funcție drept valoarea sa, această proprietate se numește metodă – o acțiune pe care un obiect o poate realiza sau care poate fi realizată asupra lui.

JavaScript are o serie de obiecte native, și, de asemenea, vă puteți crea propriile obiecte. De asemenea, obiectele pot fi variabile. Obiectele JavaScript nu pot fi comparate între ele.

Fiecare proprietate sau metodă a unui obiect are propriul său nume și propria valoare. Pentru obiectele JavaScript, numele se cheamă chei. Obiectele pot deține doar nume de chei unice, pentru că fiecare cheie este legată de o anumită valoare. Valoarea unei proprietăți poate fi un string, număr, valoare booleană, șir, sau un alt obiect. Valoarea unei metode este întotdeauna o funcție. Proprietățile și metodele obiectelor se află între acolade.

Exemplu:

var Car = {
make: Honda
model: Fit
year: 2012
talk: function(){
alert(%u201Cvroom, vroom!%u201D);
}
};

make, model și year sunt variabile numite proprietăți.

talk este o metodă – un tip de proprietate a cărei valoare este o funcție.

Accesarea proprietăților și metodelor

Proprietățile și metodele obiectelor pot fi accesate prin intermediul sintaxei dot (cu punct).

Pentru a accesa proprietatea unui obiect:

objectName.propertyName

Pentru a accesa metoda unui obiect:

objectName.methodName()

 

car.make;
Honda
car.model;
Fit
car.talk();

Se declanșează o alertă cu fraza “vroom, vroom!”

Reatribuirea și crearea de proprietăți

Se pot reatribui proprietățile obiectului.

car.make=”Toyota”;

Se pot crea proprietăți noi.

car.color=”black”;

Obiecte imbricate

Creează un obiect care este proprietatea unui alt obiect.

var person = { hair: “blonde”, eyes: “brown” }; person.name = { first: "Paris", last: "Jones" };

Se poate, de asemenea, crea un obiect gol și apoi atribui lui proprietăți și metode.

var person = {}; person.hair = {“brown”}; person.talk = function () { alert("Hello!"); };

Obiecte native

JavaScript are anumite obiecte native, cu operații utile.

Obiectul Math

Acesta are metode pentru diverse tipuri de calcule, cum ar fi următoarele:

Math.log() – returnează algoritmul natural

Math.random() – returnează un număr aleatoriu între 0 și 1

Math.round() – rotunjește la cel mai apropiat număr întreg

Math.sqrt() – întoarce rădăcina pătrată

Obiectul Date

Acesta oferă informații despre zi, dată și timp.

Format: dateObject.method()

Exemple de metode:

getFullYear() – returnează anul (din patru cifre)

setDate() – setează ziua sub formă de număr (1-31)

Create New Date Object (cu keyword nou):

new Date( ) – creează un nou obiect date cu data și timpul curente

Obiectul String

Obiectul String posedă numeroase proprietăți și metode, cum ar fi următoarele:

Proprietăți

Format: stringName.property()

length() – lungimea unui string

Metode

Format: stringName.method()

charAt() – returnează caracterul la poziția index specificată

indexOf() – returnează poziția index a primei ocurenț a unui anumit caracter într-un string; returnează -1 dacă nu este găsit caracterul

replace() – înlocuiește o valoare specifică dintr-un string cu o alta

search() – caută o anumită valoare într-un string și returnează poziția index

Dacă un parametru e negativ, poziția se numără de la finalul stringului.

toLowerCase() –  returnează un string cu toate literele mici

toUpperCase() – returnează un string cu toate literele mari

Notă: Metodele string nu modifică stringurile originale; ele doar returnează stringuri noi.

Obiectul Număr

Proprietăți

Format: Number.PROPERTY

MAX_VALUE – returnează cea mai mare valoare posibilă pentru un număr JavaScript

MIN_VALUE – returnează cea mai mică valoare posibilă pentru un număr JavaScript

NEGATIVE_INFINITY – reprezintă minus infinit

POSITIVE_INFINITY – reprezintă plus infinit

NaN – reprezintă o valoare ne-numerică

Metode

Format: Number.Method

variableName.toString()

literal.toString()

toExponential()  – returnează string cu numărul în notație exponențială

toFixed() – returnează string cu numărul cu un anumit număr de zecimale

toPrecision() – returnează string cu un număr având o anumită lungime

toString() – returnează numărul în format string

valueOf() – returnează valoarea unui număr

Notă: Metodele număr nu modifică variabila originală.

Metode globale

Aceste metode se aplică la orice tip de date în JavaScript. Următoarele metode pot fi utilizate cu numere.

Number() – returnează valoarea numerică a variabilelor convertite

Exemple:

Number(true); – returnează 1

Number(false); – returnează 0

Number(“10”); – returnează 10

 

parseInt() – returnează un număr întreg după parsarea unui string și returnează un număr întreg. Doar primul număr este returnat.

Exemple:

parseInt(“25”); – returnează 25

parseInt(“25.5”); – returnează 25

parseInt(“25 30 35”); – returnează 25

parseInt(“25 miles”); – returnează 25

parseInt(“miles 25”); – returnează NaN pentru că nu este posibilă conversia

NaN

NaN este un cuvânt rezervat din JavaScript pentru a identifica o valoare non-numerică. Aici sunt câteva instanțe de valori ale NaN.

Calcule matematice cu stringuri non-numerice

Exemple:

var sum = 10 + “Chevy”; – returnează NaN

*Dacă stringul ar fi conținut o valoare numerică, un număr ar fi fost returnat.

Operații matematice cu NaN

var num1 = NaN;

var num2 = 10;

var Sum = num1 + num2;

*Notă: Un fapt interesant este că NaN este un număr, iar typeof NaN returnează “number”.

isNaN( ) Method

Această funcție determină dacă o anumită valoare este NaN.

Exemplu:

isNaN(“string”); – returnează true

Șiruri (array)

Șirurile sunt liste constând în orice tip de date. Fiecare item din șir are atribuit un număr index, începând cu 0. Indicele permit găsirea ușoară a unui item din șir – denumit element.

Crearea șirurilor

Sintaxa array-literală

var newArray = [ ];
var bestFriends = [‘Dan’, ‘Marcy’, ‘Corey’];

Utilizarea keywordului nativ JavaScript New

var bestFriends = new Array(‘Dan’, ‘Marcy’, ‘Corey’];

*Pentru eficiență, este mult mai bine să utilizați sintaxa array-literală când creați șiruri noi.

Recuperarea șirurilor

Sintaxa cu paranteze pătrate

bestFriends[2]; – returnează Corey, care este la poziția index 2 în șirul bestFriends

Setarea valorilor pentru șir

bestFriends[1] = ‘Becky’; – înlocuiește ‘Marcy’ cu ‘Becky’ în șirul bestFriends, pentru că se afla la poziția index 1

Proprietăți

  • Lungime

bestFriends.length; – returnează 3, numărul de elemente din șir

Metode

Șirurile au multe metode utile. Aici sunt câteva dintre cele mai populare.

  • Push
  • bestFriends.push(‘Paris’); – adaugă ‘Paris’ la finalul șirului bestFriends
  • Pop
  • bestFriends.pop(); – înlătură ultimul element din șir
  • Sort
  • bestFriends.sort(); – sortează elementele șirului în ordine alfabetică

*În șiruri, spațiile și liniile noi nu sunt importante. O declarație se poate întinde pe mai multe linii.

Un șir poate deține diferite tipuri de obiecte

Pentru că șirurile sunt tipuri speciale de obiecte, ele pot deține variabile de tipuri diferite, cum ar fi funcții, obiect și șiruri, simultan.

Exemplu:

var testArray = [“tree”, 12, [1, 2, 3]];

Șirurile sunt obiecte speciale

Deși obiectele JavaScript folosesc de obicei indexuri nominale, în cazul stringurilor și șirurilor se folosesc unele numerice. Operatorul typeof returnează obiect, pentru că un array este un tip special de obiect.

Iterarea prin elementele unui șir

După cum am menționat mai sus, bucla for se utilizează frecvent pentru a itera printr-un șir.

Exemplu:

var names = [“Eli”, “Niamh”, “Arebeth”];
for(var i = 0; i < names.length; i++) {
alert(“Hi ” + names[i]);
}

Valorile primitive

Valorile primitive nu dețin status și metode ale obiectelor. În JavaScript, există 6 tipuri primitive de date: string, număr, simbol, Boolean, null și nedefinit. Primitivele nu pot fi modificate.

Obiectele înveliș primitive

Toate valorile primitive, cu excepția celor null și nedefinite, posedă învelișuri în jurul lor care sunt echivalente obiectelor. Atunci când aplicăm metoda valueOf( ), valoarea primitivă este returnată.

Crearea obiectelor

Obiectul Literal

Notația Literal este cea mai des utilizată metodă de creare a obiectelor JavaScript. Obiectul este stocat într-o valoare cu un nume, și constă în perechi key:value (cheie:valoare), cu proprietăți și metode separate de virgule.

Exemplu:
var person = {

firstName: %u201CAbraham%u201D,
lastName: %u201CHall%u201D,
age: 31,
hairColor: %u201Cblack%u201D

};

Notă: Liniile noi și spațiile nu afectează codul.

Notația Constructor

Puteți de asemenea să creați obiecte JavaScript cu keywordul new și obiectul constructor. Această metodă duce la crearea unui obiect gol, la care apoi puteți adăuga proprietăți și metode.

Mai întâi, creați o variabilă care are o valoare ce combină keywordul new și obiectul constructor.

var car = new Object( );

Acum, puteți adăuga proprietăți și metode cu sintaxa cu punct.

car.make = ‘Hyundai’;
car.model = ‘Sonata’;
car.talk = function() {
alert(“Vroom, Vroom!”);
}

Notă: Evitați declararea stringurilor, numerelor și expresiilor boolean ca obiecte. Aceste obiecte ar cauza întârzieri în timpul de execuție și ar complica inutil codul.


 

Ghid preluat și tradus cu permisiunea Udemy

Udemy este o comunitate online globală de instructori și cursanți, care oferă peste 32 000 de cursuri online pe diverse teme, de la programare la fotografie. Disponibile în mai mult de 80 de limbi de predare, cursurile Udemy sunt predate de instructori calificați și sunt oferite on-demand, astfel încât cursanții le pot urmări în ritmul propriu de pe orice suport online.