JavaScript入门:函数
- JavaScript
- 2024-07-03
- 362热度
- 0评论
函数就是在程序设计中,将一段代码封装起来,完成一个特定的功能,并给这段代码起一个名称,程序通过名称就可以执行这段代码。
定义函数
JavaScript定义函数有两种方式:一种方式是显示定义函数;一种方式是匿名定义函数。
显示定义函数
显示定义函数通过函数声明来定义,定义语法如下:
function functionname(parameters){
函数代码
}
其中,function是定义函数的关键字,functionname是函数名称,parameters是函数传入的参数,可以传入多个参数,每个参数之间用英文逗号分隔。
JS函数不需要声明返回类型,当函数需要返回值时,直接使用return语句返回即可。
例如:
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add(){
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
}
function sum(a,b){
return a+b;
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<hr>
<form action="/login.jsp">
<p> 加数:<input type="text" id="op1" name="op1" maxlength="20" value=""/></p>
<p> 加数:<input type="text" id="op2" name="op2" maxlength="10" value=""/></p>
<p><input type="button" value="加法" onclick="add()"/></p>
</form>
</boyd>
<html>
在上面的案例代码中,定义了两个JS函数,分别是add函数和sum函数,add和sum是函数名称。
add函数负责处理HTML元素button的单击事件,在函数内部获取id为op1和op2元素的值,并调用sum函数求op1和op2的和。
sum函数是求和函数,计算传入参数a和b的和,并使用return语句返回a和b的和。
parseInt是JS内置函数,该函数将数字型的字符串转换为整数。
匿名函数的定义
匿名函数通过一个表达式来定义,函数没有名称,定义的函数会赋值给一个变量,该变量指向函数的内存地址,当访问变量时,函数即被调用。
定义匿名函数的语法规则如下:
varfun = function(parameters){
函数代码;
}
其中,varfun是变量,用于存储函数的内存地址,function是定义函数的关键字,parameters是传入函数的参数,可以传入多个参数,每个参数之间用英文逗号分隔。
例如:
sum = function(a,b){
return a+b;
}
上面的代码定义了一个匿名函数,该函数的内存地址赋值给变量sum,通过变量sum就可以调用函数。
函数的调用
JS有多种方式来调用函数,有直接调用,表达式中调用,在事件响应中调用,通过链接调用。不管哪种方式调用函数,调用时都要写入函数名称,若是匿名函数,要写入变量名称。
直接调用
直接调用就是函数调用语句占单独一行,直接调用比较适合与没有返回值的函数。
例如:
<script type="text/javascript">
function add(){
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
}
function sum(a,b){
return a+b;
}
add();
</script>
语句add()就是直接调用,该语句调用函数add()。
表达式中调用
函数可以在表达式内调用,函数的返回值参与表达式的计算。在表达式内调用函数,一般适用于有返回值的函数。
例如下面的JS函数:
function sum(a,b){
return a+b;
}
sum函数计算a和b两数的和,并使用return语句返回计算结果。调用sum函数就需要在表达式内调用。
例如:
value = sum(10,90)
alert(sum(10,90))
value = sum(10,90) * 2
在事件响应中调用函数
JS代码一般嵌入到HTML网页内,网页的页面加载、用户单击HTML元素、移动光标都会产生事件,若要对产生的事件进行响应或处理,可以调用JS函数来响应这个事件。
例如下面定义的函数:
function add(){
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
}
add函数用于响应HTML按钮元素的单击事件,add函数响应按钮单击事件的代码如下:
<p><input type="button" value="加法" onclick="add()"/></p>
HTML元素input 的onclick属性用于定义该元素产生单击事件后的动作,onclick属性的值可以是定义的JS函数名称。
通过超链接调用函数
JS函数还可以通过超链接调用。在HTML元素<a>标签的href属性的值可以是已定义的JS函数名称,或直接编写JS代码。语法如下:
JavaScript:函数名称
例如:
JavaScript:add()
JavaScript:alert(“您单击了该链接”)
案例代码:
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add(){
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
}
function sum(a,b){
return a+b;
}
sum(10,100);
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<hr>
<p> 加数:<input type="text" id="op1" name="op1" /></p>
<p> 加数:<input type="text" id="op2" name="op2" /></p>
<p><input type="button" value="加法" onclick="add()"/></p>
<a href="JavaScript:add()">计算数的和</a>
</boyd>
<html>
内置函数
JavaScript内部提供了一些函数,开发者可以直接使用这些函数,提高编程效率和JS程序的稳定性。
函数 | 描述 |
decodeURI() | 解码某个编码的 URI。 |
decodeURIComponent() | 解码一个编码的 URI 组件。 |
encodeURI() | 把字符串编码为 URI。 |
encodeURIComponent() | 把字符串编码为 URI 组件。 |
escape() | 对字符串进行编码。 |
eval() | 计算 JavaScript 字符串,并把它作为脚本代码来执行。 |
getClass() | 返回一个 JavaObject 的 JavaClass。 |
isFinite() | 检查某个值是否为有穷大的数。 |
isNaN() | 检查某个值是否是数字。 |
Number() | 把对象的值转换为数字。 |
parseFloat() | 解析一个字符串并返回一个浮点数。 |
parseInt() | 解析一个字符串并返回一个整数。 |
String() | 把对象的值转换为字符串。 |
unescape() | 对由 escape() 编码的字符串进行解码。 |
嵌套函数
JS语言支持函数嵌套,即在函数内部可以嵌套定义子函数。那么嵌套的子函数是否可以在函数外部调用呢?它的作用域又是什么范围呢?
//定义嵌套函数
function foo() {
m = 3;
function bar() {
n = 4;
alert(m+n)
}
bar();
}
上面的JS代码定义了foo函数,在foo函数内部又嵌套定义了bar子函数。bar子函数使用了foo函数声明的变量m,并输出m与n的和。foo函数的最后一条语句调用了bar函数。
下面是调用函数的HTML代码:
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function foo() {
m = 3;
function bar() {
n = 4;
alert(m+n)
}
bar();
}
</script>
</head>
<body>
<input type="button" value="调用foo函数" onclick="foo()"/>
<input type="button" value="调用bar函数" onclick="bar()"/>
</boyd>
<html>
从执行结果可以看出,foo函数被正确执行,并输出了正确的结果数字7。因此在嵌套函数中,子函数内部可以访问父函数声明的变量。
bar函数执行失败,显然在函数体内嵌套的函数是不能被外部调用的,其作用域仅限于函数内