まず、HTMLファイルを作成します。以下のようなコードを記述して保存します。
<!DOCTYPE html>
<html>
<head>
<title>シンプルな計算機</title>
</head>
<body>
<h1>シンプルな計算機</h1>
<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="add()">加算</button>
<button onclick="subtract()">減算</button>
<button onclick="multiply()">乗算</button>
<button onclick="divide()">除算</button>
<p id="result"></p>
<script src="calculator.js"></script>
</body>
</html>次に、JavaScriptファイル（calculator.js）を作成します。以下のようなコードを記述して保存します。
function add() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").innerHTML = "結果: " + result;
}
function subtract() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = "結果: " + result;
}
function multiply() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").innerHTML = "結果: " + result;
}
function divide() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 / num2;
document.getElementById("result").innerHTML = "結果: " + result;
}これで、シンプルな計算機が完成しました。HTMLファイルをブラウザで開き、数値を入力して各ボタンをクリックすると、計算結果が表示されます。
この方法を使用すると、JavaScriptを使ってシンプルな計算機を作成することができます。基本的な四則演算以外にも、他の演算子や機能を追加することも可能です。また、デザインやレイアウトも自由に変更することができます。
以上が、JavaScriptを使用したシンプルな計算機の作成方法です。この方法を参考にして、より複雑な計算機能やUIを実装することもできます。ぜひ、自分なりのアイデアを加えて計算機を作ってみてください。