摘 要

“数据结构与算法”的动态演示对学习数据结构算法有着重要的作用，传统Web动画演示依赖于FLASH插件，而HTML5则可以在网页上直接绘图，为数据结构算法的动态演示提供了新的方法。

本系统主要采用HTML5中canvas元素可以直接在网页上绘图的方法，使用JavaScript语言对系统进行开发。该系统具有操作简单、交互灵活、动画演示直观等优点。

本论文分为三大块，包括软件的需求，软件的设计与实现以及软件测试。软件的需求主要针对数据结构算法动态演示系统的总体框架的设计和整个系统的模块划分做了详细的描述。软件的设计与实现主要介绍了系统的界面设计和功能的实现方法。最后的软件测试主要论述了软件开发过程中一些测试软件功能的用例。

关键词：HTML5 动画演示 数据结构与算法

WEB based data structure and algorithm dynamic demonstration

Abstract

The dynamic presentation of "data structure and algorithm" plays an important role in learning data structure algorithm. Traditional web animation demonstration relies on FLASH plugin, while HTML5 can draw directly on web page, and provides a new method for dynamic demonstration of data structure algorithm The

The system mainly uses HTML5 canvas elements can be directly on the page drawing method, the use of JavaScript language to develop the system. The system has the advantages of simple operation, interactive flexibility, intuitive animation presentation and so on.

This paper is divided into three blocks, including software requirements, software design and implementation, and software testing. The demand of the software is mainly for the data structure algorithm dynamic demonstration system design of the overall framework and the whole system module to do a detailed description. The design and implementation of the software mainly introduces the interface design and the realization method of the system. The final software test mainly discusses the use cases of some test software functions in the software development process.

Key words: HTML5 ;animation demonstration ;data structure and algorithm

目录

摘要 I

Abstract II

第一章 绪论 1

1.1 选题背景和意义 1

1.2 选题目的 1

1.3 开发工具 1

1.4相关技术简介 2

第二章 软件需求分析 3

2.1 系统可行性分析 3

2.2 系统功能需求 4

2.3 系统功能模块划分 5

2.3.1 主界面信息配置 5

2.3.2 动画管理 6

2.4 功能模块描述 8

2.4.1 算法控制功能 8

2.4.2 动画演示功能 9

2.4.3 动画控制功能 10

2.4.4代码演示功能 10

2.5 系统的性能需求 11

2.6 系统非功能需求 11

第三章 软件设计与实现 13

3.1软件体系结构 13

3.2 类设计 13

3.3界面设计 15

3.3.1主界面设计 15

3.3.2数据结构算法动态演示页面设计 18

3.4功能实现 22

3.4.1主要功能实现 22

3.4.2动画演示功能实现 23

3.4.3算法动画控制功能实现 24

3.4.4 启用和禁用UI功能实现 25

3.4.5复位功能实现 26

3.4.6 最终功能实现 26

第四章 软件测试 27

4.1测试方案及目的 27

4.2测试用例及结果 27

第五章 总结与思考 32

参考文献 35

第一章 绪论

1.1 选题背景和意义

数据结构在计算机科学中是一门专业基础课和核心课程，它是设计和实现编译程序、操作系统、数据库系统和其他系统程序的重要基础。近年来，算法与结构之间的关系日益明显，将算法设计与分析的基本思想引入数据结构课程中也成为了一种趋势。但由于其内容抽象，理论性强，实践性强，在现阶段，大多数高校的计算机专业教学依旧是采用传统的理论教学方式，难以满足教育的目标要求，所以学生们在学习和理解这门课程的过程中存在着很大的困难，本次毕业设计就是利用可视图形对经典的数据结构算法进行更直观、更形象的描绘。在本次的毕业设计中，本人决定采用HTML5来实现数据结构与算法的动态演示。HTML5新增了canvas新元素，通过JavaScript调用HTML5提供的绘图API，即可实现在客户端直接绘图，极大的简化了图形与网页中的其他元素的交互过程，通过基于HTML5实现数据结构算法演示系统，通过图形的方式直观形象的展示算法的执行过程，能有效的弥补传统教学方式的不足，取得更好的教学效果。

1.2 选题目的

课题目标是设计并实现一个数据结构经典算法动态演示的系统。该系统可以解决平常板书教学数据结构难以理解的问题。重点演示数据结构经典算法的基本操作，使学生能够更加直观的理解数据结构的经典算法。通过这个系统能及时发现并处理相关问题。同时结合实践，加深理解软件的开发和网站设计的基本知识，学习并掌握相关开发工具和应用软件，熟悉软件开发的过程。

1.3 开发工具

本软件使用的开发工具是WebStorm。WebStorm 具有很多实用的功能，如：智能代码的补全、代码格式化、代码导航和用法查询等，还可以显示不同浏览器之下的支持细节，这些功能都为本次的软件设计提供了很大的帮助。

1.4相关技术简介

相关图片展示：