Your SlideShare is downloading. ×
Un mini-tutorial JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Un mini-tutorial JavaScript

643
views

Published on

Un mini-tutorial pentru începători (participanți la Școala de vară "Informatica la Castel", Macea, Arad, 2014) privitor la limbajul JavaScript, prezentând caracteristicile esențiale și maniera de …

Un mini-tutorial pentru începători (participanți la Școala de vară "Informatica la Castel", Macea, Arad, 2014) privitor la limbajul JavaScript, prezentând caracteristicile esențiale și maniera de rulare la nivel de client (navigator). Sunt incluse exemplificări bazate pe biblioteca jQuery. Acces la codul-sursă: http://jsfiddle.net/user/busaco/

A mini-tutorial for beginners (participants to "Computer Science at the Castel" Summer School, Macea, Arad, 2014) regarding main features of the JavaScript programming language for the front-end Web development. Several examples, using jQuery library, are also provided.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
643
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Dr. Sabin Buraga un mini-tutorial
  • 2. Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995) MochaLiveScriptJavaScript
  • 3. Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995) MochaLiveScriptJavaScript implementat în premieră de Netscape Navigator www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
  • 4. Dr. Sabin Buragawww.purl.org/net/busaco Standardizat în 1997 de ECMA European Computer Manufacturers Association ECMAScript ECMA-262 www.ecma-international.org/publications/standards/Ecma-262.htm referința de bază: https://developer.mozilla.org/JavaScript
  • 5. Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat) dinamic variabilele își pot schimba tipul pe parcursul rulării programului
  • 6. Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat) destinat să manipuleze, să automatizeze și să integreze funcționalitățile oferite de un anumit sistem
  • 7. Mediu de execuție (host-environment) navigator Web Dr. Sabin Buragawww.purl.org/net/busaco
  • 8. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) navigator Web permite rularea de aplicații Web la nivelul unei platforme (un sistem de operare)
  • 9. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) navigator Web permite rularea de aplicații Web la nivelul unei platforme (un sistem de operare) inclusiv pe dispozitive mobile: Android, iOS, Firefox OS, Fire OS (Kindle Fire),…
  • 10. Dr. Sabin Buragawww.purl.org/net/busaco tehnologii Web disponibile (via JavaScript) la nivel de browser – http://platform.html5.org/
  • 11. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) independent de navigatorul Web
  • 12. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) independent de navigatorul Web platforme de dezvoltare de aplicații distribuite: Node.js servere de baze de date – e.g., Apache CouchDB componente ale sistemului de operare aplicații de sine-stătătoare – e.g., Adobe Creative Suite
  • 13. Dr. Sabin Buragawww.purl.org/net/busaco Câteva caracteristici importante?
  • 14. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa 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
  • 15. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa 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
  • 16. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Number reprezentare în dublă precizie stocare pe 64 biți – standardul IEEE 754
  • 17. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date String secvențe de caractere Unicode fiecare caracter ocupă 16 biți (UTF-16)
  • 18. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Boolean expresii ce se pot evalua ca fiind true/false
  • 19. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Object aproape totul e considerat ca fiind obiect, inclusiv funcțiile
  • 20. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Null înseamnă „nicio valoare”
  • 21. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Undefined are semnificația „nicio valoare asignată încă”
  • 22. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Nu există valori întregi convertirea unui șir în număr: parseInt () parseInt ("123")  123 parseInt ("11", 2)  3 indică baza de numerație
  • 23. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Operații avansate cu numere se pot realiza via obiectul predefinit Math
  • 24. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Operații avansate cu numere se pot realiza via obiectul predefinit Math constante predefinite: Math.PI Math.E Math.LN10 etc. metode: Math.abs(x) Math.cos(x) Math.exp(x) Math.log(x) Math.max(x, ..) Math.min(x, ..) Math.pow(x, y) Math.random() Math.round(x) Math.sin(x) Math.sqrt(x) și altele
  • 25. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date „Valoarea” NaN (“not a number”) parseInt ("Salut")  NaN isNaN (NaN + 3)  true
  • 26. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Valori speciale: Infinity –Infinity
  • 27. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Un caracter reprezintă un șir de lungime 1
  • 28. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Șirurile sunt obiecte "Salut".length  5
  • 29. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Metode utile pentru procesarea șirurilor de caractere: s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..) s.indexOf(s1, start) s.match(regexp) s.replace(search, replace) s.slice(start, end) s.split(separator, limit) s.substring(start, end) s.toLowerCase() s.toUpperCase() etc.
  • 30. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false !!234  true
  • 31. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile Variabilele se declară cu var var marime; var numeAnimal = "Tux"; variabilele declarate fără valori asignate, se consideră undefined
  • 32. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile Dacă nu se folosește var, atunci variabila este considerată globală de evitat așa ceva!
  • 33. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Pentru numere: + – * / % De asignare: += –= *= /= %= Incrementare și decrementare: ++ – – Concatenare de șiruri: "Java" + "Script"  "JavaScript" Logici: && || ?:
  • 34. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Conversia tipurilor se face „din zbor” (dinamic) "3" + 4 + 5  345 3 + 4 + "5"  75 adăugând un șir vid la o expresie, o convertim pe aceasta la string
  • 35. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true
  • 36. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true a se folosi: 1 === true  false inhibă conversia tipurilor de date
  • 37. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Testare: if … else, switch pentru switch, sunt permise expresii la fiecare case (testarea se realizează cu operatorul ===) switch (2 + 3) { /* sunt permise expresii */ case 4 + 1 : egalitate (); break; default : absurd (); // nu se apelează niciodată }
  • 38. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Ciclare: while, do … while, for do { var nume = preiaNume (); } while (nume != ""); for (var contor = 0; contor < 33; contor++) { // de 33 de ori… }
  • 39. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Excepții: try … catch … finally try { // Linii "periculoase" ce pot cauza excepții } catch (eroare) { // Linii rulate la apariția unei/unor excepții } finally { // Linii care se vor executa la final }
  • 40. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Excepții: try … catch … finally try { // Linii "periculoase" ce pot cauza excepții } catch (eroare) { // Linii rulate la apariția unei/unor excepții } finally { // Linii care se vor executa la final } emiterea unei excepții: throw throw new Error ("O eroare de-a noastră...");
  • 41. Perechi nume—valoare Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  • 42. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Perechi nume—valoare tabele de dispersie (hash) în C/C++ tablouri asociative în Perl, PHP sau Ruby HashMaps în Java “everything except primitive values is an object”
  • 43. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Perechi nume—valoare numele este desemnat de un șir de caractere (i.e., expresie de tip String) valoarea poate fi de orice tip, inclusiv null sau undefined
  • 44. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiect  colecție de proprietăți, având mai multe atribute
  • 45. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiect  colecție de proprietăți, având mai multe atribute proprietățile pot conține alte obiecte, valori primitive sau metode
  • 46. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiecte predefinite: Global Object Function Array String RegExp Boolean Number Math Date
  • 47. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Create prin intermediul operatorului new: var ob = new Object (); var ob = { }; // echivalent cu linia anterioară se preferă această sintaxă
  • 48. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume;
  • 49. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume; echivalent cu: ob["nume"] = "Tux"; var nume = ob["nume"];
  • 50. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } }
  • 51. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } } accesare: pinguin.proprietati.marime  17 pinguin["proprietati"]["culoare"]  verde
  • 52. Dr. Sabin Buragawww.purl.org/net/busaco Iterarea proprietăților – considerate chei: var pinguin = { 'nume': 'Tux', 'marime': 17 }; for (var proprietate in pinguin) { afiseaza (proprietate + ' = ' + pinguin[proprietate]); } caracteristici: obiecte
  • 53. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Tipuri speciale de obiecte proprietățile (cheile) sunt numere, nu șiruri de caractere
  • 54. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Se poate utiliza sintaxa privitoare la obiecte: var animale = new Array (); animale[0] = "pinguin"; animale[1] = "urs"; animale[2] = "pterodactil"; animale.length  3
  • 55. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Se poate utiliza sintaxa privitoare la obiecte: var animale = new Array (); animale[0] = "pinguin"; animale[1] = "urs"; animale[2] = "pterodactil"; animale.length  3 notație alternativă – preferată: var animale = ["pinguin", "urs", "pterodactil"];
  • 56. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Elementele pot aparține unor tipuri de date eterogene var animale = [33, "vierme", false, "gaga"];
  • 57. Dr. Sabin Buragawww.purl.org/net/busaco Definite via function function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; } caracteristici: funcții
  • 58. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Dacă nu este întors nimic în mod explicit, valoarea de retur se consideră undefined
  • 59. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Parametrii de intrare pot lipsi, fiind considerați undefined Pot fi transmise mai multe argumente, cele în surplus fiind ignorate transformaPixeliInPuncte (10, 7)  3000
  • 60. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Funcțiile sunt tot obiecte astfel, pot fi specificate funcții anonime expresii lambda în acest sens, JavaScript este un limbaj funcțional
  • 61. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții var media = function () { // calculul mediei a N numere var suma = 0; for (var iter = 0, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; };
  • 62. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții var media = function () { // calculul mediei a N numere var suma = 0; for (var iter = 0, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; }; console.log ( media (9, 10, 7, 8, 7) )  8.2
  • 63. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții var media = function () { // calculul mediei a N numere var suma = 0; for (var iter = 0, variabilele declarate în funcție nu vor fi accesibile din exterior, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; }; fiind „închise”  funcție closure
  • 64. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase function Animal (nume, marime) { this.nume = nume; // date-membre this.marime = marime; this.oferaNume = function () { // metodă return this.nume; }; this.oferaMarime = function () { // metodă return this.marime; }; } clase – utilizarea constructorilor var tux = new Animal ("Tux", 17); // instanțierea unui obiect
  • 65. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții & obiecte Operatorul new creează un nou obiect vid și apelează funcția specificată cu this setat pe acest obiect aceste funcții se numesc constructori, trebuie apelate via new și, prin convenție, au numele scris cu literă mare
  • 66. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri Deoarece orice obiect deține în mod implicit proprietatea prototype, structura unei clase poate fi extinsă ulterior
  • 67. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri Deoarece orice obiect deține în mod implicit proprietatea prototype, structura unei clase poate fi extinsă ulterior un prototip e o proprietate oferind o legătură ascunsă către obiectul de care aparține
  • 68. Dr. Sabin Buragawww.purl.org/net/busaco function Animal (nume, marime) { // definiție inițială this.nume = nume; this.marime = marime; } // pe baza protipurilor, definim noi metode Animal.prototype.oferaNume = function () { return this.nume; }; Animal.prototype.oferaMarime = function () { return this.marime; }; // instanțiem un obiect de tip Animal var tux = new Animal ("Tux", 17);
  • 69. Dr. Sabin Buragawww.purl.org/net/busaco metodele predefinite – e.g., toString () – pot fi suprascrise
  • 70. JavaScript Object Notation http://json.org/ Dr. Sabin Buragawww.purl.org/net/busaco json
  • 71. Dr. Sabin Buragawww.purl.org/net/busaco json JavaScript Object Notation format compact pentru interschimb de date între aplicații biblioteci de procesare & alte resurse de interes: http://jsonauts.github.io/
  • 72. Dr. Sabin Buragawww.purl.org/net/busaco { 'nume': 'Tux', 'stoc': 33, 'model': [ 'candid', 'furios', 'vesel' ] } json datele pot fi evaluate direct în JavaScript
  • 73. Dr. Sabin Buragawww.purl.org/net/busaco Cum rulează programele JavaScript în navigatorul Web?
  • 74. Dr. Sabin Buragawww.purl.org/net/busaco Majoritatea programelor JavaScript rulează – sunt interpretate – în navigatorul Web via un script engine
  • 75. Dr. Sabin Buragawww.purl.org/net/busaco Majoritatea programelor JavaScript rulează – sunt interpretate – în navigatorul Web via un script engine SpiderMonkey, IonMonkey, Rhino (Mozilla) V8 (Google, Opera, Node.js)
  • 76. Dr. Sabin Buragawww.purl.org/net/busaco Cod JavaScript intern vs. preluat dintr-un fișier extern <body> … <script type="text/javascript"> alert ("Salut, lume!"); </script> </body> <script type="text/javascript" src="http://salutari.info/salut.js"> </script>
  • 77. Dr. Sabin Buragawww.purl.org/net/busaco Un program JavaScript are acces la arborele DOM (Document Object Model) corespunzător documentului HTML specificații ale Consorțiului Web www.w3.org/DOM/DOMTR
  • 78. Dr. Sabin Buragawww.purl.org/net/busaco <!DOCTYPE html> <html> <body> <p>Tehnologii Web</p> <div> <img src="web.png"/> </div> </body> </html> HTML HtmlElement HTML BodyElement HTML ParagraphElement Text HTML DivElement HTML ImageElement
  • 79. Dr. Sabin Buragawww.purl.org/net/busaco De asemenea, programele JavaScript au acces la diverse obiecte oferite de mediul de execuție pus la dispoziție de browser e.g., informații privind contextul rulării (caracteristici ale navigatorului, latența rețelei), istoricul navigării, fereastra de redare a conținutului, transfer (a)sincron de date,…
  • 80. N-am putea recurge la biblioteci JS specifice? Dr. Sabin Buragawww.purl.org/net/busaco
  • 81. Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JS: jster.net www.jsdb.io microjs.com
  • 82. Dr. Sabin Buragawww.purl.org/net/busaco jQuery scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3
  • 83. Dr. Sabin Buragawww.purl.org/net/busaco jQuery concis, dar extensibil, ușor de folosit nu intră în conflict cu alte biblioteci JavaScript disponibil open source existența unui număr mare de extensii (plug-ins)
  • 84. Dr. Sabin Buragawww.purl.org/net/busaco jQuery detalii tehnice + documentații: http://jquery.com/ http://learn.jquery.com/ http://jqfundamentals.com/ http://dochub.io/#jquery/
  • 85. Dr. Sabin Buragawww.purl.org/net/busaco jQuery filosofie inițială: focalizarea asupra interacțiunii dintre codul JavaScript și constructiile HTML aproape fiecare operație urmează șablonul: „găsește ceva” + „execută ceva cu ceea ce-ai găsit”
  • 86. Dr. Sabin Buragawww.purl.org/net/busaco jQuery accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $()
  • 87. Dr. Sabin Buragawww.purl.org/net/busaco jQuery 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)
  • 88. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').size () mărimea colecției obținute
  • 89. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').each (function (div) { … }) iterare via o funcție – aici: anonimă
  • 90. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').html ('<em>Design Jam 2014</em> la FII') inserare de construcții HTML
  • 91. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut
  • 92. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('a.menu').addClass ('vizitat') adăugarea unei clase CSS
  • 93. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('p:odd').css ('color', 'blue') poziție impară modificarea unor proprietăți CSS
  • 94. 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) { $(this).css({ backgroundColor: 'yellow' }); ev.preventDefault (); // previne comportamentul implicit }); $('a:first').click ();
  • 95. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone Ajax (Asynchronous JavaScript And XML) încărcare asincronă a unui document $('div#stiri').load ('stiri.html');
  • 96. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone preluare răspuns în format JSON $.getJSON (url, parametri, funcție-prelucrând-răspunsul);
  • 97. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone metoda cea mai generală (low level) $.ajax (url, parametri);
  • 98. Câteva exemple de interes? Dr. Sabin Buragawww.purl.org/net/busaco
  • 99. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit cod-sursă disponibil la http://jsfiddle.net/busaco/4d2tmc6b/
  • 100. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz 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/
  • 101. Dr. Sabin Buragawww.purl.org/net/busaco Forma generală a răspunsului JSON transmis de Flickr: { "title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2013-12-06T13:33:07Z", "generator" : "http://www.flickr.com/", "items" : [ { interactiune web: ajax – studiu de caz "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": "...", "published" : "2012-05-26T13:49:08Z", "author" : "...", "author_id" : "...", "tags" : "iasi romania informatica FII ..." } ] }
  • 102. // 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, 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) { Dr. Sabin Buragawww.purl.org/net/busaco // 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"); }); }); studiu de caz
  • 103. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz un posibil rezultat – editarea & rularea codului via JSFiddle
  • 104. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Crearea unui joc simplu cu 2 zaruri „arunci” zarurile și câștigi 10 tucși numai dacă suma punctelor obținute este mai mare de 7 (uneori, pot apărea surprize…) cod-sursă disponibil la http://jsfiddle.net/busaco/r8L2kp30/
  • 105. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Managementul unui zar – „clasa” Zar proprietate: valoareZar metode: obtineZar () și aruncaZar () obține un număr preluat de la random.org sau local cu Math.round (Math.random () * 5) + 1
  • 106. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Implementarea jocului – „clasa” Joc proprietăți: scorCurent, zar1, zar2 metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize () probabilitate 20% ca Tux să fure banii probabilitate 15% ca Pingu să ofere 33 de tucși
  • 107. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz depanare cu Firebug sau cu instrumentele oferite de browser
  • 108. Bun, aș dori să aprofundez… Dr. Sabin Buragawww.purl.org/net/busaco
  • 109. Dr. Sabin Buragawww.purl.org/net/busaco resurse S. Buraga, Dezvoltarea aplicațiilor Web la nivel de client, FII, UAIC, 2014: www.info.uaic.ro/~busaco/teach/courses/cliw/ S. Buraga, Front-end Web Developer Resources, 2014 http://tinyurl.com/cliw-devel JSbooks – the best free JavaScript resources http://jsbooks.revolunet.com/ JavaScript Instant Documentation http://dochub.io/#javascript/
  • 110. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Mult succes!

×