JavaScript Tutorial

  1. Introduction

  2. The Script Tag and HTML

  3. That Document Thing

  4. The document Title Property

  5. A JavaScript Rollover

  6. JavaScript Methods and Events

  7. Testing your Visitor’s Browser

  8. Screen Size, the History Property

  9. Setting up variables in JavaScript

  10. Adding numbers in textboxes

  11. Adding numbers in textboxes (continued)

  12. Javascript If Statements

  13. if … else statements

  14. The Operators, And, Or

  15. JavaScript For Loops

  16. A Times Table Programme

  17. While and Do Loops

  18. Break and Switch Statements

  19. Arrays

  20. The index number of an array

  21. Arrays and Loops

  22. Shuffling the numbers in an Array

  23. Browser Detection

  24. Events – OnMouseDown

  25. JavaScript Events

  26. Functions

  27. Calling other functions within a function

  28. Form Validation

  29. Validate an Email Address

  30. JavaScript and Checkboxes

  31. Validate a Drop Down Box

  32. Validate a List Box

  33. Validate Radio Buttons

Advertisements

JavaScript Tutorial Part 1 : Introduction

This course deals with Scripts. A Script is a segment of code that manipulates the browser and its contents in ways that is not possible with ordinary HTML or Cascading Style Sheets. By using a script in your web pages, you can gain more control of how the page looks and behaves: dates and times can be added to the page, form elements validated before the contents are sent, browser details checked, cookies set, even simple games can be added to a web page – all with a scripting language.

The learning curve for scripting is a lot a steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.

We’re going to study the JavaScript programming language, because it is a widely-used scripting language for web pages. All the scripts in these pages have been tested with modern versions of a wide variety of browsers. If you’re ready, then, let’s make a start.

 

A First Script

Let’s jump right in with a bit of code. Fire up whatever HTML Editor you use  With your editor open, copy the following code. When you’re done copying it, save your work and load it into your browser.

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

document.write(“Hello World”)

</SCRIPT>

</BODY>
</HTML>

All right, how did you get on? All that typing should have gotten you this in the browser:

“Hello World”

Granted, that’s a heck of a lot of trouble to go to just to write “Hello World”. But it’s a start. Let’s explain what’s going on.

When you’re writing your scripts, you enclose them between two <SCRIPT> tags, an opening one and a closing one. The opening one should tell the browser what language the script is written in:

<SCRIPT LANGUAGE = JavaScript>

The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:

</SCRIPT>

Most of your JavaScript will go between these two tags. So what’s all that “document dot write” bit?

document.write(“Hello World”)

Document is part of something called the Document Object Model. Document refers to all the text and HTML elements between the two BODY tags. And that includes any attributes inside the BODY tag itself. Like BGCOLOR.

Write( ) is a method of Document. A method is a bit of code that actually does something. As opposed to a Property, which IS something. Methods are usually Verbs, and Properties usually Nouns. The Write( ) method writes text (and numbers as well) between the two BODY tags on your page.

For all you English language experts out there who might be protesting about the lack of capital letters, Document is spelt with a lowercase “d”, and Write with a lowercase “w”. Try changing your code to this and see what happens:

Document.Write(“Hello World”)

JavaScript is damned picky about capital letters – it doesn’t like them at all!

The part or parts between the two brackets of write( ) are what will be written to your page. Direct text goes between two double quotes; Variables don’t need any. Whoops, we haven’t done variables yet. We’ll get to them.

So the whole line reads “Write the text Hello World between the two BODY tags of the web page.”

Don’t worry if you don’t understand some of that – the main point is that you are up and running, and you’ve written your first script. The journey has just started.

JavaScript Tutorial Part 2 : The Script Tag and HTML

At the moment, we have our script between the two BODY tags. And it works perfectly well here. It’s quite happy where it is. However, SCRIPTS are best kept in the HEAD section of your HTML. This is because any code in the HEAD section will be dealt with first by the browser. And besides, it’s neater up there. You’re not cluttering up your HTML code with lots of JavaScript.

So, cut your script out of the BODY section, and paste it into the HEAD section. Like this:

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>

<SCRIPT LANGUAGE = JavaScript>

document.write(“Hello World”)

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

Save your work, and then view the results in your browser. Did it make a difference? No, it did not. But rest assured that your script was dealt with before anything in the BODY section.

You can also put your scripts into HTML tags. Here’s the document.write() code inserted into a Form’s Button code:

<BODY>
<INPUT TYPE = Button VALUE = “Click Me” OnClick = “document.write(‘Hello World’)”>
</BODY>
Looks a bit messy, but then scripting languages can get like that. Notice, however, that we’ve shifted the document code to our button:

