Simon Willison’s Weblog

Wow, thanks for putting this up. It's great. Very useful to reintroduce people who have had painful experiences with javascript in the past.

Joe Healy - 7th March 2006 09:22 - #

It seemed to cover quite a lot of useful pointers regarding JavaScript in an easily digestible manner - good stuff.

Robert Wellock - 7th March 2006 11:40 - #

Excellent work, thanks very much for sharing. One request though, could you possibly make it into a single file to download as well? Perhaps a PDF. This would be really useful for offline reading.

Malcolm Forbes - 7th March 2006 12:42 - #

Hey, I actually went through the 100+ slides, and it's by far the best sum up of javascript I've seen. Any chance you can make this available as a zip file?

Martin Albisetti - 7th March 2006 12:43 - #

*Nice* write-up!

Anders Rasmussen - 7th March 2006 14:39 - #

Thanks for sharing the information! I'll be sure to keep a copy of these handy. BTW, you should have done the slideshow using S5 (A Simple Standards-Based Slide Show System) ;)

GaZ - 7th March 2006 15:07 - #

I'm the presentation-layer guru at my company; from now on, whenever a Java developer emails me with a JavaScript question I'm going to send him a link to this presentation. Thanks.

Andrew Dupont - 7th March 2006 15:44 - #

Very nice presentation. It must have been because I read the whole thing when I knew most of it already.

I like the way you aren't afraid to say "JavaScript isn't perfect; this bit sucks" mainly because this is my personal opinion too. I use it loads but it does have some serious flaws.

One critism is that you didn't emphasise the difference between reference and primitive types. When I was learning JS is took me ages to get used to objects and arrays always being passed by reference. For those of you who don't know:
var foo = {a:1,b:2};
var bar = foo;
bar.a = 3;
alert(foo.a == 3); // outputs true

Oliver Saunders - 7th March 2006 18:13 - #

I second, third, etc., the call for the slides to be zipped and made available if possible. The notes document is a work of art! Thanks.

Clint - 7th March 2006 18:49 - #

