関数
概要
繰り返し使用するひとまとめのコードをfunctionにより関数を定義可能
１．引数なし
２．引数あり
３．eval命令で関数を実行
４．可変長引数指定
５．引数名を設定
６．引数に関数を指定
７．匿名関数
８．関数内に関数を指定
引数なし関数指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義
function test_func1(){
// 値編集
var aaa = 10;
var bbb = 20;
var ccc = "aaa=" + aaa + " bbb=" + bbb;
return ccc;
}
// 関数の結果を出力
document.write(test_func1());
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
引数あり関数指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義
function test_func2(aaa, bbb){
// 値編集
var ccc = "aaa=" + aaa + " bbb=" + bbb;
return ccc;
}
// 関数の結果を出力
document.write(test_func2(100, 200));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
eval命令で関数を実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義
function test_func2(aaa, bbb){
// 値編集
var ccc = "aaa=" + aaa + " bbb=" + bbb;
return ccc;
}
// 関数名、パラメータを変数に格納
var func = 'test_func2("aaaaaaa", "bbbbbbbbb")';
// eval命令で実行
document.write(eval(func));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
可変長引数指定(arguments)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義
function test_func3(aaa, bbb){
// 値編集
var ccc = "aaa=" + aaa + " bbb=" + bbb;
ccc = ccc + "<br /><br />";
for(var i=2;i<arguments.length;i++){
ccc = ccc + "i=" + i + " value=" + arguments[i] + "<br />";
}
return ccc;
}
// 関数の結果を出力
document.write(test_func3(100, 200, 10, 20, 30));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
argumentsに引数のデータが配列形式で設定されるのでfor文などで制御することで
可変長引数の制御が可能。
ただ、argumentsには引数で設定した値がすべて格納されるので固有の引数と可変長を共存する場合は
パラメータの制御を行う必要がある。
引数名を設定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義
function test_func4(args){
// 値編集
var ccc = "aaa=" + args.aaa + " bbb=" + args.bbb;
return ccc;
}
// 連想配列の形式で制御することで引数名を指定できる
document.write(test_func4({"bbb" : "100", "aaa" : "200"}));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
連想配列の形式で送ることで引数に名前をつけたり、順番を買えて設定することが可能
引数の形式から処理を推測する必要がある場合は理解しにくいが、パラメータの処理は容易となる。
引数に関数を指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義1
function test_func5a(aaa, bbb){
// 値編集
var ccc = "aaa=" + aaa + " bbb=" + bbb;
return ccc;
}
// 関数定義2（この関数でtest_func5aを実行する）
function test_func5_test(func, aaa, bbb){
// 値編集
var ccc = func(aaa, bbb)
return ccc;
}
// 関数名を渡して内部で関数を実行する
document.write(test_func5_test(test_func5a, "123", "456"));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
引数に関数を指定することで別の関数内で渡した関数を実行させることが可能。
匿名関数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義1
function test_func6(f, aaa, bbb){
// 関数の結果を返却
return f(aaa, bbb);
}
// 引数に関数名なしの関数の定義を設定することも可能
document.write(test_func6(function(aaa, bbb){
return "aaa=" + aaa + " bbb=" + bbb;
}, "bbbbbbbbbb", "aaaaaaaaaaaaa"));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
簡単な処理なら名称で定義せずに内部で記述して対応しても可能。
関数の中に関数を指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// 関数定義1
function test_func7(aaa, bbb){
var message = "";
message += "test_func7 start<br /><br />";
// 内部関数を定義
function test_func7sub1(zzz){
message += " test_func7sub1 start<br />";
message += " zzz=" + zzz + "<br />";
message += " test_func7sub1 end<br />";
}
// 内部関数を定義
function test_func7sub2(){
message += " test_func7sub2 start<br />";
message += " test_func7sub2 end<br />";
// 内部関数を定義
function test_func7sub2_1(){
message += " test_func7sub2_1 start<br />";
message += " test_func7sub2_1 end<br />";
}
test_func7sub2_1();
}
// 内部関数を呼び出し
test_func7sub1("111");
message += "<br />";
test_func7sub2("222");
message += "<br />";
// メッセージ出力
message += "test_func7 end<br /><br />";
// メッセージ返却
return message
}
// 引数に関数名なしの関数の定義を設定することも可能
document.write(test_func7("aaa", "bbb"));
document.write("<br />");
// 出力2
document.write("Test Javascript２" + "<br />");
//]]>
</script>
</body>
</html>
関数の中に名前つき関数を定義し、その中で使用することも可能
最終更新：2012年02月16日 20:59
