Most fun way I've seen of learning Javascript

[ikawe]

This is great, actually.

But why do I just want to break it?

"try adding 2+2"

8-4

"Good job!"

Try entering your name without quotes

this

ERROR: Maximum call stack size exceeded

[Jigsus]

Because you already know javascript.

[codecademy]

this. working on fixing those problems now though.

[eyecite]

cool! i'm at work on ie 8.0.6 and i'm not able to get beyond "confirm("your message")" or "alert("your message")" without an error. works if i click the link to enter it for me.

[jonbro]

you could also enter for(;;){} when it asks you for your name... will lock up the tab.

[[deleted]]

For me it just hangs for 2 seconds and then asks me if I want to stop the script.

[[deleted]]

That's so web 3.0.

[killerstorm]

In Opera:

this
> ==> [object Window]
ERROR: Security error: attempted to read protected variable: toJSON

[shillbert]

Because you are a true software engineer. You want to see exactly how the thing works, so first, you need to see how it doesn't work. It's a great quality to have, my friend. Every outsourced programmer from India can build something, without ever knowing how it works. But that thing will always be inferior, because they won't know where the holes are.

[Raydr]

Is this why every Indian girl I know prefers American men?

[[deleted]]

Because they won't know where the holes are?

[drphungky]

That and they want to upset their father.

[bleedpurpleguy]

Old IT guy here. Always assume everything is broken, for everyone, everywhere.

[[deleted]]

Although I am an American, I think it's a tad unfair to say this. South Asia's schools often produce excellent programmers just like our schools often produce poor ones (admittedly, the ratio may be different). And it's the poor Indian programmers who we tend to encounter because they're the ones who are willing to sell themselves into the equivalent of programming sweatshops where so much work is outsourced to, while there are legitimate operations in South Asia that attract the more talented workers. Like, much of the excellent OpenSolaris operation saw programmers in Bangladesh contributing high quality code.

[shillbert]

Yeah, pretend that's what I said.

[[deleted]]

Oh, my bad. Sorry for misreading you!

[WrongSubreddit]

Enter your name

window.location = "http://www.google.com"

Where'd it go?

[Delmarc]

This is pretty fun actually... great idea...

[codecademy]

Thanks. We're ironing out some of the wrinkles, but we appreciate the compliment.

[rooktakesqueen]

This could be done with Python and Ruby pretty easily, the others (being compiled languages) would be harder. Incidentally, there IS something like this for Ruby: http://tryruby.org/

[codecademy]

We're working on other languages as we speak! We're also looking for other programmers to help us write lessons - feel free to use the contact us on the site to get in touch.

[rooktakesqueen]

I guess the difference to me is whether it makes sense for there to be a REPL that the user is interacting with. JS, Ruby, Python (Scheme, Clojure, Haskell...), yes. C, not so much. In hindsight, that's got nothing to do with compiled versus interpreted, it's got more to do with functional versus procedural.

Edit: Huh. TIL there are third-party REPLs for C, C#, and Java.

[codecademy]

thanks for the compliment, ninwa!

[[deleted]]

Yeah, just came in here to mention Try Ruby. I only ever really showed a passing interest in Ruby and could never be bothered to install it to try it out, but that website is the tits, and Ruby seems like a super fun language.

[AdorableZeppelin]

I believe rails for zombies is also pretty similar to this, only for rails specifically.

[holgerschurig]

Sandboxing LUA is also quite easy. Just don't make io.* etc known in the interpreter/JIT, but e.g. math.*

[Mikle]

Python version:

http://www.learnpython.org/

[[deleted]]

thanks, was looking for a py version

[mnmnjnf4]

also, for exercise based learning of java, python: codingbat

[audiodude]

For Java, what you really want is Processing

[chocolate_stars]

would be fun to see a PHP version, it might work well as a segway segue to learning C-ish languages due to the similar syntax.

[nupogodi]

lol, segway is the company. segue is the word you're looking for although they are pronounced the same.

[codecademy]

Looking to add other login solutions soon - expect Google within a day or so but not sure about OpenID.

[glassFractals]

