Coding for Kids #1. The Beginning.
My daughter, a 5th grader, has shown an occasional interest in programming but having so many frameworks and platforms available today is both a blessing and a curse. I began to learn programming by hacking Maxit, Hunt the Wumpus, Adventure, and others. There were no graphics, no internet, no multiplayer.
I saw her doing working on something when it occurred to me this would be a fun afternoon project to solve via code. She was looking for “dollar words” – words that added up to 100 points (or cents, I suppose) where each letter is worth their index in the alphabet (A=1, B=2, etc.).
I really liked this problem because it’s something that can be solved iteratively, and bits can be optimized later for further instruction. If you’re like me, you immediately start trying to figure out the most efficient way to map a given letter to a point value … simple if/then? Regex? Character code map? Lots of options! Immediately, in this type of routine, you can see the tradeoffs between simplicity, reuse, and speed.
I decided to write this series to be approachable by non-programmers and newcomers, because it can be a lot of fun to solve with your kids! If you’re already a programmer, some of this may seem rather basic, but then, so is the problem(s) we are solving and it’s a great way to get started.
Step 1. Assuming you have never coded before, you need to download a code editor. These are typically called IDEs for Integrated Development Environment because it can do much more than just be a text editor. While we could technically write code in notepad, an IDE is often preferred because it can help you be more productive by compiling code, allowing you to debug, catching errors, and can autocomplete items. Visual Studio is a fantastic IDE, and there are a number of free versions for problems just like this called Visual Studio Express. If you don’t have it, download it now. For this project, we’ll create a simple desktop application, so you’ll need the VS2012 Express Desktop version.
Step 2. Before we even start coding, it’s helpful to be clear on the problem. We want a program that gives us 100 point words based on the scoring method mentioned above. Ideally, it would be great if it could give us ALL 100 point words in the English language. With a computer, we need to be explicit, so we’d want them sorted alphabetically. While we’re at it, wouldn’t it be nice to let the user tell the program to find words of a certain value? Why not 200 point words?
These are great ideas for future versions, but let’s start simple. The user types in a word, and the program displays the value of that word.
Step 3. Launch Visual Studio. If it’s the first time you’re launch it, you’ll need to select a profile, such as “C# Development Settings.” We’ll use C# to solve this problem. C# is a programming language. A fun exercise in the future would be to convert this to another language – it’s a good way to learn a new programming language.
Once loaded, select File > New Project. On the New Project window, you’ll see templates which act as starting points for many different kind of applications. Your screen may look different from mine, but essentially, you’ll want to select, under the Visual C# tree, the Windows > Windows Forms Application template. Give it any name you’d like – in this case, I chose 100PointWords (though, you’ll see later why this name is limiting):
Let’s familiarize ourselves with the environment. Click the picture below for a larger version:
This is the IDE. On the left side of the screen is the Toolbox. If you don’t see the Toolbox, you can click the View menu and select Toolbox from the drop down. The Form1 we see is the design surface. The design surface allows us to drag and drop, resize, and otherwise visually manipulate our application. On the right side of the screen is the Solution Explorer window. Our solution can contain any number of individual projects – in this case, we have only one, our 100PointWords application. Form1 is currently loaded.
If you double click on the Form1 design surface, you’ll go from design view into code view. This will open the Form1.cs file and display the code associated with our application:
1: namespace _100PointWords
2: {
3: public partial class Form1 : Form
4: {
5: public Form1()
6: {
7: InitializeComponent();
8: }
9:
10: private void Form1_Load(object sender, EventArgs e)
11: {
12:
13: }
14: }
15: }
Not a whole lot of code yet. A namespace is a container that encapsulates any number of classes typically at the project level. A class is used as a container for a given object, like a form (in this case). This is partial class. Without getting into too many details, what this means is that the designer file and the code file will get combined at compile time into a single class. This makes it easier for us to work on code here, and keep the design separate where we can drag and drop items visually.
Step 4. Now, let’s start dragging some controls from the toolbox onto our form. Switch back to the design surface tab. Take a look at the screenshot below:
Now just drag and drop some labels, textboxes, and a button from the toolbox onto the design surface (just drag and drop!). They can be moved with the mouse, or fine tuned with the arrow keys. A label is just that – some text. We’ll have one label say “Your Word:” and the other label say, “Word Value:”. We’ll have two textboxes – the top one is where the user enters a word, and the bottom is where we’ll display the word value.
On the lower right side of the screen, you’ll notice we have the properties window for the current textbox, called “txtYourWord” … if you don’t see the properties window, right click the top textbox and select Properties, as shown in the screenshot above.
By default, the textbox will have a name like “textbox1” and the button will be “button1” … it’s helpful to change these to reflect their purpose, so in the properties window, change the top textbox to “txtYourWord” and the bottom to “txtWordValue”, and the button to “btnCalculate”. For the button, you’ll change two values in the properties window: the text, which should say, “Calculate!”, and the name, which is “btnCalculate.” There are a LOT of properties in that properties window – don’t let it confuse you. We can ignore everything except the name and text values. While you’re there, update the labels to something like the screenshot above (“Your Word” and “Your Value”).
For controls like textboxes, buttons, etc., it’s common to use an identifier like “txt” or “btn” in the name so that, in code, it’s easier to recognize we’re dealing with a textbox and a button. (This is known as Hungarian notation in computer programming speak.)
With the mouse over the button, double click the calculate button:
And you should see, in the code file:
What we’ve just done is wire up and event handler. This is a fancy way of saying, “When the user clicks the
Technorati Tags: beginner,code,c#,development
button, run this piece of code.” Which, as of right now, does nothing. An event handler simply responds to some type of event – like a button click. Events are happening all the time – when a key is pressed, the mouse is moved, etc. Notice that this function, btnCalculate_Click, has a few declarations. The first is that it’s private. That means this function (or method) can only be called from within this class. Void is the return value – in this case, we’re not returning anything, so the return type is void. The items in parentheses are items passed into the method. For our purposes, we can ignore these for now.
Now, if you’re really curious, you can open up the designer code file (Form1.Designer.cs) and see that all double clicking the button did was add this line of code for you:
this.btnCalculate.Click += new System.EventHandler(this.btnCalculate_Click);
We won’t go any further into event handling here, but event handling is key to modern app development.
Congratulations! We have the program laid out and ready for code. We’ve leveraged the design surface to build the look of our application, and now what we need to do is dive into some code to make it all happen. Stay tuned for part 2!