Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
BUILT IN FAIRFIELD COUNTY:FRONT END DEVELOPERS MEETUPTUES. MAY 14, 2013JSON: The Basics
About Jeff Fox (@jfox015) 16 year web development professional (Almost) entirely self taught Has used various Ajax-esqu...
Overview What is JSON? Comparisons with XML Syntax Data Types Usage Live Examples
What is JSON?
JSON is… A lightweight text based data-interchange format Completely language independent Based on a subset of the Java...
JSON is NOT… Overly Complex A “document” format A markup language A programming language
Why use JSON? Straightforward syntax Easy to create and manipulate Can be natively parsed in JavaScript using eval() S...
JSON vs. XML
Much Like XML Plain text formats “Self-describing“ (human readable) Hierarchical (Values can contain lists of objects o...
Not Like XML Lighter and faster than XML JSON uses typed objects. All XML values are type-less strings and must be parse...
Knocks against JSON Lack of namespaces No inherit validation (XML has DTD andtemplates, but there is JSONlint) Not exte...
Syntax
JSON Object Syntax Unordered sets of name/value pairs Begins with { (left brace) Ends with } (right brace) Each name i...
JSON Examplevar employeeData = {"employee_id": 1234567,"name": "Jeff Fox","hire_date": "1/1/2013","location": "Norwalk, CT...
Arrays in JSON An ordered collection of values Begins with [ (left bracket) Ends with ] (right bracket) Name/value pai...
JSON Array Examplevar employeeData = {"employee_id": 1236937,"name": "Jeff Fox","hire_date": "1/1/2013","location": "Norwa...
Data Types
Data Types: Strings Sequence of 0 or more Unicode characters Wrapped in "double quotes“ Backslash escapement
Data Types: Numbers Integer Real Scientific No octal or hex No NaN or Infinity – Use null instead.
Data Types: Booleans & Null Booleans: true or false Null: A value that specifies nothing or no value.
Data Types: Objects & Arrays Objects: Unordered key/value pairs wrapped in { } Arrays: Ordered key/value pairs wrapped i...
JSON Usage
How & When to use JSON Transfer data to and from a server Perform asynchronous data calls without requiringa page refres...
Where is JSON used today? Anywhere and everywhere!And many,many more!
Simple Example
Simple Demo Build a JSON data object in code Display raw output Display formatted output Manipulate via form input
Questions?
Resources Simple Demo on Github:https://github.com/jfox015/BIFC-Simple-JSON-Demo Another JSON Tutorial:http://iviewsourc...
JSON: The Basics
Nächste SlideShare
Wird geladen in …5
×

JSON: The Basics

21.058 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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/

×