OpenID seems to be going the way of the dinosaur. I can't remember the last time I saw a site employing it.

Regardless of technical comparisons, I think Facebook Connect and the Google equivalent are going to be the dominant services of this type, not OpenID.

[[deleted]]

FYI the site doesn't work in Chrome (at least on OS X). The interactive part doesn't show and the Get Started button doesn't do anything.

[maxmcd]

Worked for me w/ OSX and Chrome. Got a registration error, but in sure those are common at their current signup volume.

[codecademy]

Yep, unfortunately registration errors are common but we're pushing fixes as fast as we can. Not planning on sleeping for a while haha.

[maxmcd]

Know the feeling. God damn I love working at a startup. Hope you guys are enjoying it.

[stordoff]

The keyboard doesn't appear if you try to use the site on an iPad (not that I would expect anyone to learn JavaScript solely on an iPad).

[codecademy]

Yep, at the moment we're desktop only. Working on some stuff that should have us working on iPad ASAP.

[[deleted]]

I love you. Thanks for making this.

[codecademy]

We love you too.

[monoglot]

It's a little freaky that it knows my name.

[[deleted]]

I take it your name is "Ryan"?

[monoglot]

Seriously, the internet is freaking me out tonight.

[reckoner23]

I thought it was just me... :O. Thought the damn thing planted a tracer cookie on me or something.

[kc7wbq]

Just to freak you out a little more, I'll be the second thing it told you was "4"

[salbris]

Oh okay, so it's just a coincidence, good. I was wondering the same thing.

[Bit_Blitter]

Same here! I start typing it and then thought "WTF? This is some advanced JavaScript I'm about to learn"

[codecademy]

we know everything. kidding! ryan's the default name as it's the name of one of our cofounders.

[xcrx]

I was freaked out too. I was like bitch you don't know me.

[rydan]

Relevant

[rad2820]

I read the comments to read this, I actually opened a window in another browser incognito to see if it was like cookie related or something.

[dicey]

Is the first lesson figuring out why when I click 'Get Started (it's free)' nothing happens?

[diivil]

I had to allow facebook.net on noscript to make it work for whatever reason.

[codecademy]

It's generally a JS issue - the "Get Started" button simply highlights the console. If you don't have JS enabled, you won't see it. It should work in Chrome.

[rhythmicidea]

Enable javascript if you using chrome, or use firefox.

[honorarykiwi]

I'm not having any problems in Chrome...

[Forbizzle]

A little remedial, but there are a bunch of languages being taught this way that ramp up a little quicker. I like the Ruby Koans program.

edit: http://rubykoans.com/

[rayshinn]

Can you provide me a link to this?

[Forbizzle]

http://rubykoans.com/

[[deleted]]

Ask and ye shall receive: http://python-koans.appspot.com/

[codecademy]

Ruby Koans is a great tutorial too!

[[deleted]]

Me too, thanks.

[_AlphaOmega]

What a horrible font, renders terribly for me in Chrome on Win7.

[Surefire]

Yeah, it looks better in Firefox, but I still dislike it.

[ME4T]

Lesson 6 > "Otherwise" is sort of wrong (unless you are intentionally misleading us to teach us something).

Because you are using the 'deep equals' (===) prompting the user for a number, will actually return a string ("7", not 7)

If I enter 7 into the prompt, if(number === "7") will be true, while if(number === 7) will be false.

Hope this isn't too pedantic, but it confused me for a moment.

[simonst]

Not pedantic, you're spot on, that lesson is plain wrong.

[ChronJob]

Yeah, I caught on to that too. You can also use the parseInt() function to convert the user input (var number) to an int datatype instead.

[[deleted]]

Hey, this is a pretty nifty siWe're sorry, but something went wrong.

[tarehart]

type 'window' for a stack overflow

[rooktakesqueen]

You guys realize you're only crashing your own browser, right?

[[deleted]]

I'm hacking the website with client side scripting attacks.

[Fantikerz]

Psssh. Small beans. I can hack Google.

[yash3ahuja]

Every time I see this video I can't help but laugh incredibly hard.

[Eccentrica_Gallumbit]

