Sintaxa JavaScript partea 2/2

Interfete Web

Partea 1 a tutorialului o aveti la adresa: http://interfetze.blogspot.com/2008/11/sintaxa-javascript-partea-12.html

Nivel de dificultate: mediu

5. Operatorii:

În JavaScript, operatorii sunt în mare parte identici cu cei din C şi C++, şi anume:

a) operatori aritmetici:

operatorul de atribuire =
adunare +
scădere -
înmulţire *
împărţire /
modulo % (returnează câtul unei împărţiri întregi)
operatorul de incrementare ++ (adună 1 la valoarea operandului)
operatorul de decrementare -- (scade 1 din valoarea operandului)

Notă: operatorii de incrementare şi decrementare sunt operatori unari (necesită un singur operand), în timp ce toţi ceilalti sunt binari (lucrează cu doi operanzi). Ordinea de executare a operaţiilor este cea cunoscută din matematica clasica: operaţiile se execută de la stânga spre dreapta, cu operaţiile de înmulţire şi împărţire prioritare asupra adunării şi scăderii.

Operatorii ++ şi -- necesită puţină atenţie suplimentară, întrucât comportamentul lor diferă în funcţie de poziţia operatorului în raport cu operandul său. Astfel, considerând codul:

var a = 5;
if (a++> 5) a = 10; 

La rularea acestui script, valoarea lui a la final va fi 6, nu 10. De ce? Ei bine, poziţia operatorului ++ este după operand, ceea ce înseamnă că operaţia de incrementare va fi ultima din blocul său de operaţii, care în acest caz mai conţine comparaţia variabilei cu constanta 5. Adică întâi se compară, după care a se incrementează la 6. Efectuând însă doar o modificare minoră la cod, datele problemei se schimbă: 

if (++a> 5) a = 10; 

Rulând acest script, a va lua valoarea 10, deoarece în acest caz incrementarea se va efectua înaintea comparaţiei, moment în care a va avea valoarea 6, condiţia fiind îndeplinită.

b) operatori de comparaţie:

mai mic strict <>
mai mare sau egal >=
egal ==
diferit !=
strict egal ===
strict diferit !==

Atenţie! Reţineţi că operatorul care verifică dacă două valori sunt egale este reprezentat de un dublu semn 'egal' (==), 'egal'-ul simplu fiind operatorul de atribuire. Evitaţi confuzia între aceşti doi operatori!

Diferenţa dintre == şi ===, respectiv dintre != şi !==, este că la cele din urmă, typecasting-ul nu mai este efectuat înainte de comparaţie. 
Cu alte cuvinte, 5 == '5' va returna true, în timp ce 5 === '5' va returna false.

c) operatori logici - folosiţi în combinarea de valori logice (adevărat/fals): 

şi logic &&
sau logic ||
negare (non logic) !

Aceşti operatori se folosesc cel mai des în cazul combinării mai multor condiţii, în bucle sau structuri condiţionale. Spre exemplu:

if (a>= 4 && a <= 10) b = 7; else b = 10; 

În acest caz, variabila b va avea valoarea 7 doar atunci când a aparţine intervalului 4 - 10, orice altă valoare a lui a rezultând în atribuirea valorii 10 lui b.

6. Variabilele

În JS, variabilele nu trebuie declarate explicit. Declararea unei valori este echivalentă cu prima asignare de valoare identificatorului corespunzător. Până la acel moment identificatorul respectiv nu exista în structura script-ului, deci orice referire la el va genera o eroare:

var a = 0; // identificatorul 'a' devine accesibil
if (a == b) a = 1; // va genera o eroare, întrucât
// identificatorul 'b' nu exista în program 

Precedarea primei declarări a unei variabile cu cuvântul-cheie var e opţională, însă e recomandată din motive de compatibilitate, motoarele de interpretare a JavaScript-ului implementate în unele browsere necesitând acest cuvânt-cheie. 
După cum am mai spus, interpretorul JavaScript realizează typecasting-ul (conversia între tipuri) în mod automat, debarasând programatorul de această sarcină. Astfel, dacă rulăm următoarea secvenţă de cod, variabila v se va modifica conform comentariilor: 

var v = 2; // se initializează variabila v sub forma numărului întreg 2
v += 1.4; // v devine un număr real cu valoarea 3.4
v += '5'; // v se transformă într-un string, cu valoarea '3.45' 

