web-javascript.pdf

8/18/2019 web-javascript.pdf

1/155

D r . S a b i n

B u r a g a

w w w . p u r l . o r g / n e t / b u s a

c o

o prezentare generala a limbajului JavaScript

Tehnologii Web

Programare Web – supliment


2/155


3/155

D r . S a b i n

B u r a g a

w w w . p u r l . o r g / n e t / b u s a c o

Inventat de Brendan Eich (1995)

denumit initial LiveScript

istoric


4/155

D r . S a b i n

B u r a g a


Implementat in premiera de browser -ul

Netscape Navigator

istoric


5/155

D r . S a b i n

B u r a g a

w w w .

p u r l . o r g / n e t / b u s a c o

Adaptat de Microsoft: JScript (1996)

istoric


6/155

D r . S a b i n

B u r a g a

w w w .


Standardizat in 1997 de ECMA

European Computer Manufacturers Association

ECMAScript

ECMA-262

www.ecma-international.org

istoric


7/155

D r . S a b i n

B u r a g a

w w w .


Standardizat in 1997 de ECMA

European Computer Manufacturers Association

ECMAScript

versiunea standardizata actuala: 5.1 (iunie 2011)

versiunea in lucru: 6.0 (în curând)

www.ecma-international.org/publications/standards/Ecma-262.htm

istoric


8/155

D r . S a b i n

B u r a g a

w w w .


Limbaj de tip script (interpretat)

caracteristici


9/155

D r . S a b i n

B u r a g a

w w w .



destinat sa manipuleze, sa automatizeze

si sa integreze facilitatile oferite

de un anumit sistem

caracteristici


10/155

D r . S a b i n

B u r a g a

w w w .



nu necesita intrari/iesiri in mod implicit

caracteristici


11/155

D r . S a b i n

B u r a g a


Cum putem executa programele JavaScript?


12/155

D r . S a b i n

B u r a g a


Mediu de executie (host-environment )

navigator Web

permite rularea de aplicatii Web la nivelul unei platforme

(un sistem de operare)

desktop (e.g., Windows 8)

mobil (Android, iOS, WP7, WP8)

…

caracteristici


13/155

D r . S a b i n

B u r a g a



navigator Web

“injectarea” de cod JavaScript

in documentele (X)HTML via elementul

caracteristici


14/155

D r . S a b i n

B u r a g a



navigator Web

“injectarea” de cod JavaScript

in documentele (X)HTML via elementul

cod extern vs. cod inclus in pagina Web

caracteristici


15/155

D r . S a b i n

B u r a g a



platforma de dezvoltare a aplicatiilor

e.g., Flex/AIR

caracteristici


16/155

D r . S a b i n

B u r a g a



software de sine-statator

Adobe Creative Suite, UltraEdit etc.

caracteristici


17/155

D r . S a b i n

B u r a g a



procesor (engine) independent

exemplificare:

Yahoo! Widget Engine

caracteristici


18/155

D r . S a b i n B u r a g a



componente ale sistemului de operare

Dashboard – Mac OS X

Sidebar – Windows Vista/7

caracteristici


19/155




server Web

exemplu tipic: node.js

caracteristici


20/155



Cuvinte rezervate:

break else new var case finally return void catchfor switch while continue function this with default

if throw delete in try do instanceof typeof

caracteristici: sintaxa


21/155



Alte cuvinte rezervate:

abstract enum int short boolean export interfacestatic byte extends long super char final native

synchronized class float package throws const

goto private transient debugger implementsprotected volatile double import public

caracteristici: sintaxa


22/155



Number

reprezentare in dubla precizie

stocare pe 64 biti

caracteristici: tipuri de date


23/155



String

secvente de caractere Unicode

fiecare caracter ocupa 16 biti



24/155



Boolean

secvente ce se pot evalua ca fiind true/ false



25/155



Object

Function

Array

Date

RegExp

si altele



26/155


w w w . p u r l . o r g / n e t / b u s

a c o

Null

semnifica “nici o valoare”



27/155


28/155



a c o

Nu exista valori intregi



29/155



a c o

Nu exista valori intregi

convertirea unui sir in numar: parseInt ()

parseInt ("123") 123

parseInt ("11", 2) 3


indica baza

de numeratie


30/155



a c o

Operatii avansate cu numere se pot realiza

via obiectul predefinit Math



31/155



a c o

Operatii avansate cu numere se pot realiza

via obiectul predefinit Math

