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

1. JSONtoujours deux fois

2. Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason

3. Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe

4. Comment on dit ?
Djîçonne
J’y sonne
Djéy-sonne
Jay SON
Jason -> remember G.I. Joe
-> remember DJ(ay)

5. Bon

6. C’est quoi, sinon ?

7. le JSON, c’est quoi ?
JavaScript Objet Notation

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. Un fichier JSON
à quoi ça ressemble ?

10. Un fichier JSON
c’est beau

11. Un fichier JSON
et à l’intérieur ?

12. Un fichier JSON
et à l’intérieur ?
C’est beau aussi !

13. Mais d’abord,
un peu d’histoire...

14. {}
Ceci n’est pas un objet

15. {}C’est la représentation d’un objet
en JavaScript

16. {}C’est la représentation d’un objet
en JavaScript
et aussi la base de la notation JSON

17. Rappelons-nous...
La syntaxe du JavaScript
pour les données de base

18. Rappelons-nous...
La syntaxe du JavaScript
pour créer un objet

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. Exemple concret

23. et ainsi de suite...

26. En imbriquant des structures,
on arrive à créer un arbre de données
qui peut devenir complexe,
mais reste toujours logique.

27. OK

28. OKet pour l’utiliser ?

29. facile !
pour l’utiliser ?

31. JSON vs JSONP
Un fichier JSON “propre” :

32. JSON vs JSONP
Un fichier JSON “propre” :
Si je l’ajoute tel quel à ma page HTML,
ça ne va pas aller...

33. JSON vs JSONP
Parce que :
- sécurité Cross-Domaine
- syntax error

34. 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

35. JSONP = JSON with Padding

36. JSONP = JSON with Padding
Le padding, ce n’est pas le pudding

37. JSONP = JSON with Padding
Le padding, c’est un truc
que le serveur rajoute
autour des données
pour qu’on puisse les toucher.

38. JSONP = JSON with Padding
Le padding, ça peut être :

39. Assignation
JSONP = JSON with Padding
Le padding, ça peut être :

40. Assignation Appel de fonction
JSONP = JSON with Padding
Le padding, ça peut être :

41. En pratique
JSON : à charger avec un XMLHttpRequest
JSONP : à intégrer avec une balise <script>

42. Tu veux une démo ?

43. Les données de l’école
schoolData.js
que je dois encore vous transmettre

44. Bon, ça suffit !
amusez-vous, maintenant.