Upload
sabin-buraga
View
2.449
Download
13
Embed Size (px)
DESCRIPTION
O presentation regarding the essential aspects of the JavaScript language.
Citation preview
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 ECMAEuropean Computer Manufacturers Association
www.ecma-international.org
limbaj de tip script (interpretat)
limbaj de tip script (interpretat)
destinat sa manipuleze, sa automatizezesi sa integreze facilitatile oferite
de un anumit sistem
limbaj de tip script (interpretat)
nu necesita intrari/iesiri in mod implicit
Cum putem executa programeleJavaScript?
mediu de executie(host-environment):
navigator Web
“injectarea” de cod JavaScriptin documentele (X)HTML via <script>
mediu de executie(host-environment):
platforma de dezvoltarea 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):
componenteale sistemului de operare
Dashboard – Mac OS XSidebar – Windows Vista/7
cuvinte rezervate: break else new var case finally returnvoid catch for switch while continuefunction this with default if throwdelete in try do instanceof typeof
alte cuvinte rezervate: abstract enum int short boolean export interface static byte extends long superchar final native synchronized class floatpackage throws const goto private transient
debugger implements protected volatiledouble import public
tipuri de date:
Numberdubla precizie, stocare pe 64 biti
Stringsecvente de caractere Unicode, 16 biti
Booleansecvente ce se pot evalua ca true/false
ObjectFunction, Array, Date, RegExp
Nullsemnifica “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 reprezintaun sir de lungime 1
sirurile sunt obiecte
"Salut".length5
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 + 53453 + 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 desemnatde 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
GlobalObjectFunctionArrayStringBooleanNumberMathDate
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.length3
tablouri
var zoo = new Array ();zoo[0] = "pinguin";zoo[1] = "omida";zoo[2] = "urs";
zoo.length3
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 apartineunor 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 functiese acceseaza via tabloul arguments
functii
pot fi specificate functii anonime
expresiilambda
functii
pot fi specificate functii anonime
expresiilambda
in acest sens, JavaScript este un limbaj functional
var media = function () { // calculul medieivar 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-membrethis.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 specificatacu 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 initialathis.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 sia ierarhiei de prototipuri –
se foloseste operatorul instanceof
var marimi = [17, 20, 7, 14];
marimi instanceof Arraytruemarimi instanceof Objecttruemarimi instanceof Stringfalse
extinderea claselor
adaugarea unei metode se realizeaza via prototype
Animal.prototype.oferaNumeMare = function () {
return this.nume.toUpperCase ();}
tux.oferaNumeMare ()"TUX"
in JavaScript, totul e consideratca 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 obiecteoferite 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 dateintre 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 directin JavaScript
instrumente
medii de dezvoltareAptana Studio
depanareFirebug (Lite)
Visual Studio Developer 2010
instrumente
testare (inginerie software)JSLint, JsUnit, jsTrace, Selenium
instrumente
alte extensii/utilitare folositoareGreaseMonkey, Ubiquity, Y! Slow
SpiderMonkeyRhino
JavaScript Shell
biblioteci
Dojo: dojotoolkit.orgjQuery: jquery.com
Prototype: prototypejs.orgRico: openrico.org
Script.aculo.us: script.aculo.usYUI: 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 interactiuniidintre 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");
obiectjQuery
selector CSS
metoda(functionalitate)
jQuery
selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS
http://docs.jquery.com/Selectors
jQuery
selectori “magici”:
privitori la pozitie – :first :lastvizibilitate – :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 consultahttp://plugins.jquery.com
JavaScript
resurse
B. Bibeault, Y. Katz, jQuery in Action, Manning, 2008
S. Buraga (coord.), Programareain 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 Centerdeveloper.mozilla.org
Ajaxianwww.ajaxian.com
Ajax Patternswww.ajaxpatterns.org
jQueryhttp://docs.jquery.com
www.learningjquery.com