Javascript
January 20, 2012 9:43 AM   Subscribe

What's a JavaScript Closure? Ever wonder about some of JavaScript's more advanced and esoteric features? Nathan Whitehead's interactive tutorial explains and walks through each of these concepts one step at a time. At the end of each lesson, you are encouraged to write short snippets of code demonstrating the concepts that you just learned, which are then automatically checked for errors and verified.

Perhaps you're new to JavaScript, or programming in general; CodeAcademy offers similar interactive tutorials that will teach you the basics, and hold your hand along the way. Perhaps you'd rather learn at a more even pace; CodeAcademy's CodeYear will introduce you to one new concept every week throughout 2012.

Want some more detail? Don't love the tutorial style? Marijn Haverbeke's online book, Eloquent JavaScript provides an introduction to the language that is both readable and thorough. Although readers are not quizzed at the end of each chapter, each code sample quoted in the book can be examined, edited, and run directly within your browser. The Mozilla Developer Network also provides its own JavaScript Guide, along with a more concise "Re"introduction to JavaScript. Mozilla's Javascript Reference also provides an encyclopedic reference of the language (previously).

Once you're moving along, and building websites with JavaScript, you'll probably want to learn JQuery. If you were paying attention to the JavaScript lessons, the official documentation should be all you need. If not, though, JQuery Fundamentals will walk you through the basics of both JavaScript and JQuery, one step at a time.

Once you've tackled JavaScript, learned closures, and mastered JQuery, it's time to move on to the really heavy stuff. JQuery author and JavaScript savant John Resig has 15 more tutorials that teach some of the language's most difficult and advanced concepts in the same interactive style as CodeAcademy and the Nathan's closure tutorial. Many of these advanced/quirky/confusing features of the language are also documented and explained in-depth at the JavaScript Garden. John also recently posted some thoughts tutorial-style learning, and the notion of teaching JavaScript as a first language.

Now that you know how to write code, you probably want to learn how to code well. Start by reading The Essentials of Writing High Quality JavaScript. Essential JavaScript Design Patterns For Beginners explains various styles and patterns often employed by JavaScript/JQuery developers, and the various advantages and/or drawbacks to each. The JavaScript Pattern Collections provides an even more thorough reference, albeit with less corresponding analysis [More here and here]. Idiomatic Javascript is a short (and mildly controversial) document that slaps you on the face, and explains how and why you should write readable code, while Captain Obvious on JavaScript explains some mistakes that you're probably making. Opera's Developers also have a nice roundup of methods that you can use to improve the performance of your JavaScript code (which you can test out yourself with JSPerf).

Once you've gotten comfortable with JavaScript and/or HTML5, your knowledge is already becoming outdated. Congratulations! Keep on top of the current developments by subscribing to (MeFi's Own™) JavaScript and HTML5 Weekly.

Would you rather start off at a lower level? Did you accidentally sleep through Comp Sci 101? Carl Herold's Higher Computing For Everyone introduces novices to C, and various low-level programming and Computer Science concepts such as binary numbers, pointers, and memory allocation.

Did you like Carl's book, but are you more of a visual learner? AcademicEarth has a compilation of recorded CS 101 lectures and syllabi from some of the top professors and universities in the US.

Want to go deeper? Full Computer Science curricula are available online from MIT, The University of Washington, Stanford, Harvard, and Berkeley

If C and Java aren't really your thing, but you still want a low-level primer, the Kahn Academy provides a fantastic introduction to CS and algorithms using Python.

Want to combine your newfound CS prowess with your ninja-like JavaScript abilities? Harvard Professor David J. Malan's online course, Building Dynamic Websites provides an excellent overview of the processes and technologies needed to build a modern, dynamic website.

Starting sometime this spring, through its MITx initiative, (previously) MIT will be offering several CS courses online, in a format and structure that more closely resembles a traditional university course. Starting next month, Berkeley will also be offering a series of free follow-along courses including CS 101, Machine Learning, Software as a Service, and others.

Are all of these languages too "Normal" and "Conventional?" How about Ruby? Though still incomplete, Bloc and TryRuby provide interactive Ruby lessons in the style of CodeAcademy. Ruby still a bit too normal for you? Learn Clojure with TryClojure.

Are you a DBA? Did you like those interactive JavaScript tutorials? Have you ever secretly wondered if SQL might not be the answer to all your problems? Mongoly provides an interactive tutorial-based intruduction to the alternative NoSQL database, MongoDB. Standing in the other corner of the NoSQL arena, CouchDB has fantastic documentation, and a free sandbox where you can experiment and learn.

