It is an ordered collection of values The values are separated by comma

,

These are enclosed in square brackets

[]

which means that array begins with

[

and ends with

]

{
   "books": [
      { "language":"Java" , "edition":"second" },
      { "language":"C++" , "lastName":"fifth" },
      { "language":"C" , "lastName":"third" }
   ]
}

string

- double-quoted Unicode

{ "name":"John" }

float

- precision floating-point number

{ "age":30.5 } 

integer

- number without a fractional component

{ "age":30 } 

boolean

- true or false

{ "sale":true }

array

- an ordered sequence of values

{ "employees":[ "John", "Anna", "Peter" ] }

object

- an unordered collection of

key:value

pairs

{ "employee":{ "name":"John", "age":30, "city":"New York" } } 

null

{ "middlename":null } 

Curly braces

{}

hold objects Square brackets

[]

hold arrays Data is represented in

key/value

pairs Each

key

is followed by colon

:

key/value

pairs are separated by comma

,

Array values are separated by comma

,

... Basic structure of

JSON

{
   "book": [

      {
         "id": "01",
         "language": "Java",
         "edition": "third",
         "author": "Herbert Schildt"
      },

      {
         "id": "07",
         "language": "C++",
         "edition": "second",
         "author": "E.Balagurusamy"
      }

   ]
}

JSON

stands for

JavaScript Object Notation

JSON

is a way of communicating data with specific rules

JSON

is a syntax for storing and exchanging data

JSON

is text, written with JavaScript object notation The syntax is taken from

JavaScript

but

JSON

is portable with other languages

JSON

is a lightweight data-interchange format It's easy for humans to read and write It's easy for machines to parse and generate A common use of JSON is to exchange data

to/from

a web server

application/json

is the official Internet media type for

JSON

.json

is the

JSON

filename extension

To replace an HTML element, the element.

replaceChild

(newNode, oldNode) method is used. JS

window.onload = function() {
    let p = document.createElement("p");
    p.innerHTML = "This is new";

    // Replaces the first p with the new one
    let parent = document.getElementById("demo");
    parent.replaceChild(p, document.getElementById("p1"));
};

HTML

<div id="demo">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Note: The code above creates a new paragraph element that replaces the existing

p1

paragraph

To remove an HTML element, we can select the parent of the element and use the

removeChild

(node) method JS

window.onload = function() {
    var parent = document.getElementById("demo");
    parent.removeChild(document.getElementById("p1"));
};

HTML

<div id="demo">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

element.

insertBefore

(node1, node2) inserts

node1

as a child before

node2

JS

function myFunction() {
  // Creates new list item
  let newItem = document.createElement("li");
  newItem.innerHTML = "Water";
  
  // Puts list item into myList before "tea" item
  let list = document.getElementById("myList");
  list.insertBefore(newItem, document.getElementById("tea"));
}

HTML

<ul id="myList">
  <li>Coffee</li>
  <li id="tea">Tea</li>
  <li>Cocacola</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>

This code creates a new paragraph and adds it to the existing div at the end of its content. JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {

    //creating a new paragraph
    var p = document.createElement("p");
    p.innerHTML = 'Some new text 1';
       
    //adding the paragraph to the div
    var div = document.getElementById("demo"); 
    div.appendChild(p);
};

HTML

<div id="demo">some content</div>

All style attributes can be accessed using the style object of the element. JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
    var x = document.getElementById("demo");
    x.style.color = '#6600FF';
    x.style.width = '100px';
};

HTML

<div id="demo" style="width:400px">Some text inside this DIV</div>

Note: All CSS properties can be set and modified using JavaScript. We cannot use dashes (-) in the property names: these are replaced with

camelCase

versions, where the compound words begin with a capital letter. For example: the

background-color

property should be referred to as

backgroundColor

.

Changing the

href

,

text

of a link JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
    var el = document.getElementsByTagName('a');
    el[0].href= 'http://www.sololearn.com';
};

HTML

<a href="http://www.example.com">Some link</a>
<br />
<a href="https://google.com">Google.com</a>