-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (80 loc) · 3.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script type="text/javascript" src="scripts/parse.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="scripts/drawstatediagram.js"></script>
<title>LR(1)</title>
</head>
<body>
<header>
<h1>LR(1) 文法分析器演示</h1>
<p>创建一个LR(1)文法，并观察它是如何工作的</p>
</header>
<main>
<section>
<h2>文法</h2>
<p>如何编写文法：</p>
<ul>
<li>输入的文法必须是拓广文法</li>
<li>第一个符号必须是开始符</li>
<li>产生式左部和右部之间使用"->"隔开，'ε'使用'@'代替</li>
<li>每一行只可以写一个产生式，并且不能有空行</li>
<li>不要写结束标记</li>
</ul>
<textarea id="grammar-text" placeholder="grammar"></textarea>
<p>
<button type="button" id="create-parser" onclick="createGrammer()">创建一个LR(1)分析器</button>
<button type="button" id="show-example" onclick="showExample()">展示一个示例</button>
<button type="reset" id="clear" onclick="clearGrammer()">清空</button>
</p>
<div id="grammar-container" class="container code-container"></div>
</section>
<section>
<h3>项目集</h3>
<div id="collection-container" class="container code-container"></div>
</section>
<section>
<h3>分析表</h3>
<div id="parse-table-container" class="container table-container">
<table id="parse-table" class="parse-table"><caption>分析表</caption>
<tr><th rowspan="2">状态</td><th id="table-actions">动作</th><th id="table-trans">转移</th></tr>
<tr id="table-col-item"></tr>
</table>
</div>
</section>
<section>
<h2>分析</h2>
<p>如何输入：</p>
<ul>
<li>每一次只允许输入一个式子</li>
</ul>
<textarea id="parse-text" placeholder="input" onchange="parseTextChange()"></textarea>
<p>
<button type="button" onclick="parseTextOneStep()">单步演示</button>
<button type="button" onclick="showAllParseStep()">一键查看分析结果</button>
<button type="button" onclick="clearParseText()">清空</button>
</p>
</section>
<section>
<h3>分析步骤</h3>
<div id="parse-steps-container" class="container table-container"></div>
<p>
<button type="button" onclick="parseTextOneStep()">单步演示</button>
</p>
</section>
<section>
<h3>状态转换图</h3>
<div id="parse-state-container" class="container state-container"></div>
</section>
</main>
<footer>
<p>
页脚
</p>
</footer>
</body>
</html>