Limbajul JavaScript: o prezentare generală

2,125 views
2,121 views

Published on

Most important aspects regarding the JavaScript programming language (a presentation available in Romanian language).

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
2,125
On SlideShare
0
From Embeds
0
Number of Embeds
742
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Limbajul JavaScript: o prezentare generală

  1. 1. Tehnologii Web Dr. Sabin Buragawww.purl.org/net/busaco Programare Web – suplimento prezentare generala a limbajului JavaScript
  2. 2. Dr. Sabin Buragawww.purl.org/net/busaco“Un arcas bun atinge tinta chiar inainte de a trage.” Ch’Ao Pu-Che
  3. 3. istoric Dr. Sabin Buragawww.purl.org/net/busacoInventat de Brendan Eich (1995) denumit initial LiveScript
  4. 4. istoric Dr. Sabin Buragawww.purl.org/net/busacoImplementat in premiera de browser-ul Netscape Navigator
  5. 5. istoric Dr. Sabin Buragawww.purl.org/net/busacoAdaptat de Microsoft: JScript (1996)
  6. 6. istoric Dr. Sabin Buragawww.purl.org/net/busaco Standardizat in 1997 de ECMAEuropean Computer Manufacturers Association ECMAScript ECMA-262 www.ecma-international.org
  7. 7. istoric Dr. Sabin Buragawww.purl.org/net/busaco Standardizat in 1997 de ECMAEuropean Computer Manufacturers Association ECMAScript versiunea standardizata actuala: 5.1 (iunie 2011) versiunea in lucru: 6.0 (în curând)www.ecma-international.org/publications/standards/Ecma-262.htm
  8. 8. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoLimbaj de tip script (interpretat)
  9. 9. caracteristici Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat)destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite de un anumit sistem
  10. 10. caracteristici Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat)nu necesita intrari/iesiri in mod implicit
  11. 11. Dr. Sabin Buragawww.purl.org/net/busacoCum putem executa programele JavaScript?
  12. 12. caracteristici Dr. Sabin Buragawww.purl.org/net/busaco Mediu de executie (host-environment) navigator Webpermite rularea de aplicatii Web la nivelul unei platforme (un sistem de operare) desktop (e.g., Windows 8) mobil (Android, iOS, WP7, WP8) …
  13. 13. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) navigator Web “injectarea” de cod JavaScriptin documentele (X)HTML via elementul <script>
  14. 14. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) navigator Web “injectarea” de cod JavaScriptin documentele (X)HTML via elementul <script> cod extern vs. cod inclus in pagina Web
  15. 15. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) platforma de dezvoltare a aplicatiilor e.g., Flex/AIR
  16. 16. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) software de sine-statator Adobe Creative Suite, UltraEdit etc.
  17. 17. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) procesor (engine) independent exemplificare: Yahoo! Widget Engine
  18. 18. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) componente ale sistemului de operare Dashboard – Mac OS X Sidebar – Windows Vista/7
  19. 19. caracteristici Dr. Sabin Buragawww.purl.org/net/busacoMediu de executie (host-environment) server Web exemplu tipic: node.js
  20. 20. caracteristici: sintaxa Dr. Sabin Buragawww.purl.org/net/busaco Cuvinte rezervate: break else new var case finally return void catchfor switch while continue function this with default if throw delete in try do instanceof typeof
  21. 21. caracteristici: sintaxa Dr. Sabin Buragawww.purl.org/net/busaco 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
  22. 22. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Number reprezentare in dubla precizie stocare pe 64 biti
  23. 23. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco String secvente de caractere Unicode fiecare caracter ocupa 16 biti
  24. 24. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Booleansecvente ce se pot evalua ca fiind true/false
  25. 25. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Object Function Array Date RegExp si altele
  26. 26. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Null semnifica “nici o valoare”
  27. 27. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Undefinedare semnificatia “nici o valoare asignata inca”
  28. 28. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Nu exista valori intregi
  29. 29. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Nu exista valori intregiconvertirea unui sir in numar: parseInt () parseInt ("123")  123 parseInt ("11", 2)  3 indica baza de numeratie
  30. 30. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busacoOperatii avansate cu numere se pot realiza via obiectul predefinit Math
  31. 31. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busacoOperatii avansate cu numere se pot realiza via obiectul predefinit Math constante predefinite: Math.PI Math.E Math.LN10 etc.
  32. 32. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Operatii avansate cu numere se pot realiza via obiectul predefinit Math metode:Math.abs(x) Math.ceil(x) Math.cos(x) Math.exp(x) Math.floor(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) etc.
  33. 33. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco“Valoarea” NaN (“not a number”) parseInt ("Salut")  NaN isNaN (NaN + 3)  true
  34. 34. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Valori speciale: Infinity –Infinity
  35. 35. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busacoUn caracter reprezinta un sir de lungime 1
  36. 36. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Sirurile sunt obiecte "Salut".length  5
  37. 37. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Metode pentru siruri: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.
  38. 38. caracteristici: tipuri de date Dr. Sabin Buragawww.purl.org/net/busaco Valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false !!234  true
  39. 39. caracteristici: variabile Dr. Sabin Buragawww.purl.org/net/busaco Variabilele se declara cu var var marime; var numeAnimal = "Tux";variabilele declarate fara valori asignate, se considera undefined
  40. 40. caracteristici: variabile Dr. Sabin Buragawww.purl.org/net/busaco Daca nu se foloseste var,atunci variabila este considerata globala de evitat asa ceva!
  41. 41. caracteristici: variabile Dr. Sabin Buragawww.purl.org/net/busacoValorile sunt “legate” tardiv la variabile (late binding)
  42. 42. caracteristici: variabile Dr. Sabin Buragawww.purl.org/net/busacoMai nou, exista posibilitatea marginiriidomeniului de vizibilitate (scope) via let var x = 5; var y = 0; console.log (let (x = x + 10, y = 12) x + y); // 27 console.log (x + y); // 5
  43. 43. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busaco Pentru numere: + – * / % De asignare: += –= *= /= %= Incrementare & decrementare: ++ – –Concatenare de siruri: "Java" + "Script"  "JavaScript"
  44. 44. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busacoConversia tipurilor se face “din zbor” "3" + 4 + 5  345 3 + 4 + "5"  75 adaugând un sir vid la o expresie, o convertim pe aceasta la string
  45. 45. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busacoComparatii: < > <= >= (numere & siruri) egalitatea se testeaza cu == si != 1 == true  true
  46. 46. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busacoComparatii: < > <= >= (numere & siruri) egalitatea se testeaza cu == si != 1 == true  true a se folosi: 1 === true  false inhiba conversia tipurilor de date
  47. 47. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busacoAflarea tipului unei expresii: operatorul typeof typeof "Tux"  string
  48. 48. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busaco Operatorii logici && si || var nume = unNume || "Implicit";
  49. 49. caracteristici: operatori Dr. Sabin Buragawww.purl.org/net/busaco Operatorul de test ? :var prezenta = (studenti > 33) ? "Prea multi" : "Cam putini…";
  50. 50. caracteristici: control Dr. Sabin Buragawww.purl.org/net/busaco Testare: if … else, switchpentru switch, sunt permise expresii la fiecare case (testarea se realizeaza cu operatorul ===)switch (2 + 3) { /* sunt permise expresii */ case 4 + 1 : egalitate (); break; default : absurd (); // nu se apeleaza niciodata}
  51. 51. caracteristici: control Dr. Sabin Buragawww.purl.org/net/busaco Ciclare: while, do … while, fordo { var nume = preiaNume ();} while (nume != "");for (var contor = 0; contor < 33; contor++) { // de 33 de ori…}
  52. 52. caracteristici: control Dr. Sabin Buragawww.purl.org/net/busaco Exceptii: try … catch … finallytry { // Linii "periculoase" ce pot cauza exceptii} catch (eroare) { // Linii executate la aparitia unei/unor exceptii} finally { // Linii care se vor executa la final}
  53. 53. caracteristici: control Dr. Sabin Buragawww.purl.org/net/busaco Exceptii: try … catch … finallytry { // Linii "periculoase" ce pot cauza exceptii} catch (eroare) { // Linii executate la aparitia unei/unor exceptii} finally { // Linii care se vor executa la final} emiterea unei exceptii: throw throw new Error ("O eroare de-a noastra!...");
  54. 54. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Perechi nume—valoare
  55. 55. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Perechi nume—valoare tabele de dispersie (hash) in C/C++tablouri asociative in Perl, PHP sau Ruby HashMaps in Java
  56. 56. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Perechi nume—valoarenumele este desemnat de un sir de caractere valoarea poate fi de orice tip
  57. 57. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Obiect  colectie de proprietati, avand mai multe atributeproprietatile pot contine alte obiecte, valori primitive sau metode
  58. 58. caracteristici: obiecte predefinite Dr. Sabin Buragawww.purl.org/net/busaco Global Object Function Array String Boolean Number Math Date Regex
  59. 59. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Create prin intermediul operatorului new:var ob = new Object();var ob = { }; // echivalent cu linia anterioara
  60. 60. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Create prin intermediul operatorului new:var ob = new Object();var ob = { }; // echivalent cu linia anterioara se prefera aceasta sintaxa
  61. 61. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busacoAccesarea proprietatilor – operatorul . ob.nume = "Tux"; var nume = ob.nume;
  62. 62. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busacoAccesarea proprietatilor: ob.nume = "Tux"; var nume = ob.nume; echivalent cu: ob["nume"] = "Tux"; var nume = ob["nume"];
  63. 63. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Declarare + asignare:var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 }}
  64. 64. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Accesare: pinguin.proprietati.marime  17pinguin["proprietati"]["culoare"]  verde
  65. 65. caracteristici: obiecte Dr. Sabin Buragawww.purl.org/net/busaco Iterarea proprietatilor – considerate chei:var pinguin = { nume: Tux, marime: 17 };for (var proprietate in pinguin) { afiseaza (proprietate + = + pinguin[proprietate]);}
  66. 66. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Tipuri speciale de obiecteproprietatile (cheile) sunt numere, nu siruri de caractere
  67. 67. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Se poate utiliza sintaxa de la obiecte:var animale = new Array ();animale[0] = "pinguin";animale[1] = "omida";animale[2] = "pterodactil";animale.length  3
  68. 68. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Se poate utiliza sintaxa de la obiecte:var animale = new Array ();animale[0] = "pinguin";animale[1] = "omida";animale[2] = "pterodactil";animale.length  3 notatie alternativa – preferata: var animale = ["pinguin", "omida", "pterodactil"];
  69. 69. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busacoTablourile pot avea “gauri” (sparse arrays):var animale = ["pinguin", "omida", "pterodactil"];animale[33] = "om";animale.length  34typeof animale[13]  undefined
  70. 70. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busacoTablourile pot avea “gauri” (sparse arrays):var animale = ["pinguin", "omida", "pterodactil"];animale[33] = "om";animale.length  34typeof animale[13]  undefined pentru a adauga elemente putem recurge la: animale[animale.length] = altAnimal;
  71. 71. caracteristici: tablouri – exemplu Dr. Sabin Buragawww.purl.org/net/busacovar vector = [ ];vector[0] = "zero";vector[new Date().getTime()] = "now";vector[3.14] = "pi";for (var elem in vector) { console.log ("vector[" + elem + "] = " + vector[elem] + ", typeof( " + elem +") == " + typeof (elem));} adaptare dupa John Kugelman (2009)
  72. 72. Dr. Sabin Buragawww.purl.org/net/busacorezultatul obtinut in urma rularii programului JavaScript via JS Bin
  73. 73. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Interari:for (var it = 0; it < animale.length; it++) { // de prelucrat animale[it]}
  74. 74. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Interari:for (var it = 0; it < animale.length; it++) { // de prelucrat animale[it]} de ce? // varianta mai bunafor (var it = 0, lung = animale.length; it < lung; it++) { // de prelucrat animale[it]}
  75. 75. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Elementele pot apartine unor tipuri de date eterogenevar animale = [33, "vierme", false, "gaga"];
  76. 76. caracteristici: tablouri Dr. Sabin Buragawww.purl.org/net/busaco Metode utile: a.toString() a.concat(item, ..) a.join(sep) a.pop() a.push(item, ..) a.reverse() a.shift() a.unshift([item]..)a.sort(cmpfn) a.splice(start, delcount, [item]..) etc.
  77. 77. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busaco Definite via functionfunction transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte;}
  78. 78. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busacoDaca nu este intors nimic in mod explicit, valoarea de retur se considera undefined
  79. 79. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busacoParametrii pot lipsi, fiind considerati undefined
  80. 80. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busacoPot fi transmise mai multe argumente, cele in surplus fiind ignorate transformaPixeliInPuncte (10, 7)  3000
  81. 81. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busaco Argumentele primite de o functie se acceseaza via tabloul arguments:function aduna () { var suma = 0; for (var i = 0, j = arguments.length; i < j; i++) { suma += arguments[i]; } return suma;}
  82. 82. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busaco Functiile sunt tot obiecteastfel, pot fi specificate functii anonime expresii lambda
  83. 83. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busaco Functiile sunt tot obiecte astfel, pot fi specificate functii anonime expresii lambdain acest sens, JavaScript este un limbaj functional
  84. 84. caracteristici: functii Dr. Sabin Buragawww.purl.org/net/busacovar 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; };
  85. 85. Dr. Sabin Buragawww.purl.org/net/busaco
  86. 86. Dr. Sabin Buragawww.purl.org/net/busacoprecizati ce efect vor avea liniile de cod urmatoare: console.log ( typeof (media) ); console.log ( media() );
  87. 87. Dr. Sabin Buragawww.purl.org/net/busaco variabila media este de tip functionapelul media() intoarce valoarea NaN
  88. 88. functii recursive in JavaScript/* determina numarul caracterelor din nodurile text Dr. Sabin Buragawww.purl.org/net/busaco ale arborelui DOM-ului asociat unui document */function numaraCaractereDinNoduriText (element) { if (element.nodeType == 3) { // nod text (din DOM) return element.nodeValue.length; } var contor = 0; // recursiv, numaram caracterele fiecarui nod copil // al arborelui DOM cu radacina ‘element’ for (var it = 0, copil; copil = element.childNodes[it]; it++) { contor += numaraCaractereDinNoduriText (copil); } vezi cele return contor; discutate la DOM}
  89. 89. Dr. Sabin Buragawww.purl.org/net/busaco // varianta folosind functii anonimevar nrCaractDoc = (function (element) { if (element.nodeType == 3) { // nod text return element.nodeValue.length; } var contor = 0; for (var it = 0, copil; copil = element.childNodes[it]; it++) { contor += arguments.callee (copil); } return contor; furnizeaza care-i functia apelanta}) (xml.root);
  90. 90. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco Exemplificare: dorim sa procesam – via functii – caracteristici ale unor animale
  91. 91. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busacofunction creeazaAnimal (nume, marime) { return { nume: nume, marime: marime }}function oferaNume (animal) { return animal.nume;}function oferaMarime (animal) { return animal.marime;}
  92. 92. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busacofunction creeazaAnimal (nume, marime) { return { nume: nume, marime: marime }}function oferaNume (animal) { return animal.nume;}function oferaMarime (animal) { return animal.marime;} var tux = creeazaAnimal ("Tux", 17); oferaMarime (tux)  17
  93. 93. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco O “clasa” referitoare la animale:function creeazaAnimal (nume, marime) { return { nume: nume, // date-membre marime: marime, oferaNume: function () { // metoda return animal.nume; }, oferaMarime: function () { // metoda return animal.marime; }}
  94. 94. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco Apelarea metodelor definite: var tux = creeazaAnimal ("Tux", 17); tux.oferaMarime()  17
  95. 95. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco Apelind insa o functie fara notatia cu “.”, nu obtinem rezultatul scontat: var marimea = tux.oferaMarimea; oferaMarimea ()  undefined
  96. 96. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco Apelind insa o functie fara notatia cu “.”, nu obtinem rezultatul scontat: var marimea = tux.oferaMarimea; oferaMarimea ()  undefinedobiectul curent (“this”) este setat ca fiind obiectul global (in browser, reprezinta fereastra curenta in care este redat documentul: this  window)
  97. 97. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busacofunction Animal (nume, marime) { this.nume = nume; // date-membre this.marime = marime; this.oferaNume = function () { // metoda return this.nume; }; this.oferaMarime = function () { // metoda return this.marime; };} creational pattern
  98. 98. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco clase – utilizarea constructorilorfunction Animal (nume, marime) { this.nume = nume; // date-membre this.marime = marime; this.oferaNume = function () { // metoda return this.nume; }; this.oferaMarime = function () { // metoda return this.marime; };}
  99. 99. caracteristici: de la functii la clase Dr. Sabin Buragawww.purl.org/net/busaco clase – utilizarea constructorilorfunction Animal (nume, marime) { this.nume = nume; // date-membre this.marime = marime; this.oferaNume = function () { // metoda return this.nume; }; this.oferaMarime = function () { // metoda return this.marime; };} var tux = new Animal ("Tux", 17); // instantierea unui obiect
  100. 100. caracteristici: functii & obiecte Dr. Sabin Buragawww.purl.org/net/busaco Operatorul new creaza un nou obiect vid siapeleaza functia specificata cu this setat pe acest obiect aceste functii se numesc constructori, trebuie apelate via new si, prin conventie, au numele scris cu litera mare
  101. 101. caracteristici: functii & obiecte Dr. Sabin Buragawww.purl.org/net/busacoMetodele pot fi declarate si in exteriorul constructoruluifunction oferaNumeAnimal () { return this.nume;}function Animal (nume, marime) { this.nume = nume; this.marime = marime; this.oferaNume = oferaNumeAnimal;}
  102. 102. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busacoStructura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
  103. 103. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busaco Structura unei clase poate fi extinsa ulterior, folosind proprietatea prototypeun prototip e o proprietate oferind o legatura ascunsa
  104. 104. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busacoStructura unei clase poate fi extinsa ulterior, folosind proprietatea prototype daca se incearca accesarea unui element inexistent in cadrul unui obiect dat,se va verifica lantul de prototipuri (prototype chain)
  105. 105. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busaco ObjB.prototype = new ObjA ( ); ObjAthis.initA ( ) ObjC.prototype = new ObjB ( ); ObjB this.initB ( ) ObjC var test = new objC ( ) this.initC ( ) test.initA ( ); dupa Subramanyan Murali, “JavaScript Design Patterns”, 2008
  106. 106. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busacofunction Animal (nume, marime) { // definitie initiala this.nume = nume; this.marime = marime;}Animal.prototype.oferaNume = function() { return this.nume;};Animal.prototype.oferaMarime = function() { return this.marime;};
  107. 107. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busaco Pentru a cunoaste tipul unui obiect(pe baza constructorului si a ierarhiei de prototipuri) se foloseste operatorul instanceof
  108. 108. caracteristici: prototipuri Dr. Sabin Buragawww.purl.org/net/busacovar marimi = [17, 20, 7, 14];marimi instanceof Array  truemarimi instanceof Object  truemarimi instanceof String  falsevar tux = new Animal ("Tux", 17);tux instanceof Object  truetux instanceof Array  false
  109. 109. caracteristici: extinderea claselor Dr. Sabin Buragawww.purl.org/net/busacoAdaugarea unei metode se realizeaza via prototype Animal.prototype.oferaNumeMare = function () { return this.nume.toUpperCase (); }; tux.oferaNumeMare ()  "TUX"
  110. 110. caracteristici: extinderea claselor Dr. Sabin Buragawww.purl.org/net/busaco Pot fi extinse si obiectele predefinite: // adaugam o metoda obiectului StringString.prototype.inverseaza = function () { var inv = ; for (var iter = this.length - 1; iter >= 0; iter--) { // inversam sirul… inv += this[iter]; } return inv;};"Web".inverseaza ()  "beW"
  111. 111. caracteristici: extinderea claselor Dr. Sabin Buragawww.purl.org/net/busacoCel mai general prototype este cel al lui ObjectUna dintre metodele disponibile este toString() care poate fi supra-scrisa (over-ride)
  112. 112. caracteristici: extinderea claselor Dr. Sabin Buragawww.purl.org/net/busacovar tux = new Animal ("Tux", 17);tux.toString ()  [object Object]Animal.prototype.toString = function () { return <animal> + this.oferaNume () + </animal>;};tux.toString ()  "<animal>Tux</animal>"
  113. 113. Dr. Sabin Buragawww.purl.org/net/busaco
  114. 114. caracteristici: extinderea claselor Dr. Sabin Buragawww.purl.org/net/busaco Atentie la pericole!de exemplu, comportamentul diferit al constructiei for (var proprietate in obiect)
  115. 115. caracteristici: functii de nivel inalt Dr. Sabin Buragawww.purl.org/net/busacoDeoarece o functie reprezinta un obiect, poate fi: stocata intr-o variabila pasata unei alte functii intoarsa de o functie – fiind argument pentru return
  116. 116. caracteristici: functii de nivel inalt Dr. Sabin Buragawww.purl.org/net/busacoDorim sa calculam greutatea unui animal, dupa formula greutate = marime * 33 varianta clasica:var marimi = [17, 20, 7, 14];var greutati = [ ];for (var contor = 0; contor < marimi.length; contor++) { greutati[contor] = marimi[contor] * 33;}
  117. 117. Varianta imbunatatita – mai generala:function genereazaTablouGreutati (tablou, calcul) { Dr. Sabin Buragawww.purl.org/net/busaco var rezultat = [ ]; for (var contor = 0; contor < tablou.length; contor++) { rezultat[contor] = calcul (tablou[contor]); } return rezultat;}function calculGreutate (marime) { return marime * 33;}var greutati = genereazaTablouGreutati (marimi, calculGreutate); referim functia ce va realiza calculul
  118. 118. calcul e variabila Varianta imbunatatita – mai generala: de tip functiefunction genereazaTablouGreutati (tablou, calcul) { Dr. Sabin Buragawww.purl.org/net/busaco var rezultat = [ ]; for (var contor = 0; contor < tablou.length; contor++) { rezultat[contor] = calcul (tablou[contor]); } fiind functie, return rezultat; se poate apela}function calculGreutate (marime) { return marime * 33;}var greutati = genereazaTablouGreutati (marimi, calculGreutate);
  119. 119. Dr. Sabin Buragawww.purl.org/net/busaco
  120. 120. caracteristici: incapsulare Dr. Sabin Buragawww.purl.org/net/busaco JavaScript ofera un singur spatiu de nume, la nivel globalconflicte privind denumirea functiilor/variabilelor specificate de programe diferite, concepute de mai multi dezvoltatori
  121. 121. caracteristici: incapsulare Dr. Sabin Buragawww.purl.org/net/busacoNu trebuie afectat spatiul de nume global, pastrându-se codul-sursa la nivel privat
  122. 122. caracteristici: incapsulare Dr. Sabin Buragawww.purl.org/net/busaco Codul poate fi complet încapsulat via functii anonimecare “pastreaza” constructiile la nivel privat
  123. 123. caracteristici: closures Dr. Sabin Buragawww.purl.org/net/busacoDeclararea imbricata – ca expresii de tip functie – a functiilor anonime are denumirea closures https://developer.mozilla.org/en/JavaScript/Guide/Closures
  124. 124. caracteristici: closures Dr. Sabin Buragawww.purl.org/net/busaco// specificarea unei expresii de tip functie( function () { // variabilele & functiile vor fi vizibile doar aici // variabilele globale pot fi accesate} ( ) );
  125. 125. var cod = (function () { function faCeva (x, y) { var n = 0; // variabila privata Dr. Sabin Buragawww.purl.org/net/busaco // ... function start (x) { } // ... poate accesa n return { // si functia faCeva // sunt publice doar } // functiile start si faCeva function faAia (param) { start: start, // ... invizibila din afara faCeva: faCeva} } }) (); cod.start (x); // apelam start
  126. 126. var cod = (function () { function faCeva (x, y) { var n = 0; // variabila privata Dr. Sabin Buragawww.purl.org/net/busaco // ... function start (x) { } // ... poate accesa n return { // si functia faCeva // sunt publice doar } // functiile start si faCeva function faAia (param) { start: start, // ... invizibila din afara faCeva: faCeva} } }) (); cod.start (x); // apelam start via closures, simulam metodele private modularizarea codului (module pattern)
  127. 127. var makeCounter = function () { var contorPrivat = 0; // un contor de valori (initial, zero) function changeBy (val) { // functie privata contorPrivat += val; // ce modifica valoarea contorului Dr. Sabin Buragawww.purl.org/net/busaco } return { // functii publice (expuse) increment: function() { changeBy (1); }, decrement: function() { changeBy (-1); }, console.log (contor1.value ()); /* 0 */ value: function() { contor1.increment (); return contorPrivat; contor1.increment (); } }; console.log (contor1.value ()); /* 2 */}; contor1.decrement (); console.log (contor1.value ()); /* 1 */ console.log (contor2.value ()); /* 0 */
  128. 128. Dr. Sabin Buragawww.purl.org/net/busaco
  129. 129. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoTotul in JavaScript este obiect – chiar si functiile
  130. 130. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoOrice obiect este intotdeauna mutabil (poate fi alterat oricând) toate proprietatile si metodelesunt disponibile oriunde (public scope)
  131. 131. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoNu exista vizibilitate la nivel de bloc de cod (block scope),ci doar la nivel global ori la nivel de functie
  132. 132. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoFunctiile ascund orice e definit in interiorul lor
  133. 133. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoOperatorul “.” este echivalent cu de-referentierea: ob.prop === ob["prop"]
  134. 134. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoOperatorul new creeaza obiecte apartinând clasei specificate de functia constructor
  135. 135. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoAccesorul this este relativ la contextul executiei, nu al declararii
  136. 136. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoAccesorul this este relativ la contextul executiei, nu al declararii Atentie la dependenta de mediul de executie!
  137. 137. de retinut! Dr. Sabin Buragawww.purl.org/net/busacoProprietatea prototype are valori modificabile
  138. 138. json Dr. Sabin Buragawww.purl.org/net/busacoJavaScript Object Notation http://json.org/
  139. 139. json Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Object Notationformat compact pentru interschimb de date intre aplicatii
  140. 140. json Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Object Notation datele pot fi specificatein termeni de obiecte & literali
  141. 141. json Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Object Notation{ nume: Tux, datele pot fi evaluate direct in JavaScript stoc: 33, model: [ candid, furios, vesel ]}
  142. 142. Dr. Sabin Buragawww.purl.org/net/busacoexemplu concret: raspuns JSON obtinut in urma unei interogari YQL
  143. 143. instrumente Dr. Sabin Buragawww.purl.org/net/busacoEditare de cod & dezvoltare de aplicatii Web Testare Documentare a codului Compresie Optimizare
  144. 144. instrumente: editare Dr. Sabin Buragawww.purl.org/net/busaco Pentru desktop: Aptana Studio, JS Development Tools (plug-in Eclipse), Sublime Text, Visual Studio (Express Edition),… Disponibile pe Web: Cloud9 IDE, JS Bin, JS Fiddle etc.unele ofera si partajarea codului-sursa cu alti dezvoltatori
  145. 145. instrumente: testare Dr. Sabin Buragawww.purl.org/net/busaco Verificare statica instrumente de referinta: JSLint JSHint
  146. 146. instrumente: testare Dr. Sabin Buragawww.purl.org/net/busacoSuport pentru unit testing exemplificari: Jasmine JSTest.NET QUnit Sinon.js Tyrtle
  147. 147. instrumente: documentarea codului Dr. Sabin Buragawww.purl.org/net/busacoStandarde 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
  148. 148. instrumente: documentarea codului Dr. Sabin Buragawww.purl.org/net/busacoSoftware pentru documentarea programelor JSDoc Toolkit jGrouseDoc YUIDoc
  149. 149. instrumente: compresie de cod Dr. Sabin Buragawww.purl.org/net/busaco Instrumente privind compresia/minimizarea Online Javascript Compression Tool YUI Compressor Scriptalizer detalii in articolul A. Powell,Understanding Compression and Minification (mai 2012):www.aaron-powell.com/javascript/understanding-compression-and-minification
  150. 150. instrumente: optimizare javascript Dr. Sabin Buragawww.purl.org/net/busacoTransformarea codului JS intr-unul optimizat exemplu de referinta: Closure Compiler https://developers.google.com/closure/
  151. 151. instrumente Dr. Sabin Buragawww.purl.org/net/busacoFacilitarea dezvoltarii de aplicatii Webla nivel de client similare celor desktop exemplificari notabile: Cappuccino – http://cappuccino.org/SproutCore – http://www.sproutcore.com/
  152. 152. instrumente Dr. Sabin Buragawww.purl.org/net/busacoAlte limbaje pentru dezvoltarea de aplicatii Web CoffeeScript (Jeremy Ashkenas, 2009) http://coffeescript.org/ TypeScript (Microsoft, 2012) http://www.typescriptlang.org/limbaje de programare care se compileaza in JavaScript
  153. 153. instrumente Dr. Sabin Buragawww.purl.org/net/busaco Portarea altor aplicatii in JavaScriptEmscripten – compilator LLVM generand cod JS (e.g., programe C/C++, Lua, Python, Ruby ce se pot compila in JavaScript) http://emscripten.org/
  154. 154. instrumente Dr. Sabin Buragawww.purl.org/net/busaco Portarea altor aplicatii in JavaScript JSIL – compilator care transforma aplicatiile .NETin programe JavaScript ruland independent de browser http://jsil.org/
  155. 155. ?Dr. Sabin Buragawww.purl.org/net/busaco

×