În Tutoriale

Programarea în JavaScript: Ghid introductiv (II)

logo JavaScript

În această parte a tutorialului marca Udemy, vom introduce câteva noțiuni de bază din terminologia JavaScript: variabile, operatori și condiționale.

Valori

JavaScript are două tipuri de valori: Fixe și Variabile.

Fixe (sau Literale)

Numere

Zecimalele sunt opționale.

15.25 → corect

1500 → corect

Stringuri

Constau în text încadrat de ghilimele simple sau duble.

‘Jenny Smith’ // în ghilimele simple

“Jenny Smith” // în ghilimele duble

Variabile

Acestea se comportă ca niște containere pentru păstrarea de valori. Keyword-ul var trebuie utilizat pentru definirea / declararea unei variabile. Variabilelor li se atribuie valori cu ajutorul semnului =.

var age; // declararea variabilei

age=30; // atribuirea unei valori

Comentariile

Inserarea de comentarii în cod este recomandată din multiple motive:

  • Facilitează citirea și înțelegerea codului și de către alte persoane decât autorul lui
  • Te ajută să îți amintești ce anume face codul tău și care a fost procesul de gândire din spatele lui
  • Previn execuția în timp ce se testează cod alternativ

Comentarii pe o singură linie

Pentru comentarii care ocupă o singură linie, se folosește // înaintea comentariului. Interpretul JavaScript nu va procesa nimic din ce urmează după slash-uri.

//Acesta este un comentariu pe o singură linie.
Alert(%u201CHappy Birthday!%u201D);

Comentarii pe mai multe linii

Pentru comentarii care se întind pe mai mult de o linie, trebuie să puneți la începutul textului /* și la final */

Exemplu:

/*Acest comentariu
ocupă mai mult de o linie
pentru că am multe de spus
despre această porțiune de cod.
*/
function myBirthday {
Alert(%u201CHappy Birthday!%u201D);
Document.getElementById(%u201Cmessage%u201D).innerHTML =
%u201CYou%u2019re one year wiser!%u201D;
}

Variabile

După cum spuneam mai sus, variabilele se utilizează pentru păstrarea valorilor datelor.

Declararea variabilelor

Primul pas în lucrul cu variabile este declararea lor, astfel încât interpretul să știe că doriți să le utilizați. Aceasta se face prin folosirea keyword-ului var. Exemplu:

var quantity;
var x;
var myAge;

Identificatori

În exemplele de mai sus, denumirile variabilelor, numite și identificatori, sunt quantity, x și myAge.

Identificatorii trebuie să fie unici și să urmeze aceste reguli generale:

  • Să înceapă cu o literă, underscore (_) sau $
  • Se pot folosi cifre (0-9)
  • Sunt case sensitive
  • Nu pot fi alcătuiți din cuvinte rezervate, cum ar fi keywordurile JavaScript (mai multe despre keywordurile rezervate în următoarea secțiune)

Atribuire

Puteți atribui o valoare unei variabile cu ajutorul operatorului de atribuire, semnul egal (=). Exemplu:

var quantity = 10;
var x = 12;
var myAge = 30;

Până în momentul când i se atribuie o valoare, o variabilă este nedefinită.

Inițializare

Inițializarea are loc doar atunci când unei variabile i se atribuie o valoare pentru prima oară.

Mutabilitate

Puteți modifica valoarea unei variabile existente cu ajutorul operatorului de atribuire.

var quantity = 10;
var quantity = 20;

Acest cod modifică valoarea variabilei quantity de la 10 la 20.

Tipuri de date

Stringuri

  • Încadrate de ghilimele simple sau duble
  • Pot conține litere și alte caractere, de exemplu: ‘Bună dimineața!’
  • Caractere speciale

Caracterul \escape

În JavaScript, pot apărea confuzii atunci când lucrăm cu stringuri și ghilimele interne, pentru că toate stringurile trebuie să fie încadrate între ghilimele. Interpretul JavaScript poate să vadă ghilimelele interne ca și începutul sau finalul stringurilor. Pentru a evita astfel de probleme, putem să utilizăm caracterul \escape, care transformă caracterele speciale în caractere de tip string.

Exemple:

