J A V A Tutor!!!!

--------

Next 10 lessons>>>

Lesson 1

Start with a traditional Hello World programme... ....................................................

Copy the following and save as hello.html

</BODY>
</HTML>

Then add SCRIPT and comment tags within the HEAD section. The script

tags tell the browser that some sort of scripting is contained between (in this case

"javascript").Example is given below

<SCRIPT language="javascript"><!--

//--></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Now we'll make a function. A function does something. It

executes a series of instructions.

<SCRIPT language="javascript"><!--

function ()
{
}

//--></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Now we'll add the function name and an alert box that say's "Hello World!"...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ("Hello World!");
}

//--></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Notice how the function is structured. The word function declaring that it is in fact, a
function. The function name - HelloWorld. The parentheses ( ), these have a use that
we'll get into later, and the curly brackets - { } that contain the set of instructions.

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ("Hello World!");
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="">Hello</A>

</BODY>
</HTML>

Make it point to the function...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ("Hello World!");
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld()">Hello</A>

</BODY>
</HTML>

Now try it.....

JAVASCRIPT IS CASE-SENSITIVE

Lesson 2

Variables.

What's a variable? Let's suppose x=5.

x is a variable. At the time of the statement, x happens to be 5. Can x be something
else? Sure, x=6. Now x equals 6. (Hence the name "variable"... it's value can vary.)

Can a variable be something other than a number? Sure. How about x="Joe". Now x
equals the string "Joe". (A string by the way is a string of characters).

Can the name of a variable be something other than a letter like x? Sure,
myname="Joe". Simple.

How can we incorporate this new found knowledge into our function? Easy...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
myname = "Joe";
alert (myname);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld()">Hello</A>

</BODY>
</HTML>

Try it .....

*Technically it's the alert method, but we'll get into that later. Command is fine for
now and is probably a better description anyway :-)

We could make it say Hello + variable...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
myname = "Joe";
alert ("Hello " + myname);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld()">Hello</A>

</BODY>
</HTML>

Try it ...

Lesson 3

Let's add a prompt box to ask our name and then spit out a personalized Hello message.

<SCRIPT language="javascript"><!--