OnClick = “document.write(‘Hello World’)”

OnClick is an event that can be applied to buttons (amongst other things.) We’ll get to Events later, but for now, note that the same code we wrote earlier then goes after an equals sign ( = ). Or is it the same code? Have you spotted the difference?

Yes, Hello World is now in single quotes! That’s because we used up our double quotes surrounding the document.write() part. And JavaScript doesn’t like you using two sets of double quotes in the same bit of code. There’s a lot of things that JavaScript doesn’t like. Get used to it.

So what have we learnt so far? We’ve learnt this:

  • Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
  • You can refer to the two BODY tags by using the word “document
  • You can use the write( ) method of document to insert stuff onto your web pages
  • JavaScript is very picky about the way you spell things

The Pop-up message box

We’ve seen one way to display text – with the write() method of document. Another way to display text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they are ideal for nagging your users when they don’t fill in your forms correctly. Here’s a picture of one:

Internet Explorer Alert Box

The code for an Alert box is quite simple. It’s this:

alert(“That was not a proper email address”)

Notice the cunning use of “alert” for an alert box? The message you want to get over to your users goes between the two brackets. Surround your text message with double quotes, or single quotes if you’re putting it after an equals sign in a HTML element.

OnClick = “alert(‘That was not a proper email address’)”

All right, now that we know how to nag our users with pop-up boxes and written messages, what else can we do? Lots, actually. Let’s have a look at that document thing again.

JavaScript Tutorial Part 3 : That Document Thing

As was mentioned, document is a part of the Document Object Model. We saw a method that can be used with document, but here’s a couple more (Properties and Methods).

Properties

  • bgColor
  • fgColor
  • title
  • location
  • images
  • forms

Methods

  • open()
  • close()
  • write()
  • writeln()

There are quite a few more Properties and Methods you can use with document, but these are enough for us. Let’s see how you can use them in your own scripts.

Start a new web page in your HTML Editor (Or use an old one, if you like – waste not, want not!) Then add this to the BODY section of your page:

<BODY>

<INPUT TYPE = Button VALUE = “Colour One” Onclick = “document.bgColor = ‘Red’>

<INPUT TYPE = Button VALUE = “Colour Two” Onclick = “document.bgColor = ‘Blue’>

<INPUT TYPE = Button VALUE = “Colour Three” Onclick = “document.bgColor = ‘Green’>

</BODY>

Remember, when you’re typing the OnClick code that this bit

“document.bgColor = “

is surrounded by double quotes, and this bit:

‘Green’

is surrounded by single quotes. And the whole thing is a confusion of single and double quotes:

Onclick = “document.bgColor = ‘Green’

When you’re done, save your work and view the results in your browser. Click the button and see what happens.

Well, how did you get on? That should impress the neighbours, hey? If it doesn’t, you have some very strange people living next-door to you. Try moving house until you find some neighbours who are impressed.

The background colour of your web page should have changed colour when you clicked a button. It did this because of the bgColor poperty of the document object.

document.bgColor =

After the equals sign, you can either type a name of a colour, or better use an Hexadecimal value:

document.bgColor = #FF0000
document.bgColor = #0000FF
document.bgColor = #00FF00

The fgColor property is similar to the bgColor property. Except it will change the colour of any foreground text on your page. Try it out and see how it works. You only need to change the “b” of “bgColor” to an “f”. And type some text.

JavaScript Tutorial Part 4 : The document Title Property

The Title of a web page appears at the very top of the browser window. You set it by typing some text between the two <TITLE> tags. You can use JavaScript to either get the Title or to set a new one. Here’s a script that pops up the Title in an alert box. Try it out and see it in action:

<HTML>
<HEAD>
<TITLE>The title of this web page</TITLE>

<SCRIPT LANGUAGE = JavaScript>

alert(document.title)

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

You can also reset the title of the web page. Change you alert code to this:

alert(document.title = “Now I’ve changed it”)

The equals sign in there doesn’t actually mean equals. It means “assign the value“. So what we’re saying is “Assign the value of ‘Now I’ve changed it’ to the title of the document.”

Any direct text that you type after the “assignment operator” (the equals sign) needs to go inside double quotes.

Load up your new code in your browser, and watch what happens. First, you’ll get an alert box:

Netscape/Mozilla Alert Box

Alert Box in Netscape

Internet Explorer Alert Box

Alert Box in Internet Explorer

But that’s not the only thing that happens. If you look at the very top of your browser, the title should have change from “The title of this web page” to “Now I’ve changed it.” Here’s the changed version in the two most popular browsers:

Netscape Title Bar

Internet Explorer Title Bar

 

Now that you’re an expert with alert boxes, here’s a little exercise.

Exercise

  • Use an alert box to test out the location property of document.

In the next part, we’ll see how to set up an easy rollover using JavaScript and images.

JavaScript Tutorial Part 5 : A JavaScript Rollover

For this part, you may need these two images. Right click on the images, and save them to your own computer:

Now we can begin.

A useful property of document is images. The images property tells you if any images are loaded. If the answer is yes, and your HTML images have a NAME attribute, document.images can gain access to them. Why is this useful? Well, let’s see. Examine this HTML code for an image:

<BODY>

<IMG SRC = “pointer1.jpg” NAME = “but1”>

</BODY>

Simple enough, because it’s just standard HTML Image code. We can turn the image into a link by surrounding it with an Anchor tag:

<BODY>


<A HREF = “page2.html”>

<IMG SRC = “pointer1.jpg” NAME = “but1” Border = 0>

</A>

</BODY>

Still, simple enough: now we’ve just added the HREF tag and switched the borders off in the image. However, we can add a bit of JavaScript to the Anchor link. This bit of JavaScript uses the images property of document. Like this:

<BODY>

<A HREF = “page2.html” OnMouseOver = “document.images.but1.src= ‘pointer2.jpg'”>

<IMG SRC = “pointer1.jpg” NAME = “but1” Border = 0>

</A>

</BODY>

That code looks a bit messy spread over two lines. Notice, though, what was added to the HREF code. It was this:

OnMouseOver = “document.images.but1.src= ‘pointer2.jpg'”

Remember the OnClick event of the button you did? Well, OnMouseOver is another event you can use. This event does something when the user places the mouse over a link, or an image, or whatever. After the equals sign (assignment operator, if you please), we write the code (not forgetting all those awfully messy double and single quotes):

“document.images.but1.src= ‘pointer2.jpg'”

See what we’re pointing at? The document.images part is pointing to our image that has the NAME but1. We’re then saying access the SOURCE (src), and change it to ‘pointer2.jpg’.

To see the effect that all this code has, move your mouse over the image below. Move it away and then back again.

Neat, hey? Are the neighbours impressed yet? Blimey, they’re a tough crowd.

The code for the “dancing hand” uses an event related to the OnMouseOver event – the OnMouseOut event. The code is then exactly the same, except you’re resetting the image back to pointer2:

OnMouseOut =”document.images.but1.src=’pointer2.jpg'”

So by using the images property of document you can create a rollover effect. This is not, however, the recommended way to create a rollover. The standard way is to pre-load the images in the head section of the web page, then use something called a function to switch the images around.

Another property of document is forms. We’re going to use the Form property of document to validate user input. For that, we need to delve a little deeper into the JavaScript, so we’ll leave it till later.

JavaScript Tutorial Part 6 : JavaScript Methods and Events

Let’s have a look at those document Methods. They were: open( ), close( ), write( ), writeln( ).

We’ve already done write( ), and writeln( ) is the same as write( ) except that you get a line break. So we’ll look (briefly) at open( ) and close( )

open( )

We’re not going to be using this method, but for reference purposes here’s what it does.

The default for document.write( ) is to write stuff in the current document window – the browser window. It doesn’t need to open a new window, because it already has one to work with. You can use document.open( ) to create a new document and send it things like HTML code. You could send the HTML code with document.write( )

document.open( )

document.write(“<H1>Hello</H1>”)

close( )

This method is used to close the document you created with the open( ) method.

Events

Two useful document Events you can use are these:

onLoad =

onUnload =

These are typically used in the BODY section of the HTML code. Here’s two pieces of code that will annoy visitors to your site:
<BODY onLoad = “alert(‘Welcome to my web page’)”>

Or when they leave your site, there’s this:

<BODY onUnoad = “alert(‘Goodbye – Have a nice day’)”>

We’ll see another way to annoy your visitors when we create a pop-up window. We’ll do that real soon. The next part will look at another object that is widely used – the navigator object.

JavaScript Tutorial Part 7 : Testing your Visitor’s Browser

The document object dealt with code between the BODY tags. The navigator object is used to reveal information about the browser your visitors are using. Because some browsers can’t deal with certain things (like the document.images code we wrote), the navigator object is typically used to help divert these users away from any code that they can’t handle.

Two Properties of the navigator object are:

appName
userAgent

Let’s use an alert box to test them out. If you don’t want to open a new page for this exercise, you can just comment out any old code between SCRIPT tags. Like this:

// document.open()

