编程语言试验之Antlr4+JavaScript实现圈4
参考: ANTLR4: Making a compiler with the JavaScript runtime
演示效果虽弱, 还是先上图吧:
在线演示: 地址.
源码库: program-in-chinese/quan4
下载到本地后在浏览器中打开"圈4.html"就可以在本地试验.
以后设计实现好语言后可以直接用静态网页作在线编程的演示, 觉得还蛮有用.
注: JS代码中各种不良操作(比如全局函数定义). 请勿作为JS学习材料使用. 与前文一样, 此文的目标不是一个实用的编程语言.
语法非常简单(圈4.g4), 只为演示之用. 前文编程语言试验之Antlr4+Java实现"圈2"有更多格式的解释:
grammar 圈4;
程序 : 求约数;求约数 : '求约数' T数 ;T数 : [0-9]+ ;
T空白 : [ \n\t]+ -> skip;
下面命令生成词法语法分析器相关JavaScript文件(圈4.tokens, 圈4Lexer.js, 圈4Lexer.tokens, 圈4Listener.js, 圈4Parser.js):
$ java -cp "antlr-4.7-complete.jar:$CLASSPATH" org.antlr.v4.Tool -Dlanguage=JavaScript 圈4.g4
作为解释器的"定制监听器.js":
var antlr4 = require('antlr4/index');
const 圈4Listener = require('./圈4Listener.js').圈4Listener定制监听器 = function () {圈4Listener.call(this);return this;
}定制监听器.prototype = Object.create(圈4Listener.prototype);
定制监听器.prototype.constructor = 定制监听器;
/*
无需接口定义: enter程序/exit程序/enter求约数
*/
定制监听器.prototype.exit求约数 = function(上下文) {var 原数 = parseInt(上下文.getChild(1).getText());document.getElementById("输出").innerHTML = 原数 + "的约数: " + 求约数(原数);
};function 求约数(原数) {var 约数 = [];for (var i = 1; i < 原数 - 1; i++) {if (原数 % i == 0) {约数.push(i);}}return 约数;
}exports.定制监听器 = 定制监听器;
读取文件输入, 调用附着了定制监听器的分析器"代码分析.js":
const antlr4 = require("antlr4/index")
const 圈4Lexer = require("./圈4Lexer.js")
const 圈4Parser = require("./圈4Parser.js")
const 定制监听器 = require("./定制监听器.js").定制监听器运行();// TODO: 需改进-现为全局, 由于browserify
function 运行() {var 代码 = document.getElementById('输入代码').value;var 输入流 = new antlr4.InputStream(代码)var 词法分析器 = new 圈4Lexer.圈4Lexer(输入流)var 词 = new antlr4.CommonTokenStream(词法分析器)var 语法分析器 = new 圈4Parser.圈4Parser(词)语法分析器.buildParseTrees = trueantlr4.tree.ParseTreeWalker.DEFAULT.walk(new 定制监听器(), 语法分析器.程序())
}window.运行 = 运行;
HTML界面"圈4.html":
<html><head><!-- defer原因: https://stackoverflow.com/a/26077148/1536803 不然需要document.ready判断 --><script src="圈4.js" defer></script></head><body><textarea id="输入代码">求约数50</textarea><button onclick="运行()">运行</button> <span id="输出"></span></body>
</html>
是的, 上面的"圈4.js"需要另行生成. 安装Browserify后运行:
$ browserify 代码分析.js > 圈4.js
编程语言试验之Antlr4+JavaScript实现圈4相关推荐
- 2017-11-26 编程语言试验之Antlr4+Java实现圈2
"中文编程"知乎专栏原文 此文涉及的源码版本: program-in-chinese/quan2 声明 代码来源 How to Create Language Using Antl ...
- 编程语言试验之Antlr4+Java实现圈2
知乎原文 此文涉及的源码版本: program-in-chinese/quan2 声明 代码来源 How to Create Language Using Antlr4 本作主要作为学习Antlr, ...
- javascirpt历史澄清误解基本概念特点编程语言web2.0网页javascript - javascirpt知识大全...
目录 1历史 2澄清误解 3基本概念 4特点 5与Java的不同 6开发工具 历史 大概在1992年,一家称作Nombas的公司开始开发一种叫做C减减(C-minus-minus,简称Cmm)的嵌入式 ...
- 四种最令人讨厌的编程语言:Java、Javascript、C++和Perl
喜欢就关注我们吧! TIOBE 12 月榜单已于日前公布,在最新的排行榜中,C 语言仍高居榜首,其次分别是 Java.Python 和 C++.在编程语言这一领域中,许多编程语言都会随着时间的推移而经 ...
- JavaScript基础第01天—编程语言—计算机基础—初始JavaScript—JavaScript注释—JavaScript输入输出语句—变量的使用—数据类型—关键字和保留字
JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
- JavaScript基础(一)(编程语言,计算机基础,初始JavaScript,JavaScript注释,输入输出语句,变量的概念,变量的使用,数据类型,解释型语言和编译型语言)
JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
- 日语编程语言抚子-第三版实现初探
前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...
- 2017-12-22 日语编程语言抚子-第三版实现初探
前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...
- 2017-12-22 日语编程语言抚子-第三版实现初探 1
前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...
最新文章
- 数据库选型绕不开“CAP定理”是什么
- windows 7硬盘安装Ubuntu 12.04 后出现grub,无法进入系统解决办法
- 基于TensorFlow,人声识别如何在端上实现?
- 从面试蚂蚁失败反思-缓存穿透技术
- 简单的php,php简单语句
- 【教程】javascript浏览器对象入门教程
- [Es] Rejecting mapping update to [xxx] as the final mapping would have more than 1 type [xxx xxx]
- 干货 | 自然语言处理中注意力机制综述
- ELK详解(十九)——Kibana绘图展示
- javascript移动设备触屏事件
- 拓端tecdat|数据挖掘算法在物业设备设施管理的风险识别与防控应用
- 自动控制原理第七版胡寿松pdf_自动控制原理简明笔记—(05)
- Windows问题记录之任务栏图标透明
- IDEA进行对json数据格式化
- 怎么制作linux光盘镜像,linux光盘镜像文件制作攻略
- 读书笔记3|使用Python,networkx对卡勒德胡赛尼三部曲之——《群山回唱》人物关系图谱绘制
- MathPage.wll not found
- 如何在手机上做读书笔记?手机做读书笔记的软件
- mysql binlog是什么_什么是 binlog?
- CAD图层的顺序的调整