Create a simple JavaScript program

This page gets you to write your first JavaScript program. It might work first time, it might take all day to get it working. You'll have to get used to this - it's all part of a programmer's life.

The examples that I've posted here all work. If you copy the code from the page and paste it into NotePad++ then the program will run.

Add a script to a web page

JavaScript code must be included in a HTML document in such a way that the browser can recognise it as JavaScript. We use a pair of tags - just the same as we do for everything else in HTML. We use:

<script>

to mark the start of the program and:

</script>

to mark the end.

Your first JavaScript program

When learning a new language it is traditional to start with a program to display the message "Hello world!". This is how to do it in JavaScript with the alert command.

Create this program in NotePad++. Please forgive me for not colour-coding it. Setting the colours by surrounding every keyword in its own span takes a while and I'm still looking for a way of automating the process

<html>
  <!-- Hello World -->
  <head>
    <title>My first program</title>
  </head>
  <body>
    <script>
      alert('Hello world!')
    </script>
    This text will appear after you close the alert.
  </body>
</html>

Run it in FireFox(Ctrl+Shift+Alt+X).

You should see an alert box on screen saying "Hello world!" before the body of the page appears.

Don't worry if the program doesn't work first time. There will be some sort of mistake somewhere and we'll talk about debugging in a moment.

Notes on the first program

There is a lot to be learnt from this first program if you've never used JavaScript before.

First, a matter of philosophy. Programming is not a forgiving pastime. Code that is right will work first time but code that is nearly right won't work at all. The smallest programming error will prevent code from working and you may have to inspect your code character-by-character to find the mistake. Nobody said it would be easy.

If you have written HTML then you will know that HTML is a language where you can get away with all sorts of sloppy practice. HTML is not a programming language and browsers are very adaptable. If the browser does not recognise a tag in HTML then it will ignore that tag and continue to display the page. The tags are only there to control layout so no harm has been done. If the browser does not recognise a command in JavaScript then it dare not ignore that command and continue. It might be the command that was supposed to submit your credit card payment. If the browser ignores that command but still carries on to accept your order on-line then there will be trouble.

Where does JavaScript go?

We've put the program in the body of the HTML document because that's the easiest way to get started. It's not the best place for real-life pages because the browser will execute the code as soon as it finds it. You can prove this by adding another line of HTML to the page just before the script tags:

<html>
  <!-- Hello World -->
  <head>
    <title>My first program</title>
  </head>
  <body>
    This text will appear before the alert.
    <script>
      alert('Hello world!')
    </script>
    This text will appear after you close the alert.
  </body>
</html>

More tips from Alvechurch Data

More tips from Alvechurch Data

Search page for Alvechurch Data

Searching a web site with JavaScript.

Read More

Site Map

The Alvechurch Data site map.

Read More

Javascript while loops

JavaScript do and while loops.

Read More