# Coding for Kids #3. Bugs!

In the first post, we introduced the problem.  We’re writing a program that solves the problem of finding 100 point words, where each letter in the word corresponds to its position in the alphabet (A=1, B=2, Z=26).  In the second post, we coded the basic solution that allows the user to enter a word, and we calculate the result. We have a bug, though, because we made the assumption that the letters passed in are lower case.  The word “automated” is a 100 point word, but “Automated” is displaying only 99 points, because the first “A” in the word isn’t getting recognized correctly.  Remember, in computer programming, we need to be precise. There are a couple of ways to solve this.  The first way will be to simply tack on extra if statements to deal with capital letters, like so: if (c == 'a') return 1; if (c == 'A') return 1; .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }But, we already decided this function isn’t all that efficient, and this doubles the number of if statements.  Fortunately, C#, and more specifically, the .NET Runtime that hosts the application, has a rich set of functionality in the base class libraries (that is, what’s “in the box”) that can do some typical work for us.   In this case, the string object contains a number of useful methods to convert the entire string to either upper or lower case characters. For example, we can modify the getWordValue function to something like this: 1: private int getWordValue(string theWord) 2: { 3: int wordValue = 0; 4:   5: foreach (char c in theWord.ToLower()) 6: { 7: wordValue += getCharacterValue(c); 8: } 9:   10: return wordValue; 11: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Notice on line 5, we’re calling ToLower() on theWord, which converts the entire word to lower case characters.  If we rerun the application (F5) and try the word “automated” with a mix of characters, we’ll see we get the correct value: Even though we fixed the bug, our code is fragile.  What that means is that there are assumptions about the code that, if not corrected, will cause errors or unexpected behavior down the road.  For example, the getCharacterValue function still assumes the character is lower case, even though getWordValue anticipates that.  Sometimes, and especially in small projects, you just accept that the code is not ideal and move on.  Before we move on to reading files and finding 100 point words, let’s solve a couple of problems here in the code.   The first thing to understand is that computers store all data as 0’s and 1’s … called binary.  Each binary digit is called a bit, and 8 of those are called a byte.  The way computers translate those zeros and ones into a letter and words is through encoding.   Encoding is a standardized way to convert a binary number into a character.   Going through the ins and outs of encoding is worthy of a number of blog posts, but think of it like a map.  The computer sees a binary number like 01100001 – which happens to equal 97 decimal.   The computer has a character map that says the number 97 is equal to the letter ‘a’ (specifically the lower case ‘a’).   Without a character map, the computer has no way of knowing this is supposed to be an ‘a’.   As you might guess, the character map says the number 98 is equal to ‘b’, and so on, where ‘z’ is 122.   And while we’re at it, that character map also says ‘A’ (upper case) is 65, and ‘Z’ is 90.   These numbers have roots in a character encoding set known as ASCII, and it was convenient because all western characters could be represented in a single byte (more specifically, it could really be done with only 7 bits).  Today, it’s common for applications, and our runtime, to use Unicode – a more modern way to map the binary data to characters using extensible code points.  By extensible, it’s possible for Unicode to have code points that encompass virtually any number of languages. The point of the above, though, is that for English use, Unicode maintains compatibility with ASCII.  So, we can rely on those character numbers (65-90 for upper, and 97-122 for lower case) to tell us if we have an upper or lower case number.   Computers can process numbers _real_ fast, so instead of doing an evaluation of the character as we have been, let’s evaluate the number instead: 1: /// <summary> 2: /// Returns the value of a given character, where the 3: /// value is determined by its location in the alphabet. 4: /// (A or a = 1, B or b = 2, etc.). Case insensitive. 5: /// </summary> 6: /// <param name="c">The character to be evaluated.</param> 7: /// <returns>The numerical value of the character, 1-26.</returns> 8: private int getCharacterValue(char c) 9: { 10: //get the numerical/ASCII value of the letter 11: int charValue = (int)c; 12:   13: //if the character is an lower case letter a-z 14: if (charValue >= 97 && charValue <= 122) 15: { 16: return charValue - 96; 17: } 18:   19: //if the character is an UPPER case letter A-Z 20: if (charValue >= 65 && charValue <= 90) 21: { 22: return charValue - 64; 23: } 24:   25: //not an A-Z or a-z character, return 0 26: return 0; 27: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The first thing we’re doing on line 10 is creating a local variable, charValue, to hold the numerical value of the character, c, passed in.  (int)c is called a cast.   We know we have a character, but we want it represented as a number.  The cast allows us to do that.   We cast it to a variable (charValue) because it reads clearer and is more efficient than casting a char potentially many times over.  A word of warning:  you need to know what you’re doing when you cast.   It’s safe to cast a character as an int to get the numerical value, but when getting into more complicated scenarios, failed casts raise an exception which need to be handled (and exception handling outside the scope of this series).   In general, I wouldn’t recommend working with character values directly unless you really were sure of what is going on encoding-wise.  This is a good example of it being okay, because we have very specific rules and expectations, and the app is overall quite simple. Our if statements on line 14 and 20 look to see if the character’s numerical value falls in the given range.  The double ampersand (&&) is a logical AND operation so both conditions must be true for the if to evaluate to true.   If it’s a lower case letter, we simply return that value minus 96, which will give us a number of 1 to 26.   Same for the upper case, although we subtract 64 to get its value.  The code above is more concise, runs FAR faster (though, is _still_ not the best if can be), but it’s not quite as readable or obvious as to what it’s doing.  That’s where effective commenting comes in.  Notice, too, we solved the upper/lower case issue in a far better way – it’s not as fragile.   We do lose some flexibility, however – if the “game” changes and makes vowels worth double, for example, we’d have to go back to something else.  Also, notice we check for lower case characters first.  This is deliberate:  while it will handle either lower or upper case, if the characters passed in are more often than not lower case, we return the value and it’s one less if block that gets evaluated.   For the purposes of our program, it’s not significant except as an academic exercise in code optimization.  For now, we’ll call this “good enough” and move on to the next challenge:  finding words!

