dojo 之基础篇

假设我们的工程目录如下:

   -- HelloWorld.html

|-- js/

-- dojo/ /*此处是dojo包下面的文件,列表如下

       		 -- build.txt
-- CHANGELOG
-- demos

-- ..
-- dojo.js
-- dojo.js.uncompressed.js
-- iframe_history.html
-- LICENSE
-- README
-- src/

现在我们创建HelloWorld.html文件,代码如下:
<html>
<head>
<title>Dojo: Hello World!</title>

<!-- SECTION 1 -->
<script type="text/javascript" src="js/dojo/dojo.js"></script>

<!-- SECTION 2 -->
</head>

<body>
</body>
</html>

在body中加入一个widget button
<button dojoType="Button" widgetId="helloButton">Hello World!</button>

上面不一定要使用widgetId,用平常的id就行了,widget会自己将其转化为widgetId。

以下开始加入section 2的代码。
  <!-- SECTION 2 -->
<script type="text/javascript">

//引入库
//event.*是处理事件,比如:点击,的所有包。
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");

//点击按钮后调用的函数
function helloPressed()
{
alert('You pressed the button');
}

//将helloButton的点击事件绑定到helloPressed()函数
function init()
{
var helloButton = dojo.widget.byId('helloButton');//获得button对象
dojo.event.connect(helloButton, 'onClick', 'helloPressed')//绑定,这只是其中一种绑定方法
}

dojo.addOnLoad(init);//当然也可以将init函数命为其它的名
</script>

这样,就完成了HelloWorld.html的代码. 试试吧.

另外,要注意的是:
如果init函数已经运行了,我们再使用document.getElementById 就没用了. 因为DOM
已经被widget改变. 只能用dojo.widget.byId.

(0)

相关推荐

  • dojo 之基础篇(三)之向服务器发送数据

    向服务器发送数据有get和post两种. 首先,要将body中的html代码替换为 <button dojoType="Button" widgetId="helloButton">Hello World!</button> <br> 请输入名称: <input type="text" id="name">不输入数据,怎么提交数据呢. get我们只要将基础篇(二)中的: func

  • dojo 之基础篇(二)之从服务器读取数据

    本例子沿用 "dojo 之基础篇" 中的内容首先,我们在HelloWorld.html的同一级目录,新建一个文件,名为response.txt,内容为: Welcome to the Dojo Hello World Tutorial 将section 2的代码替换 为以下代码 <!-- SECTION 3 --> <script type="text/javascript"> dojo.require("dojo.io.*&quo

  • dojo 之基础篇

    假设我们的工程目录如下: -- HelloWorld.html |-- js/ -- dojo/ /*此处是dojo包下面的文件,列表如下 -- build.txt -- CHANGELOG -- demos -- .. -- dojo.js -- dojo.js.uncompressed.js -- iframe_history.html -- LICENSE -- README -- src/ 现在我们创建HelloWorld.html文件,代码如下:<html> <head>

  • JavaScript 基础篇(一)

    JavaScript 基础篇(一) 基础篇 Javascript:一.数据类型和值 javascript:允许使用3种基本类型数据--------数字.字符串.布尔值,此外还支持两种小数据类型null(空)和undefine(未定义). javascript:还支持符合数据类型-对象(object),javascript中对象分两种,一种对象表示的已命名的值的无序集合,另一种表示有 编号的值的有序集合.其实有序集合就是数组(Array). javascript:还定义了另一种特殊对象----函数

  • JavaScript基础篇(6)之函数表达式闭包

    其实js支持函数闭包的主要原因是因为js需要函数能够保存数据.这里的保存数据是只函数在运行结束以后函数内变量的值也会进行保存.至于为什么js需要在函数内可以保存数据,那就是js是一种函数式语言.在函数内保存数据是函数式语言的一大特征. 回顾前面介绍过的三种定义函数方式 functiosu(numnumreturnunum//函数声明语法定义 vasufunction(numnum)returnunum}//函数表达式定义 vasuneFunction("num""num&qu

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • js 基础篇必看(点击事件轮播图的简单实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

  • ASP.NET MVC小结之基础篇(二)

    整理除了这个笔记,共享一下子,基本MVC的所有东西都介绍了,但是都是很基础的东西.本来打算一篇发表完的,但是发现东西有点多,所以分成了两篇文章,这是最后一篇了! 1.ASP.NET MVC请求过程 1 2.Controller (1) 控制器在ASP.NET MVC中扮演着处理客户端请求的角色 1)必须实现System.Web.Mvc.IController接口 ->通常直接继承System.Web.MVC.Controller类 2)必须要以Controller结尾 3)通过不同的Action

  • Python基础篇之初识Python必看攻略

    Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承. Python和其他语言的对比: C 和 Python.Java.C#等 C语言: 代码编译得到 机器码 ,机器码在处理器上直接执行,每一条指令控制CPU工作 其他语言: 代码编译得到 字节码 ,虚拟机执行字节码并转换成机器码再后在处理器上执行 Python 和 C  Python这门语

  • JavaScript基础篇(3)之Object、Function等引用类型

    阅读目录 Object类型 1.通过构造函数来创建 2.通过字面量表示法来创建对象 Array类型 同样Array也有两种创建方式: 如果我们想要打印数组中所有的值,直接打印数组的变量名就可以: 往数组添值: 栈方法.队列方法:  关于数组的排序:  数组的一些操作方法: 查找位置方法 迭代方法 归并方法 Date类型 RegExp类型 Function类型 三种表示法: 方法重载 函数内部属性(arguments 和 this) 基本包装类型 浏览器的内置对象 URI 编码方法 总结 我们在<

随机推荐