var greeting = “What\’s up?”;
var question =  ‘Have you read \”The Hobbit\”?’;

Mai jos sunt alte caractere speciale care pot fi folosite ca și stringuri prin utilizarea \escape:

\\                   backslash

\b                  backspace

\n                  go to a new line

\t                   tab

Numere

Numere întregi: ex. 10

Zecimale: ex. 0.9

Numere negative: ex. -278

Notație științifică: 123e-5

Notă: Dacă puneți numere în ghilimele simple sau duble, valorile vor fi interpretate ca stringuri.

Expresii de tip boolean

Pot avea două valori posibile: True sau False.

Pot fi folosite pentru a menționa când anume să se execute anumite porțiuni de cod.

Array-uri

Conțin o listă de valori. Lista este inclusă între paranteze. Valorile sunt încadrate de ghilimele și sunt separate prin virgule.

Exemplu:

var culori = [“Alb”, “Albastru”, “Verde”];

Indexurile array-urilor sunt zero-based, adică poziția de index a primului element este 0. În exemplul de mai sus, poziția index a lui “Alb” este 0, și cea a lui “Verde” este 2.

Obiecte

Fiecare obiect își are propriile proprietăți și comportamente. Obiectele sunt reprezentate sub formă de perechi nume:valoare, separate de virgule și încadrate între acolade.

Exemplu:

var car = {carMake: “Toyota”, carModel: “Prius”, year: 2012, extColor: “black”};

Obiectul “car” de mai sus are proprietățile carMake, carModel, year și extColor.

Simboluri

Tip de date unic și imuabil. Adăugat ca nou tip de date în ECMAscript6. Poate fi utilizat ca un identificator unic, non-string, pentru proprietățile obiectelor, ceea ce previne coliziunile de nume (mai multe despre obiecte și proprietăți, mai târziu în cadrul acestui tutorial).

Pentru a crea un simbol, trebuie să folosiți funcția pentru simboluri (vom discuta despre funcții într-o secțiune ulterioară).

Exemplu:

var firstName = Symbol( );

Acest cod asigură existența unui identificator unic, non-string, sub formă de simbol, pentru proprietatea firstName.

Variabile nedefinite (undefined)

După cum am menționat mai sus, variabilele nedefinite sunt cele cărora nu le-a fost atribuită o valoare. În acest caz, valoarea lor este undefined.

Puteți modifica valoarea unei variabile în undefined atribuindu-i valoarea undefined.

Notă: Un string gol nu este nedefinit. El are o valoare și un tip. Exemplul de mai jos are tipul string și valoarea “ ”.

Exemplu:

var person = “ ”;

Puteți seta un obiect ca având valoarea undefined, ceea ce va modifica de asemenea tipul său ca fiind undefined.

Null

Echivalent cu “nu există”. O curiozitate din JavaScript este că tipul lui null este object, în loc de null.

Puteți seta valoarea unui obiect pentru a fi null, deși tipul lui va fi în continuare obiect.

Null și Undefined nu sunt același lucru.

Tipuri dinamice de date

Tipurile de date din JavaScript sunt dinamice, însemnând că o variabilă poate fi utilizată sub forma a diverse tipuri. Exemple:

var x = 12; (tipul este number)
var x = „Car”;  (tipul este string)
var x; (tip nedefinit)

Operatorul typeof

Operatorul typeof vă ajută să determinați tipul unei variabile. Exemple:

typeof {carMake: %u2018Toyota%u2019, year: 2012}   (returnează object)
typeof %u201CJohn%u201D                            (returnează string)
typeof -750                                        (returnează number)

Notă: JavaScript consideră un șir ca un obiect special. În consecință, folosirea operatorului typeof pe un șir va returna un obiect.

typeof [%u201Cred%u201D,%u201Dwhite%u201D,%u201Dblue%u201D] (returnează Object)

Expresii

Expresiile pot fie să atribuie o valoare unei variabile, fie să reducă multiple valori la una singură.

Atribuire

var person = %u2018Jenni%u2019;

* Această expresie atribuie valoarea Jenni variabilei person.

Evaluarea

var sum = 5 + 5 + 0;

*Această expresie evaluează suma la 10.

Ordinea

Expresiile din JavaScript sunt evaluate de la stânga la dreapta. Ordinea contează!

