4 ms·
Ask HN: Fun ways to learn Javascript for a 12 year old beginner?
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.
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!!
- karanbhangui 16y agoHow's this? http://eloquentjavascript.net/ 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 16y agoOn 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.
- chriseidhof 16y agoYou 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 16y agoThanks 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/ http://hackety-hack.com/
- mattgratt 16y agofor how to make games w/ python, invent with python (http://inventwithpython.com/ http://inventwithpython.com/) is pretty cool and free
- Twisol 16y agoI 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/ http://billmill.org/static/canvastutorial/
- javert 16y agoUnless 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?
- tkahn6 16y agoYou 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 http://www.w3schools.com/js/default.asp is probably the best site. It's where I learned.
- jey 16y agoI really sympathize with your points, but I feel like line-based text entry based programming is not something today's kids can relate to at all. For them web programming is much more relatable and accessible. Their "hello world" is in HTML, and their first programs should be in JavaScript. You don't want the kid to face the horrors of the browser DOM APIs directly, so using jQuery or the like makes a lot of sense. But overall this will hold the kid's interest a lot more than text line-input based programming, since she's probably never seen a text-based program before and can't relate to it at all. That said, if the OP's neice is willing to "put up with" text-based programming, Python is a great environment.
- axod 16y ago>> "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
- postfuturist 16y agoTo 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.
- grandalf 16y agoI 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
- checker659 16y agoI think you should introduce her to Raphaeljs (http://www.raphaeljs.com 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/ 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.
- Zev 16y agoCheck out Alice (http://www.alice.org http://www.alice.org) or Kodu (http://research.microsoft.com/en-us/projects/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.
- todayiamme 16y agoThis 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 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 16y agoI'm planning on getting her that if it seems like a lasting interest and not just a passing one :)
- todayiamme 16y agoBy 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)
- preet7 16y agoMit Scratch is amazing. The related google app creator for android should also be huge.
- newgame 16y agoI 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/ 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 16y agoDo you know of anything "wow" inducing in Scheme?
- newgame 16y agoWell, 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)
- bryansum 16y agoIsn't Scratch (http://scratch.mit.edu/ http://scratch.mit.edu/) made exactly for this scenario? I used it with PicoCrickets (http://www.picocricket.com/ 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.
- pdelgallego 16y agoI 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.
- paolomaffei 16y agoi'd start with PHP rather then JS since she already knows html
- bartl 16y agoFirebug is a good interactive console to play with Javascript inside the browser.
- Kilimanjaro 16y agoHere http://www.w3schools.com/js/js_intro.asp http://www.w3schools.com/js/js_intro.asp Tell her also to learn css to complete the trinity.