[Tut] Basic javascript coding...

Ok as you know i have a html coding topic this is for javascirpt.
Basic outline:

Code:

<SCRIPT lanuage="Javascript">
<!--(This opens the html comments that will hide the script from old browsers)

............Java script statements............

//--> (closing)

</SCRIPT>

ok now that you know the basic outline lets do some scripts...
Ah yes this one will make a link when you hover over the link it will display a messege on the status bar:

Code:

<A HREF="jmouse.htm" onMouseover="window.status='Hi there!'; return true">Place your mouse here!</A>

Okay, here's what is happening with the onMouseover command:

onMouseover=" "
This is the form of the onMouseover command. The browser expects another command or function inside the quote marks.

window.status='Hi there!'
This command instructs the browser to write to the status bar. You place what you want the browser to write inside the single quote marks.

return true
Returns the statement as true so the browser will display the text.

This next one will allow you to make a button to put on your site:

Code:

<FORM>
<INPUT type="button" value="Click Me" name="button1"> 
</FORM>

Here is what all this means:

<FORM>
This creates a form so we can use a button.

<INPUT>
This tag allows us to create an input area of some kind.
type="button"
This command declares our input area to be a button.

value="Click Me"
This will be the text people will see on the button. Write whatever you want your visitors to see.

name="button1"
You can give the button a name for future reference and possibly for use in a script.

you can also make buttons change the color of the page:

Code:

<FORM> 
<INPUT type="button" value="Change to Yellow!" name="button3" onClick="document.bgColor='yellow'">

that one makes it yellow the next ones are yellow red and white:

Code:

<FORM> 
<INPUT type="button" value="Change to Yellow!" name="button3" onClick="document.bgColor='yellow'"> <br> 
<INPUT type="button" value="Change to Red!" name="button4" onClick="document.bgColor='red'"> <br> 
<INPUT type="button" value="Change back!" name="button5" onClick="document.bgColor='white'"> </FORM>

Oh yes and this next one redirects you to a new page or site when you click the button:

Code:

<FORM> 
<INPUT type="button" value="Go to my other Page!" name="button6" onClick="window.location='http://wiitalk.smfforfree4.com'"> 
</FORM>

Value= the name of button
window.location= url of site...

This one is a button that puts you back to the last page you were on which would be good if you used a button to put somebody to a page than you could use this to put them back to the page you put the first button on:

Code:

<FORM> 
<INPUT type="button" value="Click here to go back" onClick="history.back()"> 
</FORM>

So, what does all of that code mean? Okay, here's the scoop:

<FORM>
This opens a form so we can use the button on the page.

<INPUT type="button" value="Click here to go back"....
This creates the button we use for the script.

....onClick="history.back()">
This is what makes everything happen. The onClick=" " tells the browser to do the command in the quotes when the button is clicked. The history.back() is the function that does just what it says: It takes the viewer on step back in their history list.

Now its the cool part...
Alerts!
This one will set an alert up on the link so if you hover over it an alert comes up:

Code:

<A HREF="noplace" onMouseover="alert('Hey! I said not to try clicking this link!')"> Don't click this link!</A>

This one is cool it will make an alert come up just before you see a page so say if you wanted to put an alert for wiitalk just before they see the page an alert might come up and say Join our forums.... heres the code:

Code:

<HEAD> 
<TITLE>Cool JavaScripts</TITLE> 

<SCRIPT language="JavaScript"> 
<!-- hide from old browsers 

alert('Welcome to my Web Site!'); 

//--> 
</SCRIPT> 

</HEAD>

This will display the alert before the page starts loading. When you hit "OK" the page will go on and load normally.

Here's the breakdown:

<SCRIPT language="JavaScript">
This tag lets the browser know you are using JavaScript commands here.


Stops hiding the script from old browsers.

</SCRIPT>
Ends the JavaScript commands.

This code is to put multiple alerts at a time! code:

Code:

<HEAD> 
<TITLE>JavaScript Example 2</TITLE> 

<SCRIPT language="JavaScript"> 
<!-- 
alert('Please Sign My Guestbook, NOW!'); 
alert('I mean it, NOW!!!'); 
alert('Did I mention I had a guestbook? Well SIGN IT!'); 
alert('Oh, remember....THE GUESTBOOK! O.K.?!!'); 
//--> 
</SCRIPT> 
</HEAD>

So, how about that? Pretty wild, isn't it? You can also use the alert with a button, so that it is not such a surprise. Place the code where you want the button to be on your page. You won't need the SCRIPT tag for this one.

Code:

<FORM> 
<INPUT type="button" value="Click here to see what I think of YOU!" 
onClick="alert('You are the greatest person I have ever met!')"> 
</FORM>

Now it's time to get into some really fun stuff. Yes, variables and functions. Don't worry, it's not as bad as it sounds.....let's start with declaring variables. You'll want to keep all of your variables in the HEAD section for now. Place the declarations between the SCRIPT tags inside the head section of your document.

