ホームページ > 記事 > ウェブフロントエンド > Javascript関数学習ノートを整理_JavaScriptスキル
Javascript関数学習ノートを整理_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:28:321308ブラウズ
1. 関数とは
同じコードを複数回使用する必要がある場合は、それらを関数にカプセル化できます。関数は、コード内でいつでも呼び出すことができるステートメントのセットです。各関数は実際には短いスクリプトです。
例: 複数の合計セットの関数を完了する。
var sum; sum = 3+2; alear(sum); sum = 7+8; alear(sum); ......//不停的重复两行代码
8 つのグループの数値の合計を実装する場合、16 行のコードが必要になります。実装するコードの行数も増えます。したがって、特定の機能を実行するコード ブロックを関数内に配置し、その関数を直接呼び出すことができるため、大量のコードを繰り返し入力する手間が省けます。関数を使用して完了します:
function add(a,b){
sum = a+b;//只需要写一次就可以
};
add2(3,2);
add2(7,8);
......//只需要调用函数就可以
2. 関数
を定義します。
関数の構文を定義します
function 函数名(参数argument){
函数体statements;
}
//function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
function shout(){
var beatles = Array("John","Paul","George","Ringo");
for (var count = 0; count < beatles.length; count++){
alert(beatles[count]);
}
}
//这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。
shout();调用函数，执行脚本里的动作
2 つの数値を合計し、結果を表示する関数を完了します:
<script type="text/javascript">
function add2(){
sum = 3+2;
alert()sum;
}
add2();
</script>
3. 関数呼び出し
関数を定義した後は、自動的に実行することはできません。関数を呼び出して、必要な位置に関数名を直接記述する必要があります。
最初のケース: 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内で呼び出されます。
<script type="text/javascript">
function add(){
sum = 1+1;
alert(sum);
}
add();//调用函数，直接写函数名。
</script>
2 番目のケース: ボタンをクリックした後に定義された関数を呼び出すなど、HTML ファイル内で呼び出されます。
<html>
<head>
<script type="text/javascript">
function add2(){
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>
4. パラメータ付き関数
実際、関数定義は次の形式にすることもできます:
function 関数名 (パラメータ 1、パラメータ 2) {
機能コード
}
関数を定義するときは、カンマで区切れば、いくつでも引数を宣言できます。関数内では、そのパラメータを通常の変数と同様に使用できます。
この形式に従って、任意の 2 つの数値の合計を実装する関数は次のように記述する必要があります:
function add2(x,y){
sum = x + y;
document.write(sum);
}
//x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
は次の関数を実装します:
3 つの数値の合計を実装する関数を定義します。関数名は add3 です。
3 つの数値の 2 セットの合計を計算します: 5、8、3/7、1、および 4。
<script type="text/JavaScript">
function add3(x,y,z) {
sum = x + y +z;
document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
}
add3(5,8,3);
add3(7,1,4);
</script>
5. 値を返す関数
関数はデータを (パラメーターの形式で) 受け取るだけでなく、データを返すこともできます。関数を作成して、値、文字列、配列、またはブール値を返すことができます。これには return ステートメントを使用する必要があります。
function multiply(num1,num2){
var total = num1*num2;
return total;
}
以前は「document.write」で結果が出力されていましたが、現在は関数を使用して出力されています
「document.write(sum)」行を次のコードに変更するだけです:
function add2(x,y){
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}
//还可以通过变量存储调用函数的返回值：
result = add2(3,4);//语句执行后，result变量中的值为7。
例: 次の関数にはパラメーター (華氏温度値) が 1 つだけあり、数値 (同じ温度の摂氏温度値) が返されます。
<script type="text/javascript">
function convertToCelsius (temp) {
var result = temp - 32;
result = result / 1.8;
return result;
}
//函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
</script>
この例では、変数 temp_celsius の値は 35 となり、convertToCelsius 関数によって返されます。
変数に名前を付けるときは、単語を区切るためにアンダースコアを使用します。関数に名前を付けるときは、各単語の最初の文字を 2 番目の単語から始めて大文字にします (つまり、キャメルケース)。
1)、変数のスコープ
変数はグローバルまたはローカルのいずれかになります。
グローバル変数 は、スクリプト内のどこでも参照できます。スクリプト内でグローバル変数を宣言すると、関数内を含め、スクリプト内のどこからでもその変数を参照できます。グローバル変数のスコープはスクリプト全体です。
ローカル変数 は、それが宣言されている関数内にのみ存在し、その関数の外で参照することはできません。ローカル変数のスコープは特定の関数に限定されます。
関数変数は、var キーワードを使用して明示的にスコープを設定できます。
var が関数で使用されている場合、その変数はこの関数のコンテキスト内にのみ存在するローカル変数とみなされます。逆に、var が使用されていない場合、その変数はグローバル変数とみなされます。スクリプト内に同じ名前のグローバル変数がある場合、この関数はそのグローバル変数の値を変更します。
例:
function square(num){
total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
这是错误的，number的值为400，但是这里alert弹出的是total的值，应该是50.
这些代码将不可避免地导致全局变量total的值发生变化。
全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number，但因为未把这个函数内部total变量明确地声明为局部变量，这个函数把名字同样是total的那个全局变量的值也改变了。
把这个函数写成如下的样子才是正确的：
function square(num){
var total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
</script>
正确结果：
以上就是关于Javascript函数的学习笔记，还涉及到了一些变量的知识点，希望对大家的学习有所帮助。