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>
|
