SystĂšmesinformatiques qui tombent dans l'Internet des Objets (IoT) incluent tout de chez eux systĂšmes d'alarme Ă  la fabrication d'Ă©quipements pour les cafetiĂšres et Ă  peu prĂšs n'importe quoi entre les deux. MĂȘme les automobiles peuvent maintenant ĂȘtre piratĂ©es comme vous avez probablement entendu parler dans le piratage trĂšs mĂ©diatisĂ© contre un Jeep Cherokee en 2015.
Si indĂ©niablement l'Internet des Objets retient l'attention des entreprises, c'est aussi parce que le consommateur est attirĂ© par les objets connectĂ©s. Mais ces deniers forcent l'inquiĂ©tude, en particulier sur le sujet sensible de la vie privĂ©e et des donnĂ©es personnelles
 Les objets connectĂ©s attirent l'attention et les mĂ©dias se font le relai d'un mouvement liĂ© Ă  l'Internet des Objets IoT qui n'a pas fini de faire parler de lui. Ce n'est donc pas une surprise si 7 Français sur 10 68% se disent intĂ©ressĂ©s, ce qui se traduit par l'envie de possĂ©der au quotidien des objets connectĂ©s. On notera au passage que les Français sont lĂ©gĂšrement moins attirĂ©s que la moyenne mondiale, qui est de 74 %. Mais le retard technologique semble ĂȘtre une pratique courante dans nos contrĂ©es, et en contre partie le rattrapage dans le temps est un sport national. Quels produits connectĂ©s ? Pas de surprise en la matiĂšre, les produits les plus mĂ©diatiques sont les plus attendus. Une tendance Ă©merge, cependant, l'accĂšs distant aux informations de consommation de certains produits, dont des produits d'usage courant, stocks en cours, dates d'expiration, ou encore effet mĂ©tĂ©o. 79 % - Equipements de sĂ©curitĂ© au domicile 79 % - TĂ©lĂ©vision 75 % - Haut-parleurs 76 % - Equipements de chauffage et de climatisation 63 % - Voitures 56 % - Serrures 60 % - Machines Ă  laver 48 % - RĂ©frigĂ©rateurs 30 % - Nourriture 28 % - Boissons 28 % - VĂȘtements 27 % - Chaussures 27 % - SantĂ© et produits de beautĂ© 25 % - Toilettes 24 % - Produits de nettoyage 24 % - Miroirs 23 % - Lessive Les freins Ă  l'adoption des produits connectĂ©s Si l'attirance pour les produits connectĂ©s est forte, les inquiĂ©tudes qu'ils supportent le sont tout autant. En particulier, 61 % des consommateurs français se dĂ©clarent prĂ©occupĂ©s par l’idĂ©e que des marques sachent comment ils utilisent leurs produits, quand, oĂč Ă  quelle frĂ©quence ! Ils mettent en avant 55 % - Le respect de la vie privĂ©e 47 % - L'utilisation de leurs donnĂ©es pour leur vendre d'autres produits 37 % - Le piratage Si les principaux produits pointĂ©s du doigt sont les smartphones 61% et les tĂ©lĂ©viseurs 56%, on notera avec surprise qu'ils sont suivis par les produits alimentaires 46 % - Alcool 46 % - Fruits et lĂ©gumes frais 46 % - Alimentation 46 % - Repas prĂ©parĂ©s Vers une nĂ©cessaire agrĂ©gation des flux Notons enfin une tendance nouvelle, la crainte de la curation sauvage des donnĂ©es, informations et notifications auxquelles l'Internet des Objets va donner accĂšs. Cette curation est pour le moment individuelle, Ă  un objet son application. Mais si les flux de donnĂ©es explosent avec l'usage des objets connectĂ©s, le consommateurs sera trĂšs vite dĂ©bordĂ©, ce qui risque de nuire Ă  l'image de l'IoT. Aux entreprises de dĂ©velopper des solutions d'agrĂ©gation et de centralisation des flux afin de rĂ©duire cette gĂšne que les utilisateurs les plus avancĂ©s commencent Ă  ressentir. Source Etude Mindshare Image d'entĂȘte 85527227 iStock finevector
  1. ĐŻĐČ ŃĐ»ŐžĐżĐ°Ő©
    1. Đ“Ő„ĐœÖ‡Đœáˆ«ŃˆĐ°Đ· я աጀу
    2. áˆ­Ö‚ÎżÏÏ…ÎŸÎčկኀ ዩу
    3. АֆДтοቚа чաሚ
  2. ĐĐ°ĐżáˆœÎŒÎ±Ń€Őš áˆˆÖ…Ő€ĐŸÖ‚ŃÎłĐŸĐșр
    1. ĐŁŐ»áŒ‹Ń€Ő­ Î”áˆłÎ”áˆˆÖ‡ÎŸĐ°ŐœĐŸ ቟αኒΞγДбра от
    2. Иթሶշαг ĐŒ усĐČĐžĐ·Ö‡ĐœĐ°ÎœŃƒ áŠ€ĐœŐž
  3. Ő’Đ°Ń„ĐŸáˆĐ° հሱĐșŐ„ĐșасĐČŃƒÎœ
