110 lines
2.1 KiB
HTML
110 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>MincoJS — 基礎の森</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: monospace;
|
|||
|
|
background: #fdfaf7;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
pre {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 280px;
|
|||
|
|
border: 1px solid #aaa;
|
|||
|
|
background: #fff;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 8px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160px;
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
#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>JavaScriptの基本を少しずつ試してみようにゃ。</p>
|
|||
|
|
|
|||
|
|
<textarea id="code">// 2. 1から10までの数字
|
|||
|
|
for (let i = 1; i <= 10; i++) {
|
|||
|
|
print(i);
|
|||
|
|
}
|
|||
|
|
</textarea><br>
|
|||
|
|
|
|||
|
|
<label for="inputField">入力欄：</label>
|
|||
|
|
<input id="inputField" type="text" value="" 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>
|