
Ask HN: Fun ways to learn Javascript for a 12 year old beginner? - haliax
My 12 y/o niece started off playing with HTML a while ago, and then worked her way up to a bit of rudimentary copy+paste+tinker Javascript coding.<p>I'm looking for fun tutorials/frameworks/etc. to show her, so that she can build cool stuff and get the hang of coding.<p>I'd like to introduce her to processing.js, but I can't find <i>tutorials</i> (their learning section just seems to have demos sans explanation or how-to).<p>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?).<p>So, any recommendations on any of the above? What do I start with and where do I go from here?<p>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.<p>Thanks so much!!
======
todayiamme
This is off tangent, but I fell in love with computing through Lego
Mindstorms. It is the most amazing gift you can give to a child. Just imagine
how it feels to be 12 and to put these blocks together and then you see them
move! After that you can teach it to do stuff! I can make whatever I want!

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.]

~~~
haliax
I'm planning on getting her that if it seems like a lasting interest and not
just a passing one :)

~~~
todayiamme
By the way, what is her environment like?

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)

------
checker659
I think you should introduce her to Raphaeljs (<http://www.raphaeljs.com>) and
let her explore javascript by making things that she can see and interact with
and show off to her friends.

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.

~~~
haliax
PERFECT! Thanks so much for the link to Raphael!

------
newgame
I don't know about your niece, but if I'd be 12 again I think Scheme would
have been ideal because the syntax is actually very easy and the language is
very explicit (that's important for someone without programming experience).
She, of course, does not need to learn about continuations, macros etc. only
the basics.

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.

~~~
haliax
Do you know of anything "wow" inducing in Scheme?

~~~
newgame
Well, that is highly subjective of course but I give you some examples:

\- 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)

------
postfuturist
To counter what some folks are saying here. JavaScript is a fine introductory
programming language. I highly suggest getting the latest version of Node.js
which comes with a REPL. Other than that, Python comes with an interactive
shell that's available on all platforms. It's definitely a good learner
language.

------
chriseidhof
You could also start with Hackety Hack, a platform developed by Why The Lucky
Stiff to teach kids programming. It builds on top of Ruby, but comes with a
very cool development environment.

~~~
steveklabnik
Thanks for the shout out! (I'm now the maintainer.)

We're gearing up for a 1.0 on August 19, here's the site, for more info:
<http://hackety-hack.com/>

------
karanbhangui
How's this? <http://eloquentjavascript.net/>

Might be a bit too cut and dry for a 12 year old, but it's got some nice
interactive parts to it.

~~~
luminarious
On the contrary, I feel it's as close to Why's Poignant Guide any Javascript
tutorial has got so far. It reads well and the interactive console is really
helpful. I'm 2x12 old, admittedly, but for me this was a really good way to
learn JS better.

------
pdelgallego
I will go with Scheme. Is a easy small language, is easy to manipulate, and
teach very valuable lessons like recursion, high order functions, etc ...

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.

------
Twisol
I don't know of any good Javascript learning platforms off the top of my head,
but I think you'll want to aim for some form of immediate gratification.

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/>

------
bryansum
Isn't Scratch (<http://scratch.mit.edu/>) made exactly for this scenario? I
used it with PicoCrickets (<http://www.picocricket.com/>), which is tiny
programmable brick like LEGO Mindstorms. I find GUI-based programming a lot
easier to use when starting; otherwise you're trying to not only learn how to
write a program but you're dealing with learning an IDE / text editor, running
programs, etc.

------
Zev
Check out Alice (<http://www.alice.org>) or Kodu
(<http://research.microsoft.com/en-us/projects/kodu/>). They're both very
visually-oriented languages; great to teach the basics of coding, without
having to introduce someone to technical terms right off the bat.

------
javert
Unless she's really into web stuff for some reason, I'd steer clear of
JavaScript. I never had much fun hacking on JavaScript, personally, and I find
it to be a somewhat harsh mistress. Python is a nice, clean, fun language; you
already mentioned PyGame, so why not just go straight to Python?

------
mattgratt
for how to make games w/ python, invent with python
(<http://inventwithpython.com/>) is pretty cool and free

------
Kilimanjaro
Here <http://www.w3schools.com/js/js_intro.asp>

Tell her also to learn css to complete the trinity.

------
grandalf
I think javascript is a good language to start with b/c she can make fun web
pages.

Check out the Sammy framework:

    
    
       http://github.com/quirkey/sammy

------
preet7
Mit Scratch is amazing. The related google app creator for android should also
be huge.

------
bartl
Firebug is a good interactive console to play with Javascript inside the
browser.

------
paolomaffei
i'd start with PHP rather then JS since she already knows html

------
tkahn6
You should start with Haskell and teach her monads.

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

    
    
        Enter your name: 
        > Alice
        Hi, Alice!
        Enter your age:
         > 20 
        Alice, your age minus 10 is 10!
    

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.

~~~
axod
>> "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"

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

~~~
tkahn6
What exactly are you calling BS on?

~~~
axod
The line I quoted.

Maybe I'm just insane. But adding a pointless layer of abstraction to
manipulating the DOM is.... pointless.

~~~
tkahn6
The second part of that line was referring to javascript in general as
compared to other languages.

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

    
    
        var i = $('.someclass:first').next().val()
    

over the equivalent raw javascript any day of the week.

~~~
axod
There's a lot of us about ;)

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...

~~~
tkahn6
If it works for you, more power to you. :)

