計算プログラムを作る – JavaScript
2つの数字を足し算するプログラムを作ります。
必要な値は？
- 1つ目の数字
- 2つ目の数字
画面に必要なパーツは
- 1つ目の数字を入力するパーツ
- 2つ目の数字を入力するパーツ
- 答えを出すためのボタン
- 答えを表示するパーツ
1つ目の数字を入力するパーツ
<p>1つ目の値：<input type="text" id="num1" /></p>
inputタグはフォームの構成部品（入力欄・ボタン等）用に用意されたものでtype属性の値で様々なパーツになる。
「type=”text”」で１行入力テキストボックスを作る
「id=”num1″」はJavaScriptでパーツを呼び出せるようにid属性で「num1」という名前をつけている。
2つ目の数字を入力するパーツ
<p>2つ目の値：<input type="text" id="num2" /></p>
「id=”num2″」はJavaScriptでパーツを呼び出せるようにid属性で「num2」という名前をつけている。
答えを出すためのボタン
<p><input type="button" value="合計を表示" onclick="sum()" /></p>
「type=”button”」でボタンを作る。
「value=”合計を表示”」はボタン内の文字。
「onclick=”sum()”」はボタンがクリックされた時に「sum()」を呼び出す。
答えを表示するパーツ
<p>合計値：<input type="text" id="total" /></p>
「id=”total”」はJavaScriptでパーツを呼び出せるようにid属性で「total」という名前をつけている。
計算ロジックを考える
- 1つ目の数字を取得して箱（変数）に入れる（代入）
- 2つ目の数字を取得して箱（変数）に入れる（代入）
- 2つの数字を使って計算して計算結果を箱（変数）に入れる（代入）
- 計算結果を答えを表示するパーツに表示する
<script type="text/javascript">
//<![CDATA[
function sum(){
//1つ目の数字を取得して箱（変数）に入れる（代入）
var num1 = document.getElementById('num1').value;
//2つ目の数字を取得して箱（変数）に入れる（代入）
var num2 = document.getElementById('num2').value;
//2つの数字を使って計算して計算結果を箱（変数）に入れる（代入）
var total = parseInt(num1) + parseInt(num2);
//計算結果を答えを表示するパーツに表示する
document.getElementById('total').value = total;
}
//]]>
</script>
解説
function sum(){
//ここに計算結果表示ロジックを記述
}
「<input type=”button” value=”合計を表示” onclick=”sum()”>」答えを出すためのボタンが「onclick=”sum()”」クリックされた時に呼びだす「sun()」関数を定義。
var num1 = document.getElementById('num1').value;
「var num1」は1つ目の値を入れておく箱（変数）を作っている。
「document.getElementById(‘num1’)」はid属性で「num1」と名前をつけた1つ目の数字入力パーツ自体を取得。
「document.getElementById(‘num1’).value」の「.value」は1つ目の数字入力パーツから入力値を取得（取得時はすべて文字列扱い）。
「=」は代入演算子と呼ばれるのもので「右辺の値を左辺に代入する」という意味。<br />つまり「1つ目数字入力パーツの入力値」を「変数num1」に入れる（代入する）。
var num2 = document.getElementById('num2').value;
1つ目と同じ処理内容で2つ目の入力値を「変数num2」に入れる（代入する）。
var total = parseInt(num1) + parseInt(num2);
「var total」は合計値を入れておく箱（変数）を作っている。
「var num1」で作った箱は2回目以降「num1」で呼び出せる。「var」は必要ない。
「parseInt(num1)」は「変数num1」に入っている値（文字列）を数値に変換。
「parseInt(num2)」も同様に数値に変換。
「parseInt(num1) + parseInt(num2)」数値同士を「+」で加算。
※「+」には文字列連結の意味もあるので数値に変換する必要がある
計算結果を「=」を使って「変数total」に入れる（代入する）。
document.getElementById('total').value = total;
入力値取得の時とは逆で、id属性「total」入力パーツ（合計値表示パーツ）の「.value」入力値部分に「変数total」（計算結果）の値を代入して表示。
