Un mini-tutorial JavaScript

1,012 views
883 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 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
1,012
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Un mini-tutorial JavaScript

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Dr. Sabin Buraga un mini-tutorial
  2. 2. Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995) MochaLiveScriptJavaScript
  3. 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. 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. 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. 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. 7. Mediu de execuție (host-environment) navigator Web Dr. Sabin Buragawww.purl.org/net/busaco
  8. 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. 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. 10. Dr. Sabin Buragawww.purl.org/net/busaco tehnologii Web disponibile (via JavaScript) la nivel de browser – http://platform.html5.org/
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) independent de navigatorul Web
  12. 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. 13. Dr. Sabin Buragawww.purl.org/net/busaco Câteva caracteristici importante?
  14. 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. 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. 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. 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. 18. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Boolean expresii ce se pot evalua ca fiind true/false
  19. 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. 20. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Null înseamnă „nicio valoare”
  21. 21. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Undefined are semnificația „nicio valoare asignată încă”
  22. 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. 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. 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. 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. 26. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Valori speciale: Infinity –Infinity
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Un caracter reprezintă un șir de lungime 1
  28. 28. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Șirurile sunt obiecte "Salut".length  5
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Perechi nume—valoare Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  42. 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. 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. 44. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiect  colecție de proprietăți, având mai multe atribute
  45. 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. 46. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiecte predefinite: Global Object Function Array String RegExp Boolean Number Math Date
  47. 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. 48. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume;
  49. 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. 50. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } }
  51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 69. Dr. Sabin Buragawww.purl.org/net/busaco metodele predefinite – e.g., toString () – pot fi suprascrise
  70. 70. JavaScript Object Notation http://json.org/ Dr. Sabin Buragawww.purl.org/net/busaco json
  71. 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. 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. 73. Dr. Sabin Buragawww.purl.org/net/busaco Cum rulează programele JavaScript în navigatorul Web?
  74. 74. Dr. Sabin Buragawww.purl.org/net/busaco Majoritatea programelor JavaScript rulează – sunt interpretate – în navigatorul Web via un script engine
  75. 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. 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. 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. 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. 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. 80. N-am putea recurge la biblioteci JS specifice? Dr. Sabin Buragawww.purl.org/net/busaco
  81. 81. Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JS: jster.net www.jsdb.io microjs.com
  82. 82. Dr. Sabin Buragawww.purl.org/net/busaco jQuery scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3
  83. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 97. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone metoda cea mai generală (low level) $.ajax (url, parametri);
  98. 98. Câteva exemple de interes? Dr. Sabin Buragawww.purl.org/net/busaco
  99. 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. 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. 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. 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. 103. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz un posibil rezultat – editarea & rularea codului via JSFiddle
  104. 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. 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. 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. 107. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz depanare cu Firebug sau cu instrumentele oferite de browser
  108. 108. Bun, aș dori să aprofundez… Dr. Sabin Buragawww.purl.org/net/busaco
  109. 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. 110. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Mult succes!

×