JavaScript Best Practices recommends that all JavaScript code should be placed within external JavaScript files. There are different viewpoints of including JavaScript in the head or the body, but generally the following rules apply:
- Place the JavaScript in the body when the JavaScript dynamically creates web page content as the page is being loaded.
- JavaScript defined in functions used for page events should be placed in the head tag, as this is loaded before the body.
While it is interesting to find out the inserting the JavaScript in the body can be avoided altogether by using the DOM.As the Object Oriented Approach is catching more popularity in the Development World, developers have started to create reusable JavaScript Objects which can be used in several projects/applications. The best way to do this was to create the JavaScript code in separate files and provide a link to each in the web page.All the overheads that occur are overridden by the benefits. The script files are loaded into the page in the order of being processed unless the defer keyword is used. A script file should be treated as if the code is actually included in the page; there is no difference between code in script files and the JavaScript blocks.The major difference between JavaScript and other Object Oriented languages is that: it doesn’t use classes.The simple code to include a JavaScript file:<script type=”text/JavaScript” src=”abc.js”> </script>If you set the defer to a value “defer”, it indicates to the browser that the script is not going to generate any document content, and the processing of he page is completed and the script is looked into once the page has been processed and displayed. This can help speed up the loading of large pages with larger blocks of JavaScript.The simple code to for the JavaScript would become:<script type=”text/JavaScript” defer=”defer”> … </script>
