Sunteți pe pagina 1din 34

Programare WEB – Curs 1

1. INTRODUCERE

JavaScript este la ora actuală cel mai popular limbaj de programare


din lume, un limbaj de scripting folosit intensiv în web, la aproape orice
aplicație completă, din domeniul business, din domeniul comerțului
electronic sau chiar pentru gestionarea proceselor. Chiar dacă JavaScript
are aceeași metodologie de programare și o sintaxă similară, nu
reprezintă o versiune mai ușoară a lui Java ( de fapt nu are aproape nimic
în comun cu Java, numele similar a fost ales din motive de marketing.
Atunci când a fost introdus JavaScript, limbajul Java era bine cunoscut pe
piață și deja creștea în popularitate. Cineva s-a gândit că este o idee bună
să profite de acest succes).

JavaScript reprezintă un limbaj dinamic, compatibil cu toate


tipurile de browsere, ce permite o interacțiune îmbunătățită cu
utilizatorul deopotrivă pentru site-uri și aplicații web.

1.1. Scurt istoric

JavaScript a apărut în anul 1995. Principalul scop al limbajului a fost


extinderea capacităților HTML-ului cu programe, adică se verifica dacă
un câmp a fost lăsat gol sau o valoare introdusă dintr-un formular a fost
introdusă greșit sau e invalidă. S-a oferit o alternativă parțială la
utilizarea unui număr mare de scripturi pentru prelucrarea informațiilor

Page 1 of 34
Programare WEB – Curs 1

din formulare. La momentul acela, Netscape Navigator a încercat cu


ajutorul lui JavaScript, capacitatea de a putea valida datele unor clienți,
ceea ce a reprezentat o nouă caracteristică, la momentul în care să ne
aducem aminte de folosirea modem-urilor, a căror viteză de conectare
la server însemna de fiecare dată un exercițiu de răbdare. De atunci,
importanța limbajului JavaScript a crescut cu fiecare browser web
apărut. Nemaiavând legătură doar cu simpla validare, JavaScript
interacționează cu aproape toate aspectele ce se regăsesc în browsere.
La ora actuală, JavaScript este recunoscut ca un limbaj de programare,
capabil de interacțiuni și calcule complexe, ce includ de exemplu funcții
anonime sau meta-programare. JavaScript a devenit o parte atât de
importantă a web-ului, încât și browserele alternative precum cele de pe
mobile sau cele pentru utilizatorii cu dizabilități îl suportă. Chiar și
Microsoft, cu propriul script numit VBScript a inclus propria
implementare a lui JavaScript în Internet Explorer, încă de la prima
versiune a acestui browser.

Ascensiunea lui JavaScript de la un simplu validator de conținut


introdus până la limbajul de programare foarte puternic care este în
prezent nu a putut fi prezisă. Pe măsură ce web-ul a câștigat popularitate
a crescut și nevoia pentru dezvoltarea de limbaje de tip client-side
scripting. La acel moment de timp, majoritatea utilizatorilor de Internet

Page 2 of 34
Programare WEB – Curs 1

erau conectați la modem-uri de 28.8 kbps, cu toate că paginile web


creșteau în complexitate și mărime.

Brendan Eich, care lucra pe vremea aceea la Netscape , a început


să dezvolte un scripting language, limbaj numit Mocha și mai târziu
LiveScript pentru apariția lui Netscape Navigator 2 din 1995, cu intenția
de a le folosi pe amândouă: în browser și pe server (unde era numit
LiveWire). După lansarea limbajului Java, Netscape a realizat o alianță cu
firma Sun Microsystems, cu scopul de a crea un limbaj de script cu o
sintaxă și semantică asemănătoare cu a limbajului Java, pentru a termina
implementarea lui LiveScript la timp. Chiar înainte de apariția lui
Netscape Navigator 2, Netscape a schimbat numele lui LiveScript în
JavaScript pentru a putea valorifica atenția pe care o acorda presa lui
Java. Din cauză că JavaScript 1.0 a avut un asemenea succes, Netscape a
scos versiunea 1.1 pentru Netscape Navigator 3. Popularitatea acestuia
a fost atât de mare, încât Netscape s-a poziționat ca fiind lider între
companiile din piață. La acel moment de timp, Microsoft a decis să aloce
mai multe resurse pentru un browser mai competitiv, pe care l-a numit
Internet Explorer. La scurt timp după apariția lui Netscape Navigator 3,
în august 1996, Microsoft a introdus Internet Explorer 3 cu o
implementare a lui JavaScript numită JScript (numită astfel pentru a evita
orice posibile probleme legate de licență cu Netscape). Acest lucru
reprezintă un pas major în dezvoltarea lui JavaScript ca și limbaj.
Page 3 of 34
Programare WEB – Curs 1

Implementarea proprie a lui Microsoft a lui JavaScript a dus la două


versiuni: JavaScript din Netscape Navigator și JScript din Internet
Explorer. Spre deosebire de C și alte limbaje de programare, JavaScript
nu avea standarde pentru sintaxă sau caracteristici, astfel s-a ajuns la
decizia ca acest limbaj să fie standardizat.

În 1997, JavaScript 1.1 a fost trimis la European Computer


Manufacturers Association (ECMA) sub formă de propunere. Comitetul
tehnic #39 (TC39) a fost desemnat să-l standardizeze. Programatori de la
Netscape, Sun, Microsoft, Borland, NOMBAS și alte companii cu interes
în viitorul scripting-ului au așteptat standardul ECMA – 262 ce definea un
nou limbaj, numit ECMAScript. În următorul an, Organizația
Internațională pentru Standardizare și Comisia Internațională
Electrotehnică (ISO/IEC) au adoptat ECMAScript ca și standard ISO/IEC-
16262. Încă din acel moment, browserele au încercat să folosească
ECMAScript ca bază pentru implementările lui JavaScript.

1.2. Implementări ale lui JavaScript

O implementare completă a lui JavaScript este realizată din 3 părți


distincte: nucleul (ECMAScript), DOM (Document Object Model), BOM
(Browser Object Model).

Page 4 of 34
Programare WEB – Curs 1

ECMAScript, limbajul definit de ECMA – 262, nu este legat de


browsere. De fapt, limbajul nu are metode pentru input sau output.
ECMA – 262 definește acest limbaj ca și bază pentru limbajele de
scripting. Browserele de web sunt privite ca și medii gazdă în care pot
exista implementări ale lui ECMAScript. Extensii precum DOM folosesc
sintaxa limbajului pentru a oferi alte funcționalități care sunt specifice
mediului. Medii gazdă: NodeJS - o platformă JavaScript orientată spre
server și Adobe Flash.

La nivelul de bază, ECMA – 262 descrie următoarele părți ale


limbajului: sintaxă, tipuri, declarații, cuvinte cheie, cuvinte rezervate,
operatori, obiecte.

ECMAScript este descrierea unui limbaj ce implementează tot ceea


ce este descris în specificație. JavaScript dar și Adobe ActionScript
implementează ECMAScript.

Versiunile diferite ale lui ECMAScript sunt definite ca și ediții. Cea


mai recentă ediție a lui ECMA -262 este versiunea 5, din 03.12.2009, ce
introduce funcționalități noi, precum obiecte native de tip JSON pentru
parsarea și serializarea datelor JSON sau metode pentru moștenire .

Page 5 of 34
Programare WEB – Curs 1

Document Object Model (DOM) este o interfață API pentru XML


ce a fost extinsă pentru a fi folosită în HTML. DOM-ul mapează o pagină
întreagă ca o ierarhie de noduri. Fiecare parte dintr-o pagină HTML sau
XML este un anumit tip de nod ce conține tipuri diferite de date.

Prin crearea unui arbore pentru a reprezenta un document, DOM


permite dezvoltatorilor un nivel de control asupra structurii și
conținutului. Nodurile pot fi adăugate, eliminate, înlocuite și modificate
ușor folosind DOM API. Din cauză că Internet Explorer 4 și Netscape
Navigator 4 suportă fiecare forme diferite ale lui DHTML (Dynamic HTML)
dezvoltatorii pot altera forma și conținutul unei pagini web fără să o mai
reîncarce. Netscape și Microsoft aveau metode separate pentru a
dezvolta DHTML. Astfel, W3C a creat un standard pentru comunicații
web și anume DOM.

Page 6 of 34
Programare WEB – Curs 1

DOM Nivelul 1 a devenit o recomandare a W3C în 1998 , cu scopul de a


mapa structura unui document și conține 2 module:

-nucleul DOM (DOM Core), ce oferă o metodă pentru maparea structurii


unui document XML ce permite un acces ușor și manipularea oricărei
părți a documentului

-DOM HTML ce extinde nucleul DOM prin adăugarea de obiecte și


metode specifice HTML.

DOM Nivelul 2 reprezintă o extensie a DOM-ului original prin adăugarea


suportului pentru mouse și a evenimentelor specifice interfeței cu
utilizatorul și suport pentru CSS(Cascade Style Sheets) prin interfața
obiect. Nucleul DOM a fost extins pentru a include suport pentru spațiile
de nume XML. DOM Nivelul 2 introduce următoarele noi module: DOM
Views (documentul înainte și după aplicarea de CSS), DOM Events, DOM
Style, DOM Traversal and Range.

DOM Nivelul 3 extinde DOM-ul cu introducerea de metode pentru


încărcarea și salvarea documentelor într-o anumită formă (conține un
nou modul numit DOM Load and Save) și metode pentru validarea
documentului (DOM Validation). La nivelul 3, nucleul DOM este extins
pentru a suporta XML 1.0 (incluzând XML.Infoset, XPath și XML Base).

