第一章 绪 论
"图档结构树的设计与关联"的研究目的是用树型目录的层次结构来形象的表示不同图档之间的分类关系，并借此对图档信息进行分类、管理，同时将树型目录结构的各叶子节点与图档信息数据库内的相关信息进行关联，并能够方面的输出这些信息。
类似的树型目录结构的例子有很多，如windows的资源管理器，帮助信息等都采用的是树型结构目录。这些和这里图档结构树所使用的原理是基本相同的。图1-1显示了简单的节点层次结构。左边是节点的抽象表示，右边是典型的树型视图表示。
图1-1 典型树型视图
该图中，最上面的（或根）节点是 a，它直接包含了节点 b 和 e。节点 b 直接包含节点 c 和 d。节点 b 和 e 组成了层次结构中第 2 代子节点，c 和 d 组成了第 3 代。树型结构根据其位置转换这个层次结构，根节点或第 1 代在左边。自第 2 代往下，为有子代的节点提供了一种展开或折叠其表示的方法，这样可以显示或隐藏其下一代子节点。除了根节点之外，所有节点都只有一个父代。不包含其它节点的节点称作叶节点。某些叶节点也许是不能包含其它节点，而其它的则刚好是空的。
图档结构树采用的原理与上面所述基本相似，由于本部分模块是一个网络应用程序的客户端程序，因此客户端大量而频繁地对服务器的访问能给服务器带来的强大的负载，为了减轻服务器的工作负载，作为浏览器端的程序拟采用javascript语言和html标记结合来实现树型目录结构，目录信息从服务器上一次下载，之后就可以完全在本地对目录树的操作，而不必再去访问服务器。
当需要访问服务器上的图档数据库时则使用java server pages（jsp）通过jdbc来访问它，以此来实现将图档结构树与图档信息数据库的关联。java语言可以运行在多种不同的服务器平台，另外通过sql的界面使用jdbc可以轻易地对任何数据库执行sql指令，这与数据库的种类无关，所不同的是只需调用不同的数据库驱动程序而已。在本课题中由于涉及到服务器方面的问题，因此，还需要配置服务器，这里我使用的是apache软件基金会提供的产品tomcat作为服务器。java编译工具是采用的sun公司java2sdk v1.3。 图档数据库，我是采用ms access建立的。
通过使用以上的几种技术可以满足本课题的基本要求。对本课题的研究和实现可以熟悉java的运行环境，掌握面向对象的设计思想和服务器端的配置与程序设计方法，还可以更好的理解和掌握如何使用脚本来配合超文本进行工作。
第二章 javascript及动态html元素基础
2．1 javascript基础
2．1．1 平台无关性
javascript具有平台独立性。与插件和activex控件相比，这是一个主要优点。因为对于不同的操作平台，插付和activex控件需要重新编译和代码重写。例如，netscape navigator 可在20多个平台上运作，尽管它们大多都属于不同风格的unix，但是在netscape navigator的核心中仍需要为windows16位、windows32位、unix、 macos以及os/2的系统建立控件或插件。虽然unix可以在多种处理器中运行（mips，intel等等），windowsnt也可以在intel和alpha机器上 运行，但它们距离与平台无关还有很大距离。
javascript的另一个优点是netscape公司和microsoft公司的网络服务器都有内置解释器。尽管两个公司开发的编译器风格不同，但是作为网络开发者，仍然有 在客户端使用相同语言的能力。
平台无关性是在应用程序中使用javascript的首要原因。的确一些执行环境解释javascript的方法稍有不同，但对语言主要部分的处理是基本一致的。程序员只需要输入一次程序代码即可让不同的执行环境解释它。
2．1．2 面向对象的javascript
让我们先看一下在服务器端和客户端的javascript的内核和功能有什么不同。 两者都有在自己的运行环境中特定的对象, 因此，对象的初始化和创建在不同的时间发生。由于这个特征，应该从两个方面来看待javascript服务器端和客户端。最低层次的客户端javascript，是当一个页面被装载到浏览器中时创数个核心对象。除了这些核心对象，还有当在网页中有某些标签时所创建的派生对象。这些派生对象继承了父对象的不同特性，并允许脚本获得html标签的属性。图2-1清晰的表明了基本的javascript对象在客户端的层次。
图2-1 对象层次图
正如图表中描述的一样，所有客户端对象或是从window（窗口）对象或是从navigator对象派生出来。考虑到javascript是基于对象的语言, 在给定页面上的所有对象都是在浏览器的窗口中形成，因此，所有javascript对象均为window对象的后代。通过使用window对象， 程序员可以在页面中选择不同的窗格、文本、层、表格以及许多其他的对象和特性。
2．1．3 javascript的浏览器对象
尽管javascript是基于对象的脚本设计语言，但是javascript并没有真正实现对象的继承关系。在javascript的对象之间实际上存在的是一种从属关系。从属关系涉及到两个对象在属性和方法上不存在共同点。例如，在一个典型的浏览器中，每一个下载的网页都是处在一个窗口之中的，而一个网页也同样包含了一些表单、html语句、java小应用程序以及各种插件，甚至这些元素内部还会包含一些别的元素，就形成了一个分层的关系。只能认为这些表单、java小应用程序是从属于网页的，而网页又是从属于一个特定的窗口。在从属关系中，浏览器对象window反映的是一个完整的浏览器窗口，是其他大部分对象的共同祖先。window对象的子对象包括location对象、history对象、和document对象等。在document对象之下还有再下一级的对象和对象数组。
当浏览器载入一个网页时，浏览器会根据网页的内容产生一些与相应页面相对应的对象提供给javascript使用，这就是浏览器对象的一部分。另外，根据浏览器本身的配置和属性，还有一些其他的对象可以提供给javascript程序使用。浏览器对象就是网页和浏览器本身各种实体元素在javascript程序中的体现。
这些浏览器对象如图2-1所示主要包括：
●navigator: 管理着当前使用的浏览器的版本号，运行的平台以及浏览器使用的语言等信息。
●window: 处于整个从属表的最顶级位置。每一个这样的对象代表一个浏览器窗口。
●frame: 在拥有帧的网页中，提供帧的各种管理方法。
●document: 含有当前网页的各种特性，例如标题、背景以及使用的语言等。
●location: 含有当前网页的url地址。
●history: 含有以前访问过的网页的url地址。
在document对象中，包含有forms、anchors、links、layers、images、areas、applets和plugins等数组，这些数组都是根据网页不同内容而自动产生的。这些数组都是浏览器对象document对象的一个属性，数组的个数同html网页中实际元素的个数相同。document对象的各种属性值均来源于当前的网页文档，从很大程度上来说，是直接同文档相关的。文档中包含的各种表单、超链接在document中反映一个属性。document中各种属性的层次关系也是由网页中的相应关系决定的。
2．2 动态html元素
2．2．1 动态html元素定位
用javascript动态定位一个网页内的html元素可以让网络开发者将网页的设计提高 到一个新的水平，利用javascript设计的网页出现在浏览器上时，html元素不必再只是待着不动。现在，当网页被完全加载后，html元素可以在整个浏览器窗口内移动，而且html元素还可以做三维移动：一个html元素可以移动到另一个html元素的前面，也可以移动到它的后面。不同的浏览器之间还有兼容性问题，netscape最先在navigator里通过<layer>标签解决html元素三维定位的问题，而 internet explorer的三维定位是通过扩充现存的html<div>标签来实现的。两种浏览器都存在的层叠样式表（css）是动态定位以后在两个平台上都能使用的基础。这一领域目前还在不断更新，标准也正在制订。 现在能够知道的是，<div>标签应该是将来创建层的方式，javascript应该修改css属性以便将来这些层能动起来。
2．2．2 <div>块简介
通过使用<div>标签，ie实现了和netscape的<layer>标签一样的功能。<div>标签在html里已经存在了很长时间，但一直没能充分使用。开始时<div>标签的作用是把网页的一部分元素分开，以便可以将其设置为针对浏览器窗口的左对齐、右对齐或中间对齐等对齐方式。ie扩充了这个标签的功能使得html代码中由这个标签定义的部分可以在三维空间中被放置和操作。
<div>标签的妙处在于它可以将很多html标签放置在一起变成一组．但这并不意味着必须在任何情况下都使用<div>标签。
2．3 事件处理
事件是浏览器响应用户交互操作的一种机制。javascript的事件处理机制就可以改变浏览器响应用户操作的标准方法，这样就可以更加具有交互性，易使用性。
事件定义了用户与web页面交互时产生的各种操作。例如，单击一个超链接或按钮时，就产生一个事件，告诉浏览器发生了需要进行处理的单击操作（click）。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。浏览器为了响应某个事件而进行的处理过程称为事件处理。javascript的一个特点就是可以在用户端实现完整的数据处理和验证工作，大量的数据可以在用户端进行处理，从而节省了网络的传输开销。
第三章 图档结构树的实现
3．1 实现技术
3．1．1 操作<div>块
为了指定块只需要简单地把一个<div>标签放在html代码的开头，再把</div>标签放在它的结尾即可。任何html标签都可以放在<div>标签之间，这就意味着按钮、窗口、选择框等都可以动起来。也可以利用style属性将<div>标签里的各种图表初始化。
<div>块的定位既可以是相对的又可以是绝对的。绝对定位时，要在块里指明位置。相对定位时，对象出现在文档流中它自然的位置上。用<div>标签把html代码的一部分指定后，就可以用javascript动态地改变这部分代码中元素的样式表（style sheet）属性，从而实现通过改变元素的样式表（style sheet）属性值在三维空间里的定位、显示、隐藏和移动它。
3．1．2 操作层
