Limbajul JavaScript: o prezentare generală

Tehnologii Web

Dr. Sabin Buragawww.purl.org/net/busaco
Programare Web – supliment
o prezentare generala a limbajului JavaScript

“Un arcas bun atinge tinta
chiar inainte de a trage.”

Ch’Ao Pu-Che

istoric

Inventat de Brendan Eich (1995)

denumit initial LiveScript

istoric

Implementat in premiera de browser-ul
Netscape Navigator

istoric

Adaptat de Microsoft: JScript (1996)

istoric

Standardizat in 1997 de ECMA
European Computer Manufacturers Association

ECMAScript
ECMA-262

www.ecma-international.org

istoric

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

caracteristici

Limbaj de tip script (interpretat)

caracteristici


destinat sa manipuleze, sa automatizeze
si sa integreze facilitatile oferite
de un anumit sistem

caracteristici


nu necesita intrari/iesiri in mod implicit

Cum putem executa programele JavaScript?

caracteristici

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


navigator Web

“injectarea” de cod JavaScript
in documentele (X)HTML via elementul <script>

caracteristici


navigator Web

“injectarea” de cod JavaScript
in documentele (X)HTML via elementul <script>

cod extern vs. cod inclus in pagina Web

caracteristici


platforma de dezvoltare a aplicatiilor

e.g., Flex/AIR

caracteristici


software de sine-statator

Adobe Creative Suite, UltraEdit etc.

caracteristici


procesor (engine) independent

exemplificare:
Yahoo! Widget Engine

caracteristici


componente ale sistemului de operare

Dashboard – Mac OS X
Sidebar – Windows Vista/7

caracteristici


server Web

exemplu tipic: node.js

caracteristici: sintaxa

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

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: tipuri de date

Number

reprezentare in dubla precizie

stocare pe 64 biti


String

secvente de caractere Unicode

fiecare caracter ocupa 16 biti


Boolean

secvente ce se pot evalua ca fiind true/false


Object

Function
Array
Date
RegExp

si altele


Null

semnifica “nici o valoare”


Undefined

are semnificatia “nici o valoare asignata inca”


Nu exista valori intregi


Nu exista valori intregi

convertirea unui sir in numar: parseInt ()

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

indica baza
de numeratie


Operatii avansate cu numere se pot realiza
via obiectul predefinit Math



constante predefinite:
Math.PI
Math.E
Math.LN10
etc.



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.


“Valoarea” NaN (“not a number”)

parseInt ("Salut")  NaN
isNaN (NaN + 3)  true


Valori speciale:

Infinity
–Infinity


Un caracter reprezinta un sir de lungime 1


Sirurile sunt obiecte

"Salut".length  5


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.


Valorile 0, "", NaN, null, undefined
sunt interpretate ca fiind false

!!234  true

caracteristici: variabile

Variabilele se declara cu var

var marime;
var numeAnimal = "Tux";

variabilele declarate fara valori asignate,
se considera undefined


Daca nu se foloseste var,
atunci variabila este considerata globala

de evitat asa ceva!


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


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: operatori

Pentru numere: + – * / %

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

Incrementare & decrementare: ++ – –

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


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


Comparatii: < > <= >= (numere & siruri)

egalitatea se testeaza cu == si !=

1 == true  true


Comparatii: < > <= >= (numere & siruri)

egalitatea se testeaza cu == si !=

1 == true  true
a se folosi: 1 === true  false

inhiba conversia
tipurilor de date


Aflarea tipului unei expresii: operatorul typeof
typeof "Tux"  string


Operatorii logici && si ||

var nume = unNume || "Implicit";


Operatorul de test ? :

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

caracteristici: control

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
}


Ciclare: while, do … while, for

do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; contor++) {
// de 33 de ori…
}


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
}


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: obiecte

Perechi nume—valoare



tabele de dispersie (hash) in C/C++
tablouri asociative in Perl, PHP sau Ruby
HashMaps in Java



numele este desemnat de un sir de caractere

valoarea poate fi de orice tip


Obiect  colectie de proprietati,
avand mai multe atribute

proprietatile pot contine alte obiecte,
valori primitive sau metode

caracteristici: obiecte predefinite

Global
Object
Function
Array
String
Boolean
Number
Math
Date
Regex


Create prin intermediul operatorului new:

var ob = new Object();

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


Create prin intermediul operatorului new:

var ob = new Object();

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

se prefera aceasta sintaxa


Accesarea proprietatilor – operatorul .

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


