To use JavaScript in a web page, the <script> element tags are used.


Strictly speaking, the TYPE attribute should be set to 'application/javascript', but since that doesn't work in IE it is more common to either find 'text/javascript' or nothing.


It is recommended to hide the script content from older browsers that do not support javascript to stop them simply displaying the code. This is achieved by commenting out just before the script content, causing older browsers to ignore the script whilst newer browsers will run it.


Also, you may sometimes find // <! [CDATA[ just after the opening <script> tag and its associated // ]]> just before the closing </script> tag. These commented out lines inform XHTML supporting browsers that the content of the script is character data and should not be interpreted as XHTML markup, and are generally not bothered with but is good to know just in case.


Save & refresh browser:

Javascript goes here!



If JavaScript is not enabled or the browser does not support JavaScript, a message can be displayed to the user using the <noscript> element, and is generally placed after the <script> tags, like so:

Save & refresh browser:

Please enable JavaScript, or try a JavaScript enabled browser.



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




Scripts 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.




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:




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


<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