// document.write(“<H1>Hello</H1>”)

The two forward slashes mean “please ignore this code”. Whether you decide to create a new web page, or use an old one, type this code in the HEAD section of the page:

<SCRIPT LANGUAGE = JavaScript>

alert(navigator.appName)

</SCRIPT>

If you’re using Internet Explorer, you’ll get this before the page loads:

The Naigator Ap Name in Internet Explorer

Whereas, if you’re using Netscape/Mozilla, you’ll get this before the page loads:

The Naigator Ap Name in Netscape

Try changing the alert box to this:

<SCRIPT LANGUAGE = JavaScript>

alert(“Your Browser is: ” + navigator.appName)

</SCRIPT>

The plus sign (+) is used to combine things. Here, we’re combining the direct text “Your Browser is:” with whatever value is returned from navigator.appName. Note that the direct text has double quotes surrounding it, and navigator.appName doesn’t. Save your work and load the web page again. You should get something like this (in Netscape):

Test the Browser

OK, so we can tell which browser our visitor is using. But there are many different versions of Netscape and Internet Explorer. An early version of Netscape won’t be able to do as much as the latest version, and therefore may not be able to run our scripts. If we just use navigator.appName we won’t be able to tell if our user has an early version or the latest version.

To solve the problem, we can use navigator.userAgent. Change your alert box to this:

alert(navigator.userAgent)

Now reload your web page.

Internet Explorer will give you something like this:

The User Agent Property

The part that’s useful to us is MSIE 5.01. This tells us that our visitor is using Microsoft Internet Explorer version 5.01. Here’s the Netscape version:

The User Agent Property for Netscape

The information we’re looking for is now on the end: Netscape 6

By using navigator.userAgent we can return all of that text and store it in a variable. We’d then use a JavaScript function to strip out the bit we’re looking for. An IF statement is then typically used to execute code depending on what the browser is.

In the next part, we’ll take a look at how to get the size of the screen your visitor is using, and take a little history lesson.

JavaScript Tutorial Part 8 : Screen Size, the History Property

The window object is actually at the top of the DOM tree. It’s the boss man of the Document Object Model. If we we’re being strictly accurate, we should have been using this:

window.document.write(“Hello”)

And this:

window.navigator.userAgent

But for convenience sake, window is usually left off. This is because most of your code will be written in the current browser window, and not some other window that you haven’t told your browser about.

The window object has some other useful tricks up its sleeve, though. You can find out information about the screen your visitor is using. By using the screen Property of window, you can add Properties that screen has. Like this:

window.screen.height

Some other properties of screen are: width, availHeight, availWidth, colorDepth.

Let’s use width and height to get the size of the screen our visitors are using. After all, they might have a tiny monitor and have to scroll way to the left to see our fancy web page. We could then redirect them to another page, if they have a small monitor.

 

Screen Size

Copy this code into your editor. Place it in the HEAD section of your HTML. Save your work and test the script in your browser:

<Script language = JavaScript>

UserWidth = window.screen.width
UserHeight = window.screen.height
UserWidth = “Screen Width = ” + UserWidth
UserHeight = ” Screen Height = ” + UserHeight

alert(UserWidth + UserHeight)

</Script>

The code is a little more complicated than before. But not too complicated. First, we’re storing the value in width to something called a variable:

UserWidth = window.screen.width

A variable is a little storage area. Think of it as a little cupboard or drawer. Instead of putting socks or underwear in the drawer, you’re putting text or number into it. Your little storage area needs a name (else how could you tell which drawer held the socks and which your underwear?). The variable name is UserWidth. This is a name we made up ourselves. You can use just about anything you want as a variable name. (But there are a number of words JavaScript likes to keep for itself.)

To put something in your drawer (variable) you type an assignment operator (the equals sign), then type whatever you want to put into the drawer (variable).

If you putting text into the variable, surround the text with double quotes:

UserWidth = “This will hold a width”

If you’re putting numbers into the variable, don’t surround the numbers with double quotes:

UserWidth = 600

Or you can combine the two with the plus sign (+):

UserWidth = “This will hold a width of ” + 600

You can also put the value held in another variable into your new variable. Like we did for our code:

UserWidth = window.screen.width

The value held in the last bit (width), is now stored in our variable with the name UserWidth. Then we just combine direct text with the value we’ve just stored in UserWidth:

UserWidth = “Screen Width = ” + UserWidth

Finally, we combine the two variables in an alert box:

alert(UserWidth + UserHeight)

When you load your web page, you should see a message box like this one:

Screen Width and Height

Exercise

