第13章 DOM应用.ppt

JS从入门到精通 第13章DOM应用 可排序的分页表格 第13章DOM应用 可排序的分页表格 上一章初步接触了文档对象模型 DOM 讲述了 DOM 的定义 DOM 的节点类型和 DOM 的树状结构模型 详细讲述了窗口对象的子对象和文档 document 对象的属性和方法等 并通过具体的例子讲解个各个方法在 DOM 操作中的应用 利用这些方法 可以方便的实现页面元素的添加 删除和位置改变等 本章将进一步展示 DOM 在JavaScript中的应用 并将讲解排序算法在JavaScript中的实现 13 1示例 可以按不同列排序 支持分页的表格 代码13 1 htm是一个可以按不同列排序 并支持分页的表格 由于代码很长 下面分段解释 完整的代码可以在本书的光盘中获取 13 2表格对象的结构与动态改变表格 表格对象是HTML语言中最 古老 的对象之一 曾经在HTML页面布局中起着举足轻重的作用 随着Web2 0的推广和xHTML标准的推行 其在HTML页面中所扮演的角色已经逐渐由布局的工具转变为数据的容器 13 2 1xHTML简介 HTML存在着三个主要的缺点 不能够适应现在越多的网络设备和应用的需要 比如手机 PDA 信息家电都不能直接显示HTML 由于HTML代码不规范 臃肿 浏览器需要足够智能和庞大才能够正确显示HTML 数据与表现混杂 这样当一个页面需要改变表现样式 就必须重新制作HTML 于是W3C又制定了XHTML XHTML是HTML向XML过度的一个桥梁 13 2 2表格布局和DIV布局 表格在HTML最初发展起来的时候 常常被用来布局 利用表格的网格表现特性 可以很方便的实现元素的纵向和横向对齐 随着互联网的发展 人们对页面美观的要求越来越高 这就需要实现越来越复杂的页面结构 相应的 在代码层面 表格的嵌套结构也就变得越来越难以理解 在那些有着十几层嵌套结构的表格布局页面中 试图调整某一部分的尺寸 无异于一个噩梦 在xHTML标准中 表格被剥去了布局者的功能 布局任务更多的被赋予了 div 元素 13 2 3表格对象的结构 表格包含着若干行和列 犹如一个网格的结构 下面是一个简单的表格的HTML内容 13 2 4表格对象的方法和集合 表格专用对象模型 table specificobjectmodel 是W3C组织定义的文档对象模型 DOM 的一部分 其提供了一些表格和表格结构对象专用的方法 来实现对表格的操作 表13 2是这些方法的列表 13 2 5文本节点的使用 文本节点是DOM模型中一个比较容易被人忽视的节点 对于一个习惯于针对 InternetExplorer 编程的程序员来说 可能一直都不需要用到文本节点 因为可以通过HTML元素的 innerText 属性来获得此元素内部的无标记文本 实际上 在W3C的DOM模型中 innerText 是一个 非标准 的属性 因此如果程序员希望自己的脚本能够兼容不同的浏览器 应当尽量避免使用此类属性 13 3排序算法 排序是计算机编程中非常常见的需求 因此多年来人们研究出了很多种排序算法 根据待排序对象的内在顺序不同 各种算法表现出的速度与稳定性也不尽相同 不存在一个完全完美的排序算法 程序员在实际使用的时候应当根据具体需要选择适当的算法 13 3 1排序的基本概念 待排序的对象为一组数据记录 每个记录有着若干的数据项 其中的某一项可以用来标识此记录 被称为关键字项 该数据项的值称为关键字 排序算法就是依据关键字的大小关系 将不同的数据记录按照由大至小 顺序 或相反 逆序 排列的运算方法 13 3 2示例 冒泡排序 冒泡排序是最早提出的排序算法之一 将无序数据视作垂直排列的一系列气泡 较小者较轻 自下至上扫描数据 如果有较 轻 的数据在较 重 的数据下方 则将此两个数据交换位置 反复扫描数据序列直至无数据交换发生 表示数据已经排序完成 这种算法在排序的过程表现上就犹如一个个气泡向上浮起 因此被称为冒泡排序 代码13 2 htm是一个冒泡算法的示例 采用随机函数 Math random 生成一个长度为1000的随机待排序样本 对其执行单向冒泡排序 并给出时间消耗 13 3 3示例 快速排序 快速排序是C R A Hoare于1962年提出的一种划分交换排序 它采用了一种分治的策略 通常称其为分治法 Divide and ConquerMethod 其基本思想是 将原问题分解为若干个规模更小但结构与原问题相似的子问题 递归地解这些子问题 然后将这些子问题的解组合为原问题的解 代码13 3 htm是一个快速排序算法的示例 13 3 4示例 插入排序 冒泡排序和快速排序都是属于交换排序的范畴 这两者都是通过将不符合顺序的记录元素交换位置来实现排序算法的 插入排序的思想与此两者不同 通过插入来实现排序 其算法思想是 每次将一个待排序的记录 按其关键字大小插入到前面已经排好序的子记录集中的适当位置 直到全部记录插入完成为止 代码13 4 htm是一个插入排序的测试例子 13 3 5示例 希尔 Shell 排序 希尔排序 ShellSort 是插入排序的一种 因D L Shell于1959年提出而得名 其基本思想是 对于长度为n的待排序数据集 先取一个小于n的整数d1作为第一个增量 把文件的全部记录分成d1个组 所有距离为dl的倍数的记录放在同一个组中 先在各组内进行直接插人排序 然后 取第二个增量d2 d1重复上述的分组和排序 直至所取的增量di为1 即所有记录放在同一组中进行直接插入排序为止 该方法实质上是一种分组插入方法 代码13 5 htm是一个希尔排序的算法示例 13 3 6各种排序算法的比较和选择 按平均时间复杂度将常见的各种排序分为四类 平方阶 O n2 排序 一般称为简单排序 例如直接插入 直接选择和冒泡排序 线性对数阶 O nlgn 排序 如快速 堆和归并排序 O n1 阶排序 是介于0和1之间的常数 即0 1 如希尔排序 线性阶 O n 排序 如桶 箱和基数排序 13 4绑定数据到表格 自 InternetExplorer 的 4 0 版本以后开始支持数据绑定功能 所谓数据绑定就是将数据源的数据直接绑定在HTML元素上 浏览器会自定根据数据源的状况实时的更改HTML元素的内容 13 4 1实现数据绑定的逻辑结构 数据绑定过程中用到了四个基本的部分 数据源对象 DataSourceObject 即DSO 数据消费者 DataConsumer 绑定代理 BindingAgent 和重复显示的表格 数据源对象提供数据给页面 数据消费者和表格将数据显示给用户 绑定代理保证数据的提供者和消费者之间的同步 13 4 2示例 简单的数据绑定 为了给读者一个直观的数据绑定印象 先给出一个非常简单的应用示例 见下面的代码13 6 htm 13 4 3向页面中添加数据源 InternetExplorer 浏览器支持的数据源有四大类 表格数据源控件 TabularDataControl 即 TBC 远程数据源 RemoteDataSerivce 即 RDS XML数据源和直接以HTML作为数据源 13 4 4将数据源绑定到HTML元素 绑定数据源到HTML元素就是将数据源中的数据取出 依照绑定的模式 由浏览器将其自动的连接到对应位置 绑定分为单值绑定和表格绑定 单值绑定的方法如下 13 4 5示例 数据绑定模型与分页 通过动态网页模型对数据绑定的支持 DHTMLObjectModelSupportforDataBinding 允许程序员通过脚本实现 1 改变HTML元素和数据源的绑定关系 2 在运行时绑定一个表格 3 动态的添加数据源 4 动态的改变HTML元素绑定的数据表现形式 5 动态控制数据的显示量 6 访问ADO数据集 ADO Recordset 代码13 7 htm是一个支持自定义分页大小 可以在分页中跳转的数据表格绑定示例 13 4 6数据绑定模型的事件 数据绑定模型提供了若干事件 供脚本控制数据绑定的状态 表13 5是事件列表 13 5小结 本章在前一章的基础上进一步讲解了DOM在表格中的使用 由于表格具有特殊的格式要求 因此其DOM操作也就与普通的HTML元素的DOM操作有所区别 算法是学习编程的基础 本章讲解了四种排序算法 并比较了不同排序算法的优劣 最后还讲解了目前使用最广泛的浏览器 InternetExplorer 所支持的数据绑定功能 13 6常见面试题分析 13 6 1说出常用的几种排序算法并进行简单的比较冒泡排序 快速排序 插入排序和希尔排序 按平均时间复杂度将常见的各种排序分为四类 平方阶 O n2 排序 一般称为简单排序 例如直接插入 直接选择和冒泡排序 线性对数阶 O nlgn 排序 如快速 堆和归并排序 O n1 阶排序 是介于0和1之间的常数 即0 1 如希尔排序 线性阶 O n 排序 如桶 箱和基数排序 各种排序算法相比较 简单排序中直接插入最好 快速排序最快 当文件为正序时 直接插入和冒泡均最佳 13 6 2表格布局和DIV布局的优缺点 用 div CSS 布局的页面在外观表现上和通常的表格布局并没有什么不同 但是在代码层面上来看 常常会比较简单和易于理解 因为 div 构建的布局很少有多层的复杂嵌套 其代码更加贴近于文档的流结构 另一