JavaScript 101

We’re now going to look at client side scripting with ECMAscript, usually just referred to as Javascript. (in reality Javascript is merely one implementation of ECMAscript, but noone seems to care about the distinction)

This tutorial will be a very brief and to the point to just get you on your feet.

What Is Javascript?

Javascript is a client-side scripting language, which runs in the browser: once the browser downloads an HTML file, it finds any <script> elements and executes the code therein. It can be used to make your HTML pages dynamic, without having to refresh the page.

Why "Java"-script?

The name ‘Javascript’ was chosen for marketing purposes to benefit from the rising popularity of Java when Javascript was first being developed. The syntax for writing Java and Javascript is comparable, but that’s where it stops; Javascript has nothing to do with Java.

How Do I Add Javascript To An HTML Document?

You add Javascript using the <script> element. Provide an attribute which specifies which ‘type’ of script this is; assign it a value of ‘text/javascript’:

<script type='text/javascript'>
// this is a Javascript comment!
</script>

You can (and usually should) put javascript in external files, just like hos you can put style rules in an external CSS file and link to it. To use an external javascript file, provide a ‘src’ attribute to your <script> tag:

<script type='text/javascript' src='MyFile.js'></script>

Note that the conventional file extension for a Javascript file is ‘.js’.

For now we’re not going to think about the browser; we’re going to use a Javascript console to familiarize ourselves with Javascript a little more independantly of HTML documents and web development.

Firebug and the Google Code Playground

Since Javascript executes as part of an HTML document, it’s hard to "see" and hard to debug. So we’re going to use a Javascript console to play with Javascript for a while before we start relating it to HTML documents, let alone web development.

The most popular Javascript console comes with a Firefox extension called Firebug and it is hopefully installed on the Concordia machines.

If not, you can also use the Google Code Playground. During the in-lab tutorial for this Javascript 101, I will explain how to use FireBug, but in these written tutorials I will assume you are using the Google Code Playground, in case you don’t have FireBug installed at home (or don’t even use Firefox).

Take note that while the Google Playground is good for your first scripts, as you try and write more complex scripts it will no longer suit you.

Save the above in an HTML document, and give it a ".html" extension. Open the file with Firefox (or any other web browser) and you should be able to see that the script executes as soon as you open the file, and its output appears in the rendered document.

Objects in Javascript

At this point we will not see how to create our own custom objects in Javascript, but we’re going to look at a built in Javascript object, just to see how to manipulate Javascript objects.

The Date Object

One of the most popular Javascript objects, the Date object is used to represent and manipulate date/time information. It has several constructors: