Coding - Javascript

Interactive Web Page Functions with JavaScript

With JavaScript code, you can make your Web pages interactive. By adding small amounts of scripting code to your pages, you can detect and respond to various types of user events. In this tutorial we will work through the basics of using JavaScript – don’t worry if you have no programming experience as the syntax is very simple. At the end of the tutorial you should have a foundation in JavaScript on which you can continually build.

Including Scripts in your Pages

We will use the demo page we built in Building Websites with HTML and Styling Web Pages with CSS, adding JavaScript functionality to the existing code:

<!DOCTYPE html>
<title>My Page</title>
<style type="text/css">
/*style declarations*/
h1 {
.note {
#conclusion {
div p {
div {
a:link { color:#330000; }
a:visited { color:#003333; }
a:hover { color:#000033; }
a:active { color:#330033; }
a:link, a:visited, a:hover, a:active {
<!--page content-->
<h1>My Page</h1>
You can validate your Web page code using the
<a href="">W3C Markup Validation Service</a>.
<p class="note">
This is some text.
<div class="note">
This some more text.
<div id="conclusion">
This is even more text.
This is yet more text.

If you prefer, you can add the code to another page you are working on. You can include scripts at various locations within a page – let’s explore the options.

Inline Scripting

In the demo page we have the following element:

This is yet more text.

Extend the opening tag as follows:

<p onclick="alert('hello')">

The onclick attribute represents an event, the event in this case being the user clicking the element. When that event occurs, the code within the attribute value will execute. In this case the code simply outputs an alert message – the alert will display whatever text we include between the brackets. Save your page, open it in a browser and click the element.


As you can see, you can include JavaScript code within element markup. We will look at more events later.

Head Scripts

In most cases your pages will involve a script section added to the page head section. Add one between the opening and closing head tags as follows:

<script type="text/javascript">
//javascript code here

The JavaScript code will be placed between the opening and closing script tags – notice the code comment preceded by the double slash // – it’s a good idea to include these as often as possible, since they make working with your code easier.

You can add code to this section if you want it to execute before the page loads, however you are more likely to include functions in the head section which will execute when user events occur, as you will see later.


Let’s run through some of the nuts and bolts in JavaScript, starting with variables. A variable represents a single item of data, such as a number or text string. Add a couple of variable declarations to the script section in your page head as follows:

var a = 2;
var b = 3;

Each variable declaration starts with var, then states the variable name (a and b in this case), then assigns a value to the variable. The equals sign is known as the assignment operator and is followed by the value being assigned to the variable. The end result of this code is that we have two variables in the script, one storing a value of 2 and the other storing a value of 3.

Here we use single character names, but in general your variable names should be meaningful so that their purpose is obvious. When naming variables, you should only use alphabetical letters, numbers and the underscore character (_). Your variables should typically begin with a lowercase letter. You can make the names clearer to read by following conventions, as in these alternative examples for storing a first name text string:

var firstName = "Jim";
var first_name = "Jim";


We have already seen the assignment operator – there are many others. Add the following after the two variable declarations:

alert(a * b);

Save the page and refresh it in the browser. You should see an alert message with “6″ displayed in it. As you can see, the script executes before the page loads. The alert message includes the result of multiplying the two variable values. You may prefer to remove the alert line from your page after you have tried it, as you wouldn’t typically want an alert message to interfere with the page loading – we have used it here to give you an understanding of what happens when the user’s browser loads a page.

There are lots of operators in JavaScript – the following arithmetic operators are among the most commonly used, including the multiplication operator we used above:

a + b;
a - b;
a / b;
//modulus (remainder)
a % b;
a * b;
//increment (add one)
//decrement (subtract one)

You can also use the addition operator on string variables, to join two string values together.

Body Scripts

You can include scripts in the body section of a page, but this is something you are less likely to do in your first pages. Add the following somewhere between the opening and closing body tags to demonstrate:

<script type="text/javascript">
document.write("<p>A new paragraph</p>");

Save and refresh the page – you should see a new paragraph written into it.


The document.write command lets you write markup directly into the page.

Events and Functions

We already saw the click event added inline earlier – let’s amend that code slightly. Instead of this markup:

<p onclick="alert('hello')">

Alter the opening tag as follows:

<p onclick="elementClicked()">

Now add a function to the script section in the page head, after the two variable declarations:

function elementClicked(){
alert("You clicked!");

Notice that the function name is the same as what we included in the onclick attribute on the element (elementClicked). This function name is also meaningful – you can follow broadly the same rules for naming functions as we discussed for variable names above. The body of the function is contained between the curly braces, and will execute whenever the function is called. Save and refresh the page, then click on the element again.


This function contains only a single line of code, but it could contain multiple lines and could even call other functions. A script section can contain as many functions as you need.


When you call a function, you can pass data values to it – these are parameters. Extend the opening line of the function as follows:

function elementClicked(theElem){

Now alter the opening tag of the element in which we call the function:

<p id="myPara" onclick="elementClicked(">

First we give the element an ID value, then we pass the ID value as a parameter to the function. The function is expecting a parameter, since we added a variable name between the brackets following the function name (theElem). We can now refer to the value passed inside the function body – extend the alert as follows:

alert("You clicked: " + theElem);

Save and refresh the page – when you click the element, you should see the ID value being output in the alert message. Note the use of the addition operator here to join two string values together.


This may seem pointless, but we can use the technique to alter the appearance of the page. Replace the alert line inside the function with the following:


The document variable represents the page, with getElementById giving the script access to a particular element using its unique ID, which we passed as a parameter to the function. With a reference to the element, we can apply styling properties to it, in this case altering the text color. Save and refresh your page. When you click the element the text should change color.


Let’s build on this by changing the element background color when the user hovers their mouse over and off it. Extend the element opening tag to detect onmouseover and onmouseout events:

<p id="myPara" 

Now add the specified functions to the script section in the page head:

function overElement(theElem){
function offElement(theElem){

Notice that the functions use a similar structure to the one we already used – this time we set the background color. Save and refresh the page – moving the mouse over and off the element should make the background color change to blue and then back to white.


This trivial example demonstrates how you can use JavaScript events and functions to add a level of interactivity with your page content. Experiment with the code to get acquainted with these fundamental principles. Other events to try include onmousedown, which fires when the mouse button is pressed and onmouseup, which fires when the mouse button is released.


We have really only scratched the surface of what’s possible when using JavaScript in your Web pages in this tutorial. However, after working through it you should have a grasp of the basic techniques which you can build on. As you have seen, you do not need to be a programmer to add scripts to your pages. In addition to enhancing your page style, JavaScript can alter the page content, carry out calculations and much more. You can also make use of JavaScript libraries such as jQuery, allowing you to include sophisticated interactive effects without having to code the details yourself. When you work with JavaScript, it is vital to check your pages in multiple browsers and to ensure your pages will continue to function for users who have disabled JavaScript.

About the author

I'm a developer and technical writer - see for details. Follow me on Twitter @BrainDeadAir or email me at

Share this post

Leave a Comment

Subscribe To Our Newsletter