Playing with ECMAScript 4


Say you want to start playing around with the new ECMAScript 4 syntax, getting a feel for the code and the features that’ll be included (which is what I’ve been doing lately). Here a short screencast that shows you some ways that you can go about doing that.

Click video to begin (8:40 Minutes long, 11MB):

Download: Right-click this link and select Save As… in order to download a copy of your own. (11MB)

Step 1: Grab some materials.

The best resources, currently, for looking at the syntax and brief examples of how the code should look are:

  • ECMAScript 4 White Paper – This is a broad overview of all the features that are in the language along with some trivial examples of how they should work.
  • Tamarin and ECMAScript 4 Presentation – This is the presentation that I’ve given a couple times now showing examples of many of the aspects of the languages. Generally, the examples shown are more complete than those shown in the white paper.

Step 2: Get the reference implementation.

Now, you’ll need to snag a copy of the ECMAScript 4 Reference Implementation. This is a standalone runtime that you can use from your console. It is not connected to the browser in any way (thus, you won’t have access to any of the typical browser things – like ‘window’, ‘document’, ‘XMLHttpRequest’, or ‘setTimeout’/’setInterval’). I’m currently working on an implementation of these details and will announce when they’re ready for general use.

Step 3: Start coding!

Start with some simple ECMAScript 3 commands, to test the waters:

>> var test = 'test';
>> test
test
>> test = 'new value';
new value
>> test
new value
>> function stuff(){ print(test); }
>> stuff();
new value

Now move on to some basic use of Type Annotations (included in ECMAScript 4):

>> var age : int = 23;
>> age
23
>> age = 45;
45
>> age = 'John';
**ERROR** TypeError: incompatible types w/o conversion
>> var name : string = 'John';
>> name = 23;
23
>> age = 3.0;
3

and here’s a basic class example, borrowed from this presentation that I gave.

class Programmer {
  var name;
  var city = 'Boston, MA';
  const interest = 'computers';
  function work() {}
}

Save the above to a file like ‘Programmer.es’ and load into the console with:

intrinsic::load('Programmer.es');

then you can play around with that class some more:

>> Programmer
[class Class]
>> var p = new Programmer();
>> p.city
Boston, MA
>> p.name = 'John';
John
>> p.interest = 'science';
science
>> p.interest
computers

If you have any questions, or are having trouble getting started, please feel free to ask.

Caveats!

There’s still a lot of functionality that hasn’t been implemented yet, in the reference implementation. In my current tests I’ve noticed the following missing features:

  • Map/Vector
  • Multiple constructors
  • Private constructors
  • Program units
  • Initializers
  • Protected Class properties
  • nullability
  • “like”/”wrap”

Again, if you have any problems, please don’t hesitate to ask and we can step through it together.

Posted: November 10th, 2007


Subscribe for email updates

16 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.