constante predefinite:

Math.PI

Math.EMath.LN10

etc.



32/155


33/155



a c o

“Valoarea” NaN (“not a number ”)

parseInt ("Salut") NaN

isNaN (NaN + 3) true



34/155


w w w

. p u r l . o r g / n e t / b u s

a c o

Valori speciale:

Infinity

–Infinity



35/155


w w w

. p u r l . o r g / n e t / b u s

a c o

Un caracter reprezinta un sir de lungime 1



36/155


w w w

. p u r l . o r g / n e t / b u s

a c o

Sirurile sunt obiecte

"Salut".length 5



37/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Metode pentru siruri:

s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..)

s.indexOf (s1, start)

s.match(regexp) s.replace(search, replace)

s.slice(start, end) s.split(separator, limit)

s.substring(start, end)s.toLowerCase() s.toUpperCase()

etc.



38/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Valorile 0, "", NaN, null, undefined

sunt interpretate ca fiind false

!!234 true



39/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Variabilele se declara cu var

var marime;var numeAnimal = "Tux";

variabilele declarate fara valori asignate,

se considera undefined

caracteristici: variabile


40/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Daca nu se foloseste var ,

atunci variabila este considerata globala

de evitat asa ceva!



41/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Valorile sunt “legate” tardiv la variabile

(late binding)



42/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Mai nou, exista posibilitatea marginirii

domeniului de vizibilitate (scope) via let

var x = 5;

var y = 0;

console.log (let (x = x + 10, y = 12) x + y); // 27

console.log (x + y); // 5



43/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Pentru numere: + – * / %

De asignare: += –= *= /= %=

Incrementare & decrementare: ++ – –

Concatenare de siruri: "Java" + "Script" "JavaScript"

caracteristici: operatori


44/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Conversia tipurilor se face “din zbor”

"3" + 4 + 5 345

3 + 4 + "5" 75

adaugând un sir vid la o expresie,o convertim pe aceasta la string



45/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Comparatii: < > = (numere & siruri)

egalitatea se testeaza cu == si !=

1 == true

true



46/155

D r . S a b i

n B u r a g a

w w w

. p u r l . o r g / n e t / b u s

a c o

Comparatii: < > = (numere & siruri)

egalitatea se testeaza cu == si !=

1 == true

truea se folosi: 1 === true false


inhiba conversia

tipurilor de date


47/155


w w w

. p u r l . o r g / n e t / b u s

a c o

Aflarea tipului unei expresii: operatorul typeoftypeof "Tux" string



48/155


w w w

. p u r l . o r g / n e t / b u s

a c o

Operatorii logici && si ||

var nume = unNume || "Implicit";



49/155


w w w

. p u r l . o r g / n e t / b u s a c o

Operatorul de test ? :

var prezenta = (studenti > 33) ? "Prea multi" : "Cam putini…";



50/155


w w w


Testare: if … else, switchpentru switch, sunt permise expresii la fiecare case

(testarea se realizeaza cu operatorul ===)

switch (2 + 3) { /* sunt permise expresii */

case 4 + 1 : egalitate ();

break;

default : absurd (); // nu se apeleaza niciodata

}

caracteristici: control


51/155


w w w


Ciclare: while, do … while, for

do {var nume = preiaNume ();

} while (nume != "");

for (var contor = 0; contor < 33; contor ++) {

// de 33 de ori…

}



52/155


w w w


Exceptii: try … catch … finally

try {

// Linii "periculoase" ce pot cauza exceptii } catch (eroare) {// Linii executate la aparitia unei/unor exceptii

} finally {// Linii care se vor executa la final

}



53/155


w w w


Exceptii: try … catch … finally

try {

// Linii "periculoase" ce pot cauza exceptii } catch (eroare) {// Linii executate la aparitia unei/unor exceptii

} finally {// Linii care se vor executa la final

}

emiterea unei exceptii: throw

throw new Error ("O eroare de-a noastra!...");



54/155


w w w


Perechi nume—valoare

caracteristici: obiecte


55/155


w w w



tabele de dispersie (hash) in C/C++

tablouri asociative in Perl, PHP sau Ruby

HashMaps in Java



56/155


w w w



numele este desemnat de un sir de caractere

valoarea poate fi de orice tip



57/155


w w w


Obiect colectie de proprietati,

avand mai multe atribute

proprietatile pot contine alte obiecte,

valori primitive sau metode



58/155


w w w


Global

Object

FunctionArray

String

Boolean

NumberMath

Date

Regex

caracteristici: obiecte predefinite


59/155


w w w


Create prin intermediul operatorului new:

var ob = new Object();

var ob = { }; // echivalent cu linia anterioara



60/155


w w w


Create prin intermediul operatorului new:

var ob = new Object();

var ob = { }; // echivalent cu linia anterioara


se prefera aceasta sintaxa


61/155


w w w


Accesarea proprietatilor – operatorul .

ob.nume = "Tux";var nume = ob.nume;



62/155


w w w


Accesarea proprietatilor:

ob.nume = "Tux";var nume = ob.nume;

echivalent cu:ob["nume"] = "Tux";

var nume = ob["nume"];



63/155


w w w


Declarare + asignare:

var pinguin = {nume: "Tux",

proprietati: {

culoare: "verde",

marime: 17}

}



64/155


w w w


Accesare:

pinguin.proprietati.marime

17

pinguin["proprietati"]["culoare"] verde



65/155


w w w


Iterarea proprietatilor – considerate chei:

var pinguin = { 'nume': 'Tux', 'marime': 17 };

for (var proprietate in pinguin) {

afiseaza (proprietate + ' = ' + pinguin[proprietate]);}



66/155

D r . S a b

i n B u r a g a

w w w


Tipuri speciale de obiecte

proprietatile (cheile) sunt numere,nu siruri de caractere

caracteristici: tablouri


67/155

D r . S a b

i n B u r a g a

w w w


Se poate utiliza sintaxa de la obiecte:

var animale = new Array ();animale[0] = "pinguin";animale[1] = "omida";animale[2] = "pterodactil";

animale.length 3



68/155

D r . S a b

i n B u r a g a

w w w


Se poate utiliza sintaxa de la obiecte:

var animale = new Array ();animale[0] = "pinguin";animale[1] = "omida";animale[2] = "pterodactil";

animale.length 3

notatie alternativa – preferata:

var animale = ["pinguin", "omida", "pterodactil"];



69/155

D r . S a b

i n B u r a g a

w w w


Tablourile pot avea “gauri” (sparse arrays):

var animale = ["pinguin", "omida", "pterodactil"];animale[33] = "om";

animale.length 34

typeof animale[13] undefined



70/155

D r . S a b

i n B u r a g a

w w w


Tablourile pot avea “gauri” (sparse arrays):

var animale = ["pinguin", "omida", "pterodactil"];animale[33] = "om";

animale.length 34

typeof animale[13] undefined

pentru a adauga elemente putem recurge la:

animale[animale.length] = altAnimal;



71/155

D r . S a b

i n B u r a g a

w w w


var vector = [ ];

vector [0] = "zero";

vector [new Date().getTime()] = "now";vector [3.14] = "pi";

for (var elem in vector ) {

console.log ("vector[" + elem + "] = " + vector [elem] +", typeof( " + elem +") == " + typeof (elem));

}

caracteristici: tablouri – exemplu

adaptare dupa John Kugelman (2009)


72/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

rezultatul obtinut in urma rularii programului JavaScript

via JS Bin


73/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Interari:

for (var it = 0; it < animale.length; it++) {// de prelucrat animale[it]

}



74/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Interari:

for (var it = 0; it < animale.length; it++) {// de prelucrat animale[it]

}

// varianta mai buna for (var it = 0, lung = animale.length; it < lung; it++) {

// de prelucrat animale[it]

}


de ce?


75/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Elementele pot apartine

unor tipuri de date eterogene

var animale = [33, "vierme", false, "gaga"];



76/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Metode utile:

a.toString() a.concat(item, ..) a. join(sep)

a.pop() a.push(item, ..) a.reverse()

a.shift() a.unshift([item]..)

a.sort(cmpfn) a.splice(start, delcount, [item]..)etc.



77/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Definite via function

function transformaPixeliInPuncte (px) {var puncte = px * 300;return puncte;

}

caracteristici: functii


78/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Daca nu este intors nimic in mod explicit,

valoarea de retur se considera undefined



79/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Parametrii pot lipsi, fiind considerati undefined



80/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Pot fi transmise mai multe argumente,

cele in surplus fiind ignorate

transformaPixeliInPuncte (10, 7) 3000



81/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Argumentele primite de o functie se acceseaza

via tabloul arguments:

function aduna () {

var suma = 0;

for (var i = 0, j = arguments.length; i < j; i++) {

suma += arguments[i];}

return suma;

}



