変数を使用して代入する
<script type="text/javascript">
<!--
suuji = 5;
Kazu = 10;
GOUKEI = suuji + Kazu;

alert(GOUKEI);
// -->
</script>

変数とは値を入れておくことであとからその値を参照したりするためものです。変数名は英数字とアンダースコアの組み合わせによって任意の名前を使用することができますが、変数名の頭文字は数字以外にする必要があります。また、JavaScript で使用される構文名やオブジェクト名、メソッド名は使えません。(中には使用しても問題ないものもありますが、使用されないほうが無難です)

変数名の大文字と小文字はそれぞれ別になります。たとえば str Str STR は全て別の変数となります。

上記の例では、変数 suuji に 5 を代入します。次に変数 Kazu に 10 を代入します。それで、変数 suuji と変数 Kazu の合計を変数 GOUKEI に入れてそれを表示します。よって、この結果は 15 が表示されます。

予約語一覧(変数名や関数名に使用できない名前)
break case catch continue debugger default delete do else false
finally for function if in instanceof new null return switch
this throw true try typeof var void while with  
abstract boolean byte char class const double enum export extends
final float goto implements import int interface long native package
private protected public short static super synchronized throws transient volatile

※mozilla.org の JavaScript 2.0 Compatibility によると、JavaScript 2.0 では予約語が若干変更されています。

変数を宣言する
var a;			// a という変数を宣言
var b, c;		// b と c という変数をまとめて宣言
var d = 1;		// d という変数を宣言して 1 を代入
var e, f = 1;		// e と f という変数を宣言して変数 f に 1 を代入

スクリプトでこの変数を使用しますというのを宣言します。

グローバル変数とローカル変数
<script type="text/javascript">
<!--
function setVariable() {
	a = 2;		// a というグローバル変数をセット(ページ内で使用可能)
	var b = 2;	// b というローカル変数をセット(function setVariable() {...} 内のみ使用可能)
}
function globVariable() { 
	alert(a);	// 変数 a はグローバル変数なので取得ができます
}
function localVariable() {
	alert(b);	// 変数 b はローカル変数なので取得ができません
}

window.onload = setVariable;	// 関数 setVariable の呼び出し
// -->
</script>

globVariable()  localVariable()(取得ができないためエラーになります)

変数名に var が無いときはグローバル変数になりますのでページ内に使用できますが、var を記述した場合はローカル変数になりますのでその範囲内(関数内やブラケット内)のみに使用できます。

ローカル変数のしくみ
<script type="text/javascript">
<!--
var c = 1;
function var1() {
	alert(c);	// この関数の外で宣言されてる現在の変数 c の値を取得
}
function var2() {
	var c = 2;
	alert(c);	// この関数内の変数 c の値を取得(関数の外で宣言されている変数 c とは別物)[必ず 2 を表示]
}
function var3() {
	c = 3;		// この関数の外で宣言されてる変数 c ではなく
	alert(c);	// この関数内の変数 c の値を取得(変数の値が書き換わる)[必ず 3 を表示]
}
function var4() {
	c += 4;
	alert(c);	// 現在の変数 c の値(関数 var2 の変数 c 以外)とこの関数内の変数 c の値を足した値を取得
}
// -->
</script>
現在の変数 c の値(関数 var2 の変数 c 以外): var1()  var2()  var3()  var4()

このように宣言する場所や使い方によって変化します。関数 var2 内の変数 c は、他の変数 c と変数名は同じでも別物なので参照することはできません。

値や式の識別
<script type="text/javascript">
<!--
var str = typeof(123);		// 数値
alert(str);			// number と表示

var str = typeof("abc");	// 文字列
alert(str);			// string と表示

var str = typeof(true);		// 真偽値 (true or false)
alert(str);			// boolean と表示

var str = typeof(window);	// オブジェクト
alert(str);			// object と表示

var str = typeof(escape);	// 関数
alert(str);			// function と表示

var str = typeof(abc);		// 不明な値
alert(str);			// undefined と表示(未定義)
// -->
</script>

typeof(123)  typeof("abc")  typeof(true)  typeof(window)  typeof(escape)  typeof(abc)

typeof() 演算子を使用するとその値や式がどのようなものかを number, string, boolean, object, function, undefined のいずれかを返しますので判別することができます。なお、typeof 123 のように括弧を省略することもできます。

一般的な演算子

代入演算子 - [=]
a = 5;

変数 a に 5 を代入します。この場合、変数 a の値は 5 です。文字列を代入するときには文字列を「"」や「'」で括る必要があります。

算術演算子 - [+] (加算)
a = 10 + 4;

10 と 4 を足した値を変数 a に代入します。この場合、変数 a の値は 14 です。

算術演算子 - [-] (減算)
a = 10 - 4;

10 から 4 を引いた値を変数 a に代入します。この場合、変数 a の値は 6 です。

算術演算子 - [*] (乗算)
a = 10 * 4;

10 と 4 を掛けた値を変数 a に代入します。この場合、変数 a の値は 40 です。

算術演算子 - [/] (除算)
a = 10 / 4;

10 を 4 で割った値を変数 a に代入します。この場合、変数 a の値は 2.5 です。

算術演算子 - [%] (剰余)
a = 10 % 4;

10 を 4 で割った余りの値を変数 a に代入します。この場合、変数 a の値は 2 です。(除算とは違います)

算術演算子 - [++] (インクリメント)
a = 10;
a++;
a = 10;
++a;

++ とは、値に 1 を足すことです。この場合2つとも変数 a の値は 11 です。

インクリメントの前置きと後置きの違い
a = 10;
i = a++;	// i = a; a++; と同じ
a = 10;
n = ++a;	// ++a; n = a; と同じ

