1.6 Where to Put JavaScript

1.6 Where to Put JavaScript>

Before learning JavaScript, you should be familiar with HTML and how to create an HTML document. This doesn't mean that you have to be an expert, but you should be familiar with the structure of HTML documents and how the tags are used to display various kinds of content on your browser. Once you have a static HTML document, then adding basic JavaScript statements is quite easy. (See Appendix B for an HTML tutorial.)

Client-side JavaScript programs are embedded in an HTML document between HTML head tags <head> and </head> or between the body tags <body> and </body> . Many developers prefer to put JavaScript code within the <head> tags, and at times, as you will see later, it is the best place to store function definitions and objects. If you want text displayed at a specific spot in the document, you may want to place the JavaScript code within the <body> tags (as shown in Example 1.2). Or you may have multiple scripts within a page, and place the JavaScript code within both the <head> and <body> tags. In either case, a JavaScript program starts with a <script> tag, and and ends with a </script> tag. And if the JavaScript code is going to be long and involved, or may be reused, it can be placed in an external file (ending in .js ) and loaded into the page.

When a document is sent to the browser, it reads each line of HTML code from top to bottom, and processes and displays it. As JavaScript code is encountered , it is read and executed by the JavaScript interpreter until it is finished, and then the parsing and rendering of the HTML continues until the end of the document is reached.

Example 1.2

 1   <html> 2   <head><title>First JavaScript Sample</title></head> 3   <body bgcolor="yellow" text="blue"> 4  <script language = "JavaScript"  type="text/javascript">  4  document.writeln("<h2>Welcome to the JavaScript   World!</h1>");  5      </script> 6   <font size="+2">This is just plain old HTML stuff.</font> 7   </body> 8   </html>

EXPLANATION

This is the starting tag for an HTML document.
This is the HTML <head> tag. The <head> tags contain all the elements that don't belong in the body of the document, such as the <title> tags, and JavaScript tags.
The <body> tag defines the background color and text color for the document.
This <script> tag is the starting HTML tag for the JavaScript language. JavaScript instructions are placed between this tag and the closing </script> tag. JavaScript understands JavaScript instructions, not HTML.

The JavaScript writeln function is called for the document. The string enclosed in parentheses is passed to the JavaScript interpreter. If the JavaScript interpreter encounters HTML content, it sends that content to the HTML renderer and it is printed into the document on the browser. The normal HTML parsing and rendering resumes after the closing JavaScript tag is reached.
This is the ending JavaScript tag. The output is shown in Figure 1.4.

Figure 1.4. Example 1.2 output.
HTML tags and text continue in the body of the document.
The body of the document ends here.
This is the ending tag for the HTML document.

1.6 Where to Put JavaScript>

Example 1.2

Figure 1.4. Example 1.2 output.