In this first section of the course some fairly simple examples will be presented 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. The main thing is for you to experience the satisfaction of getting the examples to work.
This course 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. You might easily have given up along the way. So instead, that more thorough process will begin in Part 2 of the course.
In the next few pages we will look at the examples shown here and how to program them.
First you 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 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:
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 used here.
This was written in 2011. Things have moved on, browser version is not a worry as far as the canvas is concerned.
We will then move on to some graphical applications, if your browser permits (if not, please install a more suitable one). First draw some static shapes:
Then 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 (capital B indicates a type). 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.
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 if it has not been laid out carefully.
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 it had first been compiled into machine code but with today's hardware and clever browsers it makes an excellent compromise for many purposes.
Some programming languages are compiled to an intermediate form which can then be interpreted very rapidly. Java is such a language, in which source code is compiled to "byte code" and that is executed by an interpreter. I believe this technique was pioneered by the University of California at San Diego in the 1970s. Their UCSD Pascal, used on early Apple computers, was compiled to what they called "p-code" which was both compact and easy to interpret at run-time.