The document provides an overview of JavaScript and JSON, explaining that JSON is a format for sharing data that is derived from JavaScript and is used to transfer data between a server and browser. It describes the basic syntax of JSON, including that it uses name-value pairs separated by commas within curly brackets for objects and square brackets for arrays, and supports strings, numbers, booleans, arrays, objects and null as data types. Examples are given to illustrate JSON syntax and how it can be parsed in JavaScript to convert it into a JavaScript object.

1. JavaScript and JSON
Front end development tool

2. Overview
• Required knowledge before working with JS and JSON
• What is JSON?
• Why use JSON?
• JSON vs XML
• Syntax
• Data Types
• Usage
• Simple example

3. What you should know before working with
JavaScript and JSON.
• JavaScript and JSON is not for a beginner
• JSON is that it is a conversation that happens between
your server and your browser.
• You should be familiar with building online projects and
know how HTML works.

4. What is JSON?
JSON is ( JavaScript Object Notation ).
• Format for sharing data.
• Derived from JavaScript.
• Language independent
• An alternative to XML

5. What is JSON?
JSON is NOT ..
• Overly Complex
• A “document” format
• A markup language
• A programming language

6. Why use JSON?
• Easy to read
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}

7. Why use JSON?
• Easy to parse
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
// returns John
person.name;

8. Why use JSON?
• Leaner than XML
Advantage
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
<persons>
<person>
<name>John</name>
<age>30</age>
</person>
</persons>

9. Why use JSON?
• Easy to read
• Easy to parse
Advantage
• Leaner than XML
• Supported by all major JavaScript frameworks
• Supported by most backend technologies

10. JSON vs XML
• Self describing, human readable.
• Hierarchical (values within values)
• Can be parsed and used by lots of programming languages
Much like XML

11. JSON vs XML
• JSON doesn't use end tag
• JSON is shorter
Not like XML
• JSON is quicker to read and write
• JSON can use arrays

12. Syntax
• Unordered sets of name/value pairs
• Begins with { (left brace)
• Each name is followed by : (colon)
• Name/value pairs are separated by , (comma)
• Ends with } (right brace)

13. Syntax
var person = {
"name":"John",
"age":30,
"attendance":true,
"car":null
}
JSON Example

14. Syntax
Arrays in JSON
• An ordered collection of values
• Begins with [ (left bracket)
• Name/value pairs are separated by , (comma)
• Ends with ] (right bracket)

15. Syntax
var person = {
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
JSON Array Example

16. Data Types
• A String
• A Number
• An Array
• An Object (JSON object)
In JSON, values must be one of the following data types:
• A Boolean
• Null

17. Data Types
Strings in JSON must be written in double quotes.
JSON String
{ "name":"John" }
Numbers in JSON must be an integer or a floating point.
JSON Numbers
{ "age":30 }

18. Data Types
Objects as values in JSON must follow the same rules as JSON objects.
JSON Objects
{
"employee":{ "name":"John", "age":30, "city":"New
York" }
}
Values in JSON can be arrays.
JSON Arrays
{
"employees":[ "John", "Anna", "Peter" ]
}

19. Data Types
Values in an array can also be another array, or even
another JSON object:
JSON Arrays
employee = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus"] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}

20. Data Types
• JSON Objects: Unordered key/value pairs wrapped in { }
• JSON Arrays: Ordered key/value pairs wrapped in [ ]
• Each key/value pair is separated by a comma (,).
• Keys and values are separated by a colon (:).
Object & Array
• Keys must be strings, and values must be a valid JSON
data type (string, number, object, array, boolean or
null).

21. Data Types
Values in JSON can be true/false.
JSON Booleans
{ "sale":true }
Values in JSON can be null.
JSON null
{ "middlename":null }

22. Usage
Anywhere and everywhere!
eTime

23. Simple example
Parsing JSON
Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
Use the JavaScript function JSON.parse() to convert text into a
JavaScript object:
var obj = JSON.parse('{ "name":"John", "age":30,
"city":"New York"}');

24. Recourses
https://www.w3schools.com/js/js_json.asp
The JSON basics course for Jeff Fox
Javascript and JSON course for Ray Villalobos

25. Islam Abdelzaher ...