Servage Magazine

JavaScript allows you to create highly responsive interfaces that improve the user experience and provide dynamic functionality, without waiting for the server to load up a new page. For example, we can use JavaScript to do any of the following:

• Suggest the complete term a user might be entering in a search box as he types. You can see this in action on Google.com.

• Request content and information from the server and inject it into the current document as needed, without reloading the entire page—this is commonly referred to as “Ajax.”

• Show and hide content based on a user clicking on a link or heading, to create a “collapsible” content area.

• Test for browsers’ individual features and capabilities. For example, one can test for the presence of “touch events,” indicating that the user is interacting with the page through a mobile device’s browser, and add more touch-friendly styles and interaction methods.

• Fill in gaps where a browser’s built-in functionality falls short, or add some of the features found in newer browsers to older browsers. These kinds of scripts are usually called shims or polyfills.

• Load an image or content in a custom styled “lightbox”—isolated on the page using CSS—after a user clicks on a thumbnail version of the image.

This list is nowhere near exhaustive!

Adding JavaScript to a Page

Like CSS, you can embed a script right in a document or keep it in an external file and link it to the page. Both methods use the script element.

Embedded script

To embed a script on a page, just add the code as the content of a script element:

<script>
… JavaScript code goes here
</script>

External scripts
The other method uses the src attribute to point to a script file (with a .js suffix) by its URL. In this case, the script element has no content.

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

The advantage to external scripts is that you can apply the same script to multiple pages (the same benefit external style sheets offer). The downside, of course, is that each external script requires an additional HTTP request of the server, which slows down performance.
Script placement
The script element go anywhere in the document, but the most common places for scripts are in the head of the document and at the very end of the body. It is recommended that you don’t sprinkle them throughout the document, because they would be difficult to find and maintain.

For most scripts, the end of the document, just before the </body> tag, is the preferred placement because the browser will be done parsing the document and its DOM structure. Consequently, that information will be ready and available by the time it gets to the scripts and they can execute faster.

In addition, the script download and execution blocks the rendering of the page, so moving the script to the bottom improves the perceived performance. However, in some cases, you might want your script to do something before the body completely loads, so putting it in the head will result in better performance.