JS代码练习（上）----cn教程可运行代码

最新推荐文章于 2023-05-09 13:40:29 发布

牛小小小婷～

最新推荐文章于 2023-05-09 13:40:29 发布

阅读量285

点赞数 2

分类专栏： # JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/hannah2233/article/details/121077755

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章目录

- - 一、 JS基础

一、 JS基础

1-1 JS事件，改变HTML内容

<!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>JS简介</title>
</head>

<body>
    <button type="button" onclick="alert('欢迎！')">点我！</button>
    <div id="demo">
        我电脑设备
    </div>
    <script>
        // 直接写入HTML输出流
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
        // 改变HTML内容
        document.getElementById("demo").innerHTML = "我要好好学web"
    </script>

    <!-- js改变HTMl图像，动态改变HTML<image>的来源 -->
    <img id="myimage" src="https://www.runoob.com/images/pic_bulboff.gif" onclick="changeImage()" style="display: inline-block; margin:0 200px;" alt="">
    <script>
        function changeImage() {
            element = document.getElementById('myimage')
            if (element.src.match("bulbon")) {
                element.src = "https://www.runoob.com/images/pic_bulboff.gif"
            } else {
                element.src = "https://www.runoob.com/images/pic_bulbon.gif"
            }
        }
    </script>

    <script>
        function myfunction() {
            document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
        }
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>
    <p>
        您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
    <button type="button" onclick="myfunction()">点击这里</button>

</body>

</html>

1-2 js输出与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>2. js 输出</title>
</head>

<body>
    <!-- js输出 -->
    <h1>我的第一个页面</h1>
    <p>我的第一个段落。</p>
    <button display="block" onclick="myFunction()">文档加载完点我HTML页面会被覆盖</button>

    <script>
        window.alert(5 + 6);
    </script>
    <!-- 将javascript直接写在HTML文档中 -->
    <script>
        document.write(Date())

        function myFunction() {
            document.write(Date())
        }
        // <!-- js对代码进行拆行 -->
        document.write("你好 \
         世界！")
            //  这根本没用的好吗
    </script>

    <hr>

    <script>
        // <!-- js数组 -->
        var cars = new Array();
        cars[0] = "Saab";
        cars[1] = "Vaol";
        cars[2] = "e";
        // <!-- 或者 -->
        var cars = new Array("Saab", "Volvo", "BMW");
        var cars = ["S", "a", "e"]
        console.log(cars);
    </script>

</body>

</html>

1-3 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>Js对象与函数</title>
</head>

<body>
    <!-- 访问对象属性 -->
    <p id="demo"></p>
    <script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            age: 30,
            fullName() {
                return this.firstName + " " + this.lastName;
            }
        }
        console.log(person.lastName);
        console.log(person["lastName"]);
        document.getElementById("demo").innerHTML = person.fullName()
    </script>

    <!-- js函数 -->
    <!-- 计算两个数字的乘积，并返回结果 -->
    <div id="demo2"></div>
    <script>
        function myF(a, b) {
            return a * b
        }
        console.log(myF(2, 3));
        document.getElementById("demo2").innerHTML = myF(4, 3)
    </script>

</body>

</html>

1-4 JS事件,js跳出语句，字符串,for循环

<!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>JS事件...for循环</title>
</head>

<body>
    <button onclick="this.innerHTML = Date()">现在的时间是？</button>
    <script>
        // 字符串也可以是对象
        var x = "John";
        // 创建String对象，会拖慢执行速度
        var y = new String("John");
        console.log(x);
        console.log(y);
        // x是字符串，y是对象
        console.log(x === y);
    </script>

    <!-- for循环 -->
    <p id="for_in">

    </p>
    <script>
        var txt;
        var person = {
            fname: "Bill",
            lname: "Gates",
            age: 56
        };
        for (x in person) {
            console.log(person[x]);
            txt += person[x];
        }
        document.getElementById("for_in").innerHTML = txt
    </script>

    <!-- javaScript标签： 此时break可以用来跳出所有的代码块 -->
    <ul>
        <li id="li"></li>
    </ul>
    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        list: {
            document.write(cars[0] + "<br>");
            document.write(cars[1] + "<br>");
            document.write(cars[2] + "<br>");
            break list;
            document.write(cars[3] + "<br>");
            document.write(cars[4] + "<br>");
            document.write(cars[5] + "<br>");
        }
        for (x in cars) {
            document.querySelectorById("li").innerHTML = x;
        }
    </script>

</body>

</html>

1-5 js的typeof,null…

<!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>js的typeof,null...</title>
</head>

