<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 4: Functions & Conditional Statements

Functions: We sometimes wish to run JavaScript code when a user triggers an event (such as a mouse over) or we may wish to call code more than once in a page. We may also wish to create repetitive tasks that we can access again.

For these purposes we can put code in a function. The basic structure of a function looks like this:

function myFunction(){

//code goes here

}

Statements belong within the body of the function, which is opened with a forward curly brace and closed with a backward curly brace. Make sure the name of the function is descriptive of what action it performs. Functions can be called from within another function, an event handler, or as the value of an <a> tag's href attribute. If you call it as the value of href, you'll need to include the word "javascript" followed by a colon.

Here is an example of a function that will change the source of an image and change the background color of the page:

function changeBoth() {
document.bgColor="#ffccff";
document.offImage.src="onImage.gif"
}

To call the above function as the value of href, the code would look like this:

<body>
<a href="javascript:changeBoth()"><img src="offImage.gif" name="offImage"></a>
</body>

To call a function from within another function:

function changeBackground(){
document.bgColor="#ffccff"
}

function changeImageAndBG(){
document.offImage.src="onImage.gif"
changeBackground()
}

We can pass information to functions so the function is more flexible. The info we pass to the function are called arguments.

function passStuff(myArg) {
alert(myArg)
}
<a href="javascript:passStuff('One')">One</a>
<a href="javascript:passStuff('Two')">Two</a>

Passing more than one argument:

function passStuff(myArg1,myArg2,myArg3) {
alert(myArg1 + myArg2 + myArg3)
}

<a href="javascript:passStuff('One','Two','Three')">One, Two, Three</a>
<a href="javascript:passStuff('Uno','Dos','Tres')">Uno, Dos, Tres</a>

If the condition returns a value of true, code contained within an if statement's body will execute. If the condition returns a value of false, the code within the statement body will not execute. In both cases, any code following the if statement's body will execute. You can have as many statements in the if statement's body as you wish, and you can nest if statements. The structure of an if statement is as follows:

if (conditional expression is true) {
then execute this code
}

If you need to execute an alternate set of statements if the condition returns false, you can include an else clause. Think of it like this: if this is true, do this. if this is not true, do this instead.

if (conditional expression is true) {
execute this code
}
else {
execute different code
}

When there are only two possible conditions to test for, an if statement with an else clause is what you need. When there are many possible conditions to test for, multiple if statements are appropriate.

An else clause belongs to the nearest if statement. Because of this, it is not possible to use multiple if statements followed by one catch-all else clause. Instead, include an else clause with each if statement followed immediately by a nested if. The final else will then perform as a catch-all because all the other if/else statements have evaluated to false.

if (name == "Paul") {
alert("Your name is Paul")
}
else if (name == "Ringo") {
alert("Your name is Ringo")
}
else if (name == "John") {
alert("Your name is John")
}
else {
alert("Your name is not John, Paul or Ringo!")
}

Below is the JS code for creating a new "window" (popup) and using a function to send the size of the window, as well as the page to load into the window.

Note the function uses an if statement, and can be adapted to allow even more info to be sent to the function.

<SCRIPT LANGUAGE="JavaScript">
function myPopWindow(popurl,hght){
if (hght != ""){
hght = ",height=" + hght;
}
var opts = "width=318" + hght + ",status,scrollbars";
pop1 = window.open(popurl,"Help",opts);
pop1.focus()
}

<a href="javascript:myPopWindow('myPage.htm',25)>Pop It Up!</a>

 

 

 

Back To Top

2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved