JSONtoujours deux fois
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe
Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe
-> remember DJ(ay)
Bon
C’est quoi, sinon ?
le JSON, c’est quoi ?
JavaScript Objet Notation
C’est quoi ?
un format de données
basé sur la syntaxe du JavaScript
assez lisible pour l’humain
assez facile à écrire à la...
Un fichier JSON
à quoi ça ressemble ?
Un fichier JSON
c’est beau
Un fichier JSON
et à l’intérieur ?
Un fichier JSON
et à l’intérieur ?
C’est beau aussi !
Mais d’abord,
un peu d’histoire...
{}
Ceci n’est pas un objet
{}C’est la représentation d’un objet
en JavaScript
{}C’est la représentation d’un objet
en JavaScript
et aussi la base de la notation JSON
Rappelons-nous...
La syntaxe du JavaScript
pour les données de base
Rappelons-nous...
La syntaxe du JavaScript
pour créer un objet
Un objet, des propriétés.
Un objet, c’est un peu comme un étage
dans une structure de donnée.
On peut y stocker des choses...
Exemple concret
et ainsi de suite...
En imbriquant des structures,
on arrive à créer un arbre de données
qui peut devenir complexe,
mais reste toujours logique.
OK
OKet pour l’utiliser ?
facile !
pour l’utiliser ?
JSON vs JSONP
Un fichier JSON “propre” :
JSON vs JSONP
Un fichier JSON “propre” :
Si je l’ajoute tel quel à ma page HTML,
ça ne va pas aller...
JSON vs JSONP
Parce que :
- sécurité Cross-Domaine
- syntax error
JSON vs JSONP
Donc :
il faut un moyen de rendre le JSON utilisable
par les scripts de la page.
Parce que :
- sécurité Cros...
JSONP = JSON with Padding
JSONP = JSON with Padding
Le padding, ce n’est pas le pudding
JSONP = JSON with Padding
Le padding, c’est un truc
que le serveur rajoute
autour des données
pour qu’on puisse les touche...
JSONP = JSON with Padding
Le padding, ça peut être :
Assignation
JSONP = JSON with Padding
Le padding, ça peut être :
Assignation Appel de fonction
JSONP = JSON with Padding
Le padding, ça peut être :
En pratique
JSON : à charger avec un XMLHttpRequest
JSONP : à intégrer avec une balise <script>
Tu veux une démo ?
Les données de l’école
schoolData.js
que je dois encore vous transmettre
Bon, ça suffit !
amusez-vous, maintenant.
JSON toujours deux fois
JSON toujours deux fois
JSON toujours deux fois
JSON toujours deux fois
JSON toujours deux fois
Prochain SlideShare
Chargement dans…5
×

JSON toujours deux fois

1 185 vues

Publié le

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 vie

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 185
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
82
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

JSON toujours deux fois

  1. 1. JSONtoujours deux fois
  2. 2. Comment on dit ? Djîçonne J’y sonne Djéy-sonne Jay SON Jason
  3. 3. Comment on dit ? Djîçonne J’y sonne Djéy-sonne Jay SON Jason -> remember G.I. Joe
  4. 4. Comment on dit ? Djîçonne J’y sonne Djéy-sonne Jay SON Jason -> remember G.I. Joe -> remember DJ(ay)
  5. 5. Bon
  6. 6. C’est quoi, sinon ?
  7. 7. le JSON, c’est quoi ? JavaScript Objet Notation
  8. 8. 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)
  9. 9. Un fichier JSON à quoi ça ressemble ?
  10. 10. Un fichier JSON c’est beau
  11. 11. Un fichier JSON et à l’intérieur ?
  12. 12. Un fichier JSON et à l’intérieur ? C’est beau aussi !
  13. 13. Mais d’abord, un peu d’histoire...
  14. 14. {} Ceci n’est pas un objet
  15. 15. {}C’est la représentation d’un objet en JavaScript
  16. 16. {}C’est la représentation d’un objet en JavaScript et aussi la base de la notation JSON
  17. 17. Rappelons-nous... La syntaxe du JavaScript pour les données de base
  18. 18. Rappelons-nous... La syntaxe du JavaScript pour créer un objet
  19. 19. Un objet, des propriétés. Un objet, c’est un peu comme un étage dans une structure de donnée. On peut y stocker des choses, qui deviennent ses propriétés.
  20. 20. Exemple concret
  21. 21. et ainsi de suite...
  22. 22. En imbriquant des structures, on arrive à créer un arbre de données qui peut devenir complexe, mais reste toujours logique.
  23. 23. OK
  24. 24. OKet pour l’utiliser ?
  25. 25. facile ! pour l’utiliser ?
  26. 26. JSON vs JSONP Un fichier JSON “propre” :
  27. 27. JSON vs JSONP Un fichier JSON “propre” : Si je l’ajoute tel quel à ma page HTML, ça ne va pas aller...
  28. 28. JSON vs JSONP Parce que : - sécurité Cross-Domaine - syntax error
  29. 29. 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
  30. 30. JSONP = JSON with Padding
  31. 31. JSONP = JSON with Padding Le padding, ce n’est pas le pudding
  32. 32. JSONP = JSON with Padding Le padding, c’est un truc que le serveur rajoute autour des données pour qu’on puisse les toucher.
  33. 33. JSONP = JSON with Padding Le padding, ça peut être :
  34. 34. Assignation JSONP = JSON with Padding Le padding, ça peut être :
  35. 35. Assignation Appel de fonction JSONP = JSON with Padding Le padding, ça peut être :
  36. 36. En pratique JSON : à charger avec un XMLHttpRequest JSONP : à intégrer avec une balise <script>
  37. 37. Tu veux une démo ?
  38. 38. Les données de l’école schoolData.js que je dois encore vous transmettre
  39. 39. Bon, ça suffit ! amusez-vous, maintenant.

×