首页 > 程序开发 > web前端 > JavaScript > 正文
网易前端微专业,JavaScript程序设计:JS调试
2015-12-08       个评论    来源:yanzi1225627的专栏  
收藏    我要投稿

本节主要通过一个加法器,介绍JS如何调试。先上代码:

test.html:

 




计算器

+ = <script src="./demo.js"></script>
demo.js

 

 

/**
 * Created by yanzi on 15/12/8.
 */
var num1 = document.getElementById("num1"),
    num2 = document.getElementById("num2"),
    result = document.getElementById("result"),
    btn_add = document.getElementById("add");

btn_add.addEventListener("click", onAddClick, false);
function onAddClick(){
    var a = parseInt(num1.value),
    b = parseInt(num2.value);
    var sum = add(a, b);
    result.innerHTML = sum;
}

/**
 *
 * @param a
 * @param b
 * @returns {*}
 */
function add(a, b){
    return a+b;
}

 

效果:

\

课堂摘要:

1,一般调试JS,打印信息有如下三种:

a,用alert,缺点是每次都弹框

b,用console.log,这个数据量小还可以

c,加断点调试

2,在JS里,如果变量前面加var,表示局部变量,function里如果不带var表示全局变量。因此一般情况下变量前面带var.

3,一般在chrome调试器里,elements看代码,在source目录下进行调试。在该模式下,点击js里每一行即可以加断点。

\

4,调试模式下最右边的四个按钮分别是:下一个断点处,单步执行,进到下一函数,跳出函数。基本所有的调试工具都有这四种。

\

5,断点模式下,在console里输入变量就可以看到当前值,同时可以随意对值进行修改。

\
点击复制链接 与好友分享!回本站首页
上一篇:一个比较靠谱的原生js导航悬浮
下一篇:轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站