82/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Functiile sunt tot obiecte

astfel, pot fi specificate functii anonime


expresii

lambda


83/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Functiile sunt tot obiecte

astfel, pot fi specificate functii anonime

in acest sens, JavaScript este un limbaj functional


expresii

lambda


84/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

var media = function () { // calculul mediei a N numere

var suma = 0;

for (var iter = 0,lung = arguments.length;

iter < lung; iter ++) {

suma += arguments[iter ];

}

return suma / arguments.length;

};



85/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o


86/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

precizati ce efect vor avea liniile de cod urmatoare:

console.log ( typeof (media) );

console.log ( media() );


87/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

variabila media este de tip function

apelul media() intoarce valoarea NaN


88/155


89/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

// varianta folosind functii anonime

var nrCaractDoc = (function (element) {

if (element.nodeType == 3) { // nod text

return element.nodeValue.length;

}var contor = 0;

for (var it = 0, copil; copil = element.childNodes[it]; it++) {

contor += arguments.callee (copil);

}return contor ;

}) (xml.root);

furnizeaza care-i

functia apelanta

i i i d l f ii l l


90/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Exemplificare:

dorim sa procesam – via functii –

caracteristici ale unor animale

caracteristici: de la functii la clase

t i ti i d l f tii l l


91/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

function creeazaAnimal (nume, marime) {return { nume: nume, marime: marime }

}

function oferaNume (animal) {return animal.nume;

}function oferaMarime (animal) {

return animal.marime;}




92/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

function creeazaAnimal (nume, marime) {return { nume: nume, marime: marime }

}

function oferaNume (animal) {return animal.nume;

}function oferaMarime (animal) {

return animal.marime;}

var tux = creeazaAnimal ("Tux", 17);

oferaMarime (tux)

17




93/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

O “clasa” referitoare la animale:

function creeazaAnimal (nume, marime) {return {

nume: nume, // date-membremarime: marime,oferaNume: function () { // metoda

return animal.nume;},

oferaMarime: function () { // metoda return animal.marime;

}}




94/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Apelarea metodelor definite:

var tux = creeazaAnimal ("Tux", 17);

tux.oferaMarime() 17




95/155

D r . S a b

i n B u r a g a

w w w

. p u r l . o r g / n e t / b u

s a c o

Apelind insa o functie fara notatia cu “.”,

nu obtinem rezultatul scontat:

var marimea = tux.oferaMarimea;

oferaMarimea () undefined




96/155

D r . S a b

i n B u r a g a

w w w . p u r l . o r g / n e t / b u

s a c o

Apelind insa o functie fara notatia cu “.”,

nu obtinem rezultatul scontat:

var marimea = tux.oferaMarimea;

oferaMarimea () undefined

obiectul curent (“this”) este setat ca fiind obiectul global

(in browser , reprezinta fereastra curenta

in care este redat documentul: this window)




97/155

D r . S a b

i n B u r a g a


s a c o

function Animal (nume, marime) {

this.nume = nume; // date-membre

this.marime = marime;

this.oferaNume = function () { // metoda

return this.nume;

};

this.oferaMarime = function () { // metoda return this.marime;

};

}


creational pattern

te i ti i de l f tii l l e


98/155

D r . S a b

i n B u r a g a


s a c o





return this.nume;

};


};

}


clase – utilizareaconstructorilor



99/155

D r . S a b

i n B u r a g a


s a c o





return this.nume;

};


};

}


clase – utilizareaconstructorilor

var tux = new Animal ("Tux", 17); // instantierea unui obiect

caracteristici: functii & obiecte


100/155

D r . S a b

i n B u r a g a


s a c o

Operatorul new creaza un nou obiect vid si

apeleaza functia specificata cu this setat pe acest obiect

aceste functii se numesc constructori,

trebuie apelate via new

si, prin conventie, au numele scris cu litera mare

caracteristici: functii & obiecte


101/155

caracteristici: prototipuri


102/155

D r . S a b

i n B u r a g a


s a c o

Structura unei clase poate fi extinsa ulterior,

folosind proprietatea prototype




103/155

D r . S a b

i n B u r a g a


s a c o



un prototip e o proprietate oferind o legatura ascunsa




104/155

D r . S a b

i n B u r a g a


s a c o



daca se incearca accesarea unui element inexistent

in cadrul unui obiect dat,