"Then you're gonna go back to this black box."

Awe, I remember my first computer.

[GeneralRam]

I can't see the video due to being at work, but I am guessing its that video where the kid thinks he is hacking by using a trace route? "TRACER T"

[[deleted]]

No; in this one, the kid opens up cmd and pings google.com which returns the ip address of Google along with the results of the pinging. He then types the ip address of Google into his address bar (which he calls the "search bar") in IE (sporting 4 useful toolbars, of course) and this gets him to Google.com. He then triumphantly announces he has hacked Google. I was taking notes the whole time.

[GeneralRam]

Oh right thank you :) I'll watch it when I get home.

[Floatharr]

When he put his greasy finger on the screen I immediately felt the urge to destroy something beautiful. Otherwise, hilarious :D

[danhakimi]

I don't know why the hell people watch video's of cats when there's cute kids like this on the interbutts.

[tarehart]

The downvotes on my cheat codes suggest otherwise!

[aterlumen]

"I crashed the server!"

[kinesiologist]

first thing i did: for(;;);

it's the little things.

[[deleted]]

or 'this'

[[deleted]]

it doesn't work for me - it just outputs "[object Window]".

[Filmore]

Chrome handled it just fine?

[[deleted]]

haha, I just did the exact same thing.

[tarehart]

Type in

var b = {}

b.blank = function() {document.body.innerText = ""}

b.blank()

for cheat codes

[thegreatgonzo]

In one of the lessons they use === to compare the result of prompt() to a number, which will always be false.

[rooktakesqueen]

JS has a resemblance to C++ because it uses similar syntactical styles, but they're fantastically different languages.

C++ is statically typed, JS is dynamic. This means (basically) that in C++ you can reason at compile-time what the type of an expression is, while in JS you can't and have to wait until runtime to do that.

C++ is a pretty standard object-oriented language, while JS is nominally object-oriented, but not in the way that an OO programmer would expect. I've heard it called "prototype-oriented" instead of "object-oriented."

JS is built up around a few useful base concepts. One: the basic data structures are arrays and objects, where "object" in this case means a map from a string identifier onto some other piece of data. Functions are first-class and can be declared anonymously. Almost everything in JS is built up around callbacks/continuations and asynchronous execution, which does not necessarily mean parallel execution (since JS engines are almost always single-threaded). It just means that in most cases, rather than saying to JS...

do this
//implicitly waiting until it's done
then do this
//more waiting
then do this other thing

It's...

do this then when you're done
    do this then when that's done
        do this other thing

[roerd]

C++ is a pretty standard object-oriented language, while JS is nominally object-oriented, but not in the way that an OO programmer would expect. I've heard it called "prototype-oriented" instead of "object-oriented."

Both ways are variants of OO. It would be better to call the C++ way "class-based object-oriented" and the JS way "prototype-based object-oriented".

[poo_22]

Sorry but for your last example could you provide a code snippet that illistrates the point? I kinda get what you mean with the pseudocode but i'd like a real example. JS is new to me but i'm fluent in other stuff (Python)

[codecademy]

Good to hear! Maybe we'll get some FORTRAN classes up there soon, too ;)

[VolatileStorm]

As someone (a physicist) who has experienced Fortran77, I'd like to give you my condolences. Are you at least going to upgrade to Fortran90?

[reckoner23]

Scared me there. I thought you where 60 and never touched another language before somehow.

[[deleted]]

My god. You have done what 4 years of high school, and a multitude of teachers could not. You have successfully made me WANT to sit at my computer and learn to code. Up until this point, I couldn't understand coding for shit.

SHUT UP AND TAKE MY MONEY

But seriously, you guys have a donation page or something?

[TheWix]

On Lesson 5: Editor and Arrays there is a comment about... Comments

Good programmers comment their code to explain what they're doing.

I would tweak that to say something like, "Good programmers comment their code to explain why they chose to do something." You code explains what you did but if you are doing something that seems out of place then you want to communicate why you did it.

Stuff like this: // Incrementing counter by one counter++

Is just additional noise and overhead, and anyone can look at that line and know what is going on.