<body>
    <button onclick="juiceIsDate()">是日日期嘛？</button>
    <p id="demo"></p>
    <script>
        // null 和 undefined 的值相等，但类型不等：

        typeof undefined // undefined
        typeof null // object
        null === undefined // false
        null == undefined // true


        // JS类型转换
        console.log(typeof NaN); //number
        console.log(typeof Array); //function
        console.log(typeof Date);
        console.log(typeof null); //object

        //constructor属性
        console.log("John".constructor);
        console.log(function() {}.constructor);

        //使用constructor属性来查看对象是否位日期（包含字符串“Date”）
        function juiceIsDate() {
            console.log("调用了");
            var myDate = new Date();

            function isDate(myDate) {
                return myDate.constructor.toString().indexOf("Date") > -1;
            }
            document.getElementById("demo").innerHTML = isDate(myDate);
        }
    </script>
</body>

</html>

1-6 正则表达式

<!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>
</head>

<body>
    <script>
        // search()方法使用正则表达式
        var str = "Visit Runoob!";
        var n = str.search(/Run/i);
        console.log(n);
        // search()方法使用字符串
        var str = "Visit Runoob!";
        var m = str.search("Run")
        console.log(m);

        // replace()

        // test()
        var patt = /e/
        var isHere = patt.test("The eeee");
        /e/.test('HT enjse dzfhje')
        console.log(isHere);

        //exec()用于检索字符串中的正则表达式的匹配
        console.log(/e/.exec("The best Thingse"));
    </script>
</body>

</html>

1-7 try…catch

<!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>try catch</title>
</head>

<body>
    <button onclick=message()>点击查看错误信息</button>
    <script>
        function message() {

            try {
                allert("Welexon");
            } catch (err) {
                text = "错误描述：" + err.message + "\n\n";
                alert(text);
            }
        }
    </script>

    <script>
        var result = cal(10000);
        console.log(result);

        function cal(salary) {
            // TODO: 在此处补充代码
            if (salary <= 5000) return 0;
            else if (salary > 5000 && salary <= 9000) return salary * 0.03;
            else if (salary > 9000 && salary <= 15000) return salary * 0.05;
            else return salary * 0.1;
        }
    </script>

    <p>不管输入是否正确，输入框都会再输入后清空。</p>
    <p>请输入 5 ~ 10 之间的数字：</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">点我</button> 
    <div id="p01"></div>

    <!-- finally语句 -->
    <script>
        function myFunction() {
            var message, x;
            message = document.getElementById("p01");
            message.innerHTML = "";
            x = document.getElementById("demo").value;
            try {
                if (x == "") throw "值是空的";
                if (isNaN(x)) throw "值不是一个数字";
                x = Number(x);
                if (x > 10) throw "太大";
                if (x < 5) throw "太小";
            } catch (err) {
                message.innerHTML = "错误：" + err + ".";
            } finally {
                document.getElementById("demo").value = "";
            }

        }
    </script>

</body>

</html>

1-8 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>js严格模式</title>
</head>

<body>

    <script>
        "use strict";
        // 不允许使用未声明的变量
        // myFunction();

        // function myFunction() {
        //     y = 3.14;
        // }
        var x = 10;
        var y = "10";
        if (x === y) {
            console.log("你好你好");
        }
        if (x == y) {
            console.log("你在干嘛");
        }
    </script>
    <script>
        // 不允许使用未声明的变量
        myFunction();

        function myFunction() {
            y = 3.14;
            console.log(y);
        }
    </script>

    <!-- 解决浮点型数据精确度问题 -->
    <script>
        var x = 0.1;
        var y = 0.2;
        var z = (x * 10 + y * 10) / 10;
    </script>
    <input type="text" id="getx">
    <!-- 字符串断行 -->
    <script>
        var x = "Hello \
      World!";
        console.log(x);
        document.getElementById("getx").value = x;
    </script>'



    <!--     
    数组中使用名字来索引
    许多程序语言都允许使用名字来作为数组的索引。
    使用名字来作为索引的数组称为关联数组(或哈希)。
    JavaScript 不支持使用名字来索引数组，只允许使用数字索引。' -->

    <!-- js使用误区： 应该先使用typeof来检测对象是否已定义 ： -->
    <script>
        if (typeof myObj !== "undedfined" && myObj !== null) {
            console.log("对象已经定义");
        }
    </script>
</body>

</html>

1-9 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>javascript表单验证</title>
</head>

<body>
    <!-- 判断fname值是否存在 -->
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("需要输入名字。");
                return false;
            }
        }
    </script>
    <form name="myForm" onsubmit="return validateForm()" method="post">
        名字： <input type="text" name="fname">
        <input type="button" value="提交">
    </form>


