The Caja Playground is a programming environment where you can quickly enter, or link to, HTML, CSS and JavaScript code, and immediately run it under Caja.
Running the Playground
The easiest way to get familiar with Caja is by trying out a few simple snippets in the Caja Playground.
Visit the playground by opening http://caja.appspot.com/ in another tab or window.
You should see the Caja playground:
Click on "Canvas Clock" in the menu on the left panel:
The HTML source of the "Canvas Clock" loads and is displayed in the Source tab. Note that you can modify the source before cajoling it, as well as reference other scripts, stylesheets, images and other webpages as you ordinarily do in HTML.
Click Cajole to see the result:
To use the cajoled code, you can switch to the Cajoled
Source tab and cut and paste it into your source file.
The Cajoled Source tab includes a link
to caja.js which sets up your page as a host page.
Review
- You learned how to use the Caja Playground; and
- You saw how the various tabs in the Playground allow you to examine the internals of how Caja transforms code.
Next steps
- Try out more of the predefined examples in the Playgound, and experiment with your own ideas.
- Read about Getting Started with the API.