The language of the material is friendly and low-key -- this is great.
For students who don't even yet know HTML or CSS, I like your general approach a lot:
- don't bother asking them to mess with the DOM, either with native methods or something like jQuery
- instead, provide a friendly, highly functional sandbox to play in
- and provide easy to use functions for drawing to the screen
So that in mind -- I question the approach of Page 1 vs. the subsequent pages. There's no need to bother teaching them how to use the Chrome console or using alert(). Instead, I would redo Page 1 to just put them in the sandbox right away, and let them play around with a friendly write() or print() or log() function.
Update: to clarify, I've personally been thinking about a JS tutorial for people who know HTML and CSS, and maybe a little jQuery. For people with that background, I lean towards using the DOM or opening the console/inspector, rather than drawing shapes -- because the DOM leverages what they (sort of) already know. But for your audience (people who do not know HTML), sticking with using higher-level functions to teach JS programming is a really great approach. You can always go back and open the inspector or teach basic DOM manipulation later, once they've mastered Space Invaders.
Instructions are solid, although as mentioned above, do this in the sandbox with an artificial print() function.
Break the idea of a function down further. Possibly draw a diagram with the sections bolded. This is the name of the function; this is the parameter (the thing the function acts upon).
Discussing expressions: great. I like the "most basic expressions are numbers and strings."
For students that don't have a math background, explain that parentheses mean "do THIS operation first" or some such. You kind of say this when you talk about parentheses and grouping, but make it even more explicit, and possibly show multiple examples, in steps. You can even do a nested expression this way.
Explain how the parentheses in (1 + 1) * 10 are not exactly the same thing as the parentheses in write().
If you're going to mention statements here, probably worth saying that another kind of statement is executing a function.
"A variable's value is not constant..." -- this is probably just confusing to students who lack a math background -- I'd drop it. It is worth saying that you can reassign variables.
Add some variant examples? Show declaring multiple variables. Show adding or concatenating variables with literals, or with other variables.
You almost get at this, but mention that var is a declaration, and once you've declared a variable, you should not use var again on that same variable -- just say, myvalue = 'hi';
Rewrite this with a print() rather than alert(). I probably sound like a broken record here :), but -- the rest of your tutorial uses artificial, higher-level functions, so there's really no need to introduce alert().
Also, don't bother with console.log(). That's important, but you can teach it much later.
The playground page is great, but there's a missed opportunity -- the drawing() function doesn't actually get executed in the source code the user can see. Can you change the playground so that the user actually have to call drawing() explicitly? That would hammer home some important messages about how you declare a function vs. how you execute a function. Instead, the button can redraw the screen, calling drawing() (or not!) as the user directs.
If you do this, make sure drawing() does something interesting if it's called multiple times.
Loops are tricky. You're also introducing boolean conditions. In the explanation, make a diagram of the while statement, and use color coding or bolding to call out the different components. Break it down very slowly,
Before asking them to write a grid (nested loops, yikes!!), ask them some questions about the first loop. What happens if you tweak the loop in various ways?
Mod is pretty hard. It's also not the main thing you want to teach here. I would be tempted to hide this behind an isEven() sugar function.
It's neat to see that you can construct a smiley from more primitive functions, but maybe start with something smaller, then do the smiley. Break down what the smiley is doing, step by step.
Excellent.
Good. Though since you have to talk about accessing properties here, it might be worth moving this section below "Named properties."
Change this to an exercise in the sandbox rather than the Chrome console. Make it visual.
The exercise is a bit too broad. Give some hints/guidance, and think about how that could be visual too. Perhaps do a checkers board -- that would be easier to draw.
This is more interesting than the previous exercise, it's good to visualize the results.
The exercises here are very good.
Show a simple example of actually calling visualizeHistory() on some simple dataset, and what the results are.
Don't bother mentioning Math.max() here.
The "other ideas" to try out are good, though I expect the students will need help.
Consider moving the draw*() function declarations to reside above where they are called. I think the program is a little easier to understand this way.
The comments for each function are all well and good, but reading linearly through the program doesn't give a strong sense of which functions are "more important" than others. Consider adding an overview either to the comments, or to the Explanation of the first section.
In general, this whole page rocks.