Javascript 基础:JS调试【案例】

2018-02-16  本文已影响0人  Toyou2018

不知道为什么微专业总是要把调试放到最前面来讲,没有基础地看这些代码很吃力,可是我明明看过了DOM,还是不会= =,真是辣鸡。不过可以看出来,实际开发中调试是十分重要的一步,所以也应该重视。

最初是在代码中添加alert()和console.log()来查看变量的值,但是如果要查看的变量很多,就无能为力了,所以还是要用工具来调试比较方便。

各浏览器都带有调试工具,右击审查元素可以查看,调试脚本都是在sources面板和console面板。

查看变量需要配合断点使用,然后一步一步检查变量的值,没有代码也调试不了,所以在写代码的时候再熟悉熟悉。

附录:一个简单的加法计算器

看到这个简单的加法函数也很想尝试一下,撸代码如下:

一天过去了。。。

算了,还是copy一下吧。。。。

<!DOCTYPE html>

    <head>

        <meta charset="utf-8">

        <title>Demo</title>

        <style>

            #result{

                display:inline-block;

                color:#f00;

                width:40px;

            }

        </style>

    </head>

    <body>

        <h2>Demo</h2>

        <input type="text" id="num1">

        <span>+</span>

        <input type="text" id="num2">

        <span>=</span>

        <div id="result"> </div>

        <input type="submit" value="计算" id="btn">

        <script>

            var nNum1 = document.getElementById('num1'),

            nNum2 = document.getElementById('num2'),

            nResult = document.getElementById('result'),

            nBtn = document.getElementById('btn');

            nBtn.addEventListener("click",onClickAdd,false);

            function onClickAdd(){

                var a = parseInt(nNum1.value),

                b = parseInt(nNum2.value),

                result;

                result = add(a,b);

                nResult.innerHTML = result;

            }

            function add(a,b){

                return a+b;

            }

        </script>

    </body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读