Atenţie! Observăm aici două proprietăţi specifice JavaScript-ului:
- pentru concatenarea ('alipirea') cifrei '5' la variabila v, am folosit tot operatorul de adunare +, deoarece în JavaScript, + mai reprezintă şi operator de concatenare de şiruri de caractere. Reţineţi-l, deoarece îl veţi folosi destul de des.
- în ciuda aparenţelor, rezultatul ultimei operaţii nu este numărul real 8.4, ci un string (şir de caractere), cu valoarea '3.45'. Asta se întâmplă deoarece în JavaScript, typecasting-ul se desfăşoară prioritar în direcţia unui rezultat de tip string. Reţineţi şi această anomalie, întrucât, după cum vom vedea în tutorialele viitoare, majoritatea proprietăţilor obiectelor DOM-ului sunt reţinute în variabile de tip string.

Sursa: www.tutoriale.far-php.ro

Sintaxa JavaScript partea 1/2

Interfete Web

Partea a 2-a tutorialului o puteti gasi la adresa: http://interfetze.blogspot.com/2008/11/sintaxa-javascript-partea-22.html

Nivel de dificultate: mediu

In continuare avem un tutorial format din doua parti care are ca scop prezentarea elementelor de sintaxa din JavaScript.

Având în vedere că JavaScript este inspirat din Java, care la rândul său e inspirat din limbajul C, cele trei au o sintaxă foarte similară în ceea ce priveşte operatorii, structurile de control şi accesarea obiectelor, chiar identică în unele cazuri. Voi recapitula totuşi structurile de control, pentru cei care nu le cunosc sau au lucrat în alte limbaje de programare, 'non-C-like':

1. instrucţiunea multiplă
La fel ca în C sau Java, fiecare linie individuală din cod este considerată ca o instrucţiune. De asemenea, structurile condiţionale sau repetitive primesc ca şi obiect de executat o singură instrucţiune. Putem însă grupa execuţia mai multor instrucţiuni ca să fie văzute ca o succesiune unitară de execuţie (practic 'păcălim' compilatorul să le interpreteze ca pe o singură instrucţiune) încadrându-le cu o pereche de acolade { }.
Acoladele sunt folosite de asemenea pentru a delimita instrucţiunile care constituie corpul unei funcţii-utilizator. Nu voi elabora pe această temă, întrucât voi discuta mai pe larg într-unul din tutorialele următoare.

2. comentariile
La fel ca în C şi Java, JavaScript suportă două tipuri de comentarii: comentarii-bloc şi comentarii-linie. Acestea nu au nici o valoare reală pentru program (conţinutul lor nu afecteaza în nici un mod execuţia scriptului), fiind folosite mai mult pentru a realiza o documentare sumară a scriptului, în ideea de a găsi mai uşor o anumită secţiune de cod sau în ideea că scriptul scris de un programator va fi mai târziu modificat sau extins de un altul, înlesnindu-i acestuia lucrul şi înţelegerea algoritmului şi a variabilelor folosite.
De asemenea, comentariile sunt utile la depanarea programului, atunci când suspectăm o instrucţiune sau un bloc de cod că ar genera o anumită eroare: cea mai buna metodă de a confirma acest lucru este să eliminăm codul respectiv din program şi să vedem dacă eroarea mai apare. Ei bine, gândiţi-vă dacă e vorba de 20 sau chiar 50 de linii de cod, câtă muncă ar presupune dacă le-am şterge din program, constatând apoi că sursa erorii e alta, şi să fim nevoiţi să le scriem din nou... (da, ştiu şi eu de comanda 'Undo', însă ea nu este una pe care trebuie să ne bazăm 100% ). Drept urmare, cea mai simplă şi mai sigură metodă de a elimina temporar codul respectiv e să il 'comentăm'.

Revenind la subiect, cele două tipuri de comentarii din JavaScript sunt:
- comentarii-bloc: orice text cuprins între perechea de simboluri /* şi */ consecutivă
- comentarii-linie: textul aflat după simbolul // şi până la sfârşitul linei respective

3. structuri conditionale (branch-uri)
Blocurile condiţionale se folosesc pentru a determina devierea execuţiei programului în direcţii diferite, sau ne-executarea unei anumite secţiuni de cod, în funcţie de valoarea uneia sau mai multor variabile verificate ca şi condiţie.

a) blocul if - else
Blocul condiţional if - else se foloseşte în cazul în care dorim execuţia uneia din două variante, sau dorim ca o secţiune de cod să se execute doar în anumite condiţii. Sintaxa instrucţiunii este următoarea:

if (condiţie)
instrucţiune

//sau

if (condiţie)
instrucţiune1;
else
instrucţiune2; 

