1.
前面，我们对 Dojo 的下载和安装进行了介绍。接下来，我们将通过一个 Dojo 版的 Hello World 示例来了解如何初步使用 Dojo 工具包。本节中，将通过一个客户端登陆验证的例子来进行讲述。
清单 1. 客户端登陆验证示例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <!-- djConfig="parseOnLoad: true" 7 表示在页面加载完成以后，启用 Dojo 的解析模块对页面中的 Dojo 标签属性 8 （Dojo 标签属性是指由 Dojo 定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。 9 djConfig 是使用 Dojo 页面的一个全局配置参数。 10 通过对这个参数不同的赋值，可以控制页面中 Dojo 的解析模块是否运行， Dojo 的调试模块是否工作等。 --> 11 <script type="text/javascript" 12 src="js/dojo/dojo.js" 13 djConfig="parseOnLoad: true"></script> 14 15 <!-- @import "dojo_path/dijit/themes/tundra/tundra.css" 表示引入 Dojo tundra 风格的层叠样式表。 --> 16 <style type="text/css"> 17 @import "js/dijit/themes/tundra/tundra.css"; 18 </style> 19 20 <!-- dojo.require("dojo.parser") 表示引入 Dijit 的解析功能模块。 21 该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。 22 需要与 djConfig="parseOnLoad:true" 相区别的是，djConfig="parseOnLoad:true" 23 表示确定在页面加载完成以后执行解析功能，但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。 --> 24 25 <!-- dojo.require("dijit.form.TextBox") 和 dojo.require("dijit.form.Button") 26 表示引入 Dojo 风格的文本输入框和按钮的功能模块。 --> 27 <script type="text/javascript"> 28 dojo.require("dojo.parser"); 29 dojo.require("dijit.form.TextBox"); 30 dojo.require("dijit.form.Button"); 31 function init() 32 { 33 //dojo.connect(dijit.byId("mybutton").domNode, "onclick", "login") 34 //表示将按钮的点击事件和 login 函数联系起来，当点击 id 为 mybutton 的按钮时，执行 login 函数。 35 dojo.connect(dijit.byId("mybutton").domNode,"onclick","login"); 36 } 37 function login() 38 { 39 if( dijit.byId("myname").value=="goodguy" && 40 dijit.byId("mypassword").value=="goodgoodstudy") 41 alert("Dojo World welcome you!"); 42 else 43 { 44 //dijit.byId("myname").setValue("") 表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数，将文本框里面的内容清为空。 45 dijit.byId("myname").setValue(""); 46 dijit.byId("mypassword").setValue(""); 47 alert("Dojo does not like you!"); 48 } 49 } 50 dojo.addOnLoad(init); 51 </script> 52 </head> 53 <!-- <input type="text" length="20" id="myname" dojoType="dijit.form.TextBox"> 54 中的 dojoType="dijit.form.TextBox" 表示在页面中文本输入框是 Dojo 风格的。 55 需要注意的是，通过声明 dojoType="dijit.form.TextBox" 这种方式来实现某些 Dojo 功能的使用， 56 其表现形式上如同声明一个 HTML 标签的属性（如同 width="10px"）， 57 因此在本文中称其为 Dojo 标签属性。在页面加载完成以后，Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。 --> 58 <body class="tundra"> 59 UserName: 60 <input type="text" length="20" id="myname" 61 dojoType="dijit.form.TextBox"> 62 <br> PassWord: 63 <input type="password" length="20" id="mypassword" 64 dojoType="dijit.form.TextBox"> 65 <br> 66 <div id="mybutton" dojotype="dijit.form.Button">Submit</div> 67 </body> 68 </html>
