第五章 函数
内容回顾
- 使用while嵌套实现表格效果
- 使用for循环实现九九乘法表
本章内容
- 函数的定义
- 函数的5种方式
- 网页中事件和函数的应用
- CEMAScript 6(js6)中的函数定义
第一节 函数的基本结构
函数：是指实现了特定功能的代码块，能够被反复调用。
语法：
function 函数(参数1, 参数2,参数3,...)
{
//函数功能代码;
return 函数返回值;
}
说明：
function:用于定义函数的关键字
函数名：使用者自己定义，命名规则：字母，数字，下划线，$，数字不能开头。小驼峰的命名方式，例如：getNum()
参数列表：在函数名后面的小括号中定义参数列表，参数可多可少，也可以没有
函数功能代码：当前函数要实现的特定功能，是函数的核心内容
return返回值：在函数执行完成之后，可以通过return关键字，返回函数处理的结果。可以省略。
函数的使用：如果一个功能代码，需要被反复使用，此时建议将该代码定义为函数。另外一种情况，如果在一个处理过程中，部分代码太多，此时可以将此部分代码封装成函数，优化代码结构。
1.无参无返回值的函数
<script type="text/javascript">
//定义函数：无参数，无返回值
function sayHello()
{
alert("你好，Javascript");
}
//调用函数
sayHello();
</script>
2.无参有返回值函数
//获取1-100的随机数
//无参数，有返回值的函数
function getNum()
{
//生成1-100的随机数
var r =parseInt(Math.random()*100+1);
//设置函数的返回值
return r;
}
//调用函数，获取三个随机数
var num1 =getNum();
var num2 =getNum();
var num3 =getNum();
//提示信息
alert(num1+" "+num2+" "+num3);
注意：如果函数的最后没有使用return返回结果，此时如果使用变量接受函数，则接受的数据为undefined。
//获取1-100的随机数
//午餐数据，有返回值的函数
function getNum()
{
//生成1-100的随机数
var r = parseInt(math.random()*100+1);
//设置函数的返回值
//return r;
}
//调用函数，获取三个随机数
var num1 = getNum();
var num2 = getNum();
var num3 = getNum();
//提示信息
alert(num1+" "+num2+" "+num3);
3.有参数无返回值的函数
//定义函数
//row：形式参数，等价于函数中的一个变量
function showSanJiao(row){
//输出三角形
for(var i=1;i<=row;i++){
for(var j=1;j<=i;j++){
console.log("*");
}
console.log("\n");
}
}
//调用函数
//3：实际参数
showSanJiao(3);
统计任意数值区间的和
<script type="text/javascript">
//求和
function sum(start,end)
{
var he=0;
for(var i=start;i<=end;i++)
{
he+=i;
}
document.write(start+"-"+end+"的和："+he);
}
//调用
sum(1,50);
document.write("<br>");
sum(2,51);
</script>
4.有参数有返回值的函数
<script type="text/javascript">
//求和
function sum(start,end)
{
var he=0;
for(var i=start;i<=end;i++){
he+=i;
}
return he;
}
var res=sum(1,50);
alert(sum);
</script>
输入月份，返回该月份的天数
<script type="text/javascript">
function getDay(month)
{
var day=0;
//1-12
switch(month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
day=31;
break;
case 2:
case 6:
case 9:
case 11:
day=30;
break;
case 2:
day=28;
break;
default:
day="月份无效";
break;
}
return day;
}
var m = parseInt(prompt("请输入月份：",""));
var res = getDay(m);
alert("天数："+res);
</script>
4.1函数可以重复相同的代码
function cook(){
console.log('酸辣土豆泥');
}
cook();
4.2 利用函数的参数实现函数重复不同的代码
function 函数名(形参1，形参2...){// 在声明函数的小括号里面是 形参 （形式上的参数）
}
函数名(实参1，实参2...);//在函数调用的小括号里面是实参（实际的参数）
//函数形参实参个数匹配
function getNum(num1,num2){
console.log(num1+num2)
}
//1.如果实参的个数和形参的个数一致 则正常输出结果
getNum(1,2);
//2.如果实参的个数多于形参的个数 会取到形参的个数
getNum(1,2,3);
//3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN
//形参可以看做是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
getNum(1);//NaN
//建议 我们尽量让实参的个数和形参相匹配
4.3 函数的返回值格式
function 函数名(){
return; //需要返回的结果;
}
//函数名();
//（1） 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()
//通过return 实现的
//（2）只要函数遇到return就把后面的结果 返回给函数的调用者 函数名（）=rerurn后面的结果
function getResult(){
return 666;
}
getResult(); //getReault( ) = 666
console.log(getResult());
第二节 网页中的事件和函数调用
事件：就是发生了一件事，通常我们会将事件和特定的方法绑定一起，当事件触发的时候，程序自动执行绑定的方法，以此完成特定的程序处理。这就是程序的事件驱动机制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
alert("点到我了")
//修改文档的背景
document.bgColor="red";
}
//document:网页的内置对象
//body: 对应于body标签的一个对象
//style：网页元素的样式对象
//backgroundColor:背景颜色样式属性
function test2(){
// document.body.style.backgroundColor="blue";
if(document.body.style.backgroundColor=="blue"){
document.body.style.backgroundColor="red";
}else{
document.body.style.backgroundColor="blue";
}
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试" onclick="test()" />
<input type="button" name="" id="" value="改变" onclick="test2()" />
</body>
</html>
计算器：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="function.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//计算器
function calc(n) {
//通过document.getElementById("num1")获取id为num1的文本框元素
var one = document.getElementById("num1");
//获取num1文本框的数据值
var num1 = Number(one.value);
//获取id为num2的文本框元素
var two = document.getElementById("num2");
//获取文本框中的数据值
var num2 = Number(two.value);
switch (n) {
case "+":
var jg = num1 + num2;
break;
case "-":
var jg = num1 - num2;
break;
case "*":
var jg = num1 * num2;
break;
case "/":
var jg = num1 / num2;
break;
}
//将结果设置到id为res的文本框中
document.getElementById("res").value=jg;
}
</script>
<style type="text/css">
#d1
{
width:300px;
height:200px;
border:1px solid red;
}
/*定义类样式*/
.c1
{
color:red;
font-size:40px;
background-color:blue;
}
</style>
</head>
<body>
<table border="1" cellspacing="" cellpadding="" width="600">
<caption>计算器</caption>
<tr>
<td>数字1</td>
<td><input type="text" name="" id="num1" value="" /></td>
</tr>
<tr>
<td>数字2</td>
<td><input type="text" name="" id="num2" value="" /></td>
</tr>
<tr>
<td>运算</td>
<td>
<input type="button" name="" id="" value="+" onclick="calc('+')"/>
<input type="button" name="" id="" value="-" onclick="calc('-')"/>
<input type="button" name="" id="" value="*" onclick="calc('*')"/>
<input type="button" name="" id="" value="/" onclick="calc('/')"/>
</td>
</tr>
<tr><td><input type="text" name="" id="res" value="" /></td>
</tr>
</table>
</body>
</html>
js代码访问html标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="function.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function setTxt()
{
//获取文本框元素
var txtmz = document.getElementById("mingzi");
txtmz.value="张三";
}
//获取表单元素的数据
function getTxt(){
var txtmz=document.getElementById("mingzi");
alert(txtmz.value);
}
//设置非表单元素的内容
function setDiv(){
var div =document.getElementById("d1");
div.innerHTML="我的测试";
//设置元素的类样式
div.className="c1";
}
function getDiv(){
//获取元素的内容
var div=document.getElementById("d1")
alert(div.innerHTML);
}
</script>
<style type="text/css">
#d1
{
width:300px;
height:200px;
border:1px solid red;
}
/*定义类样式*/
.c1
{
color:red;
font-size:40px;
background-color:blue;
}
</style>
</head>
<body>
<!--所有表单元素都有value属性 -->
<input type="button" name="" id="mingzi" value="设置表单元素的数据" onclick="setTxt()"/>
<input type="button" name="" id="" value="获取表单元素的数据" onclick="getTxt()"/><br/><br />
<hr >
<!-- 非表单元素通常没有value属性 -->
<button type="button" onclick="setDiv()">设置非表单元素的内容</button>
<button type="button" onclick="getDiv()">获取非表单元素的内容</button>
<div id="d1"></div>
</body>
</html>
通过js实现图片动画
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
var index = 0;
//上一张
function prev() {
index--;
if (index == -1) {
index = 9;
}
var url = "image/js" + index + ".gif";
document.getElementById("lj").innerHTML = url;
document.getElementById("tp").src = url;
}
//下一张
function next() {
index++;
if (index == 10) {
index = 0;
}
var url = "img/js" + index + ".jpeg";
document.getElementById("lj").innerHTML = url;
document.getElementById("tp").src = url;
}
</script>
<style type="text/css">
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
图片:<div id="lj"></div>
<img src="img/js0.jpeg" id="tp" /><br />
<input type="button" value="上一张" onclick="prev()" />
<input type="button" value="下一张" onclick="next()" />
</body>
</html>
小结：
//通过HTML元素，触发js函数的执行
<元素 事件名="函数名()"/>
<input type="button" onclick="test()"/>
<div id="d1" onclick="setDiv()"></div>
<div id="d1" onm ouseover="setDiv()"></div>
onclick:单击事件
onmouseover：鼠标悬浮事件
//通过js访问HTML元素
1.表单元素
//获取表单元素数据
var b1 = document.getElementById("表单元素id").value;
//设置表单元素数据
document.getElementById("表单元素id").value="数据"
2.非表单元素
//获取非表单元素的内容
var nr=document.getElementById("非表单元素id").innerHTML;
//设置非表单元素的内容
document.getElementById("非表单元素id").innerHTML="数据";
3.通过js设置元素样式
//设置元素的行内样式
document.getElementById("元素id").style.color="字体颜色";
//设置元素的类样式
document.getElementById("元素id").className="类样式名";
第三节 箭头函数
箭头函数：类似于匿名函数，是在ECMAScript6中新增的函数写法
无参数无返回值的函数
var f=()=>{
alert("你好");
}
f();
无参数有返回值的函数
var sjs = () =>{
var r=parseInt(Math.random()*100+1);
return r;
}
var r1 = sjs();
var r2 = sjs();
var r3 = sjs();
alert(r1+" "+r2+" "+r3);
有参数无返回值
var add =(num1,num2)=>{
document.write("he:"+(num1+num2));
}
add(10,200);
有参数有返回值
//有参数，有返回值
/*var add = (num1,num2)=>{
var sum = num1+num2;
return sum;
}*/
//如果函数代码只有一行，并且需要返回，可以写成如下格式
var add = (num1,num2)=>num1+num2;
alert(add(1,2))