-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
321 lines (282 loc) · 14.6 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExpL | Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<style>
.fixed-pos{
position: absolute;
top: 70px;
left: 400px;
}
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch-wrapper em {
margin-left: 10px;
font-size: 1rem;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<div class="theme-switch-wrapper fixed-pos">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em>Toggle Dark Mode</em>
</div>
<script>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
location.reload();
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
location.reload();
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
<header class="center clearfix" id="navtop">
<div>
<div class="fleft">
<div class="columnlogo">
<p>
<a href="index.html" class="logo fleft"><img src="img/logo.png" alt="" /></a>
</p>
</div>
<div>
<p style="font-size:3em; height: ">EXPERIMENTAL LANGUAGE</p>
</div>
<div style="background-color: #dff0d8;padding:4px 8px;border-radius: 4px; margin: 0 0 1em;">
<h4 style="font-size: 16px">
mkDocs version of this site is available at <a href="https://silcnitc.github.io/expl-docs" target="_blank">silcnitc.github.io/expl-docs</a>
</h4>
</div>
</div>
<div class="fright">
<nav>
<ul>
<li><a href="index.html" class="navactive">Home</a></li>
<li><a href="about.html">About</a></li>
<!-- <li><a href="help.html">Help</a></li> -->
<li><a href="roadmap.html">Roadmap</a></li>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="studentfeedback.html">Student Feedback</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="main center container">
<section class="part clearfix">
<header class="title clearfix">
<!--<p class="fleft">Home</p>
<a href="about.html" class="arrow more fright">see more infos</a> -->
</header>
<div class="column2 mright">
<h1>WRITE</h1><h1>YOUR OWN</h1><h1>COMPILER!</h1>
</div>
<div class="halfmleft col-xs-12 col-md-6">
<div class="panel-body ">
<div class="row row-table row-flush">
<span><img style="max-width:25%" src="img/github.jpg" ></img> <span>
<span>
<h5>Source Code</h5>
<p>The entire project code is hosted on Github <b><a style="color:blue" href="http://github.com/silcnitc" target="_blank">http://github.com/silcnitc</a></b>
<span style="color:red"> <br>Release Version 1.0<br><br><br></span></p>
</span>
</div>
</div>
</div>
<div>
<p>
This project aims to develop an online self-sufficient educational platform to help undergraduate Computer Science students understand the functioning of a compiler for a simple procedural language by writing a small toy compiler themselves. (An object oriented extension for the language has been added subsequently.) The project will provide students with a <a href="roadmap.html" target="_blank">roadmap</a> for the development process and guide them along the roadmap with supporting documentation. Using the step-by-step guidance offered by the roadmap, the students will be able to build the compiler under minimal expert supervision.
</p>
<p>
The platform is designed assuming that the student has a basic knowledge of Data structures, Computer organization and a working proficiency of the C programming language. Being instructional in nature, this project tries to give some insight into the working of LEX, YACC and the usage of these tools to develop a compiler for an instructional language custom designed for the project - called ExpL (Experimental language). Brief theoretical explanations are provided on a <i>need-to-do</i> basis.
</p>
<p>
<p> If you wish to get started with the project directly, proceed to the <a href="roadmap.html" target="_blank">roadmap</a>. If you wish to get a high level overview of the project, a brief outline is given next.
</p>
<p>
If you wish to customize this project for your instructional requirements, proceed <a href="#contribution">here</a>.
</p>
<hr>
</p>
<h2>Overview of the project</h2>
<p>
To design a compiler, one needs the following specifications: <br><br>
1. <i>The specification of the source programming language</i>: The source language for this compiler is called the Experimental Language (ExpL), which is designed solely for instructional purposes. An informal specification of the source language is given <a href="expl.html" target="_blank"> here</a>. The specification for an extension of the basic ExpL language with support for object oriented programming is given <a href="oexpl-specification.html" target="_blank">here</a>.
</p>
<p>
2. <i>Application Binary Interface of the target platform</i>: A compiler must generate a binary executable file that can be loaded and executed by an operating system running on a target machine. Normally, an OS system installation comes with an interface specification, explaining how binary executable files must be formatted to run on the system. This interface is called the Application Binary Interface (ABI). The ABI is dependent on both the OS and the machine architecture. The ABI for this project is that of the Experimental Operating System (ExpOS) running on the Experimental String Machine. [XSM]. The ABI specification is given <a href="abi.html"> here</a>. (The simulator allows the target program to contain machine instructions in mnemonic form, avoiding translation to binary format).
</p>
<p>
A compiler takes a source language program as input and produces an executable target file formatted according to the requirements laid down by the ABI. Of course, the semantics of the program must be preserved by the translation process.
</p>
<p>
The main intellectual complexity in understanding a compiler is that its inputs and outputs are programs – that is, a compiler's input data is a (source language) program and its output is a (target language) program. The task is to systematically map each construct in the source program to semantically equivalent constructs in the target language.
</p>
<p>
A text book approach to compilation logically divides the process into several parts. The lexical elements of the input program are identified during a <i>lexical analysis phase</i>. The software tool LEX is used in this phase. The lexemes identified by the lexical analysis phase are passed to the next phase – called the <i>syntax analysis phase</i> - which checks the program against syntax errors. If the program is free of syntax errors, the next conceptual stage called the <i>semantic analysis phase</i>, checks for type and scope errors in the program. Once a program is found to be free of syntax and semantic errors, an intermediate representation of the source program called the <I>abstract syntax tree</i> representation is generated by the compiler. (In practice, syntax analysis, semantic analysis and abstract syntax tree construction happens together. The syntax directed translation scheme provided by the software tool YACC is used for completing these phases.) The sequence of phases starting with the lexical analysis of the source program to generation of abstract syntax tree representation is called the <i>front end</i> of the compiler.
</p>
<p>
<br><img src="img/flowdiagram.png"><br>
</p>
<p>
The abstract syntax tree produced by the front end is the input to the back end phase which generates an assembly language program. Finally, a label translation phase is run to replace symbolic labels in the assembly language program with logical addresses (linking) and generate final target executable file.
</p>
<p>
The road-map takes you through a "spiral" model of program development. First, a simple expression compiler is built. Static variables are then introduced to the expression compiler and control flow constructs are added. In the next step, support for string type is added to the language and semantic issues are addressed. Subroutines and run time allocation are introduced subsequently and finally support for user defined types and dynamic memory allocation is added. (A final phase of providing support for classes and subtype polymorphism has been added subsequently). In each of these steps, you will encounter lexical, syntax and semantic analysis, syntax tree construction and code generation. The tasks will be very simple during the initial stages and the complexity will grow gradually as more and more features are added to the language.
</p>
<p>
Wish you good luck working through the <a href="http://silcnitc.github.io/roadmap.html" target="_blank">road-map</a>.
</p>
</div>
</section>
<!-- <section class="part clearfix">
<header class="title clearfix">
<p class="fleft"><h5>The three steps</h5></p>
<a href="services.html" class="arrow more fright">see more services</a> </header>
<article class="column3 mright services">
<p class="number"><a id="S1"></a>Step 1</p>
<div class="sepmini"></div>
<h5>Installation</h5>
<div class="sepmini"></div>
<p>This is the key to start. This section gives step-by-step instructions for installation of the compiler development tools and the C compiler which are used to develop SILC</p>
<a href="install.html" class="arrow fright">proceed to the installation</a>
</article>
<article class="column3 mright services">
<p class="number">Step 2</p>
<div class="sepmini"></div>
<h5>Documentation</h5>
<div class="sepmini"></div>
<p> This section contains all the documentation that the student requires in order to develop the perfect Simple Integer Language Compiler.
</p>
<a href="documentation.html" class="arrow fright">proceed to the documentation</a>
</article>
<article class="column3 services">
<p class="number">Step 3</p>
<div class="sepmini"></div>
<h5>Roadmap</h5>
<div class="sepmini"></div>
<p>Well, as the name suggests, this is the route to take during the journey. This section is the guide to proper usage of the documentation and the tools.</p>
<a href="#" class="arrow fright">proceed to the roadmap</a>
</article>
</section> -->
<hr>
<h3 id="contribution">Customizing the Project </h3>
<p> If you wish to adapt the project to your own instructional
requirements, this is how we suggest you to proceed.
</p>
<p>
Suppose your institution has the name ABC University,
download the ExpL source and create your
own Git repository "explabc.github.io".
You can now modify the specification/simulator/ABI
or any other component of this package, subject to the
<a href="http://silcnitc.github.io/about.html#navlic" target="_blank">license conditions</a>. You will have
your version of ExpL in this way. We encourage you to do this as
you will develop your own instructional
system and a team of students who can help you with
the administration of your Git repository.
We recommend you to keep your repository in Git so
that students elsewhere will also get the benefit of your contribution.
<!--You may also have a look at the pedagogical strategy
and student feedback data. -->
</p>
</div>
<footer class="center part clearfix">
<ul class="social column3 mright">
<li><a href="https://github.com/silcnitc">Github</a></li>
<!-- <li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Flickr</a></li>
-->
<li> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="img/creativecommons.png" /></a></li>
</ul>
<div class="up column3 mright">
<a href="#navtop" class="ir">Go up</a>
</div>
<!--
<ul class="social column3 mright">
<li> <a href="#navtop" class="ir">Go up</a></li>
</ul>
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="img/creativecommons.png" /></a>
-->
<nav class="column3">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</footer>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.5.1.min.js"><\/script>')</script>
<script src="js/slides.min.jquery.js"></script>
<script src="js/scripts.js"></script>
<script src="js/inject.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<![endif]-->
</body>
</html>