la nivel de client - profs.info.uaic.ro · ga .ro / ~ co “There are only two kinds of languages:...

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dezvoltarea aplicațiilor Webla nivel de client

programare Weblimbajul JavaScript – o prezentare generală

ww

w.f

lickr.

co

m/p

hoto

s/n

ath

an

sm

ith/4

704

26

831

4/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

“There are only two kinds of languages: the ones people complain about and the ones nobody uses.”

Bjarne Stroustrup

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Inventat de Brendan Eich (1995)

denumit inițial Mocha, apoi LiveScript

oferit în premieră de browser-ul Netscape Navigator

www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Adaptat de Microsoft: JScript (1996)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Standardizat în 1997 de ECMAEuropean Computer Manufacturers Association

ECMAScriptECMA-262

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

ECMAScript

versiunea standardizată în vigoare: ECMAScript 2018 – versiunea ES9 (iunie 2018)

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

ECMAScript

versiuni anterioare importante: ECMAScript 2015 – ES6 (2015)

git.io/es6features

ECMAScript 5.1 (2011)ecma-international.org/ecma-262/5.1/

es5.github.io/

referința de bază: developer.mozilla.org/JavaScript

acest curs

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Limbaj de tip script (interpretat)

destinat să manipuleze, să automatizezeși să integreze funcționalitățile

oferite de un anumit sistem

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Limbaj de tip script (interpretat)

nu necesită intrări/ieșiri în mod implicit

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Adoptă diverse paradigme de programare

imperativă

à la C

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


funcțională

λ calculfuncții anonime, închideri (closures),…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


pseudo-obiectuală

via prototipuri (obiectele moștenesc alte obiecte, nu clase)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


dinamică

variabilele își pot schimba tipul pe parcursul rulării programului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Cum putem executa programele JavaScript?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Mediu de execuție (host-environment)

navigator Web

permite rularea de aplicații Web la nivelul unei platforme(un sistem de operare)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


navigator Web

permite rularea de aplicații Web la nivelul unei platforme(un sistem de operare)

inclusiv pe diverse dispozitive – e.g., Android, iOS, Fire OS (Kindle Fire), Universal Windows Platform,… –,

console de jocuri, smart TV și altele

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


navigator Web

„injectarea” de cod JavaScriptîn documentele HTML via elementul <script>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


navigator Web

„injectarea” de cod JavaScriptîn documentele HTML via elementul <script>

cod extern referit printr-un URL vs. cod inclus direct în pagina Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


independent de navigatorul Web

platforme de dezvoltare de aplicații distribuite: Node.jsservere Web – nginScript în cadrul Nginx

servere de baze de date – e.g., Apache CouchDBcomponente ale sistemului de operare

aplicații de sine-stătătoare – e.g., Adobe Creative Suite

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Cuvinte rezervate:

break else new var case finally return void catch

for switch while continue function this with default

if throw delete in try do instanceof typeof

caracteristici: sintaxa

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Alte cuvinte rezervate:

abstract enum int short boolean export interface

static byte extends long super char final native

synchronized class float package throws const

goto private transient debugger implements

protected volatile double import public

caracteristici: sintaxa

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Number

reprezentare în dublă precizie

stocare pe 64 biți – standardul IEEE 754

caracteristici: tipuri de date

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Number

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

String

secvențe de caractere Unicode

fiecare caracter ocupă 16 biți (UTF-16)


developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/String

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Boolean

expresii ce se pot evalua ca fiind true/false


developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Boolean

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Object

aproape totul e considerat ca fiind obiect,inclusiv funcțiile


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Null

semnifică „nicio valoare”


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Undefined

are semnificația „nicio valoare asignată încă”


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Nu există valori întregi


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Nu există valori întregi

convertirea unui șir în număr: parseInt ()

parseInt ("123") 123parseInt ("11", 2) 3


indică bazade numerație

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

„Valoarea” NaN (“not a number”)

