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>

MS Access technical tips

Visual FoxPro technical tips

General Tips

 

More tips from Alvechurch Data

Search page for Alvechurch Data

Searching a web site with JavaScript

Read More

Site Map

Site map of the Alvechurch Data site

Read More

Javascript while loops

JavaScript do and while loops

Read More

Javascript for loops

Javascript for loops

Read More

Repetition in Javascript

JavaScript structures for repetition

Read More