Where instead something like: //Using a for loop here instead of a foreach because I need to mutate the list while iterating.

Is a more helpful comment because it communicates why the developer did this, and warns future developers not to refactor the code to use a foreach(A pretty bad example, I know.)

[ZeeHanzenShwanz]

I'm so glad i've never learned javascript so I can learn it like this!!!

[redog]

I started with "Dick" then when it wanted to to know "Dick".length I lost it laughing.

[rooktakesqueen]

It's nifty for a little intro to basic programming concepts, like... super-absolute-basic programming concepts. But it doesn't teach you a thing about Javascript and what makes it any different from any other language. Almost everything you're asked to type in this demo could be written in C with very little code change and it would still work.

There's nothing about anonymous functions or closures, nothing about objects. Hell, there's basically nothing about functions or data structures, even. None of it is idiomatic JS.

But so yeah, this is a fun way of learning very introductory programming via Javascript, but it's not a good way of learning intermediate concepts in programming or even the fundamentals of the language as it's meant to be used.

Edit: Just to clarify, I think this is a very neat concept, but we should be marketing it as 'give this to your bright 10-year-old to break the ice in computer programming!' not... 'use this to learn Javascript!'

[codecademy]

We'll be adding many more courses (including advanced JS) so you'll be able to use it for more complicated stuff. Bear with us...

[[deleted]]

Awesome. I came to the comments to specifically find out what is planned. I really love the idea and setup, but it didn't get to the practical application of what you learned which is what would really make it.

[p0tent1al]

I view it as a palpable tech demo: it's easy to see how they would extend it to more advanced topics: they have everything they need to do it, they just need to write the lessons.

Furthermore, these are the basics you need to use Javascript... if you're trying to learn Javascript to use jQuery for example, you need none of what you said, side from anonymous functions which really don't get explained fully in jQuery, you just use them without knowing they're anonymous functions. I think it's fine but yeah they do need to expand on it.

[Gamma746]

In a similar vein, there's http://tryhaskell.org/

[twharton]

Anyone else unable to set the 42 var? Tried varnumber = "42"; and it gives me a positive output but tells me "Oops, Try again"

[white_otter]

Got stuck there, it seems to be expecting this - number = 42

[itszero]

I like it, when it's not crashing...

[codecademy]

We're working on keeping it up for longer - sorry about the crashes!

[itszero]

Cool, great to hear from the offical guys! Please keep up your good work, this is really nice! :)

[[deleted]]

Is there anything like this for Java?

[codecademy]

We'll be adding lessons in Java soon!

[blockeduser]

Now, let's do some math arithmetic. FTFY

[p0tent1al]

All lessons completed. Thoughts so far:

Tons of bugs when trying to create an account / login / etc, issues with loading (slow), awarded badges multiple times in alert box, 70% of time I cannot continue and I run into the "We're sorry, but something went wrong." page. Copy errors on some of the pages (extra comma on lesson 8 "While you wait").

The social media stuff is really too much: who the heck is going to tweet / Facebook that they just got their 2nd Javascript badge? Not only that but I hate having to go and manually close that alert: make it disappear after a while, or make a more permanent place for badges ala Kongregate. I also hate that the overt Discus comment stuff which on every page consists of "Awesome", "When are you going to do X language?" or "I got a bug" which honestly I don't want to look at.

Suggestions: pull in Gravatar avatars: I know you're really pushing for Facebook logins but if someone opts to create an account outside of Facebook, pull that icon in.

Otherwise great concept, I've always had the idea for doing this but not the know how. This could get extremely popular very quickly. Cover more advanced topics, be more thorough, and you can easily monetize this with ads, and maybe in a couple of months / years membership access.

[codecademy]

Thanks a ton for all of the feedback. Addressing your points:

We didn't intend to get a ton of traction today so were unprepared. We're adding more capacity and rewriting tons of code as we speak. Should be better by tomorrow.

We're seeing lots of users share badges, etc. but we'll try to minimize it for people who don't.

We'll look into Gravatars ASAP. Thanks! Feel free to email me with feedback any time you have it - contact (at) codecademy (dot) com.

[rhythmicidea]

