Submodule 12.1: JavaScript Functions

Prerequisites for this submodule

You have to study the following educational material before starting this submodule:

Simple JavaScript file:

• Where do we put JavaScript code in the HTML code;
• Variables
• Developer tools (console)
• The functions "alert" and "prompt"

Making decisions

• Comparison operators
• If statements
• Logical operators

What are functions

You can imagine functions as a block of code which is easily reusable and it is used to perform a specific task.

The use of functions allows us to modularize our code.

As we know, functions are generally defined as: function myFuncname (){my code}

The code inside the curly brackets is the code that will be executed when the function will be called.

Exercise

Follow the next links and fill the necessary areas. When finished, right-click, select inspect and click the "Sources" tab. Next, click the HTML file to see the code:

  Event calls function

  A function calls another function

Parameters and Arguments

You will often find the terms argument and parameter to be used interchangeably. 

However, here we will try to explain their difference.

When we declare a function, the text inside the parenthesis is called parameter.

A function can have one or more parameters.

Example: Function myFuncname (myParameter1, myParameter2){}

Inside the function, the parameters behave as local variables. All the usual variable rules apply to these variables.

In order for a function to be run, we have to call it. To call a function containing a parameter we write:

myFuncname (myArgument1, myArgument2);

In this case, the text inside the parenthesis is called argument instead of a parameter. 

Arguments are the actual values that will be passed into the function.

Exercise

Follow the next link. Right-click, select inspect and click the "Sources" tab. Next, click the HTML file to see the code:

  Parameters and arguemnts

Return

Return is another important statement of functions. The return does what its name suggests, it returns a value (number, Boolean, string). An example of the return usage is:

function myFuncname (myFirstnum, mySecondnum) {
return  myFirstnum + mySecondnum;
}
// here we call the function and assign it to a variable
var sum = myFuncname(2,4);
// you can use console.log to see the result of the return statement
console.log (sum);

Note that the parameters (myFirstnum, mySecondnum) are what “informs” the function that it is going to receive two arguments, which in this case are 2 and 4. If instead of two arguments we had written one or more than two, the console will have given us an error message.

Exercise

Follow the next link. Right-click, select inspect and view the resunt in the Console tab. Next click the "Sources" tab and click the HTML file to see the code:

  Function returns value

Exersice

Exercise

1. Open your editor, create a new file and save it as exersice12.3.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Replace the “placeholder” in the script area, with the appropriate operator. We want to decide if a number is odd or even.

Code:

Solution:

Further reading

See more about functions in W3Schools https://www.w3schools.com/js/js_functions.asp