文法

関数を作る

<script type="text/javascript">
<!--
function myTest() {
	document.write("こんにちは");
}
// -->
</script>

上記の関数を呼び出す

<body onload="myTest();">

<a href="javascript:myTest();">あいさつ</a>

関数とはプログラムを呼び出して実行するための塊みたいなものです。サブルーチンとも言います。

function ???() {...} の ??? に関数名を付けて、{...} 内にスクリプトを記述します。関数名は変数名と同様に英数字とアンダースコアの組み合わせが使用できます。

スクリプト内にイベントハンドラを使用する場合

<script type="text/javascript">
<!--
window.onload = function() {
	document.write("こんにちは");
}
// -->
</script>

または

<script type="text/javascript">
<!--
function myTest() {
	document.write("こんにちは");
}
window.onload = myTest;
// -->
</script>

関数を呼び出す時にスクリプト内にイベントハンドラを使用する時には、onload, onclick のように小文字で記述してください。

関数に引数を代入する（引数を取得する）

<script type="text/javascript">
<!--
function myTest1(str1, str2) {
	alert(str1 + str2);
}
// -->
</script>

<a href="javascript:myTest1('こん', 'にちは');">あいさつ</a>
<a href="javascript:myTest1(1, 2);">1 + 2 は？</a>

第1引数は変数 str1 に代入され、第2引数は変数 str2 に代入されます。文字列を引数に指定する時は、クォーテーションで括ります。

この場合はアンカーをダブルクォーテーションで括っていますので、引数にはシングルクォーテーションで括るか、クォーテーション内に同じクォーテーションを使用する場合はエスケープ「\」します。

関数に引数を代入する（引数を取得する）

<script type="text/javascript">
<!--
function myTest2() {
	var str1 = arguments[0];	// 1つ目の引数
	var str2 = arguments[1];	// 2つ目の引数
	alert(str1 + str2);
}
// -->
</script>

<a href="javascript:myTest2('こん', 'にちは');">あいさつ</a>
<a href="javascript:myTest2(1, 2);">1 + 2 は？</a>

このように arguments を使用して引数を取得することもできます。引数の値は arguments に配列として格納されていますので、arguments[n] とすると n 番目の引数の値を取得することができます。

関数の戻り値

<script type="text/javascript">
<!--
function getPlatform() {
	var p = navigator.platform;
	return p;
}
function getUserAgent(str) {
	return str;
}
function getScreen() {
	var w = screen.width;
	var h = screen.height;
	return(w + "x" + h);
}

var os = getPlatform();
var ua = getUserAgent(navigator.userAgent);
alert(os + "\n" + ua + "\n" + getScreen());

// -->
</script>

このように関数の実行結果を返すには return を使用します。

この場合は、関数 getPlatform を実行した結果を変数 os に代入、関数 getUserAgent に引数を代入して実行した結果を変数 ua に代入。そして、変数 os と変数 ua と関数 getScreen の結果を表示します。

条件によって振り分ける

<script type="text/javascript">
<!--
var num = 5;
if (num == 5) {
	alert("5 です");
}
else {
	alert("ちがうよ");
}
// -->
</script>

変数 num に 5 を代入します。そうすると if が変数 num は 5 ですか？と聞いてきます。== は「等しい」という意味ですから、その下の「5 です」が表示されます。これは真 (true) であるということになります。また、違うなら else 以下の「ちがうよ」が表示されます。これは偽 (false) であるということになります。

この場合、変数 num は 5 ですから「5 です」が表示されます。

ここに数字の 5 を入れると「5 です」が表示され、それ以外は「ちがうよ」が表示されます。同じ条件分岐でもいろいろな方法があります。条件分岐例

繰り返す

<script type="text/javascript">
<!--//   [1]    [3]    [2]
for (var i = 1; i < 5; i++) {
	alert(i);
}
// -->
</script>

このように継続条件になるまで（3番目が真の間）繰り返し実行されます。