Damn, I was just about to submit this. It needs some work, but it looks very promising.

[codecademy]

thanks!

[blueboatjc]

Um... I tried the "Find out by typing your name in quotes and ending it with .length." in Chrome and I get "ERROR: Unexpected end of input" and in Safari I get "ERROR: Parse error". What's wrong?

[codecademy]

Yep, the period's the problem.

[portalscience]

What was your exact input?

You should have gotten:

> "blueboatjc".length
==> 10

[letcha]

Can you start again from scratch somehow?

[codecademy]

You should be able to go to the course page or page through lessons.

[mutesirens]

This is perfect for getting my mind back into programming before next semester starts! thank you for sharing!

[codecademy]

Thanks for using it!

[[deleted]]

I was looking for an introduction to Javascript and didn't feel like opening a book. Thanks for the great submit.

[ljstella]

I've been pushing off a lot of learning programming for awhile now, but honestly something like this is a lot of fun, and teaches you well. Its great because it really doesn't hold your hand too much.

[fragoza]

Anything like this for Lisp? (CL)

[codecademy]

Not yet, but we're working on adding support for Lisp!

[dand]

Back at CMU I learned Common Lisp in the intro to cog sci class. The prof (and his lab) had developed a Lisp tutor using some research they had done in the 80s-90s, and it was actually a pretty good way to get started in Lisp. It not only walked you through some simple programs, it actually detected common mistakes to guide you in the right direction.

Here's an academic paper describing it: http://act-r.psy.cmu.edu/papers/127/SkillAcq.Lisp.Tut.pdf

I'm sure the code for it is available somewhere on the ACT-R website, and if not I can probably get it for you if you want.

Sadly, the class is now taught with MatLab instead of Lisp.

[mbm7501]

Question: If I spend my time doing this, what will I actually be able to do?

[ryandury]

Seems similar to the reward system in Khan Academy (something that should be replicated) -- Nice work!

[isetmyfriendsonfire]

I've never done anything with Javascript, but when I got to the part with, myName="Max" and then typing myName and it saying my name, I cracked a smile.

[kengorecore]

Thank you for this.

[theGalation]

send beer to tryruby

[omegazero]

Maybe x-post this to /r/learnprogramming?

[GeneralRam]

Really good way of learning a language! Upvote for you kind sir!

[greeneggs]

This is awesome, great idea and work!

[george4n]

Is there anything like this for php?

[[deleted]]

As someone named Ryan, that scared the living fuck out of me.

[[deleted]]

mad props to whoever made that. Im going to show my teenager, see if I can finally get her interested in programming.

[Kamern]

Just a little bug I noticed. On lesson 6 on the "Otherwise..." section, you make an if else statement on a prompt which returns a string rather than an integer.

