Placement

JavaScript is executed by the browser at the first statement and moves down continuing to execute each statement as it comes to it.

 

Can be placed in:

  • <head> </head>
  • <body> </body>
  • <head> </head> and <body> </body>
  • External file, often append .js

 

Recommended to place at the end of the html just before the closing </body> tag, since this allows the browser to render the html in the page, and not be slowed up by a potentially long waiting bottleneck for a piece of JavaScript to finish before it renders the rest of the page.

 

General rule of thumb css at the top, JavaScript at the bottom.

 

 

<head>

This example, contained within<head> tags, will show that the browser pauses execution waiting for the OK button to be clicked until it continues rendering the rest of the page:

 

 

<body>

Whereas, this example will show the rendered page in the background and then executes the JavaScript pausing the browser wisitng for the OK button to be clicked:

 

 

Full Javascript code written within the html is referred to being inline (i.e. within the rest of the html code). Whilst this might be fine for small snippets, functions or testing purposes it is recommended for larger JavaScripts to use an external file. This also has the added benefit of allowing code reuse as other file might require access to it.

 

External file

Since the length and complexity of the JavaScript may be unwieldy, and potentially used by other pages, it is recommended to use an external files for your JavaScript.  To use an external file, the file's source name is specified within the opening <script> tag's src attribute

e.g.

<script src="fileName.js"></script>

 

The preferred convention is to use a .js extension for JavaScript files.

 

Given this simple external javascript file:

This can now be called into the html file as follows:

*note: path is relative to calling file

Leave a Reply