函数
<!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>
return语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>return</title> </head> <body> </body> <script> function calc(num1, num2, c) { switch (c) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; } return result; } var r = calc(8, 10, "*"); alert(r); </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>