网易前端云课堂，JavaScript程序设计：JS调试

标签： 网易 前端 课堂 | 发表时间：2015-12-08 08:41 | 作者：yanzi1225627
出处：http://blog.csdn.net

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

test.html： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>

<div>
    <h2>计算器</h2>

    <div>
        <input type="text" id="num1">
        <span>+</span>
        <input type="text" id="num2">
        <span>=</span>
        <span id="result"></span>
        <button id="add">计算</button>
    </div>
</div>
<script src="./demo.js"></script>
</body>
</html>

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里输入变量就可以看到当前值，同时可以随意对值进行修改。

作者：yanzi1225627 发表于2015/12/8 0:41:20 原文链接
阅读：74 评论：0 查看评论

相关 [网易 前端 课堂] 推荐：

网易前端云课堂，JavaScript程序设计：JS调试

- - CSDN博客推荐文章
本节主要通过一个加法器，介绍JS如何调试. 计算器
. . 1，一般调试JS，打印信息有如下三种：. a，用alert，缺点是每次都弹框. b,用console.log，这个数据量小还可以.

网易邮箱前端Javascript编码规范：基础规范

- - 博客 - 伯乐在线
在多年开发邮箱webmail过程中，网易邮箱前端团队积累了不少心得体会，我们开发了很多基础js库，实现了大量前端效果组件，开发了成熟的opoa框架以及api组件，在此向大家做一些分享. 今天想先和大家聊聊javascript的编码规范. 总所周知，javascript是一种语法极其灵活的语言. javascript在设计之初就只是用来为HTML添加动态效果的.

课堂上的睡姿

- Sonic - Poboo
离开校园好多年了，可是看到这些，就突然好怀念以前课堂偷偷摸摸睡觉的日子，本人功夫不深，只是单单用了一式基本款，就混过了整个学生生涯. 转载请标明: poboo.com.

写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践

- - SegmentFault 最新的文章
笔者近半年一直在参与项目重构，在重构过程中大量应用 性能优化和 设计模式两方面的知识. 性能优化和 设计模式两方面的知识不管在工作还是面试时都是高频应用场景，趁着这次参与大规模项目重构的机会，笔者认真梳理出一些常规且必用的 性能优化建议，同时结合日常开发经验整理出笔者在网易四年来实践到的认为有用的所有 性能优化建议，与大家一起分享分享.

DIY实验课堂：激光微米尺

- icosane - 果壳网 guokr.com - 果壳网
DIYer:TheHomebrewGuru 制作时间:1小时 制作难度:★★★☆☆ GEEK指数:★★★★★. 这是一个非常简单的实验，但背后的概念可能会引起一些混乱（毕竟这是量子物理嘛）. 基本上我们知道物质表现的像实在的固体，但是当到达粒子的尺度时，它们的行为将趋向于海浪和声音那样的波动.

DIY实验课堂：水中的激光

- Aaron Xu - 果壳网 guokr.com - 果壳网
DIYer:老薛 制作时间:90分钟 制作难度:★☆☆☆☆ GEEK指数:★★★☆☆. 4   实验原理 4.1   第一个实验. 下面三张图就是通过这个实验我们将看到的现象. 第一张展示了我们熟悉的光的直线传播. 而光线在水表面和底面来回反射的现象则还包含了一个应用广泛的原理，全反射. 第二张则展示了光有时候也不走直线.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力. JavaScript的兄弟们.

人生课堂：三十年前的一次探险

- azalea - 生物技术创新创业
太牛了，永久单速车，每天100公里山路. 三十年前的七月份，我在苏州医学院读四年级. 暑假，我们五个同学决定骑车从苏州去黄山. 那趟旅程很大程度上影响着我的人生历程. 这是从苏州医学院出发时在宿舍门口的小桥上照的. 我（前右），王玉起（前左，现在加拿大），褚卫（后右，现在美国罗氏），金正帅（后中，是其它班的同学和我们搭伙），田力平（后左，现在苏州当外科主任）.

网络安全课堂：“中间人攻击”(MITM)

- - 煎蛋
你拿着刚买的咖啡，连上了咖啡店的WiFi，然后开始工作，这样的动作在之前已经重复了无数遍，一切都和谐无比. 但你不知道的是有人正在监视你，他们监视着你的各种网络活动，盗取你的银行凭证，家庭住址，个人电子邮件和联系人，当你发现的时候，已经晚了. 现在的小偷已经不仅仅是简单的在地铁上偷你的钱包，更高级的是使用网络攻击获取你的各种信息，当你在咖啡馆上网检查你的账户信息的时候，也许黑客就拦截了你电脑和WiFi之间的通信，监视着你的一举一动.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.