WHEN AND HOW TO USE JAVASCRIPT
Statements
All of the preceding syntax examples are known as JavaScript statements. So when and how do we use statements? Statements can be used in external JavaScript files (the same way you use external CSS files), in the head or body of an HTML document between opening and closing script tags, or inline (directly within an HTML element) using
event handlers.
Multiple statements are usually separated by carriage returns, or by semi-colons placed at the end of the statement. If you're not sure whether or not to use a semi-colon, just use one. No damage will be done.
Within the head:
<head>
<script language="JavaScript">
document.bgColor="#00cc00"
</script>
</head>
Within the body:
<body>
<script language="JavaScript">
document.bgColor="#00cc00"
</script>
</body>
As an external file:
<head>
<script language="JavaScript" src="myExternalJavaScript.js"></script>
</head>
External JavaScript files cannot contain HTML, and must be saved with the extention, ".js".
It is fairly common to see an opening HTML comment directly below the opening script tag, and a closing HTML comment directly above the closing script tag, preceded by a JavaScript comment (// -->). The reason for the HTML comments is to keep old browsers that do not support JavaScript from attempting to read the scripts. You will not see these comments in my scripts because so few people are still using these outdated browser versions, and I figure if they are, my script is the least of their browser problems.
Your script tag should have the "language" attribute with "JavaScript" as its value. Many developers append the word JavaScript with a version number (JavaScript1.1). There are three supported versions of JavaScript, the first, which needs no declaration, 1.2 and 1.3. Appending the version number to the word JavaScript is one way to weed out older browsers that may not support the latest language functionality, but in my opinion, is not the best way.
Event Handlers
Part of doing something to an object or property is telling the script engine
when to do it. In the above examples, the code will be executed as soon as the browser encounters it. To cause code to execute when a certain action has taken place, use Event Handlers.
Event Handlers are similar to HTML tag attributes in that they belong inside an HTML tag, are followed by an equal sign and their 'values' are quoted. The difference is that they contain JavaScript.
They are used to execute JavaScript when an event has occured on the HTML element. Common event handlers are: onMouseOver, onMouseOut, onLoad, onunLoad and onClick. They are a big part of why JavaScript makes Web pages interactive. You can cause something to happen when an event takes place on a page. For instance, changing the source of an image when a user moves their mouse over it:
<a href="#" onMouseOver="document.socks.src='shoes.gif' ">
<img src="image.gif" name="socks">
</a>
Quotes and Event Handlers
One very important rule to remember about event handlers is that all JavaScript code within the event handler must be contained in double quotes. See the
Strings lesson for more information on using single and double quotes in JavaScript.
Below is an example of multiple statements being used inline with an event handler:
<input type="button" onClick="document.bgColor='red'; document.imgName.src='otherImg.jpg' ">
In this example, when the user clicks the form button, the document's background color changes
and the image changes.
Nesting Quotes
Notice the use of single quotes around the property values. The JavaScript engine executes code starting with the first double quote following an event handler and ending with the next double quote it encounters. Because the statements are contained within the event handler's double quotes, any code that requires quoting must use single quotes. Remember this - it is a VERY common mistake.