Itching for more? TheNewBoston provides a vast number of video tutorials across a wide range of programming disciplines, as does the Google Code University,

Did I forget something? The nerds over at Reddit have compiled an enormous list of the best online learning resources out there. [Also, previously, previousier, previousliest]
posted by schmod (42 comments total) 303 users marked this as a favorite
 
Great post. Seriously, this post renders obselete about three askMe questions that I was getting around to asking.
posted by gauche at 9:57 AM on January 20, 2012 [2 favorites]


Excellent list of tutorials. I'd add that after learning the language, writing Javascript in Coffeescript becomes a real time-saver. At least it has been for me.

Also, I am thankful to Doug Crockford's Javascript: the Good Parts for opening my eyes to it as a serious language and explaining prototypes.

Also, for every language and library there's a freenode IRC channel with helpful, patient experts in it in addition to the usual channels.
posted by michaelh at 9:59 AM on January 20, 2012 [4 favorites]


This is a timely and informative post, thank you.

I'm learning Javascript in anger these days, after ignoring this major hole in my language portfolio for too long, and I must admit I'm hating it. After ten years of mostly Python and C++ this language feels like an utter mess - and even though better versions have existed for seven years, there is only one browser that actually seems to support them. Just a miserable experience. It's hardly surprising that people are choosing to generate Javascript from other languages rather than write it by hand.
posted by vanar sena at 9:59 AM on January 20, 2012


I just started Codecademy (no initial "a"), so thanks for all these!
posted by ChurchHatesTucker at 9:59 AM on January 20, 2012


I will absolutely be looking through a lot of these links, but first thing's first:

Does that CodeAcademy link look through your autocomplete entries for your name or is that just an unsettling coincidence?
posted by GooseOnTheLoose at 10:00 AM on January 20, 2012


Does that CodeAcademy link look through your autocomplete entries for your name or is that just an unsettling coincidence?

i got Ryan as well, er Ryan... so it's just a coincidence
posted by h0p3y at 10:02 AM on January 20, 2012


Wow.

Thanks for the post, I've been passing some of these links around on my work IRC.

Reading through the ones I haven't seen before, it's funny to me how each introduction to a language or, more generally, to programming concepts has an implicit perspective. I'm not saying 'bias', I don't mean to imply anything is wrong with it — actually it is more that now I begin to wonder, is it impossible to teach programming without teaching an implicit perspective on what programming is and what it means to do it well? Possibly there is no programming without such a perspective? That unlike some other disciplines or practices, which may be more clearly defined, programming is an exercise in perspective with no objective definition?

Sorry. Anyway I've been using JS as my primary language for a while now, having never thought I could make the jump from Python or strongly-typed languages, and I'm enjoying it. I like JS a lot, even though writing code in it feels like an exercise in self-denial. Thanks for the links!
posted by doteatop at 10:02 AM on January 20, 2012 [2 favorites]


GooseOnTheLoose: "Does that CodeAcademy link look through your autocomplete entries for your name or is that just an unsettling coincidence?"

Their chief developer is named Ryan Bubinski.
posted by schmod at 10:04 AM on January 20, 2012


doteatop: "writing code in it feels like an exercise in self-denial"

This is a good way to put it. I hope I can eventually take a philosophical view to the thing and start to enjoy it like you are.
posted by vanar sena at 10:07 AM on January 20, 2012


For the javascript haters, JavaScript Breaks Math uses a rather hyperbolic title to launch into a discussion about just what 'n = a.b(c)' means, and why it's quite unlike the situation in other languages.
posted by jepler at 10:09 AM on January 20, 2012


What's a JavaScript Closure?

Which reminds me, Guile1 compiles Javascript.

Also, a little Ruby and Javascript humor: Wat

1The GNU implementation of Scheme.
posted by DU at 10:16 AM on January 20, 2012 [8 favorites]


Yes, but do you get achievements?
posted by charred husk at 10:18 AM on January 20, 2012 [3 favorites]


Is there something like this for visual design / CSS ? As in "you already know enough javascript and programming to do really neat things, but they look terrible -- here's an online step-by-step course to learn how to make a website that people might actually want to use?"
posted by rouftop at 10:24 AM on January 20, 2012 [2 favorites]


I also somehow totally missed this one (but the MeFi related links picked it up), but:

Repl.it is an in-browser sandbox that supports a huge number of languages, including QBasic (why?), Forth, Ruby, Pyton, Lua, Scheme, JS, CoffeeScript, and others. [Previously]

CoffeeScript and other "compiled" web languages just feel.... wrong to me. I still haven't even found a templating language that doesn't feel like a complete kludge, especially since I often need to use two separate templates for my back and frontends (I know, I know, I should be using node, but bear with me here), and that any ones that offer substantive advantages also add a ton of heft to the code.

