-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (127 loc) · 5.87 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="style.css">
<title>DNCL2 - 大学入試共通テスト「情報」問題言語</title>
<script src="ictl.js"></script>
</head>
<body>
<h1>DNCL2 - 大学入試共通テスト「情報」問題言語</h1>
<form>
<div class="program">
<p>プログラム
<button id="add_if" type="button">条件分岐(if)</button>
<button id="add_for" type="button">繰り返し(for)</button>
<button id="add_while" type="button">繰り返し(while)</button>
<button id="add_vb" type="button">|</button>
<button id="add_end" type="button">⎿</button>
</p>
<textarea id="program" spellcheck="false"></textarea>
<p>
<button id="clear" type="button">新規作成</button>
<button id="format" type="button">プログラム整形</button>
<button id="save" type="button">一時保存</button>
<button id="load" type="button">一時保存からの読み込み</button>
<button id="copy" type="button">URL をコピー</button>
</p>
<p><a href="https://nodai2hitc.github.io/ictl_example/">サンプルプログラム集</a></p>
</div>
<p class="run">
<button id="run" type="button">実行</button>
<input type="checkbox" id="show_javascript" /><label for="show_javascript">変換した JavaScript を表示</label>
</p>
<div class="output">
<textarea id="javascript" readonly></textarea>
<p>出力:</p>
<textarea id="output" readonly></textarea>
</div>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
function format() {
let program = document.getElementById("program").value;
document.getElementById("program").value = ICTL.format(program);
}
function base64encode(str) {
let uint8arr = new TextEncoder().encode(str);
let binStr = Array.from(uint8arr).map(b => String.fromCharCode(b)).join("");
return btoa(binStr).replaceAll("+", "_").replaceAll("/", "-").replaceAll("=", ".");
}
function base64decode(str) {
let binStr = atob(str.replaceAll("_", "+").replaceAll("-", "/").replaceAll(".", "="));
let uint8arr = binStr.split("").map(b => b.charCodeAt(0));
return new TextDecoder().decode(Uint8Array.from(uint8arr));
}
document.getElementById("run").addEventListener("click", function(event) {
document.getElementById("output").value = "";
let program = document.getElementById("program").value;
let js = ICTL.compile(program);
document.getElementById("javascript").value = js;
try {
Function(js)();
} catch(error) {
document.getElementById("output").value = "【エラー】\n" + error.toString();
throw error;
}
});
document.getElementById("clear").addEventListener("click", function(event) {
if (confirm("プログラムを消去します。よろしいですか?")) document.getElementById("program").value = "";
});
document.getElementById("format").addEventListener("click", function(event) {
format();
});
document.getElementById("save").addEventListener("click", function(event) {
localStorage.setItem("dncl2script", document.getElementById("program").value);
});
document.getElementById("load").addEventListener("click", function(event) {
const script = localStorage.getItem("dncl2script");
if (!script) return;
if (!confirm("一時保存してあるプログラムを読み込みます。よろしいですか?")) return;
document.getElementById("program").value = script;
});
document.getElementById("copy").addEventListener("click", function(event) {
location.hash = base64encode(document.getElementById("program").value);
navigator.clipboard.writeText(location.href);
});
document.getElementById("add_if").addEventListener("click", function(event) {
document.getElementById("program").focus();
document.execCommand("insertText", false, "もし 条件1 ならば:\n\nそうでなくもし 条件2 ならば:\n\nそうでなければ:\n\n⎿");
format();
});
document.getElementById("add_for").addEventListener("click", function(event) {
document.getElementById("program").focus();
document.execCommand("insertText", false, "変数名 を 開始番号 から 終了番号 まで 1 ずつ増やしながら繰り返す:\n\n⎿");
format();
});
document.getElementById("add_while").addEventListener("click", function(event) {
document.getElementById("program").focus();
document.execCommand("insertText", false, "条件 の間繰り返す:\n\n⎿");
format();
});
document.getElementById("add_vb").addEventListener("click", function(event) {
document.getElementById("program").focus();
document.execCommand("insertText", false, "|");
});
document.getElementById("add_end").addEventListener("click", function(event) {
document.getElementById("program").focus();
document.execCommand("insertText", false, "⎿");
});
document.getElementById("show_javascript").addEventListener("click", function(event) {
if (document.getElementById("show_javascript").checked) {
document.getElementById("javascript").style.display = "inline";
document.getElementById("output").style.height = "10em";
} else {
document.getElementById("javascript").style.display = "none";
document.getElementById("output").style.height = "28em";
}
});
if (location.href.indexOf("#") != -1) {
document.getElementById("program").value = base64decode(location.hash.replace("#", ""));
}
document.getElementById("program").focus();
});
</script>
</body>
</html>