Dr. Sabin Buragawww.purl.org/net/busaco

programare Web
la nivel de client

o prezentare generală a limbajului JavaScript
Ch’Ao Pu-Che

Dr. Sabin Buragawww.purl.org/net/busaco

“Un arcaș bun atinge ținta
chiar înainte de a trage.”
un limbaj de programare pentru Web

Dr. Sabin Buragawww.purl.org/net/busaco

JavaScript
denumit inițial LiveScript

Dr. Sabin Buragawww.purl.org/net/busaco

Inventat de Brendan Eich (1995)
Dr. Sabin Buragawww.purl.org/net/busaco

Implementat în premieră de browser-ul
Netscape Navigator
Dr. Sabin Buragawww.purl.org/net/busaco

Adaptat de Microsoft: JScript (1996)
ECMAScript
ECMA-262

www.ecma-international.org

Dr. Sabin Buragawww.purl.org/net/busaco

Standardizat în 1997 de ECMA
Eu...
ECMAScript
versiunea standardizată actuală: 5.1 (iunie 2011)
versiunea în lucru: 6.0 (în curând)
www.ecma-international.or...
Dr. Sabin Buragawww.purl.org/net/busaco

Limbaj de tip script (interpretat)
destinat să manipuleze, să automatizeze
și să integreze funcționalitățile
oferite de un anumit sistem

Dr. Sabin Buragaww...
nu necesită intrări/ieșiri în mod implicit

Dr. Sabin Buragawww.purl.org/net/busaco

Limbaj de tip script (interpretat)
imperativă
à la C

Dr. Sabin Buragawww.purl.org/net/busaco

Adoptă diverse paradigme de programare
funcțională
λ calculfuncții anonime, închideri (closures),…

Dr. Sabin Buragawww.purl.org/net/busaco

Adoptă diverse par...
pseudo-obiectuală
via prototipuri
(obiectele moștenesc alte obiecte, nu clase)

Dr. Sabin Buragawww.purl.org/net/busaco

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

Dr. Sabin Buragawww.purl.org/net/busaco

Ado...
Dr. Sabin Buragawww.purl.org/net/busaco

Cum putem executa programele JavaScript?
navigator Web

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuție (host-environment)

permite rularea de aplicați...
navigator Web
“injectarea” de cod JavaScript
în documentele HTML via elementul <script>

Dr. Sabin Buragawww.purl.org/net...
navigator Web
“injectarea” de cod JavaScript
în documentele HTML via elementul <script>

cod extern referit printr-un URL
...
platformă de dezvoltare a aplicațiilor
exemple:
Adobe AIR
Apache Flex

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de ...
software de sine-stătător
Adobe Creative Suite, UltraEdit etc.

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuți...
procesor (engine) independent
exemplificare:
Yahoo! Widget Engine

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de exec...
componente ale sistemului de operare
Dashboard – Mac OS X
Sidebar – Windows Vista/7
Windows Store Apps – Windows 8
PlaySta...
server Web
exemplu tipic: node.js

Dr. Sabin Buragawww.purl.org/net/busaco

Mediu de execuție (host-environment)
Cuvinte rezervate:

break else new var case finally return void catch
for switch while continue function this with default...
Alte cuvinte rezervate:

abstract enum int short boolean export interface
static byte extends long super char final native...
Number
reprezentare în dublă precizie

stocare pe 64 biți – standardul IEEE 754

Dr. Sabin Buragawww.purl.org/net/busaco
...
String
secvențe de caractere Unicode

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

Dr. Sabin Buragawww.purl.org/net/busaco

c...
Boolean
expresii ce se pot evalua ca fiind true/false

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de...
Object
Function
Array
Date
RegExp
și altele

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Null
semnifică “nici o valoare”

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Undefined
are semnificația “nici o valoare asignată încă”

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipur...
Nu există valori întregi

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Nu există valori întregi

convertirea unui șir în număr: parseInt ()
parseInt ("123")  123
parseInt ("11", 2)  3
indică ...
Operații avansate cu numere se pot realiza
via obiectul predefinit Math

Dr. Sabin Buragawww.purl.org/net/busaco

caracte...
Operații avansate cu numere se pot realiza
via obiectul predefinit Math
constante predefinite:
Math.PI
Math.E
Math.LN10
et...
Operații avansate cu numere se pot realiza
via obiectul predefinit Math
metode:
Math.abs(x) Math.ceil(x) Math.cos(x) Math....
“Valoarea” NaN (“not a number”)
parseInt ("Salut")  NaN
isNaN (NaN + 3)  true