This super-minimalist JQuery templating implementation is one of the first ones I've seen that looks like I'd actually use it.
posted by schmod at 10:24 AM on January 20, 2012 [1 favorite]


Also, I am thankful to Doug Crockford's Javascript: the Good Parts for opening my eyes to it as a serious language and explaining prototypes.
... and for showing how you can do away with prototypes and use fully functional inheritance!
posted by rouftop at 10:26 AM on January 20, 2012


ChurchHatesTucker: "I just started Codecademy (no initial "a")"

Jesus. I wonder how many other things there are like this that I've been misspelling and mispronouncing for years.......
posted by schmod at 10:27 AM on January 20, 2012 [1 favorite]


This is great! Thanks so much schmod!
posted by Hypnotic Chick at 10:28 AM on January 20, 2012


I learned/coded some C, C++ and Pascal in high school, more C++, scheme and Java in college, and PHP and Ruby on my own

Ruby's currently my goto language of choice, but for people newly entering the world of CS - absolutely, Javascript is the wave you want to hop on. jQuery, node.js, ember.js, coffeescript, REST+JSON - understand these technologies and why people are migrating to them and technologies like them, and there's your meal ticket for the next 10 years

It'll be interesting to see if browsers adopt some sort of common language-agnostic bytecode/VM standard, but that's going to be a few years down the road to widespread adoption, at the least. Right now Javascript has a huge advantage on the web, and that advantage is spilling over into many other domains (e.g. v8/node)
posted by crayz at 10:30 AM on January 20, 2012


rouftop: "Is there something like this for visual design / CSS ?"

I've had some success with HTML5 Boilerplate and 960 Grid, though they're both fairly low-level and won't make design choices for you.
posted by vanar sena at 10:30 AM on January 20, 2012 [1 favorite]


Wow. Great post.
posted by designbot at 10:39 AM on January 20, 2012


If you want to use Computer Science to expand your mind, try the Little Schemer.
posted by mike_bling at 10:49 AM on January 20, 2012 [4 favorites]


I....I think I love you.
posted by Senor Cardgage at 10:58 AM on January 20, 2012


> Ruby's currently my goto language of choice

So you consider it harmful?
posted by eruonna at 11:06 AM on January 20, 2012 [8 favorites]


Codecademy is distinctly underwhelming at present. I did all 8 of their tutorials and was like...that's it? es, there is the quick start series (also only 8 sessions long) but I'm not a programmer in another language, so I'm not sure how much it applies to me.
posted by adamdschneider at 11:07 AM on January 20, 2012


Yeah, I have to say that it's pretty disappointing right now. There are some major bugs and it seems like the lessons have been put up without any user testing at all. There's assumed knowledge of concepts that a non-programmer wouldn't likely know anything about. It's a good idea but not very useful right now.
posted by The Lamplighter at 11:10 AM on January 20, 2012


Codecademy got my 10 year old interested in programming. Not in Javascript, though. He did a few of their tutorials and was like "I want to do some GRAPHICS!" Now he's on Scratch.
posted by DU at 11:22 AM on January 20, 2012


vanar sena: "I've had some success with HTML5 Boilerplate and 960 Grid, though they're both fairly low-level and won't make design choices for you."

Want someone to make design choices for you? Try Bootstrap. It's a really, really nice CSS framework that works and looks great out of the box.

At 40kb, it's kind of hefty, but provides TONS of incredibly useful styles.

Initially, I would have been opposed to such things. I generally don't like monolithic UI toolkits for their large size and general inflexibility (ahem JQuery UI), but I'm falling in love with Bootstrap. It's pretty nice to be able to build an app, and then worry about the nitty gritty styling bits.

Sadly, CSS is very much a trial-and-error kind of thing, and I've never really seen a good comprehensive guide to the language (although Mozilla's reference is very good; dochub is a better interface for browsing it). Once you understand the basics, and how selectors work, it's pretty incremental from there on out, and unfortunately, you need to deal with lots of browser quirks.

I have this cheat sheet taped to the wall behind my desk, and its tiny blurb on selectors really tells you 99% of what you need to know. Every tutorial I've seen on the subject is almost comedically verbose. (Oh, this one on selectors isn't too bad)

From there on out, it's mostly trial and error, and picking apart various tutorials and pretty things you find on the web. NetTuts isn't a bad place to start, and you definitely should be reading HTML5 Weekly.

From my folder of CSS bookmarks: posted by schmod at 11:23 AM on January 20, 2012 [32 favorites]