parseInt ("Salut") NaNisNaN (NaN + 3) true


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Valori speciale:

Infinity

–Infinity


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operații avansate cu numere se pot realizavia obiectul predefinit Math


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


constante predefinite:Math.PI

Math.E

Math.LN10

etc.


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


metode: abs(x) ceil(x) cos(x) exp(x) floor(x) log(x) max(x, …) min(x, …)

pow(x, y) random() round(x) sign(x) sin(x) sqrt(x) trunc(x)

etc.


developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Math

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Un caracter reprezintă un șir de lungime 1


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Șirurile sunt obiecte

"Salut".length 5


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Metode utile pentru procesarea șirurilor de caractere:

charAt(pos) charCodeAt(pos) concat(s1, ..) indexOf(s1, start)

match(regexp) replace(search, replace)

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

search(regexp) substring(start, end)

toLowerCase() toUpperCase()

etc.


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Valorile 0, "", NaN, null, undefined

sunt interpretate ca fiind false

!!234 true


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Variabilele se declară cu var

var mărime;

var numeAnimal = "Tux";

variabilele declarate fără valori asignate, se consideră undefined

caracteristici: variabile

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dacă nu se folosește var,atunci variabila este considerată globală

de evitat așa ceva!


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Valorile sunt „legate” tardiv la variabile(late binding)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Similari celor din C:

pentru numere: + – * / %

testare: == === != !== ?:

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

incrementare și decrementare: ++ – –

logici: ! && ||

concatenare de șiruri: "Java" + "Script" "JavaScript"

caracteristici: operatori

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Conversia tipurilor se face „din zbor” (dinamic)

"3" + 4 + 5 "345"

3 + 4 + "5" "75"

adăugând un șir vid la o expresie,o convertim pe aceasta la string


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Comparații: < > <= >= (numere și șiruri)

egalitatea valorilor se testează cu == și !=

1 == true true


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Comparații: < > <= >= (numere și șiruri)

egalitatea valorilor se testează cu == și !=

1 == true true

a se folosi: 1 === true false


inhibă conversiatipurilor de date

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Aflarea tipului unei expresii: operatorul typeoftypeof "Tux" string


operand rezultat

undefined 'undefined'

null 'object'

de tip Boolean 'boolean'

de tip Number 'number'

de tip String 'string'

Function 'function'

orice alte valori 'object'

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operatorii logici && și ||

var nume = unNume || "Implicit";


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operatorul ternar de test ? :

var prezență = (studenți > 33) ? "Prea mulți" : "Cam puțini…";


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

(testarea se realizează cu operatorul ===)

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

case 4 + 1 : egalitate ();

break;

default : absurd (); // nu se apelează niciodată

}

caracteristici: control

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Ciclare: while, do … while, for

do {

var nume = preiaNume ();

} while (nume != "");

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

// de 33 de ori…

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Excepții: try … catch … finally

