Embed Size (px)
DESCRIPTION
Most important aspects regarding the JavaScript programming language (a presentation available in Romanian language).
Citation preview
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
o prezentare generala a limbajului JavaScript
Tehnologii Web
Programare Web – supliment
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Un arcas bun atinge tinta chiar inainte de a trage.”
Ch’Ao Pu-Che
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Inventat de Brendan Eich (1995)
denumit initial LiveScript
istoric
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Implementat in premiera de browser-ul Netscape Navigator
istoric
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Adaptat de Microsoft: JScript (1996)
istoric
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standardizat in 1997 de ECMA European Computer Manufacturers Association
ECMAScript ECMA-262
www.ecma-international.org
istoric
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standardizat in 1997 de ECMA European Computer Manufacturers Association
ECMAScript
versiunea standardizata actuala: 5.1 (iunie 2011) versiunea in lucru: 6.0 (în curând)
www.ecma-international.org/publications/standards/Ecma-262.htm
istoric
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Limbaj de tip script (interpretat)
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Limbaj de tip script (interpretat)
destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite
de un anumit sistem
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Limbaj de tip script (interpretat)
nu necesita intrari/iesiri in mod implicit
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum putem executa programele JavaScript?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
navigator Web
permite rularea de aplicatii Web la nivelul unei platforme (un sistem de operare)
desktop (e.g., Windows 8)
mobil (Android, iOS, WP7, WP8) …
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
navigator Web
“injectarea” de cod JavaScript in documentele (X)HTML via elementul <script>
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
navigator Web
“injectarea” de cod JavaScript in documentele (X)HTML via elementul <script>
cod extern vs. cod inclus in pagina Web
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
platforma de dezvoltare a aplicatiilor
e.g., Flex/AIR
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
software de sine-statator
Adobe Creative Suite, UltraEdit etc.
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
procesor (engine) independent
exemplificare: Yahoo! Widget Engine
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
componente ale sistemului de operare
Dashboard – Mac OS X Sidebar – Windows Vista/7
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mediu de executie (host-environment)
server Web
exemplu tipic: node.js
caracteristici
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
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
ww
w.p
url
.org
/ne
t/b
usa
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
ww
w.p
url
.org
/ne
t/b
usa
co
Number
reprezentare in dubla precizie
stocare pe 64 biti
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
String
secvente de caractere Unicode
fiecare caracter ocupa 16 biti
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Boolean
secvente ce se pot evalua ca fiind true/false
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Object
Function Array Date
RegExp
si altele
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Null
semnifica “nici o valoare”
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Undefined
are semnificatia “nici o valoare asignata inca”
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Nu exista valori intregi
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Nu exista valori intregi
convertirea unui sir in numar: parseInt ()
parseInt ("123") 123 parseInt ("11", 2) 3
caracteristici: tipuri de date
indica baza de numeratie
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatii avansate cu numere se pot realiza via obiectul predefinit Math
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatii avansate cu numere se pot realiza via obiectul predefinit Math
constante predefinite:
Math.PI
Math.E
Math.LN10
etc.
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatii 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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Valoarea” NaN (“not a number”)
parseInt ("Salut") NaN isNaN (NaN + 3) true
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Valori speciale:
Infinity
–Infinity
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Un caracter reprezinta un sir de lungime 1
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Sirurile sunt obiecte
"Salut".length 5
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Metode pentru siruri:
s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..)
s.indexOf(s1, start)
s.match(regexp) s.replace(search, replace)
s.slice(start, end) s.split(separator, limit)
s.substring(start, end)
s.toLowerCase() s.toUpperCase()
etc.
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Valorile 0, "", NaN, null, undefined
sunt interpretate ca fiind false
!!234 true
caracteristici: tipuri de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Variabilele se declara cu var
var marime;
var numeAnimal = "Tux";
variabilele declarate fara valori asignate,
se considera undefined
caracteristici: variabile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Daca nu se foloseste var, atunci variabila este considerata globala
de evitat asa ceva!
caracteristici: variabile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Valorile sunt “legate” tardiv la variabile (late binding)
caracteristici: variabile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mai nou, exista posibilitatea marginirii domeniului de vizibilitate (scope) via let
var x = 5;
var y = 0;
console.log (let (x = x + 10, y = 12) x + y); // 27
console.log (x + y); // 5
caracteristici: variabile
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pentru numere: + – * / %
De asignare: += –= *= /= %=
Incrementare & decrementare: ++ – –
Concatenare de siruri: "Java" + "Script" "JavaScript"
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Conversia tipurilor se face “din zbor”
"3" + 4 + 5 345 3 + 4 + "5" 75
adaugând un sir vid la o expresie, o convertim pe aceasta la string
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comparatii: < > <= >= (numere & siruri)
egalitatea se testeaza cu == si !=
1 == true true
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comparatii: < > <= >= (numere & siruri)
egalitatea se testeaza cu == si !=
1 == true true
a se folosi: 1 === true false
caracteristici: operatori
inhiba conversia tipurilor de date
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aflarea tipului unei expresii: operatorul typeof typeof "Tux" string
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatorii logici && si ||
var nume = unNume || "Implicit";
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatorul de test ? :
var prezenta = (studenti > 33) ? "Prea multi" : "Cam putini…";
caracteristici: operatori
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Testare: if … else, switch pentru switch, sunt permise expresii la fiecare case
(testarea se realizeaza cu operatorul ===)
switch (2 + 3) { /* sunt permise expresii */
case 4 + 1 : egalitate ();
break;
default : absurd (); // nu se apeleaza niciodata
}
caracteristici: control
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ciclare: while, do … while, for
do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; contor++) {
// de 33 de ori…
}
caracteristici: control
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Exceptii: try … catch … finally
try { // Linii "periculoase" ce pot cauza exceptii } catch (eroare) { // Linii executate la aparitia unei/unor exceptii } finally { // Linii care se vor executa la final }
caracteristici: control
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Exceptii: try … catch … finally
try { // Linii "periculoase" ce pot cauza exceptii } catch (eroare) { // Linii executate la aparitia unei/unor exceptii } finally { // Linii care se vor executa la final }
emiterea unei exceptii: throw
throw new Error ("O eroare de-a noastra!...");
caracteristici: control
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Perechi nume—valoare
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Perechi nume—valoare
tabele de dispersie (hash) in C/C++ tablouri asociative in Perl, PHP sau Ruby
HashMaps in Java
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Perechi nume—valoare
numele este desemnat de un sir de caractere
valoarea poate fi de orice tip
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Obiect colectie de proprietati, avand mai multe atribute
proprietatile pot contine alte obiecte, valori primitive sau metode
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Global
Object
Function
Array
String
Boolean
Number
Math
Date
Regex
caracteristici: obiecte predefinite
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Create prin intermediul operatorului new:
var ob = new Object(); var ob = { }; // echivalent cu linia anterioara
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Create prin intermediul operatorului new:
var ob = new Object(); var ob = { }; // echivalent cu linia anterioara
caracteristici: obiecte
se prefera aceasta sintaxa
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Accesarea proprietatilor – operatorul .
ob.nume = "Tux";
var nume = ob.nume;
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Accesarea proprietatilor:
ob.nume = "Tux";
var nume = ob.nume;
echivalent cu:
ob["nume"] = "Tux";
var nume = ob["nume"];
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Declarare + asignare:
var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Accesare:
pinguin.proprietati.marime 17
pinguin["proprietati"]["culoare"] verde
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Iterarea proprietatilor – considerate chei:
var pinguin = { 'nume': 'Tux', 'marime': 17 };
for (var proprietate in pinguin) {
afiseaza (proprietate + ' = ' + pinguin[proprietate]);
}
caracteristici: obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tipuri speciale de obiecte
proprietatile (cheile) sunt numere,
nu siruri de caractere
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Se poate utiliza sintaxa de la obiecte:
var animale = new Array (); animale[0] = "pinguin"; animale[1] = "omida"; animale[2] = "pterodactil";
animale.length 3
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Se poate utiliza sintaxa de la obiecte:
var animale = new Array (); animale[0] = "pinguin"; animale[1] = "omida"; animale[2] = "pterodactil";
animale.length 3
notatie alternativa – preferata:
var animale = ["pinguin", "omida", "pterodactil"];
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tablourile pot avea “gauri” (sparse arrays): var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animale.length 34 typeof animale[13] undefined
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tablourile pot avea “gauri” (sparse arrays): var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animale.length 34 typeof animale[13] undefined
pentru a adauga elemente putem recurge la: animale[animale.length] = altAnimal;
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
var vector = [ ];
vector[0] = "zero";
vector[new Date().getTime()] = "now";
vector[3.14] = "pi";
for (var elem in vector) {
console.log ("vector[" + elem + "] = " + vector[elem] +
", typeof( " + elem +") == " + typeof (elem));
}
caracteristici: tablouri – exemplu
adaptare dupa John Kugelman (2009)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
rezultatul obtinut in urma rularii programului JavaScript via JS Bin
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interari:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interari:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
// varianta mai buna
for (var it = 0, lung = animale.length; it < lung; it++) {
// de prelucrat animale[it]
}
caracteristici: tablouri
de ce?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementele pot apartine unor tipuri de date eterogene
var animale = [33, "vierme", false, "gaga"];
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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.
caracteristici: tablouri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Definite via function
function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; }
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Daca nu este intors nimic in mod explicit, valoarea de retur se considera undefined
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Parametrii pot lipsi, fiind considerati undefined
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pot fi transmise mai multe argumente, cele in surplus fiind ignorate
transformaPixeliInPuncte (10, 7) 3000
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Argumentele primite de o functie se acceseaza via tabloul arguments:
function aduna () {
var suma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
suma += arguments[i];
}
return suma;
}
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Functiile sunt tot obiecte
astfel, pot fi specificate functii anonime
caracteristici: functii
expresii lambda
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Functiile sunt tot obiecte
astfel, pot fi specificate functii anonime
in acest sens, JavaScript este un limbaj functional
caracteristici: functii
expresii lambda
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
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;
};
caracteristici: functii
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
precizati ce efect vor avea liniile de cod urmatoare: console.log ( typeof (media) );
console.log ( media() );
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
variabila media este de tip function
apelul media() intoarce valoarea NaN
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co /* determina numarul 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, numaram caracterele fiecarui nod copil
// al arborelui DOM cu radacina ‘element’
for (var it = 0, copil; copil = element.childNodes[it]; it++) {
contor += numaraCaractereDinNoduriText (copil);
}
return contor;
}
vezi cele discutate la DOM
functii recursive in JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// varianta folosind functii anonime var nrCaractDoc = (function (element) {
if (element.nodeType == 3) { // nod text
return element.nodeValue.length;
}
var contor = 0;
for (var it = 0, copil; copil = element.childNodes[it]; it++) {
contor += arguments.callee (copil);
}
return contor;
}) (xml.root);
furnizeaza care-i functia apelanta
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Exemplificare: dorim sa procesam – via functii –
caracteristici ale unor animale
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function creeazaAnimal (nume, marime) { return { nume: nume, marime: marime } } function oferaNume (animal) { return animal.nume; } function oferaMarime (animal) { return animal.marime; }
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
O “clasa” referitoare la animale:
function creeazaAnimal (nume, marime) { return { nume: nume, // date-membre marime: marime, oferaNume: function () { // metoda return animal.nume; }, oferaMarime: function () { // metoda return animal.marime; } }
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Apelarea metodelor definite:
var tux = creeazaAnimal ("Tux", 17);
tux.oferaMarime() 17
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Apelind insa o functie fara notatia cu “.”, nu obtinem rezultatul scontat:
var marimea = tux.oferaMarimea;
oferaMarimea () undefined
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Apelind insa o functie fara notatia cu “.”, nu obtinem rezultatul scontat:
var marimea = tux.oferaMarimea;
oferaMarimea () undefined
obiectul curent (“this”) este setat ca fiind obiectul global
(in browser, reprezinta fereastra curenta in care este redat documentul: this window)
caracteristici: de la functii la clase
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
caracteristici: de la functii la clase
creational pattern
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
caracteristici: de la functii la clase
clase – utilizarea constructorilor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
caracteristici: de la functii la clase
clase – utilizarea constructorilor
var tux = new Animal ("Tux", 17); // instantierea unui obiect
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatorul new creaza un nou obiect vid si apeleaza functia specificata cu this setat pe acest obiect
aceste functii se numesc constructori, trebuie apelate via new
si, prin conventie, au numele scris cu litera mare
caracteristici: functii & obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Metodele pot fi declarate si in exteriorul constructorului
function oferaNumeAnimal () {
return this.nume;
} function Animal (nume, marime) {
this.nume = nume;
this.marime = marime;
this.oferaNume = oferaNumeAnimal;
}
caracteristici: functii & obiecte
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
un prototip e o proprietate oferind o legatura ascunsa
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
daca se incearca accesarea unui element inexistent in cadrul unui obiect dat,
se va verifica lantul de prototipuri (prototype chain)
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
caracteristici: prototipuri
ObjA
this.initA ( ) ObjB
this.initB ( ) ObjC
this.initC ( )
var test = new objC ( )
test.initA ( );
ObjB.prototype = new ObjA ( );
ObjC.prototype = new ObjB ( );
dupa Subramanyan Murali, “JavaScript Design Patterns”, 2008
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function Animal (nume, marime) { // definitie initiala
this.nume = nume;
this.marime = marime;
}
Animal.prototype.oferaNume = function() {
return this.nume;
};
Animal.prototype.oferaMarime = function() {
return this.marime;
};
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pentru a cunoaste tipul unui obiect (pe baza constructorului si a ierarhiei de prototipuri)
se foloseste operatorul instanceof
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
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
caracteristici: prototipuri
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Adaugarea unei metode se realizeaza via prototype
Animal.prototype.oferaNumeMare = function () {
return this.nume.toUpperCase ();
};
tux.oferaNumeMare () "TUX"
caracteristici: extinderea claselor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pot fi extinse si obiectele predefinite:
// adaugam o metoda obiectului String String.prototype.inverseaza = function () {
var inv = '';
for (var iter = this.length - 1; iter >= 0; iter--) { // inversam sirul…
inv += this[iter];
}
return inv;
};
"Web".inverseaza () "beW"
caracteristici: extinderea claselor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cel mai general prototype este cel al lui Object
Una dintre metodele disponibile este toString() care poate fi supra-scrisa (over-ride)
caracteristici: extinderea claselor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
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>"
caracteristici: extinderea claselor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Atentie la pericole!
de exemplu, comportamentul diferit al constructiei for (var proprietate in obiect)
caracteristici: extinderea claselor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece o functie reprezinta un obiect, poate fi:
stocata intr-o variabila
pasata unei alte functii
intoarsa de o functie – fiind argument pentru return
caracteristici: functii de nivel inalt
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dorim sa calculam greutatea unui animal, dupa formula greutate = marime * 33
varianta clasica:
var marimi = [17, 20, 7, 14];
var greutati = [ ];
for (var contor = 0; contor < marimi.length; contor++) {
greutati[contor] = marimi[contor] * 33;
}
caracteristici: functii de nivel inalt
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Varianta imbunatatita – mai generala:
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 functia ce va realiza calculul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Varianta imbunatatita – mai generala:
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 variabila de tip functie
fiind functie, se poate apela
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript ofera un singur spatiu de nume, la nivel global
conflicte privind denumirea functiilor/variabilelor specificate de programe diferite,
concepute de mai multi dezvoltatori
caracteristici: incapsulare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Nu trebuie afectat spatiul de nume global, pastrându-se codul-sursa la nivel privat
caracteristici: incapsulare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Codul poate fi complet încapsulat via functii anonime
care “pastreaza” constructiile la nivel privat
caracteristici: incapsulare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Declararea imbricata – ca expresii de tip functie – a functiilor anonime are denumirea closures
https://developer.mozilla.org/en/JavaScript/Guide/Closures
caracteristici: closures
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// specificarea unei expresii de tip functie
( function () {
// variabilele & functiile vor fi vizibile doar aici
// variabilele globale pot fi accesate
} ( ) );
caracteristici: closures
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
var cod = (function () {
var n = 0; // variabila privata function start (x) { // ... poate accesa 'n' // si functia 'faCeva' } function faAia (param) { // ... invizibila din afara }
function faCeva (x, y) { // ... } return { // sunt publice doar // functiile 'start' si 'faCeva' 'start': start, 'faCeva': faCeva } }) (); cod.start (x); // apelam 'start'
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
var cod = (function () {
var n = 0; // variabila privata function start (x) { // ... poate accesa 'n' // si functia 'faCeva' } function faAia (param) { // ... invizibila din afara }
function faCeva (x, y) { // ... } return { // sunt publice doar // functiile 'start' si 'faCeva' 'start': start, 'faCeva': faCeva } }) (); cod.start (x); // apelam 'start'
via closures, simulam metodele private modularizarea codului (module pattern)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
var makeCounter = function () { var contorPrivat = 0; // un contor de valori (initial, zero) function changeBy (val) { // functie privata contorPrivat += val; // ce modifica valoarea contorului } return { // functii publice (expuse) increment: function() { changeBy (1); }, decrement: function() { changeBy (-1); }, value: function() { return contorPrivat; } }; };
console.log (contor1.value ()); /* 0 */
contor1.increment ();
contor1.increment ();
console.log (contor1.value ()); /* 2 */
contor1.decrement ();
console.log (contor1.value ()); /* 1 */
console.log (contor2.value ()); /* 0 */
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Totul in JavaScript este obiect – chiar si functiile
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Orice obiect este intotdeauna mutabil (poate fi alterat oricând)
toate proprietatile si metodele sunt disponibile oriunde (public scope)
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Nu exista vizibilitate la nivel de bloc de cod (block scope),
ci doar la nivel global ori la nivel de functie
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Functiile ascund orice e definit in interiorul lor
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatorul “.” este echivalent cu de-referentierea:
ob.prop === ob["prop"]
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Operatorul new creeaza obiecte apartinând clasei specificate de functia constructor
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Accesorul this este relativ la contextul executiei, nu al declararii
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Accesorul this este relativ la contextul executiei, nu al declararii
de retinut!
Atentie la dependenta de mediul de executie!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proprietatea prototype are valori modificabile
de retinut!
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript Object Notation
http://json.org/
json
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript Object Notation
format compact pentru interschimb de date intre aplicatii
json
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript Object Notation
datele pot fi specificate in termeni de obiecte & literali
json
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript Object Notation
{
'nume': 'Tux',
'stoc': 33,
'model': [ 'candid', 'furios', 'vesel' ]
}
json
datele pot fi evaluate direct in JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu concret: raspuns JSON obtinut in urma unei interogari YQL
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Editare de cod & dezvoltare de aplicatii Web Testare
Documentare a codului Compresie Optimizare
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Pentru desktop: Aptana Studio, JS Development Tools (plug-in Eclipse),
Sublime Text, Visual Studio (Express Edition),…
Disponibile pe Web: Cloud9 IDE, JS Bin, JS Fiddle etc.
unele ofera si partajarea codului-sursa cu alti dezvoltatori
instrumente: editare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Verificare statica
instrumente de referinta: JSLint JSHint
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Suport pentru unit testing
exemplificari: Jasmine
JSTest.NET QUnit
Sinon.js Tyrtle
instrumente: testare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standarde de redactare a codului JavaScript
exemple: Crock’s Code Conventions for JavaScript
Google JavaScript Style Guide Idiomatic.js
ghiduri specifice – e.g., jQuery Core Style Guide
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Software pentru documentarea programelor
JSDoc Toolkit jGrouseDoc
YUIDoc
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Instrumente privind compresia/minimizarea
Online Javascript Compression Tool YUI Compressor
Scriptalizer
detalii in articolul A. Powell, Understanding Compression and Minification (mai 2012):
www.aaron-powell.com/javascript/understanding-compression-and-minification
instrumente: compresie de cod
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Transformarea codului JS intr-unul optimizat
exemplu de referinta: Closure Compiler
https://developers.google.com/closure/
instrumente: optimizare javascript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Facilitarea dezvoltarii de aplicatii Web la nivel de client similare celor desktop
exemplificari notabile:
Cappuccino – http://cappuccino.org/ SproutCore – http://www.sproutcore.com/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alte limbaje pentru dezvoltarea de aplicatii Web
CoffeeScript (Jeremy Ashkenas, 2009) http://coffeescript.org/
TypeScript (Microsoft, 2012) http://www.typescriptlang.org/
limbaje de programare care se compileaza in JavaScript
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Portarea altor aplicatii in JavaScript
Emscripten – compilator LLVM generand cod JS (e.g., programe C/C++, Lua, Python, Ruby
ce se pot compila in JavaScript)
http://emscripten.org/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Portarea altor aplicatii in JavaScript
JSIL – compilator care transforma aplicatiile .NET in programe JavaScript ruland independent de browser
http://jsil.org/
instrumente
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
?
