1. 研究目的与意义（文献综述）

编译器是一种将源代码（原始语言）翻译成目标代码（目标语言）的一种计算机程序，其目的是为了将便于程序员编码，阅读，维护的高级程序语言所写的程序，翻译为计算机能解读，运行的低价机器语言的程序，也就是可执行程序。在当代的编译器的主要工作流程有：源程序（source code）-gt;预处理器（preprocessor）-gt;编译器（compiler）-gt;汇编程序（assembler）-gt;目标代码（object code）-gt;链接器（linker）-gt;可执行文件(executables)。但是在编译原理中的一些算法，例如LL(1)文法，LR(1)文法，LALR(1)文法等等，略显复杂抽象，对于初学者来说往往难以仅仅从教材中得以掌握这些重要的算法。同时，鉴于当下已经存在的Lex和Yacc或Flex和Bison等系统的老旧，以及界面上及其不友好等问题，使得编译原理相关算法的难以理解，普及。而在编译器结构中，分为分析(analysis)部分和综合(synthesis)部分，分别对应于编译器前端(front end)和编译器后端(back end)，而在编译器前端中又存在如下依次步骤是：词法分析（lexical analysis），语法分析（syntax analysis）或解析（parsing），语义分析（semantic analysis）；编译器后端步骤为：中间代码生成（intermediate code generation），代码优化（codeoptimization），代码生成（code generation）。即在编译系统中，语法分析器是编译系统的第一个阶段，而自顶向下语法分析方法是一种重要的语法分析方法。

所以针对编译原理以自顶向下语法分析器的原理和构造方法为例，描述了编译器前端的语法分析部分的算法可视化，尤其是对于：实现文法是否为LL(1)文法的判别算法；实现预测分析表的构造；实现递归下降分析程序和表驱动的预测分析等多个方面，以达到最终实现语法分析器关键算法执行的可视化交互仿真的目的，尤其是针对仿真递归下降分析的过程，仿真PDA工作和表驱动的预测分析过程以及最后输出语法分析树这些要点上。同时此设计的系统应该UI设计简洁，便于上手操作，有助于促进同学们可以将多种专业知识和技能相结合在一起综合应用，从而引导他们的学习兴趣，以便于同学们在学习的过程中，可以进一步的理解学生们更加直观地观察和理解编译器中相关算法的实现过程，原理，同时进而变相提高同学们在高级程序设计语言上的编程能力。

2. 研究的基本内容与方案

对编译器前端部分：词法分析，语法分析，语义分析进行算法的可视化，尤其是实现一个自顶向下的语法分析器，而自顶向下分析法主要包括递归下降分析法和LL(1)分析法。从而实现文法编辑与检查，词法分析，语法分析，语义处理和代码生成过程的动态可视化展示过程，使得同学们能够更加直观地理解高级程序设计语言的编译过程，在编译原理的理解上得以升华，能够促进学生在专业知识和实践上的综合发展。

在Web端上对自顶向下语法分析器进行开发，拟采用HTML，CSS，JavaScript以及D3.js和ECharts（一个使用JavaScript实现的开源可视化库）用于数据的可视化工作，便于画出语法分析树，下推自动机等相关，并且同时可以保证支持以Canvas,SVG(4.0 ),VML的形式渲染，VML可以兼容低版本IE，SVG使得移动端不再为内存担忧，Canvas可以轻松应对大数据量和特性的展现，不同的渲染方式提供了更多的选择，使得网页可以流畅地运行在PC和移动设备上，并且兼容目前绝大部分主流浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，提供直观，交互丰富可高度个性化定制的数据可视化交互仿真过程。

3. 研究计划与安排

(1)2018/1/14—2018/3/5：确定选题，查阅文献，外文翻译和撰写开题报告；

(2)2018/3/6—2018/4/30：系统架构、程序设计与开发、系统测试与完善；

(3)2018/5/1—2018/5/25：撰写及修改毕业论文；

4. 参考文献（12篇以上）

[1]王涛,卢军,张凯兵. 一种基于图形可视化的编译原理计算机辅助教学系统[j]. 湖北工程学院学报,2015,03:85-88.

[2]许智宏,李显,高静静. 高级语言编译过程可视化研究[j]. 教育教学论坛,2012,10:30-31.

[3]但静培,渡边坦. 基于编译技术的程序可视化[j]. 计算机应用研究,2002,10:51-52 7