This part of the JavaScript tutorial explains how to use JavaScript in your web pages and perform multimedia operations: animate text and images, "blend" one image into another, do special effects, and sequence events on a Web page.
For web development, use JavaScript Editor, which allows you to both write code and do visual design. Alternatively, use Dreamweaver, Front Page or another tool of your choice for the visual design part.
You can use JavaScript in your web pages in two ways:
 As a "code island", or
As a separate .js file linked to your page.
Using JavaScript in code islands
With the code island method, JavaScript is embedded into your page. Here is an example, displaying the traditional "Hello World" message in a web page:
<html> <head>
<title>Hello World</title> <script language="JavaScript"> function main()
{
alert("Hello, World!");
} </script> </head> <body bgcolor="white"> <script language="JavaScript">
main();
</script> </body>
</html>
|
 To run the code:
Paste it into JavaScript Editor and save it as MyPage.htm
Click on the Show Internal Viewer button.
Alternatively, click on the View in Browser button, which launches your default browser. If you wish to test your page in multiple browsers (Internet Explorer, Netscape, Firefox, Opera...), select Tools / Add from the menu to make them available.
We recommend that you use Show Internal Viewer while developing because it can capture errors in your code and tell you about them.
Why do you need to save the file? In order to locate images, animations, and other objects you use on your pages your web browser needs to know the path to your page - all other objects are relative to it.
Because of that, get into a habit of saving your page as soon as you start working on it. |
Observe the code above: JavaScript functions must be placed inside the <script> </script> tags. The <script language="JavaScript"> tag tells the browser that the script code that follows is JavaScript.
The first set of <script> </script> tags is inside the <head> section: this is where you define and implement your functions.
The second set of <script> </script> tags is inside the <body> section: this is where you call your JavaScript functions.
alert() is a method of the window object ( window.alert(string) ) that displays a message box.
Using JavaScript in separate .js files
It is possible to isolate your JavaScript functions into a separate file, with the extension .js. Let us re-code the example above using this approach:
Open JavaScript Editor, create a new document and paste the code below.
Save the document as common.js.
function main()
{
alert("Hello, World!");
}
|
Create a new document in your JavaScript Editor and Paste the code below.
Save the document as MyPage.htm.
<html> <head>
<title>Hello World</title> <script language="JavaScript" src="common.js"></script> </head> <body bgcolor="white"> <script language="JavaScript">
main();
</script> </body>
</html>
|
To run the code click on the Show Internal Viewer button.
Observe the code above: the web page does not define any JavaScript functions in itself. Instead, it links to a file where it can find them: <script language="JavaScript" src="common.js"></script>
Why should you use .js files and not embed
Moving your JavaScript to .js files instead of embedding them into web pages has some huge advantages:
Your pages are a lot faster to load. Why? Because browsers only load it once, and cache it. When your visitor moves to the next page, your JavaScript is already loaded and ready to be used.
Your code is easier to maintain. Making a change in only one file is automatically reflected in all of your pages. For example, if you have a big site with 400 pages how long would it take you to manually change every page to show "Copyright© 1995-2006" instead of "Copyright© 1995-2006"?
Better organization. You can logically group your functions, for example:
Place JavaScript likely to be used by many pages in common.js
JavaScript used by some of the pages can ge grouped by functionality: animate.js, cookies.js, formvalidation.js, specialeffects.js, etc.
For the sake of learning, examples in this tutorial are often presented with JavaScript embedded in .htm files, not in separate .js files. However, when it comes to the real thing, your web site, you should always organize your JavaScript into separate .js files.
Note: When it comes to JavaScript, there are small differences in implementation from one browser to another. The code in this tutorial is cross-browser compatible and has been tested with Internet Explorer and Firefox. Few of the examples are using ActiveX, which are presently only supported by Internet Explorer.
Beware: if you use visual HTML editors to insert JavaScript objects (for example, for roll-over image buttons), your pages will swell in size, be slower to load and render, and hard to maintain.
Even worse, deleting objects as a rule does not remove the JavaScript functions manipulating them, which stay buried in your <head> section. After a while your pages will be a graveyard of unused code.
For fast, efficient and well-organized web pages, use JavaScript Editor, and place your JavaScript code in .js files. |
Next |
