Sunteți pe pagina 1din 95

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

S-ar putea să vă placă și