Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ad8a82b

Browse files
Chapter 2 and 3 updated
Chapter 2 and 3 updated
1 parent d013f29 commit ad8a82b

File tree

1 file changed

+201
-2
lines changed

1 file changed

+201
-2
lines changed

‎readme.md

Lines changed: 201 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,9 @@ Topics included/covered
8585
- 1.14. [Nested JSON Objects](#114-nested-json-objects)
8686
- 1.15. [Looping through JSON Array-Objects](#115-looping-through-json-array-objects)
8787

88-
2. [JSON Resources](#2-json-resources)
88+
2. [JSON with jQuery](#2-json-with-jquery)
89+
90+
3. [JSON Resources](#3-json-resources)
8991

9092
1 Introduction to JSON
9193
=====================
@@ -748,6 +750,7 @@ Second or another way to access, read or modify JSON object data is Square brack
748750
</html>
749751
```
750752

753+
<hr/>
751754

752755
### 1.15.2. Looping Through an Object
753756

@@ -823,6 +826,8 @@ Second or another way to access, read or modify JSON object data is Square brack
823826
</html>
824827
```
825828

829+
<hr/>
830+
826831
> **Syntax & Example**: `1.15.3-looping-json-array.html`
827832
828833
```html
@@ -894,7 +899,201 @@ Second or another way to access, read or modify JSON object data is Square brack
894899
</html>
895900
```
896901

897-
2 JSON Resources
902+
903+
2 JSON with jQuery
904+
=====================
905+
- jQuery is a lightweight, `"write less, do more"`, JavaScript library
906+
- jQuery is a fast, small, feature-rich and easy to learn JavaScript library
907+
- It makes things like `HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers`
908+
- With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript
909+
- `jQuery is just a JavaScript library` - jQuery greatly simplifies JavaScript programming
910+
- All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code
911+
912+
We can download the jQuery library script files from jQuery official website `https://jquery.com/download/` or use CDN (Content Delivery Network / Content Distribution Network) links like `https://cdnjs.com/libraries/jquery/` or `https://developers.google.com/speed/libraries/`
913+
914+
### 2.1. jQuery JSON basics
915+
916+
> **Syntax & Example**: `2.json-with-jquery/2.1-jquery-json-basic.html`
917+
918+
```html
919+
<!DOCTYPE html>
920+
<html lang="en">
921+
922+
<head>
923+
<meta charset="UTF-8">
924+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
925+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
926+
<title>jQuery-json-basics</title>
927+
928+
<script src="./_library/jquery-3.4.1.min.js"></script>
929+
<script type="text/javascript">
930+
931+
$(document).ready(function() {
932+
// creating JSON object
933+
var Technology = {
934+
"technologyName": "JSON (JavaScript Object Notation)",
935+
"usage": "Data storage and exchange format",
936+
"version": 1.0,
937+
"cost": 0.00
938+
}
939+
940+
// accessing data from a json object
941+
// JsonObjectName.propertyName
942+
console.log(Technology.technologyName); // JSON (JavaScript Object Notation)
943+
944+
var resultText = '';
945+
resultText += 'Technology Name = ' + Technology.technologyName + '<br/>';
946+
resultText += 'Usage = ' + Technology.usage + '<br/>';
947+
resultText += 'Version = ' + Technology.version + '<br/>';
948+
resultText += 'Cost = ' + Technology.cost + '<br/>';
949+
950+
// assign data to html element
951+
$('#textContainerDiv').html(resultText);
952+
953+
});
954+
</script>
955+
956+
</head>
957+
958+
<body>
959+
960+
<div id="textContainerDiv"></div>
961+
962+
</body>
963+
964+
</html>
965+
```
966+
967+
<hr/>
968+
969+
### 2.2. jQuery JSON Arrays
970+
971+
> **Syntax & Example**: `2.json-with-jquery/2.2-jquery-json-array.html`
972+
973+
```html
974+
<!DOCTYPE html>
975+
<html lang="en">
976+
977+
<head>
978+
<meta charset="UTF-8">
979+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
980+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
981+
<title>jQuery-json-array</title>
982+
983+
<script src="./_library/jquery-3.4.1.min.js"></script>
984+
<script type="text/javascript">
985+
986+
$(document).ready(function() {
987+
// creating JSON object
988+
var TechnologiesJSONArray = [
989+
{
990+
"technologyName": "JSON (JavaScript Object Notation)",
991+
"usage": "Data storage and exchange format",
992+
"version": 1.0,
993+
"cost": 0.00
994+
},
995+
996+
{
997+
"technologyName": "HTML (HyperText Markup Language)",
998+
"usage": "To create a web page pages/web sites/web apps",
999+
"version": 5.0,
1000+
"cost": 0.00
1001+
}
1002+
];
1003+
1004+
// accessing data from a json object
1005+
// jsonObject[arrayPosition/ indexPosition].propertyName;
1006+
console.log(TechnologiesJSONArray[0].version); // 1.0
1007+
console.log(TechnologiesJSONArray[1].version); // 5.0
1008+
1009+
var technologyNameText = TechnologiesJSONArray[0].technologyName + '<br>' ;
1010+
technologyNameText += TechnologiesJSONArray[1].technologyName;
1011+
1012+
// assign data to html element
1013+
$('#textContainerDiv').html(technologyNameText);
1014+
1015+
});
1016+
</script>
1017+
1018+
</head>
1019+
1020+
<body>
1021+
1022+
<div id="textContainerDiv"></div>
1023+
1024+
</body>
1025+
1026+
</html>
1027+
```
1028+
1029+
<hr/>
1030+
1031+
1032+
### 2.3. jQuery nested JSON Objects
1033+
1034+
> **Syntax & Example**: `2.json-with-jquery/2.3-jquery-json-nested-object.html`
1035+
1036+
```html
1037+
<!DOCTYPE html>
1038+
<html lang="en">
1039+
1040+
<head>
1041+
<meta charset="UTF-8">
1042+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1043+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1044+
<title>jQuery-json-nested-objectes</title>
1045+
1046+
<script src="./_library/jquery-3.4.1.min.js"></script>
1047+
<script type="text/javascript">
1048+
1049+
$(document).ready(function() {
1050+
// creating JSON object
1051+
var TechnologyJSONObject = {
1052+
"Json": {
1053+
"technologyName": "JSON (JavaScript Object Notation)",
1054+
"usage": "Data storage and exchange format",
1055+
"version": 1.0,
1056+
"cost": 0.00
1057+
},
1058+
1059+
"Html": {
1060+
"technologyName": "HTML (HyperText Markup Language)",
1061+
"usage": "To create a web page pages/web sites/web apps",
1062+
"version": 5.0,
1063+
"cost": 0.00
1064+
},
1065+
};
1066+
1067+
// accessing data from a json object
1068+
// jsonMainObject.jsonSubObjectName.propertyName;
1069+
console.log(TechnologyJSONObject.Json.version); // 1.0
1070+
console.log(TechnologyJSONObject.Html.version); // 5.0
1071+
1072+
// square bracket syntax
1073+
console.log(TechnologyJSONObject.Json["version"]); // 1.0
1074+
console.log(TechnologyJSONObject.Html["version"]); // 5.0
1075+
1076+
var technologyNameText = TechnologyJSONObject.Json.technologyName + '<br>' ;
1077+
technologyNameText += TechnologyJSONObject.Html.technologyName;
1078+
1079+
// assign data to html element
1080+
$('#textContainerDiv').html(technologyNameText);
1081+
1082+
});
1083+
</script>
1084+
1085+
</head>
1086+
1087+
<body>
1088+
1089+
<div id="textContainerDiv"></div>
1090+
1091+
</body>
1092+
1093+
</html>
1094+
```
1095+
1096+
3 JSON Resources
8981097
=====================
8991098

9001099
> ### JSON Editor Online - view, edit and format JSON online

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /