JSON - HackMD

# JSON Richard V. Martins Tenorio, Hadrien Louis ---- # Objectif > Le but de cette présentation est de d'apprendre d'ou vient le `JSON` et de vous montrer quelqu'unes de ces fonctionnalités. ---- ## Side note Ce document a été conçu avec <hackmd.io> peut être montré comme ([reveal.js](https://github.com/hakimel/reveal.js/)) présentation ici: https://hackmd.io/p/rJuLKiquG# --- # JSON ``JavaScript Object Notation`` ![json_logo](http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/JSON_vector_logo.svg/130px-JSON_vector_logo.svg.png) --- # Historique > Créé entre ``2002`` et ``2005``, c'est un [format de données](https://fr.wikipedia.org/wiki/Format_de_donn%C3%A9es "Format de données") textuelles dérivé de la notation des [objets](https://fr.wikipedia.org/wiki/Objet_(informatique) "Objet (informatique)") du langage [JavaScript](https://fr.wikipedia.org/wiki/JavaScript). Il permet de représenter de l’information structurée comme le permet [XML](https://fr.wikipedia.org/wiki/Extensible_Markup_Language "Extensible Markup Language") par exemple. ---- ## Créateur > Douglas Crockford l'a décrit en 2006 par la **RFC4627** de l'ITEF. Référence mise à jour en 2014 dans la **RFC7159** --- # Avantage & incovénient ----  ### le JSON c'est hype ---- ## Avantage * léger * supporté par énormément de langages * facile a comprendre autant pour les humains que pour les machines * beaucoup utilisé ---- ## Incovénient * comme tout moyen de stockage de données il faudra prendre des mesures pour les **données sensibles**. * Comme la syntaxe est rudimentaire, peut être un inconvénient dans **certains cas**. la structure doit être connue avant utilisation. --- # Syntaxe ----  ### JSON ```json= [ { "nom":"Richard Tenorio", "age":19, "email":"richard.tenorio@outlook.com" }, { "nom":"Hadrien Louis", "age":18, "email":"contact@hadrien-louis.ch" } ] ``` ---- ### XML ```xml= <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> ``` ---- **{...}** les **accolades** définissent un objet. **"..":"..."** Les **guillements**(doubles-quotes) + les **doubles points** définissent un couple ``clé : valeur`` (on parle de membre). ---- **[...]** les **crochets** définissent un tableau (array) **..,..** les **virgules** permettent de séparer les membres, les objets et les tableau entre eux. **a noter** : pas de virgule pour le dernier membre d'un objet ! ---- ## Types de données >* Entier (INT) >* Chaîne de caractère (STRING) >* booléen (BOOL) >* Tableau >* Objet ---  ---  ## Let's practice --- ### Fichier JSON à créer ![array-exemple-empty](https://i.imgur.com/l0I2lkZ.png) ---- ### Aide ![array-exemple-full](https://i.imgur.com/V3EzDjs.png) ---- ### Corrections ``` json= [ { "Nom":"Louis", "Prénom":"Hadrien", "Age":"18", "Ville":"Pully", "CP":"1009" }, { "Nom":"Martins", "Prénom":"Richard", "Age":"19", "Ville":"Lausanne", "CP":"1018" }, { "Nom":"John", "Prénom":"Doe", "Age":"30", "Ville":"New-York", "CP":"10000" }, { "Nom":"foo", "Prénom":"bar", "Age":"10", "Ville":"Genève", "CP":"1200" } ] ```` --- ## Validation Vérifier la syntaxe sur : **https://jsonlint.com** --- ## Affichage Vous pouvez afficher votre JSON sur **https://json.hadrien-louis.ch** Pour avoir un exemple concret sur un site web ---  ## Merci de votre attention