函数实际上就是可以作为一个逻辑单元对待的一组JavaScript代码. 使用函数可以使代码更为简洁,提高重用性. 在Javascript中大概有95%的代码都是包含在函数中的.
- 函数的定义
- 函数的调用
- 函数参数的使用
- 使用函数的返回值
- 嵌套函数
- 递归函数
- JavaScript中的内置h函数
- Function()构造函数与函数直接量
函数的定义:
函数是由关键词function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的
定义函数的基本语法如下:
function functionNmae([parameter 1,parameter 2,...]){
statements;
[return expression;]
}
不想过多的说英语的翻译,其实这个世界上本就没有翻译,只有语言的共同点.比如functin你叫做函数,或者就叫function这完全取决于你
以下的翻译仅供参考
参数说明:
functionName:必选项. 用于指定函数名. 在同一个页面中,函数名必须是唯一的,并且区分大小写.
parameter:可选项.用于指定参数列表. 当使用多个参数时候,参数间使用逗号进行分隔. 一个函数可以含有255个参数
statements:必选项. 是函数体,用于实现函数功能的语句
expression:可选项. 用于返回参数值. expression为任意的表达式、变量或常量
例如,定义一个用于计算商品金额的函数account(),该函数有两个参数,用于指定单价和数量,返回值为计算后的金额
function account(price,number){
var sum = price*number;
return sum;
}
函数的调用:
- 函数的简单调用
- 在事件响应中调用函数
- 通过超链接调用函数
函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用该函数,调用函数需要创建调用语句,调用语句包含函数名称、参数具体值
函数的简单调用:
函数的定义语句通常被放在HTML文件的<head>字段中,而函数的调用语句通常被放在<body>段中,如果在定义函数之前调用函数,执行将会出错
函数定义及调用语法如下:
<html> <head> <script type="text/javascript"> function functionName(parameters){ some statements; } </script> </head> <body> functionNmae(parameters); </body> </html>
参数说明:
functionName:函数的名称
parameters:参数名称
你知道吗?
函数的参数分为形式参数(简称“行参”)和实际参数(简称“实参”),其中形式参数为函数赋予的参数,代表函数的位置和类型,系统并不为行参分配响应的存储空间. 调用函数时传递给函数的参数称为实际参数,实惨通常在调用函数之前已经被分配了内存,并且赋予了实际数据,在函数的执行过程中,实际参数参与了函数的运行.
本实例用于如何调用函数.
程序清单:
<!DOCTYPE html> <html> <head> <title>函数的简单应用</title> <script type="text/javascript"> function print(statement1,statement2,statement3){ alert(statement1+statement2+statement3); } </script> </head> <body> <script type="text/javascript"> print('第一个JavaScript的程序','作者:','牧民战天兔'); </script> </body> </html>
在事件响应中调用函数:
当用户单击某个按钮或选中某个复选框时都将触发事件,通过编写程序对事件作出反应的行为称为反应事件,在JavaScript语言中,将函数与事件相关联就完成了响应事件的过程.
如:当用户单击某个按钮时,执行响应的函数
程序清单:
<!DOCTYPE html> <html> <head> <title>单击按钮执行响应的函数</title> <script type="text/javascript"> function test(){ //定义函数 alert('我的技术支持QQ:3123215554'); } </script> </head> <body>
<form> <input type="button" name="" value="显示" onclick="test()"> </form> </body> </html>
通过超链接调用函数:
在<a>标记中的<href>标记中使用“javascript:关键字”超链接来调用函数,当用户单击该超链接时,相关函数将被执行.
程序清单:实现通过超链接调用函数
<!DOCTYPE html> <html> <head> <title>通过超链接调用函数</title> <script type="text/javascript"> function test(){ alert('明天可以去拿我梦寐以求的chromebook啦'); } </script> </head> <body> <a href="javascript:test()">测试</a> </body> </html>
函数参数的使用:
JavaScript中定义函数的完整格式如下:
<script> function 自定义函数名(形参1,形参2,...){ 函数体 } </script>
使用函数的返回值:
有时候在函数中返回一个数值供,在其他函数中使用,为了能够返回给变量一个值,可以在函数中添加return语句,将需要返回的值赋予变量,最后将此变量返回
语法:
<script type="text/javascript"> function functionName(parameters){ var result = some statements; return result; } </script>
参数说明:
result:函数中的局部变量
return:函数中返回变量的关键字
注意:返回值在调用函数时,不是必须定义的
函数返回值的简单应用
程序清单:调用自定义函数计算3个参数的平局值
<!DOCTYPE html> <html> <head> <title>调用自定义函数,计算3个参数的平均值</title> <script type="text/javascript"> function setValue(num1,num2,num3){ var avg = (num1+num2+num3)/3; return avg; } function getValue(num1,num2,num3){ document.writeln("参数分别为:"+num1+"、"+num2+"、"+num3); var value = setValue(num1,num2,num3); document.write("取参数平均值,运行结果为:"+value); } </script> </head> <body> <script type="text/javascript"> getValue(100,200,300); </script> </body> </html>
嵌套函数:
所谓嵌套函数即在函数内部再定义一个函数,这样定义的优点在于可以使内部函数轻松获得外部函数的参数以及函数的全局变量
语法:
<script type="text/javascript"> var outter = 10; function functionName(parameters1,parameters2){ //定义外部函数 function lnnerFunction(){ //定义内部函数 some statements; } } </script>
参数说明:
functionName:外部函数名称
InnerFunction:嵌套函数名称
程序清单:实现在嵌套函数中取全局变量以及外部函数参数的和
<!DOCTYPE html> <html> <head> <title>嵌套函数取全局变量和外部函数参数的和</title> <script type="text/javascript"> var outter = 10; function add(num1,num2){ function innerAdd(){ alert("参数的和为:"+(num1+num2+outter)); } return innerAdd; } </script> </head> <body> <script type="text/javascript"> document.write('uhuh'); add(100,100); </script> <script type="text/javascript"> add(10,100); </script> </body> </html>
递归函数:
所谓递归函数就是函数在自身的函数体内调用自身,使用递归函数一定要当心,处理不当就会使程序进入死循环,递归函数只在特定的情况下使用,如处理阶乘问题
运用递归写一个阶乘的程序,将在下一篇博客中单独列出来,方便大家思考
JavaScript中的内置函数:
在使用JavaScript语言时,除了可以自定义函数外,还可以使用JavaScript的内置函数,这些内置函数都是由JavaScript语言自身提供的
JavaScript中,内置函数如表所示
| 函数 | 说明 |
| eval() | 求字符串中表达式的值 |
| isFinite() | 判断一个字符是否是无穷大 |
| isNaN() | 判断一个数值是否为NaN |
| parseInt() | 将字符型转换为整形 |
| encodeURIComponent() | 将字符串转换为有效的URL组jian |
| parseFloat() | 将字符型转换为浮点型 |
| decodeURI() | 对encodeURL()编码的文本进行解码 |
| decodeURLComponent() | 对encodeURLComponent()编码的文本进行解码 |
| encodeURI() | 将字符串,转换为有效的URL |
下面将对一些常用的内置函数做详细介绍
(1)parseInt()函数
parseInt()函数主要将首位为数字的字符串转成数字,如果字符串不是以数字开头,那么将返回NaN
语法:
parseInt(StringNum,[n])
参数说明:
StringNum:需要转换为整型的字符串
n:提供在2~36之间数字表示所保存数字的的进制数,这个参数在函数中不是必须的
(2)parseFloat()函数
parseFloat()函数主要经首位为数字的字符串转换成浮点型数字,如果字符串不是以数字开头,那么将会返回NaN
语法:
parseFloat(StringNum)
参数说明:
StringNum:需要转换为浮点型的字符串
(3)is NaN()函数
isNaN函数只要用于检验某个值是否为NaN
语法:
isNaN(Num)
参数说明:
Num:需要验证的数字
如果参数Num为无穷大,函数返回值为true;如果参数Num不为无穷大,函数返回值为false
(5)
encodeURI()函数
encodeURLI函数主要用于返回一个UTI字符串编码的后果
语法:
encodeURI(url)
参数说明:
url:需要转换为网络资源地址的字符串
(6)decodeURI()函数
decodeURI()函数主要用于已编码为URI的字符串解码成最初的字符串并返回
语法:
参数说明:
url:需要解码的网络资源地址
注意:此函数可以将使用encodeURI转码的网络资源地址转换为字符串并返回,也就是说decodeURI函数是encodeURI函数的逆向操作
程序清单:本实例实现调用上述内置函数
<!DOCTYPE html> <html> <head> <title>调用JavaScript内置函数</title> <script type="text/javascript"> var num1 = '123abc'; var num2 = 'abc123'; document.write("(1)使用parseInt()函数<br>"); document.write("123abc转化的结果是:"+parseInt(num1)+"<br>"); document.write("abc123转化的结果是:"+parseInt(num2)+"<br><br>"); var num3 = "123.456789abc"; document.write("(2)使用parseFloat()函数<br>"); document.write("转换的结果:"+parseFloat(num3)+"<br><br>"); document.write("(3)使用isNaN()函数<br>"); document.write(isNaN(parseFloat(num3))); document.write(isNaN(parseFloat(num2))+"<br><br>"); document.write("使用isFinite()函数"); document.write("1/0的结果是否为无穷大"+isFinite(1/0)); // document.write(); </script> </head> <body> </body> </html>
Function()构造函数与函数直接量
除了可以使用基本的function语句定义函数之外,还可以使用另外两种方式来定义,即使用Function()构造函数和函数直接量定义. 这两者直接存在很重要的差别
- 构造函数Function语句允许在允许在运行时动态创建和编译JavaScript代码,而函数直接量确实程序结构的一个静态部分,就行函数语句一样
- 每次调用构造函数Function()时,都会解析函数体,并且创建一个新的函数对象. 如果对构造函数的调用出现在一个循环中,或者出现在在一个经常被调用的函数中,这种方法的效率将非常低.而函数直接量不论出现在循环体还是嵌套函数中,即不会在每次调用时都被重新编译,也不会在每次遇到时都创建一个新的函数对象
- Function()创建的函数使用的不是静态作用域,相反的,该函数总是被当作顶级函数来翻译
========================================================
好了,今天就更新到这里了,缺两个实例,下次补上. 一个是递归调用做一个阶乘的程序,一个是自定义函数屏蔽鼠标和键盘的相关事件
今天我小姨举家前来,我必须要去接待他们,不然有点失态.整个下午我差不多都是和他们在一起,小姨的女儿,我的妹妹长大了,变漂亮啦,可是有一个问题就是快3岁了,都不会说话,这让我小姨一家都很头疼.
幸亏他们走的还算早,我就拿起电脑一阵狂敲,直到现在 2020年8月8日 23:40,我原本以为我博客园开通了坚持不下来了,之前发布过几篇文章,明显是水文,当我真正开始记录自己的学习笔记的时候,回过头来都不敢相信这是我写过的
专科的准大二,让我在这个暑假很慌张,感觉是毕业来临,失业的恐慌吧,江南很美我要在这个地方待下去
晚安!