Exemple:

var x = 98 + 1 + “Red Balloons”

*Evaluează la 99RedBalloons.

*Primele două valori au fost evaluate ca numere și apoi adăugate la string.

var y = “Red Balloons” + 98 + 1

*Evaluează la Red Balloons981.

*Pentru că expresia începe cu un string, toate valorile sale sunt tratate ca stringuri.

Un singur statement, mai multe variabile

Nu sunteți limitați la o singură declarație per statement. Pentru declarații multiple într-un singur statement, începeți cu keywordul var și utilizați virgule pentru a separa variabilele unice. De asemenea, o declarație poate utiliza mai mult de o linie.

Exemple:
var student = %u201CJohn%u201D, studentScore = 100;
var student = %u201CJohn%u201D,
var studentScore = 100;

Keyworduri rezervate

Cuvintele rezervate din JavaScript nu pot fi utilizate pe post de identificatori, pentru că au înțelesurile lor de sine stătătoare. În prezent, keywordurile rezervate din JavaScript sunt cele listate mai jos:

  • break
  • case
  • catch
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • export
  • extends
  • finally
  • for
  • function
  • if
  • import
  • in
  • instanceof
  • let
  • new
  • return
  • super
  • switch
  • this
  • throw
  • try
  • typeof
  • while
  • with
  • yield
  • var
  • void

Keyworduri viitoare

Aceste keyworduri nu au în prezent înțelesuri intrinseci în JavaScript, dar s-ar putea să aibă în viitor. De aceea, nici ele nu pot juca rol de identificatori.

  • enum
  • await

Mai jos sunt cuvinte rezervate ca și keyworduri viitoare doar în modul strict. Modul strict plasează restricții în cod pentru a ajuta verificarea erorilor.

  • implements
  • interface
  • package
  • private
  • public
  • protected
  • static

De asemenea, este de evitat utilizarea pe post de identificatori a numelor de funcții sau obiecte native din JavaScript (ex.: string).

Operatori

Operatori și operanzi

Când evaluăm expresii matematice, numerele sunt numite operanzi. Operația specifică se realizează printr-un operator. Exemplu:

100 + 75
Operand Operator Operand

Operatori matematici

Operatorii matematici pot fi utilizați împreună cu numerele în formă literală sau variabilă.

Adunarea (+)

Însumarea de numere. Exemplu:

var x = 10;
var y = 20;
var z = x + y

*evaluează la 30

Scăderea (-)

Exemplu:

var x = 10;
var y = 5;
var z = x – y;

*evaluează la 5

Înmulțirea

Exemplu:

var x = 10;
var y = 5;
var z = x * y;

*evaluează la 50

Împărțirea

Exemplu:

var x = 10;
var y = 5;
var z = x/y;

*evaluează la 2

Modulo

Realizează împărțirea cu rest.

Exemplu:

var x = 101;
var y = 2;
var z = x % y;

*evaluează la 1

Increment (++)

Incrementează numerele cu 1.

Exemplu:

var x = 1;
x++;
var y = x;

*evaluează la 2

Decrement (–)

Decrementează numerele cu 1.

Exemplu:

var x = 2;
x–;
var y = x;

*evaluează la 1

Precedența

Precedența operatorilor aritmetici

Atunci când evaluăm expresii aritmetice, este crucial să știm ordinea corectă de precedență pentru diverse tipuri de operații.

Mai jos este lista lor – de la cel mai important la cel mai puțin important:

  • ( )
  • Evaluează tot ce se află între paranteze.
  • ++ –
  • Increment și Decrement
  • * / %
  • Înmulțire, Împărțire și Modulo (Împărțire cu rest)
  • + –
  • Adunare și Scădere

Exemple:

var x = (200 / 2) – 3 % 2;

*Mai întâi realizează operația dintre paranteze, care evaluează la 100

*Apoi, realizează operația modulo, care evaluează la 1

*În cele din urmă, scade 1 din 100 și obține rezultatul 99

Operatori de atribuire

Valoarea unei variabile poate fi schimbată de un număr nelimitat de ori, utilizând atribuirea. Pentru aceasta, trebuie doar să legați o variabilă (fără a mai utiliza keywordul var, pentru că ați declarat deja variabila) de o valoare, folosind semnul egal. Exemplu:

