JS 第三讲函数和事件

早饭不吃辣

于 2022-06-20 20:08:11 发布

阅读量117

点赞数

文章标签： javascript java servlet

本文链接：https://blog.csdn.net/weixin_45514133/article/details/125379830

版权

第一节函数(掌握)

1.1 什么是函数

函数就是一个执行特定功能的代码块，可以被反复调用

function 函数名(参数列表){
    函数体
}
1.无参数无返回值
2.无参数有返回值
3.有参数无返回值
4.有参数有返回值
function:关键字
函数名:开发人员定义
 由数字、字母、下划线、$组合 首字母不能是数字
关键字

1.无参数无返回值

function 函数名(参数){
    函数体
    返回值
}
//函数定义
function test(){
 alert("这是一个无返回值的参数")
}
//调用
test();

2.无参数有返回值

function 函数名(){
     函数体
     至少要由一个return语句
}

<script>
    function getSysTime(){
        var date=new Date();
        return date.toLocaleDateString();
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var day=day.getDay();
        var hour=date.getHours();
        var minutes=date.getMinutes();
        var str=year+"年"+month+"月"+day+"日"+hour+":"
        return str;
    }
        //函数由返回值，就可以定义一个变量接收一个返回值
        var a=getSysTime();
        alert(a)
    
</script>

3.有参数无返回值

function 函数名(参数){
  函数体
}

<script>
    //输入一个表格的行数和列数，生成对应的表格
    //定义时参数:形参，形式参数
    function getTable(rows,cols){
        document.write("<table border='1' width='500' height='500' rules='all' > ")
        for(var i=1;i<=rows;i++){
            document.write("<tr>")
            for(var j=1;j<=cols;j++){
                document.write("<td>第"+i+"行,第"+j+"列</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")
    }
    //调用时参数:实参，实际参数
    getTable(1,1)
    getTable()
</script>

4.有参数有返回值

function 函数名(参数){
    函数体;
    至少有一个return
}

<script>
    //输入两个数字，求两个数字之和
    function getSum(a,b){
        return a+b;
    }
    var sum=getSum(10,10)
    alert(sum)
</script>

<script>
    function jisuan(opr){
        var num1=parseInt(document.getElementById("num1").value);
        var num2=parseInt(document.getElementById("num2").value);
        var result;
        switch(opr){
            case "+":
                result=num1+num2;
            break;
            case "-":
                result=num1-num2;
            break;
            case "*":
                result=num1*num2;
            break;
            case "/":
                result=num1/num2;
            break;
        }
        document.getElementsById("result").value=result
    }
</script>
<body>
    <input id="num1" placeholder="请输入一个数字" /><br/>
    <input id="num2" placeholder="请输入另一个数字" /><br />
    <input type="button"  value="+" οnclick="jisuan('+')" /><br />
     <input type="button" value="-" οnclick="jisuan('-')" /><br />
     <input type="button" value="*" οnclick="jisuan('*')" /><br />
     <input type="button" value="/" οnclick="jisuan('/')" /><br />
    结果<input id="result" readonly />
</body>

第二节匿名函数(了解)

没有名字的函数

1.直接使用

<script>
    //了解
    (function(para){
        alert("匿名函数:"+para)
    })
    ("参数")
</script>

2.被事件调用

<script>
    window.οnlοad=function(){
        alert("页面加载")
    }
</script>

3.作为对象的方法

<script>
    //对象:属性 方法
    var obj={
        name:"张三"，
        age:18,
        fn:function(){
            alert("爱好:玩")
    }
    }
    obj.fn()
</script>

第三节箭头函数(掌握)

在ES6以后新增一种表示函数的方式，箭头函数

var 函数名=(参数)=>{
    方法体
    返回值(需要写，不需要不写)
}

var getTable=(rows,cols)=>{
    document.write("<table border='1' width='500' height='200' rules='all'>")
      for(var i=1;i<=rows;i++){
            document.write("<tr>")
                    for(var j=1;j<=cols;j++){
                        document.write("<td>第"+i+"行,第"+j+"列</td>")
                    }
            document.write("</tr>")  
    document.write("</table>")
}

第四节事件

事件：发生在页面中的一件事(一种行为)

事件三要素：

1.事件源(事件发生在哪) 2.事件类型(发生什么事件) 3.事件处理程序(函数)

事件	说明
onclick	单机事件
onload	页面加载事件
onmouseover	鼠标悬浮
onmouseout	鼠标离开
onmousemove	鼠标移动
onkeyup	键盘抬起
onkeydown	键盘按下
onkeypress	键盘按压
onblur	失去焦点
onfocus	获取焦点
onchange	元素改变
ondbclick	双击事件