函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
实例:函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<button onclick="showName('ccy')">显示陈传印名字</button>
<button onclick="showName('dy')">显示戴勇名字</button>
<button onclick="showName('zw')">显示张旺名字</button>
</body>
<script>
/*无参函数*/
//function showName() { //这里的括号是包含参数的,没有执行的意思
// alert("zxl")
//}
/*1:直接调用*/
// showName (); //这里的括号是执行的意思
/*2:和元素事件绑定*/
/*形式参数:定义函数时指定的参数,具体数据为什么是由实际参数决定
*实际参数:调用函数的时候指定的参数,实参的值会影响形式参数*/
/*有参函数 在函数中的参数为“形式参数"*/
function showName(name) {
alert(name);
}
</script>
</html>
点击陈传印按钮,会显示ccy,其他同理。
实例:输入数字显示几个helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input name="btn" type="button" value="请输入显示次数"
onclick="showHello(prompt('请输入显示HelloWorld的次数:',''))"/>
</body>
<script>
function showHello(count) {
for (var i = 0; i < count; i++) {
document.write("<h2>Hello World</h2>");
}
}
</script>
</html>
实例:匿名函数及调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
</body>
<script>
/*匿名函数用变量接受。变量名称+()可以让函数执行*/
var show = function () {
alert("1111");
};
// show()
/*匿名函数的自调用
* 1:用括号括起来函数整个
* 2:在函数前面+!*/
!function () {
alert("我是匿名函数")
}();
(function () {
alert("我是匿名函数")
}());
</script>
</html>
实例:省略形参的函数调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Argument</title>
</head>
<body>
</body>
<script>
/*函数在实参个数不确定的时候,可以省略形参,在函数体内部使用arguments
* arguments是一个数组,里面包含了函数调用的所有实参*/
function calc() {
var result = 0;
var length = arguments.length;
if (length == 2) {
/*传递的参数为两个*/
result = arguments[0] + arguments[1];
} else if (length == 3) {
/*传递的参数为三个*/
switch (arguments[2]) {
case"+":
result = arguments[0] + arguments[1];
break;
case"-":
result = arguments[0] - arguments[1];
break;
case"*":
result = arguments[0] * arguments[1];
break;
case"/":
result = arguments[0] / arguments[1];
break;
}
}
return result;
}
var result2 = calc(1, 6, "*");
alert(result2);
// calc(1,6,"*");/*乘法*/
</script>
</html>
实例:递归调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>callee属性</title>
</head>
<body>
</body>
<script>
function show() {
/*arguments.callee属性指向函数本身。
* 可以用于递归*/
console.log(arguments.callee);
}
show("ccy");
/*1+2+3+4.。。+10*/
var sum = 0;
function calc(num) {
sum += num;
num++;
if (num <= 10) {
arguments.callee(num);
}
}
calc(1);
alert(sum);
</script>
</html>
实例:this的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this</title>
</head>
<body>
</body>
<script>
var zhangsan = {
name: "zhangsan",
age: "26",
height: "182",
say: function () {
alert(zhangsan.name);
alert(this);
},
eat: function () {
alert("汉堡!")
}
};
zhangsan.say();
function show() {
alert(this);
}
show();
</script>
</html>
实例:如何程序调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>程序调试</title>
</head>
<body>
</body>
<script>
/*F10:代码一行一行执行,遇到代码块,一步执行完毕
* F11:代码一行一行执行,遇到代码块,进入到代码块内部
* F12:跳出代码块,如果代码运行在代码块内部*/
function showHello() {
alert("Hello1");
alert("Hello2");
alert("Hello3");
alert("Hello4");
alert("Hello5");
}
alert("开始输出Hello");
showHello();
alert("输出Hello结束");
</script>
</html>
实例:全局变量和局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局变量和局部变量</title>
</head>
<body>
</body>
<SCRIPT>
/*全局变量*/
// var num = 10;
function calc1() {
/*局部变量*/
// var num = 10;
/*全局变量:没有用var修饰的变量,会一层一层的往上找。
* 如果找到同名变量,就进行赋值或者是覆盖。
* 如果到最后都没有找到同名变量,就声明一个同名全局变量。*/
num = 10;
alert(num + 15);
}
function calc2() {
alert(num + 20)
}
calc1();
calc2();
</SCRIPT>
</html>