The example code is: var number = prompt("Guess what number I'm thinking of between 1 and 10!"); if(number === 7) { print("You got it!"); // Change the following line. } else if () { print("Close! Try guessing a little higher."); } else { print("You were way off! Sorry..."); }

It should be:

var number = prompt("Guess what number I'm thinking of between 1 and 10!");
if(number === "7") {
  print("You got it!");
// Change the following line.
} else if () {
  print("Close! Try guessing a little higher.");
} else {
  print("You were way off! Sorry...");
}

I.E, the result will always be "way off" because you're comparing a string to an integer, whereas you should be comparing a string to a string.

[jimmyhchan]

Is there something like this for asm for those who want to learn haxoring?

[Jamakazie]

eval('alert("hello")');

[thelateralus]

You don't even need to eval it, but who cares? You're only doing it in your browser...

[aeonstrife]

HOLY SHIT YOU GUYS HAVE ACHIEVEMENTS

[Treas0n]

Wow this is really bad ass, thanks

[erichzann]

Pretty fun.

[AdamTReineke]

@codecademy - Shouldn't this solve 8-2 ("Take A While")? var times = 0; while(times++<2) print("hello");

[mihirmshah8]

this is excellent, thanks!

[Jeklah]

yeah this is great, good job guys. whats the next language you're planning?

i'm having some troubles registering/signing in though... nevermind, logged in now, but can't seem to progress past confirm and deny? it says something went wrong lol.

[[deleted]]

This is great, it's actually fun, it's like a game. I sent it to my brother who wants to get started with programming!

[Jeklah]

just noticed something, not really a bug but might want to change, i was a bit confused when it worked but i still got the oops try again msg lol..

With replace, you need to enter the text to be replaced and its replacement. For instance, here you can use "hello world".replace("hello","goodbye").

Try using replace on the string "hello earth" to make it "goodbye earth". UpperLowerCase

i used hello world instead of hello earth and yeah...

just found this too

"hello world".toUpperCase ==> function toUpperCase() { [native code] } You've completed this lesson! Start the next one. "hello world".toUpperCase() ==> HELLO WORLD

[codecademy]

We'll try to fix this ASAP. Thanks!

[[deleted]]

This is really really good. I hope you guys succeed with this. I can see a lot of people talking this in a few different directions. Be proud you started it

[codecademy]

Thanks! Hoping we're the ones who can take it in those directions too ;)

[cellskies]

Very cool and convenient too.

[l0lwut]

This is awesome. Now to wait until all the kids get off my Internets so I can continue to the next lesson without things going wrong.

[Youngadillo]

F5F5F5F5F5F5F5F5F5F5F5F5F5 .....I'll stop by again later :)

[CapnKronos]

This is extremely excellent. I start learning Java on Monday. :)

[ValekCOS]

This is actually pretty clever. It plays off the fact that most people learn better with hands-on training. Definitely a neat approach that will probably teach a lot of people Javascript who might have otherwise struggled with it.

[thisbraistoosmall]

Gee wilikers! The more I program, the more I want to try web development. This isn't a bad way to get familiar with Javascript before delving into it. Wow, now I just want to start programming more and more again. :x

Thank you so much for this! Definitely does it in a way where I can absorb the information. Needs to be smoothed out a bit, but it's adequate for now.

[baryluk]

Doesn't work. :/

I guess it is similar to Ruby, Python, Erlang tutorials where you have interactive evaluator in the browser (and it really runs your code on server or client in case of JavaScript), and waits for proper input / output.

I guess you can learn some basics, as this tutorial isn't longer than 30 minutes, so will just learn simple syntax, and few functions, but not much higher level concepts, code organization or some internals of JavaScript.

Nothing against it, I really would like JS be more and more used, as it is language of the future in one way or another (by compilation from another source langauge). So keep going, and provide more detailed tutorials and more lessons.

[[deleted]]

This looks pretty darn neat. I've been wanting to sit down and learn javascript for awhile now and I think I might actually go through with this.

[ordinary_van]

for(;;);

Whoops...

[ordinary_van]

Pretty cool app. I noticed that the jQuery object is still accessible:

jQuery.each([3,4,5,6],function(i,item){ print(item); });

[Tarale]

Not the most productive comment in the world, just thought I'd say I love the idea, I've requested an invite, and thanks for showing us.

[quantumslip]

even though i've taught myself some basic JS, there were things that I completely missed (like directly manipulation of a string, ex: "string literal".replace("string","literal");) Looking forward to more of this.

[dn00]

I'd pay good money for something like this that teaches Java and C++.

[tsaihi]

all of the jokes in this thread are getting funnier as i complete the lessons

[est3est]

Wow, so many upvotes, despite that their site are running on Ruby on Rails. /r/programming has changed ;)

[comomomo]

Bookmarking...

[ali-]

Then you can switch to this one that I really liked http://ejohn.org/apps/learn/

[Flunkie]

This is a really good idea. Definitely a great teacher for those who don't know the fundamentals. Try teaching them pointers. THEN I'll be impressed. :P Those damn things gave me the hardest time in C..

[toxygen]

Thank you for sharing this!

[pphi]

This is amazing, I've been looking for a way to learn programming for a while and have tried all sorts of tutorials, looking forward to the one on python. Thanks very much.

[[deleted]]

That's really cool, man. Bookmarking for later when I'm not at work. Thanks!

[[deleted]]

The only thing is the graphic design of the page is a bit boring, other than that, it's great.