JavaScript関数


関数はイベント駆動型、または呼び出されたときに実行される再利用可能なコードのブロックです。

例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

例の実行»

オンライン例を表示するには、[例の実行]ボタンをクリックしてください

JavaScript関数の構文

関数は、中括弧で囲まれたコードブロックであり、キーワードが含まれています前で使用される関数:

関数 関数名()
{
コード実行
}

この関数が呼び出されると、関数内のコードが実行されます。

関数は、イベントが発生したとき (ユーザーがボタンをクリックしたときなど) に直接呼び出すことができ、JavaScript によってどこからでも呼び出すことができます。

lampJavaScriptでは大文字と小文字が区別されます。キーワード function は小文字である必要があり、関数は関数名と同じ大文字と小文字を使用して呼び出される必要があります。

パラメータを使用して関数を呼び出す

関数を呼び出すとき、値を渡すことができます。これらの値はパラメータと呼ばれます。

これらのパラメータは関数で使用できます。

必要なだけパラメータをカンマ (,) で区切って送信できます:

myFunction(argument1,argument2)

関数を宣言するときは、パラメーターを変数として宣言します。

function myFunction(var1,var2)
{
code
}

変数とパラメータは一貫した順序で指定する必要があります。最初の変数は、渡された最初のパラメータの指定された値であり、以下同様です。

インスタンス

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

上記の関数は、ボタンをクリックすると「ようこそハリー・ポッター、魔法使いです」というプロンプトを表示します。

関数は柔軟で、さまざまなパラメーターを指定して関数を呼び出すことができ、さまざまなメッセージが表示されます:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックします

どのボタンをクリックするかに応じて、上の例では「ようこそ、魔法使いのハリー・ポッター」または「ようこそ、ビルダーのボブ」というプロンプトが表示されます。

戻り値のある関数

関数が呼び出された場所に値を返したい場合があります。

これは return ステートメントを使用して実現できます。

return ステートメントを使用すると、関数は実行を停止し、指定された値を返します。

Syntax

function myFunction()
{
var x=5;
return x;
}

上記の関数は値 5 を返します。

注: JavaScript 全体の実行は停止されず、関数のみが停止されます。 JavaScript は、関数が呼び出された場所からコードを実行し続けます。

関数呼び出しは戻り値に置き換えられます:

var myVar=myFunction();

myVar 変数の値は 5 で、これは関数 "myFunction()" によって返される値です。

変数として保存しなくても、戻り値を使用できます:

document.getElementById("demo").innerHTML=myFunction();

"demo" 要素の innerHTML は、関数 "myFunction()" によって返される値である 5 になります。

関数に渡されたパラメータに基づいて戻り値を作成できます:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

関数を終了したいだけの場合は、return ステートメントを使用することもできます。戻り値はオプションです: 

function myFunction(a,b)
{
	if (a>b)
	{
		return;
	}
	x=a+b
}

a が b より大きい場合、上記のコードは関数を終了し、a と b の合計を計算しません。

ローカル JavaScript 変数

JavaScript 関数内で (var を使用して) 宣言された変数は ローカル 変数であるため、関数内でのみアクセスできます。 (この変数のスコープはローカルです)。

変数が宣言されている関数のみが変数を認識するため、異なる関数で同じ名前のローカル変数を使用できます。

関数の実行が完了すると、ローカル変数はすぐに削除されます。

グローバル JavaScript 変数

関数の外で宣言された変数は グローバル変数であり、Web ページ上のすべてのスクリプトと関数からアクセスできます。

JavaScript 変数の有効期間

JavaScript 変数の有効期間は、宣言された時点から始まります。

ローカル変数は関数の実行後に削除されます。

グローバル変数はページを閉じると削除されます。

宣言されていないJavaScript変数への値の代入

まだ宣言されていない変数に値を代入すると、その変数は自動的にグローバル変数として宣言されます。

このステートメント:

carname="Volvo";

は、関数内で実行された場合でも、グローバル変数 carname を宣言します。