令和初学習！
web系プログラミング練習第３回です。
第１回はやりたいことはできましたが、できた後の操作に難がありました。
今回は本職がシステムエンジニアのアーシとして、仕様をしっかりと検討し、後続作業の調査・設計・プログラミングを行うアーシに渡したいと思います。
仕様の詳細を詰めすぎると記事としての表現が難しくなるので、ほんの少しだけ、仕様を詳細化します。
今回はJavaScriptを使用した２つの数字の足し算を行いたいと思います。
【仕様】
・２つの数値の足し算をしたい。
・２つの数値はそれぞれテキストボックスに入力する。
・「計算」ボタンを押下して、足し算の結果を「計算」ボタンの真下に表示する。
・異常系（テキストボックスに文字が入力されていたり・桁が計算できないほど膨大だったりなど）の場合はどのような出力結果でも構わない。
【途中経過】
ボタンの使い方は前回学んだので、今回はテキストボックスの使い方を学んでいきます。
テキストボックスはhtmlタグを使用します。
調べてみたら、下記のような数値用のテキストボックスがあるのですね。（文字を入れようとしたら入れられますが・・・）
<input id="id名" type="number" />
計算に使う数値をJavaScriptの方で引き込めるようにidの設定を忘れずに・・・
今回は２つのテキストボックスの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」と単純に文字列結合を行います。
【完成品はこちら！】
数値１
数値２
どうでしょうか？
え？小数位の足し算はできない？
仕様に則り少数は異常値として扱っております・・・・・・
