黑马2023JavaScript笔记1

news2024/12/25 12:51:21

一、js知识点

<!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>
        //js自定义对象
        var user = {
            name:"Tom",
            sex:"male"
        };
        console.log(user.name);


        //json字符串
        var json = '{"name":"XiaoMing","sex":"female"}';
        // 将json字符串转换为json对象
        var jsonobj = JSON.parse(json);
        console.log(jsonobj.name);//XiaoMing
        //将json对象转换为字符串
        alert(JSON.stringify(jsonobj));


        // js数组
        var arr = [1,2,3,4];
        //普通js函数
        arr.forEach(function(e){
            console.log(e);})
        console.log("------------------------");
        //es6中函数
        arr.forEach((e) => {console.log(e)});
        // 两个种函数表达方式效果都是一样的
        

        //在BOM对象中，我们只需要了解window和location两个对象就够了！！！
        // BOM中的两个对象：window和location
        // 一、window对象的方法：
        // 1、confirm
        var result = confirm("你确定吗？");
        alert(result);//点了确定返回true，取消返回false
        // 2、setInterval()。输出执行了多少次。
        let i = 0;
        window.setInterval(function(){
            i++;
            console.log(i+"次");
        },1000);
        // 3、setTimeout()，隔多长时间，执行一次函数（只执行一次）
        var myfun1 = function(){alert("(*´▽｀)ノノ");};
        window.setTimeout(myfun1,5000);

        // 二、location对象
        // 只需要知道location对象的href属性！！！！
        alert(location.href);/* 返回整个url地址 */
        location.href = "https://www.itcast.cn";//自动跳转到改地址

    </script>
</head>
<body>
    <label><input type="radio" name="x">小明</label>
    <label><input type="radio" name="x">huahua</label>
</body>
</html>

二、js综合案例

<!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>综合案例</title>
    <style>
        #center{
            max-width: 1000px;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script>
        window.onload = function(){
            var lamps = document.getElementById("lamp");
            var opens = document.getElementById("open");
            var closes = document.getElementById("close");
            var text = document.getElementById("textcontent");
            var chooseall = document.getElementById("chooseAll");
            var chooseno = document.getElementById("chooseNo");

            opens.onclick = function(){
                lamps.src = 'on.gif';
            }
            closes.onclick = function(){
                lamps.src = 'off.gif';
            }
            // 将字符串转换为小写
            text.onfocus = function(){
                //text.value可读可写，可返回值
                let str = text.value;
                text.value = str.toLowerCase();
            }
            // 将字符串转换为大写
            text.onblur = function(){
                let str = text.value;
                text.value = str.toUpperCase();
            }
            // 全选
            chooseall.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = true;
                }
            }
            // 全不选
            chooseno.onclick = function () {
                var myhobby = document.getElementsByName("hobby");
                for (let i = 0; i < myhobby.length; i++) {
                    myhobby[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
    <!-- 
        通过事件监听及DOM操作，完成如下效果实现。
        1、点击“点亮”按钮点亮灯泡，点击“熄灭”按钮 熄灭灯泡。
        2、输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写
        3、点击“全选”按钮，使所有的复选框呈现被选中的状态，点击“反选”按钮使按钮所有的复选框呈现取消勾选的状态。
    -->
    <div id="center">
        <img src="off.gif" id="lamp"><br/>
        <input type="button" value="点亮灯泡" id="open">
        <input type="button" value="熄灭灯泡" id="close">
        <br/>
        <input type="text" id="textcontent" value="Hello">
        <br/>
        <input type="checkbox" name="hobby">C
        <input type="checkbox" name="hobby">C++
        <input type="checkbox" name="hobby">JAVA
        <br/>
        <input type="button" value="全选" id="chooseAll">
        <input type="button" value="全不选" id="chooseNo">
    </div>
    
</body>
</html>