JavaScript: Functions

 

Functions

Functions play a key role in most programming languages, and JavaScript is no different. A function can be thought of as a chunk of code that performs a specific task. Whenever you need the task to be done, you summon the function to do the task. For example, you could write a function that figures out today's date in mm/dd/yyyy format. You could write a function that combines a first name and a last name and prints the result to the screen using "alert()." It makes sense to write a function to do something that you may want to use more than once.

 

Example 1

Let's get introduced to the syntax of a function. Here is a script that uses a function that multiplies 2 numbers together and displays the result using "alert()":

<head>
<script language=JavaScript>

function mult(x, y)
{
var z;
z = x * y;
alert('The product of ' + x + ' and ' + y + ' is ' + z);
}

</script>
</HEAD>

<BODY>
<script language=JavaScript>
<!--

x = prompt("Please give me a number", " ");

y = prompt("Please give me a second number"," ");

mult(x, y);

//-->
</script>
</body>


to see this how this script behaves in a new window.

Note that the function is defined in the <HEAD> section, and that it begins and ends with curly braces. The function accepts 2 numbers ("x" and "y"), which are listed inside parentheses after the name of the function: "mult(x, y)." The function declares a variable "z," multiplies "x" and "y" together, and then assigns the result to "z." The results of the multiplication are then displayed using "alert()."

In the <BODY> section, values for "x" and "y" are obtained using "prompt()." The function "mult(x, y)" is then called and the variables "x" and "y" are sent to the function for it to use.

 

Example 2

In this example, we write text to a page using a function. Here is the code:

<head>
<script language=JavaScript>
function writeToPage(msg)
{
document.write("<p align=center style='font-size:20pt;color:blue;'>"+msg);
}
</script>
</HEAD>
<BODY>
<script language=JavaScript>
msg = prompt("What would you like to see on the page?", " ");
</script>
<center>
<a href="javascript:writeToPage(msg)">-- Write To Page --</a>
</center>
</body>

 

to see what this code does.

In a script in the BODY section, the user is prompted for something that she would like to see on the page. The text 'Write To Page' appears inside a link that calls the function 'javascript:writeToPage()'. When the link is clinked, the variable 'msg' is sent to 'writeToPage(),' which displays 'msg' in a document.write() statement.

 

Other Resources

Try these links on Functions:


Page Link
Functions www.htmlgoodies.com/primers/jsp/article.php/3478511
Functions www.wdvl.com/Authoring/JavaScript/Tutorial/functions.html
Functions webteacher.com/javascript/ch01_4.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own page, or 2) the eEverything.com site.

If you work on eEverything.com, create a Discount Calculator. Create a button that says "Calculate Discount." Using a 'prompt()' command, ask the user for the original price of an item. Using a second 'prompt(),' ask the user for the percent discount for the item. Then in a function calculate what the sale price of the item is, and use a 'document.write()' command to print the result. The result would be like, "This $70 item, at 20% off, now sells for $56."

If you work on your own page, implement something similar.