Thursday, January 24, 2013

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:

The Home and Learn 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 clickFile > 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 As from 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), orText 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 than Open 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: