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 (also known as inline), 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 other 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. 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".
As with most HTML elements the <script> body must always be terminated with the </script> element.
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:
HTML file:
<script src="/j-scripts/myjscript.js" type="text/javascript"> </script>
myjscript.js file:
document.writeln ("This is contained in an external JavaScript file")
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. Note that the script contained in the external .js file does not require the <script> and </script> elements.
Where to place JavaScript in a Web Page
In this 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.