Home » Tutorials » JavaScript » Functions

Functions

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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Functions". After Hours Programming. Accessed on March 16, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/functions-js/.

  • Stewart, Suzy. "Functions". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/functions-js/. Accessed 16 March, 2024.

  • Stewart, Suzy. Functions. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/functions-js/.



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.