御隠居のJavaScript入門
３. 変数とデータ型
JavaScriptのプログラムを記述する方法には何種類かありますが、 ここでは最も推奨されている外部ファイルを使用する方法を使います。 この外部ファイルを使用するためには、XHTMLにおいてscript要素を使用します。
<script type="text/javascript" src="外部ファイルへのURL"></script>では、サンプルのXHTMLファイル（test.html）とJavaScript外部ファイル（test.js）をまずは作成してみてください。 このWebページでは、ボタンをクリックすると該当の変数の内容を警告ダイアログで表示するものです。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>はじめてのJavaScriptサンプル</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form action="test.html">
<p>
<input type="button" value="val1の表示" onclick="alert(val1);" /><br />
<input type="button" value="val2の表示" onclick="alert(val2);" /><br />
<input type="button" value="val3の表示" onclick="alert(val3);" /><br />
<input type="button" value="val4の表示" onclick="alert(val4);" />
</p>
</form>
</body>
</html>var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;onclickイベントハンドラ
ある要素がクリックされたり、要素上にマウスカーソルが重なったりなどの動作をイベントと呼びます。 このイベントをキャッチするための指定をイベントハンドラと呼びます。 ここでは、onclickイベントハンドラを使用しています。onclickイベントハンドラは、 指定された要素がクリックされたときに呼びされ、属性値に記述したスクリプトを実行します。
alert()メソッド
JavaScriptには、メソッドと関数と呼ばれる一連の処理群をかたまりとして扱う方法が用意されいます。 ここでは、その詳細には触れず、単に警告ダイアログを表示するalert()メソッドの記述方法だけを説明します。
alert(データ又は変数)alert()メソッドは、警告ダイアログに表示するデータを括弧内に記述します。 この括弧内のデータのことを引数と呼びます。 また、データ以外に変数を記述することもできます。 さらに、説明は先送りにしますが、値を返す関数やメソッドなどを記述することも可能です。
変数
データを入れる容器のことを変数と呼びます。JavaScriptでは、以下の形式で変数を定義します。
var 変数名 = データ変数名は以下のルールに従ってユーザが自由に命名することができます。
- 第１文字目は英大文字、英小文字、アンダースコアで始まる。
- ２文字目以降は英大文字、英子文字、アンダースコア、数字を記述することができる。
- 英字の大文字と小文字は区別される。
- 以下の予約語は使用できない。
abstract boolean break byte case catch char class const continue default delete do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void while with
また、以下のような形式で、変数を定義することも可能だ。
var 変数名ただし、この変数定義の場合、変数名を宣言しただけでデータを持っていない未定義変数となるので、 変数を定義した後、どこかでデータを格納する必要がある。
上記のプログラムでは、JavaScrript外部ファイルが変数の定義のみであり、 そこで定義された変数の値を呼び出しているのがXHTMLファイルのalert()メソッドである。
<input type="button" value="val1の表示" onclick="alert(val1);" /><br />
<input type="button" value="val2の表示" onclick="alert(val2);" /><br />
<input type="button" value="val3の表示" onclick="alert(val3);" /><br />
<input type="button" value="val4の表示" onclick="alert(val4);" />文の区切り
JavaScriptは文とブロックの集まりとして記述される。 このとき文の区切りには、セミコロン「；」を使用する。 別な見方をすれば、文末にはセミコロンを付加すると覚えておけば良いだろう。 ただし、中にはセミコロンを付けない例外となる文もそんざいするので、 最初はサンプルを模倣して、セミコロンを付ける位置を確認しておこう。
上記のプログラムでは、以下の部分が区切りである
<input type="button" value="val1の表示" onclick="alert(val1);" /><br />
<input type="button" value="val2の表示" onclick="alert(val2);" /><br />
<input type="button" value="val3の表示" onclick="alert(val3);" /><br />
<input type="button" value="val4の表示" onclick="alert(val4);" />var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;データ
JavaScriptで扱うデータ（値）には、以下のような種類があり、それをデータの型と呼んでいる。
文字列
文字列は二重引用符「”」、または単一引用符「’」で囲まれた文字の列である。
"abcd" または 'abcd'
上記のプログラムは以下の部分が文字列になっている。
var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;数値
数値には、整数と実数（浮動少数点数）がある。ただし、コンピュータの内部ではすべて浮動小数点数として扱われる。 また、整数には、１０進数、８進数、１６進数が指定でき、浮動少数点数には小数点を使用する方法と指数による方法がある。 これらの詳細については、後述する。
上記のプログラムは以下の部分が数値になっている。
var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;論理値
論理値は、真と偽の２値を表すもので、予約語「true」が真、予約語「false」が偽を意味する。
上記のプログラムは以下の部分が論理値になっている。
var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;null値
nullは特別な値で、意味としては「空」となる。 ただし、未定義ではない。未定義は変数名だけを宣言し、何も値が入っていない状態である。 一方、nullは、「空」という意味の値が変数に格納されている。
上記のプログラムは以下の部分が論理値になっている。
var val1 = "JavaScript";
var val2 = 123;
var val3 = true;
var val4 = null;代入演算子
等号「＝」を代入演算子と呼ぶ。これは等号の右辺の値を左辺に格納することを意味する。 この代入演算子を使用して、上記の外部プログラム部分を書き直すと次のようになる。 なお、変数定義の所で出てきた等号は代入演算子ではなく初期化演算子と呼ばれるものであり別物である。
var val1;
var val2;
var val3;
var val4
val1 = "JavaScript";
val2 = 123;
val3 = true;
val4 = null;