Getting started with some simple steps

Status:Draft Version:1.0 Authors:Alex Russell

Contents

• Getting started with some simple steps
  • Example
  • See also

Getting up-and-running with Dojo couldn’t be easier. Just include this line in your web page:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>

Dojo's now included on your page, no install, no fuss. So what do you get for all that hard work?

As the example below shows, animations, event handling, and a wealth of other utilities are instantly available:

Example

<script>
    dojo.addOnLoad(function(){
        dojo.query("#showMe").onclick(function(e){
            var node = e.target;

            var a = dojo.anim(node, {
                backgroundColor: "#363636",
                color: "#f7f7f7"
            }, 1000);

            dojo.connect(a, "onEnd", function(){
                dojo.anim(node, { color: "#363636" }, null, null, function(){
                    node.innerHTML = "wow, that was easy!";
                    dojo.anim(node, { color: "white" });
                });
            });
        });
    });
</script>

<script> dojo.addOnLoad(function(){ dojo.query("#showMe").onclick(function(e){ var node = e.target; var a = dojo.anim(node, { backgroundColor: "#363636", color: "#f7f7f7" }, 1000); dojo.connect(a, "onEnd", function(){ dojo.anim(node, { color: "#363636" }, null, null, function(){ node.innerHTML = "wow, that was easy!"; dojo.anim(node, { color: "white" }); }); }); }); }); </script>

<div id="showMe" style="padding: 10px;">
    click here to see how it works
</div>

<div id="showMe" style="padding: 10px;"> click here to see how it works </div>

See also

• Using Dojo from a CDN
• Installation instructions & Tutorials
• Dojo Base API CheatSheet - covers all the API's provided from including dojo.js on a page.

Table of Contents

• Getting started with some simple steps
  • Example
  • See also