JavaScript Chapter 1 Getting Started

Prerequistes and Software

What is Javascript?

Javascript is programming language created by Brendan Eich for a company called Netscape. It quickly became very popular as it allowed web developers to manipulate the browser and its contents in ways that was not possible with ordinary HTML or Cascading Style Sheets. By using Javascript in your web pages, you can gain more control of how the page looks and behaves: document elements can be inspected, form elements validated before the contents are sent, browser details checked, cookies set, dates and times can be added to the page, even simple games can be added to a web page - all with a scripting language.
The learning curve for scripting is a lot steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.
All the scripts in these pages have been tested with modern version of Internet Explorer, Firefox, Safari, Chrome, and Opera. If you're ready, then, let's make a start.

Knowledge and Software

For this Javascript course, we're going to assume that you know some HTML. You by no means need to be a web design guru, but you should have some basic knowledge of how a web page is created. You should know about things like the HEAD and BODY section of a HTML page, how to create new paragraphs, insert images and hyperlinks. If not, then the place to start is our web design course, which is here:

Web Design Course

The software we will use is just a basic text editor. This will be Notepad on a Windows computer for us, but you can use any operating system. For Mac users, the equivalent to Notepad is TextEdit. Another good free editor for the Mac is TextWrangler. You can get a copy here:

Text Wrangler

For Linux users, you will have a wide range of choices. There's a Wikipedia article here about text editors available to you:

http://en.wikipedia.org/wiki/Category:Linux_text_editors

For Windows users, one of the best free editors for basic programming is Notepad++. You can download a copy here:

http://notepad-plus-plus.org/

For all users, we have a couple of templates you can use to make life easier. They are explained in the next section.
As for web browsers, you can use any one you like, but most of our examples are from Firefox. It's a good idea to test your code in more than one browser, however. Most of them are free, so it's just a question of downloading and installing them!.

Useful Javascript Templates for this Course

We've created a couple of Javascript template files for you. Click below to open the files in a new window. You can just download the basic template for now, as the canvas template is for much later. If you're not sure how to turn a text file into a HTML page then read on.

Get the Basic Template Text File Here

Get the Basic Canvas Template text File Here

When you click a link above, a file will open in a new tab or window. The file will be a text file. Now click File > Save Page As, if you're using Firefox:

In Internet Explorer, Opera and Safari, click File > Save As. (You may have to press the left ALT key on your keyboard in IE and Safari to see a File menu at the top.)
In the Chrome browser, simply right click the page and you'll see a menu appear. Click Save Asfrom the options:

In all browsers, you should then see a dialogue box appear. Choose a location to save the text file to. Then make sure the Save As Type area at the bottom says Text Document (Opera and Chrome), or Text Files (IE and Safari), or All Files (Firefox).

Click Save and you'll have a template text file on your computer.

Create a Web Page from your Template

To turn your template into a HTML page, open the text file using Windows Explorer or Finder on the Mac:

When you double click your file, it will open in a text editor. Click File > Save As again. In the Save As Type area change it to All Files. (You don't need to do this if you're using TextEdit on a Mac.) Now type a new name, followed by the extension .html:

When you click Save, you'll have a new web page.
To get at the code for editing, open an Explorer or Finder window again. Right click the HTML page you want to edit. You should see an Open with option on the menu:

If you've installed Notepad++ you can simply click the Edit with Notepad++ option rather thanOpen with. If you don't see a normal Notepad option like ours above, then click the Choose default program option at the bottom. If Notepad is still not there when the dialogue box appears, click the Browse button:

When the Browse dialogue box appears, navigate to the directory C:\Windows\System32. Then select Notepad.exe.
Here are the templates again:

Get the Basic Template Text File Here

Get the Basic Canvas Template text File Here

Error Checking and Debugging

There's no doubt that Javascript can be a fiddly, messy language to get to grips with. Unfortunately, there's no easy way to see where you went wrong without some form of debugging software or plug-in. Even then, the error messages these generate can be somewhat enigmatic.

The debugger we like is the Web Developer toolbar by Chris Pederick. It's a Firefox extension. You can get it here:

Web Developer Toolbar

Once installed, you'll see a toolbar like this one:

As you can see, there's lots of options for budding web developers.
For the Javascript part, have a look on the right of the toolbar and you'll see three green ticks (hopefully):

This indicates that all is well with the page. If you see a red X on the right it means there's an error or warning for your Javascript:

When you click the red X you'll see a console pop up. The console will tell you some information about the error:

Although the message itself can be puzzling if you're a beginner, it at least tells you which line the error is on.
You can also type something in the Code text box and click the evaluate button:

If there's an error you'll then see this:

If you want to try this, type a lowercase "a" and click evaluate again. You'll see a message box appear. The code has run successfully.
Another popular Javascript debugger is Firebug. Again, this is for Firefox. It can be a bit daunting for beginners, but is well worth trying. The Firebug home page is here: http://getfirebug.com/
Internet Explorer 9 has a sophisticated Jscript debugger built into it. (Jscript is Microsoft's version of Javascript. It's mostly the same, though.) The debugger is tricky to find, though. First, press the left ALT key on your keyboard to see the File, Edit, View menu at the top. Now click Tools > Internet Options. From the Internet Options dialogue box click the Advanced tab. Scroll down and find the entry for Disable Script Debugging. Uncheck this entry if it has a check mark next to it. Click the Apply button at the bottom of Internet Options. Reload your web page and you'll see a message at the bottom about ActiveX controls. Say yes to this, and yes on the Web Page Error dialogue box. After all that, you should see the following:

The debugger is not the easiest thing in the world to understand, but at least you get a nice yellow background and pointer for your errors!