Skip to content

Commit 3b7266a

Browse files
heartlethheartleth
committed
m
1 parent 9e747a2 commit 3b7266a

File tree

10 files changed

+343
-0
lines changed

10 files changed

+343
-0
lines changed

Diff for: ‎guide/images/l0/code.png

180 KB
Loading

Diff for: ‎guide/images/l0/draw.jpg

67.2 KB
Loading

Diff for: ‎guide/images/l0/enpp.jpg

45 KB
Loading

Diff for: ‎guide/images/l0/trnaspiled.jpg

2.84 KB
Loading

Diff for: ‎guide/images/l1/colon.png

56.7 KB
Loading

Diff for: ‎guide/images/l1/hello.png

62.6 KB
Loading

Diff for: ‎guide/images/l1/prt.png

69.4 KB
Loading

Diff for: ‎guide/images/l4/code.png

139 KB
Loading

Diff for: ‎guide/images/l4/output.png

40.6 KB
Loading

Diff for: ‎guide/lect.html

+343
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>En++ Official document</title>
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<style>
10+
@font-face {
11+
font-family: 'NEXON Lv2 Gothic Bold';
12+
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv2 Gothic Bold.woff') format('woff');
13+
font-weight: normal;
14+
font-style: normal;
15+
}
16+
17+
@font-face {
18+
font-family: 'IBMPlexSansKR-Regular';
19+
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/IBMPlexSansKR-Regular.woff') format('woff');
20+
font-weight: normal;
21+
font-style: normal;
22+
}
23+
24+
25+
* {
26+
font-family: 'IBMPlexSansKR-Regular', 'Courier New', Courier, monospace;
27+
}
28+
29+
.main {
30+
margin: 0px auto;
31+
max-width: fit-content;
32+
}
33+
34+
.main>img {
35+
margin: 0px auto;
36+
}
37+
38+
body {
39+
background-color: rgb(255, 255, 255);
40+
}
41+
42+
.shad {
43+
background-color: white;
44+
border-radius: 16px;
45+
box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.007), 0px 7px 16px rgba(0, 0, 0, 0.116);
46+
padding: 20px;
47+
}
48+
49+
.mainboard {
50+
max-width: 1380px;
51+
margin: 0px auto;
52+
/*margin-top: 20px;*/
53+
}
54+
55+
.codeboard {
56+
height: 900px;
57+
}
58+
59+
.codeboard>div:first-child {
60+
display: flex;
61+
}
62+
63+
.codeboard>div>* {
64+
flex: 1 0 auto;
65+
}
66+
67+
.codeboard>*:first-child>*:first-child,
68+
.codeboard>*:first-child>*:last-child {
69+
text-align: center;
70+
padding: 20px;
71+
width: 33%;
72+
font-size: 30px;
73+
}
74+
75+
.codeboard>*>span {
76+
padding: 0px;
77+
font-size: 40px;
78+
font-weight: lighter;
79+
text-align: center;
80+
}
81+
82+
.code {
83+
border-radius: 16px;
84+
background-color: rgb(41, 41, 41);
85+
color: white;
86+
font-family: consolas;
87+
padding: 20px;
88+
width: 33%;
89+
height: fit-content;
90+
}
91+
92+
.ccode {
93+
border-radius: 16px;
94+
background-color: rgb(41, 41, 41);
95+
color: white;
96+
font-family: consolas;
97+
padding: 20px;
98+
width: fit-content;
99+
height: fit-content;
100+
}
101+
102+
.scode {
103+
border-radius: 16px;
104+
background-color: rgb(41, 41, 41);
105+
color: white;
106+
font-family: consolas;
107+
padding: 8px;
108+
display: inline;
109+
margin-left: 5px;
110+
margin-right: 5px;
111+
}
112+
113+
p {
114+
line-height: 210%;
115+
}
116+
117+
.before-trans {
118+
width: 1000px;
119+
margin-left: 100px;
120+
opacity: 0%;
121+
transition-timing-function: ease-out;
122+
transition-duration: 1s;
123+
}
124+
125+
.after-trans {
126+
margin-left: 0px;
127+
transition-timing-function: ease-out;
128+
transition-duration: 1s;
129+
opacity: 100%;
130+
display: flex;
131+
}
132+
133+
a,
134+
a:visited {
135+
color: royalblue;
136+
text-decoration: none;
137+
}
138+
139+
a:hover {
140+
text-decoration: underline;
141+
}
142+
143+
#official {
144+
display: flex;
145+
}
146+
147+
#official>* {
148+
margin: auto 0;
149+
}
150+
151+
.goods {
152+
max-width: 1380px;
153+
display: flex;
154+
justify-content: space-between;
155+
}
156+
157+
.good {
158+
flex: 1 0 3px;
159+
margin: 20px;
160+
}
161+
162+
.downloadbox {
163+
overflow: hidden;
164+
padding: 0px;
165+
width: 1332px;
166+
height: calc(1194px - 850px);
167+
transition-timing-function: ease-out;
168+
transition-duration: 500ms;
169+
}
170+
171+
.opened-repl {
172+
transition-timing-function: ease-out;
173+
transition-duration: 500ms;
174+
height: 1194px;
175+
}
176+
177+
.downloadbox>* {
178+
margin: 20px;
179+
}
180+
181+
.downloadbox>*:nth-child(2) {
182+
margin: 20px;
183+
display: flex;
184+
justify-content: space-between;
185+
}
186+
187+
.downloadbox>*:nth-child(2)>* {
188+
flex: 1 0;
189+
margin: 10px;
190+
}
191+
192+
.nav {
193+
width: 100%;
194+
height: 60px;
195+
box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.007), 0px 7px 16px rgba(0, 0, 0, 0.116);
196+
background-color: white;
197+
}
198+
199+
.nop {
200+
padding: 0px;
201+
width: 100%;
202+
}
203+
204+
.limage {
205+
margin: 0px auto 0px auto;
206+
width: 50%;
207+
}
208+
209+
.imgwrap {
210+
display: flex;
211+
justify-content: center;
212+
}
213+
</style>
214+
</head>
215+
<body>
216+
<div class="shad mainboard nop">
217+
<div class="shad mainboard">
218+
<h2>Welcome to english++ offical documentation!</h2>
219+
<img src="./images/l0/code.png" alt="">
220+
<img src="./images/l0/enpp.jpg" alt="">
221+
<h2>Hello, world!</h2>
222+
<img src="./images/l1/hello.png" alt="helloworld" width="70%" style="border-radius: 10px;">
223+
<p>이 english++ 코드는 Hello, world! 를 출력합니다.</p>
224+
<ul>
225+
<li>
226+
<p>
227+
1번째 줄 <span class="scode">library standard</span>는 <b>표준 라이브러리</b>를 사용한다는 선언입니다.
228+
표준 라이브러리에는 아래의 println 동작 등 여러가지 필수적이며, 편리한 동작, 클래스 등이 포함되어 들어 있습니다.
229+
</p>
230+
</li>
231+
<br>
232+
<li>
233+
<p>
234+
3번째 줄 <span class="scode">When it starts</span>는 english++ 코드를 실행시키려면 필수적인 코드입니다.
235+
코드가 실행될 도입부를 정의하며, 프로그램이 시작 될 시 저 블록 안의 코드를 실행합니다. 블록은 탭 문자 또는 스페이스들로 이루어져 있으며, 스페이스가 몇 칸인지는
236+
중요하지 않습니다.
237+
하지만 맨 처음에 스페이스 4칸을 사용하였다면 계속 스페이스 4칸을 사용해야 합니다.
238+
</p>
239+
</li>
240+
<br>
241+
<li>
242+
<p>
243+
4번째 줄 <span class="scode">it println about "Hello, world!"</span>는 화면(stdout)에 문자열을 출력한 뒤 한 줄
244+
개행하는 코드입니다. 문자열 말고도 숫자 등등 여러가지 타입이 출력 가능합니다.
245+
주어 it 이 동작 println을 행한다는 뜻입니다.
246+
<span class="scode">about</span>은 전치사이며, with, for, :, -> 이 대신 와도 괜찮습니다. 동작에 어울리는 전치사를 알맞게 쓰시면
247+
됩니다.
248+
마지막 <span class="scode">"Hello, world!"</span>는 목적어이며, 우리가 출력할 문자열입니다.
249+
</p>
250+
</li>
251+
</ul>
252+
<h3>Method 2: 콜론(:) 표기법</h3>
253+
<img src="./images/l1/colon.png" alt="helloworld" width="70%" style="border-radius: 10px;">
254+
<p>주어가 it 이고 목적어가 하나인 문장은 간단하게 <span class="scode">동사: 목적어</span>로 줄일 수 있습니다. 동사와 :은 반드시 붙여 써야 합니다.</p>
255+
<h3>Method 3: print</h3>
256+
<img src="./images/l1/prt.png" alt="helloworld" width="70%" style="border-radius: 10px;">
257+
</div>
258+
<div class="shad mainboard">
259+
<h2>A quick look at the grammar</h2>
260+
<p>REPL will be helpful.</p>
261+
<h3>operators</h3>
262+
<p>English++ has various operators.</p>
263+
<ul>
264+
<li>
265+
<p>산술 연산자: + - * / % plus minus</p>
266+
<ul>
267+
<li>+, plus : 덧셈 연산자</li>
268+
<li>-, minus: 뺼셈 연산자</li>
269+
<li>* : 곱셈 연산자</li>
270+
<li>/ : 나눗셈 연산자</li>
271+
<li>% : 나머지 연산자</li>
272+
</ul>
273+
<p>The plus, minus, -, and % operators must be separated. It should be written as 1 - 1, not 1-1.</p>
274+
<p>You can use 1+1.</p>
275+
</li>
276+
<li>
277+
<p>Binary operators: or, and, <<,>>, <,>, is, is not</p>
278+
<ul>
279+
<li>or, and</li>
280+
<li>
281+
<<,>>: Shift operator
282+
</li>
283+
<li>
284+
<,>: Compare operator
285+
</li>
286+
<li>is: Equivalent to '=='.</li>
287+
</ul>
288+
</li>
289+
<li>
290+
<p>if then else 연산자</p>
291+
<p><span class="scode">if 1 is 1 then 2 else 3</span>의 값은 2입니다.</p>
292+
<p><span class="scode">if 1 is 2 then 2 else 3</span>의 값은 3입니다.</p>
293+
<p><span class="scode">if A then B else C</span>의 값은 A가 참이면 B이고, 거짓이면 C입니다.</p>
294+
<p><span class="scode">if A then B else if C then D else E</span>처럼 여러 조건을 걸 수도 있습니다.</p>
295+
<p>You can also change a line.
296+
<pre class="code">if A then B
297+
else if C then D
298+
else E</pre>
299+
</p>
300+
</li>
301+
<li>
302+
<p>'as' and function complex operator, function operator, unary function operator</p>
303+
<p><span class="scode">a as 10</span> Assign 10 for a. The value of the expression is 10.</p>
304+
<p><span class="scode">a func= 10</span> Assign f(a, 10) into a. The value of the expression is the value assigned into a.</p>
305+
<p><span class="scode">a func! 10</span> The value of the expression is f(a, 10).</p>
306+
<p><span class="scode">func: a</span> The value of the expression is f(a).</p>
307+
</li>
308+
</ul>
309+
<p>Of course, you can concatenate operators in the format 1 + 1 + 1 + 1.</p>
310+
<p>And of course, you can use parentheses in the format 1 + (1 + 1) + 1. It is recommended to use parentheses for functional compound operators and (unary) function operators.</p>
311+
<h2>Condition, Repeat</h2>
312+
<h2>Conditional blocks</h2>
313+
<pre class="code">if 조건
314+
inner code</pre>
315+
<p>Case doesn't matter.</p>
316+
<p>If 1 + 1 is 2, the code that prints Hello twice is:</p>
317+
<pre class="code">if 1 plus 1 is 2
318+
it println about "Hello"
319+
it println about "Hello"</pre>
320+
<h2>Repeat blocks</h2>
321+
<p>There are three types of loop statements.</p>
322+
<h3>For</h3>
323+
<pre class="code">For 요소의타입 요소 of 순회할배열
324+
inner code</pre>
325+
<p>English++ supports arrays that can be simply written as [1..10]. [1..10] is an array containing numbers from 1 to 10 in order with a difference of 1. If you want an array up to 20, you can write [1..20]. If you want the difference of 2, just write [1...20] and 3 dots in the middle. Those numbers can only be constants. [a..b] is not possible.</p>
326+
<p>Using that array, we can write code that prints numbers from 1 to 10. We haven't learned types yet, but let's move on.</p>
327+
<pre class="code">For i of [1..10]
328+
it println about i</pre>
329+
<h3>Repeat</h3>
330+
<pre class="code">Repeat 반복횟수
331+
inner code</pre>
332+
<h3>While</h3>
333+
<pre class="code">While 조건
334+
inner code</pre>
335+
336+
<h3>Class</h3>
337+
<h3>Use</h3>
338+
<h3>async, await</h3>
339+
</div>
340+
</div>
341+
</body>
342+
343+
</html>

0 commit comments

Comments
 (0)