函数的基本结构
函数: 是指实现了特定功能的代码块,能够被反复调用。
语法:
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++) { document.write("*"); } document.write("<br/>"); } } //调用函数 //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(3,50); document.write("<br/>"); sum(2,200); </script>
4.有参数有返回值的函数
<script type="text/javascript"> //求和 function sum(start,end) { var he = 0; for(var i=start;i<=end;i++) { he+=i; } return he; //document.write(start+"-"+end+"的和:"+he); } //调用 var res = sum(3,50); alert(res); //document.write("<br/>"); //sum(2,200); </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 4: 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>
5.匿名函数
<script type="text/javascript"> //定义匿名函数 /*var x = function(){ alert("你好"); } x();*/ function calc(s1,s2,fn) { var res = fn(s1,s2); alert(res); } var add = function(n1,n2){ return n1+n2; } var sub = function(n1,n2){ return n1-n2; } calc(100,200,sub); //alert(add(1,2)); //var r = add(1,2); //alert(r); </script>
网页中的事件和函数调用
事件:就是发生了一件事,通常我们会将事件和特定的方法绑定到一起,当事件触发的时候,程序自动执行绑定的方法,以此完成特定的程序处理。这就是程序的事件驱动机制。
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> function test() { alert("你点我了"); } //修改网页背景 function changeBg() { //alert(123); //修改文档的背景 //document.bgColor="red"; //document:网页的内置对象 //body:对应于body标签的一个对象 //style:网页元素的样式对象 //backgroundColor:背景颜色样式属性 //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" value="测试" οnclick="test()"/> <button type="button" οnclick="changeBg()">修改背景</button> </body> </html>
计算器:
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //计算器 function calc(ysf) { //通过document.getElementById("num1")获取id为num1的文本框元素 var txtNum1 = document.getElementById("num1"); //alert(txtNum1.value+" "+typeof(txtNum1.value)); //获取num1文本框的数据值 var num1 = Number(txtNum1.value); //获取id为num2的文本框元素 var txtNum2 = document.getElementById("num2"); //获取文本框中的数据值 var num2 = Number(txtNum2.value); var jg = 0; switch(ysf) { case "+": jg = num1+num2; break; case "-": jg = num1-num2; break; case "*": jg = num1*num2; break; case "/": jg = num1/num2; break; } //将结果设置到id为res的文本框中 document.getElementById("res").value=jg; } </script> </head> <body> <form> <table border="1" width="300" align="center"> <caption>计算器</caption> <tr> <td>数据1</td> <td> <input type="text" name="num1" id="num1"/> </td> </tr> <tr> <td>数据2</td> <td> <input type="text" name="num2" id="num2"/> </td> </tr> <tr> <td>运算</td> <td> <input type="button" value="+" οnclick="calc('+')"/> <input type="button" value="-" οnclick="calc('-')"/> <input type="button" value="*" οnclick="calc('*')"/> <input type="button" value="/" οnclick="calc('/')"/> </td> </tr> <tr> <td>结果</td> <td> <input type="text" name="res" id="res"/> </td> </tr> </table> </form> </body> </html>
js代码访问html标签
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> #d1 { width:300px; height:200px; border:1px solid red; } /*定义类样式*/ .c1 { color:red; font-size:40px; background-color:blue; } </style> <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.value="我的测试"; div.innerHTML="我的测试"; //设置元素的样式 /*div.style.color="red"; div.style.backgroundColor="green"; div.style.border="2px dashed black";*/ //设置元素的类样式 div.className="c1"; } function getDiv() { //获取元素的内容 var div = document.getElementById("d1"); alert(div.innerHTML); } </script> </head> <body> <!--所有表单元素都有value属性--> <input type="button" value="设置表单元素的数据" οnclick="setTxt()"/> <input type="button" value="获取表单元素的数据" οnclick="getTxt()"/><br/><br/> <input type="text" name="mingzi" id="mingzi"/> <hr/> <!--非标单元素通常没有value属性--> <button type="button" οnclick="setDiv()">设置非表单元素的内容</button> <button type="button" οnclick="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 = "image/js"+index+".gif"; document.getElementById("lj").innerHTML=url; document.getElementById("tp").src=url; } </script> </head> <body> 图片:<div id="lj"></div> <img src="image/js0.gif" id="tp"/><br/> <input type="button" value="上一张" οnclick="prev()"/> <input type="button" value="下一张" οnclick="next()"/> </body> </html>
小结:
//通过HTML元素,触发js函数的执行 <元素 事件名="函数名()"/> <input type="button" οnclick="test()"/> <div id="d1" οnclick="setDiv()"></div> <div id="d1" οnmοuseοver="setDiv()"></div> onclick:单击事件 onmouseover:鼠标悬浮事件 //通过js访问HTML元素 1.表单元素 获取表单元素数据: var bl = 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("和:"+(num1+num2)); } add(100,200);
有参数有返回值
//有参数,有返回值 /*var add = (num1,num2)=>{ var sum = num1+num2; return sum; }*/ //如果函数代码只有一行,并且需要返回,可以写成如下格式 var add = (num1,num2)=>num1+num2; alert(add(1,2));