try { // Linii "periculoase" ce pot cauza excepții

} catch (eroare) {// Linii rulate la apariția unei/unor excepții

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

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Excepții: try … catch … finally

try { // Linii "periculoase" ce pot cauza excepții

} catch (eroare) {// Linii rulate la apariția unei/unor excepții

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

}

emiterea unei excepții: throw

throw new Error ("O eroare de-a noastră...");


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Perechi nume—valoare

caracteristici: obiecte

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


tabele de dispersie (hash) în C/C++tablouri asociative în Perl, PHP sau Ruby

HashMaps în Java

“everything except primitive values is an object”


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


numele este desemnat de un șir de caractere(i.e., expresie de tip String)

valoarea poate fi de orice tip, inclusiv null sau undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Obiect colecție de proprietăți,având mai multe atribute


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Obiect colecție de proprietăți,având mai multe atribute

proprietățile pot conține alte obiecte,valori primitive sau metode


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Obiecte predefinite – exemplificări:

Global Object

Function Array

String RegExp

Boolean Number

Math Date


de studiat developer.mozilla.org/JavaScript/Reference/Global_Objects

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Obiecte fundamentale vizând gestionarea erorilor

Error

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Create prin intermediul operatorului new:

var ob = new Object();

var ob = { }; // echivalent cu linia anterioară


se preferă această sintaxă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Accesarea proprietăților – operatorul .

ob.nume = "Tux";

var nume = ob.nume;


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Accesarea proprietăților – operatorul .

ob.nume = "Tux";

var nume = ob.nume;

echivalent cu:

ob["nume"] = "Tux";

var nume = ob["nume"];


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Declarare + asignare:

var pinguin = {

nume: "Tux",

proprietati: {

culoare: "verde",

marime: 17

}

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Declarare + asignare:

var pinguin = {

nume: "Tux",

proprietati: {

culoare: "verde",

marime: 17

}

}


accesare:pinguin.proprietati.marime 17

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

var facultyContactInfo = {

// numele proprietăților sunt încadrate de ghilimele

"official-phone" : '+40232201090',

city : 'Iași', // dacă numele e identificator valid, ghilimelele pot fi omise

'street' : 'General Berthelot',

'number' : 16, // pot fi folosite orice tipuri de date primitive

"class" : "new", // cuvintele rezervate se plasează între ghilimele

coord : { // obiectele pot conține alte obiecte (nested objects)

'geo' : { 'x': 47.176591, 'y': 27.575930 }

},

age : Math.floor ("25.7") // pot fi invocate metode de calcul a valorilor

};

console.log (facultyContactInfo.coord["geo"].y); // obținem 27.57593

adaptare după Sergiu Dumitriu (2012)

redare în consola mediului de rulare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Iterarea proprietăților – considerate chei:

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

for (var proprietate in pinguin) {

console.log (proprietate + ' = ' + pinguin[proprietate]);

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Eliminarea proprietăților se realizează cu delete

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

pinguin.nume = undefined; // nu șterge proprietatea

delete pinguin.marime; // eliminare efectivă

for (var prop in pinguin) {

console.log (prop + "=" + pinguin[prop]);

}

// va apărea doar "nume=undefined"


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Tipuri speciale de obiecte

proprietățile (cheile) sunt numere,nu șiruri de caractere

caracteristici: tablouri

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Array

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Se poate utiliza sintaxa privitoare la obiecte:

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

animale.length 3


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Se poate utiliza sintaxa privitoare la obiecte:

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

animale.length 3

notație alternativă – preferată:

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Elementele pot aparțineunor tipuri de date eterogene

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Tablourile pot avea „găuri” (sparse arrays):


animale[33] = "om";

animale.length 34typeof animale[13] undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Tablourile pot avea „găuri” (sparse arrays):


animale[33] = "om";

animale.length 34typeof animale[13] undefined

pentru a adăuga elemente putem recurge la:animale[animale.length] = altAnimal;


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

var vector = [ ];

vector[0] = "zero";

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

vector[3.14] = "pi";

vector[Math.PI] = "un pi mai precis";

for (var elem in vector) {

console.log ("vector[" + elem + "] = " + vector[elem] +

", typeof( " + elem +") == " + typeof (elem));

}

caracteristici: tablouri – exemplu

adaptare după John Kugelman (2009)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rezultatul obținut în urma rulării programului JavaScript via aplicația JS Bin – jsbin.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Interări:

for (var it = 0; it < animale.length; it++) {

// de prelucrat animale[it]

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Interări:

for (var it = 0; it < animale.length; it++) {


}

// variantă mai bună

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


}


de ce?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Metode utile:

toString() concat(item, ..) join(sep) fill(val, start, end)

keys() values()

pop() push(item,…) map(func, arg) reduce(func, val)

reverse() shift() unshift(item,...) slice(begin, end)

filter(func, arg) find(func, arg) every(func, arg)

sort(func) splice(start, delCount, item,...)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Definite via function

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

}

caracteristici: funcții

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Function

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dacă nu este întors nimic în mod explicit, valoarea de retur se consideră undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Parametrii de intrare pot lipsi, fiind considerați undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Pot fi transmise mai multe argumente,cele în surplus fiind ignorate

transformaPixeliInPuncte (10, 7) 3000


alte detalii în eloquentjavascript.net/03_functions.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Funcțiile sunt tot obiecte

astfel, pot fi specificate funcții anonime


expresiilambda

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Funcțiile sunt tot obiecte

astfel, pot fi specificate funcții anonime

în acest sens, JavaScript este un limbaj funcțional


expresiilambda

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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;

};


variabilele declarate în funcție nu vor fi

accesibile din exterior, fiind „închise”

funcție closure

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

pentru aprofundarea aspectelor vizând programarea funcțională în JavaScript, a se studia

github.com/stoeffel/awesome-fp-js

console.log ( media (9, 10, 7, 8, 7) ) 8.2

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

precizați ce efect vor avea liniile de cod următoare:console.log ( typeof (media) );

console.log ( media() );

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

variabila media este de tip function

apelul media() întoarce valoarea NaN

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// definirea unei funcții recursive pentru inversarea unui șir de caractere

// (se observă și utilizarea Unicode în cadrul programului)

function inverseazăȘir (șir) {

return șir === '' ? '' : inverseazăȘir (șir.substr (1)) + șir.charAt (0);

}

// testare (folosind diverse caractere Unicode)

console.log (inverseazăȘir ("☞Iñtërnâțiônàlîzætiøn☜"));

caracteristici: funcții recursive

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Detalii despre trăsăturile vizând programarea orientată-obiect?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

function Animal (nume, marime) {

this.nume = nume; // date-membre

this.marime = marime;

this.oferaNume = function () { // metodă

return this.nume;

};

this.oferaMarime = function () { // metodă

return this.marime;

};

}


creational pattern

pseudo-clase(utilizarea

constructorilor)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operatorul new creează un nou obiect vid șiapelează funcția specificată cu this setat pe acest obiect

aceste funcții se numesc constructori,trebuie apelate via new

și, prin convenție, au numele scris cu literă mare


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Față de alte limbaje de programare, obiectul curent – referit cu this –

este asignat ca fiind obiectul global

de exemplu, în browser, reprezintă fereastra curentăîn care este redat documentul: this window


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


trasarea pas-cu-pas a execuției programului, cu inspectarea valorilor variabilelor, via www.pythontutor.com/visualize.html#mode=edit

// instanțierea unui obiectvar tux = new Animal ("Tux", 17); console.log (tux.oferaNume ());var jox = tux;console.log (jox.oferaNume ());// alt obiectvar pax = new Animal ("Pax", 15); pax.marime = 21;console.log (pax.oferaMarime ());

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


trasarea pas-cu-pas a execuției programului, cu inspectarea valorilor variabilelor, via www.pythontutor.com/visualize.html#mode=edit

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Metodele pot fi declarate și în exteriorul constructorului

function oferaNumeAnimal () {

return this.nume;

}

function Animal (nume, marime) {

this.nume = nume;

this.marime = marime;

this.oferaNume = oferaNumeAnimal; // referă funcția de mai sus

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Orice obiect deține trei tipuri de proprietăți:

named data propertyo proprietate având asignată o valoare

named accessor propertyde tip setter/getter pentru a stabili/accesa o valoare

internal propertyfolosită exclusiv de procesorul ECMAScript

caracteristici: proprietăți

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Fiecare proprietate are asociate atributele:

[[Value]] – desemnează valoarea curentă a proprietății[[Writable]] – indică dacă o proprietate

poate să-și modifice valoarea[[Get]] și [[Set]] – funcții opționale pentru a oferi/stabili

valoarea unei proprietăți de tip accessor[[Enumerable]] – specifică dacă numele proprietății

va fi disponibil într-o buclă for-in

[[Configurable]] – indică dacă proprietatea poate fi ștearsă ori redefinită


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

proprietăți interne importante (folosite de procesorul ECMAScript, dar inaccesibile la nivel de program)

[[Prototype]] definește ierarhiilor de obiecte

[[Get]] [[Put]] [[CanPut]] pentru accesarea valorilor

[[HasProperty]]

[[DefineOwnProperty]]

[[GetProperty]]

[[GetOwnProperty]]

[[Delete]]

manipularea proprietăților

[[Extensible]] indică obiectele ce pot fi extinse

[[Construct]]

[[Call]]asociate obiectelor executabile

(funcții)

[[Code]]

[[Scope]]desemnează codul și contextul

unei obiect de tip funcție

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// crearea unei proprietăți simple stocând date

// (writable, enumerable, configurabile)

obiect = { };

obiect.numeProprietate = 33;

// crearea via API-ul intern a unei proprietăți stocând date

Object.defineProperty (obiect, "numeProprietate", {

value: 33, writable: true, enumerable: true, configurable: true }

)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

proprietățile interne ale obiectelor definitewww.objectplayground.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Deoarece orice obiect deține în mod implicit proprietatea prototype,

structura unei „clase” poate fi extinsă ulterior

caracteristici: prototipuri

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Object/prototype

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Deoarece orice obiect deține în mod implicit proprietatea prototype,

structura unei „clase” poate fi extinsă ulterior

un prototip e o proprietate oferind o legătură ascunsă către obiectul de care aparține


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dacă se încearcă accesarea unui element inexistentîn cadrul unui obiect dat,

se va verifica lanțul de prototipuri (prototype chain)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

function Animal (nume, marime) { // definiție inițialăthis.nume = nume;this.marime = marime;

}

// instanțiem obiecte de tip Animalvar tux = new Animal ("Tux", 17);var pax = new Animal ("Pax", 15);

// pe baza prototipurilor, definim noi metode// disponibile pentru toate obiectele din clasăAnimal.prototype.oferaNume = function () {

return this.nume;};Animal.prototype.oferaMarime = function () {

return this.marime;};

console.log (tux.oferaMarime ());console.log (pax.oferaMarime ());

aceste definiții sunt disponibile

în întreg programul (hoisting)

developer.mozilla.org/docs/Glossary/Hoisting

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Pentru a cunoaște tipul unui obiect(pe baza constructorului și a ierarhiei de prototipuri)

se folosește operatorul instanceof


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

marimi instanceof Array true

marimi instanceof Object true

marimi instanceof String false

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

tux instanceof Object true

tux instanceof Array false


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Adăugarea unei metode se realizează via prototype

Animal.prototype.oferaNumeMare = function () {

return this.nume.toUpperCase ();

};

tux.oferaNumeMare () "TUX"

caracteristici: extinderea claselor

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Pot fi extinse și obiectele predefinite:

// adăugăm o metodă obiectului String

String.prototype.inversează = function () {

var inv = '';

for (var iter = this.length - 1; iter >= 0; iter--) { // inversăm șirul…

inv += this[iter];

}

return inv;

};

"Web".inversează() "beW"


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Cel mai general prototype este cel al lui Object

una dintre metodele disponibile – predefinite –este toString() care poate fi suprascrisă (over-ride)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

tux.toString () [object Object]

Animal.prototype.toString = function () {return '<animal>' + this.oferaNume () + '</animal>';

};

tux.toString () "<animal>Tux</animal>"


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Atenție la pericole!

de exemplu, comportamentul diferit al construcțieifor (var proprietate in obiect)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

function Animal (nume, marime) { // definiție inițialăthis.nume = nume;this.marime = marime;this.oferaNume = function() { return this.nume; }

}

var tux = new Animal ("Tux", 17);var jox = tux;var pax = new Animal ("Pax", 15);

console.log ('Numele lui Tux: ' + tux.oferaNume ()); // 'Tux'

// dorim să suprascriem metoda deja existentă în definiția 'clasei'Animal.prototype.oferaNume = function () { return this.nume + ' ' + this.marime; };// suprascriem metoda pentru un obiect particularpax.oferaNume = function () { return this.nume + ' ' + this.marime; };

console.log ('Numele lui Tux: ' + tux.oferaNume ()); // 'Tux'console.log ('Numele lui Jox: ' + jox.oferaNume ()); // 'Tux'console.log ('Numele lui Pax: ' + pax.oferaNume ()); // 'Pax 15'

discuție

???

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

function Animal (nume, marime) { // definiție inițialăthis.nume = nume;this.marime = marime;this.oferaNume = function() { return this.nume; }

}

var tux = new Animal ("Tux", 17);var jox = tux;var pax = new Animal ("Pax", 15);

console.log ('Numele lui Tux: ' + tux.oferaNume ()); // 'Tux'

// dorim să suprascriem metoda deja existentă în definiția 'clasei'Animal.prototype.oferaNume = function () { return this.nume + ' ' + this.marime; };// suprascriem metoda pentru un obiect particularpax.oferaNume = function () { return this.nume + ' ' + this.marime; };

console.log ('Numele lui Tux: ' + tux.oferaNume ()); // 'Tux'console.log ('Numele lui Jox: ' + jox.oferaNume ()); // 'Tux'console.log ('Numele lui Pax: ' + pax.oferaNume ()); // 'Pax 15'

dacă numele metodei deja există pentru o instanță dată, nu se mai caută în lanțul de prototipuri

discuție

???

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Șablon general:

ClasaDeBază = function () { /* … */ };

SubClasa = function () { /* … */ };

SubClasa.prototype = new ClasaDeBază ();


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Deoarece o funcție reprezintă un obiect, poate fi:

stocată ca valoare (asociată unei variabile)

pasată ca argument al unei alte funcții

întoarsă de o funcție – fiind argument pentru return

caracteristici: funcții de nivel înalt

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dorim să calculăm greutatea unui animalfolosim formula greutate = marime * 33.25

varianta clasică:

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

var greutati = [ ];

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

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

}

