Let’s analyze a simple code snippet on canvasjs.com
Continued from the previous story, let's do some analysis on the following code snippet on canvasjs.com based on HTML, CSS and Javascript:
HTML part
Generic structure:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
HTML <script> Tag
The <script> tag is used to embed a client-side script (JavaScript). It either contains scripting statements, or it points to an external script file through the src attribute. A list of <script> tag attributes is shown below:
The <script> tag is included inside <head> section.
On line 4, the type attribute is used to specify the media type of the script. While on line 34, the src attribute is used to specify the URL of an external script file (which can be found from canvasjs website).
Javascript part
Javascript Window
The
windowobject is supported by all browsers. It represents the browser's window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object.
onload Event
The onload event occurs when an object has been loaded.
Syntax: object.onload = function(){myScript};
From the syntax, we can see that from line 7-> 26 is the script to be loaded to window.
The script is pretty straightforward with a theme, title, a choice of animation and data. We can freely change all of these according to our own context except data points. The hardest thing here is to load data points into script, which will be discussed in a following story.
