Skip to content

Commit d148189

Browse files
paulmcfepaulmcfe
committed
Updates to book 4, chapter 9 example files
1 parent bab2cd2 commit d148189

File tree

5 files changed

+97
-52
lines changed

5 files changed

+97
-52
lines changed

‎bk04ch09/example01.html

+24-18
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,44 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Stringifying a JavaScript object to JSON</title>
5+
<title>Declaring and using JSON variables</title>
66
<style>
77
body {
88
margin: 1em;
99
font-size: 1.5em;
1010
}
11-
pre {
11+
div {
1212
margin-top: .5em;
1313
}
1414
</style>
1515
</head>
1616
<body>
17-
<pre id="output">
18-
</pre>
17+
<div id="output">
18+
</div>
1919

2020
<script>
21+
2122
// Declare a JavaScript object
22-
const userData = {
23-
bgColor: "darkolivegreen",
24-
textColor: "antiquewhite",
25-
textSize: "1.25em",
26-
typefaces: ["Georgia", "Verdana", "serif"],
27-
subscriber: true,
28-
subscriptionType: 3
23+
const customer = {
24+
"account": 853,
25+
"name": "Alfreds Futterkiste",
26+
"supplier": false,
27+
"recentOrders": [28394,29539,30014],
28+
"contact": {
29+
"name": "Maria Anders",
30+
"phone": "030-0074321",
31+
"email": "[email protected]"
32+
}
2933
}
30-
31-
// Stringify it
32-
const userDataJSON = JSON.stringify(userData, null, " ");
33-
34-
// Display the result
35-
document.querySelector('#output').innerHTML = userDataJSON;
36-
console.log(userDataJSON);
34+
35+
// Display the results
36+
const outputString =
37+
`Customer’s account number: ${customer.account}<br>
38+
Customer’s account name: ${customer.name}<br>
39+
Customer’s 2nd order number: ${customer.recentOrders[1]}<br>
40+
Customer’s account email: ${customer.contact.email}`;
41+
42+
document.querySelector('#output').innerHTML = outputString;
3743
</script>
3844
</body>
3945
</html>

‎bk04ch09/example02.html

+20-17
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,38 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Converting a JSON string to a JavaScript object</title>
5+
<title>Stringifying a JavaScript object to JSON</title>
66
<style>
77
body {
88
margin: 1em;
99
font-size: 1.5em;
1010
}
11+
pre {
12+
margin-top: .5em;
13+
}
1114
</style>
1215
</head>
1316
<body>
17+
<pre id="output">
18+
</pre>
19+
1420
<script>
15-
// Declare a JSON string
16-
const userDataJSON = `{
17-
"bgColor": "darkolivegreen",
18-
"textColor": "antiquewhite",
19-
"textSize": 20,
20-
"typefaces": [
21-
"Georgia",
22-
"Verdana",
23-
"serif"
24-
],
25-
"subscriber": true,
26-
"subscriptionType": 3
27-
}`;
21+
// Declare a JavaScript object
22+
const userData = {
23+
bgColor: "darkolivegreen",
24+
textColor: "antiquewhite",
25+
textSize: "1.25em",
26+
typefaces: ["Georgia", "Verdana", "serif"],
27+
subscriber: true,
28+
subscriptionType: 3
29+
}
2830

29-
// Parse it
30-
const userData = JSON.parse(userDataJSON);
31+
// Stringify it
32+
const userDataJSON = JSON.stringify(userData, null, " ");
3133

3234
// Display the result
33-
console.log(userData);
35+
document.querySelector('#output').innerHTML = userDataJSON;
36+
console.log(userDataJSON);
3437
</script>
3538
</body>
3639
</html>

‎bk04ch09/example03.html

+19-12
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Adding Data to Web Storage</title>
5+
<title>Converting a JSON string to a JavaScript object</title>
66
<style>
77
body {
88
margin: 1em;
@@ -12,18 +12,25 @@
1212
</head>
1313
<body>
1414
<script>
15-
// Declare a JavaScript object
16-
const userData = {
17-
bgColor: "darkolivegreen",
18-
textColor: "antiquewhite",
19-
textSize: "1.25em",
20-
typefaces: ["Georgia", "Verdana", "serif"],
21-
subscriber: true,
22-
subscriptionType: 3
23-
}
15+
// Declare a JSON string
16+
const userDataJSON = `{
17+
"bgColor": "darkolivegreen",
18+
"textColor": "antiquewhite",
19+
"textSize": "1.25em",
20+
"typefaces": [
21+
"Georgia",
22+
"Verdana",
23+
"serif"
24+
],
25+
"subscriber": true,
26+
"subscriptionType": 3
27+
}`;
28+
29+
// Parse it
30+
const userData = JSON.parse(userDataJSON);
2431

25-
// Store it
26-
localStorage.setItem('user-data', JSON.stringify(userData));
32+
// Display the result
33+
console.log(userData);
2734
</script>
2835
</body>
2936
</html>

‎bk04ch09/example04.html

+12-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Getting Data from Web Storage</title>
5+
<title>Adding Data to Web Storage</title>
66
<style>
77
body {
88
margin: 1em;
@@ -12,11 +12,18 @@
1212
</head>
1313
<body>
1414
<script>
15-
// Get the data from storage
16-
const userData = JSON.parse(localStorage.getItem('user-data'));
15+
// Declare a JavaScript object
16+
const userData = {
17+
bgColor: "darkolivegreen",
18+
textColor: "antiquewhite",
19+
textSize: "1.25em",
20+
typefaces: ["Georgia", "Verdana", "serif"],
21+
subscriber: true,
22+
subscriptionType: 3
23+
}
1724

18-
// Display it
19-
console.log(userData);
25+
// Store it
26+
localStorage.setItem('user-data', JSON.stringify(userData));
2027
</script>
2128
</body>
2229
</html>

‎bk04ch09/example05.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Getting Data from Web Storage</title>
6+
<style>
7+
body {
8+
margin: 1em;
9+
font-size: 1.5em;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<script>
15+
// Get the data from storage
16+
const userData = JSON.parse(localStorage.getItem('user-data'));
17+
18+
// Display it
19+
console.log(userData);
20+
</script>
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)