json: the basics
DESCRIPTION
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.TRANSCRIPT
![Page 1: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/1.jpg)
BUILT IN FAIRFIELD COUNTY: FRONT END DEVELOPERS MEETUP
TUES. MAY 14, 2013
JSON: The Basics
![Page 2: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/2.jpg)
About Jeff Fox (@jfox015)
16 year web development professional
(Almost) entirely self taught
Has used various Ajax-esque data technologies since 2000, including XML, MS data islands and AMF for Flash
Develops JavaScript based web apps that rely on JSON for data workflow
![Page 3: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/3.jpg)
Overview
What is JSON?
Comparisons with XML
Syntax
Data Types
Usage
Live Examples
![Page 4: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/4.jpg)
What is JSON?
![Page 5: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/5.jpg)
JSON is…
A lightweight text based data-interchange format
Completely language independent
Based on a subset of the JavaScript Programming Language
Easy to understand, manipulate and generate
![Page 6: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/6.jpg)
JSON is NOT…
Overly Complex
A “document” format
A markup language
A programming language
![Page 7: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/7.jpg)
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
![Page 8: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/8.jpg)
JSON vs. XML
![Page 9: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/9.jpg)
Much Like XML
Plain text formats
“Self-describing“ (human readable)
Hierarchical (Values can contain lists of objects or values)
![Page 10: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/10.jpg)
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 JavaScript code
![Page 11: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/11.jpg)
Knocks against JSON
Lack of namespaces
No inherit validation (XML has DTD and templates, but there is JSONlint)
Not extensible
It’s basically just not XML
![Page 12: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/12.jpg)
Syntax
![Page 13: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/13.jpg)
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)
![Page 14: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/14.jpg)
JSON Example
var employeeData = { "employee_id": 1234567, "name": "Jeff Fox", "hire_date": "1/1/2013", "location": "Norwalk, CT","consultant": false
};
![Page 15: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/15.jpg)
Arrays in JSON
An ordered collection of values
Begins with [ (left bracket)
Ends with ] (right bracket)
Name/value pairs are separated by , (comma)
![Page 16: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/16.jpg)
JSON Array Example
var employeeData = { "employee_id": 1236937, "name": "Jeff Fox", "hire_date": "1/1/2013", "location": "Norwalk, CT","consultant": false,
"random_nums": [ 24,65,12,94 ]};
![Page 17: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/17.jpg)
Data Types
![Page 18: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/18.jpg)
Data Types: Strings
Sequence of 0 or more Unicode characters
Wrapped in "double quotes“
Backslash escapement
![Page 19: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/19.jpg)
Data Types: Numbers
Integer
Real
Scientific
No octal or hex
No NaN or Infinity – Use null instead.
![Page 20: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/20.jpg)
Data Types: Booleans & Null
Booleans: true or false
Null: A value that specifies nothing or no value.
![Page 21: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/21.jpg)
Data Types: Objects & Arrays
Objects: Unordered key/value pairs wrapped in { }
Arrays: Ordered key/value pairs wrapped in [ ]
![Page 22: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/22.jpg)
JSON Usage
![Page 23: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/23.jpg)
How & When to use JSON
Transfer data to and from a server
Perform asynchronous data calls without requiring a page refresh
Working with data stores
Compile and save form or user data for local storage
![Page 24: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/24.jpg)
Where is JSON used today?
Anywhere and everywhere!
And many, many more!
![Page 25: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/25.jpg)
Simple Example
![Page 26: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/26.jpg)
Simple Demo
Build a JSON data object in code
Display raw output
Display formatted output
Manipulate via form input
![Page 27: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/27.jpg)
Questions?
![Page 28: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/28.jpg)
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/
![Page 29: JSON: The Basics](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7437b4a7959796e8b4617/html5/thumbnails/29.jpg)