Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Select your course... Course Outlines     Advanced Flash     Advanced JavaScript and CSS     CSS     Dreamweaver     Dynamic HTML     Flash     JavaScript     Photoshop     XHTML

Select your theme... Canada-ehHalloween_JheryllChristmas_JheryllPrintBeach_StevePresentationHalloween_KhalWol_Tad

DHTML

JavaScript - An Introduction

JavaScript Tools

Before we get into learning JavaScript and writing your own scripts, we need to talk for a bit about what kind of tools you can use to write JavaScript.

What Tool to write Javascript?

Basically, any tool that you use to write HTML, you can use to write JavaScript. There aren't really any programs that just write JavaScript. Any good HTML program is also set up for JavaScript.

All you really need to write JavaScript is a simple text editor. (Notepad in Windows, SimpleText on a Mac, or pico for UNIX) It is important to use only a text editor and not a fancy word processor for writing JavaScript. Most word processors use different ways of formatting text. This is both unnecessary and it can cause problems when writing JavaScripts.

Besides a plain text editor, an HTML editor uses some kind of colour coding can be very helpful for writing JavaScript. For one thing, it uses different colours to show different parts of the script. For another, it is an excellent way to avoid errors while you are still writing your script. Most editors will change colour when the recognize certain parts of the code. If you make a simple error while typing, the editor will stop colour coding the script, and you can see where you made the error.

HTML-Kit is an example of a good, text HTML editor that is freely available for download. There are a number of these (sometimes free) editors available, such as Notepad++ or PSPad.

WYSIWYG (What You See Is What You Get) HTML editors can be used as well, as long as they have a good code editor built in. Dreamweaver is a good example of a WYSIWYG editor with good code editing capabilities.

While any program capable of editing plain text will suffice for creating JavaScript, you will be much better off using a program with code-colouring, and especially one that has line numbers. Line numbers are extremely useful when trying to troubleshoot your code.

Browsers

Obviously, in order to see your JavaScripts in action, it will be necessary to have some kind of browser. We are going to recommend however, that you have several browsers available for viewing your JavaScripts. Current modern browsers that are in popular use are: Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, Apple Safari, and Opera. A good Web Developer will have a collection of as many browsers as possible for testing.

Some browsers are capable of running extra "add-ons" that can help you test your pages. Web Developer and FireBug are two examples of these add-ons for the Firefox browser.

Virtualization

It is also important to be able to test and debug your JavaScript on older versions of browser, especially Internet Explorer (IE). Earlier versions of IE have multiple problems with CSS and DHTML in general. It is almost impossible to run more than one version of IE running in newer Windows OS's like Vista or Windows 7. However, Microsoft provides free disk images of complete Windows installations that contain legacy (older) versions of IE, that run on a free program call "Microsoft Virtual PC". There are other applications that can do this as well, such as Oracle's VirtualBox (free), or VMWare (paid, but a free, limited version is available).

These virtualization programs can allow you to do all your testing on a wider variety of browsers, but also different platforms, such as Linux.

Error Messages (Debugging)

It almost goes without saying that a Web browser will be your tool of choice for testing out your scripts. Besides seeing your scripts in action, every major browser will show you error messages if your scripts contain errors.

We will discuss in more detail a little later on about these error messages, but we should mention that when you test your scripts in a browser, you might not always see these error messages.

Sometimes, IE (Internet Explorer) won't show the error message at first, except to show a small triangular yellow icon at the bottom of the screen. You may have to double-click this icon in order to see the actual message. This is sometimes the result of a person un-checking the "always show this message" checkbox at some point when IE showed an error. Not to worry though, this functionality can be restored.

Error Messages In Internet Explorer

• Choose Tools > Internet Options.
• Click the Advanced tab.
• Under 'Browsing', check the "Display a notification about every script error" option.
• Click Apply.
• Click OK.

Alternatively, you can just wait for a JavaScript error to show up, then click on the "Always show this message for webpage errors" checkbox.

Error Messages in Firefox

To see error messages in Mozilla Firefox, go to Tools > Error Console. In fact, if you are doing a lot of JavaScript/DHTML programming, it's probably a good idea to just leave this console open so you can see errors as they occur. You can clear the errors at any time by clicking the Clear button.

This Error Console can show you many errors at a time, but will also show you previous errors you might have fixed already. It may become necessary to click the "Clear" button once in a while to see the newer errors. Keep in mind that having multiple tabs open may also show you errors from other pages that are open. Again, the "Clear" button can "clear" things up.

There is also a "Warnings" and "Messages" button on the console. These will show you all kinds of problems (such as CSS problems) that aren't related to JavaScript. It's best to leave these off, because they can make it difficult to scroll through all the non-JavaScript errors. Click on the "Errors" button to just see the JavaScript errors.

Google Chrome

To see errors in Google Chrome, click on the "Customize and control Google Chrome" button , then go to Tools > JavaScript Console.

It is much more difficult to see errors in the Opera and Safari browsers without installing extra add-ons/extensions. However, you should be able to use the three browsers mentioned above to check your JavaScript errors successfully.

JavaScript Tools Summary

• All you really need to write JavaScript is a simple text editor.
• You should never use a word processor to write JavaScripts.
• Any good HTML editor will can also be used to write JavaScript
• Some editors will colour code your scripts to aid in writing them.
• It is a good idea to have as many browsers as you can to see how your scripts will perform in them.
• Internet Explorer will show JavaScript errors by default, but it may be necessary to set it to show them all the time.
• Many other browser have a "JavaScript Console" that can display many different JavaScript errors.

---

DHTML - TOC - Introduction - Books -
JavaScript - An Introduction - Links - Questions -
1 - 2 - [ 3 ] - 4 - 5 -

DHTML - TOC - Introduction - Books -
JavaScript - An Introduction - Links - Questions -
1 - 2 - [ 3 ] - 4 - 5 -