Professional JavaScript For Web Developers

Chapter 5
❑
❑
Code Maintenance — If JavaScript code is sprinkled throughout various pages, code maintenance
becomes a nightmare. It is much easier to have a directory for all JavaScript files so that when a
JavaScript error occurs, there is no question about where the code is located.
Caching — Browsers cache all externally linked JavaScript files according to specific settings,
meaning that if two pages are using the same file, it is only downloaded once. This ultimately
means faster loading times. Including the same code in multiple pages is not only wasteful, but
also increases the page size and thus increases the download time.
Tag placement
Generally speaking, it is common to place all code and function definitions in the tag of an
HTML page so that the code is fully loaded and ready for use once the body is rendered. The only code
that should appear within the tag is code that calls the functions defined previously.
When the tag is placed inside of the tag, the script is executed as soon as that part
of the page is downloaded to the browser. This makes it possible to execute JavaScript code before the
entire page is loaded. For example:
Title of Page
function sayHi() {
alert(“Hi”);
}
sayHi();
This is the first text the user will see.
In this code, the sayHi() method is called before any text is displayed on the page, meaning that the
alert pops up before the text “This is the first text the user will see.” is ever rendered. This method of
calling JavaScript inside the of a page is not recommended and should be avoided whenever
possible. Instead, it is recommended to use JavaScript only as an event handler in the body of a page,
such as:
Title of Page
function sayHi() {
alert(“Hi”);
}
128