function HelloWorld()
{
myname = prompt("What's yer name bub?", "");
alert ('Hello ' + myname);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld()">Hello</A>

</BODY>
</HTML>

Now try it ...

<SCRIPT language="javascript"><!--

function HelloWorld(name)
{
alert ('Hello ' + name);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld('Joe')">Hello Joe</A>
<BR><A HREF="javascript:HelloWorld('Tom')">Hello Tom</A>
<BR><A HREF="javascript:HelloWorld('Frank')">Hello Frank</A>
<BR><A HREF="javascript:HelloWorld('Bob, Carol, Ted & Alice')">Hello to a few other people.</A>

</BODY>
</HTML>

Try it..

Lesson 4

What's an event? An event is when something happens. Such as a mouse over, mouse click, page loading, etc.

We could make a simple alert box pop up when the page loads using the onLoad event handler in the body tag...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ('Hello World!');
}

//--></SCRIPT>

</HEAD>
<BODY onLoad="HelloWorld()">

Hello

</BODY>
</HTML>

Lots of people use onMouseOver event handlers in links. Here is the same example with a couple minor changes...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ('Hello World!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onMouseOver="HelloWorld()">Hello</A>

</BODY>
</HTML>

You'll notice that the link doesn't point to anything. That's not something we'd want to leave in a finished page, but for now, since we're just learning, we'll let it slide.

We can also do an onMouseOut. The alert doesn't pop up until the mouse moves off of the link.

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ('Hello World!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onMouseOut="HelloWorld()">Hello</A>

</BODY>
</HTML>

Yet another event handler is onClick...

<SCRIPT language="javascript"><!--

function HelloWorld()
{
alert ('Hello World!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onClick="HelloWorld()">Hello</A>

</BODY>
</HTML>

You can have as many as you want. Just so you stay sane you might want to keep it as few and as organized as possible...

[SNIP]
function HelloWorld()
{
alert ("Hello World");
}

function HelloStinky()
{
alert ("Hello Stinky!");
}
[SNIP]

Lesson 5

Javascript is pretty good at math.

Copy this and run it...

<SCRIPT language="javascript"><!--

function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber * secondnumber;

alert (firstnumber + " x " + secondnumber + " = " + total);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

It simply requests two numbers and multiplies them together. Note that in most programming languages, * means multiply. If we used x we would continually confuse it with the letter x. xxx (x times x) would raise a few eyebrows.Now try adding the numbers instead...

<SCRIPT language="javascript"><!--

function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber + secondnumber;

alert (firstnumber + " + " + secondnumber + " = " + total);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

Something's wrong... 3 + 6 = 36? Ok, we can see what's happening here but, what do we do about it? Well, if we suspect that a number might be regarded as a string instead of a number we could multiply each variable by 1. This would kinda force it into being a number. Some computer languages are very finicky about declaring at the outset whether a variable is a number, or a string, or whatever. Javascript is not so picky. It will make an assumption. This makes it simpler for the programmer, but then he has these little glitches to worry about. No biggie. Try this instead...

<SCRIPT language="javascript"><!--

function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = (firstnumber * 1) + (secondnumber * 1);

alert (firstnumber + " + " + secondnumber + " = " + total);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:MathThing()">Click me</A>

</BODY>
</HTML>

Lesson 6

An object in javascript is a window, a frame, an image, a form, a text box, the document itself, a radio button... you get the idea.

What is a property? A property is some characteristic of an object... the location of a document, the background color of a document, whether a radio box is checked or unchecked, the width of an image, etc.

What is a method? A method is basically a function. A method does something. For example close() is a method. window.close() closes a window. Not too much too it.

This is a basic explanation of these three terms (object, property and method). In reality it can be a little more complicated than that, but for our purposes, it's clozenuff.

So, what do we do with objects and properties and stuff?? Well, let's get a little more
background. Take for example the text box below.

This is the HTML code for that form...

We have the browser window...

window

In the window is this document...

window.document

In the document is a form...

window.document.form

In the form is an input...

window.document.form.input

And the input has a value...

window.document.form.input.value

(Right this moment the value is nothing, but nothing is still a value.)

This is an object hierarchy. This is how you would refer to different properties of different objects on the page. An imaginary object hierarchy might be...

world.country.state.city.street.house.person.name

This would define the name property of a person. What about his height?

world.country.state.city.street.house.person.height

This is how you must begin to think about a simple web page if you're going to manipulate its objects and their properties.

Let's go back to the text box we saw earlier. It's HTML code again is

And we can theoretically refer to any value contained in that box with...

window.document.form.input.value

Now there's one more thing, a document can obviously contain more than one form, so to disinguish one form from another, we NAME our forms. Note the form above is named myform. Same goes with form inputs. A form can have multiple inputs, so to specify one in particular, we call it by name (in this case there's only one input and it's nname is mytextbox).

If we then use the name of the form and the name of the input, we can now call on that particular box's value by saying...

window.document.myform.mytextbox.value

Ok Joe, do tell, what the heck do we do with it now? Well kid, try this on for size...

<SCRIPT language="javascript"><!--

function HelloBox()
{
alert (window.document.myform.mytextbox.value);
}

//--></SCRIPT>

</HEAD>
<BODY>

<BR>Enter something in the box and click <A HREF="javascript:HelloBox()">here</A>.

</BODY>
</HTML>

Lesson 7

Another property we can get or manipulate is the document's background color. Have a look at this...

<SCRIPT language="javascript"><!--

function BgcolorGetter()
{
alert (window.document.bgColor);
}

//--></SCRIPT>

</HEAD>
<BODY BGCOLOR="#BBDDCC">

Click <A HREF="javascript:BgcolorGetter()">here</A> for this document's background color.

</BODY>
</HTML>

bgColor is a property of the document object. Try messing around with the color in the body tag and see that it always returns the proper background color. Remove the BGCOLOR attribute from the body tag altogether and see what happens.

Can we set the bgColor?.........

<SCRIPT language="javascript"><!--

function BgcolorSetter(mycolor)
{
window.document.bgColor = mycolor;
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:BgcolorSetter('#FF9999')">Red</A>   
<A HREF="javascript:BgcolorSetter('#99FF99')">Green</A>   
<A HREF="javascript:BgcolorSetter('#9999FF')">Blue</A>
</BODY>
</HTML>

Do you understand what's going on? Study it until you do.

Lesson 8

If-then statements.

If condition, do something.

if (condition)
{
do something;
}

if ( x > 4 )
{
alert("Hey kids, x is greater than 4!");
}

Have a look at this...

<SCRIPT language="javascript"><!--

function Hello()
{
x = 6;

if ( x > 4)
{
alert("Hey kids, x is greater than 4!");
}
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:Hello()">Click here</A>

</BODY>
</HTML>

An if-then statement is pretty simple to grasp. It is also one of the most powerful tools in your bag of tricks. This simple statement (and its variations) are the brains behind your programs. This is the computer making a decision.

Adding to the if statement is the if-else statement...

If condition, do something...

Else, do something else.

if (condition)
{
do something;
}
else
{
do something else;
}

if ( x > 4 )
{
alert("Hey kids, x is greater than 4!");
}
else
{
alert("Hey kids, x is NOT greater than 4!");
}

Our example again. This time we'll make x = 3.

<SCRIPT language="javascript"><!--

function Hello()
{
x = 3;

if ( x > 4)
{
alert("Hey kids, x is greater than 4!");
}
else
{
alert("Hey kids, x is NOT greater than 4!");
}
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:Hello()">Click here</A>

</BODY>
</HTML>

Lesson 9

Nested if-then statements...

<SCRIPT language="javascript"><!--

function Hello()
{
x = prompt("Give me a number","");

if (x == 6)
{
alert("Wow! " + x + " equals 6!");
}
else
{
if ( x > 4)
{
alert("Hey kids, " + x + " is greater than 4!");
}
else
{
alert("Hey kids, " + x + " is NOT greater than 4!");
}
}
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:Hello()">Click here</A>

</BODY>
</HTML>

First we test if x==6 (I'll explain the double equal sign in a minute). If x==6 then we get a message. If x does not equal 6 then we get a pair of if-then statements testing for greater than 4 or not greater than 4. Keep studying the example until you get it.

About the double equal sign. Let me try to explain this way...

x = 6 the value of x is now 6 (assignment)
x == 6 x equals 6 (testing for equality)

while were at it....

x > 6 x is greater than 6
x < 6 x is less than 6
x >= 6 x is greater than or equal to 6
x <= 6 x is less than or equal to 6
x != 6 x does not equal 6

Exercise: Make a page that does the following: When you click on a link, a prompt box comes up and asks you for a number. If the number is less than 100, throw up an alert box saying what your number was... "Your number is 28". If the number is greater than 100, throw up an alert box that says "Oh my, your number is too big for me." If the number is exactly 100, throw up an alert box saying "Bingo, your number is exactly 100."

Earlier, we were reading the value from a text box...

x = window.document.form.input.value;

We can also set the value of a text box...

<SCRIPT language="javascript"><!--

function SetTheBox()
{
window.document.myform.mytextbox.value = 5;
}

//--></SCRIPT>

</HEAD>
<BODY>

<BR><A HREF="javascript:SetTheBox()">Click here</A>.

</BODY>
</HTML>

Lesson 10

The while statement.

while (condition)
{
do stuff;
}

Consider the following...

<SCRIPT language="javascript"><!--

function Adder()
{
number = 1;
while (number < 5)
{
alert(number + " is less than 5");
number = number + 1;
}
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:Adder()">Click here</A>

</BODY>
</HTML>

Next 10 lessons>>>