目標

表に値を入力し、行ごとの総和や平均が出力されるプログラムを作ってみよう！

詳細

３✕３の表のうち、一行目には「一列目」「二列目」「計算結果」と表示させ、他の行の一、二列目には数字を入力する箇所を、三列目には列ごとの計算結果を表示する場所を作りましょう。
また、行ごとの計算方法を選択できるメニューと、押すと計算結果が表示されるボタンも置きましょう。

自信のある方は次の説明を見ずに自分で一から作ってみましょう！

HTML

まずは<table>などを利用して表を作ってみましょう。
その後、<input>を使って値を入力する箇所を、<button>を使って計算を行うボタンを、<select>で計算方法を選べるメニューを作成します。<input>には、type = numberを設定するとよいでしょう。
数値を取得する、計算結果を表示するためにidも設定しておきましょう。

CSS

つぎはCSSを使って自分の思うままにスタイルを設定してみましょう。<style>タグを使ってその中にCSSを記述します。
<td>や<th>にはborderを、<table>にはborder-collapse: collapseを設定することで、それらしいボーダーが表示されるようになります。
ある程度できたら次に進みましょう。

値の取得

JavaScriptを使って、入力された値の取得、計算、表示を行いましょう。<script>タグを使ってその中にJavaScriptを記述します。
前もって設定しておいたidの要素を取得するには、「id="～"の要素」ブロックを使いましょう。必要であれば、取得した要素を変数にセットしましょう。
<input>に入力された値を読み取るには「要素内の値を取得」ブロックを、<select>の選択には「要素内の文章を取得」を使いましょう。

計算

取得した値を使って計算を行いましょう。<select>で選択された値によって、計算方法を変えるには、「論理」カテゴリーの「もし～実行～」ブロックなどを使って別々の計算をしましょう。
計算をする前に気をつけなければならないことがあります。それは、「要素内の値を取得」で取得した値は文字列として扱われるため、計算を行う際には数値に変換する必要があるということです。「～を～に変換」ブロックを使いましょう。
そうしたら、「数式」カテゴリーのブロックで計算をしましょう。必要であれば、計算結果も変数にセットしておきましょう。

表示

最後に、計算結果を表示するようにしましょう。ボタンを押すと結果が表示されるようにするために、「～にイベントクリックが発生したときに～」ブロックを使いましょう。ここで注意点ですが、このブロックの内部で<input>の値を取得するようにしてください。そうしないと、取得されるのがinputに何も入っていない最初の一回だけとなり正常に動作しません。計算処理もこのブロックの中に入れ込みましょう。
表示については、「～を～に代入」ブロックを使って、要素内の値を変更することができます。

機能追加

ここまでできたら、さらに機能を追加してみましょう。
「こんなのができたらいいな～」、「こんな機能があったら便利だな～」と想像を膨らませ、趣くままに作ってみましょう。
考えられる機能としては例えば、行の追加や削除機能、セルの色を変える機能などが挙げられます。