繰り返す

<script type="text/javascript">
<!--
var i = 1;
while (i < 5) {		// i < 5 が継続条件です
	alert(i);
	i++;
}
// -->
</script>

while の値が真 (true) の間、繰り返し実行します。これも for と同様に変数 i に代入されたものを実行して、インクリメントされた変数 i が 5 より小さい間繰り返し実行します。

ループをスキップ、抜ける

<script type="text/javascript">
<!--
for (var i = 1; i < 10; i++) {
	if (i == 2) continue;
	if (i >= 5) break;
	alert(i);
}
// -->
</script>

continue はこのループを飛ばします。break は実行中のループを抜けて終了します。

continue, break がない場合は1～9まで9回アラートが表示されますが、continue によって変数 i の値が 2 の時は実行されずに飛ばされて、変数 i が 5 以上の場合は break によってループを抜けて終了します。

配列

<script type="text/javascript">
<!--
var list = new Array(5);
list[0] = "1つ目";
list[1] = "2つ目";
list[2] = "3つ目";
list[3] = "4つ目";
list[4] = "5つ目";

for (var i = 0; i < list.length; i++) {
	document.write(list[i] + "<br>");	// Array で作られた配列を使用します
}
// -->
</script>

こちらも上記と同様です

<script type="text/javascript">
<!--
var list = new Array("1つ目", "2つ目", "3つ目", "4つ目", "5つ目");

for (var i = 0; i < list.length; i++) {
	document.write(list[i] + "<br>");
}
// -->
</script>

配列を作るには new Array() を使用します。初めに変数名を決めてその変数に対する配列を作ります。new Array(5) のように括弧内に配列の数をあらかじめ決めますが省略しても問題ありません。

定義する配列は、変数名の横に「[ ]」（スクエアブラケット）で囲んだ番号を入れます。この番号は基本的に0からの通し番号とします。

作られた配列の値を呼び出すには、取得したい配列番号付きの変数名を指定します。たとえば、「2つ目」を取得するには、list[1] となります。

new Array() を省略する場合

<script type="text/javascript">
<!--
var list = [];
list[0] = "1つ目";
list[1] = "2つ目";
list[2] = "3つ目";
list[3] = "4つ目";
list[4] = "5つ目";

for (var i = 0; i < list.length; i++) {
	document.write(list[i] + "<br>");
}
// -->
</script>

こちらも上記と同様です

<script type="text/javascript">
<!--
var list = ["1つ目", "2つ目", "3つ目", "4つ目", "5つ目"];

for (var i = 0; i < list.length; i++) {
	document.write(list[i] + "<br>");
}
// -->
</script>

new Array() を省略する場合はスクエアブラケットを使用して配列を作成することもできます。

複数の配列を作る（2次元配列）

<script type="text/javascript">
<!--
var str = "1つ目の1番目";

var list = new Array();
list[0] = [str, "1つ目の2番目"];
list[1] = ["2つ目の1番目", "2つ目の2番目"];
list[2] = ["3つ目の1番目", "3つ目の2番目"];
list[3] = ["4つ目の1番目", "4つ目の2番目"];
list[4] = ["5つ目の1番目", "5つ目の2番目"];

document.write(list[0][0]);		//「1つ目の1番目」を表示
document.write(list[1][0]);		//「2つ目の1番目」を表示
document.write(list[3][1]);		//「4つ目の2番目」を表示
document.write(list[4][1]);		//「5つ目の2番目」を表示
// -->
</script>

このように1つの配列内を [...] で囲み、それぞれの値を「,」（カンマ/コンマ）で区切って複数の値を入れておくこともできます。文字列の場合は通常の配列と同様にクォーテーションで括ります。この配列を取得するには、通常の配列の呼び出し方にその値の番号を追加します。

たとえば、「3つ目の1番目」を取得するには、list[2] の1番目の値を取得したいので、list[2][0] となります。