Your SlideShare is downloading. ×
  • Like
JSON: The Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JSON: The Basics

  • 2,018 views
Published

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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,018
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
162
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. BUILT IN FAIRFIELD COUNTY:FRONT END DEVELOPERS MEETUPTUES. MAY 14, 2013JSON: The Basics
  • 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. Overview What is JSON? Comparisons with XML Syntax Data Types Usage Live Examples
  • 4. What is JSON?
  • 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. JSON is NOT… Overly Complex A “document” format A markup language A programming language
  • 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. JSON vs. XML
  • 9. Much Like XML Plain text formats “Self-describing“ (human readable) Hierarchical (Values can contain lists of objects orvalues)
  • 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. 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. Syntax
  • 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. JSON Examplevar employeeData = {"employee_id": 1234567,"name": "Jeff Fox","hire_date": "1/1/2013","location": "Norwalk, CT","consultant": false};
  • 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. 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. Data Types
  • 18. Data Types: Strings Sequence of 0 or more Unicode characters Wrapped in "double quotes“ Backslash escapement
  • 19. Data Types: Numbers Integer Real Scientific No octal or hex No NaN or Infinity – Use null instead.
  • 20. Data Types: Booleans & Null Booleans: true or false Null: A value that specifies nothing or no value.
  • 21. Data Types: Objects & Arrays Objects: Unordered key/value pairs wrapped in { } Arrays: Ordered key/value pairs wrapped in [ ]
  • 22. JSON Usage
  • 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. Where is JSON used today? Anywhere and everywhere!And many,many more!
  • 25. Simple Example
  • 26. Simple Demo Build a JSON data object in code Display raw output Display formatted output Manipulate via form input
  • 27. Questions?
  • 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/