复习练习js

a1833919188

已于 2023-12-29 23:05:15 修改

阅读量546

点赞数 10

文章标签： javascript 前端开发语言

于 2023-12-27 15:22:24 首次发布

本文链接：https://blog.csdn.net/a1833919188/article/details/135247085

版权

js函数

<!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>
   <script>
    function add(a,b){
        return a+b;
    }
    var result=add(10,20);
    document.write(result);
    
     var add1=function(a,b){
        return a+b;
     }
     var result=add1(20,20);
    document.write(result);
   </script> 
</body>
</html>

js对象

数组对象

<!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>
    <script>
        //定义数组
         var arr=new Array(1,2,3,4);
        document.write("输出arr[0]:",arr[0]);
        document.write("<br>\n")
        document.write("输出arr[1]:",arr[1]);
        document.write("<br>\n")
        //特点：长度可变，类型可变
        var arr=[1,2,3,4,];
        arr[4]=50;
        document.write("输出arr[4]:",arr[4]);
        document.write("<br>\n")
        arr[5]="A";
        document.write("输出arr[5]:",arr[5]); 
        document.write("<br>\n")
        for (let i = 0; i < arr.length; i++) {
           document.write(arr[i]);
        }
        document.write("<br>\n")
        //forEach
        arr.forEach(function (e)
        {
            document.write(e);
        })
        document.write("<br>\n")
        //ES6箭头函数：（形参列表）=>{函数体}
        arr.forEach((e)=>{
            document.write(e)
        })
        document.write("<br>\n")
        //push
        arr.push(7,8,9)
        document.write(arr)
        document.write("<br>\n")
        //splice（m,n)从第m位起删除n个元素
        arr.splice(2,2);
        document.write(arr);
    </script
</body>

String对象

<!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>
    <script>
        var str=new String("hello String ");
        document.write(str);
        document.write("<br>\n");
        var str=("hello String");
        document.write(str);
        document.write("<br>\n");
        //length
        document.write("str的长度:"+str.length);
        document.write("<br>\n");
        //charAt
        document.write(str.charAt(4));
        document.write("<br>\n");
        //IndexOf
        document.write(str.indexOf("lo"));
        document.write("<br>\n");
        //trim
        var s=str.trim();
        document.write(s);
        document.write("<br>\n");
        //substring(start,end)含头不含尾
        document.write(str.substring(0,5));

    </script>
</body>
</html>

JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var user={
            name:"Tom",
            age:10,
            gender:"male",
            eat:function(){
                document.write("用膳~");
                document.write("<br>\n");
            // eat:{
            //     document.write("用膳~")
            // }
            }
        }
        document.write(user.name);
        document.write("<br>\n");
        user.eat();
    //json
    var jsonStr='{"name":"Jerry","age":20,"addr":["北京","上海","西安"]}';
    //json字符串=>js对象
    var obj=JSON.parse(jsonStr);
    document.write(obj.name);
    document.write("<br>\n");
    //js=>JSON
    document.write(JSON.stringify(obj));
    </script>
</body>
</html>

BOM对象

<!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>
    <script>
        window.alert("Hello window");
        //window.confirm("您是否要删除这些信息？");
        var flag=confirm("您是否要删除这些信息？");
        alert(flag);
         var i=0;
        window.setInterval(function(){
            i++;
            document.write("定时器执行了"+i+"次");
            document.write("<br>\n");
        },3000); 
        window.setTimeout(function(){
            i++;
            document.write("定时器执行了"+i+"次");
            document.write("<br>\n");
        },3000); 
    </script>
</body>
</html>

DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue基础代码/js/vue.js"></script>
</head>
<body>
    <img id="h1" src="../off.gif"><br><br>

    <div class="cls">武汉科技大学</div><br>
    <div class="cls">信息管理系</div><br>

    <input type="checkbox" name="hobby">网页设计
    <input type="checkbox" name="hobby">java程序设计
    <input type="checkbox" name="hobby">数据结构<br>
</body>
<script>
    /* //id
     var img=document.getElementById('h1');
     //tag
     var divs=document.getElementsByTagName('div');//返回值是数组
     for(let i=0;i<divs.length;i++)
     {
         document.write(divs[i]);
         document.write("<br>\n");
     }
     //name
     var hobbys=document.getElementsByName('hobby');
     for(let i=0;i<hobbys.length;i++)
    {
        document.write(hobbys[i]);
         document.write("<br>\n");
     }
    
    //class
    var clss=getElementsByClassName('cls');
     for(let i=0;i<clss.length;i++)
    {
         document.write(clss[i]);
     }*/
    /* var divs=document.getElementsByClassName('cls');
    var div1=div[0];
    div1.innerHTML="传智教育666"; */ 
    //点亮灯泡
    var img=document.getElementById('h1');
        img.src="../on.gif";
    //在div后面加very good
    var divs=document.getElementsByTagName('divs');
    for(let i=0;i<divs.length;i++)
    {
        const div=divs[i];
        div.innerHTML+="<font color ='red'>very good</font>";
    }
    
        var ins=document.getElementsByName('hobby');
        for(let i=0;i<ins.length;i++)
        {
            const check=ins[i];
            check.checked=true;
        }
</script> 
</html>

事件监听

事件绑定

<!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" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">

</body>
<script>
function on(){
    alert("按钮1被点击了！");
}
document.getElementById('btn2').onclick=function(){
    alert("按钮2被点击了");
}

</script>
</html>

事件绑定TEST

<!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>
    <form action="" style="text-align:center;"onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        <input type="submit" id="b1" value="提交">
        <input type="button" id="b1" value="单击事件" onclick="fn1()">

    </form>
    <br><br><br>

    <table width="800px" border="1px" cellspacing="0" align="center" onmousemove="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀 </td>
        </tr>
    </table>
</body>
<script>
    function load(){
        console.log("页面加载完成......");
    }
    function fn1(){
        console.log("我被点击了......");
    }
    function bfn(){
        console.log("失去焦点......")
    }
    function ffn(){
        console.log("获得焦点......")
    }
    function kfn(){
        console.log("键盘被敲下......")
    }
    function over(){
        console.log("鼠标移入了......")
    }
    function out(){
        console.log("鼠标移出了......")
    }
    function subfn(){
        alert("表单被提交了...")
    }
</script>
</html>

事件监听案例

!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>
    <img src="../off.gif" id="light" ><br><br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br><br>
    <input type="text" id="name" value="ITCAST" onblur="upper()" onfocus="lower()">
    <br><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
<script>
    function on(){
        var img=document.getElementById('light');
        img.src="../on.gif";
    }
    function off(){
        var img=document.getElementById('light');
        img.src="../off.gif";
    }
    function lower(){
        var input=document.getElementById("name");
        input.value=input.value.toLowerCase();
    }
    function upper(){
        var input=document.getElementById("name");
        //转大写
        input.value=input.value.toUpperCase();
    }
    function checkAll(){
        var hobbys=document.getElementsByName("hobby");
        for(let i=0;i<hobbys.length;i++)
        {
            const element=hobbys[i];
            element.checked=true;
        }
    }
    function reverse(){
        var hobbys=document.getElementsByName('hobby');
        for(let i=0;i<hobbys.length;i++)
        {
            const element=hobbys[i];
            element.checked=false;
        }    }
</script>
</html>