Download - JSON toujours deux fois
![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.