アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

足し算をする:ブログでプログラミング3

スポンサードリンク

令和初学習!

web系プログラミング練習第3回です。

 

第1回はやりたいことはできましたが、できた後の操作に難がありました。

arsinput.hatenablog.jp 

 

今回は本職がシステムエンジニアのアーシとして、仕様をしっかりと検討し、後続作業の調査・設計・プログラミングを行うアーシに渡したいと思います。

仕様の詳細を詰めすぎると記事としての表現が難しくなるので、ほんの少しだけ、仕様を詳細化します。

 

今回はJavaScriptを使用した2つの数字の足し算を行いたいと思います。

【仕様】

・2つの数値の足し算をしたい。

・2つの数値はそれぞれテキストボックスに入力する。

・「計算」ボタンを押下して、足し算の結果を「計算」ボタンの真下に表示する。

・異常系(テキストボックスに文字が入力されていたり・桁が計算できないほど膨大だったりなど)の場合はどのような出力結果でも構わない。

 

【途中経過】

ボタンの使い方は前回学んだので、今回はテキストボックスの使い方を学んでいきます。

テキストボックスはhtmlタグを使用します。

 

調べてみたら、下記のような数値用のテキストボックスがあるのですね。(文字を入れようとしたら入れられますが・・・)

 <input id="id名" type="number" />

計算に使う数値をJavaScriptの方で引き込めるようにidの設定を忘れずに・・・

 今回は2つのテキストボックスのidを「num1」「num2」と命名しました。

 

また、計算結果を表示するための場所も用意しておきましょう。

こちらは前回の学習で作り方を覚えましたので、使っていきましょう。

 <div id="result"></div>

 

あとはボタンクリック時に計算を行い、結果を表示する処理を作成するだけです。

見よう見まねですがこんな感じでしょうか。
document.getElementById("sum").onclick = function() {
  a = $("#num1").val();
  b = $("#num2").val();
  res = parseInt(a) + parseInt(b);
  document.getElementById("result").innerHTML = res;

ちなみに、計算部で数値型に変換せず下記のような実装をすると、

res = a +b;

例えばa=10,b=20の結果が「1020」と単純に文字列結合を行います。

 

【完成品はこちら!】

数値1

数値2

 

どうでしょうか?

 

 

え?小数位の足し算はできない?

仕様に則り少数は異常値として扱っております・・・・・・

 

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク