JavaScript 函数

函数的基本结构

函数: 是指实现了特定功能的代码块,能够被反复调用。

语法:

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));

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值