advertisement

Use functions in javascript to do pretty much anything your heart desires, learn how to create a function and use it in this tutorial. For this tutorial, make sure that you have javascript enabled in your web browser or you wont be able to see the results!

The basic syntax of a function is very same to that of PHP.

function funcName() {
// Execute code
}

You must first declare that you are creating a new function, then you give your function a name, then you put the code you would like to execute.

For the function that we are going to create, we are going to just create 4 buttons and each button will say something different when you click on it depending on the information you pass through your function.

<html>
<head>
<script language="Javascript" type="text/javascript">
<!--
function companySlogans(slogan) {
alert(slogan)
}
//-->
</script>
</head>
<body>

This piece of code starts off our new HTML document, then we start off our <head> tag, next we tell the browser that we are creating some new javascript.

You may be wondering why I have added the <!– before the function, this is because older browsers that do not support javascript will just read this javascript as a comment and it won’t display. So it is just used to hide the javascript from older browsers.

Next we declare that we are creating a new function, then I have given our function the name of companySlogans. Next in our companySlogans function I give it a parameter to pass information so that it can be processed.

For this I will just be creating a simple alert box to use with this function. So we use the alert() function, then you can use in the alert() function I have put the words slogan (This is the same as we have put in our companySlogans() function.)

This is because when we use our function in our page, we can put anything into our function (Such as companySlogans(‘There Greeaaatt!’) and then that is what will be put into our alert box.

Then we end our function with the }, tell the browser to stop looking for javascript and end our head tag and we start our body.

Now we want to create the actual buttons to make these alert boxes work, I am going to create 4 different buttons that you can click on that will have 4 different slogans pop-up.

<h4>Company Slogans</h4>
<form action="#">

This little piece of code just create a header for our page, and then we start our form (Since we will be using form buttons).

<input type="button" value="Allstate" onClick="companySlogans('Your in good hands.')" />

I thought I mine as well only explain one of the input buttons since they are all the same (Except for the company name and slogan of course.)

So we start off by defining that we are creating an input button, and we give it a value (The text that appears on the button) of Allstate, since that is the company slogan I will be using. Then we use another javascript function called onClick(). This function is an event handler, so when this button is clicked down it will execute a piece of code.

In our example we want to execute our companySlogans() function, then in the parameter in which we want to pass information into our alert box we insert the Allstate slogan, then finally we end our input.

Next we create our other 3 buttons :

<input type="button" value="Cingular" onClick="companySlogans('Raising the Bar')" />
<input type="button" value="Dell" onClick="companySlogans('Get more out of Now.')" />
<input type="button" value="Mazda" onClick="companySlogans('Zoom-Zoom.')" />

These 3 inputs are the exact same as our first one, except I have changed the value=” ” attribute to different companys, then in our companySlogans() function I have changed the slogan to match the company that is put into the value=” ” attribute.

</form>
</body>
</html>

Then we close off our form, body and html tags. Our finalized code should look like this,

<html>
<head>
<script language="Javascript" type="text/javascript">
<!--
function companySlogans(slogan) {
alert(slogan)
}
//-->
</script>
</head>
<body>
<h4>Company Slogans</h4>
<form action="#">
<input type="button" value="Allstate" onClick="companySlogans('Your in good hands.')" />
<input type="button" value="Cingular" onClick="companySlogans('Raising the Bar')" />
<input type="button" value="Dell" onClick="companySlogans('Get more out of Now.')" />
<input type="button" value="Mazda" onClick="companySlogans('Zoom-Zoom.')" />
</form>
</body>
</html>

And that’s it! If you have any questions or comments with this tutorial, or you need help please feel free to contact us using the Contact Us form.

Thanks for reading! If you have any questions use the contact form and we will address your comments or questions!
Sean

advertisement