Accesarea proprietatilor:

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

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


Declarare + asignare:

var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}


Accesare:

pinguin.proprietati.marime  17

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


Iterarea proprietatilor – considerate chei:

var pinguin = { 'nume': 'Tux', 'marime': 17 };
for (var proprietate in pinguin) {
afiseaza (proprietate + ' = ' + pinguin[proprietate]);
}

caracteristici: tablouri

Tipuri speciale de obiecte

proprietatile (cheile) sunt numere,
nu siruri de caractere


Se poate utiliza sintaxa de la obiecte:

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

animale.length  3


Se poate utiliza sintaxa de la obiecte:

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


notatie alternativa – preferata:
var animale = ["pinguin", "omida", "pterodactil"];


Tablourile pot avea “gauri” (sparse arrays):

animale[33] = "om";
typeof animale[13]  undefined


Tablourile pot avea “gauri” (sparse arrays):

animale[33] = "om";
typeof animale[13]  undefined

pentru a adauga elemente putem recurge la:
animale[animale.length] = altAnimal;

caracteristici: tablouri – exemplu

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 dupa John Kugelman (2009)

rezultatul obtinut in urma rularii programului JavaScript
via JS Bin


Interari:

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


Interari:

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


Elementele pot apartine
unor tipuri de date eterogene

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


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: functii

Definite via function

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


Daca nu este intors nimic in mod explicit,
valoarea de retur se considera undefined


Parametrii pot lipsi, fiind considerati undefined


Pot fi transmise mai multe argumente,
cele in surplus fiind ignorate

transformaPixeliInPuncte (10, 7)  3000


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;
}


Functiile sunt tot obiecte

astfel, pot fi specificate functii anonime

expresii
lambda


Functiile sunt tot obiecte

astfel, pot fi specificate functii anonime

expresii
lambda

in acest sens, JavaScript este un limbaj functional


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;
};

precizati ce efect vor avea liniile de cod urmatoare:
console.log ( typeof (media) );
console.log ( media() );

variabila media este de tip function
apelul media() intoarce valoarea NaN

functii recursive in JavaScript