se va verifica lantul de prototipuri ( prototype chain)




105/155

D r . S a b

i n B u r a g a


s a c o


ObjA

this.initA ( )ObjB

this.initB ( ) ObjC

this.initC ( )

var test = new objC ( )

test.initA ( );

ObjB.prototype = new ObjA ( );

ObjC.prototype = new ObjB ( );

dupa Subramanyan Murali, “JavaScript Design Patterns”, 2008



106/155

D r . S a b

i n B u r a g a


s a c o

function Animal (nume, marime) { // definitie initiala

this.nume = nume;


}

Animal.prototype.oferaNume = function() {

return this.nume;

}; Animal.prototype.oferaMarime = function() {

return this.marime;

};




107/155

D r . S a b

i n B u r a g a


s a c o

Pentru a cunoaste tipul unui obiect

(pe baza constructorului si a ierarhiei de prototipuri)

se foloseste operatorul instanceof




108/155

D r . S a b

i n B u r a g a


s a c o

var marimi = [17, 20, 7, 14];

marimi instanceof Array true

marimi instanceof Object truemarimi instanceof String false

var tux = new Animal ("Tux", 17);

tux instanceof Object true

tux instanceof Array false


caracteristici: extinderea claselor


109/155

D r . S a b

i n B u r a g a


s a c o

Adaugarea unei metode se realizeaza via prototype

Animal.prototype.oferaNumeMare = function () {

return this.nume.toUpperCase ();

};

tux.oferaNumeMare () "TUX"




110/155



Pot fi extinse si obiectele predefinite:

// adaugam o metoda obiectului String

String.prototype.inverseaza = function () {var inv = '';

for (var iter = this.length - 1; iter >= 0; iter--) { // inversam sirul…

inv += this[iter];

}

return inv;

};

"Web".inverseaza ()

"beW"




111/155



Cel mai general prototype este cel al lui Object

Una dintre metodele disponibile este toString() care poate fi supra-scrisa (over-ride)




112/155



var tux = new Animal ("Tux", 17);

tux.toString () [object Object]

Animal.prototype.toString = function () {return '' + this.oferaNume () + '';

};

tux.toString () "Tux"



113/155





114/155



Atentie la pericole!

de exemplu, comportamentul diferit al constructiei

for (var proprietate in obiect)


caracteristici: functii de nivel inalt


115/155



Deoarece o functie reprezinta un obiect, poate fi:

stocata intr-o variabila

pasata unei alte functii

intoarsa de o functie – fiind argument pentru return




116/155



Dorim sa calculam greutatea unui animal,

dupa formula greutate = marime * 33

varianta clasica:

var marimi = [17, 20, 7, 14];

var greutati = [ ];for (var contor = 0; contor < marimi.length; contor ++) {

greutati[contor ] = marimi[contor ] * 33;

}



117/155

Varianta imbunatatita – mai generala:

calcul e variabila

de tip functie


118/155


w w w . p u r l . o r g / n e t / b u s a c ofunction genereazaTablouGreutati (tablou, calcul) {

var rezultat = [ ];for (var contor = 0; contor < tablou.length; contor ++) {

rezultat[contor ] = calcul (tablou[contor ]);

}

return rezultat;}

function calculGreutate (marime) {

return marime * 33;

}var greutati = genereazaTablouGreutati (marimi, calculGreutate);

fiind functie,

se poate apela


119/155


w w

w . p u r l . o r g / n e t / b u s a c o

caracteristici: incapsulare


120/155


w w


JavaScript ofera un singur spatiu de nume,

la nivel global

conflicte privind denumirea functiilor/variabilelor

specificate de programe diferite,concepute de mai multi dezvoltatori




121/155


w w


Nu trebuie afectat spatiul de nume global,

pastrându-se codul-sursa la nivel privat




122/155


w w


Codul poate fi complet încapsulat

via functii anonime

care “pastreaza” constructiile la nivel privat


caracteristici: closures


123/155


w w


Declararea imbricata – ca expresii de tip functie –

a functiilor anonime are denumirea closures

https://developer.mozilla.org/en/JavaScript/Guide/Closures




124/155


w w


// specificarea unei expresii de tip functie

( function () {

// variabilele & functiile vor fi vizibile doar aici // variabilele globale pot fi accesate

} ( ) );



125/155

