LanguagesJavaScriptGuitar Chord Chart

Guitar Chord Chart

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


Look… it’s a Tip!

I’m running out of ways to say “tip”, that’s for sure.

Okay, people, listen up! Today we start a new script. It allows the user to click on a guitar chord then have the chord formed for them. Yes, I know that the script isn’t overly useful unless you happen to be a guitarist (which I am, but that’s beside the point).

I chose the script for a couple of reasons. First off, the author uses JavaScript to create his HTML. Second, the author gets into parsing. It’s a good script to use to teach some rather advanced JavaScript techniques.

Let’s take a look at it.


Click on a chord on the right and watch the dots provide the pattern.

 


Here’s the Code

 

For those of you who do not know, the thickest line, under the first row of radio buttons, represents the “nut” or the top of the guitar neck. If a dot appears above that thick line, it means the string is played open. The thinner black lines following represent “frets.”

Those lines are created through a very small image that’s only 2×2 pixels. It is stretched to the expected height and width through, what else, height and width commands in the HTML.

The Block of Radio Buttons

Let’s get to work. On the left-hand side of what is a two-celled table, you see a block of radio buttons, six across (representing the six guitar strings), and seven tall (representing open string and the first six frets).

If you’ve already looked at the code, you may have noticed long lists of chord names, but no big block of radio buttons. The reason is that the author set up a small JavaScript block to write the HTML code for him.

It looks like this:


 
for (Countx = 1; Countx < 8; Countx++)

{
var Count, Countx;
for (Count = 1; Count <7; Count++) 
{
document.write ("<input type=radio onClick=''>")
} 

document.write ("<BR>")
if (Countx == 1)
document.write ("<img src=/common/content/article/19990921/hg_scripttip56/bb.gif width=150 height=3 align=absmiddle>")
else
document.write ("<img src=/common/content/article/19990921/hg_scripttip56/bb.gif width=150 height=1 align=absmiddle>")
document.writeln('<BR>')
} 	 


Let’s get into it. First off, keep in mind what the result will be. We are going to create a block of radio buttons six across and seven high. First, we set up a For loop:


 
for (Countx = 1; Countx < 8; Countx++)


The For loop always has three conditions, each separated by a semicolon. The first is setting a count start to a variable name. In the case of this loop, that count start is “countx” and it is set to 1. See that?

The next condition is that “countx” must remain lower than eight. Since we’re dealing with whole numbers here (I’ll tell you why in a moment), we can easily pick out that the last number that is less than eight is seven. Thus, this loop will roll through seven times before shutting down. That must mean we’re dealing with the line of code that will create the number of horizontal rows. There are seven of them, right? Right.

Now, how do I know we’re counting in whole numbers? Because the third condition is “countx++”. Those double plus signs mean for the number represented by “countx” to be increased by one each time the loop cycles. And before you ask, yes, a double minus sign does the same thing, except it decreases the number by one each time the loop cycles.

Okay! So, we now know that whatever is below this loop (enclosed within the {curly brackets}) will occur seven times. If we keep in mind what we’re trying to do (a six by seven block), we can pretty much guess that whatever is below the loop will create a row of six radio buttons. Loop that seven times and we’ve got our block.

Ah, if it were only so easy. The author threw in a couple of lines… one thicker than the other. We’ll take it slowly….

Look at the next blip of code:


 
var Count, Countx;
for (Count = 1; Count <7; Count++) 
{
document.write ("<input type=radio onClick=''>")
} 	 


The variables “count” and “countx” are denoted so they can be brought into play. Then we get to the loop. It should look pretty familiar. The new variable “count” starts at one, it loops through six times (one less than seven), and increases by one each time.

The radio buttons are printed to the page through the use of a basic document.write statement. Note the radio button has an onClick Event Handler set to empty single quotes. That’s important. That makes it so that when the button is clicked, nothing happens. You don’t want these buttons clicked. They will fill in on their own.

So, we have our block. Six radio buttons are written to the page seven times. See how it works?

Those Lines

To further complicate things, the lines have to be put in. Here’s the code that does that. It’s a basic If/Else statement.


 
document.write ("<BR>")
if (Countx == 1)
document.write ("<img src=/common/content/article/19990921/hg_scripttip56/bb.gif width=150 height=3 align=absmiddle>")
else
document.write ("<img src=/common/content/article/19990921/hg_scripttip56/bb.gif width=150 height=1 align=absmiddle>")
document.writeln('<BR>')	 


First off, look at the placement of this blip of code. It is underneath both loops so it will come into play each time the first loop occurs. So, a line of radio buttons will write, then this code will come into play. A line of radio buttons will write, then this code will come into play, until seven loops are completed.

The first line is a simple document.write that writes a <BR> to the page after the six radio buttons are written to the page. That’s how we get new lines of radio buttons.

Next the JavaScript tests to see if the variable “countx” is equal to 1 (note the double equal signs). If it is, then the first document.write puts the thick black line to the page. If not (else), then the thin black line is written to the page.

So the process is actually two loops rotating around one another. A major loops rolls through seven times. Each time it rolls through, a line of six radio buttons is written, then a <BR> is written, and a decision about which line to print is made. The thick black line, which represents the top of the guitar neck, the nut, is written to the page only once because it will only come into play when “countx” is equal to one, and that’s only during the first major loop.

So, now we’ve got the radio buttons and the lines written to the page. Now… what do we do with them?

Next Time: The Chords and How They Are Formed

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories