Basic Javascript and JSON

SGHG 3643 (Programming III)
Lab #06 Basic Javascript and JSON exercise

In this tutorial, you will learn how JavaScript is used with JSON with the help of examples. JSON stands for Javascript Object Notation. JSON is a text-based data format that is used to store and transfer data.

Chapters:
0:00 Intro
0:04 Open text editor and write HTML template.
1:34 Create a working directory in local environment and save the file.
2:44 Create a link for stylesheet and the CSS file.
4:22 Write some CSS styling.
5:31 Add a paragraph element with a unique id.
6:26 In the head section, create a script tag for the javascript.
7:20 Create a Javascript function #1.
10:29 Execute / call the Javascript function #1 via onload event.
12:15 Add a div element to display another value from Javascript.
13:38 Create another Javascript function #2.
14:43 Prepare a basic HTML form with a single text input and a submit button.
19:22 Assign some styling for the output from Javascript function #2.
20:47 Loading some JSON data.
21:46 Create another script tag for JSON data.
22:23 Write some random JSON data and assigned it to a variable.
24:27 Add a paragraph element for displaying the JSON values.
25:48 Count number of JSON objects in the array data.
27:47 Read the whole JSON data using Javascript For loop.
28:20 Display the JSON contents in HTML paragraph.
32:13 Create a new Javascript function #3 for displaying the JSON data.
33:31 Call the Javascript function #3 from function #1.
36:21 Create a new Javascript file for storing some JSON data (from a variable).
37:29 Re-format existing JSON data to a minified version using JSON Minifier online tool.
38:30 Load the new Javascript file (with JSON data) in the head section.
40:47 Add a script tag within the body section to load the external Javascript/JSON data.
48:46 Re-organize the onload event using window.onload function.