上記は、変数 i に変数 a を代入した後で変数 a に 1 を足されます。この場合、変数 i の値は 10, 変数 a の値は 11 です。
下記は、変数 a に 1 を足した後で変数 a が変数 n に代入されます。この場合、変数 a の値は 11, 変数 n の値も 11 です。

算術演算子 - [--] (デクリメント)
a = 10;
a--;
a = 10;
--a;

-- とは、値から 1 を引くことです。この場合2つとも変数 a の値は 9 です。

デクリメントの前置きと後置きの違い
a = 10;
i = a--;	// i = a; a--; と同じ
a = 10;
n = --a;	// --a; n = a; と同じ

上記は、変数 i に変数 a を代入した後で変数 a から 1 を引きます。この場合、変数 i の値は 10, 変数 a の値は 9 です。
下記は、変数 a に 1 を引いた後で変数 a が変数 n に代入されます。この場合、変数 a の値は 9, 変数 n の値も 9 です。

複合代入演算子 - [+=] (加算)
a = 5;
a += 10;	// a = a + 10; と同じ

変数 a と 10 を足した値を変数 a に代入します。この場合、変数 a の値は 15 です。

複合代入演算子 - [-=] (減算)
a = 5;
a -= 10;	// a = a - 10; と同じ

変数 a から 10 を引いた値を変数 a に代入します。この場合、変数 a の値は -5 です。

複合代入演算子 - [*=] (乗算)
a = 5;
a *= 10;	// a = a * 10; と同じ

変数 a と 10 を掛けた値を変数 a に代入します。この場合、変数 a の値は 50 です。

複合代入演算子 - [/=] (除算)
a = 5;
a /= 10;	// a = a / 10; と同じ

変数 a を 10 で割った値を変数 a に代入します。この場合、変数 a の値は 0.5 です。

複合代入演算子 - [%=] (剰余)
a = 5;
a %= 10;	// a = a % 10; と同じ

変数 a を 10 で割った余りの値を変数 a に代入します。この場合、変数 a の値は 5 です。

比較演算子 - 関係演算子 - [<]
a < 5;

変数 a が 5 より小さいことを指します。この場合、変数 a の値は 4321... などを指します。

比較演算子 - 関係演算子 - [<=]
a <= 5;

変数 a が 5 以下のことを指します。この場合、変数 a の値は 5432... などを指します。

比較演算子 - 関係演算子 - [>]
a > 5;

変数 a が 5 より大きいことを指します。この場合、変数 a の値は 6789... などを指します。

比較演算子 - 関係演算子 - [>=]
a >= 5;

変数 a が 5 以上のことを指します。この場合、変数 a の値は 5678... などを指します。

比較演算子 - 等価演算子 - [==]
a == 5;

変数 a と 5 は等しいことを指します。この場合、変数 a の値は 5 です。

比較演算子 - 等価演算子 - [!=]
a != 5;

変数 a と 5 は等しくないことを指します。この場合、変数 a の値は 5 ではないです。

論理演算子 - [!] (論理 NOT)
<script type="text/javascript">
<!--
if (!document.all) {
	alert("Internet Explorer 以外をご使用ですね");
}
// -->
</script>

! は、! 以降の条件を満たしていなければという意味です。

論理演算子 - [&&] (論理 AND)
<script type="text/javascript">
<!--
var a = 1;
var b = 2;	
if ((a == 1) && (b == 1)) {
	alert("当たり");
}
else {
	alert("ちがうよ");
}
// -->
</script>

&& は、左辺 (a == 1) と右辺 (b == 1) の両方が真(正しい)ならば「当たり」を、片方、または両方違ったら「ちがうよ」が表示されます。この場合、a == 1 は等しいですが、b == 1 は等しくないので「ちがうよ」が表示されます。

論理演算子 - [||] (論理 OR)
<script type="text/javascript">
<!--
var a = 1;
var b = 2;	
if ((a == 1) || (b == 1)) {
	alert("当たり");
}
else {
	alert("ちがうよ");
}
// -->
</script>

|| は、左辺 (a == 1) と右辺 (b == 1) のどちらかが真(正しい)ならば「当たり」を、両方違ったら「ちがうよ」が表示されます。この場合、a == 1 は等しくて b == 1 は等しくないですが、片方が等しいので「当たり」が表示されます。

[&&] と [||] の条件式
<script type="text/javascript">
<!--
var a = 1;
var b = 2;
(a == 1) && alert("当たり");		// if (a == 1) alert("当たり"); と同等
(b == 1) || alert("当たり");		// if (!(b == 1)) alert("当たり"); と同等

var c = a && b;				// 変数 a が真ならば変数 b を、偽ならば変数 a を変数 c に代入
var d = a || b;				// 変数 a が偽ならば変数 b を、真ならば変数 a を変数 d に代入

alert(c);				// 2 を表示
alert(d);				// 1 を表示
// -->
</script>

&& の左辺が真ならば右辺を実行(代入)します。|| の左辺が偽ならば右辺を実行(代入)します。

条件演算子(三項演算子) - [条件 ? 真 (true) : 偽 (false)]
<script type="text/javascript">
<!--
var hour = new Date().getHours();
var str = (hour < 12) ? "午前" : "午後";

alert(str);
// -->
</script>

? ... : ... は、変数 hour が 12 より小さければ「午前」を、それ以外なら「午後」を変数 str に代入します。この場合、現在の時間が0〜11時なら「午前」、12〜23時なら「午後」が変数 str に代入されて表示されます。

[PR] 世界にたった一つ、あなただけのドメインを登録しよう!