7 ms·

Learning Advanced JavaScript

257 points by Afton 17y ago

evdawg 17y ago
These are slides from a presentation I believe. Does anyone have the original audio or video? Nevertheless, they are fantastic. If anyone has links to similar presentations for other languages, I'd love to take a look.
- _ck_ 17y ago
  I found where it's from: Web 2.0 Expo in NYC (9/2008) - maybe someone has the audio? http://ejohn.org/blog/adv-javascript-and-processingjs/ http://ejohn.org/blog/adv-javascript-and-processingjs/ He also has it as a download: http://ejohn.org/files/learn.zip http://ejohn.org/files/learn.zip Definitely going to look at his books now... Oh his work here looks good too: http://jspro.org/code/ http://jspro.org/code/
_ck_ 17y ago
Not only is this a great read, it's easy on the eyes, excellent contrast and font size.
- FreeRadical 17y ago
  white or coloured font on a black background is never easy on the eyes
  - cubicle67 17y ago
    personal preference I guess. I like it, and so most of my dev environment is dark themed
  - cesare 17y ago
    Especially if you're astigmatic.
  - mcxx 17y ago
    Yellow on black is the most visible combination of colors.
    - wooby 17y ago
      Is this a preference? I've tried in the past to dig up research actually proving the "most visible combination" through experimentation. I've always assumed that road signs are the combination of colors they are because some empirical research proves it. Never found anything though.
  - fjabre 17y ago
    I disagree. I go blind looking at bright white backgrounds all day. It also happens to be an excellent tutorial regardless of colors used.. =)
Andi 17y ago
Java's Script - a new language?
- tlrobinson 17y ago
  Is that a joke? I really can't tell...
  - eob 17y ago
    It's the longhand version of Java. You have to feed it into OCR, but it generally works provided your handwriting isn't too messy.
taitems 17y ago
Weird. Every time I hit "run" it would flash something and then go back to the homepage. I turned on Firebug and broke on next command (once it got out of stupid jQuery interval) it seemed to work. Refreshing again and again and it seems to work, but now it's broken again. Firefox 3.5.3, Firebug 1.4.2
clemesha 17y ago
After reading the tutorial, I took pleasure in reading the source code of that page. A great tutorial and a very nice UI implementation with JavaScript - Resig is a js hacker indeed.
gizmo 17y ago
http://ejohn.org/apps/learn/#13 http://ejohn.org/apps/learn/#13 This is exactly the kind of thing that makes Javascript so disappointing. ninja is an object, that has a slot yell. yell refers to a function/closure. Samurai is a _new_ object, with a _new_ slot, that _independently_ refers to the same function that yell in ninja refers to. And yet, when ninja is deleted/collected the function yell disappears. This is insanity. In javascript function(n) { blah } should be a simple expression that creates a heap object, and heap objects should live until it becomes unreachable, at which point it may be collected. So unless _function_ is not an ordinary expression that creates a first class object, this cannot _possibly_ go wrong. And yet it does. Can anybody think of a justification for this absurd behavior?
- praptak 17y ago
  I believe you misunderstood the behaviour of the code. The ninja.yell function is a proper object, it does not disappear and samurai.yell refers to it all the time. What goes wrong is this: when it tries to call itself recurively by using ninja.yell, ninja already refers to null. That's when it fails. The moral of this slide is "If you want a function to call itself, better give it a name and refer to it by the name instead of relying on bindings that are outside the scope of the function." This has a followup in the next slide, where exactly this happens.
  - axod 17y ago
    >> "If you want a function to call itself..." Or just use the arguments.callee property which allows you to call the function from itself without worrying about names. edit: oops, just seen that's on a later slide.
    - tlrobinson 17y ago
      Except in ES5 strict mode :-/
      - gb 17y ago
        You can still do it, and without a Y combinator or anything like that too: var ninja = { yell: function () { var yellLocal = function(n) { return n > 0 ? yellLocal(n-1) + "a" : "hiy"; } return yellLocal; }() }
