O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

JSON: The Basics

21.084 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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/

×