<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>
このように宣言する場所や使い方によって変化します。関数 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 ではないです。
<script type="text/javascript">
<!--
if (!document.all) {
alert("Internet Explorer 以外をご使用ですね");
}
// -->
</script>
! は、! 以降の条件を満たしていなければという意味です。
<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;
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>
&& の左辺が真ならば右辺を実行(代入)します。|| の左辺が偽ならば右辺を実行(代入)します。
<script type="text/javascript"> <!-- var hour = new Date().getHours(); var str = (hour < 12) ? "午前" : "午後"; alert(str); // --> </script>
? ... : ... は、変数 hour が 12 より小さければ「午前」を、それ以外なら「午後」を変数 str に代入します。この場合、現在の時間が0〜11時なら「午前」、12〜23時なら「午後」が変数 str に代入されて表示されます。