# Coding for Kids #2. Code!

In my last post, I introduced the problem we’re trying to solve via an introductory computer program:  finding 100 point words where each letter of the alphabet corresponds to its place in the alphabet (A=1, B=2 … Z=26).  At this point, we’ve built the basic template for the app, but haven’t yet written any code.   It’s time to write some basic functions (or methods) that help solve this.  For coding veterans, remember – this initially is about solving the problem as a beginner and optimizing later.   When programming, it’s often easiest to work backwards – that is, the program flow is getting the user input, parsing it, then determining the value.   To write code to do this, it’s easiest to determine the value of a character first, working backwards.   So, let’s write a simple method that does this.   We’ll want a method that accepts a character, and returns an integer.  Within the code template established in the first post, add a method like this under the button click event handler: 1: private void btnCalculate_Click(object sender, EventArgs e) 2: { 3: 4: } 5:   6: /// <summary> 7: /// Returns the value of a given character, where the 8: /// value is determined by its location in the alphabet. 9: /// </summary> 10: /// <param name="c">The character to be evaluated.</param> 11: /// <returns>The numerical value of the character.</returns> 12: private int getCharacterValue(char c) 13: { 14: if (c == 'a') return 1; 15: if (c == 'b') return 2; 16: if (c == 'c') return 3; 17: // ... 18: if (c == 'z') return 26; 19:   20: return 0; 21: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The green text are comments.  Like the button method above it (that doesn’t do anything), our method is private (means it can only be used in this class), returns an integer (int), is called getCharacterValue, and accepts a character (char) we’ll just call c.  Normally, you’d want your variables, like c, to be clear names … such as firstName or dateOfBirth.  But for a simple character, it’s common to just use a single letter like this.  Remember, c is not “C” as in the letter of the alphabet – c is a variable that represents any possibly character.   All the code within the method must be encapsulated with curly braces { }.   Notice that we have a bunch of if statements.  An if statement evaluates a condition in parentheses.  If the condition is true, it executes the code that follows.    We could optionally execute multiple lines of code by putting it in curly braces, or include an else section.   The return command stops executing code, and returns the value if the function is true.  So, suppose that we do something like: int charValue = getCharacterValue('b'); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The runtime (that is, what is executing our code) calls our getCharacterValue function passing in ‘b’.  We’re assigning the result of that call to an integer called charValue.   Logically, you know the result should be 2, and therefore, charValue should be 2.  If you were to follow the function as it executes, it would hit line 14 and see if the character is an ‘a’ … it’s not, so it keeps going.  It is a ‘b’, so it immediately stops executing and returns 2.   If the character passed in is ‘z’, you can see that it’s relatively inefficient.  We’re evaluating 26 if statements.   We’ll address that another time, but for now, it’ll do.   If it gets all the way to the end, we’ll return 0. My daughter asked me why we use 2 equal signs when comparing … such as c == ‘a’ … the short version is that one equal sign is assignment, whereas two is an evaluation.   Notice that in my one line sample code, we’re assigning charValue with a single equal sign.  That means we’re assigning the value of that function to our variable charValue.   Remember that computers need precise instructions, and so, in the if statements, we’re asking the runtime if these two things are the same – we’re asking it to evaluate.  We now have a method that determines the value of a single character … but what about an entire word?  Multiple characters in a computer program are called a string.   What we need to do is write another function that accepts a string, parses it for each character in the string, adding up the value of each character along the way.   To solve this, we need a variable to keep track of each character’s value.   We also need a way to look at each character in a string.  Fortunately, there’s an easy way to do that. 1: private int getWordValue(string theWord) 2: { 3: int wordValue = 0; 4:   5: foreach (char c in theWord) 6: { 7: wordValue += getCharacterValue(c); 8: } 9:   10: return wordValue; 11: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } When our function is called, we’ll use a temporary variable called wordValue that we initially assign to zero.  Next we have a foreach statement.  A foreach is a fancy kind of loop.   There are different kinds of loops, with subtle advantages and disadvantages.  A foreach makes it easy to iterate over objects in a collection – in this case, characters in a string. What the foreach is saying is that for every character (called c) in theWord, execute the code in curly braces.  In that code block, we assign wordValue to itself plus the value of getCharacterValue of the current character in theWord.  (The += means ‘itself plus…’.)   If the word is “test”, the foreach code block is executed 4 times, the first time c is ‘t’, then ‘e’, then ‘s’, then ‘t’.  When that is done, wordValue should be the sum of each character’s value, so we’ll just return that. Now all we need to do is make it so when the button is clicked, we grab the value of the YourWord textbox, and display it in the WordValue textbox.  private void btnCalculate_Click(object sender, EventArgs e) { txtWordValue.Text = getWordValue(txtYourWord.Text).ToString(); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } We can do this in one line of code in our button event handler.  First, one thing to know is that classes encapsulate functionality.  A TextBox is a class, as is our button.  We don’t have to worry about the inner workings of the textbox – such as how to draw the box, handle user input, etc.   The textbox contains a number of properties that can be accessed that make it easy for us to get or set the value of something within the class.  In the case of the textbox, it has a Text property that lets us get or set the value of the text in the textbox.  Properties are accessed by using a “.” – so, in the line above, we’re assigning the value of the Text property in the txtWordValue, and also reading the value of the Text property in the txtYourWord textbox. We call getWordValue, passing in the txtYourWord.Text value, which would be whatever the user types in the box.  Now, what’s that ToString()?   You’ll see ToString() a lot in C#.  Remember, with C# and many languages, you need to be very precise.  When getWordValue returns, what is it?  It’s an integer.  A whole number.  Computers deal with numbers differently and more simply than they do strings.   The Text property of the textbox gives you a string, and also expects a string if being assigned to.  We have a number.  So, in essence, calling ToString() turns, for example, the number 42 into the string “42”.  Let’s hit F5 and run the program.  Using the word “test”, we’ll see the following.  We’ll also try “automated” – an apropos 100 point word! Let’s not get too excited.  Let’s try it again, this time using the word “Automated” (notice the capital “A”): Our first bug.  We’ve barely written code and it’s already inefficient, buggy, etc.  The problem is that “A” is not the same as “a” … there are a number of ways to solve this, but we’ll look at those in part 3.    In the meantime, here’s the code for this version: Download VS12 Project