0
Dr. Sabin Buragawww.purl.org/net/busaco

programare Web la nivel de client

inginerie software în contextul JavaScript
Alan J. Perlis

Dr. Sabin Buragawww.purl.org/net/busaco

“There are two ways to write error-free programs;
only the third...
Dr. Sabin Buragawww.purl.org/net/busaco

Ce instrumente software și biblioteci JavaScript
pot fi folosite în contextul pr...
Editare de cod & dezvoltare de aplicații Web
Depanare
Testare
Documentare a codului
Compresie
Optimizare

Dr. Sabin Buraga...
Pentru desktop:
Aptana Studio, JS Development Tools (plug-in Eclipse),
Sublime Text, Visual Studio (Express Edition),…
Dis...
Utilizarea consolei JS
obiectul console oferit de browser
metode utile: log (), error(), warn(), info(),
time(), timeEnd()...
Firebug (Lite)
http://getfirebug.com/
a se considera și instrumentele de depanare
incluse în unele navigatoare Web
exemplu...
Verificarea corectitudinii codului JavaScript
constructia "use strict"; indică interpretorului
că se va utiliza varianta s...
Verificarea corectitudinii codului JavaScript
erorile de programare (e.g., crearea accidentală
a variabilelor globale, num...
Verificarea corectitudinii codului JavaScript
sunt interzise diverse facilități:
numere exprimate în baza 8,
folosirea con...
Modul de procesare strict:
modifică semantica programelor
nu este impus de vreun browser Web

Dr. Sabin Buragawww.purl.or...
Verificare statică
instrumente de referință:
JSLint – http://www.jslint.com/
JSHint – http://www.jshint.com/

Dr. Sabin Bu...
Dr. Sabin Buragawww.purl.org/net/busaco

instrumente: testare
opțiuni
JSHint
Suport pentru unit testing
exemplificări:
Jasmine
JSTest.NET
QUnit
Sinon.js
Tyrtle

Dr. Sabin Buragawww.purl.org/net/busa...
Testare cross-browser a aplicațiilor Web
instrumente disponibile gratuit
Adobe BrowserLab, Browsera, BrowserShots,
Microso...
Testare cross-browser a aplicațiilor Web
aplicații comerciale – exemplificări:
BrowserStack, Cloud Testing, CrossBrowserTe...
Standarde de redactare a codului JavaScript
exemple:
Crock’s Code Conventions for JavaScript
Google JavaScript Style Guide...
Software pentru documentarea programelor
JSDoc Toolkit
jGrouseDoc
YUIDoc

Dr. Sabin Buragawww.purl.org/net/busaco

instru...
Instrumente privind compresia/minimizarea
Online Javascript Compression Tool
YUI Compressor
Scriptalizer
detalii în artico...
Transformarea codului JS într-unul optimizat
exemplu de referință:
Closure Compiler
https://developers.google.com/closure/...
Managementul de pachete JavaScript pentru
dezvoltarea de aplicații Web la nivel de client
căutare, instalare, compilare, v...
Suport pentru fluxuri de activități (workflow-uri),
eventual realizate automat

exemple:
Grunt, Yeoman
Phantom.js, Seleniu...
Facilitarea dezvoltării de aplicații Web
la nivel de client similare celor desktop
exemplificări notabile:
Cappuccino – ht...
Suport pentru creșterea performanței
asm.js (Mozilla, 2012)
subset JavaScript ce poate fi utilizat ca limbaj de nivel
scăz...
Alte limbaje pentru dezvoltarea de aplicații Web
la nivel de client:
CoffeeScript (Jeremy Ashkenas, 2009)
http://coffeescr...
Portarea altor aplicații în JavaScript
Emscripten – compilator LLVM generând cod JS
(e.g., programe C/C++, Lua, Python, Ru...
Portarea altor aplicații în JavaScript
JSIL – compilator care transformă aplicațiile .NET
în programe JavaScript rulând in...
Limbaje aliniate altor paradigme
exemplu:
programare funcțională – ClosureScript
https://github.com/clojure/clojurescript
...
conceperea “stratificată” a aplicațiilor JavaScript

Dr. Sabin Buragawww.purl.org/net/busaco

Graceful degradation & prog...
inițial: interacțiune minimală, fără JavaScript

adăugarea progresivă a facilităților, în funcție de context

Dr. Sabin Bu...
înaintea folosirii oricărei tehnici dorite,
de testat suportul oferit de navigator:
JavaScript, cookie-uri, clase/metode D...
Dr. Sabin Buragawww.purl.org/net/busaco

N-am putea recurge la
biblioteci JavaScript specifice?
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: openrico.org
Script.aculo.us: script.aculo.us
YU...
Chroma
D3
Dance
Data
Envision
Processing.js
Raphaël
http://selection.datavisualization.ch/

Dr. Sabin Buragawww.purl.org/...
procesarea formularelor Web
facilitarea transferurilor asincrone de date
tehnici criptografice
grafice (plotting)
realizar...
Dr. Sabin Buragawww.purl.org/net/busaco

colecții de (micro-)biblioteci
JavaScript:
http://javascriptlibraries.com/
devel...
Dr. Sabin Buragawww.purl.org/net/busaco

jQuery

aspecte esențiale (o prezentare succintă)
scop principal:
manipularea facilă a documentului HTML
pe baza selectorilor CSS – nivelul 3

Dr. Sabin Buragawww.purl.org...
oferă un API concis, dar extensibil, ușor de folosit
nu intră în conflict cu alte biblioteci JavaScript
disponibil open so...
detalii tehnice + documentații:
http://jquery.com/
http://learn.jquery.com/
http://jqfundamentals.com/
http://www.learning...
filosofie inițială:
focalizarea asupra interacțiunii dintre codul JavaScript
și constructiile (X)HTML
aproape fiecare oper...
accesul la nodurile documentului HTML se realizează
via funcția jQuery() – notație prescurtată: $()

Dr. Sabin Buragawww....
accesul la nodurile documentului HTML se realizează
via funcția jQuery() – notație prescurtată: $()
// liniile de tabel de...
selectarea nodurilor dorite recurge la convențiile
privitoare la selectorii CSS – nivelul 2 și nivelul 3

http://docs.jque...
selectarea nodurilor dorite recurge la convențiile
privitoare la selectorii CSS – nivelul 2 și nivelul 3
$(div.info) – toa...
selectori “magici”:
poziție – :first :last
antet – :header
vizibilitate – :hidden :visible
animație – :animated
formulare ...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('div.info').size ()
mărimea colecției obținut...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('div.info').each (function (div) { … })
itera...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('div.info').html ('<em>Winter Web Workshop</e...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('img.foto').attr ('src', '/anonim.png')
alter...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('a.menu').addClass ('vizitat')
adăugarea unei...
unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
poziție impară

$('p:odd').css ('color', 'blue'...
o serie de metode întorc rezultate
privind primul nod selectat:
var latime = $('table').width ();
// lățimea tabelului
var...
traversarea arborelui DOM al paginii Web:
next ()
prev ()
parent ()

Dr. Sabin Buragawww.purl.org/net/busaco

jQuery
asocierea de funcții de tratare a evenimentelor
// evenimentul click asupra unui element <a>
$('a').click ( function(ev) {...
evenimentul de disponibilitate a DOM-ului
poate fi tratat via ready()
// atunci când documentul e pregătit de prelucrare…
...
„înlănțuirea” metodelor – chaining:
majoritatea metodelor întorc un alt obiect jQuery
(uzual, reprezentând aceeași colecți...
„înlănțuirea” metodelor – chaining:
atunci când o metodă întoarce o altă colecție, se poate
folosi end () pentru a avea ac...
suportul pentru transferuri asincrone – Ajax:
încărcare asincronă a unui document
$('div#stiri').load ('stiri.html');

Dr....
suportul pentru transferuri asincrone – Ajax:
încărcare prin GET
$.get (url, parametri, funcție-callback);

Dr. Sabin Bura...
suportul pentru transferuri asincrone – Ajax:
încărcare via POST
$.post (url, parametri, funcție-callback);

Dr. Sabin Bur...
suportul pentru transferuri asincrone – Ajax:
preluare răspuns în format JSON
$.getJSON (url, parametri, funcție-callback)...
suportul pentru transferuri asincrone – Ajax:
metoda cea mai generală (low level)
$.ajax (url, parametri);
o serie de para...
suportul pentru transferuri asincrone – Ajax:
metoda cea mai generală (low level)
$.ajax (url, parametri);
detalii la http...
Dr. Sabin Buragawww.purl.org/net/busaco

jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web
type: "...
astfel, pot fi implementate mash-up-uri la nivel de client

Dr. Sabin Buragawww.purl.org/net/busaco

jQuery.ajax ({ // ex...
suportul pentru transferuri asincrone – Ajax:
evenimente Ajax
locale – tratate de obiectul Ajax instanțiat
beforeSend, suc...
suportul pentru transferuri asincrone – Ajax:
evenimente Ajax
globale – transmise tuturor elementelor din DOM
ajaxStart, a...
Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit

vezi exemplele
din arhiva asociată...
Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
utilizăm URL-ul
http://api.flickr.c...
interactiune web: ajax – studiu de caz
"title"
: "Recent Uploads",
"link"
: "http://www.flickr.com/photos/",
"modified"
: ...
studiu de caz
Dr. Sabin Buragawww.purl.org/net/busaco

// preluăm asincron imagini disponibile pe Flickr
jQuery.getJSON
(...
Dr. Sabin Buragawww.purl.org/net/busaco

studiu de caz

un posibil rezultat obținut (inclusiv trasarea pas-cu-pas
a execu...
efectuarea de animații simple:
$('h1').hide ('slow');
$('h1').slideDown ('fast');
$('h1').fadeOut (2000);

Dr. Sabin Burag...
efectuarea de animații simple:
acțiunile pot fi specificate și de programator
$("#reclama").animate ({
width: "+=100px",
o...
Dr. Sabin Buragawww.purl.org/net/busaco

disponibilitatea unei suite largi de plug-in-uri
http://plugins.jquery.com/
Dr. Sabin Buragawww.purl.org/net/busaco

șabloane de proiectare pentru JavaScript
creaționale
Builder, Prototype, Singleton
structurale
Adapter, Bridge, Decorator, Façade, Flyweight, Proxy
comportamentale...
MVC (Model-View-Controller)
MVP (Model-View-Presenter)
MVVM (Model View ViewModel)

Dr. Sabin Buragawww.purl.org/net/busa...
MVC (Model-View-Controller)
MVP (Model-View-Presenter)
MVVM (Model View ViewModel)

utilizare pragmatică via biblioteci/fr...
arhitectura unei aplicații Web ce recurge la Backbone.js
http://backbonejs.org/
A. Osmani, Developing Backbone.js Applicat...
var RouterStud = Backbone.Router.extend({
routes: {
"":
"index",
// pagina principală – http://sit.info
"students": "stude...
Dr. Sabin Buragawww.purl.org/net/busaco

Backbone.View – preia datele și generează codul HTML
(eventual, recurgând la tem...
var Student = Backbone.Model.extend ( { // date despre un student
urlRoot: '/students',
toString: function() {
return this...
Backbone.Collection – reprezintă o colecție de modele
Dr. Sabin Buragawww.purl.org/net/busaco

var Studenti = Backbone.Co...
exemplificări:
Dust.js – http://akdubya.github.io/dustjs/
Handlebars – http://handlebarsjs.com/
Mustache.js – http://githu...
aspect de interes:
modularizarea codului (loose coupling)
specificarea modulelor JS se realizează
via limbajul AMD (Asynch...
aspect de interes:
modularizarea codului (loose coupling)
specificarea modulelor JS se realizează
via limbajul AMD (Asynch...
aspect de interes:
modularizarea codului (loose coupling)
alternativ, se poate recurge la CommonJS
un format de declarare ...
detalii și exemple – inclusiv pentru jQuery – în cartea
A. Osmani, Learning JavaScript Design Patterns (2012)
http://addyo...
framework-uri & biblioteci JavaScript
exemplu notabil: jQuery Mobile
instrumente independente de platformă
Apache Cordova ...
definirea de macro-uri: Sweet.js
securitate: ADsafe, FBJS, Gatekeeper etc.
execuție asincronă a codului: Streamline.js, St...
Dr. Sabin Buragawww.purl.org/net/busaco

Care este viitorul limbajului JavaScript?
specificație în stadiu de ciornă (Rev 21, noiembrie 2013)

Dr. Sabin Buragawww.purl.org/net/busaco

EcmaScript 6 (ES6)

w...
definirea de clase – perspectiva paradigmei obiectuale
parametri cu valori implicite și parametri multipli
iteratori & gen...
vezi și proiectul Traceur – https://github.com/google/traceur-compiler
(JavaScript.next-to-JavaScript-of-today compiler)

...
Dr. Sabin Buragawww.purl.org/net/busaco

episodul viitor:
suita de tehnologii HTML5 (prima parte)
Upcoming SlideShare
Loading in...5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

272

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
272
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript"

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client inginerie software în contextul JavaScript
  2. 2. Alan J. Perlis Dr. Sabin Buragawww.purl.org/net/busaco “There are two ways to write error-free programs; only the third one works.”
  3. 3. Dr. Sabin Buragawww.purl.org/net/busaco Ce instrumente software și biblioteci JavaScript pot fi folosite în contextul programării Web la nivel de client?
  4. 4. Editare de cod & dezvoltare de aplicații Web Depanare Testare Documentare a codului Compresie Optimizare Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  5. 5. Pentru desktop: Aptana Studio, JS Development Tools (plug-in Eclipse), Sublime Text, Visual Studio (Express Edition),… Disponibile pe Web: Cloud9 IDE, Codepen, JS Bin, JS Fiddle etc. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: editare unele oferă și partajarea codului-sursă cu alți dezvoltatori
  6. 6. Utilizarea consolei JS obiectul console oferit de browser metode utile: log (), error(), warn(), info(), time(), timeEnd(), trace(), group(), groupEnd() https://developer.mozilla.org/docs/DOM/console Dr. Sabin Buragawww.purl.org/net/busaco instrumente: depanare
  7. 7. Firebug (Lite) http://getfirebug.com/ a se considera și instrumentele de depanare incluse în unele navigatoare Web exemplu notabil: Chrome Developer Tools Dr. Sabin Buragawww.purl.org/net/busaco instrumente: depanare
  8. 8. Verificarea corectitudinii codului JavaScript constructia "use strict"; indică interpretorului că se va utiliza varianta strictă a limbajului disponibilă începând cu ECMAScript versiunea 5 Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  9. 9. Verificarea corectitudinii codului JavaScript erorile de programare (e.g., crearea accidentală a variabilelor globale, nume identice de proprietăți etc.) vor conduce la emiterea de excepții "use strict"; variabilaAiurea = "Ah! "; // emite ReferenceError var obiect = { prop: 1, prop: 2 }; // eroare de sintaxă Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  10. 10. Verificarea corectitudinii codului JavaScript sunt interzise diverse facilități: numere exprimate în baza 8, folosirea construcțiilor with, arguments.callee etc. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  11. 11. Modul de procesare strict: modifică semantica programelor nu este impus de vreun browser Web Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  12. 12. Verificare statică instrumente de referință: JSLint – http://www.jslint.com/ JSHint – http://www.jshint.com/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare opțiuni JSHint
  14. 14. Suport pentru unit testing exemplificări: Jasmine JSTest.NET QUnit Sinon.js Tyrtle Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  15. 15. Testare cross-browser a aplicațiilor Web instrumente disponibile gratuit Adobe BrowserLab, Browsera, BrowserShots, Microsoft SuperPreview, Spoon Browser Sandbox,… Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  16. 16. Testare cross-browser a aplicațiilor Web aplicații comerciale – exemplificări: BrowserStack, Cloud Testing, CrossBrowserTesting Dr. Sabin Buragawww.purl.org/net/busaco instrumente: testare
  17. 17. 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 Dr. Sabin Buragawww.purl.org/net/busaco instrumente: documentarea codului
  18. 18. Software pentru documentarea programelor JSDoc Toolkit jGrouseDoc YUIDoc Dr. Sabin Buragawww.purl.org/net/busaco instrumente: documentarea codului
  19. 19. Instrumente privind compresia/minimizarea Online Javascript Compression Tool YUI Compressor Scriptalizer detalii în articolul A. Powell, Understanding Compression and Minification (mai 2012): Dr. Sabin Buragawww.purl.org/net/busaco instrumente: compresie de cod www.aaron-powell.com/javascript/understanding-compression-and-minification
  20. 20. Transformarea codului JS într-unul optimizat exemplu de referință: Closure Compiler https://developers.google.com/closure/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente: optimizare javascript
  21. 21. Managementul de pachete JavaScript pentru dezvoltarea de aplicații Web la nivel de client căutare, instalare, compilare, verificare a dependențelor exemplificări: Bower – http://bower.io/ Ender – http://ender.jit.su/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  22. 22. Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat exemple: Grunt, Yeoman Phantom.js, Selenium Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  23. 23. Facilitarea dezvoltării de aplicații Web la nivel de client similare celor desktop exemplificări notabile: Cappuccino – http://cappuccino.org/ SproutCore – http://www.sproutcore.com/ în contextul jocurilor, a se experimenta Mandreel: http://www.mandreel.com/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  24. 24. Suport pentru creșterea performanței asm.js (Mozilla, 2012) subset JavaScript ce poate fi utilizat ca limbaj de nivel scăzut, eficient – în spiritul limbajului de asamblare scop: dezvoltarea de aplicații (e.g., jocuri) sofisticate rulate în cadrul browser-ului Web http://asmjs.org/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  25. 25. Alte limbaje pentru dezvoltarea de aplicații Web la nivel de client: CoffeeScript (Jeremy Ashkenas, 2009) http://coffeescript.org/ TypeScript (Microsoft, 2012) http://www.typescriptlang.org/ limbaje de programare care se compilează în JavaScript Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  26. 26. Portarea altor aplicații în JavaScript Emscripten – compilator LLVM generând cod JS (e.g., programe C/C++, Lua, Python, Ruby etc. ce se pot compila în JavaScript) http://emscripten.org/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  27. 27. Portarea altor aplicații în JavaScript JSIL – compilator care transformă aplicațiile .NET în programe JavaScript rulând independent de browser http://jsil.org/ Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  28. 28. Limbaje aliniate altor paradigme exemplu: programare funcțională – ClosureScript https://github.com/clojure/clojurescript Dr. Sabin Buragawww.purl.org/net/busaco instrumente
  29. 29. conceperea “stratificată” a aplicațiilor JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
  30. 30. inițial: interacțiune minimală, fără JavaScript adăugarea progresivă a facilităților, în funcție de context Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
  31. 31. înaintea folosirii oricărei tehnici dorite, de testat suportul oferit de navigator: JavaScript, cookie-uri, clase/metode DOM, Ajax etc. Dr. Sabin Buragawww.purl.org/net/busaco Graceful degradation & progressive enhancement
  32. 32. Dr. Sabin Buragawww.purl.org/net/busaco N-am putea recurge la biblioteci JavaScript specifice?
  33. 33. Dojo: dojotoolkit.org jQuery: jquery.com Prototype: prototypejs.org Rico: openrico.org Script.aculo.us: script.aculo.us YUI: developer.yahoo.net/yui/ Dr. Sabin Buragawww.purl.org/net/busaco Biblioteci generale privind prezentarea conținutului și manipularea arborelui DOM
  34. 34. Chroma D3 Dance Data Envision Processing.js Raphaël http://selection.datavisualization.ch/ Dr. Sabin Buragawww.purl.org/net/busaco Biblioteci pentru vizualizarea datelor
  35. 35. procesarea formularelor Web facilitarea transferurilor asincrone de date tehnici criptografice grafice (plotting) realizarea de efecte vizuale generarea de conținut grafic 2D/3D dezvoltare de jocuri (e.g., game engines) … Dr. Sabin Buragawww.purl.org/net/busaco Multe alte biblioteci JavaScript specializate
  36. 36. Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JavaScript: http://javascriptlibraries.com/ developers.google.com/speed/libraries/ microjs.com
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco jQuery aspecte esențiale (o prezentare succintă)
  38. 38. scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3 Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  39. 39. oferă un API concis, dar extensibil, ușor de folosit nu intră în conflict cu alte biblioteci JavaScript disponibil open source Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  40. 40. detalii tehnice + documentații: http://jquery.com/ http://learn.jquery.com/ http://jqfundamentals.com/ http://www.learningjquery.com/ Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  41. 41. filosofie inițială: focalizarea asupra interacțiunii dintre codul JavaScript și constructiile (X)HTML aproape fiecare operație urmează șablonul: “găsește ceva” + “execută ceva cu ceea ce-ai găsit” Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  42. 42. accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $() Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  43. 43. accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $() // liniile de tabel de pe poziții pare vor fi redate // via proprietățile de stil CSS din clasa ‘fundal-gri’ $("table tr:nth-child(even)").addClass("fundal-gri"); obiect jQuery selector CSS metodă (funcționalitate) Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  44. 44. selectarea nodurilor dorite recurge la convențiile privitoare la selectorii CSS – nivelul 2 și nivelul 3 http://docs.jquery.com/Selectors Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  45. 45. selectarea nodurilor dorite recurge la convențiile privitoare la selectorii CSS – nivelul 2 și nivelul 3 $(div.info) – toate elementele <div class="info"> $(div#adresa) – elementul <div id="adresa"> $(div h1) – în contextul: <div> care include <h1> $(div#cap > p) – context: <div id="cap"> cu descend. <p> Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  46. 46. selectori “magici”: poziție – :first :last antet – :header vizibilitate – :hidden :visible animație – :animated formulare – :input :text :password :radio :submit conținut – :contains (…) Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  47. 47. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').size () mărimea colecției obținute Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  48. 48. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').each (function (div) { … }) iterare via o funcție – aici: anonimă Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  49. 49. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').html ('<em>Winter Web Workshop</em> la FII') inserare de construcții HTML Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  50. 50. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  51. 51. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('a.menu').addClass ('vizitat') adăugarea unei clase CSS Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  52. 52. unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: poziție impară $('p:odd').css ('color', 'blue') modificarea unor proprietăți CSS Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  53. 53. o serie de metode întorc rezultate privind primul nod selectat: var latime = $('table').width (); // lățimea tabelului var src = $('img#profil').attr ('src'); // URL-ul unei imagini var ultimP = $('p:last').html (); // conținutul ultimului <p> Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  54. 54. traversarea arborelui DOM al paginii Web: next () prev () parent () Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  55. 55. asocierea de funcții de tratare a evenimentelor // evenimentul click asupra unui element <a> $('a').click ( function(ev) { $(this).css({ backgroundColor: 'yellow' }); ev.preventDefault (); // previne comportamentul implicit }); $('a:first').click (); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  56. 56. evenimentul de disponibilitate a DOM-ului poate fi tratat via ready() // atunci când documentul e pregătit de prelucrare… $(document).ready( function() { // … stabilim afișarea diferențiată a liniilor de tabel $("table tr:nth-child(even)").addClass("fundal-gri"); }); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  57. 57. „înlănțuirea” metodelor – chaining: majoritatea metodelor întorc un alt obiect jQuery (uzual, reprezentând aceeași colecție) metodele pot fi „înlănțuite” $('div.info').hide().addClass('eliminat'); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  58. 58. „înlănțuirea” metodelor – chaining: atunci când o metodă întoarce o altă colecție, se poate folosi end () pentru a avea acces la colecția precedentă $('#intro').css ('color', 'gray'). find ('a').addClass ('important').end (). find ('em').css ('color', 'red').end () Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  59. 59. suportul pentru transferuri asincrone – Ajax: încărcare asincronă a unui document $('div#stiri').load ('stiri.html'); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  60. 60. suportul pentru transferuri asincrone – Ajax: încărcare prin GET $.get (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  61. 61. suportul pentru transferuri asincrone – Ajax: încărcare via POST $.post (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  62. 62. suportul pentru transferuri asincrone – Ajax: preluare răspuns în format JSON $.getJSON (url, parametri, funcție-callback); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  63. 63. suportul pentru transferuri asincrone – Ajax: metoda cea mai generală (low level) $.ajax (url, parametri); o serie de parametri de interes: async, cache, complete, crossDomain, data, error, statusCode, success,… Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  64. 64. suportul pentru transferuri asincrone – Ajax: metoda cea mai generală (low level) $.ajax (url, parametri); detalii la http://api.jquery.com/jQuery.ajax/ Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web type: "POST", contentType: "application/json; charset=utf-8", url: "http://undeva.info/ServiciuWeb/Resursa", data: "{…}", // datele de intrare trimise serviciului dataType: "json", // așteptăm răspunsul în format JSON success: function (data) { // funcție apelată la transfer cu succes $('.rezultat').html (data); // preluăm datele, convertindu-le în HTML } });
  66. 66. astfel, pot fi implementate mash-up-uri la nivel de client Dr. Sabin Buragawww.purl.org/net/busaco jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web type: "POST", contentType: "application/json; charset=utf-8", url: "http://undeva.info/ServiciuWeb/Resursa", data: "{…}", // datele de intrare trimise serviciului dataType: "json", // așteptăm răspunsul în format JSON success: function (data) { // funcție apelată la transfer cu succes $('.rezultat').html (data); // preluăm datele, convertindu-le în HTML } });
  67. 67. suportul pentru transferuri asincrone – Ajax: evenimente Ajax locale – tratate de obiectul Ajax instanțiat beforeSend, success, error, complete Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  68. 68. suportul pentru transferuri asincrone – Ajax: evenimente Ajax globale – transmise tuturor elementelor din DOM ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxStop,… amănunte la http://docs.jquery.com/Ajax_Events Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  69. 69. Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit vezi exemplele din arhiva asociată acestei prezentări Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz
  70. 70. Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit utilizăm URL-ul http://api.flickr.com/services/feeds/photos_public.gne pentru a obține informații despre imagini (formate disponibile: Atom, CSV, JSON, XML,…) vezi http://www.flickr.com/services/feeds/docs/photos_public/ Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz
  71. 71. interactiune web: ajax – studiu de caz "title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2013-12-06T13:33:07Z", "generator" : "http://www.flickr.com/", "items" :[{ "title" : "...", "link" : "http://www.flickr.com/photos/.../4204222/", "media" : { "m": "https://farm.staticflickr.com/...jpg" }, "date_taken": "2012-05-20T17:23:43-08:00", "description": "...", tip de data XML Schema "published" : "2012-05-26T13:49:08Z", "author" : "...", "author_id" : "...", "tags" : "iasi romania informatica FII ..." }] Dr. Sabin Buragawww.purl.org/net/busaco { Forma generală a răspunsului JSON transmis de Flickr: }
  72. 72. studiu de caz Dr. Sabin Buragawww.purl.org/net/busaco // preluăm asincron imagini disponibile pe Flickr jQuery.getJSON ("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // datele de intrare transmise serviciului Web tags: "iasi, romania, informatica", format: "json" }, // funcția anonimă ce va procesa datele JSON trimise asincron de Flickr function (data) { // iterăm fiecare informație obținută de la serviciul Web $.each (data.items, function (numar, foto) { // creăm un element <img> având ca valoare a atributului "src" // adresa Web inclusă în datele JSON obținute; // acest <img> va fi adăugat la elementul cu id="imagini" din pagină $ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title) .appendTo ("#imagini"); }); });
  73. 73. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz un posibil rezultat obținut (inclusiv trasarea pas-cu-pas a execuției codului JavaScript via extensia Firebug)
  74. 74. efectuarea de animații simple: $('h1').hide ('slow'); $('h1').slideDown ('fast'); $('h1').fadeOut (2000); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  75. 75. efectuarea de animații simple: acțiunile pot fi specificate și de programator $("#reclama").animate ({ width: "+=100px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 1500); Dr. Sabin Buragawww.purl.org/net/busaco jQuery
  76. 76. Dr. Sabin Buragawww.purl.org/net/busaco disponibilitatea unei suite largi de plug-in-uri http://plugins.jquery.com/
  77. 77. Dr. Sabin Buragawww.purl.org/net/busaco șabloane de proiectare pentru JavaScript
  78. 78. creaționale Builder, Prototype, Singleton structurale Adapter, Bridge, Decorator, Façade, Flyweight, Proxy comportamentale Command, Iterator, Mediator, Observer, State, Visitor Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare traditionale
  79. 79. MVC (Model-View-Controller) MVP (Model-View-Presenter) MVVM (Model View ViewModel) Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare MV* A. Osmani, Digesting JavaScript MVC (iunie 2012) http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/
  80. 80. MVC (Model-View-Controller) MVP (Model-View-Presenter) MVVM (Model View ViewModel) utilizare pragmatică via biblioteci/framework-uri precum Angular, Backbone, Ember, Spine, KnockoutJS Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare MV*
  81. 81. arhitectura unei aplicații Web ce recurge la Backbone.js http://backbonejs.org/ A. Osmani, Developing Backbone.js Applications, O’Reilly, 2013: http://addyosmani.github.io/backbone-fundamentals/ Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Events
  82. 82. var RouterStud = Backbone.Router.extend({ routes: { "": "index", // pagina principală – http://sit.info "students": "studenti", // e.g., http://sit.info/students "students/:id": "student" // e.g., http://sit.info/students/:69 }, index: function() { /* afișează pagina de start */ }, studenti: function() { /* listează toți studenții */ }, student: function(id) { /* afișează informații despre un student */ } }); Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Router – “leagă” URL-uri la rute (cod) după Jeff Carouth (2012)
  83. 83. Dr. Sabin Buragawww.purl.org/net/busaco Backbone.View – preia datele și generează codul HTML (eventual, recurgând la template-uri) pe baza DOM-ului; suplimentar, reacționează la evenimente var StudView = Backbone.View.extend ( { tagName: "li", // conținutul generat va fi inclus în <li> className: "stud", // numele clasei CSS utilizate events: { 'click': 'clic' }, // evenimente ce vor fi tratate (aici: click) render: function () { // generează conținutul this.$el.html (this.nume ()); return this; }, clic: function () { alert ('Ai dat click…'); }, nume: function () { // returnează numele studentului (via model) return this.model.toString (); } }); după Jeff Carouth (2012)
  84. 84. var Student = Backbone.Model.extend ( { // date despre un student urlRoot: '/students', toString: function() { return this.get ('nume') + " " + this.get ('an') + " " + this.get ('nota'); } }); Dr. Sabin Buragawww.purl.org/net/busaco Backbone.Model – conține informații sincronizate privind datele existente la nivel de server (backend) var StudView = Backbone.View.extend ( { // legătura dintre model & view initialize: function () { // evenimentul de modificare a datelor conduce la re-afișarea lor this.model.on ('change', this.render, this); } … }); după Jeff Carouth (2012)
  85. 85. Backbone.Collection – reprezintă o colecție de modele Dr. Sabin Buragawww.purl.org/net/busaco var Studenti = Backbone.Collection.extend ( { url: '/students', model: Student } ); var StudentiView = Backbone.View.extend ( { initialize: function () { this.collection = new Studenti (); this.collection.fetch ( { // preia date de la server via Ajax success: _.bind (function (raspuns, status, xhr) { this.render(); }, this) }); }, render: function () { this.collection.each (this.genereazaStudent, this); }, genereazaStudent: function (model) { var studView = new StudView ( { model: model }); this.$el.append (studView.el); } }); după Jeff Carouth (2012)
  86. 86. exemplificări: Dust.js – http://akdubya.github.io/dustjs/ Handlebars – http://handlebarsjs.com/ Mustache.js – http://github.com/janl/mustache.js Dr. Sabin Buragawww.purl.org/net/busaco Backbone permite folosirea oricărui sistem JavaScript de templating
  87. 87. aspect de interes: modularizarea codului (loose coupling) specificarea modulelor JS se realizează via limbajul AMD (Asynchronous Module Definition) Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
  88. 88. aspect de interes: modularizarea codului (loose coupling) specificarea modulelor JS se realizează via limbajul AMD (Asynchronous Module Definition) încărcare de cod folosind biblioteci specifice: curl.js, PINF, RequireJS,… Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
  89. 89. aspect de interes: modularizarea codului (loose coupling) alternativ, se poate recurge la CommonJS un format de declarare a modulelor și pachetelor reutilizabile la nivel de server Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare specifice
  90. 90. detalii și exemple – inclusiv pentru jQuery – în cartea A. Osmani, Learning JavaScript Design Patterns (2012) http://addyosmani.com/resources/essentialjsdesignpatterns/book/ Dr. Sabin Buragawww.purl.org/net/busaco Șabloane de proiectare în contextul JavaScript
  91. 91. framework-uri & biblioteci JavaScript exemplu notabil: jQuery Mobile instrumente independente de platformă Apache Cordova (PhoneGap) – http://cordova.apache.org/ Titanium – http://www.appcelerator.com/titanium/ Dr. Sabin Buragawww.purl.org/net/busaco JavaScript în contextul Web-ului mobil utilizând API-uri JavaScript oferite de platformă Amazon Fire OS, Microsoft Windows 8, Mozilla Firefox OS
  92. 92. definirea de macro-uri: Sweet.js securitate: ADsafe, FBJS, Gatekeeper etc. execuție asincronă a codului: Streamline.js, StratifiedJS,… extensii: ContextJS, JavaScript++, JS2, Objective-J limbaje inspirate de JS: Coco, Jack, Move, Zedscript etc. multe altele la http://altjs.org/ Dr. Sabin Buragawww.purl.org/net/busaco Alte facilități și extinderi
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco Care este viitorul limbajului JavaScript?
  94. 94. specificație în stadiu de ciornă (Rev 21, noiembrie 2013) Dr. Sabin Buragawww.purl.org/net/busaco EcmaScript 6 (ES6) wiki.ecmascript.org/doku.php?id=harmony:specification_drafts https://people.mozilla.org/~jorendorff/es6-draft.html o prezentare succintă: Angus Croll, ES6 Uncensored (noiembrie 2013) https://speakerdeck.com/anguscroll/es6-uncensored
  95. 95. definirea de clase – perspectiva paradigmei obiectuale parametri cu valori implicite și parametri multipli iteratori & generatori noi tipuri de date (e.g., map, set, proxy) modularizarea codului: module + importuri …și altele Dr. Sabin Buragawww.purl.org/net/busaco EcmaScript 6 (ES6)
  96. 96. vezi și proiectul Traceur – https://github.com/google/traceur-compiler (JavaScript.next-to-JavaScript-of-today compiler) Dr. Sabin Buragawww.purl.org/net/busaco suportul actual pentru ES6 oferit de navigatoarele Web http://kangax.github.io/es5-compat-table/es6/
  97. 97. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: suita de tehnologii HTML5 (prima parte)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×