Condiţia poate fi orice expresie care poate fi evaluată logic (sub formă de 'adevărat' sau 'fals') - comparare, egalitate, inegalitate, combinaţie de operaţii logice etc. Reţineţi de asemenea că JavaScript realizează conversia între tipurile de variabile automat (automatic typecasting), drept urmare, chiar dacă expresia condiţiei nu e strict logicăa, se încearcă conversia ei la o valoare true sau false. Valorile null, 0 numeric, sau string-ul gol sunt evaluate la valoarea false, în timp ce orice altă valoare este evaluată la true.
Ramura else e opţională, ea putând lipsi, caz în care dacă nu se îndeplineşte condiţia, compilatorul continuă execuţia codului de la linia următoare blocului, practic 'sărind' peste instrucţiune. Instrucţiunea poate fi reprezentată de o singură instrucţiune efectivă sau de o instrucţiune multiplă.

var a = 3;
var b = 6;

if (a == b)
c = true;
else
c = false;

// in conditiile acestea, c va avea valoarea false

b) blocul switch
Switch se foloseşte atunci când expresia evaluată poate avea mai multe posibile valori. Practic un bloc switch e similar cu o succesiune de blocuri if - else.

switch (expresie) {
case valoare1 :
operatie1;
case valoare2 :
operatie2;
...
default :
operatie_implicita;
} 

În momentul în care compilatorul constată că expresia are una din valorile enumerate, va executa codul din bloc, începând de la eticheta corespunzătoare valorii (eticheta = o declaraţie "case valoare :" ). 
Atenţie, execuţia nu va ieşi din bloc la întâlnirea următoarei valori, ci va continua execuţia până la finalul buclei sau întâlnirea unei instrucţiuni break (aşa-numitul comportament 'fall-through' al instrucţiunii switch). Pentru a evita asta, fiecare cod aferent unei etichete trebuie finalizată cu o instrucţiune break.
Secţiunea default e opţională, iar când există, trebuie să fie ultima secţiune. Codul din această secţiune se execută atunci când expresia nu are nici una din valorile etichetelor din bloc, caz în care, dacă default lipseste, nu se va executa nimic.

4. structuri repetitive (bucle)
Structurile repetitive reprezintă instrucţiuni sau blocuri de instrucţiuni care sunt executate în mod repetat, atâta timp cât una sau mai multe condiţii sunt îndeplinite.

a) bucla for - repetiţie pe un număr stabilit de iteraţii
Atunci când o secţiune de cod se doreşte a fi repetată de un anumit număr de ori, cea mai convenabilă soluţie este încapsularea codului respectiv într-o buclă for. Sintaxa instrucţiunii for e următoarea:

for (iniţializare; condiţie; operaţie_la_final)
instrucţiune; 

Codul se execută în cazul unei bucle for în următorul mod:
1. se execută codul declarat la iniţializare
2. se verifică condiţia. Dacă această verificare returnează false, se iese din buclă
3. se execută instrucţiunea (sau blocul de instrucţiuni, în cazul unei instrucţiuni multiple)
4. se execută codul declarat în operaţie_la_final
5. se revine la pasul 2.

a = 1;
f = 10;
for (i = 1; i <= f; i = i + 1) { a = a * i; } 

Codul de mai sus ne calculează valoarea lui 10 factorial (1 * 2 * 3 * ... * 9 * 10), întrucât repetă operaţia de înmulţire a lui a cu i de 10 ori, i fiind incrementat cu 1 la fiecare ciclare.

b) buclele while şi do ... while
Aceste bucle se folosesc atunci când nu ne interesează câte iteraţii se realizează, ci doar ca acestea să se bucleze cât timp o condiţie e îndeplinită. Sintaxa lor e următoarea:

while (conditie)
instructiune;

// si

do
instructiune
while (conditie) 

Cele două blocuri sunt foarte similare, ambele executând codul până când condiţie returnează false, însă între ele există o diferenţă crucială: în cazul lui while, condiţia este verificată înainte de executarea instrucţiunii (astfel se poate, în funcţie de condiţii, ca bucla să nu cicleze nici măcar o dată), în timp ce do ... while execută întâi instrucţiunea, după care verifică condiţia, astfel instrucţiunea executându-se cel puţin o dată.

În oricare din buclele enumerate mai sus, execuţia poate fi controlată cu ajutorul unor instrucţiuni specifice, şi anume:
break - întrerupe ciclarea buclei şi continuă execuţia programului cu prima instrucţiune de după buclă
continue - întrerupe execuţia iteraţiei curente şi continuă execuţia programului de la începutul buclei

Sursa: www.tutoriale.far-php.ro