De notat: DOM nu este specific lui JavaScript, fiind implementat în


numeroase alte limbaje. Pentru browserele web, DOM a fost
Page 7 of 34
Programare WEB – Curs 1

implementat folosind ECMAScript. Se poate să întâlniți referințe despre


DOM Nivelul 0. Nu există un standard numit astfel, ci este o referință la
suportul original DHTML în Internet Explorer 4.0 și Netscape Navigator
4.0.

Pe lângă nucleul DOM (DOM Core) și interfețele DOM HTML, alte câteva
limbaje au propriul DOM standardizat. Pentru următoarele limbaje
fiecare DOM adaugă metode și interfețe unice specifice acelui limbaj:

- SVG (Scalable Vector Graphics) 1.0,

- MathML (Mathematical Markup Language) 1.0,

- SMIL (Synchronized Multimedia Integration Language).

Și alte limbaje au implementări proprii pentru DOM, precum Mozilla’s


XML User Interface Language (XUL). Cu toate acestea, doar limbajele din
lista de mai sus sunt recomandate de W3C.

Browserele Internet Explorer 3 și Netscape Navigator 3 au BOM


(Browser Object Model) ce permite accesul și manipularea ferestrei de
browser. Folosind BOM, dezvoltatorii pot interacționa cu browserul în
afara contextului paginii afișate. Ceea ce a făcut ca BOM să fie unic și
adesea problematic este faptul că nu are un standard. Acest lucru s-a
schimbat odată cu introducerea lui HTML 5, care a încercat o codificare
a lui BOM ca parte a unei specificații formale. Extensii ale BOM:

Page 8 of 34
Programare WEB – Curs 1

- Capacitatea de a afișa în format pop-up ferestre noi de browser


- Capacitatea de a muta, redimensiona și închide ferestrele de
browser
- Obiectul navigator ce oferă informații detaliate despre browser
- Obiectul location ce oferă informații detaliate despre pagina
încărcată în browser
- Obiectul screen ce oferă informații detaliate despre rezoluția
folosită de către utilizator
- Suport pentru cookies
- Obiecte precum XMLHttpRequest și Internet Explorer’s
ActiveXObject

Pentru că nu există standard pentru BOM, fiecare browser are propria


implementare. Există câteva standarde de facto, precum a avea un
obiect window și un obiect navigator, dar fiecare browser își definește
proprietățile și metodele pentru acestea (dar și alte obiecte). Odată cu
HTML5, are loc o implementarea mai detaliată a lui BOM.

1.3. JavaScript în HTML

Limbajul HTML oferă creatorilor de pagini Web o flexibilitate statică,


deoarece documentele HTML nu pot interacționa în alt mod mai dinamic
cu utilizatorul, decât folosind și alte resurse. O astfel de resursă este și
crearea de CGI-uri (Common Graphics Interface), adică programe ce

Page 9 of 34
Programare WEB – Curs 1

rulează pe serverul Web și care acceptă informații primite din pagina


Web și returnează cod HTML.

Principala metodă de a insera cod JavaScript într-o pagină HTML, este


dată de folosirea etichetei <script> și </script>. Această etichetă
necesită atributul "type", care va specifica browser-ului limbajul folosit.
În interiorul etichetei <script> și </script> se va scrie codul. Atributul
"type" va avea următoarea sintaxă type="text/javascript".

Pentru scrierea și executarea programelor JavaScript avem nevoie de un


simplu editor de text și un browser. Această etichetă <script> și </script>
a fost creată de Netscape și a fost pentru prima dată implementată în
Netscape Navigator 2. Mai târziu, a fost adăugată la formalismul
specificațiilor HTML.

Există două moduri de a folosi <script>:

a) fiind inclus direct în pagină

Pentru a include în pagină codul JavaScript, se va scrie codul direct în


eticheta <script>, de exemplu:

<script type="text/javascript">
document.write("Hello World");
</script>

Page 10 of 34
Programare WEB – Curs 1

În acest exemplu, comanda document.write este folosită pentru a tipări


ceva în pagină. Rezultatul acestui script , afișat în pagina Web va fi:

b) folosind cod JavaScript dintr-un fișier extern, de exemplu cod.js,


codul din documentul HTML va fi

<script src="cod.js" type="text/javascript"> </script>

Iar fișierul cod.js va conține document.write("Hello World");

Rezultatul afișat în pagina Web va fi același ca-n exemplul anterior.

Page 11 of 34
Programare WEB – Curs 1

2. CONCEPTE DE BAZĂ ALE LIMBAJULUI


2.1. Reguli de sintaxă ale limbajului JavaScript

1. Case-sensitive – se face diferența între literele mari și literele mici