Dr. Sabin Buragawww.purl.org/net/busaco
...
Valori speciale:
Infinity
–Infinity

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Un caracter reprezintă un șir de lungime 1

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Șirurile sunt obiecte
"Salut".length  5

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: tipuri de date
Metode utile
pentru procesarea șirurilor de caractere:
s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..)
s.indexOf(s1, star...
Valorile 0, "", NaN, null, undefined
sunt interpretate ca fiind false
!!234  true

Dr. Sabin Buragawww.purl.org/net/busa...
Variabilele se declară cu var
var marime;
var numeAnimal = "Tux";

variabilele declarate fără valori asignate,
se consider...
Dacă nu se folosește var,
atunci variabila este considerată globală

de evitat așa ceva!

Dr. Sabin Buragawww.purl.org/ne...
Valorile sunt “legate” tardiv la variabile
(late binding)

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: varia...
Există posibilitatea mărginirii
domeniului de vizibilitate (scope) via let
var x = 5;
var y = 0;
console.log (let (x = x +...
Pentru numere: + – * / %
De asignare: += –= *= /= %=
Incrementare & decrementare: ++ – –
Concatenare de șiruri: "Java" + "...
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 c...
Comparații: < > <= >= (numere și șiruri)
egalitatea valorilor se testează cu == și !=
1 == true  true

Dr. Sabin Buragaw...
Comparații: < > <= >= (numere și șiruri)
egalitatea valorilor se testează cu == și !=
1 == true  true
a se folosi: 1 === ...
Aflarea tipului unei expresii: operatorul typeof
typeof "Tux"  string

Dr. Sabin Buragawww.purl.org/net/busaco

caracter...
Operatorii logici && și ||
var nume = unNume || "Implicit";

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: ope...
Operatorul ternar de test ? :
var prezență = (studenți > 33) ? "Prea mulți" : "Cam puțini…";

Dr. Sabin Buragawww.purl.or...
Testare: if … else, switch
pentru switch, sunt permise expresii la fiecare case
(testarea se realizează cu operatorul ===)...
Ciclare: while, do … while, for
do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; cont...
Excepții: try … catch … finally
try {
// Linii "periculoase" ce pot cauza excepții
} catch (eroare) {
// Linii rulate la a...
Excepții: try … catch … finally
try {
// Linii "periculoase" ce pot cauza excepții
} catch (eroare) {
// Linii rulate la a...
Gestionarea erorilor
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

Dr. Sabin Buragawww.purl.o...
Perechi nume—valoare

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: obiecte
Perechi nume—valoare

tabele de dispersie (hash) în C/C++
tablouri asociative în Perl, PHP sau Ruby
HashMaps în Java
“ever...
Perechi nume—valoare
numele este desemnat de un șir de caractere
(i.e., expresie de tip String)
valoarea poate fi de orice...
Obiect  colecție de proprietăți,
având mai multe atribute

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: obie...
Obiect  colecție de proprietăți,
având mai multe atribute

proprietățile pot conține alte obiecte,
valori primitive sau m...
Obiecte predefinite:
Global
Object
Function
Array
String
Boolean
Number
Math
Date

Dr. Sabin Buragawww.purl.org/net/busac...
Create prin intermediul operatorului new:

var ob = new Object();
var ob = { }; // echivalent cu linia anterioară
se prefe...
Accesarea proprietăților – operatorul .

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

Dr. Sabin Buragawww.purl.org/net/busaco

c...
Accesarea proprietăților – operatorul .

ob.nume = "Tux";
var nume = ob.nume;
echivalent cu:

ob["nume"] = "Tux";
var nume...
Declarare + asignare:
var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}

Dr. Sabin Buragawww.p...
Accesare:
pinguin.proprietati.marime  17
pinguin["proprietati"]["culoare"]  verde

Dr. Sabin Buragawww.purl.org/net/bus...
console.log (facultyContactInfo.coord["geo"].y); // obținem 27.57593

adaptare după Sergiu Dumitriu (2012)

Dr. Sabin Bura...
Iterarea proprietăților – considerate chei:

var pinguin = { 'nume': 'Tux', 'marime': 17 };
for (var proprietate in pingui...
Eliminarea proprietăților se realizează cu delete
var pinguin = { 'nume': 'Tux', 'marime': 17 };
pinguin.nume = undefined;...
Tipuri speciale de obiecte

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

Dr. Sabin Buragawww.purl.org/net/...
Se poate utiliza sintaxa privitoare la obiecte:
var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "omida";
...
Se poate utiliza sintaxa privitoare la obiecte:
var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "omida";
...
Tablourile pot avea “găuri” (sparse arrays):
var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animal...
Tablourile pot avea “găuri” (sparse arrays):
var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animal...
var vector = [ ];
vector[0] = "zero";
vector[new Date().getTime()] = "now";
vector[3.14] = "pi";
for (var elem in vector) ...
Dr. Sabin Buragawww.purl.org/net/busaco

rezultatul obținut în urma rulării programului JavaScript
via JS Bin
Interări:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}

Dr. Sabin Buragawww.purl.org/net/b...
Interări:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
de ce?

// variantă mai bună
for (va...
Elementele pot aparține
unor tipuri de date eterogene
var animale = [33, "vierme", false, "gaga"];

Dr. Sabin Buragawww.p...
Metode utile:

a.toString() a.concat(item, ..) a.join(sep)
a.pop() a.push(item, ..) a.reverse()
a.shift() a.unshift([item]...
Definite via function
function transformaPixeliInPuncte (px) {
var puncte = px * 300;
return puncte;
}

Dr. Sabin Buragaw...
Dacă nu este întors nimic în mod explicit,
valoarea de retur se consideră undefined

Dr. Sabin Buragawww.purl.org/net/bus...
Parametrii de intrare pot lipsi,
fiind considerați undefined

Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: fu...
Pot fi transmise mai multe argumente,
cele în surplus fiind ignorate
transformaPixeliInPuncte (10, 7)  3000

Dr. Sabin Bu...
Argumentele primite de o funcție se accesează
via tabloul arguments:
function aduna () {
var suma = 0;
for (var i = 0, j =...
Funcțiile sunt tot obiecte

astfel, pot fi specificate funcții anonime
expresii
lambda

Dr. Sabin Buragawww.purl.org/net/...
Funcțiile sunt tot obiecte

astfel, pot fi specificate funcții anonime
expresii
lambda

în acest sens, JavaScript este un ...
var media = function () { // calculul mediei a N numere
var suma = 0;
for (var iter = 0,
lung = arguments.length;
iter < l...
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

precizați ce efect vor avea liniile de cod următoare:
console.log ( typeof (medi...
Dr. Sabin Buragawww.purl.org/net/busaco

variabila media este de tip function
apelul media() întoarce valoarea NaN
/* determină numărul caracterelor din nodurile text
ale arborelui DOM-ului asociat unui document */
function numaraCaracte...
Dr. Sabin Buragawww.purl.org/net/busaco

// varianta folosind funcții anonime
var nrCaractDoc = (function (element) {
if ...
Exemplificare:
dorim să procesam – via funcții –
caracteristici ale unor animale

Dr. Sabin Buragawww.purl.org/net/busaco...
function creeazaAnimal (nume, marime) {
return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return anima...
function creeazaAnimal (nume, marime) {
return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return anima...
O “clasă” referitoare la animale:
function creeazaAnimal (nume, marime) {
return {
nume: nume,
// date-membre
marime: mari...
Dorim să apelăm metodele definite:
var tux = creeazaAnimal ("Tux", 17);
tux.oferaMarime ()

ReferenceError: animal is not...
Obiectul curent (“this”) este setat ca fiind obiectul global
de exemplu, în browser, reprezintă fereastra curentă
în care ...
function Animal (nume, marime) {
this.nume = nume;
// date-membre
this.marime = marime;
this.oferaNume = function () { // ...
clase – utilizarea
constructorilor

function Animal (nume, marime) {
this.nume = nume;
// date-membre
this.marime = marime...
Operatorul new creează un nou obiect vid și
apelează funcția specificată cu this setat pe acest obiect
aceste funcții se n...
Metodele pot fi declarate și în exteriorul constructorului
function oferaNumeAnimal () {
return this.nume;
}
function Anim...
Orice obiect deține trei tipuri de proprietăți:
named data property
o proprietate având asignată o valoare

named accessor...
Fiecare proprietate are asociate atributele:
[[Value]] – desemnează valoarea curentă a proprietății
[[Writable]] – indică ...
[[Get]] [[Put]] [[CanPut]]
[[HasProperty]]
[[DefineOwnProperty]]
[[GetProperty]]
[[GetOwnProperty]]
[[Delete]]
[[Extensibl...
// crearea unei proprietăți simple stocând date
// (writable, enumerable, configurabile)
obiect.numeProprietate = 33;
// c...
Dr. Sabin Buragawww.purl.org/net/busaco

proprietățile interne ale obiectelor definite
http://www.objectplayground.com/
Deoarece orice obiect deține în mod implicit
proprietatea prototype,
structura unei clase poate fi extinsă ulterior

Dr. S...
Deoarece orice obiect deține în mod implicit
proprietatea prototype,
structura unei clase poate fi extinsă ulterior

un pr...
Dacă se încearcă accesarea unui element inexistent
în cadrul unui obiect dat,
se va verifica lanțul de prototipuri (protot...
// pe baza protipurilor, definim noi metode
Animal.prototype.oferaNume = function () {
return this.nume;
};
Animal.prototy...
Dr. Sabin Buragawww.purl.org/net/busaco
Pentru a cunoaște tipul unui obiect
(pe baza constructorului și a ierarhiei de prototipuri)
se folosește operatorul instan...
var marimi = [17, 20, 7, 14];
marimi instanceof Array 
marimi instanceof Object 
marimi instanceof String 

true
true
f...
Dr. Sabin Buragawww.purl.org/net/busaco

caracteristici: extinderea claselor
Adăugarea unei metode se realizează via prot...
Pot fi extinse și obiectele predefinite:
// adăugăm o metodă obiectului String
String.prototype.inverseaza = function () {...
Cel mai general prototype este cel al lui Object

Una dintre metodele disponibile este toString()
care poate fi suprascris...
var tux = new Animal ("Tux", 17);
tux.toString ()



[object Object]

Animal.prototype.toString = function () {
return '<...
Dr. Sabin Buragawww.purl.org/net/busaco
Atenție la pericole!
de exemplu, comportamentul diferit al construcției
for (var proprietate in obiect)

Dr. Sabin Buraga...
Șablon general:
ClasaDeBaza = function () { /* … */ };
SubClasa = function () { /* … */ };
SubClasa.prototype = new ClasaD...
Deoarece o funcție reprezintă un obiect, poate fi:
stocată ca valoare (asociată unei variabile)
pasată ca argument al unei...
Dorim să calculăm greutatea unui animal,
după formula greutate = marime * 33
varianta clasică:

var marimi = [17, 20, 7, 1...
function genereazaTablouGreutati (tablou, calcul) {
var rezultat = [ ];
for (var contor = 0; contor < tablou.length; conto...
function genereazaTablouGreutati (tablou, calcul) {
var rezultat = [ ];
for (var contor = 0; contor < tablou.length; conto...
Dr. Sabin Buragawww.purl.org/net/busaco

a se consulta și
exemplele din arhiva
asociată acestui curs
JavaScript oferă un singur spațiu de nume,
la nivel global

conflicte privind denumirea funcțiilor/variabilelor
specifica...
Nu trebuie afectat spațiul de nume global,
păstrându-se codul-sursă la nivel privat

Dr. Sabin Buragawww.purl.org/net/bus...
Codul poate fi complet încapsulat
via funcții anonime
care “păstrează” construcțiile la nivel privat

Dr. Sabin Buragawww...
Declararea imbricată – ca expresii de tip funcție –
a funcțiilor anonime are denumirea closures
închideri

https://develop...
// specificarea unei expresii de tip funcție
( function () {
// variabilele & funcțiile vor fi vizibile doar aici
// varia...
function faCeva (x, y) {
// ...
}
return {
// sunt publice doar
// funcțiile 'start' și 'faCeva'
'start': start,
'faCeva':...
function faCeva (x, y) {
// ...
}
return {
// sunt publice doar
// funcțiile 'start' și 'faCeva'
'start': start,
'faCeva':...
console.log (contor1.value ()); /* 1 */
console.log (contor2.value ()); /* 0 */

Dr. Sabin Buragawww.purl.org/net/busaco
...
Dr. Sabin Buragawww.purl.org/net/busaco
Totul în JavaScript este obiect – chiar și funcțiile

Dr. Sabin Buragawww.purl.org/net/busaco

de reținut!
Orice obiect este întotdeauna mutabil
(poate fi alterat oricând)

proprietățile și metodele sunt disponibile
oriunde în pr...
Nu există vizibilitate la nivel de bloc de cod
(block scope),
ci doar la nivel global ori la nivel de funcție

Dr. Sabin B...
Funcțiile ascund orice e definit în interiorul lor

Dr. Sabin Buragawww.purl.org/net/busaco

de reținut!
Operatorul “.” este echivalent
cu de-referențierea:
ob.prop === ob["prop"]

Dr. Sabin Buragawww.purl.org/net/busaco

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

Dr. Sabin Buragawww.purl.org/net/b...
Accesorul this este relativ la contextul execuției,
nu al declarării

Dr. Sabin Buragawww.purl.org/net/busaco

de reținut...
Accesorul this este relativ la contextul execuției,
nu al declarării

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

Dr. Sa...
Proprietatea prototype are valori modificabile

Dr. Sabin Buragawww.purl.org/net/busaco

de reținut!
JavaScript Object Notation

http://json.org/

Dr. Sabin Buragawww.purl.org/net/busaco

json
JavaScript Object Notation
format compact pentru interschimb de date
între aplicații

biblioteci de procesare & alte resur...
JavaScript Object Notation
datele pot fi specificate
în termeni de obiecte și literali

Dr. Sabin Buragawww.purl.org/net/...
JavaScript Object Notation
{
datele pot fi evaluate
'nume': 'Tux',
direct în JavaScript
'stoc': 33,
'model': [ 'candid', '...
Dr. Sabin Buragawww.purl.org/net/busaco

răspuns JSON obținut în urma unei
interogări YQL (Yahoo! Query Language)
http://...
Dr. Sabin Buragawww.purl.org/net/busaco

episodul viitor: JavaScript în cadrul browser-ului
Upcoming SlideShare
Loading in …5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #8): Programare în limbajul JavaScript

499 views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
499
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #8): Programare în limbajul JavaScript

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client o prezentare generală a limbajului JavaScript
  2. 2. Ch’Ao Pu-Che Dr. Sabin Buragawww.purl.org/net/busaco “Un arcaș bun atinge ținta chiar înainte de a trage.”
  3. 3. un limbaj de programare pentru Web Dr. Sabin Buragawww.purl.org/net/busaco JavaScript
  4. 4. denumit inițial LiveScript Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995)
  5. 5. Dr. Sabin Buragawww.purl.org/net/busaco Implementat în premieră de browser-ul Netscape Navigator
  6. 6. Dr. Sabin Buragawww.purl.org/net/busaco Adaptat de Microsoft: JScript (1996)
  7. 7. ECMAScript ECMA-262 www.ecma-international.org Dr. Sabin Buragawww.purl.org/net/busaco Standardizat în 1997 de ECMA European Computer Manufacturers Association
  8. 8. ECMAScript versiunea standardizată actuală: 5.1 (iunie 2011) versiunea în lucru: 6.0 (în curând) www.ecma-international.org/publications/standards/Ecma-262.htm Dr. Sabin Buragawww.purl.org/net/busaco Standardizat în 1997 de ECMA European Computer Manufacturers Association
  9. 9. Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat)
  10. 10. destinat să manipuleze, să automatizeze și să integreze funcționalitățile oferite de un anumit sistem Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat)
  11. 11. nu necesită intrări/ieșiri în mod implicit Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat)
  12. 12. imperativă à la C Dr. Sabin Buragawww.purl.org/net/busaco Adoptă diverse paradigme de programare
  13. 13. funcțională λ calculfuncții anonime, închideri (closures),… Dr. Sabin Buragawww.purl.org/net/busaco Adoptă diverse paradigme de programare
  14. 14. pseudo-obiectuală via prototipuri (obiectele moștenesc alte obiecte, nu clase) Dr. Sabin Buragawww.purl.org/net/busaco Adoptă diverse paradigme de programare
  15. 15. dinamică variabilele își pot schimba tipul pe parcursul rulării programului Dr. Sabin Buragawww.purl.org/net/busaco Adoptă diverse paradigme de programare
  16. 16. Dr. Sabin Buragawww.purl.org/net/busaco Cum putem executa programele JavaScript?
  17. 17. navigator Web Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) permite rularea de aplicații Web la nivelul unei platforme (un sistem de operare) desktop (e.g., Linux, Windows 8) mobil – Android, iOS, Windows Phone, Firefox OS etc. …
  18. 18. navigator Web “injectarea” de cod JavaScript în documentele HTML via elementul <script> Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  19. 19. 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. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  20. 20. platformă de dezvoltare a aplicațiilor exemple: Adobe AIR Apache Flex Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  21. 21. software de sine-stătător Adobe Creative Suite, UltraEdit etc. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  22. 22. procesor (engine) independent exemplificare: Yahoo! Widget Engine Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  23. 23. componente ale sistemului de operare Dashboard – Mac OS X Sidebar – Windows Vista/7 Windows Store Apps – Windows 8 PlayStation etc. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  24. 24. server Web exemplu tipic: node.js Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment)
  25. 25. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa
  26. 26. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa
  27. 27. Number reprezentare în dublă precizie stocare pe 64 biți – standardul IEEE 754 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  28. 28. String secvențe de caractere Unicode fiecare caracter ocupă 16 biți (UTF-16) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  29. 29. Boolean expresii ce se pot evalua ca fiind true/false Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  30. 30. Object Function Array Date RegExp și altele Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  31. 31. Null semnifică “nici o valoare” Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  32. 32. Undefined are semnificația “nici o valoare asignată încă” Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  33. 33. Nu există valori întregi Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  34. 34. Nu există valori întregi convertirea unui șir în număr: parseInt () parseInt ("123")  123 parseInt ("11", 2)  3 indică baza de numerație Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  35. 35. Operații avansate cu numere se pot realiza via obiectul predefinit Math Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  36. 36. Operații avansate cu numere se pot realiza via obiectul predefinit Math constante predefinite: Math.PI Math.E Math.LN10 etc. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  37. 37. 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. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  38. 38. “Valoarea” NaN (“not a number”) parseInt ("Salut")  NaN isNaN (NaN + 3)  true Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  39. 39. Valori speciale: Infinity –Infinity Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  40. 40. Un caracter reprezintă un șir de lungime 1 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  41. 41. Șirurile sunt obiecte "Salut".length  5 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  42. 42. Metode utile pentru procesarea șirurilor de caractere: 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. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  43. 43. Valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false !!234  true Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date
  44. 44. Variabilele se declară cu var var marime; var numeAnimal = "Tux"; variabilele declarate fără valori asignate, se consideră undefined Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile
  45. 45. Dacă nu se folosește var, atunci variabila este considerată globală de evitat așa ceva! Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile
  46. 46. Valorile sunt “legate” tardiv la variabile (late binding) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile
  47. 47. Există posibilitatea mărginirii 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile
  48. 48. Pentru numere: + – * / % De asignare: += –= *= /= %= Incrementare & decrementare: ++ – – Concatenare de șiruri: "Java" + "Script"  "JavaScript" Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  49. 49. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  50. 50. Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  51. 51. Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true a se folosi: 1 === true  false inhibă conversia tipurilor de date Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  52. 52. Aflarea tipului unei expresii: operatorul typeof typeof "Tux"  string Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  53. 53. Operatorii logici && și || var nume = unNume || "Implicit"; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  54. 54. Operatorul ternar de test ? : var prezență = (studenți > 33) ? "Prea mulți" : "Cam puțini…"; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori
  55. 55. 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ă } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control
  56. 56. Ciclare: while, do … while, for do { var nume = preiaNume (); } while (nume != ""); for (var contor = 0; contor < 33; contor++) { // de 33 de ori… } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control
  57. 57. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: control
  58. 58. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: control
  59. 59. Gestionarea erorilor Error EvalError RangeError ReferenceError SyntaxError TypeError URIError Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control
  60. 60. Perechi nume—valoare Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  61. 61. Perechi nume—valoare 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. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  62. 62. Perechi nume—valoare 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. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  63. 63. Obiect  colecție de proprietăți, având mai multe atribute Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  64. 64. Obiect  colecție de proprietăți, având mai multe atribute proprietățile pot conține alte obiecte, valori primitive sau metode Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  65. 65. Obiecte predefinite: Global Object Function Array String Boolean Number Math Date Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  66. 66. Create prin intermediul operatorului new: var ob = new Object(); var ob = { }; // echivalent cu linia anterioară se preferă această sintaxă Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  67. 67. Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  68. 68. Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume; echivalent cu: ob["nume"] = "Tux"; var nume = ob["nume"]; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  69. 69. Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  70. 70. Accesare: pinguin.proprietati.marime  17 pinguin["proprietati"]["culoare"]  verde Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  71. 71. console.log (facultyContactInfo.coord["geo"].y); // obținem 27.57593 adaptare după Sergiu Dumitriu (2012) Dr. Sabin Buragawww.purl.org/net/busaco var facultyContactInfo = { // numele proprietăților sunt încadrate de ghilimele "official-phone" : '+40232201090', city : 'Iasi', // dacă numele e identificator valid, ghilimelele pot fi omise 'street' : 'Berthelot Street', '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 ("21.7") // pot fi invocate metode de calcul a valorilor };
  72. 72. Iterarea proprietăților – considerate chei: var pinguin = { 'nume': 'Tux', 'marime': 17 }; for (var proprietate in pinguin) { afiseaza (proprietate + ' = ' + pinguin[proprietate]); } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  73. 73. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  74. 74. Tipuri speciale de obiecte proprietățile (cheile) sunt numere, nu șiruri de caractere Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  75. 75. Se poate utiliza sintaxa privitoare la obiecte: var animale = new Array (); animale[0] = "pinguin"; animale[1] = "omida"; animale[2] = "pterodactil"; animale.length  3 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  76. 76. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  77. 77. Tablourile pot avea “găuri” (sparse arrays): var animale = ["pinguin", "omida", "pterodactil"]; animale[33] = "om"; animale.length  34 typeof animale[13]  undefined Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  78. 78. Tablourile pot avea “găuri” (sparse arrays): var animale = ["pinguin", "omida", "pterodactil"]; animale[33] = "om"; animale.length  34 typeof animale[13]  undefined pentru a adăuga elemente putem recurge la: animale[animale.length] = altAnimal; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  79. 79. 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)); } adaptare după John Kugelman (2009) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri – exemplu
  80. 80. Dr. Sabin Buragawww.purl.org/net/busaco rezultatul obținut în urma rulării programului JavaScript via JS Bin
  81. 81. Interări: for (var it = 0; it < animale.length; it++) { // de prelucrat animale[it] } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  82. 82. Interări: for (var it = 0; it < animale.length; it++) { // de prelucrat animale[it] } de ce? // variantă mai bună for (var it = 0, lung = animale.length; it < lung; it++) { // de prelucrat animale[it] } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  83. 83. Elementele pot aparține unor tipuri de date eterogene var animale = [33, "vierme", false, "gaga"]; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  84. 84. 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. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri
  85. 85. Definite via function function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  86. 86. Dacă nu este întors nimic în mod explicit, valoarea de retur se consideră undefined Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  87. 87. Parametrii de intrare pot lipsi, fiind considerați undefined Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  88. 88. Pot fi transmise mai multe argumente, cele în surplus fiind ignorate transformaPixeliInPuncte (10, 7)  3000 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  89. 89. Argumentele primite de o funcție se accesează via tabloul arguments: function aduna () { var suma = 0; for (var i = 0, j = arguments.length; i < j; i++) { suma += arguments[i]; } return suma; } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  90. 90. Funcțiile sunt tot obiecte astfel, pot fi specificate funcții anonime expresii lambda Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  91. 91. Funcțiile sunt tot obiecte astfel, pot fi specificate funcții anonime expresii lambda în acest sens, JavaScript este un limbaj funcțional Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  92. 92. 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; }; Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco
  94. 94. Dr. Sabin Buragawww.purl.org/net/busaco precizați ce efect vor avea liniile de cod următoare: console.log ( typeof (media) ); console.log ( media() );
  95. 95. Dr. Sabin Buragawww.purl.org/net/busaco variabila media este de tip function apelul media() întoarce valoarea NaN
  96. 96. /* determină numărul caracterelor din nodurile text ale arborelui DOM-ului asociat unui document */ function numaraCaractereDinNoduriText (element) { if (element.nodeType == 3) { // nod text (din DOM) return element.nodeValue.length; } var contor = 0; // recursiv, numărăm caracterele fiecărui nod copil // al arborelui DOM cu rădăcina ‘element’ for (var it = 0, copil; copil = element.childNodes[it]; it++) { contor += numaraCaractereDinNoduriText (copil); } vezi cele return contor; discutate la DOM } Dr. Sabin Buragawww.purl.org/net/busaco funcții recursive în JavaScript
  97. 97. Dr. Sabin Buragawww.purl.org/net/busaco // varianta folosind funcții 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); } furnizează care-i return contor; funcția apelantă }) (xml.root);
  98. 98. Exemplificare: dorim să procesam – via funcții – caracteristici ale unor animale Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  99. 99. function creeazaAnimal (nume, marime) { return { nume: nume, marime: marime } } function oferaNume (animal) { return animal.nume; } function oferaMarime (animal) { return animal.marime; } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  100. 100. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  101. 101. O “clasă” referitoare la animale: function creeazaAnimal (nume, marime) { return { nume: nume, // date-membre marime: marime, oferaNume: function () { // metodă de furnizare a numelui return animal.nume; }, oferaMarime: function () { // o altă metodă return animal.marime; } } } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  102. 102. Dorim să apelăm metodele definite: var tux = creeazaAnimal ("Tux", 17); tux.oferaMarime ()  ReferenceError: animal is not defined Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  103. 103. Obiectul curent (“this”) este setat ca fiind obiectul global de exemplu, în browser, reprezintă fereastra curentă în care este redat documentul: this  window Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  104. 104. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  105. 105. clase – utilizarea constructorilor 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; }; } var tux = new Animal ("Tux", 17); // instanțierea unui obiect Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase
  106. 106. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții & obiecte
  107. 107. 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; } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții & obiecte
  108. 108. 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) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: proprietăți
  109. 109. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: proprietăți
  110. 110. [[Get]] [[Put]] [[CanPut]] [[HasProperty]] [[DefineOwnProperty]] [[GetProperty]] [[GetOwnProperty]] [[Delete]] [[Extensible]] [[Construct]] [[Call]] [[Code]] [[Scope]] definește ierarhiilor de obiecte pentru accesarea valorilor manipularea proprietăților indică obiectele ce pot fi extinse asociate obiectelor executabile (funcții) desemnează codul & contextul unei obiect de tip funcție Dr. Sabin Buragawww.purl.org/net/busaco [[Prototype]] proprietăți interne importante (manipulate de procesorul ECMAScript, dar inaccesibile la nivel de program)
  111. 111. // 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 } ) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: proprietăți
  112. 112. Dr. Sabin Buragawww.purl.org/net/busaco proprietățile interne ale obiectelor definite http://www.objectplayground.com/
  113. 113. Deoarece orice obiect deține în mod implicit proprietatea prototype, structura unei clase poate fi extinsă ulterior Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri
  114. 114. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri
  115. 115. Dacă se încearcă accesarea unui element inexistent în cadrul unui obiect dat, se va verifica lanțul de prototipuri (prototype chain) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri
  116. 116. // pe baza protipurilor, definim noi metode Animal.prototype.oferaNume = function () { return this.nume; }; Animal.prototype.oferaMarime = function () { return this.marime; }; // instanțiem un obiect de tip Animal var tux = new Animal ("Tux", 17); Dr. Sabin Buragawww.purl.org/net/busaco function Animal (nume, marime) { // definiție inițială this.nume = nume; this.marime = marime; }
  117. 117. Dr. Sabin Buragawww.purl.org/net/busaco
  118. 118. Pentru a cunoaște tipul unui obiect (pe baza constructorului și a ierarhiei de prototipuri) se folosește operatorul instanceof Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri
  119. 119. var marimi = [17, 20, 7, 14]; marimi instanceof Array  marimi instanceof Object  marimi instanceof String  true true false var tux = new Animal ("Tux", 17); tux instanceof Object tux instanceof Array   true false Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri
  120. 120. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor Adăugarea unei metode se realizează via prototype Animal.prototype.oferaNumeMare = function () { return this.nume.toUpperCase (); }; tux.oferaNumeMare ()  "TUX"
  121. 121. 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" Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor
  122. 122. Cel mai general prototype este cel al lui Object Una dintre metodele disponibile este toString() care poate fi suprascrisă (over-ride) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor
  123. 123. 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. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor
  124. 124. Dr. Sabin Buragawww.purl.org/net/busaco
  125. 125. Atenție la pericole! de exemplu, comportamentul diferit al construcției for (var proprietate in obiect) Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor
  126. 126. Șablon general: ClasaDeBaza = function () { /* … */ }; SubClasa = function () { /* … */ }; SubClasa.prototype = new ClasaDeBaza (); Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: extinderea claselor
  127. 127. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții de nivel înalt
  128. 128. Dorim să calculăm greutatea unui animal, după 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; } Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții de nivel înalt
  129. 129. 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 Dr. Sabin Buragawww.purl.org/net/busaco Varianta îmbunătățită – mai generală:
  130. 130. function genereazaTablouGreutati (tablou, calcul) { var rezultat = [ ]; for (var contor = 0; contor < tablou.length; contor++) { rezultat[contor] = calcul (tablou[contor]); } fiind funcție, se poate apela return rezultat; } function calculGreutate (marime) { return marime * 33; } var greutati = genereazaTablouGreutati (marimi, calculGreutate); Dr. Sabin Buragawww.purl.org/net/busaco Varianta îmbunătățită – calcul e variabilă mai generală: de tip funcție
  131. 131. Dr. Sabin Buragawww.purl.org/net/busaco a se consulta și exemplele din arhiva asociată acestui curs
  132. 132. 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 Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: încapsulare
  133. 133. Nu trebuie afectat spațiul de nume global, păstrându-se codul-sursă la nivel privat Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: încapsulare
  134. 134. Codul poate fi complet încapsulat via funcții anonime care “păstrează” construcțiile la nivel privat Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: încapsulare
  135. 135. Declararea imbricată – ca expresii de tip funcție – a funcțiilor anonime are denumirea closures închideri https://developer.mozilla.org/en/JavaScript/Guide/Closures Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: closures
  136. 136. // specificarea unei expresii de tip funcție ( function () { // variabilele & funcțiile vor fi vizibile doar aici // variabilele globale pot fi accesate } ( ) ); Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: closures
  137. 137. function faCeva (x, y) { // ... } return { // sunt publice doar // funcțiile 'start' și 'faCeva' 'start': start, 'faCeva': faCeva } }) (); cod.start (x); // apelăm 'start' Dr. Sabin Buragawww.purl.org/net/busaco var cod = (function () { var n = 0; // variabilă privată function start (x) { // ... poate accesa 'n' // și funcția 'faCeva' } function faAia (param) { // ... invizibilă din afară }
  138. 138. function faCeva (x, y) { // ... } return { // sunt publice doar // funcțiile 'start' și 'faCeva' 'start': start, 'faCeva': faCeva } }) (); cod.start (x); // apelăm 'start' via closures, simulăm metodele private modularizarea codului (module pattern) Dr. Sabin Buragawww.purl.org/net/busaco var cod = (function () { var n = 0; // variabilă privată function start (x) { // ... poate accesa 'n' // și funcția 'faCeva' } function faAia (param) { // ... invizibilă din afară }
  139. 139. console.log (contor1.value ()); /* 1 */ console.log (contor2.value ()); /* 0 */ Dr. Sabin Buragawww.purl.org/net/busaco 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); }, console.log (contor1.value ()); /* 0 */ value: function() { contor1.increment (); return contorPrivat; contor1.increment (); } console.log (contor1.value ()); /* 2 */ }; contor1.decrement (); };
  140. 140. Dr. Sabin Buragawww.purl.org/net/busaco
  141. 141. Totul în JavaScript este obiect – chiar și funcțiile Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  142. 142. Orice obiect este întotdeauna mutabil (poate fi alterat oricând) proprietățile și metodele sunt disponibile oriunde în program (public scope) Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  143. 143. Nu există vizibilitate la nivel de bloc de cod (block scope), ci doar la nivel global ori la nivel de funcție Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  144. 144. Funcțiile ascund orice e definit în interiorul lor Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  145. 145. Operatorul “.” este echivalent cu de-referențierea: ob.prop === ob["prop"] Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  146. 146. Operatorul new creează obiecte aparținând „clasei” specificate de funcția constructor Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  147. 147. Accesorul this este relativ la contextul execuției, nu al declarării Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  148. 148. Accesorul this este relativ la contextul execuției, nu al declarării Atenție la dependența de mediul de execuție! Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  149. 149. Proprietatea prototype are valori modificabile Dr. Sabin Buragawww.purl.org/net/busaco de reținut!
  150. 150. JavaScript Object Notation http://json.org/ Dr. Sabin Buragawww.purl.org/net/busaco json
  151. 151. JavaScript Object Notation format compact pentru interschimb de date între aplicații biblioteci de procesare & alte resurse de interes: http://jsonauts.github.io/ Dr. Sabin Buragawww.purl.org/net/busaco json
  152. 152. JavaScript Object Notation datele pot fi specificate în termeni de obiecte și literali Dr. Sabin Buragawww.purl.org/net/busaco json
  153. 153. JavaScript Object Notation { datele pot fi evaluate 'nume': 'Tux', direct în JavaScript 'stoc': 33, 'model': [ 'candid', 'furios', 'vesel' ] } Dr. Sabin Buragawww.purl.org/net/busaco json
  154. 154. Dr. Sabin Buragawww.purl.org/net/busaco răspuns JSON obținut în urma unei interogări YQL (Yahoo! Query Language) http://developer.yahoo.com/yql/
  155. 155. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: JavaScript în cadrul browser-ului

×