praptak 17y ago
#67 "Prototyped properties affect all objects of the same constructor, simultaneously, even if they already exist" This is only true for properties created as new properties on the existing prototype (Ninja.prototype.swingSword = ...). It is not true if you assign a new object to the prototype (Ninja.prototype = { 'swingSword' : ...}). The existing objects will only see new properties added to the object which was constructor's prototype at their creation time.
- calambrac 17y ago
  This is only true for properties created as new properties on the existing prototype Which is what #67 says. It is not true if you assign a new object to the prototype Which is a completely different thing.
  - praptak 17y ago
    "Which is what #67 says." Nope, it says exactly what I quoted ("prototyped properties"). It also provides an example that happens to be of the later kind (properties set on existing prototype.) "It is not true if you assign a new object to the prototype Which is a completely different thing." Completely different from everything that falls under "prototyped properties"? I disagree. All in all, my point is that if you don't know exactly how it works then there is a chance you might be misled by this #67. I am not arguing that it is "wrong".
    - calambrac 17y ago
      It says "all objects of the same constructor", which can be losslessly translated to "all objects with the same prototype that were created using JavaScript's retarded way of trying to look kind of like a class-based OO language when really it's not at all". If you change an object's prototype, that object is no longer "of the same constructor". "Ninja.prototype = { 'swingSword' : ...}" is, in fact, a completely different, far more dramatic action than "Ninja.prototype.swingSword = ..." You shouldn't at all have the expectation that the two are anything alike.
njharman 17y ago
Great (best I can remember but I have bad memory) machine assisted teaching. I could see many textbooks/subjects maths, physics, anything that fits the pattern "look at this" -> "what do you think will happen" -> "this! is what happens and why".
aw3c2 17y ago
A prime example of useless JavaScript. Why not simply use HTML for a simple website like this? I did not see any benefit from JavaScript on that page.
- mhansen 17y ago
  The examples are all interactive, and there are segments where you are invited to complete solutions, and the code is then eval'd and tested. I'm finding it a wonderfully interactive way to learn.
  - aw3c2 17y ago
    Ah, nevermind then. I only gave a quick look and what I saw was all text.
illumen 17y ago
This is a great big collection of surprising things you can do with javascript. I'm not so sure it's a good thing it's being released. These are probably idioms you want to avoid writing in code if possible. Learning how to read them is probably useful some times.
- lacker 17y ago
  A 'bind' function is very useful for callbacks. It's awkward to write object oriented javascript without it. So it's quite useful to understand how binding works.
jeresig 17y ago
I'm really glad that everyone is enjoying the tutorial! As mentioned below this is from a workshop that I gave at the Web 2.0 Expo in NYC. You can find more information about it here: http://ejohn.org/blog/adv-javascript-and-processingjs/ http://ejohn.org/blog/adv-javascript-and-processingjs/ Most of this tutorial is taken from my upcoming book 'Secrets of the JavaScript Ninja' which can be found here: http://jsninja.com/ http://jsninja.com/ I don't think this was explicitly stated on the slides but you can double click the code slides and you'll be able to edit and re-run them. I tossed this tutorial up after the talk and haven't really had a chance to improve upon it. Sort of related: Remy Sharp built http://jsbin.com/ http://jsbin.com/ which is based off of the construction of this tutorial (using the run-and-show style together with double-click-to-edit).
- Afton 17y ago
  So...If this was from a workshop, is there an audio track?
  - jeresig 17y ago
    Nope. In all honesty, it was one of the worst-targeted talks that I've ever given. I had given a similar talk at OSCON (highly technical crowd, audience) and was asked to give it again at Web 2.0 Expo. If you're not familiar with that conference it's highly not technical - lots of social media experts and managers. I was given a room that could've housed 300+ and there was maybe 20-30 attending - and that number rapidly decreased as I worked to explain the complicated aspects of JavaScript. In the audience were people who had, obviously, never coded JavaScript before (based upon the questions they were asking - this talk is not designed for that). By the end there was maybe a dozen people left and they came up and told me how much they enjoyed my talk and how informative it was - so at least it wasn't for naught. I know that the content is good and that I'm able to deliver it effectively but I won't be giving it again until I know that I'll have an audience that appreciates the content.
    - brown9-2 17y ago
      I was at this talk, and loved it, but you are definitely right about the audience of the conference. I was disappointed as I was hoping it would be a highly technical conference, but instead of it was filled with social media "experts" as you said and lots of buzzwords and hype.