Thanks for the presentation. I arrived with virtually zero Javascript experience and you hit on enough core concepts that I was able to understand how it can be useful for me (and it was the perfect segue into Ajax.

Royce - 7th March 2006 20:07 - #

I've posted the slides to Flickr.

Simon Willison - 7th March 2006 22:35 - #

Hey Simon, Amazing slides!!! However one thing that always irks me about javascript is that I cannot for the life of me find a complete set of scoping rules which covers both functions, closures, new Functions, callbacks etc. If you know of a complete list out there written down I'd dearly love to hear of it! Thanks, Andy.

Andrew Phillipo - 7th March 2006 23:59 - #

Nice write up. If you'd like, I'd be happy to host the file(s) on my Streamload account. -Steve

Steve Iverson - 8th March 2006 02:21 - #

Thanks very much.

Gary Capell - 8th March 2006 13:15 - #

In respond to Oliver Saunders; This is the default behaviour of most object-oriented languages that I know of. Actually php4 is the only example of the opposite. Personally I find it a heck lot more intuitive that objects are passed by reference rather than cloned, which makes me wonder. What is your programming background ? Did you come from php, or is there some other explanation ?

Troels - 8th March 2006 23:13 - #

Thanks for posting the introduction. I think I found a small typo in the notes (js-reintroduction-notes.html): In this code snippet (in the Functions section):

function avgArray(arr) {
    var sum = 0;
    for (var i = 0, j = arr.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum / arr.length;
}

I think the use of arguments[i] is a mistake; it should be arr[i]

Neil Katin - 9th March 2006 17:51 - #

Awesome! Any chance of getting the audio?

Jon - 9th March 2006 19:44 - #

Thank You!

Avi Flax - 9th March 2006 21:23 - #

Thanks for sharing :)

gkumar - 10th March 2006 05:24 - #

Hey Simon Thanks for the Lesson: P I found another spelling mistake I think. Search the document for abject. I think it�s supposed to be object. "unlike the global abject" Thanks again it definitely helped me understand JavaScript objects better.

enej - 11th March 2006 01:46 - #

Troels:

This is the default behaviour of most object-oriented languages that I know of. Actually php4 is the only example of the opposite.

My programming experience is mainly PHP4 and C++ and they both pass by value unless told otherwise. I would be using PHP5 were it not for my backwards hosting company.

Personally I find it a heck lot more intuitive that objects are passed by reference rather than cloned

Oh Absolutely I don't depute that. I just found the change very unnatural.

Oliver Saunders - 12th March 2006 00:44 - #

Many thanks for putting this excellent (re)introduction to Javascript tutorial.

There are couple of spelling mistakes in the notes, and another thing worth mentioning about the access to an object's property.

The obj[name] method of accessing an object's property is very useful since even expressions are allowed there. I've seen people using eval() for accessing an object's property since not many know that properties can be accessed using the square bracket ([]) notation.

Gopalarathnam Venkatesan - 12th March 2006 05:02 - #

Great stuff! Cant wait until the 15th of june (@media)

cherouvim - 16th March 2006 14:25 - #

Great presentation

Srikanth - 20th March 2006 03:47 - #

Thanks for posting this! It is by far the best write-up of JavaScript I've ever read. Despite my using JS professionally and everyday, I learned a lot of stuff.

Michael - 21st March 2006 22:24 - #

This stuff is great! Congrats!

Cletus - 29th March 2006 13:16 - #

Hi Simon

Thanks for posting the slides, sorry to have missed your session. I've noticed that there seem to be two different idioms for the Singleton pattern (see below). Am I right in thinking they are equivalent and do you have any particular reason for preferring one over the other?

All the best
--
petef

//Javascript singleton pattern

// DHTML Kitchen style
// http://dhtmlkitchen.com/learn/js/singleton/
var dk = new function(){
  // public method
  this.foo = function(){
    return "Foo!" + bar();
  }; 
  // private method
  function bar(){
    return "!Bar"
  }
}

// Simon Willison style
// http://flickr.com/photos/simon/109341462/in/set-72 057594077197868/ 
var sw = (function() {
  function foo(){
    return "Foo!" + bar();
  } 
  function bar(){
    return "!Bar";
  } 
  // public methods
  return {
    'foo': foo
  }
})()

Peter Ferne - 31st March 2006 11:40 - #

I also quite like...

// Hybrid style
var pf = new function(){
  foo = function(){
    return "Foo!" + bar();
  }; 
  bar = function(){
    return "!Bar"
  }
  // public methods
  this.foo = foo;
}

Peter Ferne - 31st March 2006 11:45 - #

Very nice overview of the language - I especially liked the understandable summary of JS's prototype approach to object orientation. Concerning the distribution of a 50MB PDF - why not use bittorrent?

Anatol Ulrich - 9th April 2006 11:08 - #

Simon, thanks for the singleton pattern. I spent days searching for that after reading it in your slides. I don't believe it made it into your pdf notes. ;)

Peter, not positive on this, but Simon's pattern may be more efficient due to how function objects are evaluated at runtime.

Logic - 20th April 2006 17:03 - #

Hello, i am new with internet and i am tring to make a blog but its very hard. If anyone knows where to get information about this i would really apritiate it.

tom - 29th April 2006 21:20 - #

Hello Simon. Thanks for the singleton pattern.

I think we can combine the Simon Willison style with the DHTML Kitchen style. In my opinion the combined styles produces the most maintainable code due to the fact that we do not have to return every method that we want to expose. As a bonus we also get the most efficient function object:

var sw_dk = ( function() {
  // Private variables
  var a = 'Hello ';

  // Public variables.
  this.b = "I'm public";
  
  // Private methods
  bar = function(){
    return 'Bar!';
  }; 
  
  // Public methods
  this.foo = function() {
    return(a + bar() );
  };
	
  // ------------------------------------
  // Expose public attributes and methods
  // ------------------------------------
  return ( this );
	
} ) (); //~anonymous function immediately invoked with ()


alert(sw_dk.foo()); // --> "Hello Bar!"

Regards
Leif Olsen

Leif Olsen - 3rd May 2006 16:24 - #

BEWARE! Not everything you read in blog comments is working as expected!

This is true regarding the suggestion of Leif Olsen:

Using this inside the function created without new defeats the purpose as this points to the window object!

This is why in Leif's example sw_dk == window yields true! All the public functions end up in the global window object. This is why the suggestion of Leif Olsen does not work.

Daniel Kabs - 4th October 2006 09:53 - #