json toujours deux fois
DESCRIPTION
Un introduction simple au format de données JSON, JSONP avec une approche très vague de comment on peut faire dans la vie quand on n'a pas facile, mais qu'il faut absolument que ça aille. Présentation faire à Namur le 11/03/2014 dans le cadre du Workshop DataViz-05 consacré à la visualisation de données, ce qui fait que justement on l'appelle dataviz, car c'est une sorte de patronyme qui parle aux initiés. Merci à la vieTRANSCRIPT
![Page 1: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/1.jpg)
JSONtoujours deux fois
![Page 2: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/2.jpg)
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason
![Page 3: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/3.jpg)
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe
![Page 4: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/4.jpg)
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe-> remember DJ(ay)
![Page 5: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/5.jpg)
Bon
![Page 6: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/6.jpg)
C’est quoi, sinon ?
![Page 7: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/7.jpg)
le JSON, c’est quoi ?
JavaScript Objet Notation
![Page 8: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/8.jpg)
C’est quoi ?
un format de données
basé sur la syntaxe du JavaScript
assez lisible pour l’humain
assez facile à écrire à la main (ou au pied)
![Page 9: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/9.jpg)
Un fichier JSON
à quoi ça ressemble ?
![Page 10: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/10.jpg)
Un fichier JSON
c’est beau
![Page 11: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/11.jpg)
Un fichier JSON
et à l’intérieur ?
![Page 12: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/12.jpg)
Un fichier JSON
et à l’intérieur ?
C’est beau aussi !
![Page 13: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/13.jpg)
Mais d’abord, un peu d’histoire...
![Page 14: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/14.jpg)
{}Ceci n’est pas un objet
![Page 15: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/15.jpg)
{}C’est la représentation d’un objet
en JavaScript
![Page 16: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/16.jpg)
{}C’est la représentation d’un objet
en JavaScript
et aussi la base de la notation JSON
![Page 17: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/17.jpg)
Rappelons-nous...La syntaxe du JavaScript pour les données de base
![Page 18: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/18.jpg)
Rappelons-nous...La syntaxe du JavaScript
pour créer un objet
![Page 19: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/19.jpg)
Un objet, des propriétés.
Un objet, c’est un peu comme un étagedans une structure de donnée.
On peut y stocker des choses,qui deviennent ses propriétés.
![Page 20: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/20.jpg)
Exemple concret
![Page 21: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/21.jpg)
![Page 22: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/22.jpg)
![Page 23: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/23.jpg)
et ainsi de suite...
![Page 24: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/24.jpg)
![Page 25: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/25.jpg)
![Page 26: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/26.jpg)
En imbriquant des structures, on arrive à créer un arbre de données
qui peut devenir complexe, mais reste toujours logique.
![Page 27: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/27.jpg)
OK
![Page 28: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/28.jpg)
OKet pour l’utiliser ?
![Page 29: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/29.jpg)
facile !pour l’utiliser ?
![Page 30: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/30.jpg)
![Page 31: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/31.jpg)
JSON vs JSONP
Un fichier JSON “propre” :
![Page 32: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/32.jpg)
JSON vs JSONP
Un fichier JSON “propre” :
Si je l’ajoute tel quel à ma page HTML,ça ne va pas aller...
![Page 33: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/33.jpg)
JSON vs JSONPParce que :
- sécurité Cross-Domaine- syntax error
![Page 34: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/34.jpg)
JSON vs JSONP
Donc :il faut un moyen de rendre le JSON utilisable
par les scripts de la page.
Parce que :
- sécurité Cross-Domaine- syntax error
![Page 35: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/35.jpg)
JSONP = JSON with Padding
![Page 36: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/36.jpg)
JSONP = JSON with Padding
Le padding, ce n’est pas le pudding
![Page 37: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/37.jpg)
JSONP = JSON with Padding
Le padding, c’est un truc que le serveur rajoute autour des données
pour qu’on puisse les toucher.
![Page 38: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/38.jpg)
JSONP = JSON with Padding
Le padding, ça peut être :
![Page 39: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/39.jpg)
Assignation
JSONP = JSON with Padding
Le padding, ça peut être :
![Page 40: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/40.jpg)
Assignation Appel de fonction
JSONP = JSON with Padding
Le padding, ça peut être :
![Page 41: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/41.jpg)
En pratique
JSON : à charger avec un XMLHttpRequest
JSONP : à intégrer avec une balise <script>
![Page 42: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/42.jpg)
Tu veux une démo ?
![Page 43: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/43.jpg)
Les données de l’école
schoolData.jsque je dois encore vous transmettre
![Page 44: JSON toujours deux fois](https://reader035.vdocuments.us/reader035/viewer/2022062514/5586bf9fd8b42aa6718b4588/html5/thumbnails/44.jpg)
Bon, ça suffit !amusez-vous, maintenant.