This is part 5 of the tutorial series Learn JavaScript in Construct. This part continues on from part 4. So in case you missed it, see Learn JavaScript in Construct, part 4: Control flow.
In this part we'll move on to using script files rather than a script block in an event sheet. This will demonstrate how to use script files in Construct, and script files also provide a more convenient place to write longer pieces of code.
Using a script file
Let's start over for this part. Close your existing project if you have one open, and create a new empty project in Construct again.
In the Project Bar, right click the Scripts folder and click Add script.
This will add a new script file to your project. A code editor will open that uses the full middle view, as we're no longer involving an event sheet.
The first script file Construct adds has some default code which is intended to help make it easy to integrate your code with Construct. However we won't need this. So select all the code and delete it. You should now see an empty code editor.
Previously we used JavaScript code in place of an action in an event sheet. This meant it ran the code whenever the event block ran, such as in On start of layout or when a button was clicked. Now we're using script files, all the top-level code will all run automatically immediately upon the page loading. This is actually before Construct has even started running the project, but for the purposes of this guide that doesn't matter.
You can check this works by entering our first line of code again in the script file:
console.log("Hello world!");
Preview the project and check the browser console, and you'll see the message appear.
We've now moved to using a script file. So from now on, the code samples in this guide should be entered in to the code editor for the script file.
Functions
Functions are another essential part of all computer programming. A function is essentially a group of statements that you can re-use in multiple places. They are also a good way to make sure code is well-organised with different functions for each of the key tasks of your program.
Declaring a function
In JavaScript a function can be declared like this:
function logMessage()
{
console.log("Hello world!");
}
This creates a function named logMessage, which will log Hello world! to the console. By itself, this code does not actually do anything. It's just declared that the function is there, but nothing actually uses it yet.
Calling a function
To run the statements inside the function, we need to call the function. This is done using its name followed by parenthesis (). Try this code snippet, which adds a call to the function.
// Declare function
function logMessage()
{
console.log("Hello world!");
}
// Call the function
logMessage();
Now this will log Hello world! to the console, since we have both declared the function (describing what it does), and called it (which actually runs it).
This function can be called in multiple places, which saves having to repeat all the code inside the function everywhere. This might seem like a small saving in this case, but real programs can have long and complicated functions, making it a much bigger saving.
Parameters
Functions can also be passed parameters, which are additional values that can be used by the function body. These go in between the parenthesis (), separated by commas. Our previous code using () really means "no parameters". The following code declares a function that uses two parameters for two numbers to display in a log message, and then calls that function twice with different parameter values.
// Declare function with two parameters
function logNumbers(firstNumber, secondNumber)
{
console.log(`The first number is ${firstNumber} and the second number is ${secondNumber}`);
}
// Call the function twice with different parameters
logNumbers(3, 4);
logNumbers(6, 7);
This will log two messages:
- The first number is 3 and the second number is 4
- The first number is 6 and the second number is 7
Notice how the values passed in the call, such as 3 and 4 in logNumbers(3, 4), are passed to the corresponding parameters firstNumber and secondNumber in the function logNumbers. Then it runs the code inside the function using the provided values.
Inside the function logNumbers the parameters firstNumber and secondNumber are essentially variables, but don't need to be declared with let - the name alone is all that is needed when declaring function parameters.