Web Page Content Update

JSON
1. JSON is just a string - but there are rules that it must follow
2. Some examples of JSON strings
JSON methods
Additional resources

You can code a script which will take an input from an HTML form and display the text that a user types in on the screen.

var h1 = document.createElement('h1')
h1.innerText = "Type into the input to make this text change"

var input = document.createElement('input')
input.setAttribute('type', 'text')

document.body.innerText = '';
document.body.appendChild(h1);
document.body.appendChild(input);

For the event handling:

input.addEventListener('change', function() {
	console.log(input.value)
})

Inserting text content from an array:

function handleClicks() {
  switch(h1.innerText) {
    case arr[0]: h1.innerText = arr[1];
			break;
    case arr[1]: h1.innerText = arr[2];
			break;
    case arr[2]: h1.innerText = arr[3];
			break;
    default: h1.innerText = arr[0];
			break;
  }
}

JSON

Around 2001, Douglas Crockford came up with a data interchange format based on JavaScript objects. The name given to this format was JSON, which is JavaScript Object Notation.

the two major reasons for the JSON format becoming the dominant data interchange format that it is today is two-fold:

First, it’s very lightweight, with syntax very similar to “a stringified JavaScript object”. You’ll learn more about the specifics of this later.
Second, it’s easier to handle in JavaScript code, since, JSON, after all, is just JavaScript.

JSON is just a string - but there are rules that it must follow

JSON is a string, but it must be a properly-formatted string. In other words, it must adhere to some rules.

If a JSON string is not properly formatted, JavaScript would not be able to parse it into a JavaScript object.

JSON can work with some primitives and some complex data types, as described below.

Only a subset of values in JavaScript can be properly stringified to JSON and parsed from a JavaScript object into a JSON string.

These values include:

primitive values: strings, numbers, boolean, null
complex values: objects and arrays (no functions!)
Objects have double-quoted strings for all keys
Properties are comma-delimited both in JSON objects and in JSON arrays, just like in regular JavaScript code
String properties must be surrounded in double quotes. For example: "fruits", "vegetables"
Number properties are represented using the regular JavaScript number syntax; e.g
5, ` 10, 1.2`
Boolean properties are represented using the regular JavaScript boolean syntax, that is:
true
and
false
Null as a property is the same as in regular JavaScript; it’s just a null

You can use object literals and array literals, as long as you follow the above rules

What happens if you try to stringify a data type which is not accepted in JSON syntax?

For example, what if you try to stringify a function? The operation will silently fail.

If you try to stringify some other data types, such as a BigInt number, say 123n, you’d get the following error: Uncaught TypeError: Do not know how to serialize a BigInt.

Some examples of JSON strings

Finally, here is an example of a stringified JSON object, with a single key-value pair:

'{"color":"red"}'

Here’s a bit more complex JSON object:

'{"color":"red", "nestedObject": { "color": "blue" } }'

The above JSON object encodes two properties:

"color":"red"
"nestedObject": { "color": "blue" }

It’s also possible to have a JSON string encoding just an array:

'["one", "two", "three"]'

The above JSON string encodes an array holding three items, three values of the string data type. Obviously, just like objects, arrays can nest other simple or complex data structures.

For example:

'[{ "color": "blue" }, {"color: "red"}]'