Simple JS learning environment

Leonard Lin is teaching animation students basic programming so they'll be able to use Maya's MELScript and Flash's ActionScript. He chose JavaScript as the first language for his students because JavaScript and ActionScript are both variants of ECMAScript.

I made a simple JS learning environment to cut out the save-switch-reload cycle and the "magic" HTML that surrounds a short JS program. If an error occurs, it highlights the line.

I reused a lot of code and UI ideas to make it. The overall UI comes from the Real-time HTML editor, the print() function comes from the JavaScript Shell, and the error-selecting idea and code come from the "blogidate XML well-formedness" bookmarklet. If you want to look at the code for the JS env, most of it is in the "buttons" frame.

3 Responses to “Simple JS learning environment”

  1. Andyed Says:

    I tried doing a save page complete to a chrome folder — but no love. This would be handy for testing addon style functions that look at the browser ui stuff. Any suggestions?

  2. Jesse Ruderman Says:

    “Save page complete” to a local folder gives me a working version. Does it break for you as soon as you move it form file: to chrome:? Are you getting a security error?

  3. Jesse Ruderman Says:

    Leonard just gave me some IE-specific code to make the error-selecting feature work in IE. Yay!

    I still recommend using Mozilla instead of IE to experiment because Mozilla has better error messages. “TypeError: window.foo is not a function” is a lot easier to understand than “TypeError: Object doesn’t support this property or method”.