1.JavaScript函数语法
(1)JavaScript函数通过function关键词进行定义,其后是函数名和括号 ()与花括号{}。
A.函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
B.圆括号可包括由逗号分隔的参数:(参数 1, 参数 2, ...)
C.由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
D.函数参数(Function parameters)是在函数定义中所列的名称。
E.函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
F.在函数中,参数是局部变量。在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
2.JavaScript函数调用
函数中的代码将在其他代码调用该函数时执行:当事件发生时(当用户点击按钮时)、当 JavaScript 代码调用时自动的(自调用)。
3.JavaScript函数返回
当JavaScript到达return语句,函数将停止执行。如果函数被某条语句调用,JavaScript将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用者:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用了一个执行计算的函数,然后返回结果:</p>
<p id="demo"></p>
<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
4.为何使用函数?
能够对代码进行复用:只要定义一次代码,就可以多次使用它。能够多次向同一函数传递不同的参数,以产生不同的结果。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用函数把华氏度转换为摄氏度:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>
</body>
</html>
5.() 运算符调用函数
使用上面的例子,toCelsius引用的是函数对象,而toCelsius()引用的是函数结果。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>不使用 () 访问函数将返回函数声明而不是函数结果:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>
6.用作变量值的函数
函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"温度是:" + toCelsius(86) + " 摄氏度。";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
7.局部变量
在JavaScript函数中声明的变量,会成为函数的局部变量。由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。局部变量在函数开始时创建,在函数完成时被删除。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>myFunction() 之外的 carName 未定义。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML =
typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>