JavaScript--基础ES(二)

2301_77287584

775人浏览 · 2025-09-25 16:14:28

2301_77287584 · 2025-09-25 16:14:28 发布

JavaScript–基础ES

文章目录

JavaScript--基础ES
- 1.函数

1.函数

函数的含义
- 类似于Java中的方法，7是完成特定任务的代码语句块
函数分类
- 系统函数
- 自定义函数

1.1常用系统函数

parselnt（"字符串") 将字符串转换为整型数字
parseFloat("字符串") 将字符串转换为浮点型数字
isNaN() 用于检查其参数是否是非数字

1.2自定义函数

定义函数

function 函数名(参数1,参数2,参数3,..){
	//JavaScript语句
	[return返回值]
}


注：若有返回值  var res = 函数名(参数列表);
   形参与实参类型或个数可以不对应

调用函数
- 函数调用一般和表单元素的事件一起使用，调用格式 : 函数名();

1.2.1调用无参函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
      function study(){
        for(var i=0;i<3;i++){
            document.write("<h3>学习JS</h3>")
        }
    } 
	//函数调用
   study();
</script>
</html>

1.2.2调用有参函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
</body>
<script>
  
    function study(count){
        for(var i=0;i<count;i++){
            document.write("<h3>学习JS</h3>")
        }
    } 
    study(2);
</script>
</html>

1.2.3创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    
    function User(uname,uage){
        this.name=uname;
        this.age=uage;
        this.show=function(){
            document.write("姓名："+this.name+",年龄"+this.age);
        }
    }
    var u1=new User("张三",19);
    u1.show();
  

</script>
</html>

练习：编写函数，实现使用prompt输入两个数和运算符号，并计算两个数的操作结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算两数的操作结果</title>
</head>
<body>
    <input type="button" value="计算两数运算结果" onclick="getSum()"/>
</body>
<script>
    function getSum(){
        var sum=0;
        var num1= prompt("请输入第一个数字：");
        var num2= prompt("请输入第二个数字：");
        var str= prompt("请输入运算符：");     
        n1=parseInt(num1);
        n2=parseInt(num2);
        if(!isNaN(n1)&&!isNaN(n2)){
            switch(str){
                case "+" :
                    sum=n1+n2;
                    alert("两数运算结果为:"+n1+str+n2+"="+sum);
                    break;
                case "-" :
                    sum=n1-n2;
                    alert("两数运算结果为:"+n1+str+n2+"="+sum);
                    break;
                case "*" :
                    sum=n1*n2;
                    alert("两数运算结果为:"+n1+str+n2+"="+sum);
                    break;
                case "/" :
                    sum=n1/n2;
                    alert("两数运算结果为:"+n1+str+n2+"="+sum);
                    break;
                default :
                    alert("请输入正确的运算符！！！");
                    break;
            }
        }else{
            alert("请输入正确的数字！！！");
        }

    }
</script>
</html>

1.3变量的作用域

全局变量
局部变量

1.4事件

名称	说明
`onload`	一个页面或一幅图像完成加载
`onlick`	鼠标单击某个对象
`onmouseover`	鼠标指导移到某元素上
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
`onkeydown`	某个键盘按键被按下
`onkeypress`	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
`onchange`	域的内容被改变
onblur	元素失去焦点
onfocus	元素获得焦点
onsubmit	提交按钮被点击
onchange	用户改变域的内容

<!DOCTYPE html>
<html lang="en" onkeydown="keydown(event)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>
<body>
     <button onclick="login()">登录</button> 
</body>
<script>
    function keydown(e){
        //按下enter键登录
        if(e.keyCode==13){
            login();
        }
    }
    //单击按钮登录
    function  login(){
        alert("登录成功");
    }

</script>
</html>

<!DOCTYPE html  >
<html lang="en" onmousedown="press()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        width: 100px;
        height: 100px;
        background-color: rgba(66, 126, 176, 0.306);
    }
</style>
<body>
    <div class="a" onmouseover="update1(this)"  onmouseout="update2(this)"  >1111</div>
</body>
<script>
    function update1(e1){
     e1.innerHTML = "2222";
    }
    function update2(e2){
        e2.innerHTML = "1111";
       }
    function press(){
        alert("按下鼠标键");
    }   
</script>
</html>

练习
- 使用prompt()方法输入考试科目的数量，要求数量必须是非零、非负数的数值类型，否则给出相应提示并退出程序
- 根据考试科目的数量，使用prompt()方法输入各科的考试成绩并累加，要求成绩必须是非负数的数值类型，否则给出相应提示并退出程序
- 如果各项输入正确，则弹出总成绩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="计算成绩" onclick="getScore()"/>
</body>
<script>
    function getScore(){
        var num=prompt("请输入考试科目的数量：");
        var n=parseInt(num);
        if(n>0){
            var sum=0;
            for(var i=0;i<n;i++){
                var score=prompt("请输入第"+(i+1)+"科的成绩：");
                var s=parseInt(score);
            if(score>0){
                  sum=sum+s;
            }else{
                alert("请输入正确的成绩！！！");
                //直接结束程序
                return;
            }
        }
            alert(n+"科总成绩"+sum);
        }else{
            alert("请输入正确的数字！！！");
            return;
    }
  }
    
</script>
</html>