【ステージ#2】 計算に関するプログラミング問題

《難易度★☆☆》JavaScriptでの四則演算をはじめ基礎的な計算を使うスキルを試します。querySelectorやイベントリスナーについてはステージ#1の復習になるでしょう。

問題

2つの入力できるボックスとメッセージボックス、ボタンAが表示されるHTMLとCSSがすでに用意されています。ここにJavaScriptを書き、以下の問題で指定された機能を追加してください。

  • 問題2-1:ボタンAを押すと2つの入力ボックスに入っている数字の和がメッセージボックスに表示されるようにしなさい
  • 問題2-2:ボタンAを押すと左の入力ボックスに入っている数字を右の入力ボックスで割ったときの「あまり」がメッセージボックスに表示されるようにしなさい
  • 問題2-3:ボタンAを押すと2つの入力ボックスに入っている数字の和の「税込み金額(税率10%、端数切捨て)」がメッセージボックスに表示されるようにしなさい

See the Pen ステージ#2問題 by programmingbird (@programmingbird) on CodePen.

問題2-1の解説と解答例

解説(発想のしかた+ヒント)

① 【JSとHTMLの紐付け】扱うHTML要素はボタンA、2つの入力ボックス、メッセージボックスなのでそれぞれquerySelectorで取得して変数に入れる。変数名は何でもよいが
btnA、left、right、msgにておく。

//JSとHTMLの紐付け
var left = document.querySelector("#left");
var right = document.querySelector("#right");
var msg = document.querySelector("#message");
var btnA = document.querySelector("#a");

② 【トリガーの設定】btnAに、addEventListenerでイベントリスナーをつけて、クリックしたら指定した関数を呼び出すようにする。関数名はとりあえずaddで。

//「トリガー」の設定
btnA.addEventListener("click", add);

③ 【アクションの設定】関数addを用意して、その内容を書いてく。入力ボックスに入っている数字を取得するためには、left.valueとかright.valueと書いてやればいい。和は足し算の答えだから普通に+したいところだけど、javasriptでは+は文字列をつなぐ演算子でもあるから、そのままleft.value+right.valueってやると例えば左が130で右が25のときは13025みたいになってしまうので、これは「数値」だということを示すために1をかけ算しておく。1をかけても当然数字は変わらないけど、かけ算したということは数値だということが伝わるわけだ。ちょっとした裏技。これをmsgのinnnerHTMLに上書きすればよい。

//「アクション」の設定
function add() {
  msg.innerHTML = left.value * 1 + right.value * 1;
}

解答例

See the Pen ステージ#2問題2-1 by programmingbird (@programmingbird) on CodePen.

問題2-2の解説と解答例

解説(発想のしかた)

① 【HTMLとJSの紐付け】は問題2-1と同じ。

② 【トリガーの設定】関数名はとりあえずmodで。

//「トリガー」の設定
btnA.addEventListener("click", mod);

③ 【アクションの設定】関数modの内容を書いていく。割り算のあまりを求めるのは演算子%を使うだけなので特に問題なし。【レッスン#3】 「変数と演算の基本」を学ぶプログラミング教材

//「アクション」の設定
function mod() {
  msg.innerHTML = left.value % right.value;
}

解答例

See the Pen レッスン#2問題2-2 by programmingbird (@programmingbird) on CodePen.

問題2-3の解説と解答例

解説(発想のしかた)

① 【HTMLとJSの紐付け】は問題2-1と同じ。

② 【トリガーの設定】関数名はとりあえずtaxで。

//「トリガー」の設定
btnA.addEventListener("click", tax);

③ 【アクションの設定】関数taxの内容を書いていく。2つの数の和を求めるところまでは問題2-1と同じ。1をかけて数値化するという裏技もまた使っとこう。あとは10%の税込みなので1.1をかけて、端数切捨てはMath.floor()を使う。【レッスン#4】 「乱数の使い方」を学ぶプログラミング教材
カッコが多くなるのでじっくり確認しながら書こう。

//「アクション」の設定
function tax() {
  msg.innerHTML 
    = Math.floor((left.value * 1 + right.value * 1) * 1.1);
}

解答例

See the Pen ステージ#2問題2-3 by programmingbird (@programmingbird) on CodePen.