Javascript 基础:JS调试【案例】

不知道为什么微专业总是要把调试放到最前面来讲,没有基础地看这些代码很吃力,可是我明明看过了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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,677评论 0 13
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,189评论 2 17
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 28,975评论 5 20
  • 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大...
    DaveWeiYong阅读 716评论 0 1
  • 月亮昨晚告诉我她在等我 我说 我知道 …… 屋子廖寂无趣 指钟一点点跳动,一点点把黑夜放大 我被孤独逼出释狂 帘幕...
    Cleome11阅读 325评论 2 2

友情链接更多精彩内容