JavaScript関数

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


JavaScript 関数の構文

関数は、前に使用されるキーワード function を持つ、中括弧で囲まれたコードのブロックです:

function functionname()
{
コードを実行する
}

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

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

: JavaScript では大文字と小文字が区別されます。キーワード 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('哈利波特','Wizard')">点击这里</button>
<script>
    function myFunction(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>
</body>
</html>

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

プログラムを実行して試してください


戻り値のある関数

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

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

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

構文

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

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

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

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

var myVar=myFunction();

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

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

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

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

関数に渡された引数に基づいて戻り値を作成できます:


インスタンス

2 つの数値の積を計算し、結果を返します:

<!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
}

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


ローカル JavaScript 変数

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

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

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


グローバル JavaScript 変数

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


JavaScript変数の有効期間

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

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

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


未宣言のJavaScript変数への値の代入

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

このステートメント:

carname="Volvo";

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



学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击这个按钮,来调用带参数的函数。</p> <button onclick="myFunction('哈利波特','Wizard')">点击这里</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script> </body> </html>