JavaScript

Dr. Sabin Buraga

www.purl.org/net/busaco
@busaco
“Cu cat cunosti mai bine,
cu atat iubesti mai mult.”

Leonardo da Vinci
inventat de Brendan Eich (1995)
denumit initial LiveScript
implementat in Netscape Navigator
adaptat de Microsoft: JScript (1996)
 standardizat in 1997 de ECMA
European Computer Manufacturers Association
www.ecma-international.org
limbaj de tip script (interpretat)
 limbaj de tip script (interpretat)

destinat sa manipuleze, sa automatizeze

si sa integreze facilitatile oferite
de un anumit sistem
 limbaj de tip script (interpretat)

nu necesita intrari/iesiri in mod implicit

Cum putem executa programele
JavaScript?
 mediu de executie
(host-environment):

navigator Web

“injectarea” de cod JavaScript

in documentele (X)HTML via <script>
 mediu de executie
(host-environment):

platforma de dezvoltare
a aplicatiilor

e.g., Adobe Flex/AIR

 mediu de executie
(host-environment):

aplicatie de sine-statatoare

Adobe Creative Suite, UltraEdit etc.

 mediu de executie
(host-environment):

procesor (engine) independent

e.g., Yahoo! Widget Engine

 mediu de executie
(host-environment):

componente
ale sistemului de operare

Dashboard – Mac OS X
Sidebar – Windows Vista/7
 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
 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
 tipuri de date:

Number
dubla precizie, stocare pe 64 biti
String
secvente de caractere Unicode, 16 biti
Boolean
secvente ce se pot evalua ca true/false
Object
Function, Array, Date, RegExp
Null
semnifica “nici o valoare”
Undefined
“nici o valoare asignata inca”
“valoarea” NaN – “not a number”

parseInt ("Salut")NaN

isNaN (NaN + 33)true

valori speciale:

Infinity
–Infinity
un caracter reprezinta
un sir de lungime 1

sirurile sunt obiecte

"Salut".length5
valorile 0, "", NaN, null, undefined
sunt interpretate ca fiind false
variabile sunt declarate 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!

conversia tipurilor se face “din zbor”

"3" + 4 + 5345
3 + 4 + "5"75
pentru a afla tipul unei expresii,
se foloseste typeof

typeof "Tux"string
 instructiuni de control

testare: if ... else, switch

 instructiuni de control

ciclare: while, do ... while, for

 instructiuni de control

exceptii: try ... catch ... finally

emiterea unei exceptii: throw

 obiecte

perechi nume—valoare

tabele de dispersie (hash) in C/C++

tablouri asociative in Perl, PHP, Ruby
HashMaps in Java
 obiecte

perechi nume—valoare

numele este desemnat

de un sir de caractere

valoarea poate fi de orice tip

 obiecte

colectii de proprietati,
avand mai multe atribute

proprietatile pot contine alte obiecte,

valori primitive sau metode
 obiecte

in JavaScript, se predefinesc obiectele

Global
Object
Function
Array
String
Boolean
Number
Math
Date
 obiecte

create prin intermediul lui new

var obiect = new Object();

var obiect = {};

// echivalent cu linia anterioara
 obiecte

accesarea proprietatilor

obiect.nume = "Tux";
var nume = obiect.nume;
 obiecte

accesarea proprietatilor

obiect.nume = "Tux";
var nume = obiect.nume;

echivalent:

obiect["nume"] = "Tux";
var nume = obiect["nume"];
 obiecte

declarare + asociere de valori

var pingu = {
nume: "Tux",
proprietati: {
culoare: "oranj",
marime: 17
}
}
 tablouri

sunt tipuri speciale de obiecte

proprietatile sunt numere,

nu siruri de caractere
 tablouri

var zoo = new Array ();

zoo[0] = "pinguin";
zoo[1] = "omida";
zoo[2] = "urs";

zoo.length3
 tablouri

var zoo = new Array ();

zoo[0] = "pinguin";
zoo[1] = "omida";
zoo[2] = "urs";

zoo.length3

notatie alternativa:

var zoo = ["pinguin", "omida", "urs"];

 tablouri

iterari:

for (var iter = 0;

iter < zoo.length; iter++) {
// de prelucrat zoo[iter]
}

for (var iter = 0, lung = zoo.length;

iter < lung; iter++) {
// varianta mai buna
// de prelucrat zoo[iter] de ce?
}
 tablouri

elementele pot apartine

unor tipuri de date eterogene

var zoo = [16, "musca", true, "gaga"];

 functii

obiecte definite prin function

function transformaPixeliInPuncte (px) {

var puncte = px * 300;
return puncte;
}
 functii

argumentele primite de o functie

se acceseaza via tabloul arguments
 functii

pot fi specificate functii anonime

expresii
lambda
 functii

pot fi specificate functii anonime

expresii
lambda

in acest sens, JavaScript este un limbaj functional

var media = function () { // calculul mediei
var suma = 0;
for (var iter = 0,
lung = arguments.length;
iter < lung; iter++) {
suma += arguments[iter];
}
return suma / arguments.length;
}
putem incapsula functiile in clase?
 de la functii la clase:
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;
};
}
 instantierea unui obiect:

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

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
structura unei clase poate fi extinsa ulterior,
folosind proprietatea prototype
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;
}
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
 extinderea claselor

adaugarea unei metode se realizeaza via prototype

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

tux.oferaNumeMare ()"TUX"
 in JavaScript, totul e considerat
ca fiind obiect – chiar si functiile
orice obiect e intotdeauna mutabil
(poate fi alterat oricind)
 operatorul . este echivalent
cu de-referentierea:

obiect.prop === obiect["prop"]

functiile ascund orice este definit
in interiorul lor
accesorul this este relativ
la contextul executiei,
nu al declararii
 rularea in browser

programele JavaScript au acces la diverse obiecte

oferite de navigatorul Web
 rularea in browser

de pilda, poate fi accesat obiectul global window

<script type="application/javascript">
var nav = window.navigator.userAgent;
// date privitoare la browser
</script>
 graceful degradation &
progresive enhancement

conceperea “stratificata” a aplicatiilor JavaScript

 graceful degradation &
progresive enhancement

initial: interactiune minimala, fara JavaScript

adaugarea progresiva a facilitatilor,

in functie de context
 graceful degradation &
progresive enhancement

inaintea folosirii oricarei tehnici dorite,

de testat suportul oferit de navigator:
JavaScript, cookie-uri, clase/metode DOM, Ajax,…
 JSON – JavaScript Object Notation

format compact pentru interschimb de date

intre aplicatii
 JSON – JavaScript Object Notation

folosit la serializarea datelor in contextul Web

uzual, transfer (a)sincron de date

intre servicii Web si aplicatii (clienti)
 JSON – JavaScript Object Notation

defineste datele in termeni de obiecte & literali

json.org
{
'nume' : 'Tux',
'stoc' : 33,
'gen' : ['candid', 'furios', 'vesel']
}
datele pot fi
evaluate direct
in JavaScript
 instrumente

medii de dezvoltare
Aptana Studio

depanare
Firebug (Lite)
Visual Studio Developer 2010
 instrumente

testare (inginerie software)

JSLint, JsUnit, jsTrace, Selenium
 instrumente

alte extensii/utilitare folositoare

GreaseMonkey, Ubiquity, Y! Slow
SpiderMonkey
Rhino
JavaScript Shell
 biblioteci

Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: openrico.org
Script.aculo.us: script.aculo.us
YUI: developer.yahoo.net/yui/
…si multe altele
 jQuery

scop principal:
manipularea documentului HTML
pe baza selectorilor CSS – nivelul 3

ofera un API concis, usor de folosit,

disponibil open source

http://jquery.com/
http://visualjquery.com/
 jQuery

focalizarea asupra interactiunii

dintre codul JavaScript si
constructiile (X)HTML
 jQuery

aproape orice operatie urmeaza regula:

“gaseste ceva”
+
“executa ceva cu ceea ce-ai gasit”
 jQuery

accesul la nodurile documentului HTML

se realizeaza via functia jQuery()

notatie prescurtata: $()

// liniile de tabel de pe pozitii pare vor fi redate
// via proprietatile CSS din clasa ‘fundal-gri’
$("table tr:nth-child(even)").addClass("fundal-gri");

obiect selector metoda

jQuery CSS (functionalitate)
 jQuery

selectarea nodurilor dorite recurge la

conventiile privitoare la selectorii CSS

http://docs.jquery.com/Selectors
 jQuery

selectori “magici”:

privitori la pozitie – :first :last

vizibilitate – :hidden :visible
referitori la animatie – :animated

vizand formularele Web – :input :text

:password :radio :submit

desemnand cu anumit continut

:contains (...)
 jQuery

selectarea nodurilor dorite recurge la

conventiile privitoare la selectorii CSS

$('div.info')
toate elementele <div class="info">
$('div#adresa')
elementul <div id="adresa">
$('div h1')
in contextul: <div> care include <h1>
$('div#menu > p')
in contextul:
<div id="menu"> cu descendentii <p>
 unele rezultate ale $(…) pot intoarce
colectii de noduri, prelucrate prin:

$('div.info').size ()
marimea colectiei obtinute

$('div.info').each (function(div) { ... })

iterator

$('div.info').html ('<em>Salut</em>')
inserare de cod HTML
 unele rezultate ale $(…) pot intoarce
colectii de noduri, prelucrate prin:

$('img.foto').attr ('src', '/anonim.png')

alterarea unui atribut

$('a.menu').addClass ('vizitat')
adaugarea unei clase CSS

$('p:odd').css ('color: blue')

modificare de proprietati CSS
 suportul pentru transferuri asincrone – Ajax:

$('div#stiri').load ('stiri.html');
incarcare asincrona

$.get (url, parametri, functie-callback);

incarcare prin GET

$.post (url, parametri, functie-callback);

incarcare via POST

$.getJSON (url, parametri, functie-callback);

preluare raspuns in format JSON
 jQuery

extinderi via plug-in-uri:

manipularea formularelor

jquery.com/plugins/project/form
 jQuery

extinderi via plug-in-uri:

efecte de interfata +
facilitarea interactiunii cu utilizatorul
(e.g., slider, tabs, resize, drag & drop)

http://ui.jquery.com/
 jQuery

extinderi via plug-in-uri:

pentru alte detalii, a se consulta

http://plugins.jquery.com
JavaScript
 resurse
B. Bibeault, Y. Katz, jQuery in Action,
Manning, 2008

S. Buraga (coord.), Programarea

in Web 2.0, Polirom, 2007

R. Harmes, D. Diaz,
Pro JavaScript Design Patterns,
Apress, 2008

M. Haverbeke, Eloquent JavaScript, 2007:

http://eloquentjavascript.net/

S. Willinson,
A (Re)-Introduction to JavaScript,
ETech Conference, 2005
 resurse
Mozilla Developer Center
developer.mozilla.org

Ajaxian
www.ajaxian.com

Ajax Patterns
www.ajaxpatterns.org

jQuery
http://docs.jquery.com
www.learningjquery.com