120 lines
2.5 KiB
HTML
120 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>MincoJS — ミニ電卓</title>
|
||
<style>
|
||
body {
|
||
font-family: monospace;
|
||
background: #fdfaf7;
|
||
color: #333;
|
||
margin: 20px;
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
height: 100px;
|
||
font-family: monospace;
|
||
}
|
||
pre {
|
||
width: 100%;
|
||
height: 150px;
|
||
border: 1px solid #aaa;
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
padding: 8px;
|
||
white-space: pre-wrap;
|
||
}
|
||
#error {
|
||
border: 1px solid #c33;
|
||
background: #fee;
|
||
color: #900;
|
||
padding: 8px;
|
||
white-space: pre-wrap;
|
||
min-height: 1.5em;
|
||
}
|
||
#inputField {
|
||
width: 100%;
|
||
padding: 4px;
|
||
font-family: monospace;
|
||
border: 1px solid #aaa;
|
||
}
|
||
button { margin: 4px; }
|
||
footer {
|
||
margin-top: 2em;
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
border-top: 1px solid #ccc;
|
||
padding-top: 0.5em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>🧮 MincoJSサンプル：ミニ電卓</h2>
|
||
<p>入力欄に「2+3」や「10/4」などと書いて、実行してみようにゃ。</p>
|
||
|
||
<textarea id="code">// このプログラムは、入力欄の数式を評価して結果を表示します。
|
||
let expr = input();
|
||
print("式: " + expr);
|
||
|
||
if (!/^[0-9+\-*/().\s]+$/.test(expr)) {
|
||
print("⚠ 数字と + - * / () だけ使えるにゃ！");
|
||
} else {
|
||
try {
|
||
let result = Function('"use strict";return (' + expr + ')')();
|
||
print("結果: " + result);
|
||
} catch (e) {
|
||
print("❌ 計算できなかったにゃ：" + e.message);
|
||
}
|
||
}
|
||
</textarea><br>
|
||
|
||
<label for="inputField">入力欄：</label>
|
||
<input id="inputField" type="text" value="2+3" placeholder="ここに数式を入力にゃ"><br>
|
||
|
||
<button onclick="runCode()">▶ 実行</button>
|
||
<button onclick="clearOutput()">🧹 クリア</button>
|
||
|
||
<h3>出力</h3>
|
||
<pre id="output"></pre>
|
||
|
||
<h3>エラー</h3>
|
||
<div id="error"></div>
|
||
|
||
<footer>
|
||
🏡 <a href="list.html">MincoJS Village に戻る</a>
|
||
</footer>
|
||
|
||
<script>
|
||
const output = document.getElementById('output');
|
||
const errorBox = document.getElementById('error');
|
||
const inputField = document.getElementById('inputField');
|
||
|
||
function print(...args) {
|
||
output.textContent += args.join(' ') + "\n";
|
||
output.scrollTop = output.scrollHeight;
|
||
}
|
||
|
||
function input() {
|
||
return inputField.value;
|
||
}
|
||
|
||
function clearOutput() {
|
||
output.textContent = '';
|
||
errorBox.textContent = '';
|
||
}
|
||
|
||
function runCode() {
|
||
const code = document.getElementById('code').value;
|
||
try {
|
||
errorBox.textContent = '';
|
||
new Function('print', 'input', code)(print, input);
|
||
} catch (e) {
|
||
errorBox.textContent = '❌ ' + e.message;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|