caracteristici: funcții de nivel înalt

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Varianta îmbunătățită – mai generală:

function 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.25;

}

var greutati = genereazaTablouGreutati (marimi, calculGreutate);

referim funcțiace va realiza calculul

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Varianta îmbunătățită – mai generală:

function 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.25;

}

var greutati = genereazaTablouGreutati (marimi, calculGreutate);

calcul e variabilăde tip funcție

fiind funcție, se poate apela

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

a se consulta șiexemplele din arhivaasociată acestui curs

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript oferă un singur spațiu de nume, la nivel global

conflicte privind denumirea funcțiilor/variabilelorspecificate de programe diferite,

concepute de mai multi dezvoltatori

caracteristici: încapsulare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Nu trebuie afectat spațiul de nume global,păstrându-se codul-sursă la nivel privat


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Codul poate fi complet încapsulatvia funcții anonime

care „păstrează” construcțiile la nivel privat


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Declararea imbricată – ca expresii de tip funcție –a funcțiilor anonime are denumirea closures

developer.mozilla.org/JavaScript/Guide/Closures

caracteristici: closures

închideri

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Șablonul general:

// specificarea unei expresii de tip funcție

( function () {

// variabilele și funcțiile vor fi vizibile doar aici

// variabilele globale pot fi accesate

} ( ) );

