js 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 + "<BR>")

}

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 + "<BR>")
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).

js operator

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 <= (Less Than or Equal to).

So, change your code. Take out either the Less Than symbol ( < ) or the Greater Than symbol ( > ). In it's place, insert either <= or >= 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("How's school these days?")

}
else 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:
Number One: Number Two:



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:

<SCRIPT LANGUAGE = JavaScript>

A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
A = Number(A)
B = Number(B)
C= A + B
document.frmOne.txtThirdNumber.value = C

</SCRIPT>

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

js elseif

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

Less than or equal to

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.

<FORM NAME = "AgeTest">

Type in your age, then click the button:
<INPUT TYPE = Text NAME = txtAge Size = 15>
<INPUT TYPE = Button NAME = "b1" VALUE = "Age Tester" onClick = message()>

</FORM>

Once you've typed the HTML code for the form, type this JavaScript code in the HEAD section of your page:

<SCRIPT language = javascript>

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

}
}

</SCRIPT>

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

}

js if

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:

<SCRIPT language = JavaScript>

ConfirmStatus = confirm("Format Your Hard Drive?")

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now ")

}

</SCRIPT>

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

An OK and Cancel alert box

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:

<SCRIPT language = JavaScript>

ConfirmStatus = confirm("Format Your Hard Drive?")

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now ")

}

if (ConfirmStatus == false) {

alert("Tough! Formatting Hard Drive anyway")

}

</SCRIPT>

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!")

}

}

js history

Screen Size, the History Property



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

window.document.write("Hello")

And this:

window.navigator.userAgent

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

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

window.screen.height

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

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


Screen Size

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

<Script language = JavaScript>

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

alert(UserWidth + UserHeight)

</Script>

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

UserWidth = window.screen.width

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

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

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

UserWidth = "This will hold a width"

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

UserWidth = 600

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

UserWidth = "This will hold a width of " + 600

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

UserWidth = window.screen.width

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

UserWidth = "Screen Width = " + UserWidth

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

alert(UserWidth + UserHeight)

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

Screen Width and Height
Exercise

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

Screen Properties in an alert box

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

AHeight = window.screen.availHeight + "\n"


The history object

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

<Script language = JavaScript>

alert("Sorry, this page is under construction")

window.history.back()

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

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

window.history.go( -2 )

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

js browser properties

Testing your Visitor's Browser



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

Two Properties of the navigator object are:

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

// document.open()

// document.write("<H1>Hello</H1>")

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

<SCRIPT LANGUAGE = JavaScript>

alert(navigator.appName)

</SCRIPT>

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

The Naigator Ap Name in Internet Explorer

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

The Naigator Ap Name in Netscape

Try changing the alert box to this:

<SCRIPT LANGUAGE = JavaScript>

alert("Your Browser is: " + navigator.appName)

</SCRIPT>

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

Test the Browser

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

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

alert(navigator.userAgent)
Now reload your web page.

Internet Explorer will give you something like this:

The User Agent Property

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

The User Agent Property for Netscape

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

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

js image

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

Now we can begin.

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

<BODY>

<IMG SRC = "pointer1.jpg" NAME = "but1">

</BODY>

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

<BODY>


<A HREF = "page2.html">

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

</A>

</BODY>

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

<BODY>

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

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

</A>

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

OnMouseOver = "document.images.but1.src= 'pointer2.jpg'"

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

"document.images.but1.src= 'pointer2.jpg'"

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

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

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

The code for the "dancing hand" uses an event related to the OnMouseOver event - the OnMouseOut event. The code is then exactly the same, except you're resetting the image back to pointer2:

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

js document

The document Title Property

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

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

<SCRIPT LANGUAGE = JavaScript>

alert(document.title)

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

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

alert(document.title = "Now I've changed it")

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

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

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

Netscape/Mozilla Alert Box

Alert Box in Netscape

Internet Explorer Alert Box

Alert Box in Internet Explorer

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

Netscape Title Bar

Internet Explorer Title Bar



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

Exercise

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





 

js methods

That Document Thing


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

Properties

    bgColor
    fgColor
    title
    location
    images
    forms

Methods

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

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

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

<BODY>

<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">

<INPUT TYPE = Button VALUE = "Colour Two" Onclick = "document.bgColor = 'Blue'">

<INPUT TYPE = Button VALUE = "Colour Three" Onclick = "document.bgColor = 'Green'">

</BODY>

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

"document.bgColor = "

is surrounded by double quotes, and this bit:

'Green'

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

Onclick = "document.bgColor = 'Green'"

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

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

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

document.bgColor =

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

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

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

js tags

The Script Tag and HTML


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

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

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

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

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

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

<BODY>
<INPUT TYPE = Button VALUE = "Click Me" OnClick = "document.write('Hello World')">
</BODY>


Looks a bit messy, but then scripting languages can get like that. Notice, however, that we've shifted the document code to our button:

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

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

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

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


The Pop-up message box

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

Internet Explorer Alert Box

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

alert("That was not a proper email address")

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

OnClick = "alert('That was not a proper email address')"

Javascript Introduction

Beginner's JavaScript Tutorials


Introduction and a First Script

Our quick javascript links
Background Colour
An Easy Rollover
Browser Check
if Statements
for loops
Javascript and Forms
Little Programmes
Colour Picker
Lottery
A simple calculator

 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.

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

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</BODY>
</HTML>

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

"Hello World"

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

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

<SCRIPT LANGUAGE = JavaScript>

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

</SCRIPT>

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

document.write("Hello World")


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

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

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

Document.Write("Hello World")

JavaScript is damned picky about capital letters - it doesn't like them at all!

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

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