<!-- DOC https://hackmd.io/s/NJhm2CHEx# -->
<!-- inspiration : https://hackmd.io/bZMwJWpDSwqhKpZAucBPdQ?both -->
<!-- Authors : @richmartins @hadrylouis -->
<!-- .slide: data-background="http://instaco.de/stream/115487"-->
# 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
----
<!-- .slide: data-background="https://media.giphy.com/media/5tvYKCtwHsHcbcEcBh/giphy.gif" -->
### 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
----
<!-- .slide: data-background="gray" -->
### 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>
```
----
**{...}**<br />les **accolades** définissent un objet. <br />
**"..":"..."**<br />Les **guillements**(doubles-quotes) <br /> + les **doubles points** définissent un couple<br />``clé : valeur``<br /> (on parle de membre).
----
**[...]**<br />les **crochets** définissent un tableau (array) <br />
**..,..**<br />les **virgules** permettent de séparer les membres, les objets et les tableau entre eux. <br /><br />
**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
---
<!-- .slide: data-background="https://media.giphy.com/media/acJ6UbGLUB2De/giphy.gif" -->
---
<!-- .slide: data-background="https://media.giphy.com/media/bNO0MWiDMTIqs/giphy.gif" -->
## 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
---
<!-- .slide: data-background="https://media.giphy.com/media/yoJC2El7xJkYCadlWE/giphy.gif" -->
## Merci de votre attention
{"metaMigratedAt":"2023-06-14T15:49:56.342Z","metaMigratedFrom":"Content","title":"JSON","breaks":true,"contributors":"[]"}