Next page | Contents page |

About this introductory section

In this first section of the course we will present some fairly simple examples for you to try. The primary concern is for you to get something working without necessarily understanding every detail of how it works.

If, in this section, you find yourself asking questions like "How on earth could anyone know that you could write that?", just don't worry about it for now. We want you to experience the satisfaction of getting the examples to work.

We could have started in a much more logical but dry way from the very basics of the language and built up step by step. However, that could have meant reading dozens of pages before you saw any results in action. We might easily have lost you along the way. So instead we will start that more thorough process in a subsequent section.

Examples we will study

In the next few pages we will look at the examples shown here and how to program them.

First we will see how to display the current date and time, from your computer's internal clock:

The second example will animate that, so it runs like a very wordy and rather inelegant clock:

 

Those two examples showed how to output text from a program for the user to see. Next we look at getting input from the user. First a very simple example (try it now, on this page):

 

Then something slightly more complicated: getting numbers rather than just any text from the user, to do some simple arithmetic. It's like a calculator:


________

Browsers and <canvas>

The earliest versions of browsers that can use <canvas> are: Android 1.0, Chrome 3.0, Firefox 3.0, Internet Explorer 9.0, iPhone 1.0, Konqueror 4, Opera 10.0, Safari 3.0

Note that versions of Internet Explorer earlier than 9 required a plug-in to make it work and it was not to HTML5 standard as we are using here.

We will then move on to some graphical applications, if your browser permits (if not, please install a more suitable one). We will first draw some static shapes:

Sorry, this browser does not recognise HTML5 canvas elements

Then we will see how the bouncing balls work, on the previous page. When we look at that code we will get a glimpse of the OOP (object-oriented programming) capabilities of JavaScript. Each ball is an instance of type Ball. It has a state (position, velocity and colour) and it has behaviour (how to move, how to draw itself, how to interact with other objects in collisions). If you are intending to go on into serious programming you would be well advised to study object-oriented techniques. They make it possible to construct and manage large applications. JavaScript has an unusual way of doing OO but it does enable you to learn the concepts.

Code

The text that constitutes a program is often referred to as "code". That does not mean it is encrypted, though it can often prove hard to read.

In these pages you can learn to read and write "source code". Its grammatical rules are designed to enable human programmers to be able to define the required processing accurately in terms they can readily learn to write and to read. No hardware in a computer is able to execute such code directly.

The instructions that a processor can execute are patterns of numbers (everything stored in a computer ultimately boils down to patterns of 0 and 1 values). That is "machine code" and it is quite cryptic. In the early days people did have to write programs at that level but it was quickly realised that other programs could be written to translate source code into machine code for us. Such programs are called compilers. Quite commonly source code is compiled before distribution and that is why we cannot read .exe files for example (compiled programs in Windows). It was also realised that grammars could be designed for source code languages which would lend themselves to fairly efficient interpretation "at run-time" and that is what browsers do with JavaScript code. It does not run as fast as it would if compiled into machine code but with today's hardware it makes an excellent compromise for many purposes.

Next page | Contents page |