2. Toate declarațiile se termină cu ”;”
3. JavaScript ignoră spațiile libere, tab-urile și liniile libere ce apar în
instrucțiuni, recunoscând doar spațiile ce apar în șirurile de
caractere
4. Ghilimelele simple ‘’ și duble ”” se folosesc pentru a delimita șirurile
de caractere
5. Caractere speciale: \b, \f, \n, \r, \t, \\, \’, \’’
6. Comentarii: // sau /* …*/
7. Numele de variabile și funcții trebuie să respecte: primul caracter
nu trebuie să fie un număr, numele nu conțin spații libere, primul
caracter trebuie să fie o literă , un caracter de subliniere sau semnul
$. De asemeni, nu se vor folosi cuvinte rezervate, de exemplu
”status”, ”alert”, ”array”.

Page 12 of 34
Programare WEB – Curs 1

2.2. Caracteristici importante:


1. Java Script poate fi inclus în HTML, este dependent de mediu, este
un limbaj în totalitate interpretat (codul scriptului va fi interpretat
de browser înainte de a fi executat).
2. Java Script este flexibil, diferă de C++ sau de Java. De exemplu, în
JavaScript putem lucra cu o variabilă de un anumit tip sau putem
lucra cu o variabilă deși nu-i cunoaștem tipul specificat.
3. Java Script este bazat pe obiecte, nu este orientat obiect ca Java,
modelul de obiect JavaScript este bazat pe instanță și nu pe
moștenire.
4. Java Script este condus de evenimente generate de utilizator sau
de sistem, este un limbaj multifuncțional, ce evoluează și acoperă
diferite contexte.
5. JavaScript este nativ pentru Macromedia Dreamweaver

2.3. Variabile

Într-un script se folosesc variabile = date constante sau/ și variabile care


își schimbă valorile în timpul execuției. Variabila reprezintă numele unei
locații din memoria calculatorului folosită pentru a memora date.
Numele variabilei permite accesul la valoarea ei precum și schimbarea
valorii.
Page 13 of 34
Programare WEB – Curs 1

O variabilă se poate crea și i se poate atribui o valoare, folosind


declarația:

var nume=valoare;

sau fără declarația var:

nume=valoare;

unde nume este numele variabilei iar valoare este valoarea atribuită.

Consola poate afișa undefined ca și răspuns. Acest lucru nu


înseamnă eroare, ci acest mesaj se va afișa atunci când nu se întoarce o
valoare sau nu există o valoare pentru ceva. De exemplu, când creăm o
nouă variabilă, dacă nu-i sunt setate valorile, folosind operatorul =,
atunci valoarea implicită a acesteia va fi undefined.
O variabilă scrisă în cadrul unei funcții este o variabilă locală, astfel, o
altă funcție poate declara și folosi o variabilă cu același nume, JavaScript
tratând cele două variabile ca fiind diferite. Se pot declara și variabile în
afara funcțiilor, care să fie folosite de toate funcțiile, acestea numindu-
se variabile globale, fiind valabile de la încărcarea paginii Web până la
închiderea acesteia. O variabilă poate avea valoarea de null , atunci
când aceasta are valoarea de ”gol”.

Page 14 of 34
Programare WEB – Curs 1

În JavaScript există 3 tipuri de date de bază: numere pentru a reprezenta


numerele, șiruri pentru a reprezenta text și date booleene cu valoarea
de true sau false.

2.4. Operatori

Pentru a lucra cu datele introduse într-un script și a le combina și/sau


modifica se folosesc operatori. Aceștia sunt simboluri și identificatori
care determină felul în care sunt modificate datele și modul în care este
evaluată o combinație de variabile și expresii.

Java Script folosește atât operatori unari ce au nevoie de un singur


operand cât și operatori binari ce folosesc doi operanzi. Tipuri de
operatori:

2.4.1. Operatorii aritmetici sunt folosiți pentru a efectua


operațiile aritmetice de adunare (+), scădere (-), înmulțire
(*), împărțire(/), modulul (%) pentru a afla restul împărțirii a
două numere, incrementare (++) pentru a crește valoarea cu
o unitate, în formă postfix sau prefix, decrementare (--)
pentru a scade valoarea cu o unitate, în formă postfix sau
prefix.

Page 15 of 34
Programare WEB – Curs 1

2.4.2. Operatorii de atribuire, se folosesc de la dreapta la


stânga, adică se evaluează operandul din dreapta, iar
valoarea se atribuie variabilei din stânga semnului = . De
exemplu, a=b, a+=b, a-=b, a*=b, a/=b, a%=b
2.4.3. Operatorii de comparare a două valori, cu răspuns True
sau False. Cel mai des folosit operator de comparare este
operatorul de egalitate, reprezentat prin 2(două) semne ==,
ce verifică dacă cele două valori sunt identice, adică egale ca
valoare. Pentru a verifica dacă cele două valori sunt egale ca
valoare și ca tip se folosește ===. De exemplu, 4==7, 4!=7,
4>7, 4<7, 4>=7, 4<=7
2.4.4. Operatorii logici acționează similar cu operatorii de
comparare, pentru că se compară două expresii, obținând ca
răspuns True sau False.

