您的位置：首页 > 职场人生

讲给后台程序员看的前端系列教程(33)——函数

2019-09-10 16:05 1341 查看

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在JavaScript程序设计中为了使代码更为简洁且能重复使用，通常会把某段实现特定功能的代码封装称为一个函数。

函数的定义

语法如下：

function 函数名(参数1,参数2.....) {
函数体
}

在该语法中，各部分含义如下：

function：定义函数的关键字
函数名：函数的名称
参数：函数的输入参数，函数可无输入参数也可以有一个或多个输入参数
函数体：函数的主体，用于专门实现特定的功能

在定义函数的过程中请注意：JavaScript是弱类型语言，在定义函数时既不需要声明函数的返回值类型，也不需要声明函数的输入参数类型

函数的调用

语法如下：

函数名(参数1,参数2.....);

函数入门练习

函数入门练习1:无输入参数的函数

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function showMessage(){
alert("Hello JavaScript");
}
</script>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

结果如下：

函数入门练习2:带输入参数的函数

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function add(a,b){
var sum=a+b;
document.write("sum="+sum);
}
</script>
<button onclick="add(4,5)">Click Me</button>
</body>
</html>

结果如下：

函数入门练习3:有返回值的函数

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function showMax(a,b){
var max=getMax(a,b);
document.write("max="+max);
}
function getMax(a,b){
var max=0;
if(a>=b){
max=a;
}else{
max=b;
}
return max;
}
</script>
<button onclick="showMax(3,9)">Click Me</button>
</body>
</html>

结果如下：

省略输入参数

在定义函数时若不能确定函数的形参个数，此时可不设置形参，而在在函数体中直接通过arguments对象获取函数调用时传递的实参，实参的总数可通过length属性获取，具体的实参值可通过数组遍历的方式进行获取。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function getSum() {
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
var sum=getSum(10, 20, 30);
alert("sum="+sum);
</script>
</body>
</html>

结果如下：

变量的作用域

在此介绍JavaScript变量的作用域：

全局变量：不在任何函数内声明的变量(显示定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用。
局部变量：在函数体内利用var关键字定义的变量称为局部变量，它仅在该函数体内有效。
块级变量：使用let关键字声明的变量称为块级变量，它仅在大括号{}中间有效，如if、 for或while等语句。

匿名函数

匿名函数指的是没有函数名称的函数，介绍JavaScript常见的匿名函数及其使用。

方式一

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
var testFun=function (a,b){
var sum=a+b;
return sum;
}
var sum=testFun(3,4);
alert("sum="+sum);
</script>
</body>
</html>

在该示例中定义函数时并未指定函数的名称并将该匿名函数赋值给变量testFun；所以，我们可通过变量名来调用该匿名函数

方式二

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<button id="but">Click Me</button>
<script type="text/javascript">
var button=document.getElementById("but");
button.onclick=function (){
alert('You click the button');
};
</script>
</body>
</html>

在该示例中为按钮设置了事件监听函数用于处理点击事件，该函数正是一个匿名函数！每当按钮被点击时都会调用该函数；这种方式在开发中经常使用。

递归函数

假若函数在其函数体内调用自身，那么这种函数称为递归函数。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用递归函数计算阶乘</title>
</head>
<body>
<script type="text/javascript">
function factorial(n) {
if(n == 0){
return 1;
}
if (n == 1) {
return 1;
}
return n * factorial(n - 1);
}
var number = prompt('请您输入非负整数');
number = parseInt(number);
if (isNaN(number)) {
document.write("输入的值不合法");
} else {
var result=factorial(number);
document.write(number + "的阶乘为：" + result);
}
</script>
</body>
</html>

结果如下：

函数综合练习

函数综合练习1:字符串大小写转换

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<h2>字符串大小写转换</h2>
<p>原字符串：<input id="oldString" type="text"></p>
<p>
转换操作：
<input type="button" value="转大写" onclick="deal('upper')">
<input type="button" value="转小写" onclick="deal('lower')">
</p>
<p>新字符串：<input id="newString" type="text"></p>
<script>
function deal(opt)
4000
{
var result = document.getElementById('oldString').value;
switch (opt) {
case 'upper':
result = result.toUpperCase();
break;
case 'lower':
result = result.toLowerCase();
break;
}
document.getElementById('newString').value = result;
}
</script>

</body>
</html>

结果如下：

函数综合练习2:利用递归函数计算斐波那契数列第N项的值

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用递归函数计算斐波那契数列第N项的值</title>
</head>
<body>
<script type="text/javascript">
function recursion(n) {
if (n < 0) {
return '输入的数字不能小于0';
} else if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else if (n > 1) {
return recursion(n - 1) + recursion(n - 2);
}
}
var number = prompt('请您输入非负整数');
number = parseInt(number);
if (isNaN(number)) {
document.write("输入的值不合法");
} else {
var result=recursion(number);
document.write("计算的结果为：" + result);
}
</script>
</body>
</html>

结果如下：

函数综合练习3:简易计算器

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用函数实现简易计算器</title>
</head>
<body>
<p>整数1：<input id="num1" type="text"></p>
<p>整数2：<input id="num2" type="text"></p>
<p>
<input type="button" value="两数相加" onclick="calc(add)">
<input type="button" value="两数相减" onclick="calc(sub)">
<input type="button" value="两数相乘" onclick="calc(mul)">
<input type="button" value="两数相除" onclick="calc(div)">
</p>
<p>结果：<input id="result" type="text" readonly></p>
<script>
function calc(methodName) {
var result = document.getElementById('result');
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
if (isNaN(num1) || isNaN(num2)) {
alert('请输入数字');
return false;
}
result.value = methodName(num1, num2);
}

function add(num1, num2) {
return num1 + num2;
}

function sub(num1, num2) {
return num1 - num2;
}

function mul(num1, num2) {
return num1 * num2;
}

function div(num1, num2) {
if (num2 === 0) {
alert('除数不能为0');
return '';
}
return num1 / num2;
}
</script>
</body>
</html>

结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航