Embedding JavaScript into Web pages

Now that we have looked at the history of JavaScript and tried some simple example JavaScript code it is time to explore the mechanisms for including JavaScript into web pages.

The <script> element

JavaScript is embedded into HTML and XHTML documents using the <script> element. This element can be used to embed the javaScript directly into the web page, or to specify an external file that contains the JavaScript.

The <script> element is used with a number of attributes:

• defer - used to inform the browser that the script associated with this <script> element generates content (in otehr words the document.write() method is used). This can be either true or false. The default setting (i.e if this is not specified) is false.

• language - This argument used to notify the version of JavaScript that was contained within the corresponding <script> elements. This argument is now deprecated.

• src- Specifies URL of an external file containing the JavaScript can be found. This argument overrides any JavaScript contained within the body of this <script> element.

• type - indicates to the browser the type of content contained within the <script> body. This is typically be set to "text/javascript".

A typical use of the <script> element when embedding the script directly into an HTML file might appear as follows:

<script type="text/javascript">
// JavaScript code goes here
</script>

An example of using an external file to contain the JavaScript is as follows:

<script src="/j-scripts/myjscript.js" type="text/javascript">
</script>

The above example instructs the browser to load the JavaScript from the myjscript.js file located on the /j-scripts sub-directory of the local web server. It is possible to specify any valid URL here so this could be a file located on any accessible web server if required.

Whether to use inline or external JavaScript

In the section we have looked and both inline and external JavaScript (using the src argument of the <script> element. The question now arises as to which is the best approach. The general recommendation is that JavaScript functions should be placed in external src files wherever possible. The reasoning behind this is that if you have JavaScript code that is used on multiple plages you can modify this code in one place (the external JavaScript file) without having to edit every page that contains the code.