网易前端云课堂,JavaScript程序设计:JS调试

标签: 网易 前端 课堂 | 发表时间:2015-12-08 00: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如何调试. <title>计算器</title> </head> <body> <div>. <h2>计算器</h2>. <button id="add">计算</button>.

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

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

课堂上的睡姿

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

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的兄弟们.

Web前端优化

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

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法(转载). 进行正式测试之前,应先确定如何开展测试,不可盲目的测试. 一般网站的测试,应按以下流程来进行:. 1)使用HTML Link Validator将网站中的错误链接找出来;. 2)测试的顺序为:自顶向下、从左到右;. 3)查看页面title是否正确. (不只首页,所有页面都要查看);.

前端xss攻击

- - SegmentFault 最新的文章
实习的时候在项目中有接触过关于xss攻击的内容,并且使用了项目组中推荐的一些常用的防xss攻击的方法对项目进行了防攻击的完善. 但一直没有时间深入了解这东西,在此,做一个简单的梳理. xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入的恶意html代码会被执行,从而达到恶意用户的特殊目的.

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

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