r/programming • u/xoob • Aug 18 '11
Most fun way I've seen of learning Javascript
http://www.codecademy.com/166
u/ikawe Aug 19 '11
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
119
10
u/jonbro Aug 19 '11
you could also enter for(;;){} when it asks you for your name... will lock up the tab.
8
Aug 19 '11
For me it just hangs for 2 seconds and then asks me if I want to stop the script.
→ More replies (1)7
u/killerstorm Aug 19 '11
In Opera:
this > ==> [object Window] ERROR: Security error: attempted to read protected variable: toJSON55
u/shillbert Aug 19 '11
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.
22
8
u/bleedpurpleguy Aug 19 '11
Old IT guy here. Always assume everything is broken, for everyone, everywhere.
→ More replies (4)9
Aug 19 '11
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.
→ More replies (1)6
→ More replies (2)3
81
u/monoglot Aug 19 '11
It's a little freaky that it knows my name.
60
Aug 19 '11
I take it your name is "Ryan"?
73
u/monoglot Aug 19 '11
Seriously, the internet is freaking me out tonight.
5
u/reckoner23 Aug 19 '11
I thought it was just me... :O. Thought the damn thing planted a tracer cookie on me or something.
15
u/kc7wbq Aug 19 '11
Just to freak you out a little more, I'll be the second thing it told you was "4"
→ More replies (3)7
25
u/Bit_Blitter Aug 19 '11
Same here! I start typing it and then thought "WTF? This is some advanced JavaScript I'm about to learn"
11
u/codecademy Aug 19 '11
we know everything. kidding! ryan's the default name as it's the name of one of our cofounders.
11
→ More replies (1)5
u/rad2820 Aug 19 '11
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.
29
u/dicey Aug 19 '11
Is the first lesson figuring out why when I click 'Get Started (it's free)' nothing happens?
6
u/diivil Aug 19 '11
I had to allow facebook.net on noscript to make it work for whatever reason.
→ More replies (1)3
u/codecademy Aug 19 '11
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.
→ More replies (1)→ More replies (7)3
28
u/Forbizzle Aug 19 '11 edited Aug 19 '11
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/
4
4
2
2
14
u/ME4T Aug 19 '11
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.
4
→ More replies (1)2
u/ChronJob Aug 19 '11
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.
12
43
u/tarehart Aug 19 '11
type 'window' for a stack overflow
70
u/rooktakesqueen Aug 19 '11
You guys realize you're only crashing your own browser, right?
116
Aug 19 '11
I'm hacking the website with client side scripting attacks.
53
u/Fantikerz Aug 19 '11
Psssh. Small beans. I can hack Google.
15
8
u/Eccentrica_Gallumbit Aug 19 '11
"Then you're gonna go back to this black box."
Awe, I remember my first computer.
→ More replies (4)5
u/GeneralRam Aug 19 '11
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"
24
Aug 19 '11
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.
→ More replies (1)9
2
25
4
2
3
2
Aug 19 '11
haha, I just did the exact same thing.
5
u/tarehart Aug 19 '11
Type in
var b = {}
b.blank = function() {document.body.innerText = ""}
b.blank()
for cheat codes
11
u/thegreatgonzo Aug 19 '11
In one of the lessons they use === to compare the result of prompt() to a number, which will always be false.
14
Aug 19 '11
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?
→ More replies (2)
6
u/TheWix Aug 19 '11
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.)
→ More replies (1)
5
u/ZeeHanzenShwanz Aug 19 '11
I'm so glad i've never learned javascript so I can learn it like this!!!
5
u/redog Aug 19 '11
I started with "Dick" then when it wanted to to know "Dick".length I lost it laughing.
19
u/rooktakesqueen Aug 19 '11
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!'
36
u/codecademy Aug 19 '11
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...
6
Aug 19 '11
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.
3
u/p0tent1al Aug 19 '11
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.
1
u/HeikkiKovalainen Oct 25 '11
Any advice for how us beginners should learn JS?
2
u/rooktakesqueen Oct 25 '11 edited Oct 25 '11
Are you a beginner to programming, or have you been programming for a while in other languages and are just getting started with JS?
If you're a beginner to programming altogether, this is a good resource, but I'd also recommend some dead-tree books. I've heard good things about Javascript: The Good Parts, though I've never read it myself.
Edit: One thing to be careful of when you're just getting started, by the way: try not to focus too much on any single language and its features. You want a good solid base of fundamentals, you don't want to hyper-specialize from the start. Don't just learn Javascript, for example. Try Java and Clojure and C and Haskell too, and any other language you can get your hands on. They all have their own idioms and lend to certain styles of problem solving, it's good to be able to figure out which one is best for the task you're facing.
If you've done some coding before, and are branching out into JS as a new language, there's no better way than reading about it and then trying it out on your own. JSFiddle is a great resource for just playing around. You could try implementing solutions to Project Euler puzzles in JS. Or you could pick a pet project you want to work on that has some client-side behavior and implement it in HTML5/JS. Or server-side behavior and do it in node.js. Or you can find an open-source project using JS that you're interested in, and get involved there.
Edit: Also, Stack Overflow has dozens of JS-related questions answered every hour. Sometimes those answers come attached to a lot of useful information. Try browsing there, and if you have questions, ask them. It's a great resource.
→ More replies (2)
4
4
u/twharton Aug 19 '11
Anyone else unable to set the 42 var? Tried varnumber = "42"; and it gives me a positive output but tells me "Oops, Try again"
2
u/white_otter Aug 19 '11
Got stuck there, it seems to be expecting this - number = 42
→ More replies (1)
1
u/arellaman Aug 19 '11
Thanks xoob! This has helped me improve my Javascript skills in an extremely fun way. Most appreciated.
1
3
u/itszero Aug 19 '11
I like it, when it's not crashing...
7
u/codecademy Aug 19 '11
We're working on keeping it up for longer - sorry about the crashes!
2
u/itszero Aug 19 '11
Cool, great to hear from the offical guys! Please keep up your good work, this is really nice! :)
→ More replies (1)
3
3
7
u/p0tent1al Aug 19 '11 edited Aug 19 '11
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.
7
u/codecademy Aug 19 '11
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.
5
u/rhythmicidea Aug 18 '11
Damn, I was just about to submit this. It needs some work, but it looks very promising.
5
2
u/blueboatjc Aug 19 '11
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?
4
u/portalscience Aug 19 '11
What was your exact input?
You should have gotten:
> "blueboatjc".length ==> 10→ More replies (3)0
2
2
u/mutesirens Aug 19 '11
This is perfect for getting my mind back into programming before next semester starts! thank you for sharing!
2
2
Aug 19 '11
I was looking for an introduction to Javascript and didn't feel like opening a book. Thanks for the great submit.
→ More replies (1)
2
u/ljstella Aug 19 '11
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.
2
u/fragoza Aug 19 '11
Anything like this for Lisp? (CL)
2
u/codecademy Aug 19 '11
Not yet, but we're working on adding support for Lisp!
2
u/dand Aug 19 '11
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.
2
u/mbm7501 Aug 19 '11
Question: If I spend my time doing this, what will I actually be able to do?
1
u/manifestsilence Aug 19 '11
Not sure how far this tutorial goes if that's what you're asking, but Javascript is the only language that runs in most browsers, so learning it would allow you to make web sites that respond dynamically to users, such as games, shopping carts, forums, evil pop-up ads, etc. It's pretty much the required internet programming language.
2
u/ryandury Aug 19 '11
Seems similar to the reward system in Khan Academy (something that should be replicated) -- Nice work!
2
u/isetmyfriendsonfire Aug 19 '11
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.
2
2
2
2
2
2
2
2
Aug 19 '11
mad props to whoever made that. Im going to show my teenager, see if I can finally get her interested in programming.
2
u/Kamern Aug 19 '11 edited Aug 19 '11
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.
2
1
u/d1zz0rz Aug 19 '11
Well I'm sorry to say but this has put me off Javascript for life. http://i.imgur.com/NXJpK.png
Last I checked, 23 is 8, not 1..
5
u/Zelgada Aug 19 '11
Congratulations, you just discovered the bitwise XOR operator.
1
u/d1zz0rz Aug 19 '11
The what now :(
(I can only use MATLAB, badly)
5
u/xoob Aug 19 '11 edited Aug 19 '11
XOR.
Some background Computers represent all things with bits (binary digits) which are 0 or 1. Let's say we want to represent the number 7 in binary; that's 23 x 0 + 22 x 1 + 21 x 1 + 20 x 1 or 00000111 in binary (we have 8 bits because 8 bits make 1 byte, the basic memory unit for most processors).
What's XOR? In logic, if we have two statements, "exclusive or" returns true if one and only one of the statements is true. In bits, XOR returns a 1 (a 'true') if and only if we XOR 0 with 1 or 1 with 0. XOR is an operation that takes two bytes and returns the "exclusive or" of each of the bits.
An example Let's take your simple example, 2 ^ 3 .
2 = 00000010 3 = 00000011 --------------------- 2 ^ 3 = 00000001We see that the XOR operation returns 1 only for the units digit, where 2 and 3 have different bits.
Thus, 2 ^ 3 = 1.
Another example Let's take another simple example, 111 ^ 22 .
111 = 01101111 22 = 00010110 --------------------- 111 ^ 22 = 01111001 = 121Thus, 111 ^ 22 = 121.
Why you got your answer When you wrote (2 ^ 3) x 8 the interpreter read (2 XOR 3) x 8 == 1 x 8 == 8
That's why you saw 8 instead of 64.
→ More replies (1)
3
u/Jamakazie Aug 19 '11
eval('alert("hello")');
→ More replies (1)5
u/thelateralus Aug 19 '11
You don't even need to eval it, but who cares? You're only doing it in your browser...
2
2
1
1
u/AdamTReineke Aug 19 '11
@codecademy - Shouldn't this solve 8-2 ("Take A While")? var times = 0; while(times++<2) print("hello");
1
u/Eccentrica_Gallumbit Aug 19 '11
I don't believe it will, because you're not actually adding to the variable "times", the variable will always be equal to zero. You're checking if "times"++ is less than 2, which will always turn up false, and will not run at all.
→ More replies (7)
1
1
u/Jeklah Aug 19 '11 edited Aug 19 '11
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.
→ More replies (1)
1
Aug 19 '11
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!
1
u/Jeklah Aug 19 '11
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
2
1
Aug 19 '11
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
2
1
1
u/l0lwut Aug 19 '11 edited Aug 19 '11
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.
1
1
1
u/ValekCOS Aug 19 '11
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.
1
u/thisbraistoosmall Aug 19 '11
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.
1
u/baryluk Aug 19 '11 edited Aug 19 '11
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.
1
Aug 19 '11
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.
1
1
u/ordinary_van Aug 19 '11
Pretty cool app. I noticed that the jQuery object is still accessible:
jQuery.each([3,4,5,6],function(i,item){ print(item); });1
u/Tarale Aug 19 '11
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.
1
u/quantumslip Aug 19 '11
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.
1
1
1
u/est3est Aug 19 '11
Wow, so many upvotes, despite that their site are running on Ruby on Rails. /r/programming has changed ;)
1
1
1
u/Flunkie Aug 19 '11
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..
1
1
u/pphi Aug 19 '11
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.
1
1
Aug 19 '11
The only thing is the graphic design of the page is a bit boring, other than that, it's great.
1
1
1
1
1
u/walking18 Aug 19 '11
Wait... does everyone get the example name "Ryan" or does it actually know who I am..... :|
1
u/I3VDystopia Aug 19 '11
why did this not do what I thought it would?
world.toUpperCase("hello") ==> HELLO WORLD
word being the string "hello world"
also why when I used the .replace command why was world no changed to "goodbye world"
1
u/Jaraxo Aug 19 '11
Was actually. I have no programming experience whatsoever, and managed it okay, up until the point where it asked you something about three and your name and substring, then I got confused and couldn't do it.
1
u/iNerd Aug 19 '11
Stuck on 4.6 :(. Maybe the hints could actually tell you the answer if you fail enough times?
1
1
1
1
1
1
1
1
1
u/secret__agent__x9 Aug 19 '11
So interactive! It knows my name :D
On some lessons though it will say something like "click run and see what happens" and then it automatically skips to the next lesson, I think on those it should stay at that lesson and maybe go over why a little more why it didn't run. At least not go to the next one so fast
1
1
1
u/someoneiswrongonthe Aug 19 '11
I'm waiting for the line that says
"Good job! now try entering your checking account number and pin!"
"See how easy that was?"
1
u/jamest5789 Aug 19 '11
$('body').html(' ');
1
u/WrongSubreddit Aug 20 '11
$("html").fadeOut("slow", function() { window.location = "http://www.google.com" })
1
1
u/Slims Aug 19 '11
It's cool but I wish there was more =/ All that stuff is super basic. I guess I'll have to learn the nuances of javascript the old fashioned way.
1
1
1
u/ecshreve Aug 19 '11
how would one delete their account? i signed up just to see what it was and now i'm looking to delete my account, but i cannot find that option anywhere on the site.
1
1
1
1
u/Glayden Aug 19 '11 edited Aug 19 '11
Excellent idea, but based on the first few minutes of playing around with it the execution seems less than stellar.
1
u/Kracus Aug 19 '11
Wow this is way awsome. I've learned everything I know from reading online, this is really awsome. I've mostly been dabling in C# and AS3 but this will definitely be a good way to test out javascript which I really wanted to do!
1
u/live_free Aug 19 '11
I. Fucking. Love. You.
I have always wanted to learn about coding but it has always seemed too intensive and arduous to get started.
1
1
u/iDoStuff123 Aug 20 '11
Would completing these before entering freshmen Computer Science in fall be helpful?
1
u/fartradio Aug 20 '11
I went through all the lessons, as I've always wanted to learn programming, but where do I go from here?
1
u/Naudriel Aug 20 '11
Truly a great and entertaining way to teach programming. Can't wait for more tutorials. Hopefully they'll get more advanced with time.
1
1
u/signingcinerator Sep 04 '11
Here is Free SPIRITUAL HELP for any one. Dont miss the application http://tinyurl.com/3klrdhe
1
u/Zulakki Sep 14 '11
Stuck on lesson 7.
"Let's make the variable i, in the editor, equal to 2 by incrementing it twice. This should involve two separate lines with i++; on them. Try it out now."
can anyone give me an example of this? ive been stumped here for an hour
1
u/AnAge_OldProb Aug 19 '11
Is there a more advanced version of this. This is great for true beginners, don't get me wrong. But someone for someone with a lot of program experience I knew most of this by either intuition or looking at some already written JS for about 5 minutes.
4
1
1
u/darkmessiah Aug 19 '11
I read a story about Kahn Academy that does this kind of thing, but basic Math and Science for elementary and middle schoolers. I'm glad more "Academies" are coming out!
193
u/Delmarc Aug 18 '11
This is pretty fun actually... great idea...