Basics of Webpage Programming

This article will cover the basics of setting up and running programs in a webpage.  This is more accurately described as scripting, because your programs will run within somebody else’s program (the web browser), but the main skills are the same.  If you’re already comfortable with programming then you might want to skip to the next article that will cover creating physics simulations.

What is a computer program?

A computer program is simply a set of instructions that you want the computer to follow.  What sort of instructions?  Anything you can imagine.  Controlling a washing machine’s cycle, adding up the cost of your shopping, working out if your car in a computer game has collided with a wall, etc.  These instructions are written in different languages; but the one that you’ll be using in webpages is called JavaScript.

Data is fundamental to the operation of a computer program.  In fact most computer programs are intended to either work with a set of data to change it in some way, or to react differently based on the data provided.  The data is stored in things called variables.  You create them by choosing a name, such as temperature, speed, age, and then give them a value.  More on these later.

Basic set-up

The language used to create webpages is called Hyper Text Markup Language (HTML).  When you see a webpage in a browser, you are actually seeing the browser’s best attempt at interpreting some HTML text.  It’s like you trying to recreate a painting from a written description that I’ve given you.  We’re only going to cover the bare minimum here, but if you want to learn any more, then W3Schools can tell you everything that you need to know.

To create HTML, you’ll need a text editor.  On Windows you can use Notepad – which you can normally find in the Accessories program folder, or just type into the search bar from the start menu.  On OS X you can use TextEdit – and there are some instructions here that you will want to look at.  On Linux you can use gedit or similar.

  • Once your text editor is open, copy and paste the text from below (double click on the panel to switch to plain text).  Note, this is terrible HTML for various reasons, so don’t worry about trying to remember it.

  • The next step is very important.  We need to save the file, but in most cases the text editor will try to save it as a text file (ending in .txt).  In Notepad, set the Save as type to All Files, and add .html to the end of the name (include the full stop before html).  Other text editors should be similar.
Saving as html in Notepad

Saving as html in Notepad.

  • You should now be able to go to where you saved the file, and when you double click on it a web browser will open.  It should be a blank page, but so long as it opens a web-browser, then it’s working.  If it re-opens in a text editor, then something went wrong with the last step – check that you’re adding .html to the end, and choosing an appropriate file type.

Drawing to canvas

The HTML page that we’ve created is the bare minimum needed to give us two things.  Firstly the space between <script> and </script> is where we’ll add our programming instructions.  Secondly the canvas is the area that we can draw on.

Our first step to being able to draw on the canvas is to create some variables.  We need to tell the program which canvas we want it to use.  We know that there is only 1, but computers are not as clever as you might think.

  • Add the following text between <script> and </script>

  • Save the webpage.  If you have already saved it as .html, then just choose File > Save.
  • Refresh the browser if the webpage is already open.  Otherwise open it.
  • You should see a green rectangle on the page.

The last chunk of text that you added is your computer program.  It starts by using the var word to create some variables.  One is called c, and will store the canvas that we’ll draw on, and the second is called ctx, and that will store the characteristic of the canvas that lets us draw in two dimensions.  On the third line we say that we’re going to start colouring things in with a green colour (it will make sense if you have a quick look at this page on hex values).  The fourth line draws our rectangle.

Image showing that x and y is measured from top-left corner of page

The coordinate system used in HTML canvas.

The HTML canvas, and many other drawing systems, uses the top-left hand corner to be the origin.  At this point you just need to know that the instruction that creates a rectangle allows you to set four values, and that these values are:

  •  Try setting different values for the rectangle, and see what the result is.

Next we’ll look at drawing circles.  If you were thinking that we can use something like fillCircle, then that was an excellent guess, but it’s unfortunately wrong.  Drawing circles is more complicated, but this is because we use a system that can draw lots of different types of curved shape.  Add the following code underneath the rectangle code:

  •  Save the file in the text editor, and refresh the webpage.
  • You should see a circle drawn over the rectangle.

We start with beginPath, which is an instruction to say that we’re about to start drawing something.  We then describe an arc that will give a complete circle.  We then set which colour we’d like to fill the circle with, and end with the command to actually fill the circle.  The instruction for the arc takes the following values:

You might be wondering where Math.PI fits in.  You might be used to measuring angles in degrees, but most computer graphics will use a system called radians instead.  They just make more sense from a mathematical point of view.

Using variables

Create a new file in the text editor, and copy the text shown below:

  • Save the file as a webpage (.html), and open it in a web browser.
  • You should see three blue circles.

If you look closely at the code, then you should find that most (if not all) of it is familiar.  The bulk of it is made up of the code to draw the three circles.  The main bit that is different is that we have created three new variables called a, b, and c.  We are using these variables to set the radius of each circle.

This should give you a better idea of how variables are used.  Once we have assigned a value to a variable (e.g. a = 20), we can use that variable as though it were that value.  A variable is just a stand-in for something else – in this case numbers.

So if the variable is equivalent to the number, what else can we do?  What about some arithmetic?

  • Change the code for variable c to be:

  • Save the file and refresh the page.
  • What about setting the value of c to be:

  •  Try out various combinations of numbers and arithmetic.  Note that if the number becomes negative then you will not see anything, and if the number gets very large it will probably fill the canvas area completely.  Also note that you need to use the asterisk key ( * ) for multiplication, and the forward slash ( / )for division.

You might be thinking that this looks like algebra, and you’d be right.  There are some subtle differences; for example you always need to include the multiplication symbol.  While c = 2a + 3b is fine in algebra, you will need to write c = 2*a + 3*b for the computer to understand.

Now that you know the basics, you can start to create your own physics simulations >.



Comments are closed.