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.
Breton (November 10, 2007 at 3:24 am)
thanks for that. Admittedly I haven’t been following your blog religiously (but I liked your blog post on env.js). Are you really looking forward to ES4, as I am? It doesn’t seem like I’d use a lot of the new features, but I quite like the idea of optional types, and think it’s rather brilliant. Ah and what do you think of the ideas floating around of some kind of ES4 compiler/interpreter written in javascript? I wonder who would write that.
Jörn Zaefferer (November 10, 2007 at 8:57 am)
Shouldn’t “name = 23” in your first example throw a TypeError?
Have you found anything about private class properties?
pd (November 10, 2007 at 9:06 am)
Very disappointing to see you using a proprietary closed video codec John. How hard is it to use XviD?
Sean Moore (November 10, 2007 at 10:22 am)
Hey John,
Cool stuff. Thanks for the video. Great intro.
Regards,
Sean
Ralph (November 10, 2007 at 11:58 am)
Jorn,
I stumbled on that too for a while. He set the type to string for name and then set it to 23 (an int) but I think it’s able to convert it automatically. Unlike the age example where ‘John’ was unable to be made into a int, 23 int is able to convert into a string.
Ralph
John Resig (November 10, 2007 at 12:10 pm)
@Breton: Yeah, I’m quite looking forward to ES4. At first I didn’t think I’d use much of the new features, either – but now that I’ve started coding (and unwrapping my mind from the ‘old way’ of writing JavaScript code) I think that a lot of the features are very appropriate and useful. I think the price of admission is well worth it for just the use of classes. (protected/private methods! multi-methods! operator overloading!)
As far as a compiler/interpreter goes, good progress is already being made with Narcissus. It’s a pure JavavScript engine being written in JavaScript. It can run regular JavaScript 1.5 right now, but Brendan is working on adapting it so that it’ll be able to parse and run JavaScript 2. It won’t be fast, but at least it’ll run everywhere!
@Jörn: Nope! That’s what I thought, at first, too – but as I mentioned in the screencast the types in JavaScript gracefully convert wherever they can. For example a number can easily convert into a string, but a string can’t easily convert to a number. ES4’s type system is actually quite graceful in this respect – and much less ‘strict’ than the system currently found in Java (for example).
@pd: Yeah, lame, aren’t I? Do you have any tutorials up getting XviD setup on OSX? and on how to convert Quicktime to that format? If the tools are there, I’ll happily provide a duplicate copy in an alternate format.
dave (November 10, 2007 at 1:25 pm)
Surely if non-proprietary video is in demand then Ogg Theora is the way to go, particularly as there are Firefox builds that support it natively and this javascript (http://metavid.ucsc.edu/wiki/index.php/Mv_embed) to give everyone else several different ways to view it.
It just seems odd to see MPEG-4 Part 10 and AAC described as proprietary and closed, even if they are wrapped in a .mov container, if the alternative suggested is Xvid which, to my knowledge, is just an implementation of MPEG-4 part 2 video wrapped in the MPEG-4 container format that is very closely based on .mov.
It’s kind of like calling .Net proprietary and closed and then recommending Mono rather than say Java.
John Resig (November 10, 2007 at 1:35 pm)
After some playing I was able to convert the video to Ogg Theora nicely using ffmpeg2theora. However, it doesn’t seem to want to convert the audio as well. I’m still investigating, but if anyone has any leads, it would be appreciated.
jmdesp (November 10, 2007 at 4:48 pm)
Well what surprises me is that
p.interest = ‘science’;
seems silently ignored instead of throwing.
John Resig (November 10, 2007 at 5:32 pm)
@jmdesp: Yeah, that threw me too – maybe it’ll throw if it’s in strict mode? (Since that’s, now, an option in ES4.) Although, unfortunately, strict mode isn’t implemented yet in the reference implementation so I can’t be certain.
Breton (November 11, 2007 at 1:01 am)
Re: Const, Brenden Eich, in a comment on his blog, had this to say about [Read-Only] properties.
Adam Burmister (November 12, 2007 at 4:16 pm)
Yeah, some interesting things with type conversions and error checking there.
I too would have expected an exception when assigning to a constant.
Assigning a string to a number should have worked I think if the number was convertable (i.e. var age : int = “24”;), since the it works the other way around (var age : string = 24;).
Cool though, I’m very much looking forward to the classes and namespaces.
John Resig (November 12, 2007 at 4:40 pm)
@Adam: Actually,
var age : int = "24";throws an error, you’ll have to, explicitly use parseInt() to get a number out. I’m not entirely sure how I feel about this but at least it’s consistent with how things have always been done, up until this point.John Giotta (November 14, 2007 at 1:24 pm)
This is funny, dherman left his USERPROFILE hard-coded in the runtime.
**ERROR** EvalError: uncaught exception: error while loading (near c:\Documents
and Settings\dherman\My Documents\ES4Model\builtins\string_primitive.es:91:18-91
.17)
Corey (November 15, 2007 at 9:25 am)
Why not just go grab the free Flex SDK and play with Actionscript, based on early ES4 spec. You won’t want to go back.
Plissee (December 7, 2007 at 5:14 pm)
That’s backward compatible even ES1 and JS in 1995 had a ReadOnly attribute, but because ES1 had no exception handling, instead of a deadly error (as was in Netscape 2’s implementation, IIRC), ECMA settled on silent failure to update. Yeah, it’s wrong. We’ll revisit it in a compatible way, if I can get the group to consider a pragma to enable throwing a new error.