/* 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);
}
vezi cele
return contor; discutate la DOM
}

// 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; furnizeaza care-i
functia apelanta
}) (xml.root);

caracteristici: de la functii la clase

Exemplificare:
dorim sa procesam – via functii –
caracteristici ale unor animale


function creeazaAnimal (nume, marime) {
return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return animal.nume;
}
function oferaMarime (animal) {
return animal.marime;
}


return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return animal.nume;
}
function oferaMarime (animal) {
}
var tux = creeazaAnimal ("Tux", 17);
oferaMarime (tux)  17


O “clasa” referitoare la animale:
return {
nume: nume, // date-membre
marime: marime,
oferaNume: function () { // metoda
return animal.nume;
},
oferaMarime: function () { // metoda
}
}


Apelarea metodelor definite:

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

tux.oferaMarime()  17


Apelind insa o functie fara notatia cu “.”,
nu obtinem rezultatul scontat:

var marimea = tux.oferaMarimea;

oferaMarimea ()  undefined


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)


clase – utilizarea
constructorilor
return this.nume;
};
return this.marime;
};
}


clase – utilizarea
constructorilor
return this.nume;
};
return this.marime;
};
}
var tux = new Animal ("Tux", 17); // instantierea unui obiect

caracteristici: functii & obiecte

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

Metodele pot fi declarate si in exteriorul constructorului

function oferaNumeAnimal () {
return this.nume;
}
this.nume = nume;
this.oferaNume = oferaNumeAnimal;
}

caracteristici: prototipuri

Structura unei clase poate fi extinsa ulterior,
folosind proprietatea prototype



un prototip e o proprietate oferind o legatura ascunsa



daca se incearca accesarea unui element inexistent
in cadrul unui obiect dat,
se va verifica lantul de prototipuri (prototype chain)


ObjB.prototype = new ObjA ( );
ObjA

this.initA ( ) ObjC.prototype = new ObjB ( );
ObjB

this.initB ( ) ObjC
var test = new objC ( )
this.initC ( ) test.initA ( );

dupa Subramanyan Murali, “JavaScript Design Patterns”, 2008


Pentru a cunoaste tipul unui obiect
(pe baza constructorului si a ierarhiei de prototipuri)
se foloseste operatorul instanceof


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: extinderea claselor

Adaugarea unei metode se realizeaza via prototype

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

tux.oferaNumeMare ()  "TUX"


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"


Cel mai general prototype este cel al lui Object

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


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

tux.toString ()  [object Object]

Animal.prototype.toString = function () {
return '<animal>' + this.oferaNume () + '</animal>';
};
tux.toString ()  "<animal>Tux</animal>"


Atentie la pericole!

de exemplu, comportamentul diferit al constructiei
for (var proprietate in obiect)

caracteristici: functii de nivel inalt

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

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;
}

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

calcul e variabila
Varianta imbunatatita – mai generala:
de tip functie

function genereazaTablouGreutati (tablou, calcul) {

var rezultat = [ ];
for (var contor = 0; contor < tablou.length; contor++) {
rezultat[contor] = calcul (tablou[contor]);
} fiind functie,
return rezultat; se poate apela
}
function calculGreutate (marime) {
return marime * 33;
}
var greutati = genereazaTablouGreutati (marimi, calculGreutate);

caracteristici: incapsulare

JavaScript ofera un singur spatiu de nume,
la nivel global

conflicte privind denumirea functiilor/variabilelor
specificate de programe diferite,
concepute de mai multi dezvoltatori


Nu trebuie afectat spatiul de nume global,
pastrându-se codul-sursa la nivel privat


Codul poate fi complet încapsulat
via functii anonime
care “pastreaza” constructiile la nivel privat

caracteristici: closures

Declararea imbricata – ca expresii de tip functie –
a functiilor anonime are denumirea closures

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

caracteristici: closures

// specificarea unei expresii de tip functie
( function () {
// variabilele & functiile vor fi vizibile doar aici
// variabilele globale pot fi accesate
} ( ) );

de retinut!

Totul in JavaScript este obiect – chiar si functiile

de retinut!

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

toate proprietatile si metodele
sunt disponibile oriunde (public scope)

de retinut!

Nu exista vizibilitate la nivel de bloc de cod
(block scope),
ci doar la nivel global ori la nivel de functie

de retinut!

Functiile ascund orice e definit in interiorul lor

de retinut!

Operatorul “.” este echivalent
cu de-referentierea:

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

de retinut!

Operatorul new creeaza obiecte apartinând
clasei specificate de functia constructor

de retinut!

Accesorul this este relativ la contextul executiei,
nu al declararii

de retinut!

Accesorul this este relativ la contextul executiei,
nu al declararii

Atentie la dependenta
de mediul de executie!

de retinut!

Proprietatea prototype are valori modificabile

json

JavaScript Object Notation

http://json.org/

json


format compact pentru interschimb de date
intre aplicatii

json


datele pot fi specificate
in termeni de obiecte & literali

json


{
'nume': 'Tux', datele pot fi evaluate
direct in JavaScript
'stoc': 33,
'model': [ 'candid', 'furios', 'vesel' ]
}

exemplu concret: raspuns JSON obtinut in urma unei interogari YQL

instrumente

Editare de cod & dezvoltare de aplicatii Web
Testare
Documentare a codului
Compresie
Optimizare

instrumente: editare

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

Disponibile pe Web:
Cloud9 IDE, JS Bin, JS Fiddle etc.

unele ofera si partajarea codului-sursa cu alti dezvoltatori

instrumente: testare

Verificare statica

instrumente de referinta:
JSLint
JSHint

instrumente: testare

Suport pentru unit testing

exemplificari:
Jasmine
JSTest.NET
QUnit
Sinon.js
Tyrtle

instrumente: documentarea codului

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

Software pentru documentarea programelor

JSDoc Toolkit
jGrouseDoc
YUIDoc

instrumente: compresie de cod

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: optimizare javascript

Transformarea codului JS intr-unul optimizat

exemplu de referinta:
Closure Compiler

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

instrumente

Facilitarea dezvoltarii de aplicatii Web
la nivel de client similare celor desktop

exemplificari notabile:
Cappuccino – http://cappuccino.org/
SproutCore – http://www.sproutcore.com/

instrumente

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

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

Portarea altor aplicatii in JavaScript

JSIL – compilator care transforma aplicatiile .NET
in programe JavaScript ruland independent de browser

http://jsil.org/

?


Limbajul JavaScript: o prezentare generală

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Limbajul JavaScript: o prezentare generală

Ähnlich wie Limbajul JavaScript: o prezentare generală (20)

Mehr von Sabin Buraga

Mehr von Sabin Buraga (20)

Limbajul JavaScript: o prezentare generală