var cod = (function () { f ti f C ( ) {


126/155


w w


var cod = (function () {var n = 0; // variabila privata

function start (x) {// ... poate accesa 'n'// si functia 'faCeva'

}function faAia (param) {

// ... invizibila din afara }

function faCeva (x, y) {// ...

}return {// sunt publice doar// functiile 'start' si 'faCeva''start': start,'faCeva': faCeva

}}) ();

cod.start (x); // apelam 'start'

via closures, simulam metodele private

modularizarea codului (module pattern)

var makeCounter = function () {var contorPrivat = 0; // un contor de valori (initial, zero)function changeBy (val) { // functie privata

// f


127/155


w w

w . p u r l . o r g / n e t / b u s a c ocontorPrivat += val; // ce modifica valoarea contorului

}

return { // functii publice (expuse)increment: function() {

changeBy (1);},decrement: function() {

changeBy (-1);},value: function() {

return contorPrivat;

}};};

console.log (contor1.value ()); /* 0 */

contor1.increment ();

contor1.increment ();

console.log (contor1.value ()); /* 2 */contor1.decrement ();




128/155


w w



129/155

de retinut!


130/155

D r . S a

b i n B u r a g a

w w


Orice obiect este intotdeauna mutabil

(poate fi alterat oricând)

toate proprietatile si metodelesunt disponibile oriunde ( public scope)

de retinut!


131/155

D r . S a

b i n B u r a g a

w w


Nu exista vizibilitate la nivel de bloc de cod

(block scope),

ci doar la nivel global ori la nivel de functie


132/155

de retinut!


133/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Operatorul “.” este echivalent

cu de-referentierea:

ob.prop === ob["prop"]

de retinut!


134/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Operatorul new creeaza obiecte apartinând

clasei specificate de functia constructor

de retinut!


135/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Accesorul this este relativ la contextul executiei,

nu al declararii

de retinut!


136/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Accesorul this este relativ la contextul executiei,

nu al declararii

Atentie la dependenta

de mediul de executie!

de retinut!


137/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Proprietatea prototype are valori modificabile

json


138/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

JavaScript Object Notation

http://json.org/

j

json


139/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o


format compact pentru interschimb de date

intre aplicatii

j

json


140/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o


datele pot fi specificatein termeni de obiecte & literali


141/155


142/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

exemplu concret: raspuns JSON obtinut in urma unei interogari YQL

instrumente


143/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Editare de cod & dezvoltare de aplicatii Web

TestareDocumentare a codului

Compresie

Optimizare

instrumente: editare


144/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Pentru desktop:

Aptana Studio, JS Development Tools ( plug-in Eclipse),Sublime Text , Visual Studio (Express Edition),…

Disponibile pe Web:

Cloud9 IDE, JS Bin, JS Fiddle etc.

unele ofera si partajarea codului-sursa cu alti dezvoltatori

instrumente: testare


145/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Verificare statica

instrumente de referinta:

JSLint

JSHint

instrumente: testare


146/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Suport pentru unit testing

exemplificari:

Jasmine

JSTest.NET

QUnitSinon.js

Tyrtle


147/155

instrumente: documentarea codului


148/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Software pentru documentarea programelor

JSDoc Toolkit

jGrouseDoc

YUIDoc


149/155

o

instrumente: optimizare javascript


150/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Transformarea codului JS intr-unul optimizat

exemplu de referinta:

Closure Compiler

https://developers.google.com/closure/

o

instrumente


151/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Facilitarea dezvoltarii de aplicatii Web

la nivel de client similare celor desktop

exemplificari notabile:

Cappuccino – http://cappuccino.org/

SproutCore – http://www.sproutcore.com/

o

instrumente


152/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Alte limbaje pentru dezvoltarea de aplicatii Web

CoffeeScript (Jeremy Ashkenas, 2009)

http://coffeescript.org/

TypeScript (Microsoft, 2012)

http://www.typescriptlang.org/

limbaje de programare care se compileaza in JavaScript

o

instrumente


153/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Portarea altor aplicatii in JavaScript

Emscripten – compilator LLVM generand cod JS

(e.g., programe C/C++, Lua, Python, Ruby

ce se pot compila in JavaScript)

http://emscripten.org/

o

instrumente


154/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

Portarea altor aplicatii in JavaScript

JSIL – compilator care transforma aplicatiile .NET

in programe JavaScript ruland independent de browser

http://jsil.org/

o


155/155

D r . S a

b i n B u r a g a

w w

w . p u r l . o r g / n e t / b

u s a c o

?

web-javascript.pdf

Documents