| home / programming / prof_java / 1 |    [previous][next] |
|
|
|
When should you write code inline versus writing the code in an external file? Although no hard and fast rules exist about when to use either method, the general consensus is that large amounts of JavaScript should never be included inline for a number of reasons:
|
Tag placement
Generally speaking, it is common to place all code and function definitions
in the <head/> 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 <body/> tag is code that calls
the functions defined previously.
When the <script/> tag is placed inside of the <body/>
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:
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 <body/> 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:
Here, the <input/> tag is used to create a button that calls
sayHi() when clicked. The onclick
attribute specifies an event handler, which is the code that responds to a given
event. Events and event
handlers are discussed further in Chapter 9, “All about Events.”
Note that JavaScript begins running as soon as the page begins loading, so it
is possible to call function
that doesn’t exist yet. In the previous example, you can cause an error
by placing the original
<script/> tag after the function call:
This example causes an error because sayHi() is called before
it is defined. Because JavaScript is loading
top-down, the function sayHi() does not exist until the second
<script/> tag is encountered.
Be aware of this problem and, as mentioned previously, use events and event
handlers to call your
JavaScript functions.
When JavaScript was first introduced, only one browser supported it, so concern
arose over how the< nonsupporting browsers would deal with the <script/>
tag and the code contained within. To that end, a format was devised to hide
code from older browsers (which is a phrase that can still be found in the source
code of a great many Web sites on the Internet today). The following method
uses HTML comments around inline code so that other browsers won’t render
the code to the screen:
The first line begins an HTML comment immediately after the opening <script>
tag. This works because the browser still considers the rest of that line as
part of HTML, with JavaScript code beginning on the following line. Next, you
see the function definition as usual. The second-to-last line is the most interesting
because it starts with a JavaScript single-line comment (the two forward slashes)
and then continues with the close of the HTML comment (-->). This line is
still considered part of the JavaScript code, so the single-line comment notation
is necessary to avoid a syntax error. However, older browsers only acknowledge
the close of the HTML comment and, therefore, ignore all the JavaScript code.
A browser that supports JavaScript, however, just ignores this line and continues
on to the closing </script> tag.
Although this method of code-hiding was very prevalent in the early days of the Web, it is not as necessary today. Presently, most of the popular Web browsers support JavaScript, and those that don’t often are smart enough to ignore the code on their own. It is completely up to you whether you choose to use this method, but keep in mind that using external JavaScript files inside of inline code is a much easier method of hiding code from older browsers.
Another concern over browsers without JavaScript is how to provide alternate
content. Hiding the code was part of the solution, but developers wanted a way
to specify content that should appear only if JavaScript wasn’t available.
The solution came in the form of the <noscript/> tag, that
can contain any HTML code (aside from <script/>). This HTML
code is ignored by browsers that support JavaScript and have it enabled; any
browser that doesn’t support JavaScript or has it disabled renders the
content of <noscript/>. For example:
In this example, the <noscript/> tag is included with a
message telling the user that the browser
doesn’t support JavaScript. Chapter 8, “Browser and Operating System
Detection,” explains a practical
way of using <noscript/>.
| home / programming / prof_java / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 20, 2005
URL: http://webreference.com/programming/prof_java/1
