论文总字数：23322字

摘 要

随着编程技术的日益大众化,普遍化,大量的编程语言被更多的人们所掌握,HTML语言作为一种简单易懂的标签语言更是倍受编码爱好者的青睐。编码语言的普及化增高随之带来的是对于编辑器功能的需求提高。

一款好的编辑器不仅要实现最基本的功能，将代码语言编译成计算机可识别的机器语言；还需要具有舒适友好的编译环境界面和方便的文本处理功能。这样的编辑器有助于提高编码者的编辑效率还能提高初学者继续学习下去的兴趣。因此，为了更加方便自己的编码，提高自己的编码效率，所以自己设计实现了一款简单的基于浏览器的代码编辑器。

编辑器中实现在线编辑功能主要是使用HTML、JavaScript、CSS技术，从结构、表现、行为三个层次去构建网页。实现了浏览器下的具有高亮功能的代码编辑器，能兼容多种浏览器。此外，编辑器通过JSP与Java实现了在线编译Java代码的功能。

本论文中重要介绍了项目的研发背景，所完成的功能和研发过程，重点讲解了主要技术、设计思想、解决方案。

关键词：在线代码编辑器；HTML；可视化界面；设计

Browser-based code editor

Abstract

With the growing popularity of programming techniques , generalization . a lot of programming languages are more people to grasp , HTML language as an easy -to-understand language is much favored by the encoding lovers. The increased popularity of coded language is edited and brought demand for improved functionality .

A good editor not only to achieve the most basic function , the code is edited into machine language recognizable ; It also need to have a comfortable environment -friendly interface and easy to edit text processing functions. Such editors help increase editing efficiency coding beginners who can raise the interest to continue learning forever. Therefore , in order to more easily encode their own to improve their coding efficiency , so we designed and implemented a simple browser-based code editor.

Editor for online editing functions primarily using HTML, JavaScript, CSS techniques to build web pages from the structure, performance, conduct three levels. Code-editor has highlighting browser under, compatible with multiple browsers. In addition, the editor realized by JSP and Java compiled Java code function online.

This paper describes the development of an important project background , function and development process ,done to highlight the main technical , design ideas, solutions.

Keywords :Browser-based Code Editor; HTML;Class; Design

1. 目录

摘要 iii

Abstract iv

1 引言 1

1.1 研究现状 1

1.2 研究的意义 1

1.3 研究方法及设计思路 1

1.3.1 设计目标 1

1.3.2 设计思路 2

2 应用需求分析与可行性分析 3

2.1 应用需求分析 3

2.2 运行需求分析 3

2.3 其他需求分析 3

2.4 可行性分析 3

2.4.1 经济可行性 3

2.4.2 技术可行性 4

2.4.3 运行可行性 4

2.4.4 时间可行性 5

2.5 项目技术难点 5

3 相关技术简介 6

3.1 eclipse Javaee简介 6

3.2 网页制作技术 6

3.2.1 JavaScript脚本语言 6

3.2.2 CSS样式表 6

3.2.3 jQuery 6

3.2.4 HTML语言介绍 7

3.2.5 Servlet技术 8

4 系统分析 9

4.1 程序中使用的标签及类 9

4.1.1 元素名 9

4.1.2 属性 11

4.1.3 类名 12

4.2 基础主控流程图 14

4.3 用例说明 15

4.4 类说明 15

5 系统设计 17

5.1 概要设计 17

5.2 系统结构设计 17

5.3 详细设计 18

5.3.1 可视化主界面设计 18

5.3.2 Java代码编辑器 19

5.3.3 Java代码编译器 19

6 系统调试与测试 21

6.1 程序调试 21

6.2 程序测试 21

6.2.1 测试的重要性及目的 21

6.2.2 测试的步骤 22

6.2.3 测试的主要内容 22

结束语 25

参考文献 26

致谢 27

1 引言

1.1 研究现状

俗语话，欲善其事，希望你先磨砺自己的工具。想做一件事情，重要的是一件很好的工具。作为程序开发人员，最重要的就是编程。编程就是把人类的思维逻辑用代码来实现，所以编程很大的一部分工作在于编写代码，如果没有一个好的代码编辑器，对于编程来说就是一个灾难。现在国内国外都有不少的代码编辑器可用，对于JAVA、HTML、CSS、JAVASCRIPT等语言都有支持，但是这些编辑器大多都需要在电脑本机上安装，而且集成了太多的功能，体积很大，打开、运行的速度很慢。一来会占用计算机很多的空间，二来使用起来很烦琐。对于一些网络上在线的代码编辑器来说，需要时刻保持网络连接状态，有一些在线的代码编辑器还有可能收费。编程所需的开发时间，对编程者来说是一场灾难。所以一个轻巧的、支持Java语言使用的代码编辑器将是所有Java程序开发者梦寐以求的。随着时代的发展，现在很多人都拥有自己的计算机和智能手机，一般的计算机与智能手机都已经安装有浏览器。如果利用浏览器这个工具，使用网页的方式实现代码编辑器的功能，将可以避免用户再次下载编辑器软件在本机安装的过程，其结果是，减少由计算机的磁盘和存储器容量占据的空间。而且现在JavaScript语言也已经很成熟，可以用js在网页中处理很多复杂的逻辑，所以可以用js编写一些高亮显示、自动格式化的逻辑。

1.2 研究的意义

基于浏览器的代码编辑器能够避免安装编辑器软件的步骤，减少软件安装的空间消耗，而且可以充分利用已有的浏览器软件，实现在计算机和智能手机一致的功能。基于浏览器的代码编辑器使用的是网页显示技术，可以利用HTML CSS技术很容易实现一些用其它技术难以实现的功能。比如：界面布局、个性化订制。由于网页在所有的计算机系统中显示是统一的，所以可以实现代码编辑器一次开发、多个系统应用的目标。对于需要在不同系统进行开发的程序员来说就不需要在不同的系统上安装同一款代码编辑器，可以使用基于浏览器的代码编辑器随时工作。这一款代码编辑器支持的开发语言为JAVA，用户在浏览器的编辑框中输入一些JAVA的语言，提交后由后台编译代码返回代码执行的结果。

1.3 研究方法及设计思路

1.3.1 设计目标

想要设计一种流行的编程技术，它需要具有功能强大，界面友好等优点。我希望制定一个舒适和简单的基于浏览器的代码编辑器。基于浏览器的代码编辑器首先必须是支持多种开发语言的，它能够支持JAVA语言，能够实现地返回编译执行代码的结果。然后，它能够实现支持的开发语言的关键字实时高亮显示，自动格式化，实现“可见即可得”的功能。最后，为了能够实现在多个系统、多个浏览器上显示的一致性，达到一次开发、多次使用的目标，基于浏览器的代码编辑器要能兼容IE8以上版本浏览器，Chrome浏览器，火狐浏览器，Safari浏览器，多浏览器，包Opera浏览器等有必要支持兼容的浏览器。

1.3.2 设计思路

(1)配置tomcat服务器，Java编写后台程序，javascript编写前端程序

(2)后台是服务、数据库，前端为界面，有菜单及编辑区

剩余内容已隐藏，请支付后下载全文，论文总字数：23322字