Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

JavaScript Functions are extremely useful, and they can save you from writing bunch of redundant code.

Example <html>
<body>
<script type ="text/JavaScript">
function annoyingPopUp()
{
alert(" The most annoying thing ever. ");
}
</script>
<form>
<input type="button" value="Click me!" onclick="annoyingPopUp()" />
</form>
</body>
</html>

One way to execute JavaScript functions is to use a button's onclick attribute. Putting annoyingPopUp() in the onclick="" will call the JavaScript function annoyingPopUp. Of course, that will cause the most annoying method to be called, which is alert. Alert is actually a method of the window object, but in it is often shortened to just alert(); This is a very rare exception, and most methods are not shortened like this. Whatever is inside the () of the alert() is what will be shown in an alert box.

Every time, you click this button the annoyingPopUp function will keep giving you the alert.
Example <html>
<body>
<script type ="text/javascript">
function sampleFunction(argument1)
{
alert(argument1);
}
</script>
<form>
<input type="button" value="Click me!" onclick="sampleFunction(' Test Argument ')" />
</form>
</body>
</html>

We can see that the onclick is different in this example than the last one. The onclick="sampleFunction(' Test Argument ')" now has a argument it is adding into the sampleFunction(). The argument ' Test Argument ' is passed into the function sampleFunction(), and the argument1 now takes the value of the ' Test Argument '. As we begin through the function, we are told to alert our new argument, argument1. The message that pops up is "Test Argument".

Another way to call a function is to call it from another method or function:

Example <html>
<body>
<script type ="text/javascript">
function addingFunction(argument1, argument2)
{
return argument1 + argument2;
}
document.write(addingFunction(333,444));
</script>
</body>
</html>
Result
777

This is similar to the last example, but the function is being called from another JavaScript method document.write(). addingFunction() is passing in two arguments this time: 333 and 444. Where 333 is being passed into the addingFunction as argument1 and 444 is also being passed in as argument2. Once they are both passed in we return the sum of the two arguments. return simply means that we will return something back to the method or function that called our function addingFunction. In the result, you can see that return sent back 777. The final statement that executed was more like document.write(777);

References

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments

No comments yet... Be the first!



Advertisement