var car = Toyota
car = Honda

*Noua valoare a variabilei car este Honda.

În plus față de semnul egal ca operator de atribuire, mai există încă cinci operatori de atribuire care oferă valori variabilelor din JavaScript, după cum urmează.

+=

Acest operator adaugă valoarea din dreapta operatorului la cea din stânga lui. Exemplu:

var x = 1;
x += 10; // echivalent cu 10 + 1

*evaluează la 11

-=

Acest operator scade valoarea din dreapta din valoarea din stânga. Exemplu:

var x = 10;
x += 1; // echivalent cu 10 – 1

*evaluează la 9

*=

Acest operator înmulțește valoarea din stânga cu valoarea din dreapta lui. Exemplu:

var x = 10;
x *= 1; // echivalent cu 10 * 1

*evaluează la 10

/=

Acest operator împarte valoarea din stânga la valoarea din dreapta lui. Exemplu:

var x = 10;

x /= 1; // echivalent cu 10 / 1
*evaluează la 10

%=

Acest operator inițiază operația modulo utilizând valorile din stânga și din dreapta operatorului %. Exemplu:

var x = 10;
x %= 3; // echivalent cu 10 % 3

*evaluează la 1

Operatori tip string

Concatenarea

Puteți să alipiți stringuri unul altuia. Acest proces, legarea stringurilor la capete, se numește concatenare, și poate fi utilizat cu literale sau variabile. Exemple:

var fullName = “Shilpa” + “ ” + “Kumar”

Expresia evaluează la Shilpa Kumar.

Fără valoarea intermediară “ “, expresia ar fi evaluat la ShilpaKumar, pentru că stringurile concatenate sunt alipite la capete.

var firstName = “Shilpa”;
var lastName = “Kumar”;
var fullName = firstName + “ “ + lastName

* evaluează la Shilpa Kumar

var numberString = “19” + 9 + 9

*evaluează la 1999

Rețineți că numerele adăugate la o valoare dominantă a unei expresii de tip string vor fi tratate ca stringuri.

Operatorul de atribuire +=

Acest operator poate fi folosit și pentru concatenare. Exemplu:

greeting1 = “Hello, “;
greeting1 += “Abraham.”; // echivalent cu greeting1 + “Abraham.”

*evaluează la Hello, Abraham.

**Observați spațiul de după virgula din greeting1. Rețineți: Stringurile se concatenează la capete fără spații, așadar trebuie să le includeți pe acestea în stringurile de concatenat, dacă sunt necesare.  

Operatori comparativi

Compararea de valori este importantă în executarea corectă a codului. Acest proces utilizează logica, ceea ce implică utilizarea unui boolean, după cum a fost discutat mai sus. Aceasta presupune că doar două rezultate sunt posibile: adevărat sau fals.

Există un grup de operatori care implică doar booleeni. Aceștia compară valorile din stânga și din dreapta lor și returnează o valoare booleană: adevărat sau fals.

Mai jos este o listă a operatorilor comparativi din JavaScript:

== egal cu // egalitate aproximativă

Returnează adevărat dacă valorile din stânga și din dreapta lui sunt identice, indiferent de tipul lor.

“21” == 21 // returnează adevărat, chiar dacă “21” este un string, iar 21 este un număr

[2 , 4] == “2,4” // returnează adevărat, chiar dacă [2 , 4] este un array și “2, 4” este un string

=== valoare și tip egal // egalitate strictă

Returnează adevărat doar dacă valorile și tipurile sunt identice..

“10” === 10 // returnează fals pentru că “10” este un string, iar 10 este un număr

[1, 2, 3] === [1, 2, 3] // returnează adevărat pentru că valorile și tipurile sunt identice

Notă: În majoritatea cazurilor va trebui să utilizați === egalitate strictă atunci când comparați pentru egalitate.

!= nu este egal

Returnează adevărat dacă valorile nu sunt identice.

x = 10;

x != ‘10’ // returnează fals pentru că valorile x (10) și ‘10’ sunt identice, în ciuda diferenței de tipuri.

!== nu este egal ca valoare sau tip

x = 10;

x !=== ‘10’ // returnează adevărat pentru că tipurile sunt diferite, x (10) este un număr, iar ‘10’ este un string – în ciuda valorilor identice.

> mai mare decât

Returnează adevărat dacă operandul din stânga este mai mare decât operandul din dreapta.

8 > 10 // returnează fals

< mai mic decât

Returnează adevărat dacă operandul din stânga este mai mic decât operandul din dreapta.

8 > 10 // returnează adevărat

>= mai mare sau egal cu

Returnează adevărat dacă operandul din stânga este mai mare sau egal cu operandul din dreapta.

10 >= 10 // returnează adevărat

<=  mai mic sau egal cu

Returnează adevărat dacă operandul din stânga este mai mic sau egal cu operandul din dreapta.

9 <= 10 // returnează adevărat

Operatori logici

Operatorii logici sunt utilizați atunci când comparăm rezultatul mai multor operatori comparativi.

&& (And)

Returnează adevărat doar atunci când toate condițiile sunt îndeplinite.

(( 4 > 2 ) && (5 <= 5)) // returnează adevărat pentru că ambele comparații returnează adevărat

|| (Or)

Returnează adevărat dacă cel puțin una dintre condiții returnează adevărat.

((5 < 1) || (1 = 1)) // returnează adevărat pentru că, condiția din partea dreaptă este întrunită

! (Not)

Atunci când precedă o expresie, îi inversează sensul.

!(5 >= 5) // returnează fals pentru că expresia returnase adevărat inițial, atunci când nu avea !

Constrângerea de tip

JavaScript câteodată utilizează automat procesul constrângerii de tip pentru a modifica tipul de date al unei valori, în scopul efectuării unei operații. Exemplu:

‘10’ < 100 // Stringul ‘10’ ar putea fi constrâns într-un tip numeric pentru a returna adevărat în cazul acestei expresii.

Constrângerea de tip poate duce la erori și la valori neașteptate. Pentru a evita acestea, se recomandă ca operatorii de egalitate strictă === și !== să fie utilizați atunci când se compară două valori.

Condiționale

După cum spuneam mai sus, computerele folosesc logica pentru a rula porțiunile de cod potrivite la momentele potrivite, pe baza rezultatelor comparațiilor. Pentru a facilita acest proces, trebuie să folosim condiționalele – expresii care dictează acțiunile care să fie făcute după comparații.

Expresiile tip if

Dacă o condiție este întrunită, un anumit bloc de cod ar trebui să ruleze. Exemplu:

If (4 > 2) {
De vreme ce condiția este îndeplinită, codul din acest bloc trebuie să se execute.
}

Expresiile if-else

Sunt oarecum similare cu expresia If. Ca diferență, dacă nu se întrunește condiția, în loc să nu execute porțiunea de cod de după If, execută un fragment alternativ de cod. Exemplu:

If (4 < 2) {
Execută acest fragment de cod.
}
Else {
Execută fragmentul acesta alternativ de cod.
}

Expresiile else-if

O expresie else-if se execută doar în cazul în care condiția anterioară nu este realizată. Dacă acea condiție a expresiei if-else nu se realizează, se va executa codul de după else. Exemplu:

if (4 < 2) {
Execută acest fragment de cod.
}
else if {
Execută acest al doilea fragment de cod.
}
else {
Execută acest al treilea fragment de cod.
}

Expresiile tip switch

Variabila – valoarea switch – determină ce caz să se execute. Expresia switch are loc într-un singur bloc de cod, cu punct și virgulă de separare a cazurilor unele de altele. O opțiune implicită rulează dacă valoarea switch nu se potrivește cu nici unul dintre cazuri. Exemplu:

var salut;
var zi = ‘luni’;
switch(zi) {
case ‘luni’:
salut = ‘Happy Monday!’;
break;
case ‘vineri’:
salut = ‘TGIF!’;
break;
default:
salut = ‘Good Morning!’;
break;
}

* Dacă valoarea switch ar fi luni, cazul ‘luni’ s-ar executa, modificând salutul în Happy Monday! Atunci, keywordul break de la finalul acelui caz ar spune interpretului JavaScript că s-a încheiat cu această expresie switch și că poate să meargă mai departe.


 

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.