JavaScript is a programming language that web browsers understand. You
can use it to make your web pages interactive by:
Responding to user actions and
changes on the page
Manipulating the web page's
contents and behaviour
Communicating with the user directly
You can do just about anything you
want with a web page, using JavaScript.
In this introductory
tutorial and the series to follow, I'll introduce the
JavaScript language and how to write it, through a series of practical
worked examples.
Example 1: Hello World!
"Hello World!" is traditionally the
first thing you learn to do with any new language.
What we want to do
When the user clicks a
button, show the message, "Hello World!".
This is the generic HTML command
for a form input. (Note it's self-closing, so if you're coding xHTML
you must use the trailing slash.)
type="button"
There are several types of input in
HTML: button, text, submit-button.
id="hello-world"
We don't actually need this yet,
but it's good practice to give every important element on your page its
own useful ID (unique identifier).
value="Hello"
With a button, the value
parameter
sets the text that's displayed on the button.
Try clicking the button...
Did anything happen? No? Good.
This is exactly right, because we
haven't told the page that anything should happen when the button is
clicked. Let's look at ways of
making
something happen when the button is clicked.
Making something happen with inline
JavaScript
The easiest way is to write what we
want to happen into the button tag itself. For example...
Try it now. (If nothing happens,
check that JavaScript is enabled in your browser.)
(Note that I've given this button the
id "hello-world2", because every id on the page must be unique, and I
already have a button with the id "hello-world" above.)
Let's look in detail at what this bit
of code is saying:
onClick=""
onClick is an event handler. It
tells the browser to run whatever's in the quotes when the event
"click" happens to the button.
alert()
alert() is the first JavaScript
function we've seen. It's built into JavaScript, and in a web browser
it shows an alert box on the screen.
'
Hello
World!'
You notice that alert(), like all
function calls, is followed by a pair of round brackets. Some functions
expect to be given parameters - extra information that the function
needs. The alert() function takes one parameter - the message you want
to display. This message has to be put inside quotes (either single- or
double-quotes), so that JavaScript knows just to treat it as a piece of
text. because we've already got the whole bit of JavaScript inside
double-quotes (onClick="..."), I've used single-quotes here.
;
The semicolon after the alert
function tells the browser that it's the end of the statement. It's not
strictly required, but if you wanted more than one thing to happen,
you'd separate the statements with semicolons.
Problems with inline JavaScript
I've shown you how to write your
instructions inline (i.e. in your HTML), because it's the easiest and
quickest way. However it's not very good practice, because (just like
the problems with inline
CSS):
You have to write your code out in
full for every button. (OK, this example is very very simple, but it
could be much more complicated.)
That means that if you have more
than one button that does this function, and you want to change what
happens, you have to locate and edit every occurrence of the code).
It makes your pages longer, more
cluttered and more complex.
A better way to manage your code is
to put it in separate functions, which, just like CSS again, can be
written either:
into the page header (or body, but
header is best)
or in separate files
Making something happen with a custom
function
To do the same thing as we've
achieved above, but with neater code, we'll write our own JavaScript
function.
First thing is to write a block of
JavaScript in the <head> section of our HTML page.
Note that the stuff in blue above is
a common block that you'll always use to write blocks of JavaScript
into your web pages. I do explain what it does below, but it's not
vital that you understand it now.
JavaScript code
<script
type="text/javascript"> ... </script>
The <script> tag
tells the browser that some client-side script follows, and where it
ends. The type parameter tells the browser what kind of script it is,
so the browser knows to use its JavaScript capability to interpret the
code.
<!-- ... //-->
This is an HTML comment. It
prevents whatever's between the comment start & end tags from
being displayed on screen. The last line has a JavaScript comment (//)
in front of it, to tell the JavaScript block to ignore that line.
function
function is saying that we're
creating a new custom function here
helloWorld()
helloWorld is its name. The pair of
round brackets () follows all function definitions. This is where you
may tell a function what parameters to expect to be given. We don't
have any parameters in this example, so we have empty brackets.
{ ... }
Everything between the curly braces
{ } is the
body of the function. This is the code that gets run when you call the
function.
alert('Hello World!');
This is exactly what we had before
inside our onClick() event handler. Now, it's stored in the document
<head> section.
Firing the function
To fire the function, we'll change
the bit of code inside the onClick() event handler as follows.
Now, instead of alert() function,
we've written the name of our own custom function.
When the button is clicked, the
browser will look within the page (and any referenced JavaScript files)
for a function of that name. We've already written a function of that
name in our <head> section, so the browser runs that
function.
The benefit of this approach to
writing JavaScript code is, if we want to change what happens when the
"Hello" button is clicked (say, we want to ask the user their name, and
then say "Hello Bob!", we change it in only one place.
Making something happen with an
external JavaScript file
This is fairly straightforward
change, which gives us even more benefits.
Instead of writing our JavaScript
code into a block in the document <head>, we write it
into a separate file, which we include in any pages that might use its
functions.
hello.js
You'd write the following code into a
separate file, and save it as "hello.js" (you can call it whatever you
want).
function helloWorld() {
alert('Hello World!') ;
}
Include the external js file in your
document <head>
Again, this uses the
<script>...</script> HTML tag, but instead
of writing our code between the start and end tags, we tell the browser
that the script is in another file whose "source" (src) is "hello.js".
This will have exactly the same
effect as the previous 2 methods we've tried, but is much better
because now:
It's easier to update our code. If
we want to change what the helloWorld() function does, we only have to
change it in one place, and those changes
will be reflected in all pages that include the hello.js file.
It's easier to manage our code. If
you come back to a web site project, it's much easier to find out
what's doing what if your styles (CSS) and functions (JavaScript) are
kept separate from your content (HTML). These benefits increase as
sites get more complex.
The browser should only have to
download your JavaScript code once, no matter how how many pages use
it, because it can cache (i.e. remember) the external file.
(Note, if you're using xHTML,
the language parameter is not allowed, just use the type parameter in
your <script> tag.)