caracteristici: closures

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

var cod = (function () {var priv = 0; // variabilă privatăfunction start (x) {

// ... poate accesa 'priv' // și funcția 'faCeva'

}function faAia (param) {// ... invizibilă din afară

}

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

}return { // sunt publice doar// funcțiile 'start' și 'faCeva''start': start, 'faCeva': faCeva

}}) ();

cod.start (arg); // apelăm 'start'

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

var cod = (function () {var priv = 0; // variabilă privatăfunction start (x) {

// ... poate accesa 'priv' // și funcția 'faCeva'

}function faAia (param) {// ... invizibilă din afară

}

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

}return { // sunt publice doar// funcțiile 'start' și 'faCeva''start': start, 'faCeva': faCeva

}}) ();

cod.start (arg); // apelăm 'start'

via closures, simulăm metodele privatemodularizare a codului (module pattern)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

var makeCounter = function () {var contorPrivat = 0; // un contor de valori (inițial, zero)function changeBy (val) { // funcție privată

contorPrivat += val; // ce modifică valoarea contorului}return { // funcții publice (expuse)

increment: function() {changeBy (1);

},decrement: function() {

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

return contorPrivat;}

}; };

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

contor1.increment ();

contor1.increment ();


contor1.decrement ();



Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Reducerea arității unei funcții

“a technique of transforming a multi-argument function in such a way that it can be called as a chain of functions,

each with a single argument” (G. Kay Lee)

slides.com/gsklee/functional-programming-in-5-minutes

caracteristici: currying

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

în loc de (x, y) x + y putem scrie x (y x + y)

function f(x, y) {

return x + y;

}

function g(x) {

return function (y) {

return x + y;

}

}

f(33, 74) g(33)(74);

caracteristici: currying

„lanț” de funcții, fiecare având un singur argument

detalii în tutorialul www.sitepoint.com/currying-in-functional-javascript/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Totul în JavaScript este obiect – chiar și funcțiile

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Orice obiect este întotdeauna mutabil(poate fi alterat oricând)

proprietățile și metodele sunt disponibileoriunde în program (public scope)

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Nu există vizibilitate la nivel de bloc de cod(block scope),

ci doar la nivel global ori la nivel de funcție

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Funcțiile ascund orice e definit în interiorul lor

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operatorul “.” este echivalentcu de-referențierea:

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

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Operatorul new creează obiecte aparținând„clasei” specificate de funcția constructor

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Accesorul this este relativ la contextul execuției, nu al declarării

de reținut!

Atenție la dependența de mediul de execuție!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Proprietatea prototype are valorimodificabile (mutable)

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript Object Notation

