以下が実際のプログラムです。セキュリティ脆弱性を回避するために、evalや他のサイトに遷移させる機能、リダイレクト機能は含まれていません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>材料管理システム</title>
</head>
<body>
<h1>材料管理システム</h1>
<form id="materialForm">
<label for="name">材料名:</label>
<input type="text" name="name" required><br>
<label for="material">材質:</label>
<input type="text" name="material" required><br>
<label for="size">寸法:</label>
<input type="text" name="size" required><br>
<label for="note">備考:</label>
<input type="text" name="note"><br>
<button type="submit">登録</button>
<button type="reset">リセット</button>
</form>
<ul id="materialList">
</ul>
<button id="printButton" onclick="window.print()">印刷</button>
<script>
// マテリアルオブジェクトを保持する配列
const materials = [];
// フォームの送信イベントを取得
const form = document.getElementById('materialForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // デフォルトの送信動作を防止
const inputs = event.target.elements; // フォームの入力値を取得
const material = {
name: inputs.name.value,
material: inputs.material.value,
size: inputs.size.value,
note: inputs.note.value
};
materials.push(material); // マテリアルリストに追加
displayMaterials(); // マテリアルリストを表示
event.target.reset(); // フォームをリセット
});
// マテリアル一覧を表示する関数
function displayMaterials() {
const list = document.getElementById('materialList');
list.innerHTML = ''; // リストをクリア
materials.forEach(material => {
const li = document.createElement('li');
li.textContent = `${material.name} (${material.material}) ${material.size} ${material.note}`;
const button = document.createElement('button');
button.textContent = '削除';
button.addEventListener('click', () => {
materials.splice(materials.indexOf(material), 1); // マテリアルを削除
displayMaterials(); // マテリアルリストを表示
});
li.appendChild(button);
list.appendChild(li);
});
}
</script>
</body>
</html>
```
ジョークとしては、「材料がないとなったら、自分で探しにいかねば、ノコギリも振れません！」というものがあります。しかし、今回のアプリには関連性が薄いため組み込みませんでした。
