color-coding javascript for a beginners book

• I'm writing a book on programming for beginners, and I have a question about color-coding. The book is about programming Javascript within an Adobe application. It's intended for designers who want to learn a little about programming in a very specific environment -- not for advanced scripters or people wanting general knowledge about JS. I'm really excited, because my publisher has agreed to print the book in color, which is rare for a book on programming. So I want to make the most of this, and use color-coding to help explain the code. I can pretty much set up the editor I'm using to color things any way I want. (I'll be taking screenshots of the code in the editor to use as examples in the book.) When I program, my preference is to use many colors to indicate all sorts of nuances of the language. But I fear that too many colors will be overwhelming for beginners. I want colors to help illuminate -- not confuse. Here's my thinking right now: three colors. 1. darkish red for language elements. This includes keywords, DOM words, operator symbols and built-in functions/methods. 2. black for anything the user (programmer) can make up: variable/function/object identifiers and data. So in the statement, counter = 12;, "counter" and "12" would be black and "=" and ";" would be dark red. I'm doing this, because when I teach intro programming classes, the greatest point of confusion seems to be what you're allowed to name and what you're not allowed to name. No matter how well I explain variables and the like, when I type... userName = "Fred"; ... beginners get confused and think that they MUST type "userName" if they're doing something similar. Then, when they see that someone else has typed... uName = "Fred"; ... they get really confused. 3. gray for comments. Also, there will be line-numbers in the screenshot, and I'm trying to decide how best to format them. I want to be able to refer to them in the code, but I don't want them to be distracting -- to get in the way of the code. I know there's a big difference between keywords and built-in identifiers of DOM elements, but under my system, they'd both by dark red. What is your feeling about this? Remember, the book is intended for people who want to use JS to program a specific application, not for people who want to learn JS as a general-purpose language. I do want people to be able to go on to other JS systems if they want to -- and not be confused by my book when, say, they find out that web browsers have a different DOM from Adobe applications -- but that's not the main focus of the book. So that has to take second stage. Most of my readers will fall asleep if I go into JS as a general-purpose language. They don't care about programming web browsers or Flash. For the few who do, I plan to include sidebars, but it seems to me like this is just confusing info -- given the intended audience -- if I include it in the book's main examples. Do you agree or disagree with this philosophy? Why? Do you have any suggestions for color coding? Do you know of any good examples I could look at?

• Answer:

  I agree that you need another colour for comments. Should have said. >I agree that it's VERY helpful to have a color for strings when you're programming [...] But please note that I'm NOT using color to help the reader avoid syntax errors [...] I'm using color to help teach programming concepts. I don't think that negates the idea though. A string is a programming constant. I think I'd like to expand the idea so that string and number constants are a particular colour. I mean, break it down. What does a programming language consist of?keywords and built-in functions (I want to lump them together)variables you create like scrollingSpeed or screenWidth or whateverconstant values like strings and numberscommentsoperators Have I missed anything? A colon at the end of a line ... does that come under "punctuation" or is it really the "my statement ends here" operator? What's a DOM address, is it another thing, or is it just a function that returns the object at that address? The argument can be essentially reduced to "which of those things needs its own colour"? I'm arguing for a four-colour system: keywords/functions, constants, comments, everything else.You'd rather have five, one for each of the above? There's not a huge difference I suppose. On the practical level however, colouring a semicolon differently to everything around it calls for a pretty strong colour contrast, which could make the thing hard to read. I don't want hot pink or lime green semicolons, I'd go crazy.