変数の宣言
ここからは、JavaScriptでプログラムを作成するにあたり必須となる命令を学習していきます。 まずは、数値や文字を変数で扱う方法を学習します。
4.1 変数の宣言
JavaScriptでさまざまな処理を実行するには、数値や文字データを上手に扱っていく必要があります。このとき、便利な役割を果たしてくれるのが 変数です。変数は「数値や文字を入れておくことができる箱」と考えればいいでしょう。そして、それぞれの変数(箱)に自分で好きな名前を付け、変数(箱)の中にあるデータを扱っていきます。

数値や文字を変数として扱うには、初めに変数の宣言を行い、変数(箱)を作成します。この作業は、varに続いて変数名を記述すると実行できます。たとえば、「a」という名前の変数を作成する場合、以下のようにJavaScriptを記述します。
複数の変数を同時に宣言することも可能です。この場合は、変数名を「,」(カンマ)で区切って列記します。たとえば、「x」「y」「st」という変数を同時に宣言する場合は、以下のようにJavaScriptを記述します。
4.2 変数に数値を代入する
変数を宣言できたら、変数に文字を代入します。まずは、変数に数値を代入する方法から解説していきましょう。数値の代入は、「=」(イコール)の記号を使い、左辺に変数名、右辺に代入する数値を記述します。たとえば、「a」という変数に「5」を代入する場合は、以下のように記述します。

このとき、変数の宣言を数値の代入を同じに行う事も可能です。この場合、以下のようにvarに続けて、変数名=値を記します。
※ JavaScriptでは、代入を行う際に「a = 5」のように「=」(イコール)の前後に半角スペースを挿入する場合が多くあります。これはJavaScriptの記述を見やすくするためであり、その結果は「a=5(半角スペースなし)」と全く違いがありません。
4.3 変数に文字を代入する
続いて、変数に文字を代入する方法を解説します。変数に文字を代入する場合も「=」(イコール)を利用し、左辺に変数名、右辺に代入する文字を記述します。このとき、代入する文字を「"」(ダブルクォーテション)または「'」(シングルクォーテーション)で挟むのを忘れないようにして下さい
また、数値の場合と同様に、変数の宣言と文字の代入を同じに行う事も可能です。
4.4 変数の表示
変数に代入した数値や文字は、その変数名記述して利用します。たとえば、変数の内容をメッセージウインドウに表示する場合、alert()のカッコ内に変数名を記述します。
▼Sample4_1.html ※実行ボタンをクリックしてみてください
グローバル変数とローカル変数
変数を利用する際は、変数を宣言する位置にも注意するようにしてください。関数の外で宣言した変数はグローバル変数と呼ばれ、JavaScript全体で利用できる変数となります。一方、関数の中で宣言した変数はローカル変数と呼ばれ、その関数内でのみ利用できる変数となります。

以下はグローバル変数とローカル変数の違いを表した例です。※実行ボタンをクリックしてください。
まずグローバル変数aに代入した数値(10)がalert(a);によって表示されます。続いて、func_A( )でローカル変数aに数値(100)を代入しています。グローバル変数と同じ「a」に代入していますが、ローカル変数はグローバル変数より優先されるので、func_A( );を呼び出した場合、数値は100と表示されます。そしてfunc_B( )ではローカル変数を使用していないので、func_B( )を呼び出した場合、数値はグローバル変数に代入した「10」が表示されます。
演習
(1)JavaScriptを利用し、「Sample4_1.html」のようにボタンをクリックす
ると解答を表示するページを、下のテキストボックスに作成してみましょう。変数名と問題・解答は自分で考えたものを記述してください。
※解答表示用のボタンは<input type="button" value="">で作成します。valueには「""」の間にボタンに表示する文字を書いてください。
※ボタンをクリックすると、関数「kotae()」が呼び出されるように、inputタグにonClickイベントを追加します。
※関数「kotae()」では、変数に答えとなる文字や数字を代入し、alert()で変数を表示します。
※ここに直接入力できます。↓↓(テキストボックス)
→STEP03へ
→STEP05へ