JavaScriptを使用した簡単な電卓の作り方【サンプルコード＋解説付き】

投稿日: 2023年10月10日 | カテゴリ: ※Web開発, javascript | 投稿者: shimizuya | タグ:
job_illustrator_pc_woman-e 
<!doctype html>
<html lang="ja">

<head>
  <title>電卓</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">


    <style>
          /* テーブルの装飾 */
    table {
      /* 電卓のサイズ */
      width: 300px;
      height: 400px;
      /* 電卓が浮き出るように影を付ける */
      border: solid 1px #dcdcdca4;
      border-right: solid 4px #dcdcdca4;
      border-bottom: solid 4px #dcdcdca4;
      border-radius: 10px;
      /* インライン要素を中央に配置 */
      text-align: center;
      /* 余白調整 */
      padding: 8px;
      margin: 20px;
    }

    input {
      /* ボタンのサイズ */
      width: 70px;
      height: 70px;
      /* ボタンの文字サイズ */
      font-size: x-large;
      /* 数字部分の背景色 */
      background-color: #dcdcdca4;
      /* ボタンの詳細設定 */
      border: none;
      border-radius: 20px;
      /* クリック時の黒枠を消す */
      outline: none;
    }

    /* ディスプレイの詳細設定 */
    .display {
      width: 250px;
      text-align: right; /* 文字を右詰めに */
      /* 見た目の詳細設定 */
      background: #ffffff;
      border-top: solid #dcdcdca4 5px;
      border-bottom: solid #dcdcdca4 5px;
      border-right: solid #b6b6b6 6px;
      border-left: solid #b6b6b6 6px;
      border-radius: 5px;
    }
    /* 演算子の背景色を上書きで設定 */
    .operator {
      background-color: #87cefa;
    }
    /* 記号＝の部分の背景色を上書きで設定 */
    .equal {
      background-color: #b6b6b6;
    }

    /* カーソルを上に乗せた時に色を濃くする */
    input:hover {
      background: #747373b9;
    }
    .display:hover {
      background: #ffffff; /* ディスプレイ部分は無効化 */
    }
    .operator:hover {
      background: #339cdd;
    }

    /* クリック時に色を濃くする */
    input:active {
      background:  #5a5a5a;
    }
    .operator:active {
      background: #2c80b4;
    }
    </style>
</head>

<body>
  <form name="dentaku">
    <table>
      <!-- 液晶画面部分 -->
      <tr>
        <td colspan="4">
          <input type="text" class="display" name="display" value="" disabled>
        </td>
      </tr>

      <!-- 上から1段目（7~9＋÷） -->
      <tr>
        <td><input type="button" value="7" onclick="get_calc(this)"></td>
        <td><input type="button" value="8" onclick="get_calc(this)"></td>
        <td><input type="button" value="9" onclick="get_calc(this)"></td>
        <td><input type="button" value="÷" class="operator" name="div_btn" onclick="get_calc(this)"></td>
      </tr>

      <!-- 上から2段目（4~6＋×） -->
      <tr>
        <td><input type="button" value="4" onclick="get_calc(this)"></td>
        <td><input type="button" value="5" onclick="get_calc(this)"></td>
        <td><input type="button" value="6" onclick="get_calc(this)"></td>
        <td><input type="button" value="×" class="operator" name="add_btn" onclick="get_calc(this)"></td>
      </tr>

      <!-- 上から3段目（1~3＋-） -->
      <tr>
        <td><input type="button" value="1" onclick="get_calc(this)"></td>
        <td><input type="button" value="2" onclick="get_calc(this)"></td>
        <td><input type="button" value="3" onclick="get_calc(this)"></td>
        <td><input type="button" value="-" class="operator" onclick="get_calc(this)"></td>
      </tr>

      <!-- 上から4段目（0/./=/+) -->
      <tr>
        <td><input type="button" value="0" onclick="get_calc(this)"></td>
        <td><input type="button" value="C" onclick="get_calc(this)"></td>
        <td><input type="button" value="=" class="equal" onclick="get_calc(this)"></td>
        <td><input type="button" value="+" class="operator" onclick="get_calc(this)"></td>
      </tr>

    </table>
  </form>
  <footer>
    <!-- place footer here -->
  </footer>

