Help Me Teach Programming

July 18, 2005 11:35 AM

Help me teach people how to program: I need simple examples of functions, classes, etc.

When I teach programming, I always try to boil language constructs down to their essences. On the other hand, if I get too abstract, students start shifting in their seats because they can't understand how the constructs can be applied in the read world.

So when teaching, say, functions, I give a brief definition and show them the syntax (in whatever language I happen to be teaching); then I show them a practical example. Which is where things get difficult.

Most texts use math for the real-world examples. They show how to make a really simple function that takes in a number and outputs its cube root, or something like that. And I see the appeal, because math examples are often simple, and (the idea is) that one can focus more on how functions work (while still seeing a real-life, useful example) more than on what some specific function does.

But I want to stay away from math, because most of my students are designers who have been forced (kicking and screaming) into programming. Mathamatical aspects of programming are the LAST things I show them -- after they get comfortable with other aspects. (Yes, I know that on a root level, all programming in mathamatical. But I'm trying to avoid sytax that reminds them of high school algebra class, except where it's totally unavoidable, like with variables.)

So I'm looking for simple examples I can use to teach object oriented techniques, functions and the like. Please minimize the math. But, if possible, give examples that DO solve real-world problems. (Example: a function that takes in a word and searches for a smaller word within it).

The idea (and the tough trick) is to come up with examples that can stand on their own as much as possible. In other words, the student shouldn't have to focus on arrays, string methods and for loops while trying to understand functions. It's impossible to teach each language construct in TOTAL isolation (a string method or two might HAVE to be used), but I want to keep this at its minimum.

To summarize:

1) avoid math
2) make practical
3) isolate language constructs

If it helps, I mostly teach Javascript (Flash & Browser versions), but I occassionally teach other languages.

posted by grumblebee to computers & internet (14 comments total)

I read Code independently while I was taking an introduction computer course. It really helped me understand what everything meant in a concrete way. I don't know how practical it is, as it doesn't give examples for you to follow, I think any programming tutorial would be practical.

I guess how different terms and concepts in computing relate and how they come to be. It's easier, for me at least, to understand programming terms when I understand the why aspect -- how different computers think than from our own processes.
posted by geoff. at 12:12 PM on July 18, 2005

