sabin buraga — javascript
DESCRIPTION
O presentation regarding the essential aspects of the JavaScript language.TRANSCRIPT
![Page 1: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/1.jpg)
JavaScript
Dr. Sabin Buraga
www.purl.org/net/busaco
@busaco
![Page 2: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/2.jpg)
“Cu cat cunosti mai bine,cu atat iubesti mai mult.”
Leonardo da Vinci
![Page 3: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/3.jpg)
inventat de Brendan Eich (1995)
![Page 4: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/4.jpg)
denumit initial LiveScript
![Page 5: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/5.jpg)
implementat in Netscape Navigator
![Page 6: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/6.jpg)
adaptat de Microsoft: JScript (1996)
![Page 7: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/7.jpg)
standardizat in 1997 de ECMAEuropean Computer Manufacturers Association
www.ecma-international.org
![Page 8: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/8.jpg)
limbaj de tip script (interpretat)
![Page 9: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/9.jpg)
limbaj de tip script (interpretat)
destinat sa manipuleze, sa automatizezesi sa integreze facilitatile oferite
de un anumit sistem
![Page 10: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/10.jpg)
limbaj de tip script (interpretat)
nu necesita intrari/iesiri in mod implicit
![Page 11: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/11.jpg)
Cum putem executa programeleJavaScript?
![Page 12: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/12.jpg)
mediu de executie(host-environment):
navigator Web
“injectarea” de cod JavaScriptin documentele (X)HTML via <script>
![Page 13: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/13.jpg)
mediu de executie(host-environment):
platforma de dezvoltarea aplicatiilor
e.g., Adobe Flex/AIR
![Page 14: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/14.jpg)
mediu de executie(host-environment):
aplicatie de sine-statatoare
Adobe Creative Suite, UltraEdit etc.
![Page 15: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/15.jpg)
mediu de executie(host-environment):
procesor (engine) independent
e.g., Yahoo! Widget Engine
![Page 16: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/16.jpg)
mediu de executie(host-environment):
componenteale sistemului de operare
Dashboard – Mac OS XSidebar – Windows Vista/7
![Page 17: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/17.jpg)
cuvinte rezervate: break else new var case finally returnvoid catch for switch while continuefunction this with default if throwdelete in try do instanceof typeof
![Page 18: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/18.jpg)
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
![Page 19: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/19.jpg)
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”
![Page 20: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/20.jpg)
“valoarea” NaN – “not a number”
parseInt ("Salut")NaN
isNaN (NaN + 33)true
![Page 21: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/21.jpg)
valori speciale:
Infinity
–Infinity
![Page 22: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/22.jpg)
un caracter reprezintaun sir de lungime 1
sirurile sunt obiecte
"Salut".length5
![Page 23: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/23.jpg)
valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false
![Page 24: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/24.jpg)
variabile sunt declarate cu var
var marime;var numeAnimal = "Tux";
![Page 25: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/25.jpg)
variabilele declarate fara valori asignate, se considera undefined
![Page 26: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/26.jpg)
daca nu se foloseste var,
atunci variabila este considerata globala
de evitat asa ceva!
![Page 27: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/27.jpg)
conversia tipurilor se face “din zbor”
"3" + 4 + 53453 + 4 + "5"75
![Page 28: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/28.jpg)
pentru a afla tipul unei expresii,se foloseste typeof
typeof "Tux"string
![Page 29: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/29.jpg)
instructiuni de control
testare: if ... else, switch
![Page 30: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/30.jpg)
instructiuni de control
ciclare: while, do ... while, for
![Page 31: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/31.jpg)
instructiuni de control
exceptii: try ... catch ... finally
emiterea unei exceptii: throw
![Page 32: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/32.jpg)
obiecte
perechi nume—valoare
tabele de dispersie (hash) in C/C++tablouri asociative in Perl, PHP, Ruby
HashMaps in Java
![Page 33: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/33.jpg)
obiecte
perechi nume—valoare
numele este desemnatde un sir de caractere
valoarea poate fi de orice tip
![Page 34: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/34.jpg)
obiecte
colectii de proprietati,avand mai multe atribute
proprietatile pot contine alte obiecte,valori primitive sau metode
![Page 35: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/35.jpg)
obiecte
in JavaScript, se predefinesc obiectele
GlobalObjectFunctionArrayStringBooleanNumberMathDate
![Page 36: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/36.jpg)
obiecte
create prin intermediul lui new
var obiect = new Object();
var obiect = {};// echivalent cu linia anterioara
![Page 37: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/37.jpg)
obiecte
accesarea proprietatilor
obiect.nume = "Tux";var nume = obiect.nume;
![Page 38: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/38.jpg)
obiecte
accesarea proprietatilor
obiect.nume = "Tux";var nume = obiect.nume;
echivalent:
obiect["nume"] = "Tux";var nume = obiect["nume"];
![Page 39: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/39.jpg)
obiecte
declarare + asociere de valori
var pingu = {nume: "Tux",proprietati: {
culoare: "oranj",marime: 17
}}
![Page 40: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/40.jpg)
tablouri
sunt tipuri speciale de obiecte
proprietatile sunt numere,nu siruri de caractere
![Page 41: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/41.jpg)
tablouri
var zoo = new Array ();zoo[0] = "pinguin";zoo[1] = "omida";zoo[2] = "urs";
zoo.length3
![Page 42: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/42.jpg)
tablouri
var zoo = new Array ();zoo[0] = "pinguin";zoo[1] = "omida";zoo[2] = "urs";
zoo.length3
notatie alternativa:
var zoo = ["pinguin", "omida", "urs"];
![Page 43: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/43.jpg)
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?
![Page 44: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/44.jpg)
tablouri
elementele pot apartineunor tipuri de date eterogene
var zoo = [16, "musca", true, "gaga"];
![Page 45: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/45.jpg)
functii
obiecte definite prin function
function transformaPixeliInPuncte (px) {var puncte = px * 300;return puncte;
}
![Page 46: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/46.jpg)
functii
argumentele primite de o functiese acceseaza via tabloul arguments
![Page 47: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/47.jpg)
functii
pot fi specificate functii anonime
expresiilambda
![Page 48: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/48.jpg)
functii
pot fi specificate functii anonime
expresiilambda
in acest sens, JavaScript este un limbaj functional
![Page 49: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/49.jpg)
var media = function () { // calculul medieivar suma = 0;for (var iter = 0,
lung = arguments.length; iter < lung; iter++) {
suma += arguments[iter];}return suma / arguments.length;
}
![Page 50: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/50.jpg)
putem incapsula functiile in clase?
![Page 51: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/51.jpg)
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;};
}
![Page 52: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/52.jpg)
instantierea unui obiect:
var tux = new Animal ("Tux", 17);
![Page 53: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/53.jpg)
operatorul new creaza un nou obiect vid
si apeleaza functia specificatacu this setat pe acest obiect
![Page 54: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/54.jpg)
aceste functii se numesc constructori,trebuie apelate via new si, prin conventie,
au numele scris cu litera mare
![Page 55: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/55.jpg)
structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
![Page 56: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/56.jpg)
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;}
![Page 57: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/57.jpg)
pentru a cunoaste tipul unui obiect– pe baza constructorului sia ierarhiei de prototipuri –
se foloseste operatorul instanceof
![Page 58: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/58.jpg)
var marimi = [17, 20, 7, 14];
marimi instanceof Arraytruemarimi instanceof Objecttruemarimi instanceof Stringfalse
![Page 59: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/59.jpg)
extinderea claselor
adaugarea unei metode se realizeaza via prototype
![Page 60: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/60.jpg)
Animal.prototype.oferaNumeMare = function () {
return this.nume.toUpperCase ();}
tux.oferaNumeMare ()"TUX"
![Page 61: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/61.jpg)
in JavaScript, totul e consideratca fiind obiect – chiar si functiile
![Page 62: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/62.jpg)
orice obiect e intotdeauna mutabil(poate fi alterat oricind)
![Page 63: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/63.jpg)
operatorul . este echivalent
cu de-referentierea:
obiect.prop === obiect["prop"]
![Page 64: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/64.jpg)
functiile ascund orice este definit in interiorul lor
![Page 65: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/65.jpg)
accesorul this este relativ
la contextul executiei, nu al declararii
![Page 66: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/66.jpg)
rularea in browser
programele JavaScript au acces la diverse obiecteoferite de navigatorul Web
![Page 67: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/67.jpg)
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>
![Page 68: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/68.jpg)
graceful degradation &progresive enhancement
conceperea “stratificata” a aplicatiilor JavaScript
![Page 69: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/69.jpg)
graceful degradation &progresive enhancement
initial: interactiune minimala, fara JavaScript
adaugarea progresiva a facilitatilor,in functie de context
![Page 70: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/70.jpg)
graceful degradation &progresive enhancement
inaintea folosirii oricarei tehnici dorite,de testat suportul oferit de navigator:
JavaScript, cookie-uri, clase/metode DOM, Ajax,…
![Page 71: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/71.jpg)
JSON – JavaScript Object Notation
format compact pentru interschimb de date intre aplicatii
![Page 72: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/72.jpg)
JSON – JavaScript Object Notation
folosit la serializarea datelor in contextul Web
uzual, transfer (a)sincron de dateintre servicii Web si aplicatii (clienti)
![Page 73: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/73.jpg)
JSON – JavaScript Object Notation
defineste datele in termeni de obiecte & literali
json.org
![Page 74: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/74.jpg)
{ 'nume' : 'Tux', 'stoc' : 33, 'gen' : ['candid', 'furios', 'vesel']
}datele pot fi
evaluate directin JavaScript
![Page 75: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/75.jpg)
instrumente
medii de dezvoltareAptana Studio
depanareFirebug (Lite)
Visual Studio Developer 2010
![Page 76: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/76.jpg)
instrumente
testare (inginerie software)JSLint, JsUnit, jsTrace, Selenium
![Page 77: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/77.jpg)
instrumente
alte extensii/utilitare folositoareGreaseMonkey, Ubiquity, Y! Slow
SpiderMonkeyRhino
JavaScript Shell
![Page 78: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/78.jpg)
biblioteci
Dojo: dojotoolkit.orgjQuery: jquery.com
Prototype: prototypejs.orgRico: openrico.org
Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/
…si multe altele
![Page 79: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/79.jpg)
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/
![Page 80: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/80.jpg)
jQuery
focalizarea asupra interactiuniidintre codul JavaScript si
constructiile (X)HTML
![Page 81: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/81.jpg)
jQuery
aproape orice operatie urmeaza regula:
“gaseste ceva”+
“executa ceva cu ceea ce-ai gasit”
![Page 82: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/82.jpg)
jQuery
accesul la nodurile documentului HTML se realizeaza via functia jQuery()
notatie prescurtata: $()
![Page 83: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/83.jpg)
// 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)
![Page 84: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/84.jpg)
jQuery
selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS
http://docs.jquery.com/Selectors
![Page 85: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/85.jpg)
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 (...)
![Page 86: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/86.jpg)
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>
![Page 87: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/87.jpg)
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
![Page 88: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/88.jpg)
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
![Page 89: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/89.jpg)
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
![Page 90: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/90.jpg)
jQuery
extinderi via plug-in-uri:
manipularea formularelor
jquery.com/plugins/project/form
![Page 91: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/91.jpg)
jQuery
extinderi via plug-in-uri:
efecte de interfata +facilitarea interactiunii cu utilizatorul(e.g., slider, tabs, resize, drag & drop)
http://ui.jquery.com/
![Page 92: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/92.jpg)
jQuery
extinderi via plug-in-uri:
pentru alte detalii, a se consultahttp://plugins.jquery.com
![Page 93: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/93.jpg)
JavaScript
![Page 94: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/94.jpg)
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
![Page 95: Sabin Buraga — JavaScript](https://reader034.vdocuments.site/reader034/viewer/2022050711/549ed21cb37959b9618b47fc/html5/thumbnails/95.jpg)
resurse
Mozilla Developer Centerdeveloper.mozilla.org
Ajaxianwww.ajaxian.com
Ajax Patternswww.ajaxpatterns.org
jQueryhttp://docs.jquery.com
www.learningjquery.com