leapbrowser 17y ago
great information. we like the tutorial and the lessons. we use many open source subdomains and advanced javascript is what we were looking for. http://leapbrowser.com http://leapbrowser.com http://filespreader.info http://filespreader.info
oconnor0 17y ago
IE7 doesn't wrap the code in the textboxes. It's displayed on a single line making it hard to read.
- Afton 17y ago
  Except if you double-click the slides (for editing). Then the formatting is fixed. But yeah, it's a drag if you happen to be using IE7.
jdbeast00 17y ago
this was great. exactly what I have been looking for. I still have a few questions though... function largest(){ return Math.max.apply( Math, arguments ); } <-- why is it necessary to run this function in the context of "Math". I don't get this...
- jcl 17y ago
  I would guess that it's just good programming practice to feed a function the context in which it would normally be called -- which for the Math.max function is the Math namespace object. It probably makes no difference what context the Math functions are executed in, since they are probably backed by native code implementations that don't rely on context, but one could imagine some JavaScript implementation taking a shortcut and doing something like: Math.exp = function(p) { return this.pow(this.E, p); } That function wouldn't work correctly unless it was executed in the Math context: assert(Math.exp(1), "Works"); assert(Math.exp.apply(Math, [1]), "Works"); var obj = {}; try { Math.exp.apply(obj, [1]); } catch(e) { assert(false, "Doesn't work."); }
  - jdbeast00 17y ago
    thank you. i suppose this makes sense, i guess i don't understand objects / functions as well as I thought. I thought that Math was like a static thing from other languages, where you wouldn't ever create a new Math() and therefore the this operator wouldn't make sense...
juvenn 17y ago
John, you rock

257 points by Afton 17y ago

These are slides from a presentation I believe. Does anyone have the original audio or video? Nevertheless, they are fantastic. If anyone has links to similar presentations for other languages, I'd love to take a look.

_ck_ 17y ago
I found where it's from: Web 2.0 Expo in NYC (9/2008) - maybe someone has the audio? http://ejohn.org/blog/adv-javascript-and-processingjs/ http://ejohn.org/blog/adv-javascript-and-processingjs/ He also has it as a download: http://ejohn.org/files/learn.zip http://ejohn.org/files/learn.zip Definitely going to look at his books now... Oh his work here looks good too: http://jspro.org/code/ http://jspro.org/code/

_ck_ 17y ago

Not only is this a great read, it's easy on the eyes, excellent contrast and font size.

FreeRadical 17y ago
white or coloured font on a black background is never easy on the eyes
- cubicle67 17y ago
  personal preference I guess. I like it, and so most of my dev environment is dark themed
- cesare 17y ago
  Especially if you're astigmatic.
- mcxx 17y ago
  Yellow on black is the most visible combination of colors.
  - wooby 17y ago
    Is this a preference? I've tried in the past to dig up research actually proving the "most visible combination" through experimentation. I've always assumed that road signs are the combination of colors they are because some empirical research proves it. Never found anything though.
- fjabre 17y ago
  I disagree. I go blind looking at bright white backgrounds all day. It also happens to be an excellent tutorial regardless of colors used.. =)

Andi 17y ago

Java's Script - a new language?

tlrobinson 17y ago
Is that a joke? I really can't tell...
- eob 17y ago
  It's the longhand version of Java. You have to feed it into OCR, but it generally works provided your handwriting isn't too messy.

taitems 17y ago

Weird. Every time I hit "run" it would flash something and then go back to the homepage. I turned on Firebug and broke on next command (once it got out of stupid jQuery interval) it seemed to work. Refreshing again and again and it seems to work, but now it's broken again. Firefox 3.5.3, Firebug 1.4.2

clemesha 17y ago

After reading the tutorial, I took pleasure in reading the source code of that page. A great tutorial and a very nice UI implementation with JavaScript - Resig is a js hacker indeed.

gizmo 17y ago

http://ejohn.org/apps/learn/#13 http://ejohn.org/apps/learn/#13 This is exactly the kind of thing that makes Javascript so disappointing. ninja is an object, that has a slot yell. yell refers to a function/closure. Samurai is a _new_ object, with a _new_ slot, that _independently_ refers to the same function that yell in ninja refers to. And yet, when ninja is deleted/collected the function yell disappears. This is insanity. In javascript function(n) { blah } should be a simple expression that creates a heap object, and heap objects should live until it becomes unreachable, at which point it may be collected. So unless _function_ is not an ordinary expression that creates a first class object, this cannot _possibly_ go wrong. And yet it does. Can anybody think of a justification for this absurd behavior?

praptak 17y ago
I believe you misunderstood the behaviour of the code. The ninja.yell function is a proper object, it does not disappear and samurai.yell refers to it all the time. What goes wrong is this: when it tries to call itself recurively by using ninja.yell, ninja already refers to null. That's when it fails. The moral of this slide is "If you want a function to call itself, better give it a name and refer to it by the name instead of relying on bindings that are outside the scope of the function." This has a followup in the next slide, where exactly this happens.
- axod 17y ago
  >> "If you want a function to call itself..." Or just use the arguments.callee property which allows you to call the function from itself without worrying about names. edit: oops, just seen that's on a later slide.
  - tlrobinson 17y ago
    Except in ES5 strict mode :-/
    - gb 17y ago
      You can still do it, and without a Y combinator or anything like that too: var ninja = { yell: function () { var yellLocal = function(n) { return n > 0 ? yellLocal(n-1) + "a" : "hiy"; } return yellLocal; }() }

praptak 17y ago

#67 "Prototyped properties affect all objects of the same constructor, simultaneously, even if they already exist" This is only true for properties created as new properties on the existing prototype (Ninja.prototype.swingSword = ...). It is not true if you assign a new object to the prototype (Ninja.prototype = { 'swingSword' : ...}). The existing objects will only see new properties added to the object which was constructor's prototype at their creation time.

calambrac 17y ago
This is only true for properties created as new properties on the existing prototype Which is what #67 says. It is not true if you assign a new object to the prototype Which is a completely different thing.
- praptak 17y ago
  "Which is what #67 says." Nope, it says exactly what I quoted ("prototyped properties"). It also provides an example that happens to be of the later kind (properties set on existing prototype.) "It is not true if you assign a new object to the prototype Which is a completely different thing." Completely different from everything that falls under "prototyped properties"? I disagree. All in all, my point is that if you don't know exactly how it works then there is a chance you might be misled by this #67. I am not arguing that it is "wrong".
  - calambrac 17y ago
    It says "all objects of the same constructor", which can be losslessly translated to "all objects with the same prototype that were created using JavaScript's retarded way of trying to look kind of like a class-based OO language when really it's not at all". If you change an object's prototype, that object is no longer "of the same constructor". "Ninja.prototype = { 'swingSword' : ...}" is, in fact, a completely different, far more dramatic action than "Ninja.prototype.swingSword = ..." You shouldn't at all have the expectation that the two are anything alike.

njharman 17y ago

Great (best I can remember but I have bad memory) machine assisted teaching. I could see many textbooks/subjects maths, physics, anything that fits the pattern "look at this" -> "what do you think will happen" -> "this! is what happens and why".

aw3c2 17y ago

A prime example of useless JavaScript. Why not simply use HTML for a simple website like this? I did not see any benefit from JavaScript on that page.

mhansen 17y ago
The examples are all interactive, and there are segments where you are invited to complete solutions, and the code is then eval'd and tested. I'm finding it a wonderfully interactive way to learn.
- aw3c2 17y ago
  Ah, nevermind then. I only gave a quick look and what I saw was all text.

illumen 17y ago

This is a great big collection of surprising things you can do with javascript. I'm not so sure it's a good thing it's being released. These are probably idioms you want to avoid writing in code if possible. Learning how to read them is probably useful some times.

lacker 17y ago
A 'bind' function is very useful for callbacks. It's awkward to write object oriented javascript without it. So it's quite useful to understand how binding works.

jeresig 17y ago

I'm really glad that everyone is enjoying the tutorial! As mentioned below this is from a workshop that I gave at the Web 2.0 Expo in NYC. You can find more information about it here: http://ejohn.org/blog/adv-javascript-and-processingjs/ http://ejohn.org/blog/adv-javascript-and-processingjs/ Most of this tutorial is taken from my upcoming book 'Secrets of the JavaScript Ninja' which can be found here: http://jsninja.com/ http://jsninja.com/ I don't think this was explicitly stated on the slides but you can double click the code slides and you'll be able to edit and re-run them. I tossed this tutorial up after the talk and haven't really had a chance to improve upon it. Sort of related: Remy Sharp built http://jsbin.com/ http://jsbin.com/ which is based off of the construction of this tutorial (using the run-and-show style together with double-click-to-edit).

Afton 17y ago
So...If this was from a workshop, is there an audio track?
- jeresig 17y ago
  Nope. In all honesty, it was one of the worst-targeted talks that I've ever given. I had given a similar talk at OSCON (highly technical crowd, audience) and was asked to give it again at Web 2.0 Expo. If you're not familiar with that conference it's highly not technical - lots of social media experts and managers. I was given a room that could've housed 300+ and there was maybe 20-30 attending - and that number rapidly decreased as I worked to explain the complicated aspects of JavaScript. In the audience were people who had, obviously, never coded JavaScript before (based upon the questions they were asking - this talk is not designed for that). By the end there was maybe a dozen people left and they came up and told me how much they enjoyed my talk and how informative it was - so at least it wasn't for naught. I know that the content is good and that I'm able to deliver it effectively but I won't be giving it again until I know that I'll have an audience that appreciates the content.
  - brown9-2 17y ago
    I was at this talk, and loved it, but you are definitely right about the audience of the conference. I was disappointed as I was hoping it would be a highly technical conference, but instead of it was filled with social media "experts" as you said and lots of buzzwords and hype.

leapbrowser 17y ago

great information. we like the tutorial and the lessons. we use many open source subdomains and advanced javascript is what we were looking for. http://leapbrowser.com http://leapbrowser.com http://filespreader.info http://filespreader.info

oconnor0 17y ago

IE7 doesn't wrap the code in the textboxes. It's displayed on a single line making it hard to read.

Afton 17y ago
Except if you double-click the slides (for editing). Then the formatting is fixed. But yeah, it's a drag if you happen to be using IE7.

jdbeast00 17y ago

this was great. exactly what I have been looking for. I still have a few questions though... function largest(){ return Math.max.apply( Math, arguments ); } <-- why is it necessary to run this function in the context of "Math". I don't get this...

jcl 17y ago
I would guess that it's just good programming practice to feed a function the context in which it would normally be called -- which for the Math.max function is the Math namespace object. It probably makes no difference what context the Math functions are executed in, since they are probably backed by native code implementations that don't rely on context, but one could imagine some JavaScript implementation taking a shortcut and doing something like: Math.exp = function(p) { return this.pow(this.E, p); } That function wouldn't work correctly unless it was executed in the Math context: assert(Math.exp(1), "Works"); assert(Math.exp.apply(Math, [1]), "Works"); var obj = {}; try { Math.exp.apply(obj, [1]); } catch(e) { assert(false, "Doesn't work."); }
- jdbeast00 17y ago
  thank you. i suppose this makes sense, i guess i don't understand objects / functions as well as I thought. I thought that Math was like a static thing from other languages, where you wouldn't ever create a new Math() and therefore the this operator wouldn't make sense...

juvenn 17y ago

John, you rock