At the moment, we have our script between the two BODY tags
Introduction
The Javascript tutorials are intended for complete beginners to the subject. If you've never done any programming before in your life, then this is the place to be. Complete the entire course and you'll have a very good understanding of prgramming in general, and Javascript in particular.
How to Study
You should take things slowly when studying any new computer course. The concepts can be difficult at first, so it's important not to do too much at once. Take your time, and don't be put off if at first you don't undertand the lessons. Come back to the lesson later, and it may seem a little easier. And don't forget to bookmark this site!
Projects
Throughout this course, there are a number of exercises to complete. You should try to do all the exercises, as they are designed to increase your understanding of the subject matter. And don't forget to download any course files along the way!
Software Requirements for the Course
No extra software is needed for this course. As long as you have a browser (Internet Explorer, Firefox, or Mozilla are ideal) then you have everything you need. But a text editor like the Windows Notepad, or HTML editor will make things easier. Windows users can download my free HTML Editor by clicking the link below:
Go to the HTML Editor Download page
Linux users should have any number of text editors already installed. The scripts have been tested with the Firefox and Konqueror Browsers. (The test machine was running Mandrake 9.1 with the KDE desktop.) Most scripts work, except the events in Mozilla, but we explain why this is, and what you have to do to overcome the problem.
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 (you can use our free Editor by clicking here: Download the free editor ). With your editor open, copy the following code. When you're done copying it, save your work and load it into your browser.
A First Script
document.write("Hello World")
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 tags, an opening one and a closing one. The opening one should tell the browser what language the script is written in:
The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:
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.
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:
A First Script
document.write("Hello World")
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:
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 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:
[pic]
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.
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:
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.
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 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:
The title of this web page
alert(document.title)
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
[pic]
Internet Explorer Alert Box
[pic]
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:
[pic]
[pic]
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.
A JavaScript Rollover
For this part, you may need these two images. Right click on the images, and save them to your own computer:
[pic][pic]
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:
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:
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:
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.
[pic]
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 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("Hello")
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:
Or when they leave your site, there's this:
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.
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("Hello")
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:
alert(navigator.appName)
If you're using Internet Explorer, you'll get this before the page loads:
[pic]
Whereas, if you're using Netscape/Mozilla, you'll get this before the page loads:
[pic]
Try changing the alert box to this:
alert("Your Browser is: " + navigator.appName)
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):
[pic]
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:
[pic]
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:
[pic]
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.
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:
UserWidth = window.screen.width
UserHeight = window.screen.height
UserWidth = "Screen Width = " + UserWidth
UserHeight = " Screen Height = " + UserHeight
alert(UserWidth + UserHeight)
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:
[pic]
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):
[pic]
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:
alert("Sorry, this page is under construction")
window.history.back()
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!
|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: |
| |
|A = 2 |
|B = A |
|C = B + A |
|alert(C) |
| |
| |
|A = 2 |
|B = 4 |
|C = B * A |
|alert(C) |
| |
| |
|A = 2 |
|B = 4 |
|B = B - A |
|alert(B) |
| |
| |
|A = 2 |
|B = 4 |
|B = B / A |
|alert(B) |
| |
| |
|A = 2 |
|B = 4 |
|C = 6 |
|D = (B * C) / A |
|alert(D) |
| |
|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 |
Adding numbers in textboxes
We'll design a web page with a three text boxes and a command button. When the command button is clicked, any numbers in the first two boxes will be added together. The answer will appear in the third text box. Here's what your form will look like when it's finished (The button doesn't do anything yet, if you click it):
Number One: [pic]Number Two: [pic]
Total: [pic]
So you type a number into the Number One text box, and type a number into the Number Two text box. When the "Add Numbers" button is clicked, the total will appear in the "Total" box. Let's design the HTML Form first (You can copy and paste this).
Number One:
Number Two:
Total:
OK, it might look a bit messy, but it's just a standard HTML form. You can use your HTML Editor to design it. Note a few things about the form, though. First, that the form has a NAME:
When we're writing the code, we need to tell the browser which form we're talking about. Our form is called "frmOne". For the very same reason, all three text boxes have NAMES:
txtFirstNumber
txtSecondNumber
txtThirdNumber
Note, too, that all three text boxes have a VALUE attribute.
The button has an onClick event that is crucial to the operation:
onClick = calculate( )
Remember that name - calculate( ). We're going to be seeing that in the SCRIPT section. So, in the HEAD section of your web page, write the following script:
function calculate() {
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
C = (A + B)
document.frmOne.txtThirdNumber.value = C
}
A function is a way to group together a section of code. This function will calculate the two numbers from our text boxes, and pop the answer in the third text box. The syntax for a JavaScript function is this:
function FunctionName() {
}
Our FunctionName was calculate(), which was the one from the command button. When the button is clicked, the browser will try to find a function called calculate(). Note that when setting up a function you need a lowercase "f" and not a capital "F". After the name of your function, type a pair of round brackets. You can put something called an argument in between the round brackets. But our function has no arguments, so we just leave them empty. After the round brackets, type a space, then type a left curly bracket { . The code for the function itself goes next (on a new line), and then you type a right curly bracket }.
Here's our function again:
function calculate() {
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
C = (A + B)
document.frmOne.txtThirdNumber.value = C
}
The first line of the code is this:
A = document.frmOne.txtFirstNumber.value
The value we're putting in the variable called "A" is coming from the first text box. The part on the right of the equals sign ( = ) might look a bit long and complicated, but all we're doing is telling the browser which text box we're referring to. We're saying this:
"In the document there is a form called frmOne. This form has a text box called txtFirstNumber. Whatever value has been typed into this text box, store it in the variable called A."
We do the same for the second text box, storing its value in the variable called B.
The third line of code adds together the two values A and B. The total is then stored in the variable called C.
Once we have our answer in C, we then need to store it in the third text box on the form. So we have to say "Assign the value in the variable called C to the text box called txtThirdNumber."
document.frmOne.txtThirdNumber.value = C
To finish it all off, we type our right curly bracket }.
So, after you've finished typing all that code, load it into your browser and give it a try. Test out the boxes and button below, to see what yours should do. Enter a 2 in the first box, and a 2 in the second box. Then click the Add Numbers button. You should get 22!
Top of Form
Number One: [pic]Number Two: [pic]
Total: [pic]
Bottom of Form
To find out what went wrong, read the next part!
Adding numbers in textboxes (continued)
Whoops! Something has clearly gone wrong with our adding machine from the previous part of this javascript tutorial. Two plus two does not equal twenty two! Our programme seems to have joined our two numbers together, rather than adding them together.
The problem lies in those text boxes. Not surprisingly, what you get form a text box is text. So when we typed in the number 2, the programme thought it was text. When we told the programme to add the numbers we did it like this:
C = (A + B)
Because the programme thinks there is text in the variables A and B, it will join them together instead of adding them up. When you tried to add up 2 + 2, you got 22 and not 4. So what's the solution?
One solution is to force the programme to recognise the text as a number. We can use the JavaScript function eval(). Like this:
A = eval(document.frmOne.txtFirstNumber.value)
B = eval(document.frmOne.txtSecondNumber.value)
In other words, surround your document code with the round brackets of the eval() function. Just the first two, A and B.
Another, neater, solution is to use JavaScript's in-built Number() function:
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
A = Number(A)
B = Number(B)
Make sure Number has a capital "N", and not a lowercase "n". This will force JavaScript to recognize the value from a text box as a number. Using this method, however, will get you a "NaN" in the your answer text box, if your user enters a string (two + two instead of 2 + 2. NaN stands for Not a Number). So you need to do some error checking for this, which we'll get to later.
For now, pretend that your users are all well behaved, and wouldn't dream of spoiling your code by entering text instead of numbers!
When you've amended your code, try your programme again. It should work properly now.
Ok, here's a little exercise. Have a go at this.
Exercise
Add a second button to your form. When this button is clicked, the two numbers in the first and second text boxes should be multiplied together. The answer should appear in the third text box. You will need to write a second function below the first one you have just wrote. When you're done, your code should work like the one below. Enter some numbers in the boxes below, then click the button to test out the scripts.
Top of Form
Number One: [pic]Number Two: [pic]
Total: [pic]
Bottom of Form
Right, that should have given you lots of practice with variables. Not to mention practice with getting things from text boxes on forms. We'll move on to Control Flow now. We'll use loops to turn our little programme into a "times table" calculator, and we'll use if statements to help us evaluate things.
Javascript If Statements
To write more complex programmes in any language, you need something called control flow. This is just controlling the direction of the programme so that it's not so linear. Instead of reading your code line by line, and every single line, you can skip lines of code depending on certain conditions. For example, if you're using an OK and Cancel alert box, and the user clicks OK, you can execute one piece of code. If, however, the user clicks Cancel, you can have a different segment of code executed. This is called Control Flow. Don't worry if none of that makes sense - it will become clearer when you follow the examples. Programming is, after all, about doing, and not yakking.
If Statement
If statements are the backbone of programming. Some people even go so far as to say that in a sense, all programming is a series of If statements. To get you started on just what an If statement is, type this code into the HEAD section of a HTML page, then test it out:
ConfirmStatus = confirm("Format Your Hard Drive?")
if (ConfirmStatus == true) {
alert("Formatting Hard Drive Now ")
}
The first line of code is what gives you a new type of message box -confirm. It looks like this in Internet Explorer (NOTE: We're not actually going to format anything!)
[pic]
The programme then waits until you click either the OK button or the Cancel button.
ConfirmStatus = confirm("Format Your Hard Drive?")
Whichever button you click, the answer will be stored in the variable ConfirmStatus. The answer, in this case, is a Boolean value: it's either True or False. If you click OK on a confirm box, the answer will be true; if you click Cancel on a confirm box, the answer will be false.
What you as a programmer have to do next is to check which button the user clicked. Was OK clicked or was Cancel clicked? If the OK button was clicked, you'll want to do one thing; if the Cancel button was clicked, you'll want to do another thing. So you need to test what is inside the variable ConfirmStatus. You do the testing with an if statement. Our if statement was as simple as if statement get. It was this:
if (ConfirmStatus == true) {
alert("Formatting Hard Drive Now ")
}
Note the format for an if statement:
if (condition to test) {
Your statement here
}
• First you type the word if (in lowercase letters)
• Next, type a space, then your condition inside round brackets
• Type another space, then type a left curly bracket {
• On a new line, type your statement (what you want to happen)
• Finish with a right curly bracket }
If you're checking what's inside a variable, JavaScript requires a double equals sign (==). It means "has a value of". In our condition to test, we wanted to check whether the variable ConfirmStatus was true or false. So we did this:
ConfirmStatus == true
We're saying "If ConfirmStatus has a value of true" then execute the next line of code. The next line of code was an alert box:
alert("Formatting Hard Drive Now ")
The main point to bear in mind here is that you would only get the alert message IF you clicked the OK button. Because then the variable ConfirmStatus would be true. But what if the user clicked Cancel? What happens then?
If the Cancel button is clicked, the ConfirmStatus variable will be false. In that case, our alert box statement doesn't get executed - the programme will just ignore that line and move on to the next line of code.
We can, however, add another statement to check for a false condition. Change your code to this:
ConfirmStatus = confirm("Format Your Hard Drive?")
if (ConfirmStatus == true) {
alert("Formatting Hard Drive Now ")
}
if (ConfirmStatus == false) {
alert("Tough! Formatting Hard Drive anyway")
}
The new code is in bold. All we've done is add a second if statement to check for a false condition. If ConfirmStatus is false (the Cancel button was clicked), then the second alert box is displayed.
All you're saying with if statement is this:
"If it's true, do one thing; if it's false do another thing"
You can add as many if statements as you need, and you can nest one if statement inside another. For example, you could add another confirm box inside the second statement, and nest another if condition. Like this:
if (ConfirmStatus == false) {
nested = confirm("Ah, go on! Let me format your hard drive")
if (nested == true) {
alert("Thanks!")
}
if (nested == false) {
alert("Spoil Sport!")
}
}
When you're nesting if statement like that, things can get a little complicated. To move on to if ... else statements, click the link below.
|if … else statements |
| |
|We saw in the last part of this Control Flow section that to test two conditions (true and false) two if statements were needed. But you don't have to use separate if |
|statements. Instead, you can use the else word. This is ideal for Boolean values. Here's our code again, this time with an if … else statement. |
|ConfirmStatus = confirm("Format Your Hard Drive?") |
|if (ConfirmStatus == true) { |
|alert("Formatting Hard Drive Now") |
|} |
|else { |
|alert("Tough! Formatting Hard Drive anyway") |
|} |
|The first if statement is exactly the same. Now, though, instead of our second if statement to test for a false condition, we've used the word else. The format for an if … else|
|statement is this: |
|if (condition to test) { |
|Statement 1 |
|} |
|else { |
|Statement 2 |
|} |
|So if the first statement isn't true, the code beneath else gets executed. |
| |
|if … else if |
|If you need multiple if statements, then if … else if is the one to use. In the code below, we'll check to see what number is in a text box. Depending on which number was typed|
|in, we'll display an appropriate (or inappropriate) message. First, you're going to need a few more symbols to work with. You've already met the double equals symbol (==), and |
|know that this means "has a value of". Here's some more. |
|> | |Greater than |
|< | |Less than |
|= | |Greater than or equal to |
|!= | |Not equal to |
|&& | |Evaluation And |
||| | |Evaluation Or |
|We'll see how these operators work with our next little programme. So design an HTML page with the following form on it. |
| |
|Type in your age, then click the button: |
| |
| |
| |
|Once you've typed the HTML code for the form, type this JavaScript code in the HEAD section of your page: |
| |
|function message() { |
|age = document.AgeTest.txtAge.value |
|if (age < 16) { |
|alert("How's school these days?") |
|} |
|else if(age > 16) { |
|alert("It's tough being an adult") |
|} |
|} |
| |
|We had another onClick event for our command button, which called the message( ) function. When the message( ) is called, it first stores the value in the text box into a |
|variable called age. |
|age = document.AgeTest.txtAge.value |
|Next, we need to test what is inside the age variable. We started the test with an if statement: |
|if (age < 16) { |
|alert("How's school these days?") |
|} |
|Notice one of our new symbols in the "condition to test": |
|age < 16 |
|If the value stored in the variable age is less than 16, then the condition will be true. If the condition is true then our statement will get executed. The statement was an |
|alert box: |
|alert("How's school these days?") |
|Next, because we're checking for multiple values, we have the else if condition. Ours was this: |
|if (age < 16) { |
|alert("How's school these days?") |
|} |
|else if(age > 16) { |
|alert("It's tough being an adult") |
|} |
| |
|The format for the else if part is this: |
|if (condition to test) { |
|statement 1 |
|} |
|else if(condition to test) { |
|statement 1 |
|} |
|It's just another if statement with the word else in front of it (type a space after the word else). You can add as many else if conditions as you want. You can also add an |
|ordinary else statement at the end, just to trap anything not met by your conditions. After all, somebody might type text into your text box, or minus numbers, or nothing at |
|all. In which case, this could solve your problems (though it's no substitute for more thorough error checking): |
|if (age < 16) { |
|alert("How's school these days?") |
|} |
|else if(age > 16) { |
|alert("It's tough being an adult") |
|} |
|else { |
|alert("Please try again") |
|} |
| |
|We haven't finished with this part yet, so you need to click below to continue the lesson. |
The Operators, And, Or
Notice in that last code that the second age test uses the Greater Than symbol ( > ). Try entering the number 16 in your text box, and then click your button. What happened? If you haven't added the final else statement, then nothing will happen.
This is because we're testing for Less Than 16 in the first if statement, and then testing for Greater Than 16 in the first else statement. We're not testing for exactly 16. So none of our statements will be true. What we need is another of our symbols. Either >= (Greater Than or Equal to) or ). In it's place, insert either = to see what happens. Play about with the symbols to see how they work. What happens if you put both in? Like this:
if (age = 16) {
alert("It's tough being an adult")
}
else {
alert("Please try again")
}
Exercise
Add a few more else if statements, and test for these ages groups:
17 to 25
26 to 40
41 to 65
66 and over
Add a suitable alert message for when the command button is clicked.
With an exercise like the one above, it's really handy to use the AND operator (&&) and the OR operator ( || ). Here's how to use them.
AND and OR
These two operators will return a Boolean value. You use them when you want to test two or more conditions. For example, if you wanted to test if someone was over 65 and had a buss pass, use AND; if you wanted to test if someone was over 65 or had a buss pass, use OR. Like this:
if (Age >= 65 && BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
If BOTH conditions are true then the IF Statement is true. If just one of them is false, then the entire IF Statement is false. Note the format (and where the round brackets are):
if (condition1 && condition2) {
Code if true here
}
Contrast that with the OR operator:
if (Age >= 65 || BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
This time, if just one of your conditions is true then the entire IF statement is true. They both need to be false for the entire IF Statement to be false. The format (syntax) is the same, except for the two pipe characters ( || ) in place of the two ampersands (&&).
Not a Number
Let's use the AND operator to solve our little problem from a previous lesson. You'll remember what that problem was - if a user enters text into our text boxes, then we get the "NaN" error message in our answer text box. Here's the problem form. Click the Add Numbers button and see what happens:
Top of Form
Number One: [pic]Number Two: [pic]
Total: [pic]
Bottom of Form
What we need to do is to check the text in the text box. If they are both numbers, then we can go ahead and add them up; if just one of them isn't, then we can display an alert box to tell the user to try again. Our original code was this:
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
A = Number(A)
B = Number(B)
C= A + B
document.frmOne.txtThirdNumber.value = C
We can insert an If statement on the third line of the code which will check if the user entered a number. Only then will we do the adding up. The if statement we can use is this:
if (Number(A) && Number(B)) {
A = Number(A)
B = Number(B)
C = A + B
document.frmOne.txtThirdNumber.value = C
}
else {
alert("Please enter a number in both boxes")
}
Notice the use of the AND operator (&&). What we're saying is: "If it's true that A is a number AND if its true that B is a number, then execute the code below; otherwise, display an alert box."
Amend your code to include the if .. else statement, and test it out in a browser. It should work all right now.
Except! Try entering two zeros in the text boxes and see what happens. Can you think of a solution?
When you've solved the problem, you can move on to Loops.
JavaScript For Loops
So what's a loop then? A loop is something that goes round and round. If I told you to move a finger around in a loop, you'd have no problem with the order (unless you have no fingers!) In programming, it's exactly the same. Except a programming loop will go round and round until you tell it to stop. You also need to tell the programme two other things - where to start your loop, and what to do after it's finished one lap (known as the update expression).
There are three types of loops in JavaScript: for loops, while loops, and do … while loops. We'll start with the most common type - the for loop.
For Loops
Here's a JavaScript for loop in a little script. Type, or copy and paste, it into the HEAD section of web page (along with the script tags) and test it out.
counter = 0
for(start = 1; start < 10; start++) {
counter = counter + 1
document.write("start = " + start + " counter = " + counter + "")
}
How did you get on? You should have this printed on your page:
start = 1 counter = 1
start = 2 counter = 2
start = 3 counter = 3
start = 4 counter = 4
start = 5 counter = 5
start = 6 counter = 6
start = 7 counter = 7
start = 8 counter = 8
start = 9 counter = 9
start = 10 counter = 10
The format for a for loop is this:
for (start value; end value; update expression) {
}
The first thing you need to do is type the name of the loop you're using, in this case for (in lower case letters). In between round brackets, you then type your three conditions:
Start Value
The first condition is where you tell JavaScript the initial value of your loop. In other words, start the loop at what number? We used this:
start = 1
We're assigning a value of 1 to a variable called start. Like all variables, you can make up your own name. A popular name for the initial variable is the letter i . You can set the initial condition before the loop begins. Like this:
start = 1
for(start; start < 11; start++) {
The result is the same - the start number for the loop is 1
End Value
Next, you have to tell JavaScript when to end your loop. This can be a number, a Boolean value, a string, etc. Here, we're telling JavaScript to bail out of the loop when the value of the variable start is Less Than 11.
Update Expression
Loops need a way of getting the next number in a series. If the loop couldn't update the starting value, it would be stuck on the starting value. If we didn't update our start value, our loop would get stuck on 1. In other words, you need to tell the loop how it is to go round and round. We used this:
start++
In the java programming language the double plus symbol (++) means increment (increase the value by one). It's just a short way of saying this:
start = start + 1
You can go down by one (decrement) by using the double minus symbol (--), but we won't go into that.
So our whole loop reads "Starting at a value of 1, keep going round and round until the start value is less than 11. Increase the starting value by one each time round the loop."
Every time the loop goes round, the code between our two curly brackets { } gets executed:
counter = counter + 1
document.write("start = " + start + " counter = " + counter + "")
Notice that we're just incrementing the counter variable by 1 each time round the loop, exactly the same as what we're doing with the start variable. So we could have put this instead:
counter++
The effect would be the same. As an experiment, try setting the value of the counter to 11 outside the loop (it's currently counter = 0). Then inside the loop, use counter- - (the double minus sign).
OK, all that theory might be getting a bit heavy. Time to write our little "times table" programme, that was mentioned in the last section.
A Times Table Programme
Design a web page that looks like the one below. (It's just basic HTML and shouldn't cause you too much trouble. Though, if you want to copy and paste all the code, you can click this link:)
Click here for the HTML code
Top of Form
Start Number: [pic]End Number: [pic]Multiply By: [pic]
[pic]
[pic]
Bottom of Form
Once you've designed your form, you can start the programming. The programme is quite simple: when the "Times Table" button is clicked, the times table specified in the "Multiply By" text box will appear in the Text Area below it (1 time 2 = 2, 2 times 2 = 4, 3 times 4 = 12, etc).
The Programme at the top of the page didn't do anything when you clicked the "Times Table" button. Here's one that does. Click the button to see what we're going to be programming:
Top of Form
Start Number: [pic]End Number: [pic]Multiply By: [pic]
[pic]
[pic]
Bottom of Form
The numbers in the first two text boxes (1 and 10) will be used for the start and end value of our for loop. So, here's the code: Add it to the HEAD section of your web page. Test it out and then move on to the explanation.
function calculate() {
start = document.frmOne.txtStart.value
end = document.frmOne.txtEnd.value
times = document.frmOne.txtTimes.value
if(Number(start) && Number(end) && Number(times)) {
start = Number(start)
end = Number(end)
times = Number(times)
result = document.frmOne.taOne
for(i = start; i 3) inc = 0
That should prevent "undefined" from displaying in the text box.
Arrays are used a lot inside loops. We're going to see how that works now by creating a lottery number generator. But before continuing you should ensure that you have a good understanding of how for loops work. If not, go back and revise.
In the next part, we'll start work on a lottery programme.
Arrays and Loops
If you want to assign a value to a position in an array, you can just do this:
Array[9] = "Hello World"
To display the value, just access its index number again:
alert(Array[9])
The fact that you can access the index number of an array to assign values makes them very handy in loops. To start our lottery number generator (UK lottery), we're going to create an array of 49 numbers. Number 1 will be at position 1 in the array, number 2 at position 2, etc. We could do this for all 49 numbers:
Lottery = new Array(49)
Lottery[1] = 1
Lottery[2] = 2
Lottery[3] = 3
Lottery[4] = 4
But we'd have a laborious job typing all the array positions out, and all the values for them. Instead, we can use a loop to fill our array with the numbers 1 to 49. Here's the loop we can use:
for (i = 1; i < 50; i++) {
Lottery[i] = i
}
Isn't that easier? But how does it work? Well, first we set a start position for our for loop by assigning 1 to the variable called i (i = 1). The end position for our loop is when the variable i is not less than 50 (i < 50). Every time round the loop 1 gets added to i (i++).
Then we assign the value of i to a position in our array:
Lottery[i] = i
At first, the value in i is 1. Which gives us this in reality:
Lottery[1] = 1
The next time round the loop, 1 gets add to the variable i. So we'd then have this:
Lottery[2] = 2
By the time the loop ends, all 49 positions in our array would be filled with the numbers 1 to 49. And that's all there is to it - a couple of lines of code has saved us reams of typing!
To demonstrate that it does indeed work, create this form on a new web page:
Make sure your form has the NAME frmOne, and that your TEXTAREA has the NAME taAll. For the button, you're adding a onClick event which calls the function getNumbers().
When you have your form in place, add this script to the HEAD section of your web page:
function getNumbers() {
TA = document.frmOne.taAll
lottery = new Array(49)
for (i = 1; i < 50; i++) {
lottery[i] = i
TA.value = TA.value + lottery[i] + "\n"
}
}
To see what your programme should do, click this link (opens in a new window):
Click here for the Script in action
We've started the script with a function:
function getNumbers() {
}
The first line inside the function is just assigning the text area on our form to a variable call TA. This will make things easier for us, and we won't have to keep typing it all out when we want to add things to the text area:
TA = document.frmOne.taAll
On the next line, we set up our array:
lottery = new Array(49)
Next comes our for loop:
for (i = 1; i < 50; i++) {
lottery[i] = i
TA.value = TA.value + lottery[i] + "\n"
}
Notice the line that has been added to the for loop:
TA.value = TA.value + lottery[i] + "\n"
All that line is doing is adding the values in our array to the text area. We want to keep whatever is inside the text area, so we have to say:
TA.value = TA.value +
Then we add the value from the array, with a new line character at the end:
lottery[i] + "\n"
When you've finished adding the code to the HEAD section, test it out. When you click the button, the numbers 1 to 49 will be added to your text area.
For a lottery, though, we need to shuffle all the numbers. Otherwise, everybody would win!
Shuffling the numbers in an Array
OK, the next thing we want to do is shuffle our numbers up. Once the numbers are shuffled up, we can just peel off the first six for our lottery numbers. Again, we'll use arrays inside loops to do this for us.
The code that shuffle the numbers up might be a tad complex at this stage of your programming career. The code is this:
for (i = 1; i < 50; i++) {
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}
When you add it to your other code, your script should look like this (new code is in red bold text):
function getNumbers() {
temp = 0
newnumber = 0
document.frmOne.taAll.value = ""
TA = document.frmOne.taAll
lottery = new Array(49)
for (i = 1; i < 50; i++) {
lottery[i] = i
}
for (i = 1; i < 50; i++) {
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}
}
The first few new lines are just setting up variables temp and newnumber, and clearing the text area:
temp = 0
newnumber = 0
document.frmOne.taAll.value = ""
Notice, too, that the code that inserted numbers into the text area has now been cut. We'll use another for loop to display the shuffled numbers. So our first for loop is just this:
for (i = 1; i < 50; i++) {
lottery[i] = i
}
That's the for loop that puts the numbers 1 to 49 into our array. But they are in a nice orderly fashion. What we want is to shuffle them up a bit. Hence our rather complex second for loop:
The idea behind our shuffle code is this: Grab a random number from 1 to 49. Store the current array value in a temp variable. Get the array[Random Number] value and put this into the current array value. Swap the current array value with the array[Random Number] value.
That explanation might not be quite so crystal clear, but all the code is doing is swapping numbers around. The first two lines in the for loop get us our random number:
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
The code Math.random() gets you a random number between 0 and 1. We're then multiplying that random number by 49, then adding 1. This will ensure that we get a random number between 1 and 49. Except, the number will be a floating point number. A rather long one. Something like this:
12.34528569
To chop off the part after the point, we can use the in-built function parseInt(). We need only pass it the number and what numerical base we want (10 will get you decimal).
The rest of the code works like this (assuming the random number generated is 12)
temp = lottery[1]
lottery[1] = lottery[12]
lottery[12] = temp
In other words, the numbers 1 and 12 have swapped places. Don't worry if you don't understand what's going on. The rest of the code is a lot easier.
OK, we've found a way to jumble up all our nice, orderly numbers. Now what?
Well, we can use a loop to display the results of all that jumbling. Add this for loop underneath the code that shuffled the numbers:
for (i = 1; i < 50; i++) {
TA.value = TA.value + "lottery[" + i + "] = " + lottery[i] + "\n"
}
All the code inside that loop is doing is putting the array values into the text area. It's adding a bit of text along side the values as well. Try it out and see what happens. You should now see something like this in your text area (click the link to test out the programme so far):
Click here for the Script in action
As you can see, our 49 numbers are nicely shuffled. All we need to do now is peel off the first six numbers and we have our very own lottery number generator. Which brings us neatly to an exercise.
Exercise
Write the code that peels off the first six numbers. Display the results in a separate text area on the web page.
Click here to see what your script should do
Exercise
Amend your lottery programme to include the following:
• Six text boxes for entering lottery numbers
• One text box to display how many numbers came up
• One text box to display the number of draws
The finished programme might look something like this:
Click here to see what your Lottery Programme might look like
For this exercise, you're writing a programme that checks the lottery numbers from the six text boxes. The numbers in the six text boxes will be checked against those drawn in the text area under "winning lottery numbers".
Display how many numbers were correctly guessed. Display how many draws there have been. (This number will be incremented every time the "Get Lottery Numbers" button is clicked.)
You have already written most of the programme. To check the numbers in the text boxes against the winning numbers, you'll need one for loop inside another. Add a counter to record the number of winnings numbers.
And that wraps up this section on the basics of programming. You can move on to the next section, which is all about javascript Events, and javascript functions.
Javascript Events - Browser Detection
You have already met a few JavaScript events that you can use in your code. The one you're most familiar with is onClick. You have also met the onMouseOver event and the onMouseOut event. These events are just special in-built instructions to the browser. The browser sees the event name, and knows that some code is coming up that it needs to execute. You don't really have to worry about how the browser executes the events. With JavaScript, what you should concentrate on is what the events do, and how you use them.
Here, then, is a list of (some) events you can use with JavaScript:
onClick
onDblClick
onDragDrop
onKeyDown
KeyPress
KeyUp
MouseDown
MouseMove
MouseOut
MouseOver
MouseUp
Move
Resize
onLoad
onUnload
onChange
onReset
onSelect
onSubmit
The problem is that although most browsers recognise those events, the event itself can be quite torturous to use, especially since Netscape came up with the Event Object. The Event Object is a way for the window itself to record events. For example, if the mouse was clicked in the window you can record the position of the mouse pointer. But Internet Explorer doesn't recognise this Event Object of Netscape's. So any code you write which uses the Netscape's Event Object will cause an error if the page is loaded into Internet Explorer.
The standard way round this is to write code which detects the browser type. Because there are a lot of other things that one browser can do that the other can't, browser detection is considered good practice.
In this next segment, we'll look at one way to detect which browser the user has (Netscape or Internet Explorer), and then direct them to the relevant code. The code they'll get tells them the mouse position on the screen. You'd better hang on to your hats, though, because this could be quite a bumpy ride!
Browser Detection
We start detecting the browser with the navigator object. You met this object earlier. It's quite simple:
Browser = navigator.appName
The appName property will tell us whether the user has Netscape or Internet Explorer (we're assuming just these two are used). The variable Browser will then hold either the text "Netscape" or "Microsoft Internet Explorer".
Next, we need to search that text for either the word "Netscape" or the word "Microsoft".
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
One way you can search text is with the in-built function indexOf. Remember, our variable Browser is holding the text. After typing a full stop, you type indexOf followed by a pair of round brackets. Inside the round brackets you put the text you're looking for. The text you're looking for goes in double quotes if it's direct text. (No quotes are used if the text you're looking for is in a variable.)
Browser.indexOf("Netscape")
All that means is, "Search whatever is inside the variable Browser and find out if the word Netscape is there." If Netscape is there, what will be returned is the position of the first letter of the word Netscape. The search starts at position zero. If the word Netscape is not found, what will be returned is the number minus one (-1).
Our two variables, Net and Micro, will then hold either zero or greater, or minus one.
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
We can use an if statement to test which one holds the minus one, and which one doesn't: Here's the entire script. Place it in the HEAD section of a web page and try it out.
Browser = navigator.appName
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
Netscape = false
IE = false
if(Net >= 0) {
Netscape = true
alert("You're using Netscape")
}
if(Micro >= 0) {
IE = true
alert("You're using Internet Explorer")
}
And that's it - a simple (ish) way detect which browser is being used. However, more code would usually need to be added. This is because some older versions of Netscape or Internet Explorer wouldn't be able to process this next code. So you would need to get which version of Netscape or Internet Explorer was being used. You'd use navigator.appversion for this. But as this is supposed to be as section on events, we'll leave that aside.
In the next part, we'll explore the onMouseDown event.
JavaScript Events - OnMouseDown
What we'll do in the pages that follow is to detect the position of the mouse pointer when the user clicks on the screen. To do that, you need to find the X coordinate and the Y coordinate.
• The X coordinate tells you how far left of the screen you are
• The Y coordinate tells you how far down the screen you are.
Both Netscape and Internet Explorer use the screenX and screenY property. If you're sure that your users will all have Internet Explorer, then the task is fairly easy. Here's the script:
XY Coordinates
function XYpos() {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
You can click the link below to see what the script does (opens in a new window):
Click here to see the script in action
The BODY section of the HTML is where we put the event handler onMouseDown. Now, every time the mouse is clicked anywhere in the Body of the web page, the function XYpos() gets called.
Inside the function, the property screenX and the property screenY (which are both properties of event) are put inside two variables:
xPos = event.screenX
yPos = event.screenY
So xPos will hold how far left the mouse pointer is when the page is clicked; and yPos will hold far down the mouse pointer is when the page is clicked.
Both coordinates are then displayed in an alert box:
alert(xPos + " left " + yPos + " down")
If you have Netscape, however, the code will point blank refuse to work!
If we add our Browser detector code to the script above, though, we can get Netscape to display an error message. Try changing you code to this:
Browser = navigator.appName
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
Netscape = false
IE = false
if(Net >= 0) {
Netscape = true
}
if(Micro >= 0) {
IE = true
}
function XYpos() {
if (IE == true) {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
else if (Netscape == true) {
alert("Script won't work: " + "\n" + "You're using Netscape")
}
}
Click here to try the script out (especially if you have Netscape/Mozilla)
After the browser detection code, we've added our XYpos() function. This time, we've put some if statements in it. If the user has Internet Explorer, we're all right; if the user has Netscape, display the message:
function XYpos() {
if (IE == true) {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
else if (Netscape == true) {
alert("Script only works with Internet Explorer - sorry!")
}
}
So Internet Explorer's way to get the coordinates of the mouse pointer is not too difficult. The reason why the script is so long is simply because Netscape refuses to cooperate. We therefore have to add browser detection code and do one thing for Internet Explorer and do another thing for Netscape.
If you want to detect the mousedown event with Netscape then the process is quite complicated. We won't go into here, but you can click the link below to see the script in action. To view the source code, click View > Source in Internet Explorer. Netscape/Mozilla users should click View > Page Source. When you see the code, you'll know why we didn't go into it!
Click here to see the Netscape/Mozilla version
But that's enough of complicated events. I'm sure you've had your fill. In the next part, we'll take a look at some simple events, as we go through the list.
(Shawn sent me the following in an email, for which I thank him. This works in both IE and FireFox/Mozilla. Try it, if you have both browsers:
function XYpos(event){
alert(event.screenX + " left " + event.screenY + " down")
}
As he says, Much simpler!)
JavaScript Events
onClick
We've already used this event quite a lot. But you can use it with buttons, images, links, radio buttons, check boxes. Here's a simple onClick event used with an image:
onDblClick
Same as above, really. Try inserting Dbl into onClick and see what happens.
onKeyDown
This events fires when a key on your keyboard is pressed. It applies to buttons, textboxes, text areas, and links. If you had a search box on a form, for example, you might want to activate the search when the user presses the Return/Enter key on the keyboard. For Netscape users, though, you need to use this:
window.captureEvents(Event.KEYPRESS)
And that's only the start of your problems!
An easier example of the KeyDown event that works in both browsers is this:
onMouseOver
You've seen this in action already when we wrote the script for the "dancing hand". Associated events are onMouseOut and onMouseDown. They are mainly used for links and images. A typical use of onMouseOver is to swap images around when creating a rollover effect.
Onblur
This event takes places when objects lose focus. If you click inside one text box then click outside it the textbox has lost focus. That's when the onBlur event fires.
Here's an example. Click inside the first text box, then click inside the second one.
[pic]
[pic]
When you move away from the textbox, you should see the alert box. You can write code to check if something like an email address is correct. If not, you can reset the text box to a blank string.
onSubmit
This is a very useful event that can be used for data validation on a form. You can use this event with a Submit button. The details on the form can then be checked for errors. If you catch any errors, you can then stop the form's details from being submitted. Here's an example. Note the use of the word return. This is set to a Boolean value. If return is false then the form doesn't get submitted; if it's true then the form is submitted. (More about return in the next section.)
The form is not much good because it only has a submit button. But notice where the onSubmit event is - in the FORM tag, and not with the Submit button.
Here's the Validate() function. It doesn't do any checking. All it does is to display an alert message.
function Validate() {
Details = false
if (Details == false) {
alert("errors detected")
return false
}
if (Details == true) {
alert("Form Submitted")
return true
}
}
In the function, we've set a variable (Details) to false. This is just for testing purposes, and means the user has filled out the form incorrectly. Look at the two return values, though. If the Details are false then return gets set to false, and the form isn't submitted; if the Details are true then return is true, and the form is submitted.
If you want, add a Method and an Action to your Form. Like this one:
(The Enctype will send the details in plain text that's much easier to read.)
Test out the code on a web page. Change the Details variable to true and click the button. We're going to do some real error checking in the next section, and we'll meet onSubmit again.
Speaking of that next section - let's get right to it.
JavaScript Functions
We've already used functions a fair bit in these pages. We're going to explore them a bit further. Functions, if you remember, are simply sectioned-off pieces of code. When you want to use your code segment, call it by its name and it will come running.
We're now going to design a little calculator. It's limited in what it can do, as it only calculates two numbers at a time. It can add, divide, multiply and subtract. To save you time designing the HTML for this calculator, you can get a copy by clicking the link below. When the web page opens, click File > Save and save it to your hard drive.
Click here for the HTML code
Nice, isn't it? Only the HTML is included in the code for the web page. All the script tags have been taken out, so it won't work. But we'll see how functions work with this calculator. Off we go then.
To work the calculator, press a number. Then press an operator (plus, times, subtract, or divide). Press another number, then press the equals button (=). If you want to clear the display, click the cls button.
Passing a value to a function
So far with functions, we have just been doing this sort of thing:
function add() {
Our code segment here
}
The name of the function is add. Immediately following the name are a pair of round brackets ( ). To call (use) our functions, we've doing this:
Inside the round brackets, we haven't put anything. They have been empty brackets. But functions are given extra power by putting something inside the brackets. This "something" is called an argument. An argument is really just a variable. What you're doing by giving your function an argument is passing a value to your function. We're going to do that with our calculator.
Our first function will accept one argument. The value being passed to our function comes from the number buttons on our calculator. If you have a look at the HTML calculator code in the page you saved, you'll see this for the buttons:
The value above is the text on the button face. This is the number three button. When this is clicked, the number three will appear in the display. Look at the onClick event:
onClick =calculate(3)
The onClick event is calling our function, which has the name calculate(). However, we've now put something inside of the round brackets. We've put the number three in there, which is the value of our button. Here's the function we're going to add, minus any code:
function calculate(number) {
}
Our function now accepts an argument - number. This is a variable into which we can place values. When the 3 button is clicked on the calculator, a value of 3 will be placed into the number variable. If another button is clicked, the 7 button for example, a value of 7 will be passed to the number variable. We can then use this number variable in our code for the function:
function calculate(number) {
frm = document.frmOne.txtDisplay
frm.value = frm.value + number
}
You should be able to work out what the code for the function does, but here's an explanation. The Display textbox is first put into a variable called frm. We then add whatever is in the variable number (our argument) to whatever is already in the display text box. Here, add means "join together". So if you wanted 22 in the Display text box you would click the 2 button twice.
This is a nice, simple function that display numbers in a text box. You can add the function to your calculator. Either type or copy and paste the function into the HEAD section of your code.
OK, now that we know how to pass a value to a function, we can set up a second function to deal with the operators. When you click one of the operator buttons (plus, minus, etc) you can pass the operator to a new function in the same way you've just done. First, set up the onClick event in the HTML form (this has already been done):
Notice the name of our new function, and the value we are going to pass to it when the "plus" button is clicked:
onClick = operator("+")
What we're passing to our new function is the plus symbol ( + ). We're passing it as a string, hence the double quotes surrounding it. For the divide button, we have this for the onClick event:
onClick = operator("/")
In other words, a different symbol will be passed to our new function depending on which operator button is clicked. Here's the code for the function:
function operator(opval) {
TheOperator = opval
total = document.frmOne.txtDisplay.value
document.frmOne.txtDisplay.value = ""
}
This time, the variable inside our function is called opval. This is our argument. When an operator button is clicked, opval will contain one of our four symbols. Inside the function we then pass this value to a variable which we have called TheOperator. Besides passing the operator symbol to a variable, this function also gets the value from the display and passes it to a variable called total. The text box is then cleared ready for another number to be entered.
So add this new function to your script, just below the first one. However, the variables total and TheOperator need to have their values read from another function. So we have to make them global. We do this by declaring them at the top of the code, just before the first function:
var total = 0
var TheOperator = 0
function calculate(number) {
frm = document.frmOne.txtDisplay
frm.value = frm.value + number
}
function operator(opval) {
TheOperator = opval
total = document.frmOne.txtDisplay.value
document.frmOne.txtDisplay.value = ""
}
With our two global variables set up, we can now do the calculating part. The calculating is done when the equals sign is clicked on the calculator. Again, we do this with an onClick event. This time from the equals button on the form:
We don't need to pass anything to our equals function (it's a simple little code segment), so we're back to the empty round brackets. This means that it's a function that doesn't accept arguments. Here's the entire function that does the calculating:
function equals() {
CurentDisplayValue = eval(document.frmOne.txtDisplay.value)
PreviousDisplayValue = eval(total)
if(TheOperator =="+") {
answer = PreviousDisplayValue + CurentDisplayValue
}
else if(TheOperator == "*") {
answer = PreviousDisplayValue * CurentDisplayValue
}
else if(TheOperator == "-") {
answer = PreviousDisplayValue - CurentDisplayValue
}
else if(TheOperator == "/") {
answer = PreviousDisplayValue / CurentDisplayValue
}
document.frmOne.txtDisplay.value = answer
}
The code looks a tad messy, but that because of the variable names we've chosen to use. First, we pass whatever is currently in the Display text box to a variable called CurentDisplaValue:
CurentDisplayValue = eval(document.frmOne.txtDisplay.value)
The eval() part just ensures that JavaScript doesn't try to concatenate when we want to add up. The second line of our code gets the value stored in our global variable total and passes it to the new variable called PreviousDisplayValue:
PreviousDisplayValue = eval(total)
The rest of the code just uses if statements to check what is inside our other global variable TheOperator. The final line just pops the answer into the Display text box.
And that's it. A very simple calculator that demonstrates how to pass values to functions by setting up arguments. You can pass more than one argument at a time to a function. But we've kept things simple by using only one argument with each function.
Add the new code to your calculator and see it in action. When you get it working, it should be like the one in this link below:
See the Working Calculator
In the next part, we'll see how to use functions to validate data on a form.
Calling other functions within a function
Functions can call other functions, and have a value passed back to the calling line. We'll see how that works now. Once you have grasped the concept, what we're then going to do is write code to validate data that a user might enter on a form.
First, though, here's an example of a function being called inside another function. To test it out, create a web page with a button on it. Set the onClick event for the button to this:
onClick = GetValue()
Once you have your web page with a button on it, add this code to the HEAD section of the page:
function GetValue() {
returnvalue()
}
function returnvalue() {
n1 = 10
n2 = 5
answer = n1 - n2
return false
}
When the button on your page is clicked, it calls the function GetValue(). The only line of code in the GetValue() function calls the second function:
returnvalue()
When this second function is called, all the code inside it is executed. Control then passes back to the first function. Any other lines for the first function are then executed.
Notice the line of code that reads return false. We really should have had this return word at the end of all our functions. It's actually a question: "Does the function return a value?" In other words, Are we finished with this function or not?
If the function does return a value you can either use return true, or more likely you can return a value back to the first function. In our second function, we were subtracting one number from another and putting the answer into a variable called answer. But we weren't doing anything with this variable, so nobody would be able to see what the answer was. In this next example, we'll return the answer to the first function:
function GetValue() {
total = returnvalue()
alert(total)
}
function returnvalue() {
n1 = 10
n2 = 5
answer = n1 - n2
return answer
}
The first function now does something slightly different. The call to the second function, returnvalue(), has gone on the right hand side of an equals sign (= ). On the left hand side of the equals sign we have a variable called total. What we're saying here is "Assign the value of returnvalue() to the total variable."
But the same thing happens: the second function is called and has its code executed. However, we've now told the second function to return a value:
return answer
And what's inside the answer variable? The answer to the sum 10 - 5. This is the value that gets passed back to the calling line, which was:
total = returnvalue()
Now the variable total will hold the value from the function. Finally, we've displayed the result in an alert box. Run the code and see how it works.
Passing values to a function
When we called the second function above, we didn't pass any values to it. The round brackets of our function were entirely empty:
total = returnvalue()
They were empty because the second function accepted no arguments. Here's the same code again, but this time the second function does accept an argument. In fact, it accepts two arguments:
function GetValue() {
total = returnvalue(10, 2)
alert(total)
}
function returnvalue(num1, num2) {
answer = num1 - num2
return answer
}
The function returnvalue() is now this:
returnvalue(num1, num2)
We've set up two variable inside the round brackets called num1 and num2. When we call the second function from the GetValue() function we put something into those two variables:
total = returnvalue(10, 2)
Now, the numbers 10 and 2 will be passed to the second function. These values will be stored in the two variables. The 10 will be stored in num1 and the 2 will be stored in num2.
Once the values are in the second function, you can do something with them. All we did was subtract one from the other, and stored the result in the variable answer. The value in answer was then returned to the calling line:
return answer
OK, now you know how to call function, and have one function call anther, we can do some work on form validation.
JavaScript Form Validation
The form you'll work with is quite simple. It will be used only for your visitors to leave their name, email address and some comments. They will be invited to say what they liked about the site, and what they didn't like. This will be done with check boxes. The form we're going to use can be copied to your own computer by clicking the link below. When the web page loads, save a copy to your hard drive. So load it up and let's do some coding.
Click here to see and save the Form
When the Submit button on the form is clicked, we'll use functions to validate the form. If we detect anything not quite right, we'll invite the user to try again. If the form is OK, we'll send it to an email address.
The first thing to do is to set up a function to handle the onSubmit event. This function will call other functions: one function to check the Name text box, one to check the email address, and so on. So open up the code for the form. Notice the names of our form elements:
Form Name: f1
Name textbox: Name
Email textbox: Email
Comments text area: Comments
Likes Checkboxes: Liked
Dislikes Checkboxes: Hated
Submit Button Event: Validate()
And here's the function for the Submit event:
function Validate() {
Message = ""
Message = Message + CheckName()
Message = Message + CheckEmail()
Message = Message + CheckComments()
Message = Message + CheckLikes()
Message = Message + CheckHates()
if (Message == "") {
return true
}
else {
alert(Message)
return false
}
}
All we're going to be doing is building up a variable called Message. At the start, Message is set to a blank string:
Message = ""
If, after all our functions have been called, Message is still a blank string, then no errors have occurred. If no errors have occurred, we can set return to true. Setting return to true will ensure that the form gets sent. If an error has occurred, then a function will insert some text into the Message variable. If Message contains any text, then return gets set to false. When return is false the form doesn't get sent, and the message itself will be displayed in an alert box:
if (Message == "") {
return true
}
else {
alert(Message)
return false
}
Look at the lines that call the functions, though. Here's the first one, the function that checks the Name textbox:
Message = Message + CheckName()
So we're saying "Put into the variable Message the value returned from the function CheckName(). Keep what was originally in the variable Message." Here's the function to add to your code:
function CheckName() {
UserName = document.f1.Name.value
if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}
return Message
}
First, we put the value from the Name textbox into a variable called UserName:
UserName = document.f1.Name.value
Then we have an if statement to check what is inside of UserName. If the textbox is blank then the user hasn't entered a name, and the variable UserName will be a blank string. In which case it's an error. If there is something in the textbox then no error has occurred and we can set the Message variable to a blank string.
if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}
Finally, we tell the function to return whatever is inside the Message variable:
return Message
So after the first function call we'd really have either this:
Message = "Something's wrong with your name" + "\n"
Or this:
Message = ""
If it's the first one, the form won't get sent; if it's the second one, then the user filled the name in correctly.
In the next part, we'll continue with the functions on our form. We'll tackle email addresses next.
Using JavaScript to Validate an Email Address
Checking for a valid email address is a little more difficult. We have to make sure that the user typed an "at" sign ( @ ). But we also have to make sure that there's "dot" something at the end: .com, .co.uk, .net or whatever.
But we also have to check that these are in the right place. If we don't, then the user could enter this:
@FooledYou
instead of something like this:
FooledYou@
In order to check the email address, we can use the in-built JavaScript functions indexOf() and its brother function lastIndexOf(). The syntax for the functions is this:
stringName.indexOf(searchValue, [fromIndex])
Here's an example:
Email = "FooledYou@"
AtPos = Email.indexOf("@")
Email is the String Name, the text we want to search. The function indexOf() will then search that text for you. But you have to tell it what to search for. In the example, we told it to search for an "at" sign ("@"). We could have told the function what position in the string to start the search [fromIndex]. But you can leave that out if you want to search all the string. The function will then start the search from the beginning of your string.
If the function indexOf() finds our "at" sign, it will return a number. The number is the position in the string where the "at" sign was found. If it doesn't find it, minus one (-1) will be returned.
The related function lastIndexOf() does exactly the same thing, except it starts the search from the last character in your string and works backwards.
Let's build our function to check for a valid email address. We can start with this:
function CheckEmail() {
email = document.f1.email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}
}
We start by passing the email address from the text box to a variable called email:
email = document.f1.email.value
We then use the indexOf() function to check if the email contains an "at" sign:
AtPos = email.indexOf("@")
We can then use the lastIndexOf() function to get the position of the last full stop:
StopPos= email.lastIndexOf(".")
If the two functions have found something, the two variable AtPos and StopPos will both contain numbers greater than minus one (-1). We add an if statement to check what is inside of these two variables:
if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}
In the if statement, we're saying "if the variable AtPos has a value of -1 OR ( | | ) if the variable StopPos has a value of -1 THEN put some text into the variable Message. Set the return value of the function to false."
Remember: the OR operator (| |) will return a value of true if any one of its conditions are met. When an if statement is true, the code inside the curly brackets will get executed.
OK, once we're satisfied that the email does contain an "at" sign and a full stop, we can add another if statement to check whereabouts these two symbols are in the email address. We don't want the user to enter something like this:
@FooledYou
In the above email address, there is a full stop and an "at" symbol. So the function lastIndexOf() will have returned the position of the last full stop, and the function indexOf() will have returned the position of the "at" sign. However, the email address is not a proper email address. We can prevent this error with our second if statement:
if (StopPos < AtPos) {
Message = "Not a valid email address"
}
The variable StopPos is recording the position of the last full stop in the email address. If this position is less than the position of the "at" symbol, then we have an error. In which case the Message variable will contain some text.
Another thing we can check for is this type of error:
FooledYou@.com
In the address above, the last full stop comes after the "at" sign. Our two previous if statement will not have picked this up. However, the email address is still invalid: there is no address to send it to! We can add another if statement to check for this:
if (StopPos - AtPos == 1) {
Message = "Not a valid email address"
}
The above if statement will check the numerical difference between the full stop position and the "at" position. If the difference is only 1, then we've caught the error.
And that's about it for our email checker. There are still one or two things you'd need to check about the email address. These two addresses for example will slip through the net:
@
Me@FooledYou.
So you might want to (and should now be able to) write if statements to check for these errors.
function CheckEmail() {
email = document.f1.Email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")
Message = ""
if (email == "") {
Message = "Not a valid Email address" + "\n"
}
if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}
if (StopPos < AtPos) {
Message = "Not a valid email address"
}
if (StopPos - AtPos == 1) {
Message = "Not a valid email address"
}
return Message
}
We've added another if statement to the function. All it does is check to see if there is anything in the email text box at all:
if (email == "") {
Message = "Not a valid Email address" + "\n"
}
A new line character has also been added ("\n" ).
In the next part, we'll see how to validate and return checkboxes values.
JavaScript and Checkboxes
The only thing we're going to do with our check boxes on our form is to see if they have been ticked or not. If a box has been ticked, then no errors have occurred; if none of the boxes have been ticked, then an error has occurred, and the user will get an alert box. So our check box validation is a "yes" or "no" affair: Have they ticked a box or not?
What we're not doing is returned the text from the check boxes. The text for our check boxes was "Cool layout", "Easy to Navigate", etc. We're not passing these values back when the Submit button is clicked. All the same, we'll see how this is done.
On our Form, the Check box HTML code was this:
Cool Layout
Easy to Navigate
Great Contents
The NAME value is crucial. For all our check boxes, the NAME is the same - "Liked". The text that people see on the page comes after the right angle bracket ( > ). The VALUE of the checkbox is the same as the text that people see on the page. (But it doesn't have to be).
With this in mind, here's our Check Box function:
function CheckLikes() {
boxes = document.f1.Liked.length
txt = ""
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}
}
if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}
return Message
}
We start the function by getting the length of the check boxes:
boxes = document.f1.Liked.length
The length here means "How many Check Boxes are there". So our code reads "Of all the check boxes in the form called f1, how many are there with the name Liked?" The answer will be inserted into a variable called boxes.
After we set a variable called txt to a blank string (txt = "") we add a for loop to check all of the boxes with the NAME Liked:
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}
}
Because we've given all of our checkboxes the same NAME, the browser can see them as an array of checkboxes. With an array, we can loop round checking values.
The for loop is set to start at zero, and the end condition is that value we put into the variable boxes - the number of checkboxes on our form.
Inside the loop, we can access the index number of each check box:
if (document.f1.Liked[i].checked)
Because the for loop started at zero, the check box Liked[0] will be examined first. If it has been checked, a true value is returned. The statement below is then executed:
txt = txt + document.f1.Liked[i].value + " "
The VALUE from the check box Liked[0] is added to the variable called txt.
Next time round the loop, the variable i will be 1. So the second check box will be examined to see if it was checked or not. If it has been, the VALUE of the checkbox is added to the txt variable.
And we go round and around examining the checkboxes called Liked. At the end of the loop, the variable txt will either hold the values from the check boxes, or it will still be a blank string. Depending on which it is, we can return a value for our function:
if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}
return Message
Again, we're building up our Message variable. Or not building it up, if no boxes have been ticked.
The function for our second lot of check boxes, the ones called "Hated", works in exactly the same way as the function above. Except you would changed the "Liked" to "Hated".
And that concludes our script to check form elements for errors. Once you add all the code, and test it out, you'd get a message box when the form is submitted but nothing has been entered. Try out the code by clicking the link below. Leave everything blank, then click submit.
Click here to see the Form with all the code added
To see all the code, click View > Source (in Internet Explorer).
In the next few parts, we'll take a look at how to validate other form elements: drop down boxes, list boxes, and Radio Buttons.
Using JavaScript to Validate a Drop Down Box
A drop down box on a form allows you to select one option among many. It looks like this:
[pic]
Here's the HTML code for the above drop down box:
North East
North West
South East
South West
Midlands
Notice the NAME of our Select box (as the drop down box is called in HTML world). The NAME we've chosen is s1. The name of our form is f1. So here's a function that gets which item the user selected:
function GetSelectedItem() {
len = document.f1.s1.length
i = 0
chosen = "none"
for (i = 0; i < len; i++) {
if (document.f1.s1[i].selected) {
chosen = document.f1.s1[i].value
}
}
return chosen
}
The code is similar to the check box code. We set the length of the select box (length is how many items in the list, minus 1 item):
len = document.f1.s1.length
Then inside the loop, we again access the index number of the SELECT object:
document.f1.s1[i].selected
So, s1[0] is the first item in the list, s1[1] the second item, s1[2] the third, and so on.
Once the selected item has been detected, you access it's value property and pop it into a variable:
chosen = document.f1.s1[i].value
You can test out the script by selecting an item from the box below.
Top of Form
[pic]
Bottom of Form
What we've done with this box is to add an event to the select box. The event calls the function:
In the next part, we'll see how to get at which items have been selected in a list box.
Using JavaScript to Validate a List Box
A form element closely related to the Select element is the Multiple select. This time, the elements is a list box where you can select more than one item. You select more than one item by holding down the Ctrl key on your keyboard and then clicking items with your left mouse button. Here's what they look like:
[pic]
To get which items have been selected, we can use the same code we used for the drop down list. The only difference is the line inside the if statement:
function GetSelectedItem() {
len = document.f1.s1.length
i = 0
chosen = ""
for (i = 0; i < len; i++) {
if (document.f1.s1[i].selected) {
chosen = chosen + document.f1.s1[i].value + "\n"
}
}
return chosen
}
The main thing that's changed is this line:
chosen = chosen + document.f1.s1[i].value + "\n"
And the only thing we're doing different is adding the selected item to whatever is already inside the variable called chosen and we've added the new line character to the end. Also changed is chosen = "" insted of "none",
As a matter of interest, the HTML code for a Multiple select list box is this:
SIZE is how many items in the list (starting at 1). Then you just add the word multiple. The rest of the HTML code is the same as the SELECT box.
You can test out the script by selecting a few items from the box below. Then click the button.
Top of Form
[pic][pic]
Bottom of Form
In the final part of the Form Validation section, we'll take a look at how to validate Radio Buttons.
Using JavaScript to Validate Radio Buttons
Radio buttons are closely related to check boxes. Only, with a radio button you get just the one choice from a list of options. With a check box you can tick all the boxes, if you wanted. Here's what radio buttons look like on a form:
Your Location:
[pic]North East [pic]North West [pic]South East [pic]South West [pic]Midlands
If you clicked another option, the one already selected is deselected. Here's the HTML code for our radio buttons:
North East
North West
South East
South West
Midlands
Notice that the NAME of all the radio buttons is the same - r1. We use this name in our JavaScript function. Again, we're assuming the NAME of our form is f1. Here's a function which checks which radio button was selected:
function GetSelectedItem() {
chosen = ""
len = document.f1.r1.length
for (i = 0; i ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- we have vs we had
- we have the technology wow
- we have been or we had been
- at the moment synonyms
- why we love our pets
- we love our pets
- how can we improve our speaking skills
- find the distance between the two points
- at that moment syn
- at the moment meaning
- at the moment synonym
- two tailed hypothesis test at the 5 level of significance