To declare a variable in JavaScript, you will write something like this:

Code:

<HEAD> 
<SCRIPT language="JavaScript"> 
<!--hide from old browsers 

var name=value; 

//-->
</SCRIPT>
</HEAD>

Here is what these commands mean:

var
This indicates you are about to declare a variable.

name
This is the name you give the variable. Give it any name you like (other than a JavaScript reserved word such as "function" or "onMouseover".).

value[/b
This is the initial value you want the variable to have. It can be a number, words, true, false, or null.

Using Numbers
You can assign a number value to a variable by placing the desired number after the = sign:
var cars=3;

You can also use a number with a decimal. JavaScript isn't too picky about whether the value is an integer or decimal. Just type it in.

var cost=9.95;

Using Strings

A string is just a group of characters, such as a sentence or a word. To define a string, you will need to place single or double quote marks around the value, like this:
var movie="The Lost World";

Also, if you place numbers inside the quotes, they are treated as a string rather than a numerical value.

Boolean Values
This one is nice. Assign the variable a value of true or false. No quotes needed. Here's an example:
var story=true;

The null Value

If you declare something as null, it means nothing. Not even zero, just plain nothing. Here's the format:
var mymoney=null;

Well, nothingness isn't so great in this case, but it can be useful when you use prompts to get information from viewers, and they type in......nothing!

Case Sensitivity

Unlike alot of things in HTML, JavaScripts are case sensitive. So a variable named "john" is not the same as "John" or "JOHN". The same goes for commands and functions and so on. Just remember your case when you use JavaScripts, or you may get error city instead of nifty effects....

Semicolons

Don't forget those semicolons! They are used to separate JavaScript commands and declarations, and can also cause error city if they are left off. I did this a few times, and it makes for some pretty wild stuff when you try to load the page!

Functions!

Well, functions are used to make things more organized and readable. A function is a set of JavaScript statements put together for a single purpose. You will want to keep your functions inside the SCRIPT tags inside the HEAD section. Here is the format for a function declaration:
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>

function
Indicates that you are going to create a function.

name
This is the name you give the function. As before, name it whatever you like.

(parameter1, parameter2)
The parameters are variables that are sent to the function when it is called. You can have none, one parameter, two parameters, three parameters, and so on.

{
This symbol lets you begin adding JavaScript statements and declarations.

}
This indicates the end of the statements, and the end of the function.
To make use of the function, you will make a call to the function when you want to use it. You call a function by using the name, any parameters you want to send, and a semicolon, like this:

function dosomething (mymoney, cost);

So, how does one use this stuff? Well, I'll show you another way to write the "text in the status bar" script using variables and functions. Here's the trusty old link again. Move your mouse over it, and you'll see text in the status bar. Move the mouse away, and the status bar clears.

Now, here's the code that generated the link. See if you can work your way through it. I'll explain it at the end of the script.

<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>

<BODY>

<A HREF="jvar.htm" onMouseover="overlink('Functions Rule!');return true"
onMouseout="offlink(' ');return true"> Place your mouse here![/url]

</BODY>

What the...? Yes, in this case the script is much longer and takes some time to work through. Here's what the script is doing:

In the HEAD Section

var text=" ";
This declares a variable named text, and gives it a string value of empty space.

function overlink(text)
This declares a function named overlink. The function requires the variable text to be sent to it in order to work properly.

{
Begins the JavaScript Statements for the function overlink.

window.status=text;
This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string "Functions Rule!". See the explaination of the link tag for more.

}
Ends the statements in the function overlink.

function offlink (text)
This declares a function named offlink. The function requires the variable text to be sent to it in order to work properly.

window.status=text;
This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string " ". See the explaination of the link tag for more.

In the BODY Section
<A HREF="jvar.htm" onMouseover="overlink('Functions Rule!');return true"
onMouseout="offlink(' ');return true"> Place your mouse here![/url]
This tag calls both of the functions and passes on a string which is assigned to the variable named text. The first function, overlink, is called inside the onMouseover command. This means that when the user places their mouse over the link, the statements inside the function overlink will be executed. As you can see, overlink is called with a string variable inside the ( ) symbols. Notice we use single quotes to define this string, since double quotes are used in the onMouseover command. The string value we place here is what is sent to the function overlink, and thus is what ends up in the status bar. So, "Functions Rule!" is what shows up in the status bar when the mouse moves over the link. The onMouseout command calls the function named offlink when the mouse moves away from the link. This time, we assigned the variable text a value of blank space. The blank space is sent to the function, and is written to the status bar, erasing the "Functions Rule!" string before it. The return true phrases are there to make sure the script works by returning true.

Well, if you made it through all of that, you are ready to move on. If you still don't quite have a handle on it yet, try writing out the script on your computer, or even by hand. Sometimes it helps you work your way through the messy stuff.

For more info and more guides see HERE!

Thanks,
Blahs