Operatorul logic &&, și (AND) compară două expresii, returnând


True dacă ambele sunt adevărate. De exemplu, x=4; y=7; x<6&&y>=6
returnează True.

Operatorul logic || sau (OR) compară două expresii, returnând


False dacă ambele sunt false. De exemplu, x=4; y=7; x>6||y<=6
returnează False.

Page 16 of 34
Programare WEB – Curs 1

Operatorul ! not este un operator unar, ce folosește o singură


expresie și returnează False dacă expresia este adevărată și True dacă
expresia este falsă.

2.4.5. Operator pentru String

Un String este în general un șir de caractere, definit între ghilimele.


Pentru a concatena două variabile de tip String se folosește operatorul
de concatenare pentru șiruri: +.

2.4.6. Operatorul typeof

Acest operator returnează tipul de date conținut la momentul respectiv


de operandul său. Este util atunci când dorim să aflăm dacă o variabilă a
fost definită în sistem cu un anumit tip de date.

2.4.7. Operatori pentru funcții

Operatorul de apelare, reprezentat prin (), care urmează întotdeauna


după numele funcției.

O funcție va fi declarată astfel:

Page 17 of 34
Programare WEB – Curs 1

Operatorul de apelare va fi folosit atunci când funcția este apelată în


interiorul scriptului:

Un al doilea operator pentru funcții este virgula care este folosită pentru
a separa argumentele pe care le primește funcția. Acestea vor fi scrise
mereu în interiorul parantezelor rotunde și vor fi separate prin virgulă.

2.4.8. Operatori pentru structuri de date sau obiecte

Operatorul . pentru membrul unei structurisss ne permite să ne referim


la un membru (variabilă, funcție sau obiect) care aparține obiectului
specificat. Sintaxa este:

Această modalitate de referire la o informaţie returnează valoarea


variabilei, a funcției sau a obiectului din dreapta.

Page 18 of 34
Programare WEB – Curs 1

Operatorul [ ], numit operator indice al tabloului, se folosește pentru a


accesa o anumită dată dintr-un tablou.

2.4.9. Operatorul condițional ?

JavaScript conține și un operator condițional care atribuie o valoare unei


variabile pe baza unei condiții. Modul de operare al acestuia este : se
evaluează condiția și dacă aceasta este adevărată atunci variabila ia
valoarea val1, altfel ia valoarea val2. Sintaxa lui este :

Exemplu:

2.5. Valori nedefinite


Există două valori speciale: null și undefined care sunt folosite
pentru a arăta absența unei valori semnificative. Ele sunt de asemenea
valori, dar nu poartă și informație. Multe operații care nu produc o
valoare semnificativă vor întoarce undefined, doar pentru că trebuie
să conțină ceva. Diferența dintre undefined și null în JavaScript nu
contează în marea majoritate a timpului.
Page 19 of 34
Programare WEB – Curs 1

2.6. Conversii automate


Atunci când este aplicat un operator unei valori având un tip de dată
”greșit”, JavaScript va converti acea valoare la tipul dorit, utilizând un set
de reguli care de obicei nu sunt ceea ce ne așteptăm sau ceea ce ne
dorim. Exemplu:

Null din prima expresie devine 0 și șirul ”5” din a doua expresie devine
numărul 5. Totuși în a treia expresie, + încearcă concatenare de șiruri în
loc de adunare, deci numărul 1 este convertit în șirul ”1”. În a patra
expresie, când variabila șir “five” nu se mapează ca un număr într-un
mod evident, dar este convertită la un număr, se va produce valoarea
NaN. Următoarele operații aritmetice pe NaN vor întoarce NaN. Când
comparăm valori de același tip folosind dubla egalitate ==, ceea ce
obținem este TRUE dacă ambele valori sunt egale, cu excepția cazului
NaN. Dar, când tipurile diferă, JavaScript folosește un set de reguli
complicate și destul de confuze, pentru a încerca să convertească una din
valori la celălalt tip de date al celeilalte valori. Atunci, când avem null

Page 20 of 34
Programare WEB – Curs 1

sau undefined ca și operand, se va întoarce TRUE doar dacă în ambele


părți avem null și undefined.
Exemplu:

Aceste rezultate sunt folositoare atunci când dorim să testăm dacă o


valoare are valoare reală în loc de null sau undefined (pur și simplu
se compară acea valoare cu null, folosind operatorul == sau != ).
Regulile care convertesc șirurile și numerele la valori Booleene afirmă că
0, NaN și un șir gol se socotesc FALSE, în timp ce toate celelalte valori
se socotesc TRUE. Astfel, expresii precum 0 == FALSE și “” == FALSE
vor întoarce TRUE. Atunci când nu dorim aceste conversii automate,
folosim operatorul === sau operatorul !==. Primul testează dacă o
valoare este precis egală cu cealaltă (se verifică inclusiv tipul de dată).
Adică, “” === FALSE va întoarce FALSE așa cum era de așteptat.