<script>
      function get_calc(btn) {
      if(btn.value == "=") {
        document.dentaku.display.value = eval(document.dentaku.display.value);
      } else if (btn.value == "C") {
        document.dentaku.display.value = "";
      } else {
        if (btn.value == "×") {
          btn.value = "*";
        } else if (btn.value == "÷") {
          btn.value = "/";
        }
        document.dentaku.display.value += btn.value;
        document.dentaku.add_btn.value = "×";
        document.dentaku.div_btn.value = "÷";
      }
    }
</script>

  <!-- Bootstrap JavaScript Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
  </script>
</body>

</html>

1行ずつの解説

HTML

<body>

コードは慎重に使用してください。詳細content_copy

bodyタグは、Webページのコンテンツを記述する部分の開始を示すタグです。

HTML

  <form name="dentaku">

コードは慎重に使用してください。詳細content_copy

formタグは、入力フォームを作成するためのタグです。このコードでは、電卓のボタンや画面を入力フォームとして作成しています。

HTML

    <table>

コードは慎重に使用してください。詳細content_copy

tableタグは、表を作成するためのタグです。電卓のボタンや画面を、表を使って整列させています。

HTML

      <tr>
        <td colspan="4">
          <input type="text" class="display" name="display" value="" disabled>
        </td>
      </tr>

コードは慎重に使用してください。詳細content_copy

trタグは、表の行を作成するためのタグです。tdタグは、表のセル（マス目）を作成するためのタグです。このコードでは、inputタグを使って、電卓の画面を作成しています。type="text"属性は、テキスト入力欄を作成することを指定します。class="display"属性は、CSSで画面の見た目を装飾するために使用します。name="display"属性は、この入力欄の値を取得するために使用します。value=""属性は、初期値を設定します。disabled属性は、入力欄を無効化することを指定します。

HTML

      <tr>
        <td><input type="button" value="7" onclick="get_calc(this)"></td>
        <td><input type="button" value="8" onclick="get_calc(this)"></td>
        <td><input type="button" value="9" onclick="get_calc(this)"></td>
        <td><input type="button" value="÷" class="operator" name="div_btn" onclick="get_calc(this)"></td>
      </tr>

コードは慎重に使用してください。詳細content_copy

inputタグを使って、電卓の各ボタンを作成しています。type="button"属性は、ボタンを作成することを指定します。value属性は、ボタンに表示する文字列を指定します。onclick属性は、ボタンがクリックされたときに呼び出される関数を指定します。このコードでは、すべてのボタンでget_calc()関数を呼び出しています。get_calc()関数は、ボタンの値に応じて、画面に表示する文字列を変更したり、計算を実行したりする関数です。

HTML

      <tr>
        <td><input type="button" value="4" onclick="get_calc(this)"></td>
        <td><input type="button" value="5" onclick="get_calc(this)"></td>
        <td><input type="button" value="6" onclick="get_calc(this)"></td>
        <td><input type="button" value="×" class="operator" name="add_btn" onclick="get_calc(this)"></td>
      </tr>

コードは慎重に使用してください。詳細content_copy

HTML

      <tr>
        <td><input type="button" value="1" onclick="get_calc(this)"></td>
        <td><input type="button" value="2" onclick="get_calc(this)"></td>
        <td><input type="button" value="3" onclick="get_calc(this)"></td>
        <td><input type="button" value="-" class="operator" onclick="get_calc(this)"></td>
      </tr>

コードは慎重に使用してください。詳細content_copy

HTML

      <tr>
        <td><input type="button" value="0" onclick="get_calc(this)"></td>
        <td><input type="button" value="C" onclick="get_calc(this)"></td>
        <td><input type="button" value="=" class="equal" onclick="get_calc(this)"></td>
        <td><input type="button" value="+" class="operator" onclick="get_calc(this)"></td>
      </tr>
    </table>
  </form>

コードは慎重に使用してください。詳細content_copy

残りのコードは、電卓の画面やボタンの見た目を装飾するためのCSSプロパティと、ボタンがクリックされたときに呼び出されるget_calc()関数を定義しています。

初心者向けの解説

このコードを理解するためには、以下のポイントを押さえておくとよいでしょう。

  • HTMLは、Webページの構造を定義する言語です。
  • CSSは、Webページの見た目を整える言語です。
  • JavaScriptは、Webページの動作を制御するための言語です。
  • <table>タグを使って表を作成

ソース

info

  1. github.com/ryomanishida/SpaceExploration

sharemore_vert

<script>
      function get_calc(btn) {
      if(btn.value == "=") {
        document.dentaku.display.value = eval(document.dentaku.display.value);
      } else if (btn.value == "C") {
        document.dentaku.display.value = "";
      } else {
        if (btn.value == "×") {
          btn.value = "*";
        } else if (btn.value == "÷") {
          btn.value = "/";
        }
        document.dentaku.display.value += btn.value;
        document.dentaku.add_btn.value = "×";
        document.dentaku.div_btn.value = "÷";
      }
    }
</script>

1行ずつの解説

JavaScript

function get_calc(btn) {

コードは慎重に使用してください。詳細content_copy

functionキーワードで関数を定義しています。この関数は、ボタンがクリックされたときに呼び出されます。btnは、クリックされたボタンのオブジェクトです。

JavaScript

if(btn.value == "=") {

コードは慎重に使用してください。詳細content_copy

ボタンの値が「=」の場合の処理です。

JavaScript

document.dentaku.display.value = eval(document.dentaku.display.value);

コードは慎重に使用してください。詳細content_copy

document.dentaku.display.valueは、電卓の画面に表示されている文字列です。eval()関数は、文字列を計算式として評価します。このコードでは、画面に表示されている文字列を計算して、結果を画面に表示します。

JavaScript

else if (btn.value == "C") {

コードは慎重に使用してください。詳細content_copy

ボタンの値が「C」の場合の処理です。

JavaScript

document.dentaku.display.value = "";

コードは慎重に使用してください。詳細content_copy

document.dentaku.display.valueを空にします。これにより、画面に表示されている文字列をすべて消去します。

JavaScript

else {

コードは慎重に使用してください。詳細content_copy

ボタンの値が「=」でも「C」でもない場合の処理です。

JavaScript

if (btn.value == "×") {

コードは慎重に使用してください。詳細content_copy

ボタンの値が「×」の場合の処理です。

JavaScript

btn.value = "*";

コードは慎重に使用してください。詳細content_copy

ボタンの値を「」に変更します。これにより、次の演算で「×」を「」として扱うことができます。

JavaScript

} else if (btn.value == "÷") {

コードは慎重に使用してください。詳細content_copy

ボタンの値が「÷」の場合の処理です。

JavaScript

btn.value = "/";

コードは慎重に使用してください。詳細content_copy

ボタンの値を「/」に変更します。これにより、次の演算で「÷」を「/」として扱うことができます。

JavaScript

}

コードは慎重に使用してください。詳細content_copy

「×」または「÷」の場合の処理が終了しました。

JavaScript

document.dentaku.display.value += btn.value;

コードは慎重に使用してください。詳細content_copy

document.dentaku.display.valueに、ボタンの値を追加します。これにより、画面に表示されている文字列にボタンの値を追加します。

JavaScript

document.dentaku.add_btn.value = "×";
document.dentaku.div_btn.value = "÷";

コードは慎重に使用してください。詳細content_copy

「×」ボタンと「÷」ボタンの値を「×」と「÷」に戻します。これにより、次の演算で「×」と「÷」を正しく処理することができます。

JavaScript

}

コードは慎重に使用してください。詳細content_copy

関数の処理が終了しました。

初心者向けの解説

このコードを理解するためには、以下のポイントを押さえておくとよいでしょう。

  • JavaScriptの関数は、functionキーワードで定義します。
  • if文は、条件によって処理を分岐するために使用します。
  • eval()関数は、文字列を計算式として評価します。
  • +演算子は、文字列を連結するために使用します。