I've been reading Colin Mock's Actionscript: The Definitive Guide (O'Reily). It's got lots and lots of examples in the early chapters. It's split between being a reference and being a "learn syntax / learn programming" book. In the chapter on functions, the examples are all concrete and pretty useful. Since it's flash, it's easy to make animation and other motion excercises. Then it's easy to add things like loops and stuff to those early functions (i.e., rewrite code on each object with a single function, rewrite functions to use loops, etc.) It's conceptually easier because you can see what's going on. It's important for beginning programmers to see the results of their efforts.

This is not the case in java or other languages, where it takes 50 - 100 lines of code just to draw a circle on a canvas. So I think if the language has graphics, USE THEM. If it's harder to come up with graphics examples, the second best are language examples. Let your students build a very simple poetry generator. Or help them to build a tiny address book application. You can start that at very basic levels. Have them write functions to store different pieces of the data. This will also help them with objects, because, at the beginning, they can use very small objects and work up to building the "entry" class which is the store for an entire address book entry.
posted by zpousman at 12:30 PM on July 18, 2005

Why's (Poignant) Guide to Ruby uses cartoons of foxes and elves with code examples( like how to ratchet a star on to a monkey) to show how functions and classes work with ruby. The whole guide is a really friendly, unintimidating guide to simple and complex programming concepts.
posted by mnology at 12:30 PM on July 18, 2005

How about a function that converts dates from one format (say, the European method of dd/mm/yy) to another format (mm/dd/yyyy)? That would seem to be fairly simple - search for the "/", break the string into pieces, and then reassemble it.

A function we create in an Access class I teach is to automatically enter a country based on a state/region. Obviously, the example needs to be very simplistic and incomplete, but you can basically have the function say something like "if state='CA' or 'CO' then set country = 'USA'" or whatever.

When you teach JS classes, I'd of course suggest form validation functions - requiring entry in a field; checking a password in a "password" field with a password in a "confirm password" field; and maybe even very simplistic email validation.
posted by robhuddles at 12:39 PM on July 18, 2005

I don't know javascript or flash, but I have been in programming classes with people who don't want to be there (insufferable statistics majors).

I would start with something basic, like a clock. The clock class has methods for updating the seconds, minutes and hours and contains variables for keeping track of each numbers. Instantiating a clock object initializes time to 00:00:00. Time is updating by call update_seconds. When seconds equals 60 it rolls over to 00 and calls update_minutes. Update_minutes does the same thing, but calls update_hours. Update_hours rolls over at 24.

Further methods could include switching between military time and civilian time or making a watch class that extends/inherits the clock class to include date functionality.

I know the examples kind of lame, but you can apply it to other ideas. If they're designers, maybe you can start with functions to place basic 2d geometric shapes and lead to objects that build bigger things (snow men, robots, etc)
posted by gaelenh at 12:44 PM on July 18, 2005

well, if you want to mess around with letters rather than numbers, teaching them how to make simple codes/ciphers would be one approach (replace a with b, etc, being simple, and a class with a private key being an example of encapsulation). however, i doubt that would appeal any more than numbers.

i'm not sure the rest of this is going to be any more useful, but i think you're barking up completely the wrong tree. maths is critical. so if your problem is that they don't understand why maths is relevant to everyday things then you need to solve that. because maths is absolutely central to everyday things with a computer.

it's as though you are preparing people to travel to france and, since they don't understand why french is necessary, you're asking for examples of how to communicate there without speaking the language.

why not take some software that generates an image, take it apart and show them how maths is central to what they want to do?

take something as simple, say, as generating the output from"spirograph". not only does that involve the usual maths for "spirograph curves", but it also requires basic calculus so that you can describes the shapes using a small number of curved segments.

here (left) you can see the control points for a simple curve - the grey dots are the calculated points. the grey circles are calculated from the derivatives of the functions and guide the bezier curves to take the form you see rather than the ugly grey line (the outer circle is the main "ring").

so by using calculus i can describe that curve using just 10 points. when i try to generate something like the first image in a downloadable piece of javascript (in an svg enabled browser you can hit reload and see a new picture(*)) using just 10 points is crucial. with straight line segments it would be ten or a hundred times slower for the same quality result - people would think their browser had crashed.

without maths it would either be too slow, or i'd be stuck with just 10 points, giving the angular grey line. ugly as sin. the calculus is needed because i need to know which direction the curves are "heading" at each point (the lines that joint the dots to the circles). that's enough for bezier curves to do a good job of guessing the right shape.

heck, that image even requires the euclidean algorithm - one of the oldest pieces of number theory.

maths is critical. show them dbn or context free or processing (the dbn successor i couldn't remember earlier).

or, if images aren't their thing, look at whatever they are interested in. surely, if you teach programming, you must be aware of how maths is everywhere?

(*) if you're looking at the svg file rather than the png rendering above.
posted by andrew cooke at 1:03 PM on July 18, 2005

when i try to generate something like the first image.

oops - i snipped that out while editing. imagine a big pile of spirograph squiggles, only more tasteful than my image was.
posted by andrew cooke at 1:10 PM on July 18, 2005

How about a simple "color" class.
It could have methods to return its compliment (an example of a method returning another instance of the class), additive and subtractive (light and paint) color mixing (by overload, say, the + operator). You could teach independence of internal representation by doing the class once as RGB colors and once as CMKY color, etc
posted by Capn at 1:16 PM on July 18, 2005

GREAT HELP SO FAR! THANKS!

maths is critical.

I agree, of course. But here's a reality check. I teach four-day programming classes to designers who mostly have to use programming to build and manage user-interfaces and read data in from databases. They are going to totally turn off if I start using cube roots as examples for functions.

Yes a four-day programming class is stupid, but that isn't my decision. Yes, it's stupid for a company to expect their designer to also be their programmer (after taking one four-day class), but that's not my decision.

My classes are doomed to failure, but there are level of failure that I (by necessity) will accept and levels I won't. I've been able to turn some students on to programming (so that they willingly learn more) by taking away their fear of it.

Yes, math is integral, but it's not where I should start with my particular students.
posted by grumblebee at 1:23 PM on July 18, 2005

The beauty of abstraction is that math doesn't have to be critical. If you call a function named "squareroot," all you have to know is that it returns the square root. It doesn't matter to you how it works.

Here's an example that might work, just off the top of my head. Show them a program that takes the name of a month, and prints out the number of days in that month. So it would look something like this (in pseudocode):

month = GetInputMonth();
days = GetNumberofDaysInMonth(month);
PrintNumber(days);

Easy, and straightforward. You can explain the idea behind assignments and function calls. Then you can tackle it one item at a time. You'd probably want to start with GetNumberofDaysInMonth():

if (month == January)
return 31;
etc.

That covers the very basics: ifs and functions with return values. Then you can spiff it up and show them switch statements. Then, maybe turn it into a lookup table to show how arrays work. After that, go back to PrintNumber() and work on strings. Lastly, GetInputMonth() for either string parsing or input fetching.

If you need to convince them why programming is useful in the first place, go ahead and show a flashy graphics demo to start with. But I'd advise against trying to teach them that right off the bat. Graphics code is very rarely intuitive.
posted by Sibrax at 2:54 PM on July 18, 2005

This claims to be an implementation of turtle graphics in actionscript. I'm not actually going to try it because in order to do that I'd have to install flash.

I'm thinking that something logo like might be a way to get them to concentrate on drawing pictures rather than worrying about syntax.

All in all, I agree with you that your project is doomed but good luck anyway.
posted by rdr at 4:29 PM on July 18, 2005

have you checked out processing? Free, and you can start doing graphical and mulitmedia stuff very easily, without the cumbersome interface issues of flash and such
posted by puppy kuddles at 4:59 PM on July 18, 2005

You can be tricky and teach them some graph theory while telling them that it isn't really math.

1. basic graph object model
Create a simple node class, it contains x, y, and color
Create a simple edge class, it has a list of two nodes
Create a diagram class, it has a list of edges

now write a program that loads data into the diagram, then displays the diagram.

2. graph object model for traversal algorithms
Create a connectedNode class, it contains x, y, and color, as well as a list of adjacent nodes and a boolean "visited" variable
Write a program that creates a random graph full of nodes, with one root node. Draw the graph. Traverse the graph using BFS and DFS.

You should be able to expand upon these two projects in many ways. You could compare the two different object models that describe the same thing but are useful for solving different problems. You could focus on graph algorithms, or you could focus on just filling the data structures up and drawing them. If your students are advanced graphics people, you may want to create a program that makes an animation of graph traversal algorithms.

Everything in software is math, but most of it is not the kind of math that everyone hates (calculus).
posted by b1tr0t at 6:07 PM on July 18, 2005

If you're approaching it from the database angle, consider using the kinds of simple problems that database designers often face.

For example: addresses. It's common in databases to keep the address in a "parsed" format: lot number, street name, city, state, zip. An ADDRESS class would not only contain these elements, but provide methods for validating and exporting values. For example, ADDRESS.toLabel() could export the address information as a list of formatted address lines.

This is the sort of practical, easy-to-understand problem that would help your students comprehend how objects are used and why they are useful. (Bonus points if they are considering an object-relational model.)
posted by SPrintF at 6:13 PM on July 18, 2005