Page 21 of 34
Programare WEB – Curs 1

3. ELEMENTE PENTRU STRUCTURA UNUI PROGRAM


Un fragment de cod care produce o valoare se numește o expresie.
Fiecare valoare care este scrisă literal (precum 22 sau “negru”) este o
expresie. O expresie între paranteze este de asemenea o expresie,
precum un operator binar aplicat la două expresii sau un operator unar
aplicat uneia. Expresiile pot fi imbricate, astfel un program JavaScript
este o listă de instrucțiuni. Cea mai simplă formă de instrucțiune este
dată de o expresie urmată de un punct și virgulă după ea. Cuvintele cu
un înțeles special, precum var se numesc cuvinte cheie (rezervate) și nu
pot fi folosite ca și nume de variabile. Colecția de variabile și valorile
acestora care există la un anumit moment de timp se numește mediu.
Acesta conține variabile, ca și părți ale limbajului standard, dar și
variabile care oferă modalități de interacțiune cu sistemul. De exemplu,
într-un browser, variabila alert conține o funcție care arată o mică
fereastră de dialog cu un mesaj. Este folosită astfel:

În exemplul de mai sus, funcția alert folosește șirul dat ca și text de


afișat în fereastra de dialog.
Funcția confirm întreabă utilizatorul. Această funcție va întoarce TRUE
dacă utilizatorul apasă pe OK și FALSE dacă acesta apasă pe Cancel.

Page 22 of 34
Programare WEB – Curs 1

Funcția prompt poate fi folosită pentru a cere utilizatorului să introducă


un text.

Aceste două funcții nu sunt des folosite în programarea web modernă,


în majoritatea cazurilor pentru că nu există control asupra aspectului
ferestrei de dialog, dar sunt utile la experimente.
Valorile date funcțiilor se numesc argumente. Executarea unei funcții se
numește invocare, apelare sau aplicarea ei. Atunci când o funcție
produce o valoare, se spune că întoarce acea valoare. O altă modalitate
de afișare a valorilor este dată de folosirea funcției console.log.
Atunci când programul conține mai mult de o instrucțiune, acestea sunt
executate de sus în jos.

Page 23 of 34
Programare WEB – Curs 1

4. STRUCTURI DE CONTROL

a) Cu ajutorul instrucțiunilor condiționale: if (execută comenzile


dorite când o condiție este adevărată) și if … else (execută
anumite comenzi când o condiție este adevărată și alte comenzi
când această condiție este falsă), switch (selectează care
comandă va fi executată) putem face ca programele individuale să
ruleze diferite condiții după care se va decide modul de execuție al
acestora.
if (conditie) {
cod executat daca conditie = TRUE
}
Conditie poate fi orice expresie logică. Dacă rezultatul condiției este
TRUE atunci se execută codul dintre acolade, în caz contrar, când
conditie returnează FALSE se trece peste acest cod.
Folosind instrucțiunea if … else putem stabili comenzi ce vor fi
executate atunci când conditie din instrucțiunea if este FALSE.
Conditie poate fi orice expresie logică. Dacă rezultatul lui conditie
este TRUE se execută codul dintre primele acolade, care aparține de if,
în caz contrar, când conditie returnează FALSE sunt executate
comenzile din a doua grupă de acolade, care aparține de else.
if (conditie) {
cod executat daca conditie = TRUE
} else {
cod executat daca conditie = FALSE
}
Page 24 of 34
Programare WEB – Curs 1

Instrucțiunea switch este folosită pentru a compara o valoare cu altele


dintr-o listă. Prima dată este evaluată expresie scrisă între
parantezele rotunde, apoi valoarea obținută este comparată pe rând cu
fiecare valoare determinată de case. Dacă se găsește o identitate se
execută codul asociat acelui case, apoi se iese din instrucțiunea
switch. Dacă, parcurgând fiecare case nu se găsește o egalitate, se
execută codul de după default. Prin folosirea lui break, se oprește
parcurgerea corpului instrucțiunii atunci când s-a găsit o valoare egală cu
expresie și se iese din switch.

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
}

b) Instrucțiunile repetitive se folosesc atunci când se dorește


efectuarea unei comenzi de mai multe ori. În JavaScript putem
folosi următoarele instrucțiuni ciclice: for (se execută codul de un
număr specificat de ori), for … in (execută un set de instrucțiuni
pentru fiecare proprietate dintr-un obiect), while (repetă codul
atâta timp cât o anumită condiție este adevărată), do … while

Page 25 of 34
Programare WEB – Curs 1