json.org

biblioteci de procesare și alte resurse de interes:jsonauts.github.io

json

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Format compact pentru interschimb de date– în termeni de obiecte și literali – între aplicații

permite declararea de structuri de date:

colecții de perechi nume—valoare+

liste ordonate de valori

json

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript Object Notation

{

'nume': 'Tux',

'stoc': 33,

'model': [ 'candid', 'viteaz' ]

}

json

datele pot fi evaluate direct în JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Procesare via obiectul predefinit JSON

JSON.parse()

JSON.stringify()

json

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// definim un șir de caractere ce specifică diverse construcții JSON

// (e.g., preluarea datelor via Ajax/WebSocket-uri de la un serviciu Web/API)

var sirTux = '{ "nume": "Tux", "stoc": 33, "model": [ "candid", "viteaz" ] }';

var tux;

try { // procesăm șirul pentru a genera un obiect JS via obiectul JSON

tux = JSON.parse (sirTux);

} catch (e) { console.log (e.message); /* eroare :( */ }

// obiectul 'tux' generat cu JSON.parse

console.log (tux);

// serializare ca șir de caractere

console.log (JSON.stringify (tux));

escaped special characters

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

suportul actual oferit de browser pentru JSON

caniuse.com/#search=json

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

episodul viitor: programare în JavaScript (continuare)

la nivel de client - profs.info.uaic.ro · ga .ro / ~ co “There are only two kinds of languages:...

Documents

Transcript of la nivel de client - profs.info.uaic.ro · ga .ro / ~ co “There are only two kinds of languages:...