O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
17. Dr.SabinBuragawww.purl.org/net/busaco
Mediu de execuție (host-environment)
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
19. Dr.SabinBuragawww.purl.org/net/busaco
Mediu de execuție (host-environment)
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
20. Dr.SabinBuragawww.purl.org/net/busaco
Mediu de execuție (host-environment)
independent de navigatorul Web
platforme de dezvoltare de aplicații distribuite: Node.js
servere Web – nginScript în cadrul Nginx
servere de baze de date – e.g., Apache CouchDB
componente ale sistemului de operare
aplicații de sine-stătătoare – e.g., Adobe Creative Suite
22. Dr.SabinBuragawww.purl.org/net/busaco
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
35. Dr.SabinBuragawww.purl.org/net/busaco
Operații avansate cu numere se pot realiza
via obiectul predefinit Math
metode:
Math.abs(x) Math.ceil(x) Math.cos(x) Math.exp(x) Math.floor(x)
Math.log(x) Math.max(x, ..) Math.min(x, ..) Math.pow(x, y)
Math.random() Math.round(x) Math.sin(x) Math.sqrt(x) etc.
caracteristici: tipuri de date
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Math
46. Dr.SabinBuragawww.purl.org/net/busaco
Comparații: < > <= >= (numere și șiruri)
egalitatea valorilor se testează cu == și !=
1 == true true
a se folosi: 1 === true false
caracteristici: operatori
inhibă conversia
tipurilor de date
47. Dr.SabinBuragawww.purl.org/net/busaco
Aflarea tipului unei expresii: operatorul typeof
typeof "Tux" string
caracteristici: operatori
operand rezultat
undefined 'undefined'
null 'object'
de tip Boolean 'boolean'
de tip Number 'number'
de tip String 'string'
Function 'function'
orice alte valori 'object'
50. Dr.SabinBuragawww.purl.org/net/busaco
Testare: if … else, switch
pentru 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
52. Dr.SabinBuragawww.purl.org/net/busaco
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
}
caracteristici: control
53. Dr.SabinBuragawww.purl.org/net/busaco
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ă...");
caracteristici: control
66. Dr.SabinBuragawww.purl.org/net/busaco
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
78. Dr.SabinBuragawww.purl.org/net/busaco
Interări:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
// variantă mai bună
for (var it = 0, lung = animale.length; it < lung; it++) {
// de prelucrat animale[it]
}
caracteristici: tablouri
de ce?
83. Dr.SabinBuragawww.purl.org/net/busaco
Pot fi transmise mai multe argumente,
cele în surplus fiind ignorate
transformaPixeliInPuncte (10, 7) 3000
caracteristici: funcții
alte detalii în eloquentjavascript.net/03_functions.html
86. Dr.SabinBuragawww.purl.org/net/busaco
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;
};
caracteristici: funcții
variabilele declarate
în funcție nu vor fi
accesibile din exterior,
fiind „închise”
funcție closure
94. Dr.SabinBuragawww.purl.org/net/busaco
Operatorul new creează un nou obiect vid și
apelează 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
caracteristici: obiecte
95. Dr.SabinBuragawww.purl.org/net/busaco
Față de alte limbaje de programare,
obiectul curent – referit cu this –
este setat ca fiind obiectul global
de exemplu, în browser, reprezintă fereastra curentă
în care este redat documentul: this window
caracteristici: obiecte
96. Dr.SabinBuragawww.purl.org/net/busaco
caracteristici: obiecte
trasarea pas-cu-pas a execuției programului, cu inspectarea valorilor
variabilelor, via www.pythontutor.com/visualize.html#mode=edit
// instanțierea unui obiect
var tux = new Animal ("Tux", 17);
console.log (tux.oferaNume ());
var jox = tux;
console.log (jox.oferaNume ());
// alt obiect
var pax = new Animal ("Pax", 15);
pax.marime = 21;
console.log (pax.oferaMarime ());
98. Dr.SabinBuragawww.purl.org/net/busaco
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
}
caracteristici: obiecte
99. Dr.SabinBuragawww.purl.org/net/busaco
Orice obiect deține trei tipuri de proprietăți:
named data property
o proprietate având asignată o valoare
named accessor property
de tip setter/getter pentru a stabili/accesa o valoare
internal property
folosită exclusiv de procesorul ECMAScript (JavaScript)
caracteristici: proprietăți
100. Dr.SabinBuragawww.purl.org/net/busaco
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ă
caracteristici: proprietăți
101. Dr.SabinBuragawww.purl.org/net/busaco
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
102. Dr.SabinBuragawww.purl.org/net/busaco
// crearea unei proprietăți simple stocând date
// (writable, enumerable, configurabile)
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 }
)
caracteristici: proprietăți
104. Dr.SabinBuragawww.purl.org/net/busaco
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
105. Dr.SabinBuragawww.purl.org/net/busaco
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
caracteristici: prototipuri
107. Dr.SabinBuragawww.purl.org/net/busaco
function Animal (nume, marime) { // definiție inițială
this.nume = nume;
this.marime = marime;
}
// instanțiem obiecte de tip Animal
var 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)
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
112. Dr.SabinBuragawww.purl.org/net/busaco
Pot fi extinse și obiectele predefinite:
// adăugăm o metodă obiectului String
String.prototype.inverseaza = function () {
var inv = '';
for (var iter = this.length - 1; iter >= 0; iter--) { // inversăm șirul…
inv += this[iter];
}
return inv;
};
"Web".inverseaza () "beW"
caracteristici: extinderea claselor
113. Dr.SabinBuragawww.purl.org/net/busaco
Cel mai general prototype este cel al lui Object
una dintre metodele disponibile – predefinite –
este toString() care poate fi suprascrisă (over-ride)
caracteristici: extinderea claselor
117. Dr.SabinBuragawww.purl.org/net/busaco
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 particular
pax.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
118. Dr.SabinBuragawww.purl.org/net/busaco
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 particular
pax.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
???
120. Dr.SabinBuragawww.purl.org/net/busaco
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
121. Dr.SabinBuragawww.purl.org/net/busaco
Dorim să calculăm greutatea unui animal
folosim formula greutate = marime * 33
varianta clasică:
var marimi = [17, 20, 7, 14];
var greutati = [ ];
for (var contor = 0; contor < marimi.length; contor++) {
greutati[contor] = marimi[contor] * 33;
}
caracteristici: funcții de nivel înalt
122. Dr.SabinBuragawww.purl.org/net/busaco
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;
}
var greutati = genereazaTablouGreutati (marimi, calculGreutate);
referim funcția
ce va realiza calculul
123. Dr.SabinBuragawww.purl.org/net/busaco
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;
}
var greutati = genereazaTablouGreutati (marimi, calculGreutate);
calcul e variabilă
de tip funcție
fiind funcție,
se poate apela
125. Dr.SabinBuragawww.purl.org/net/busaco
JavaScript oferă un singur spațiu de nume,
la nivel global
conflicte privind denumirea funcțiilor/variabilelor
specificate de programe diferite,
concepute de mai multi dezvoltatori
caracteristici: încapsulare
134. Dr.SabinBuragawww.purl.org/net/busaco
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
135. Dr.SabinBuragawww.purl.org/net/busaco
î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/
148. Dr.SabinBuragawww.purl.org/net/busaco
// 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