函数一般会在两种情况下使用:一种是“重复使用的功能”,另外一种是“特定的功能”。
要使用函数,需要2步
(1)定义函数
(2)调用函数
函数定义
函数定义有两种类型,一种是定义没有返回值的函数,另一种是定义有返回值的函数。
没返回值没有返回值的函数,指的是函数执行完就可以了,不会返回任何值。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>定义没返回值的函数title>
<script>
function addNum(a,b){
var sum = a + b;
document.write(sum);
}
addNum(4,5);
script>
head>
<body>
body>
html>
用function创建函数,传入两个值分别是a和b,定义函数时候的参数是形参,之后调用函数addNum(),调用函数传入的值是实参,函数中调用的document.write();是向HTML输出流中插入需要传入的值,经过解析显示在页面上。
有返回值
有返回值的函数,指的是函数执行完了之后,用return返回一个值。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>定义有返回值的函数title>
<script>
function addNum(a,b){
var sum = a + b;
return sum;
}
document.write(addNum(4,5));
script>
head>
<body>
body>
html>
通过return返回一个值,可以直接输出函数来显示这个值。
函数调用
一个函数只是被定义而没有被调用,那么函数本身是不会执行的,这个函数是没有意义的。
JavaScript的函数调用方式有很多,常见的有4种
直接调用上面函数定义中没有返回值的函数的调用就是直接调用。
表达式中调用上面函数定义中有返回值的函数的调用是表达式调用。
超链接中调用在a元素的href属性中用“javascript:函数名”的形式来调用函数。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>超链接调用函数title>
<script>
function faceScore(){
alert('我真的太帅了!')
}
script>
head>
<body>
<a href="javascript:faceScore()">我的颜值a>
body>
html>
事件中调用
事件就是经过一些操作,而产生的后续结果。比如点击鼠标,点击按钮而产生的一系列反应。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件中调用函数title>
<script>
function faceScore(){
alert('我真的太帅了!')
}
script>
head>
<body>
<input type="button" value="事件" onclick="faceScore()" />
body>
html>
一个按钮,当点击这个按钮,触发点击事件,调用faceScore函数。
嵌套函数
在一个函数的内部定义另外一个函数。但是在内部定义的函数只能在内部调用。
举例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>嵌套函数title>
<script>
function addNum2(){
function addNum1(){
return 4;
}
document.write(addNum1() + 5);
}
addNum2();
script>
head>
<body>
body>
html>
调用addNum2函数时候,addNum2函数调用addNum1函数。
内置函数
上面的示例都是自己定义函数,但是有些函数不需要定义是系统自动生成的,直接调用就行了。
前面JavaScript基础语法中的数据转换,其中有parseInt()和parseFloat() 都是系统的内置函数。
本节主要学习了函数知识,最后对其总结。
函数的定义和调用
嵌套函数
内置函数