Functions

Functions Defined

A group of instructions in JavaScript code is called a function. According to the W3schools, "A JavaScript function is a block of code designed to perform a particular task." In this tutorial, our task is to calculate and display the notes of a musical chord based on the users scale and chord selections. I am going to show you how to write a function that will accomplish this task. We are going to name our function showChord.

Function Syntax

First let's talk about syntax. All languages have proper grammar and spelling, even computer programming languages. This proper grammar and spelling is called syntax. There's a specific way that the components of our code must be presented to the web browser for that code to be understood. If we don't use the proper syntax, the code won't run. The proper syntax for our function "showChord" looks like this:

  function showChord() {
     statements;             
  }
   

We will put our step by step instructions where the word statements appears in the above code. Later, we will talk more specifically about these statements, but first we have two more things to do.

Event Listeners

As discussed on the previous page, every function is connected to an event. Often these are user interactions such as making a choice from a selection list or clicking a button. If you are viewing this tutorial on a mobile device, you likely clicked on the hamburger menu in the upper right hand corner to see the list of pages in this tutorial, or maybe you chose to navigate through this tutorial using the next and back buttons at the bottom of the pages. These are examples of events.

Sometimes there is only a single statement, or instruction, connected to an event, as with the code below that uses the onclick attribute of the button element to move the user to the next page when the "next" button is clicked.

  onclick="document.location='statements.html'"

We can put the above attribute onclick and value document.location='statements.html' directly into the html document within the button tag for the "next" button.

Other times, there are many lines of instructions and it is easier to group them together into a function in a separate JavaScript file. In these instances, we must have a way to "listen" for and "call" the function from the JavaScript file when the event happens. We do this with what are called Event Listeners.

Event Listeners

We create event listeners with a function. It is essentially a function whose only task is to call another function. Here is the function to create the event listeners that call the showChord function.

  // creates the event listeners that call the showChord function
  function createEventListeners() {
     // creates an event listener for the drop down menu to select a scale
     var chooseScale = document.getElementById("chooseScale");
     chooseScale.addEventListener ("change", showChord, false);
     
     // creates an event listener for the drop down menu to select a chord
     var chooseChord = document.getElementById("chooseChord");
     chooseChord.addEventListener ("change", showChord, false); 
  }

On the next two pages I will explain how we create variables and write statements, but before doing that I want to show you two more snippet of code that we need to make our functions work. The first is a statement that tells the browser to call the createEventListeners() function when the web page is loaded. This code goes at the very bottom of our JavaScript document that I've named demo.js and put in a folder names js.

  // calls the createEventListeners() function when the page is loaded
  window.addEventListener("load", createEventListener, false);
  

Next we must add a line of code directly into our HTML document to tell the browser to load the external JavaScript file. This line of code goes just before the closing body tag in the html document.

  <script src="js/demo.js"></script>
 

Okay, now that we've set up our Event Listeners and linked to our JavaScript file, let's take a few minutes to talk about variables. Click the "Next" button to join me on the next page.