</body>

</html>

1-10 JSON

1-10-1 json.html

<!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>javascript表单验证JSON(js Object Notation)</title>
</head>

<body>
    <div id="demo"></div>
    <script>
        var text = '{ "sites" : [' +
            '{ "name":"Runoob" , "url":"www.runoob.com" },' +
            '{ "name":"Googlw" , "url":"www.google.com"},' +
            '{ "name":"Taobao" , "url":"www.taobao.com"}]}';
        obj = JSON.parse(text);
        document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
    </script>

</body>

</html>

1-10-2 json.json

{
    "sites": [
        { "name": "Runam", "url": "www.einm.com" }
    ]
}

1-11 js:void和异步编程

<!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>javascript:void(0)</title>
</head>

<body>
    <a href="javascript:void(alert('Warning!!'))">点我</a>

    <!-- js异步编程 -->
    <!-- 异步：asynchronous,async -->
    <!-- 同步： synchronous，sync -->
    <div id="demo"></div>
    <script>
        // function print() {
        //     document.getElementById("demo").innerHTML = "RUNmmB!";

        // }
        // setTimeout(print, 3000);
        setTimeout(function() {
            document.getElementById("demo").innerHTML = "ddddfdf";
        }, 3000);
        document.getElementById("demo").innerHTML = "RUUM";
        console.log("2");
    </script>

    <!-- 异步Ajax -->
    <!-- 除了setTimeout函数以外，XMLHttpRequest常用于请求来自服务器上的XML或JSON数据 -->
    <div id="demo"></div>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            document.getElementById("demo").innerHTML = xhr.responseText;
        }
        xhr.onerror = function() {
                document.getElementById("demo").innerHTML = "请求出错！"
            }
            // 发送异步GET请求
        xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
        xhr.send();

        // jQuery库更加优雅的使用异步AJAX
        $(document).ready(function() {
            $("button").click(function() {
                $.get("", function(data, status) {
                    alert(data, status);
                });
            });
        })
    </script>


</body>

</html>

1-12 Promise对象

<!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>12.Promise对象</title>
</head>

<body>
    <!-- 格式 -->
    <!-- new Promise(function (resolve, reject){ }) -->
    <script>
        // setTimeout(function() {
        //     console.log("First");
        //     setTimeout(function() {
        //         console.log("Second");
        //         setTimeout(function() {
        //             console.log("Third");
        //         }, 3000);
        //     })
        // })

        // 用Promise来实现同样的功能
        new Promise(function(resolve, reject) {
            setTimeout(function() {
                console.log("First");
                resolve();
            }, 1000)
        }).then(function() {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    console.log("Second");
                    resolve();
                }, 4000)
            });
        }).then(function() {
            setTimeout(function() {
                console.log("Third");
            }, 3000);
        })

        new Promise(function(resolve, reject) {
            console.log("Run");
        })

        // resolve表示一切正常，reject是出现异常时所调用的
        new Promise(function(resolve, reject) {
            var a = 0;
            var b = 1;
            if (b == 0) reject("Dovode zero");
            else resolve(a / b);
        }).then(function(value) {
            console.log("a / b = " + value);
        }).catch(function(err) {
            console.log(err);
        }).finally(function() {
            console.log("End");
        })
    </script>

    <script>
        // 计时器程序比函数瀑布还要长，将它的核心部分写成一个Promise函数
        function print(delay, message) {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    console.log(message);
                    resolve();
                }, delay);
            })
        }

        print(1000, "First").then(function() {
            return print(4000, "Second");
        }).then(function() {
            print(3000, "Third");
        })

        // 上面可以写的更好看
        async function asyncFunc() {
            await print(1000, "First");
            await print(1000, "two");
            await print(1000, "three");
        }
        // 异步函数在这个Promise原生API的机制是一样的，处理异常的机制将用try-catch块实现
        async function asyncFunc() {
            try {
                await new Promise(function(resolve, reject) {
                    throw "Some error";
                });
            } catch (err) {
                console.log(err);
            }
        }
        asyncFunc();
        // 如果Promise有一个正常的返回值，await语句也会返回它
        async function asyncFunc() {
            let value = await new Promise(
                function(resolve, reject) {
                    resolve("Return value");
                }
            );
            console.log(value);
        }
        asyncFunc();
    </script>

</body>

</html>

牛小小小婷～

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS代码练习（上）----cn教程可运行代码

一、 JS基础1-1 JS事件，改变HTML内容<!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.
复制链接

扫一扫