Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:angularjs:prerequis [2014/12/28 12:25] – [Déclarations] jcheron
+++ slam4:richclient:angularjs:prerequis [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 53: / Ligne 53: @@
 ==== Portée et fonctions ====
+Il est impossible d'accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction.\\
+En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction "parente" et à toute autre variable accessible depuis la fonction "parente".
+<sxh javascript>
+// Les variables suivantes sont globales
+var num1 = 20,
+    num2 = 3,
+    nom = "Messi";
+// Cette fonction est définie dans la portée globale
+function multiplier() {
+  return num1 * num2;
+}
+multiplier(); // Renvoie 60
+// Un exemple de fonction imbriquée
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+  function ajoute() {
+    return nom + " a marqué " + (num1 + num2);
+  }
+  return ajoute();
+}
+getScore(); // Renvoie "Messi a marqué 5"
+</sxh>
+==== Closure ====
+Une closure permet de stocker une variable locale utilisée par une fonction
+<sxh javascript;gutter:false>
+(function() {
+})();
+</sxh>
+**Exemple :**
+La variable locale nom (Mozilla) est stockée dans la variable maFonction, correspondant à créerFonction()
+<sxh javascript>
+function créerFonction() {
+  var nom = "Mozilla";
+  function afficheNom() {
+    alert(nom);
+  }
+  return afficheNom;
+}
+var maFonction = créerFonction();
+maFonction();
+</sxh>
+==== Classe et encapsulation ====
+Il est possible de définir une fonction publique accédant à des fonctions et des variables privées en utilisant des closures. Cette façon de procéder est également connue comme le patron de conception module, et permet de créer des classes :
+<sxh javascript;title:Une classe pour créer des compteurs>
+var creerCompteur = function() {
+  var compteurPrivate = 0;
+  function changeValeur(val) {
+    compteurPrivate += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrivate;
+    }
+  };
+};
+</sxh>
+**Utilisation de la classe creerCompteur :**
+<sxh javascript;title:Instanciations de compteurs>
+var compteur1 = creerCompteur();
+var compteur2 = creerCompteur();
+alert(compteur1.valeur()); /* Affiche 0 */
+compteur1.increment();
+compteur1.increment();
+alert(compteur1.valeur()); /* Affiche 2 */
+compteur1.decrement();
+alert(compteur1.valeur()); /* Affiche 1 */
+alert(compteur2.valeur()); /* Affiche 0 */
+</sxh>
+==== Prototype ====
+Mais les closures sont coûteuse (en mémoire et temps d'exécution), il est donc préférable d'implémenter l'équivalent en utilisant le prototype :\\
+Par contre, dans ce cas, la variable compteur est redevenue publique.
+<sxh javascript>
+function creerCompteur() {
+  this.compteur= 0;
+}
+creerCompteur.prototype = {
+  decrement: function() {
+    this.compteur--;
+  },
+  increment: function() {
+    this.compteur++;
+  },
+  valeur: function() {
+    return this.compteur;
+  }
+};
+</sxh>
+Utilisation de la classe et instanciation d'un objet avec l'opérateur **new** :
+<sxh javascript>
+	var compteur=new creerCompteur();
+	compteur.increment();
+	alert(compteur.compteur);//Affiche 1 -> accès direct à compteur possible car il est public
+</sxh>
 ===== JSON =====
 [[http://fr.wikipedia.org/wiki/JavaScript_Object_Notation|JSON]] : Javascript Object Notation, utilisé par un grand nombre de langages de programmation, est un format de données textuelles permettant la sérialisation de tableaux, d'objets, de données.
@@ Ligne 106: / Ligne 220: @@
     }
 ]
+</sxh>
+===== Tableaux =====
+<sxh javascript>
+var values=[{"code":"AA"},{"code":"BB"}];
+</sxh>
+==== Parcours classique ====
+<sxh javascript>
+for(var i=0;i<values.length;i++){
+   console.log( values[i].code);
+}
+</sxh>
+==== foreach ====
+<sxh javascript>
+values.forEach(function(element) {
+  console.log(element.code);
+});
 </sxh>