Friday , 17 November 2017
Home / Programming / JavaScript / Functions – JavaScript Tutorial
Functions
Functions

Functions – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Functions are blocks of code that run when you call it. There are 2 kinds of functions. There are predefined functions which are functions that JavaScript has already created for you. We’ve seen an example of this with the alert() function. Functions take care most of the work and we can call them as many times as we want without having to copy and paste the same chunk of code every time.

The other kind is custom functions. These are functions you create yourself that executes a certain task for you. Creating a function is relatively easy.

Creating Custom Functions

First clear out your script and insert this bit of code.

To tell JavaScript you want to create a function, you first use the keyword function.  This keyword is case sensitive. So, you must write function in all lowercase letters or else you’ll get an error. Next, you give your function a name. This can be any name you want. Then, you put parenthesis that will contain parameters. We don’t have any parameters, but we’ll discuss what parameters are soon. Lastly, you insert opening and closing curly brackets. All your code will be placed between these 2 curly brackets. When we call the function, all code between the curly brackets will be executed.

Let’s update our function to this.

Next, go to your HTML document and add this bit of code inside your <body> tags.

There are actual attributes that will run JavaScript code when an event occurs. In our case, when a user clicks the button, we can fire our runBox() function. To call a function, you just call it’s name and then add parenthesis.  Every time you click this button, a message will appear.

This can be useful for most cases. For example, if you had a login form and you wanted to run some validation on the input fields before submitting it, you can do so by doing it like this.

However, the way we’re calling this function is obtrusive JavaScript. We don’t want this. The reason I made it like this is because we haven’t talked about how to capture events with pure JavaScript. We will in a future JavaScript tutorial. For example purposes on how functions work, this is one exception, but never do it this way in a practical use.

Conclusion

By creating functions, you can save hundreds of lines of code. You don’t have to copy and paste chunks of code that do the exact same thing. Instead, you can just call it and JavaScript will take care of the rest as long as you have defined your function. Another benefit is that when your page loads, JavaScript reads all your code and executes everything at once. By creating a function, you can call that function 10 seconds or 10 minutes later even when the browser is done executing JavaScript.

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link