JSON: The Basics

8,771 views
8,355 views

Published on

A slide presentation detailing the basics of JSON and it's uses. Presented at the BIFC Front End Developers Meetup in Stamford CT on May 14, 2013.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,771
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
718
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

JSON: The Basics

  1. 1. BUILT IN FAIRFIELD COUNTY:FRONT END DEVELOPERS MEETUPTUES. MAY 14, 2013JSON: The Basics
  2. 2. About Jeff Fox (@jfox015) 16 year web development professional (Almost) entirely self taught Has used various Ajax-esque data technologies since2000, including XML, MS data islands and AMF forFlash Develops JavaScript based web apps that rely onJSON for data workflow
  3. 3. Overview What is JSON? Comparisons with XML Syntax Data Types Usage Live Examples
  4. 4. What is JSON?
  5. 5. JSON is… A lightweight text based data-interchange format Completely language independent Based on a subset of the JavaScript ProgrammingLanguage Easy to understand, manipulate and generate
  6. 6. JSON is NOT… Overly Complex A “document” format A markup language A programming language
  7. 7. Why use JSON? Straightforward syntax Easy to create and manipulate Can be natively parsed in JavaScript using eval() Supported by all major JavaScript frameworks Supported by most backend technologies
  8. 8. JSON vs. XML
  9. 9. Much Like XML Plain text formats “Self-describing“ (human readable) Hierarchical (Values can contain lists of objects orvalues)
  10. 10. Not Like XML Lighter and faster than XML JSON uses typed objects. All XML values are type-less strings and must be parsed at runtime. Less syntax, no semantics Properties are immediately accessible to JavaScriptcode
  11. 11. Knocks against JSON Lack of namespaces No inherit validation (XML has DTD andtemplates, but there is JSONlint) Not extensible It’s basically just not XML
  12. 12. Syntax
  13. 13. JSON Object Syntax Unordered sets of name/value pairs Begins with { (left brace) Ends with } (right brace) Each name is followed by : (colon) Name/value pairs are separated by , (comma)
  14. 14. JSON Examplevar employeeData = {"employee_id": 1234567,"name": "Jeff Fox","hire_date": "1/1/2013","location": "Norwalk, CT","consultant": false};
  15. 15. Arrays in JSON An ordered collection of values Begins with [ (left bracket) Ends with ] (right bracket) Name/value pairs are separated by , (comma)
  16. 16. JSON Array Examplevar employeeData = {"employee_id": 1236937,"name": "Jeff Fox","hire_date": "1/1/2013","location": "Norwalk, CT","consultant": false,"random_nums": [ 24,65,12,94 ]};
  17. 17. Data Types
  18. 18. Data Types: Strings Sequence of 0 or more Unicode characters Wrapped in "double quotes“ Backslash escapement
  19. 19. Data Types: Numbers Integer Real Scientific No octal or hex No NaN or Infinity – Use null instead.
  20. 20. Data Types: Booleans & Null Booleans: true or false Null: A value that specifies nothing or no value.
  21. 21. Data Types: Objects & Arrays Objects: Unordered key/value pairs wrapped in { } Arrays: Ordered key/value pairs wrapped in [ ]
  22. 22. JSON Usage
  23. 23. How & When to use JSON Transfer data to and from a server Perform asynchronous data calls without requiringa page refresh Working with data stores Compile and save form or user data for localstorage
  24. 24. Where is JSON used today? Anywhere and everywhere!And many,many more!
  25. 25. Simple Example
  26. 26. Simple Demo Build a JSON data object in code Display raw output Display formatted output Manipulate via form input
  27. 27. Questions?
  28. 28. Resources Simple Demo on Github:https://github.com/jfox015/BIFC-Simple-JSON-Demo Another JSON Tutorial:http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/ JSON.org: http://www.json.org/

×