Variables

Why Variables?

In computer programming, we work with lots of data. To best handle and organize all of this data, we store it in containers called variables. Like any good organization system, these container are all labeled. These labels are called identifiers. When creating these labels, or identifiers, we want to choose words that will make sense to us later when working with the code. For the drop down menu that selects a scale, I have chosen the identifier chooseScale, and for the drop down menu that selects the chord, I have chosen the identifier chooseChord.

Variable Syntax

To create a variable you need the keyword var, the identifier, an assignment operator, and the value. An assignment operater is a fancy term for the equals sign. I think it's important to mention that in JavaScript, the equals sign doesn't truly mean equals in the same way that the equal sign in 2 + 5 = 7 means equals. We use === for that. We'll discuss that more in another tutorial. For now, just know there is a difference.

Values come in all shapes and sizes. Sometimes a value is as simple as the number 5 in the following code.

  var myNumber = 5;
  

Other times a value is word or group of words, called strings. In the next code snippet, notice the syntax for declaring a string. The string is enclosed in " ", unlike the number value in the previous example.

  var myMessage = "Hooray!";
  

HTML Values

In this project, many of our variable values are pulled from HTML elements. We tell the browser to look inside an HTML document and retrieve data from within the elements to use as values. Here's an example from the showChord function.

  var scaleChoice = document.getElementById("chooseScale").value;
  

This code creates the variable scaleChoice and assigns it to be the contents of the HTML element with the id of chooseScale. How does this work? Through the document object, we use the method getElementById to target the id chooseScale in parentheses. The element with the id chooseScale is a selection box with 12 options. The property value asks the browser to look and see which of the 12 scales the user has selected and tell us its value.

Creating Arrays

Sometimes we need to put several things in one variable container. To do this we enclose the values in brackets, as in the following code.

  var myMessages = ["Hooray!", "Great job!", "You did it!"];
  

The only difference is that when we are accessing these values, we use what is called an index. The index is a number, beginning with zero, that tracks the values in an array. Take a look at this line of code.

  onclick="window.alert(myMessages[2])";
  

This code tells the browser to display the third string in my array, the words "You did it!" Take note that the first index number is always zero. This can be confusing when you first begin to code and is a common cause of errors. Click this button to see the code in action.

I think we know enough about variables now to get to work on our Chord Calculator project. Let's go back to our demo.js file and add some global variables.

Global Variables

It's time to apply all we've learned abour variables to our chord calculator project. We'll start by declaring our global variables for the twelve musical scales plus an extra scale I will call scaleDegrees. These variables will hold an array of values, 22 values to be specific. Our global variables will go at the top of our demo.js file.

It's important to note that unless you're a musician, you probably won't understand how I came up with the values in these arrays. Because of the complex nature of the chords in the chord calculator, these arrays are a bit complex as well. Also note that not all of the values will be used in the chord calculator function, but are included for later use in other functions. Here is the code for just three of these global variables:

  // global variables
  var scaleG = ["G", "Ab", "A", "Bb", "B", "C", "Db", "D", "D#", "E", 
  "F", "F#", "G", "Ab", "A", "A#", "B", "C", "Db", "D", "D#", "E"]; 
  var scaleC = ["C", "Db", "D", "Eb", "E", "F", "Gb", "G", "G#", "A", 
  "Bb", "B", "C", "Db", "D", "D#", "E", "F", "Gb", "G", "G#", "A"];
  var scaleF = ["F", "Gb", "G", "Ab", "A", "Bb", "B", "C", "C#", "D", 
  "Eb", "E", "F", "Gb", "G", "G#", "A", "Bb", "B", "C", "C#", "D"];
  

You get the idea.

Now that we've set up our event listeners and declared our global variables, we're ready to write the switch statements that go inside our showChord function. Click the "next" button to learn about switch statements.