(întâi se execută o dată codul apoi îl repetă atâta timp cât o anumită
condiție este adevărată).
În instrucțiunea for:
-variabila numar de inceput este folosită la inițializarea buclei
pentru a da o valoare inițială numărului de repetări, așa numitul
contor al ciclului;
-conditie numar verifică dacă numărul de cicluri se încadrează
într-o anumită valoare (dacă bucla va continua) și dacă rezultatul
este TRUE se execută codul dintre acolade;
-ciclu incrementează sau decrementează valoarea la care a ajuns
contorul ciclului, apoi această valoare este verificată din nou de
conditie numar până când rezultatul este FALSE.
for (numar de inceput ; conditie numar ; ciclu)
{
cod care va fi executat
}
Cele trei expresii dintre parantezele rotunde sunt opționale, dar dacă
este omisă una dintre ele, caracterul ; trebuie să rămână. Instrucțiunea
for permite imbricarea: între acolade pot fi introduse și alte instrucțiuni
for sau alte instrucțiuni condiționale.
Cu instrucțiunea for … in se execută câte un set de instrucțiuni pentru
fiecare proprietate dintr-un obiect. Ciclul se poate executa cu orice
obiect JavaScript, chiar dacă nu are proprietăți. Pentru fiecare
proprietate se execută câte o iterație, dacă obiectul nu are nici o
proprietate nu se desfășoară nici un ciclu.
În instrucțiunea for … in:

Page 26 of 34
Programare WEB – Curs 1

-nume proprietate este un literal de tip șir generat de


JavaScript. Pentru fiecare repetare a execuției instrucțiunii, lui
nume proprietate i se atribuie următorul nume de proprietate
conținut în obiect, până când sunt folosite toate.

for (nume proprietate in obiect) {


codul care va fi executat
}
Instrucțiunea while repetă un cod atâta timp cât o anumită condiție
este True. Este similară cu for, dar nu include funcțiile de inițializare și
incrementare a variabilelor. Forma generală a acesteia este:
while (conditie) {
codul care va fi executat
}
Instrucțiunea do … while este asemănătoare cu instrucțiunea while,
diferența dintre ele este că la do … while mai întâi se execută codul
din corpul instrucțiunii, după care se verifică condiția, apoi acest cod este
repetat până când condiția returnează FALSE. Astfel, corpul
instrucțiunii este executat cel puțin o dată, chiar dacă condiția nu este
adevărată.

c) Instrucțiunile complementare break (întrerupe definitiv execuția


unui ciclu), continue (sare peste instrucțiunile care au mai rămas
din ciclul respectiv), with (se folosește pentru a fi evitată
specificarea repetată la referirea unui obiect, atunci când îi
accesăm metodele sau proprietățile)

Page 27 of 34
Programare WEB – Curs 1

Atunci când este folosită o instrucțiune ciclică, aceasta se va repeta până


când o anumită condiție devine FALSE. Acest lucru poate fi schimbat cu
ajutorul instrucțiunilor break și continue, care dau posibilitatea
întreruperii ciclului sau ieșirii din acesta înainte de a ajunge la ultima
acoladă. Continue întrerupe execuția repetării curente, înainte de a fi
executate celelalte operații din ciclu, apoi se verifică din nou condiția și
se trece la următoarea iterație a ciclului.
Exemplul 1:

Exemplul 2:

Exemplul 3:

Instrucțiunea with poate fi folosită pentru a evita referirea în mod


repetat la un obiect, atunci când îi accesăm metodele sau proprietățile.
Sintaxa acesteia este:
with (obiect) {
instructiuni
}

Page 28 of 34
Programare WEB – Curs 1

Între parantezele rotunde, obiect face referire la obiectul căruia i se


aplică instrucțiunile dintre acolade.

5. FUNCȚII
Definirea unei funcții seamănă cu definirea unei variabile, numai că
valoarea pe care o primește variabila este o funcție. De exemplu,
următorul cod definește o variabilă numită patrat() care se referă la o
funcție ce întoarce pătratul unui număr dat:

O funcție este creată de o expresie care începe cu un cuvânt cheie


function. Funcțiile au un set de parametri (în acest caz, doar unul
singur, x) și un corp, care conține afirmații ce vor fi executate atunci când
este apelată funcția. Corpul funcției va fi mereu între acolade, chiar dacă
conține o singură instrucțiune, ca în exemplul de mai sus.
O funcție poate să nu aibă nici un parametru:

O funcţie poate avea mai mulți parametri:

Page 29 of 34
Programare WEB – Curs 1

Unele funcții returnează o valoare, așa cum e putere() și patrat(),


