现在尝试一个简单的示例,它在您每次按下按钮时通过调试过程输出 “Hello World!”。我们将在本例中编辑 helloworld.html。清单 1 所示代码的初始部分设置 dojo.js 的路径,并打开调试模式以便测试您的输出。
清单 1. 输出 “Hello World!” 的简单示例
<html>
<head>
<script type="text/javascript">
djConfig = { isDebug: true };
<script>
<script type="text/javascript" src="./dojo.js"></script>使用带有 “事件” 的Button2小部件调用helloPressed函数:
清单 2. 使用带有 “事件” 的 Button2 小部件调用 helloPressed 函数
<!-- DOJO EXECUTION -->
<script type="text/javascript">
dojo.require("dojo.widget.Button2");
dojo.require("dojo.event.*");helloPressed函数仅调用dojo.debug以输出 “Hello World!” 消息:
function helloPressed()
{
dojo.debug('Hello World!');
}下面是init函数,该函数将helloButton与 Dojo 小部件相关联。第二行指明在您单击 Press Me 时应调用helloPressed函数。
function init()
{
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed');
}下一行在初始页面加载时运行init函数:
dojo.addOnLoad(init);最后,HTML 的主体包含实际按钮,该按钮被赋予type和Id以与上述 JavaScript 关联。
清单 3. 将 ID 与上述 JavaScript 关联
</script>
</head>
<body>
<button dojoType="Button2" widgetId="helloButton">Press Me</button>
</body>
</html>图 2 展示单击 Press Me 之后 “Hello World!” Dojo 应用程序的输出。
图 2. “Hello World!” Dojo 应用程序的输出
