一、本课目标
- 会定义和使用函数
二、什么是函数
- 函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
- 使用更简单：不用定义属于某个类，直接使用
- 函数分类：系统函数和自定义函数
2.1常用系统函数
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var abc = "86";
var strToInt = parseInt(abc);
var str1 = "56.3";
var strToFloat = parseFloat(str1);
var str2 = "abc";
var isNan = isNaN(str2);
document.write("strToInt = " + typeof(strToInt) + "<br>");
document.write("strToFloat = " + typeof(strToFloat) + "<br>");
document.write("isNan = " + isNan + "<br>");
</script>
</body>
</html>
运行结果：
image.png
2.2自定义函数
image.png
参数1、参数2等是函数的参数。因为JS本身是弱类型，所以它的参数没有类型检查和限定。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="显示五次" onclick="study()"/>
<script>
function study() {
for (var i = 0; i < 5; i++) {
document.write("<h4>欢迎学习JavaScript<br></h4>")
}
}
</script>
</body>
</html>
运行结果：
image.png
注：调用函数有两种方式：既可以直接在JavaScript标签中调用该函数，也可以早该标签外边调用。比如设置一个input标签里面的onclick属性的值为该函数。
有参
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="输入次数"
onclick="study(prompt('请输入显示的次数'))"/>
<script>
function study() {
for (var i = 0; i < 5; i++) {
document.write("<h4>欢迎学习JavaScript<br></h4>")
}
}
function study(count) {
for (var i = 0; i < count; i++) {
document.write("<h4>欢迎学习JavaScript<br></h4>")
}
}
</script>
</body>
</html>
注：如果两个函数的方法和参数都相同，则后面的函数会把前面的函数覆盖掉。
三、变量的作用域
- 全局变量
- 局部变量
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body onload="second()">
<script>
var i = 20;
function first() {
var i = 5;
for (var j = 0; j < i; j++) {
document.write(" " + j);
}
}
function second() {
var t = prompt("请输入数值");
if (t > i) {
document.write(t);
} else {
document.write(i);
}
first();
}
</script>
</body>
</html>
结果：
输入67，
image.png
四、事件
image.png
onclick事件不仅仅可以在button按钮中使用。
五、总结
image.png