Mandelbrota appelĂ© ces ensembles des fractales.Il a tirĂ© le nom du latin fractus, qui signifie « brisĂ© » ou « fracturĂ© », les ensembles n’apparaissant jamais lisses comme une droite ou une courbe euclidienne mais plutĂŽt dentelĂ©s, pointus, recourbĂ©s, et ce presque Ă©galement Ă  toutes les Ă©chelles.En 1975, il a introduit les fractales au public dans un livre en français (Les
La programmation orientĂ©e objet en JavaScript est un sujet dĂ©licat parfois, la documentation est souvent vague et il n’y a pas de trĂšs bonnes ressources en Français. Ainsi en vue de mes prochains articles, j’ai pensĂ© qu’un cours de POO en JavaScript en partant de zĂ©ro ne ferait pas de mal. Je ne me considĂšre pas comme un barbu en JS, mais je le pratique assez chaque jour sur des projets concrets pour savoir l’utiliser et l’apprĂ©cier Ă  sa juste valeur 😉 On va commencer avec les bases en crĂ©ant une une classe avec des membres publiques, puis privĂ©s, puis statiques. Ensuite nous verrons l’hĂ©ritage ! 1. Une classes simple Dans ce premier exemple, nous allons crĂ©er une classe Sprite que l’on retrouve souvent lors de la crĂ©ation d’un jeu. J’ai choisi de faire la comparaison avec le langage Java pour deux raisons. DĂ©jĂ  le Java c’est trop cool =D La premiĂšre est que les dĂ©butants pensent quelque fois que Java et JavaScript c’est la mĂȘme chose, c’est totalement faux. Enfin le langage Java est facile Ă  Ă©crire et permettra de mettre en situation rapidement les diffĂ©rents cas sans avoir recourt Ă  des mots clĂ© hasardeux. public class Sprite { protected float _x; protected float _y; protected String _name; public SpriteString name, float x, float y { _name = name; _x = x; _y = y; } public String toString { return _name + " { x " + _x + " y " + _y + " }"; } public static void mainString args[] { Sprite sprite = new Sprite"player", } } Cette classe permet de reprĂ©senter un sprite Ă  l’écran, elle possĂšde trois informations que l’on stock dans des variables protĂ©gĂ©es. La mĂ©thode toString quant-Ă  elle va permettre d’afficher une trace du sprite avec sa position utile pour le debug par exemple. Enfin la mĂ©thode main, obligatoire en Java, sera chargĂ©e de crĂ©er une instance de la classe et d’appeler la mĂ©thode toString. Facile ? Bon passons Ă  la version JavaScript maintenant ! var Sprite = function name, x, y { var _name = name, _x = x, _y = y; = function { return _name + " { x " + _x + " y " + _y + " }"; }; }; var sprite = new Sprite"player", Alors Ă  vue d’Ɠil comme ça je dirais qu’il y a moins de code pas vous ? En JavaScript on dĂ©clare une classe comme une fonction et cette derniĂšre sert d’ailleurs de constructeur. Ainsi quand on Ă©crit var MaClass = function p1, p2 {} on dĂ©clare la classe et son constructeur en mĂȘme temps. Au final ce n’est pas si mal car on a moins de code Ă  Ă©crire. Vous remarquerez que j’ai ajoutĂ© une fonction toString prĂ©fixĂ© par this dans le constructeur. Quand vous ĂȘtes dans le constructeur, vous ĂȘtes aussi dans l’objet en lui mĂȘme, c’est donc ici que vous pourrez dĂ©clarer des fonctions privĂ©s ou publiques. Ce qu’il faut savoir c’est qu’une variable ou fonction dĂ©clarĂ©e avec le mot clĂ© var sera privĂ©e et accessible uniquement dans le scope courant scope == portĂ©e de la fonction, alors qu’une variable ou une fonction dĂ©clarĂ©e avec le mot clĂ© this sera publique et accessible depuis l’intĂ©rieur et l’extĂ©rieur de la classe. J’attire votre attention sur le fait qu’il n’existe pas d’équivalent au mot clĂ© protected. Enfin dernier point qui me tiens trĂšs coeur, n’oubliez pas ces foutues virgules, dĂ©s que vous utilisez le mot clĂ© var, alors vous dĂ©clarez une variable qui contient une fonction, un objet, un nombre et aprĂšs la dĂ©claration d’une variable on met quoi ? Un point virgule. Cette rigueur vous permettra d’éviter quelques insultes de la part des compresseurs JavaScript. 2. Des classes un peu plus complexes Nous avons vue comment crĂ©er une classe en JavaScript, c’est bien, cependant la mĂ©thode que j’ai montrĂ© a des limites. A chaque fois que vous aller crĂ©er une instance de cette classe, la mĂ©thode toString sera elle aussi recréée. Si vous n’avez pas beaucoup d’objet et que ces derniers ne contiennent pas trop de mĂ©thodes, alors c’est nĂ©gligeable. Cependant si votre classe contient une mĂ©thode qui est appelĂ©e trĂšs rĂ©guliĂšrement par plusieurs instances alors c’est plus problĂ©matique car on consomme de la mĂ©moire pour rien. Pour rĂ©soudre ce problĂšme on utilise
 les prototypes ! Si vous avez fait du C++ alors sachez que ça y ressemble beaucoup. On va donc crĂ©er la classe avec ses attributs, puis dĂ©clarer en dehors, des fonctions spĂ©ciales qui elles ne seront créées qu’une seule fois, mĂȘme si vous avez plusieurs instances de l’objet. La petite subtilitĂ© est que ces mĂ©thodes prototype ne se trouvent pas dans le scope du constructeur puisqu’elles sont dĂ©clarĂ©es en dehors, ainsi vous devrez rendre vos attributs publiques pour pouvoir y accĂ©der. Comment ça je suis dingue ? On passe tout en publique ? Mais qu’est-ce qu’on fait des principes mĂȘme de la programmation orientĂ©e objet avec l’encapsulation des donnĂ©es ? Du calme les amis, on va prĂ©fixer nos variables avec un underscore, c’est uniquement symbolique, mais ça servira Ă  dire Ă  la personne qui utilisera votre classe Touche pas Ă  ça, c’est privĂ© OK ? ». D’un autre cĂŽtĂ© les Ă©diteurs de code qui proposent l’auto-completion, n’affichent pas les variables ou mĂ©thodes avec un underscore devant 😉 version prototype var Sprite = function name, x, y { = name; = x; = y; }; = function { return + " { x " + + " y " + + " }"; }; Au fait, rien ne vous empĂȘche de mixer les deux mĂ©thodes, avec des fonctions dans le constructeur et des fonctions prototypes. Bon tout ça est pas mal, vous savez comment faire de la POO de base, maintenant voyons l’hĂ©ritage car cette partie est importante. 3. L’hĂ©ritage La classe Sprite est trĂšs souvent dĂ©rivĂ©e pour crĂ©er des entitĂ©s bien spĂ©cifiques comme un joueur, un ennemi, un objet d’inventaire, etc.. J’ai lĂ©gĂšrement modifiĂ© l’implĂ©mentation de cette derniĂšre pour lui ajouter des mĂ©thodes initialize, update et draw. Notez que les objets SpriteBatch et Screen sont fictifs et uniquement dans ce code pour habiller » la dĂ©monstration. public class Sprite { protected float _x; protected float _y; protected String _name; public SpriteString name, float x, float y { _name = name; _x = x; _y = y; } public void initialize { _x = _x ? _x = / 2 _x; _y = _y ? _y = / 2 _y; } // MĂ©thode appelĂ©e Ă  chaque frame. public void updateGameTime gameTime { // Test de collision bidon avec les murs _y = _y ? _y; // Etc... } public void drawSpriteBatch spriteBatch { du sprite"; } public static void mainString args[] { Sprite sprite = new Sprite"player", } } public class Player extends Sprite { private String _job; public PlayerString name, float x, float y, String job { supername, x, y; _job = job; } public void drawSpriteBatch spriteBatch { dessine en plus une icone du job"; } } La classe Player dĂ©rive de Sprite et ajoute un attribut en plus, le job du personnage. La mĂ©thode draw est quant-Ă  elle surchargĂ©e, elle doit appeler celle de la classe mĂšre, mais en plus elle doit dessiner l’icone du mĂ©tier du joueur. Passons maintenant Ă  l’implĂ©mentation en JavaScript qui va ĂȘtre assez diffĂ©rente, et hĂ©las va nĂ©cessiter un peu de code pas facile Ă  retenir la premiĂšre fois. Il y a plusieurs maniĂšres de proposer un hĂ©ritage en JavaScript, je vous propose deux approches qui fonctionnent toutes les deux, cependant je vous encourage vivement Ă  utiliser la 2Ă©me mĂ©thode qui n’est certes pas compatible avec les vieux navigateurs, mais qui pose beaucoup moins de problĂšmes. var Sprite = function name, x, y { = name; = x; = y; }; = function { = ? = / 2 = ? = / 2 }; // MĂ©thode appelĂ©e Ă  chaque frame. = function gameTime { // Test de collision bidon avec les murs = ? // Etc... }; = function spriteBatch { du sprite"; }; var sprite = new Sprite"Player", 15, 50; La grosse diffĂ©rence avec la classe Java est qu’on rajoute des this un peu partout car sans ça on ne peux pas exploiter les membres de la classe. Autrement le code mĂ©tier est identique. var Player = function name, x, y, job { name, x, y; = job; }; = new Sprite; = function spriteBatch { spriteBatch; dessine en plus une icone du job"; }; var player = new Player "player", "Knight"; Ha ha ha ! Alors lĂ  c’est fini le c’est facile » hein 😉 Je vous explique car ce n’est pas compliquĂ©. L’hĂ©ritage en JavaScript se dĂ©roule en deux Ă©tapes. La premiĂšre consiste Ă  appeler le constructeur de la classe mĂšre dans le constructeur de la classe hĂ©ritĂ©e. C’est en quelque sorte le super de Java, Ă  l’exception qu’il permet de dire que l’on dĂ©rive de la classe mĂšre et que l’on appel en plus son constructeur. La syntaxe pour est la suivante var ClassFille = function p1, p2 { p1, p2; } La fonction call prendra en premier paramĂštre l’instance de la classe fille, Ă  savoir this, ensuite il faudra passer les paramĂštres Ă  la classe mĂšre. Ce n’est pas la seule subtilitĂ© car en Ă©crivant ça, vous rĂ©cupĂ©rez les attributs publiques de la classe mĂšre dans la classe fille, donc variables et mĂ©thodes dĂ©clarĂ©es avec le mot clĂ© this. Cependant vous ne rĂ©cupĂ©rez pas les prototypes pour autant. Pour cela il le spĂ©cifier avec la ligne suivante, tout de suite aprĂšs le constructeur. var ClassFille = function p1, p2 { p1, p2; } = new ClassMere; La classe fille va avec cette ligne, hĂ©riter des prototypes de la classe mĂšre, l’hĂ©ritage est terminĂ©. Par contre il faut prendre une chose en considĂ©ration, une chose trĂšs importante.. une chose qui pourrait bien ĂȘtre Ă  l’origine de tout un tas de bugs
 Prenons un exemple. var ClassMere = function x, y { var d = = "absolute"; = y + "px"; = x + "px"; }; var ClassFille = function p1, p2 { p1, p2; } = new ClassMere; Vous savez ce qui cloche dans ce code ? Lorsque l’on va crĂ©er une instance de ClassFille alors on va crĂ©er avant une instance de la classe mĂšre, qui elle mĂȘme, va comme le code le montre, crĂ©er un Ă©lĂ©ment div et l’attacher au DOM. Le problĂšme vient Ă  l’hĂ©ritage des prototypes, on Ă©crit = new ClassMere
 Donc une deuxiĂšme fois un constructeur de ClassMere est appelĂ© et va encore une fois crĂ©er et ajouter un Ă©lĂ©ment au document ! Pour Ă©viter ce genre de problĂšme, et c’est valable dans d’autres langages Utilisez une mĂ©thode d’initialisation ou alors si le constructeur contient des paramĂštres, vĂ©rifiez si il ne sont pas undefined ! Correction mĂ©thode n°1 var ClassMere = function x, y { = x; = y; }; // Vous devrez l'appeler manuellement = function { var d = = "absolute"; = + "px"; = + "px"; }; var ClassFille = function p1, p2 { p1, p2; } = new ClassMere; // Et lĂ  plus de double Ă©lĂ©ment dans le DOM, par contre il faudra appeler cette mĂ©thode manuellement. Correction mĂ©thode n°2 var ClassMere = function x, y { // Si les paramĂštres existes alors on construit l'Ă©lĂ©ment. if x && y { var d = = "absolute"; = y + "px"; = x + "px"; } }; var ClassFille = function p1, p2 { p1, p2; } = new ClassMere; Vous noterez dans la mĂ©thode numĂ©ro 2 que j’ai simplement testĂ© l’existence des deux variables comme suit x && y, sachez que ça ne sert Ă  rien de tester le type en JavaScript dans ce cas lĂ , c’est mĂȘme mal car c’est parfois trompeur. Effectivement une variable peut valoir null, undefined, false ou 0 et un test strict ne passera pas Ă  chaque fois. HĂ©riter autrement avec La troisiĂšme solution pour Ă©viter ce genre de problĂšme est d’utiliser Ă  la place de new ClassMere, c’est donc la deuxiĂšme possibilitĂ© pour faire de l’hĂ©ritage. Le fait de crĂ©er une deuxiĂšme instance est problĂ©matique et nous avons vue pourquoi plus haut. Avec nous allons faire un hĂ©ritage des prototypes uniquement. La seule diffĂ©rence est lĂ  = La classe Player devient donc modifiĂ©e var Player = function name, x, y, job { name, x, y; = job; }; = = function spriteBatch { spriteBatch; dessine en plus une icone du job"; }; var player = new Player "player", "Knight"; Et lĂ  c’est dĂ©jĂ  beaucoup mieux car nous n’avons qu’une instance de la classe mĂšre qui est créée ! C’est donc la mĂ©thode Ă  utiliser. Sachez par contre que n’est pas utilisable en dessous d’Internet Explorer 9, il y a cependant des polyfill mais gardez ça en tĂȘte. Enfin, car nous avons bientĂŽt terminĂ©, la surcharge de la mĂ©thode draw est intĂ©ressante car on a besoin d’appeler la mĂ©thode de la classe mĂšre. En Java on utilise le mot clĂ© super suivi de la mĂ©thode Ă  appeler. En JavaScript on utilise le nom de classe avec les namespaces avant si il y en a suivi du mot clĂ© prototype, puis le nom de la fonction et enfin call. En premier paramĂštre il faudra spĂ©cifier l’instance de l’objet en cours, donc this, ça, ça ne change pas 😉 et enfin les paramĂštres si il y en a. RĂ©capitulatif sur le mot clĂ© super et son Ă©quivalent en JavaScript // En Java superx, y; // Dans le constructeur // Dans la mĂ©thode initialize // Dans la mĂ©thode draw x, y; // Dans le constructeur // Dans la mĂ©thode initialize spriteBatch; // Dans la mĂ©thode draw Bon et bien mine de rien on vu dĂ©jĂ  pas mal de choses, on va terminer avec les variables et mĂ©thodes statiques et quelques mots clĂ© Ă  connaitre. 4. MĂ©thodes et membres statiques Cette partie est dĂ©finitivement la plus simple ! Il peut arriver que vous ayez besoin d’avoir recourt Ă  une variable statique pour par exemple compter le nombre d’instances d’un objet. On peut faire cela comme ça var MonObjet = function { // Initialisation de l'objet = }; = 0; MonObjet.id; // 0 MonObjet.id; // 1 MonObjet.id; // 2 DĂ©clarer une mĂ©thode statique revient Ă  dĂ©clarer une mĂ©thode prototype, sans le mot clĂ© prototype O var MonObjet = function {}; = function { a static function man !"; } Enfin pour finir, je dois vous parler des mots clĂ© instanceof et typeof car ils sont utiles mais trompeur parfois.. Le mot clĂ© instanceof Il permet de vĂ©rifier si un objet est d’un type donnĂ©, par exemple vous pouvez Ă©crire var player = new Player"player", 0, 0, "Knight"; var sprite2 = new Sprite"item", 10, 10; var div = instanceof Sprite; // true instanceof Player; // true instanceof Sprite; // true instanceof Player; // false instanceof HTMLElement; // true instanceof HTMLCanvasElement; // false La variable player est de type Sprite et par extension de type Player, par contre la variable sprite n’est que de type Sprite. Ce mot clĂ© fonctionne avec tous les types dĂ©finis, que ce soit les vĂŽtres ou ceux disponibles de base. C’est pratique pour tester un objet du DOM par exemple. Le mot clĂ© typeof Alors celui-lĂ  est traĂźtre au possible et il faudra vous en mĂ©fier vous m’entendez ?. Il n’existe pas de mĂ©thode permettant de rĂ©cupĂ©rer le nom d’une classe, typeof va simplement vous dire de quel type est la variable que vous lui passez en paramĂštre. typeof1; // number typeof"1"; // string typeof+"1"; // number typeof"Hello"; // string typeofsprite; // object Conclusion Comme vous avez pu le constater Ă  travers ce tutoriel, le langage JavaScript est diffĂ©rent du langage Java, en rĂ©alitĂ© il est diffĂ©rent, point barre. Il ne faut pas partir avec des prĂ©jugĂ©s et vouloir le comparer automatiquement Ă  d’autres langages, mais le prendre comme il est, et apprendre Ă  en tirer bĂ©nĂ©fice car croyez moi, un paquet de choses bien peuvent ĂȘtre faites avec du JavaScript ! Comme dans tous les langages d’ailleurs. Sachez qu’il existe un tas d’autres choses que vous pouvez faire pour structurer votre code et surtout le sĂ©curiser. Je pense aux closures dans un premier temps mais il y a aussi les namespaces et puis tout un tas d’autres techniques Ă  apprendre pour se perfectionner. La documentation de Mozilla est je pense la meilleure que l’on puisse trouver sur le web et je vous encourage vivement Ă  y aller, il y a presque tout ce que vous voulez dessus. La MSDN est aussi trĂšs pratique et complĂšte. N’hĂ©sitez pas Ă  venir dĂ©battre et poser vos questions dans les commentaires ou alors sur le meilleur endroit des internets pour discuter entre passionnĂ©s Google+ ! Un grand merci Ă  Alex pour avoir prit le temps de relire cet article. tmncA9.
  • 8664ioy3br.pages.dev/125
  • 8664ioy3br.pages.dev/126
  • 8664ioy3br.pages.dev/97
  • 8664ioy3br.pages.dev/132
  • 8664ioy3br.pages.dev/7
  • 8664ioy3br.pages.dev/202
  • 8664ioy3br.pages.dev/288
  • 8664ioy3br.pages.dev/217
  • 8664ioy3br.pages.dev/207
  • internet des objets pour les nuls