計算機を作る

きっかけ

Udemyで学んだばかりの知識をアウトプットするため

Udemy

Udemy
ウェブ開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！
https://www.udemy.com/course/web-application-development/

主にセクション9(Javascript入門)及びセクション10(Javascript DOM操作)の知識

ざっくりとした構想

テキスト入力計算機（今回は足し算のみ）を作る
２つの数値入力欄を作成し、入力された値を取得
取得したのちに、足し算を行う処理を書き
結果をli要素としてul要素に追加していく

完成物(スクリーンショット)

二つのテキストボックスに数値を入力し、計算ボタンを押すと足し算が行われ、上のスペースに計算結果を表示している。

サンプルコード

addtion.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jsを使って足し算</title>
  </head>
  <body>
    <ul id="lists"></ul>
    <input id="number1" type="text">
    <span>+</span>
    <input id="number2" type="text">
    <input id="calculate" type="button" value="計算">

    <script src="js/addtion.js"></script>
  </body>
</html>

addtion.js

document.getElementById('calculate').onclick = function () {
  var li = document.createElement('li');
  var number1 = parseFloat(document.getElementById('number1').value);
  var number2 = parseFloat(document.getElementById('number2').value);

  var result = document.getElementById('calculate').textContent = number1 + number2;
  var number = document.createTextNode(result);

  li.appendChild(number);

  var lists = document.getElementById('lists');
  lists.appendChild(li);
};

参考サイト

<input type="text">で数値のみ入力する方法

Javascriptの積の計算結果が出て来ません

Javascript MDN:parseFloat()

今後の構想

０〜９までの数字ボタンで数値を入力する機能と四則計算が行える計算機を作る
一気に作ると大変なので、次回は引き算機能追加など、少しずつ機能を追加していく。

javascriptを使って簡単な計算機を作る 入門者向け