Introducing JavaScript Functions and Loops - Putting the Fun in Your Functions
(Page 2 of 4 )
Before I show you how to write a function and call one, let's go over a few rules. First, you can place a function in the head or body section and even in an outside .js file. You can call the function from any place within your page, and even from other pages in the event that you have stored an external .js file.
As stated before, functions hold reusable code that users call by performing an action. Take a look at this example:
<html>
<head>
<script type="text/javascript">
function firstfunction() //This is how you declare a function
{
alert("Look at me! I'm a function!")
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="firstfunction()" //clicking on the button calls the function
value="Click for Function">
</form>
</body>
</html>
In the above example, we wrote a program to create a pop-up button that then declares: Look at me! I'm a function! Of course the button isn't really a function, more the result of one, but you get the drift. Had we not enclosed our code in the function, it would execute when the page loaded, and that's it. Unless the user refreshed the page, it would not happen again.
Instead, however, we did create a function, and we made a button for the user to click and call the function as often as they would like. As you can see by the above code, the way to declare a function is to type function nameoffunction(), followed by
{
your code
}
Note that if you are going to use variables for your function, and those variables are to be used only in that function, you must declare them like so:
function nameoffunction(variable_one, variable_two, etc)
Also note that the word “function” must be in lowercase letters and that the function's name is case-sensitive.
Here is an example of a function that passes a value to a variable and then uses that variable.
<html>
<head>
<script type="text/javascript">
function varfunction(complex) //a function with a var named complex
{
alert(complex)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick=varfunction(2+1) //assigns value to var complex
value="Complex Math: What is 2+1?"
</form>
</body>
</html>
The above code creates a function named varfunction and a variable named complex. It then creates a button that assigns a value to the variable complex and calls the function.
The value of the variable in this case is the equation 2+1. When the user clicks the button, a pop-up appears that gives the result of 2+1, which of course is 3.
We can of course have the function trigger when the page loads if we want. Maybe you have certain text that you wish to appear across multiple pages. While you would have to create a .js file for that, here is how you would write a function that would return some text on a page when the page loads:
<html>
<head>
<script type="text/javascript">
function myFunction()
{
return ("Harry Potter Fan Fiction is for Nerds.")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
</body>
</html>
Here we have placed the JavaScript in the head section of our page. We have also used a new statement, the Return statement. The Return statement specifies the value a function is to return. The above code stores the value “Harry Potter Fan Fiction is for Nerds.” It then prints the value to the web page.
Next: Loops >>
More JavaScript Articles
More By James Payne
/ 7 