unele nu (zgomot()). Return determină valoarea întoarsă de o
funcție. Dacă nu urmează nici o expresie după return, atunci funcția
va întoarce undefined.
Parametrii unei funcții se comportă ca variabile oarecare, cu valorile
inițiale date la apelul funcției. O proprietate importantă a funcțiilor este
aceea că variabilele create în interiorul acesteia, inclusiv parametrii
acestora se numesc variabile locale ( exemplu, variabila rezultat din
funcția putere() ca fi creată de fiecare dată la apelul funcției).
Variabilele declarate în afara funcției se numesc variabile globale,
deoarece sunt vizibile oriunde în interiorul programului. Accesul
acestora este posibil din interiorul unei funcții atâta timp cât nu s-au
declarat variabile locale cu același nume.
Exemplu:

Funcțiile pot fi create în interiorul altor funcții. Valoarea unei funcții


poate fi folosită în expresii arbitrare, sau poate fi stocată într-o altă
Page 30 of 34
Programare WEB – Curs 1

valoare, poate fi folosită ca argument al altei funcții…În mod similar, o


variabilă care conține o funcție se comportă ca o variabilă oarecare,
căreia i se poate atribui o nouă valoare.
Cuvântul cheie function poate fi folosit și:

Aceasta este declarația unei funcții. Afirmația definește variabila


patrat către funcția data.
În exemplul următor, funcția este definită după codul care o apelează:

Exemplul următor tratează clasica problemă a oului și găinii… Cine este


primul?

La execuția codului anterior, veți observa un mesaj de eroare, de forma:


”Maximum call stack size exceeded”. Acest mesaj apare deoarece o
funcție trebuie să sară înapoi la locul unde era atunci când a fost apelată
și returnează ceva. Locul în care computerul stochează contextul acesta
se numește stiva de apeluri. De fiecare dată când o funcție este apelată,
contextul curent este pus în vârful stivei. Atunci când funcția returnează,
se elimină contextul din vârful stivei. Stocarea acestei stive necesită
spațiu în memoria computerului. Atunci când stiva crește prea mult,

Page 31 of 34
Programare WEB – Curs 1

computerul va da un mesaj de forma: ”out of stack space” sau “too


much recursion”.
Codul anterior întreabă computerul o întrebare cu adevărat grea, care
cauzează o buclă infinită între cele două funcții gaina() și ou(). Bucla
ar fi infinită dacă computerul ar avea o stivă infinită.
Următorul cod este permis și se execută fără nici o problemă:

Funcția alert nu acceptă decât un singur argument. Totuși, atunci când


este apelată, așa cum apare mai sus, se va ignora celălalt argument și va
afișa doar pe primul, adică “Salut”. În JavaScript numărul de argumente
pentru o funcție poate fi tratat destul de ciudat, poate veți spune: dacă
sunt prea multe, cele extra sunt ignorate, dacă sunt prea puține, celor
care lipsesc li se atribuie valoarea undefined. Partea bună a acestui
comportament este că se poate defini, de exemplu, o funcție care să aibă
argumente opționale.
De exemplu, următorul cod, prezintă o versiune a funcției putere()
care poate avea fie două argumente, fie doar unul, în acest caz
exponentul va fi 2, iar funcția se va comporta ca funcția patrat():

Abilitatea de a trata funcțiile ca și valori, combinată cu faptul că


variabilele locale sunt recreate de fiecare dată la apelul unei funcții,

Page 32 of 34
Programare WEB – Curs 1

ridică o întrebare interesantă: Ce se întâmplă cu variabilele locale atunci


când funcția care le-a creat nu mai este activă?
O funcție care se apelează pe ea însăși se numește funcție recursivă.
De exemplu:

Funcția se apelează pe ea însăși de mai multe ori cu diferite argumente


pentru a ajunge la înmulțirea repetată. Această implementare este de
aproximativ 10 ori mai înceată decât o buclă, deoarece rularea unei bucle
este mai rapidă decât apelul de mai multe ori a unei funcții. Dilema între
viteză și eleganță este interesantă.
Cazul anterior al variantei prezentate pentru funcția putere () (cu bucla
for, cea cu argumentele opționale), este o versiune mai simplă și ușor de
citit, dar totuși neelegantă. Regula de bază este să nu vă îngrijorați
asupra eficienței până nu știți cu siguranță că programul este prea încet.
Recursivitatea nu este întotdeauna doar o alternativă mai puțin eficientă
a unui ciclu. Unele probleme sunt mai ușor de rezolvat cu recursivitate
decât cu bucle while sau for.

Page 33 of 34
Programare WEB – Curs 1

De exemplu:
Cum scrieți o funcție recursivă, care rezolvă: fiind dat numărul 1 și
repetând fie adunarea cu 5 sau înmulțirea cu 3, să obțineți alte numere?
Adică,
1=1
6 = 1+5
8 = (1*3) + 5
11 =(1 + 5) + 5
13 = ((1 *3) +5 ) +5
16 = (1 + 5 ) +5 + 5
18 = (1 + 5) *3
24 = ((1*3) +5) *3
33 = ((1 +5) + 5) *3

Page 34 of 34