Ask HN: Fun ways to learn Javascript for a 12 year old beginner?
I'm looking for fun tutorials/frameworks/etc. to show her, so that she can build cool stuff and get the hang of coding.
I'd like to introduce her to processing.js, but I can't find tutorials (their learning section just seems to have demos sans explanation or how-to).
Once she gets a bit more comfortable I'd like to introduce her to a bit of game stuff (maybe via LOVE or PyGame) and then some other coding so she can do simple web programming (node.js? PHP? Python?).
So, any recommendations on any of the above? What do I start with and where do I go from here?
PS. I find Squeak a HORRIBLE environment and really quite unintuitive, so that's probably out -- unless you've got some compelling tutorial/package that makes it otherwise.
Thanks so much!!
38 comments
[ 4.7 ms ] story [ 97.3 ms ] threadMight be a bit too cut and dry for a 12 year old, but it's got some nice interactive parts to it.
We're gearing up for a 1.0 on August 19, here's the site, for more info: http://hackety-hack.com/
One thing you could do is whip up a sandbox page, like what w3schools does with its examples. Basically, create a page with three primary elements: a text box containing the Javascript, an Update button, and a section containing the actual content being messed with. You could come up with multiple "tutorials" or "activities" using this concept, and the Canvas tutorial below [1] is a neat example.
[1] http://billmill.org/static/canvastutorial/
Just kidding :)
If your intent is to have her get the hang of programming, javascript probably isn't the best language. There's a lot of overhead involved in running a simple program such as
As I'm sure you know, javascript is used to manipulate the DOM and process data entered by the user in forms. Any sane person will tell you to just use jQuery -- plain javascript requires a lot of boiler-plate non-business-logic code to replicate the above example. At that point you're just learning jQuery, which is useful knowledge, but very domain specific.I started with BASIC but obviously today I would recommend Python. Python has a REPL like javascript with Chrome or Firefox with Firebug, but unlike javascript you can easily write up some code and run it in the command line. A really important benefit of Python is that the interpreter will give you good debugging information (not properly indented, variable not initialized) whereas IMO javascript doesn't have such great error messages.
That said, if you still wish to have her learn javascript, http://www.w3schools.com/js/default.asp is probably the best site. It's where I learned.
That said, if the OP's neice is willing to "put up with" text-based programming, Python is a great environment.
BS. Also I'd suggest a book is far better than anything like w3schools. There's a ton of good js books which go through examples and tutorials. "Javascript the definitive guide" is extremely good.
First step though is to get used to the js console within browsers, and play around. For example, load up google, open the js console, and start messing...
document.body.style.background="green";
etc
A w3schools-style editable example would be a lot better, especially because you can integrate explanations and guidance into the page.
Maybe I'm just insane. But adding a pointless layer of abstraction to manipulating the DOM is.... pointless.
And I think you are insane :) I've never met a single developer (besides you apparently) who prefers the tedium of raw javascript DOM manipulation to jQuery's abstracted methodology.
I'll take
over the equivalent raw javascript any day of the week.That syntax you quote is not something I like, and isn't something that will run fast on browsers either.
$('<code>') is quite ugly. Any typos inside that string won't be caught. Also I don't find chaining to improve code readability.
Dealing with the DOM directly means you can optimize properly. For example, say you want to get an input elements value, in js you'd do:
theInputElement.value
Since you probably created or referenced the input element from js earlier and saved a ref to it...
Well, now you have.
We're just not as noisy as the jQuery guys. :-)
Another approach would be to code up a simple interactive python script and let her run it. It could be a number guessing game (she tries to guess a randomly generated number, it tells you if your guess is low or high and she has a certain number of tries). Or it could be a mad lib game (she enters a noun, verb, adjective, etc. and it spits back a funny story/sentence). It depends on the kind of kid she is. You could help her code up a version of her own and go from there.
Check out the Sammy framework:
Bonus: A perfect IDE for her would probably be jsFiddle (http://jsfiddle.net/). Including a library is as easy as selecting it from a combo-box (yes, Raphael is one of them). When she wants, and/or is ready, she can try jQuery/Mootools and others in the same place too.
Good luck!
PS: Squeak isn't exactly horrible but I must that its it's looks is a big turn off, especially for people used to the generally slick interfaces of popular apps these days.
It's an understatement that Lego Mindstorms changed my life. The best thing about it is that it teaches things in ways that I could easily grasp be it concepts of computing like decision trees or torque. Before I even knew what those words were I knew, somehow, what they meant. Torque meant that if I tried to make a prosthetic hand then I couldn't place a motor at the end of the forearm as it would kill the motor lifting it no matter how much I would gear it up. Why? Because it was like a door which I could push and it got easier to push the farther away I was from the hinge. Hence, it is easier for the weight to push the arm down at that end!
Moreover, you can teach her programming through languages for the NXT. There are derivatives of C/C++, ASM, Python, Java, Ruby, MATLAB, Ada and other projects lying around on the internet (see: http://en.wikipedia.org/wiki/Lego_Mindstorms_NXT#Programming).
I've tried to repeat this with all types of kids in my neighborhood and it works. Even for the most impatient kids it is a hook that gets them interested in how the world works. It's just magic.
[edit: I made some horrible dyslexic errors. Sorry about that. If there are any more left then please forgive me.]
Just be wary if she suddenly loses interest. It has more to do with teasing by peers and implicit models enforced by adults than her interests. If she does lose interest then just accept it and hug her while telling her that you'll love her no matter what. Also, spend an equal amount of time with her on stuff that she likes. No matter how far out of your domain it is. Kids really need role models like you and need to spend time with adults like you.
It's something so obvious but it makes a world of difference to a child.
Good luck.
P.S. - I would love to continue this conversation through email if you want. (yesthisisananonymousid gmail)
Although python (2.6) looks easy it has its ambiguities (for newcomers to programming); list.sort() <-> sorted(), default arguments issues, scoping issues, if a statement doesn't fit a line you have to enclose it in parantheses... the list goes on. Lua and especially Javascript aren't better either.
I can only say, although I had some experience in functional programming, that scheme was really an eye opening experience when I learned it in university. Plus, it made things clearer about things I did with Javascript/Python in the past.
DrScheme is a great environment for learning Scheme and programming in general and there is tons of learning material about scheme. Maybe that http://world.cs.brown.edu/ is something for your niece (I haven't read it).
Going from Scheme to Lua/Python/Javascript is then a small step and you have a saner picture about what happens in those languages.
Also going from Scheme to Lua won't be such a cultural shock. Just like the list is the primary data structure in Scheme the table is the primary data structure in Lua. And with Lua under her belt she can try LÖVE.
BTW, I think pygame is too low level. One can argue it is better for learning the concepts but I don't know. When I was younger I wanted to have results fast. In that respect I think LÖVE is better. And although I would not recommend Java for your niece there is a nice game framework called Pulpcore which let's you quickly get something done.
- The fact that the syntax is almost constantly of this form (function arguments) and that you can create sophisticated "blocks" out of a small set of language features
- Recursion is an essential part of the language it is fun to implement algorithms that way
- Great IDE (DrScheme)
It all boils down to that you have a simplistic, consistent, "small" language without ambiguities and a rapid feedback if you use DrScheme (because of the REPL, Debugger...).
If you hint at something graphics wise with "wow" I can tell you that our instructors showed us some games in scheme that other students created as assignments (we implemented minesweeper) and source code wise they were quite good. They, however, gave us their hombrew object oriented pack that we should use. And this is another "wow" in Scheme (and probably in any other LISP). You can build your own object system - something that would be impossible in for example Java... (albeit it is possible in lua through metatables and also in javascript and theoretically should be possible in Python, too. However the flexibility regarding the syntax is on scheme's side). Frankly, implementing an object system would be overkill for your niece but the fact that it is (relatively easy) possible is a "wow" IMHO.
If you install the DrScheme Environment you get a lot of example applications (Card Games...). So you can easily get something visual done in DrScheme.
* I have to note that I'm talking about Racket Scheme (formerly PLT Scheme)
Python on the other hand requires a lot of high-level CS to properly understand its inner workings.
And you can do fun stuff in any language.
DrScheme/DrRacket are very good environment, and allow many kind of programming styles.
Other Options.
== Scratch Scratch was created to allow kids to create applications, games, animations and interactive stories. It also was created to help teach math and computational lessons
Scratch is written on Squeak.
== Squeak. Squeak is an open-source implementation of Smalltalk, that includes many tools, Etoys, Croquet.
"Squeak: Learn Programming with Robots" it is a good book for kids.
== Alice. Alice has been used to create interactive games, animations and videos. The interactive environment allows you to directly manipulate and test the objects and programming statements.
The Alice programming environment was designed as a gentle introduction to object-oriented programming and allows beginners, programmers and non-programmers to learn the basics of automation, multimedia, and program logic.
Tell her also to learn css to complete the trinity.