1. Open http://www.jsfiddle.net
2. In the left side menu, open 'Choose Framework', enter the following:
3. In the left side menu, open 'Add Resources', enter the following:
The links to get the dojo.css and claro.css are:
http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/resources/dojo.css
https://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css
4. In the left side menu, open 'Info', enter the following:
5. Enter the following in 'HTML' window:
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<button id="welcomeButtonNode" type="button"></button>
<div id="welcomeMsgBoard"></div>
</body>
</html>
6. Enter the following in 'JavaScript'
window: require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){ ready(function(){
// Create a button programmatically:
var myButton = new Button({ label: "Click me!", onClick: function(){
// Do something:
dom.byId("welcomeMsgBoard").innerHTML += "Welcome to Dojo! "; } }, "welcomeButtonNode");
});
});
7. Hit "Run".