a big favorite on schmod's post. I recently styled my homegrown blog with bootstrap, and for the first time ever people said things like "it looks good". Of course, the content is still mind-numbing for almost everyone, but at least it doesn't look like something out of 1996 anymore.
posted by jepler at 11:27 AM on January 20, 2012


schmod, you're a hero.
posted by vanar sena at 11:28 AM on January 20, 2012


... and for showing how you can do away with prototypes and use fully functional inheritance!

That's true but it was at that point I understood what was happening in a lot of existing websites.
posted by michaelh at 11:32 AM on January 20, 2012


Thank you schmod.
posted by Sailormom at 11:53 AM on January 20, 2012


I've been doing some JavaScript (with dojo) for work, and I miss all my Java features. Especially strict typing!
posted by smackfu at 11:53 AM on January 20, 2012


This is perfect. Like others here, I've been on the Code Year/Codecademy and I have to agree, there's not much there just yet, and I say this as someone who has exactly one semester of C++. I need something to sink my teeth into, and it looks like this post provides it.
posted by lekvar at 12:01 PM on January 20, 2012


It'll be interesting to see if browsers adopt some sort of common language-agnostic bytecode/VM standard

Not with JS being as good as it is. Javascript *is* the new bytecode. Good Javascript engines mean that it's now possible to render 3D raytraced images in your browser, you can boot Linux or a gameboy in a JS virtual machine and they've got as far as Quake in terms of Id games converted to JS.

Atwood's law says that any application that can be written in JavaScript, will eventually be written in JavaScript. This is becoming more and apparently true.
posted by seanyboy at 12:17 PM on January 20, 2012


Do get any points for using Mojolicious's embedded perl templating to programmatically generate the included javascript code?

I didn't think so.
posted by mikelieman at 1:25 PM on January 20, 2012 [1 favorite]


Javascript *is* the new bytecode.

And just about as pretty, too.

Atwood's law says that any application that can be written in JavaScript, will eventually be written in JavaScript.

This only works if you include "compiled into JavaScript". People will still write javascript by hand from time to time, just as people used to write inline assembly code well into the '90s, but most people will spend their time working in nicer languages that simply compile down to the new bytecode.
posted by Mars Saxman at 2:24 PM on January 20, 2012


Starting next month, Berkeley will also be offering a series of free follow-along courses including CS 101, Machine Learning, Software as a Service, and others.

Those classes are actually offered by Stanford, not Berkeley. And they did a few last semester already, that you can still get into just by giving your email address and setting up a password. I don't know if the assignments get graded, however, for the classes that have already finished.
posted by marble at 5:42 PM on January 20, 2012


Thanks for this! I've been meaning to *actually* learn javascript for a while now.

I just gotta finish haskell and scheme and erlang first...
posted by wayland at 9:15 PM on January 20, 2012


Javascript is friggin' awesome... HTML5... all those buzzwords... that's just another term for "javascript." It's a little weird, certainly... but once you get a feel for javascript, the possibilities are remarkable. There's a whole ecosystem out there of little snippets you can use, but let me tell you this: if you haven't sent JSON objects to a frontend javascript renderer / basic template engine, man you've really missed out. It's such a pleasant, natural way to work.

Throw in some jquery custom events... rokken like dokken.
posted by ph00dz at 7:26 AM on January 21, 2012 [2 favorites]


Understanding JavaScript OOP
posted by Artw at 1:20 PM on January 21, 2012 [1 favorite]


So my Dilettante's Review of JS so far: The syntactical verbosity of Java, the semantics quirkiness of Perl, the runtime safety of Python and the standardization of late-90s C++. I feel old.
posted by vanar sena at 7:26 AM on January 22, 2012 [4 favorites]


Since I mentioned it upthread, I should mention that Bootstrap (Twitter's open-source CSS framework) has been significantly updated, and is beginning to resemble a lightweight UI toolkit.

Although I continue to have reservations about monolithic UI toolkits, Bootstrap's light weight and new customization features definitely make it stand out as a toolkit-done-right. It's easy to learn, the documentation is great, it makes site/app prototyping a *far* less laborious process, and doesn't make too many design decisions for you. The base styles imposed by the framework are elegant and fairly conservative, and the optional JavaScript bits have been rewritten with JQuery.

Highly recommended. Bootstrap feels like what JQuery UI should have been.
posted by schmod at 7:25 AM on February 1, 2012 [1 favorite]


« Older Freud: the last great Enlightenment thinker   |   Ugandan Little League woes and a win: “If we can... Newer »


This thread has been archived and is closed to new comments



Tags

Share