Use availHeight, availWidth, colorDepth to find out the available height of your own screen, the available width of your own screen, and the colour depth of your screen. Display the results in an alert box like this one (Netscape):

Screen Properties in an alert box

You can start a new line by adding “\n” to the end of your variable declaration. Like this:

AHeight = window.screen.availHeight + “\n”

 

The history object

The history object can be added to window. The history object can be used to move your user back or forward. The result is exactly the same as clicking the Back and Forward buttons on the browser toolbar. You can also use history.go() to move your users a specified number of pages either backwards or forwards. The history object works like this:

<Script language = JavaScript>

alert(“Sorry, this page is under construction”)

window.history.back()

</Script>

That script could go in say page2.html. On page1.html, there might be a link leading to page2.html. When the link is clicked, the above script will be executed in page2.html. The results is that first the alert box displays. Then the second line of code gets executed. This uses the back() method of the history object to take the user back to where they came from. The forward() method the same way, except your user will be taken forward one page in the browsing history.

To use the go() method of the history object, just type a number in between those two brackets. Like this:

window.history.go( -2 )

The minus two means back two pages. To go forward, just remove the minus sign (-).

OK, we’ve explored a fair bit of the Document Object Model. You should, by now, have a good idea of what can be done with it. To do anything more, though, we’re going to need to delve a little deeper into the JavaScript language. So a word of warning – programming starts here!

JavaScript Tutorial Part 9: Setting up variables in JavaScript

You have just learnt what a variable is (Screen height and width section), and that it is a little storage area for text and numbers. Let’s explore variables a bit more.

Variables

For our purposes, variables can hold two types of information: Numbers, and Strings. We’ve seen how strings work (strings are text), so let’s have a go at number variables.

Number variables in JavaScript can be integers, floating point, or Boolean. An integer is a number without a decimal point; if you absolutely insist on having a decimal point then the thing you want is called a floating point number; Boolean numbers are not really numbers at all but just a record of whether something is true or not true (think of a light switch – is it on or off?). Here’s some examples of all three number types:

Integer Floating Point Boolean
3 3.5 true
16 16.8 false
136 136.58 true

To store one of those number types into a variable, just use the assignment operator ( = ). The number goes on the right hand side of the assignment operator, and your variable name goes on the left. Here’s an example of how to store number types into variables:

Number1 = 3
Number2 = 3.5
Number3 = true

Number1, Number2, and Number3 are our variable names. We could have used anything we liked here. As long as we’re not using the handful of words JavaScript reserves for itself, and not starting with a number, and not putting any spaces in the variable name, we’re all right. Here’s some valid and invalid variable names

BobsNumber = 3 (valid variable name)
Bobs Number = 3 (invalid variable name – space)
3bobsnumber = 3 (invalid variable name – starts with a number)

A good idea when declaring variables, and putting values into them, is to use the word var in front of them. Like this:

var Number1 = 3

The word var is short for variable. It ensures that any variable with the same name elsewhere in your code doesn’t overwrite it. Which is a pain, believe me. For clarity’s sake, however, we’ll leave var out of our declarations.

You can store the value in one variable name in another variable. Take this as an example:

A = 2
B = A

Here, the variable “A” is assigned a value of 2. The value inside “A” is then assigned to the variable “B”. So what’s inside “B”? Not the letter “A”, but the number 2, of course.

If you want to add, subtract, multiply, and divide your values, you’ll need the operators. The four basic operators are these :

+ (Add)
(Subtract)
* (Multiply)
/ (Divide)

Actually, the last two should be the first two. That’s because Multiply ( * ) and Divide ( / ) are done first when JavaScript is doing its sums. But, anyway, here’s the operators in action. Try these scripts out in a web page, and see how you get on:

<SCRIPT Language = JavaScript>

A = 2
B = A
C = B + A
alert(C)

</SCRIPT>

<SCRIPT Language = JavaScript>

A = 2
B = 4
C = B * A
alert(C)

</SCRIPT>

<SCRIPT Language = JavaScript>

A = 2
B = 4
B = B – A
alert(B)

</SCRIPT>

<SCRIPT Language = JavaScript>

A = 2
B = 4
B = B / A
alert(B)

</SCRIPT>

<SCRIPT Language = JavaScript>

A = 2
B = 4
C = 6
D = (B * C) / A
alert(D)

</SCRIPT>

So, how did you get on? The brackets in the last script are for sectioning off code that you want handled separately. Anything in brackets gets dealt with first. So B is multiplied by C first, then the total is divided by A.

OK, let’s do something a bit more useful. (Though not that much more useful!) The next part is all about adding numbers in text boxes