1.了解函数定义方法
仅介绍两种主流方法:
1.表达式
var 函数名 = function(形参){
函数体
}
使用例:
var lookProgram = function (num1,num2){
var sum = num1 + num2;
console.log(sum);
}
lookProgram(5,3)
//最终输出结果是8
2.声明
function 函数名(形参){
函数体
}
使用例:
function lookProgram(num1,num2){
var sum = num1 + num2;
console.log(sum);
}
lookProgram(5,3)
//最终输出结果是8
2.调用自定义函数
注:本文仅使用声明函数的方式举例。
首先是对形参与实参概念的抽象化理解:将形参抽象为“变量”,实参即为要赋给此“变量”的值,形参也和“变量”一样由程序员取名。
形参理论上可以无限多,两个形参中用逗号隔开,实参数量应当与形参相同。
对无形参函数的调用:
function printTen(){//无形参
var i = 9 + 1;
console.log(i);
}
printTen();//直接进行调用
对有形参函数的调用:
function printSum(num1,num2){//有形参,
var sum = num1 + num2;
console.log(sum);
}
printSum(5,8);//输入实参进行调用
//最终输出结果为13
更多自定义函数示例:
function getStar(c1,c2){
var e;
e = c1 * c2;
document.write(e);
document.write('<br/>');
}//乘法函数
function fangP(a1,a2){
var e;
e = a1 + a2;
document.write(e);
document.write('<br/>');
}//加法函数
function kanSp(b1,b2){
var e;
e = b1 - b2;
document.write(e);
document.write('<br/>');
}//减法函数
getStar(8,5);
fangP(5,9);
kanSp(8,2);
//输出分别为:getStar 40;fangP 14;kanSp 6;
3.对自定义函数的进一步了解
- 自定义函数有极大的自由性,函数体可以是任意语句,甚至可以是另一个函数,不过在函数内的函数或声明的变量都是局部函数|变量,也就是无法在函数外使用,但全局变量可以在任何局部中使用
- 任何函数,不调用就不会执行
- 当函数配合触发条件时,可以有更多的用法,而不是上述例子中的直接进行调用或根本不执行
例如:用document.getElementById配合<input>(表单)实现对密码输入格式的简单判断。
代码及分析如下:
<script>
function cPwd(){
var opwd1 = document.getElementById('wer');
/*document.getElementById用来读取输入在密码框内的字符,意为 从ID获取*/
var opwd2 = document.getElementById('wer2');
//wer1,wer2对应input中的两个密码框id
if(wer.value == ''||wer2.value == ''){
//判断是否为控
alert('密码不能为空');
return;
//在此处用于停止语句执行
}
if (wer.value == wer2.value) {
//判断是否相同
alert('两次密码一样');
} else{
alert('两次密码不一样');
//不同即弹出此警示框内容
}
}
</script>
<body>
<form>
<input type="password" name="" id="wer" value="" />
<!--//id是wer,wer2的两个密码框-->
<input type="password" name="" id="wer2" value="" />
<input type="button" value="确定" onclick="cPwd()" />
<!--//使用鼠标点击事件调用函数cPwd-->
</form>
</body>
4.总结:
- 自定义函数用于将一个需要重复使用的语句或函数,某功能等作为函数体,以调用的方法使用。
- 如果不进行调用,函数不会执行,不会有任何效果。
- 在函数内的皆为此函数的局部变量。
- 形参与实参互相对应,就像“变量与被赋予变量的值”。
- 自定义函数用处极大,前提是灵活使用且理解其用法。
附:基于自定义函数的单功能计算器
<script type="text/javascript">
function Out(){
var inum1 = document.getElementById(num1);
var inum2 = document.getElementById(num2);
var sum = Number(num1.value) + Number(num2.value);
if(num1.value == ''||num2.value == ''){
alert('不能为空');
return;
}
else{
alert(sum);
}
}
</script>
<body>
<form>
<p>加法计算器,请分别输入两个加数</p>
<p><input type="text" style="width:60px;" name="" id="num1" value="" />
+
<input type="text" style="width:60px;" name="" id="num2" value="" />
=
<input type="button" value="计算结果" onclick="Out()" />
</p>
</form>
</body>
通过更改运算符可以做出其它单功能计算器