JS在html中加法器,JavaScript_JavaScript程序设计之JS调试，本文主要通过一个加法器，介 - phpStudy...

JavaScript程序设计之JS调试

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

效果：

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

以上就是js调试的具体步骤，希望大家在javascript程序设计时会使用js进行调试，谢谢大家的阅读。相关阅读:

JS实现一个按钮的方法

从数组中随机取x条不重复数据的JS代码

asp.net上传图片并作处理水印与缩略图的实例代码

使用Get方式提交数据到Tomcat服务器的方法

js判断当前页面用什么浏览器打开的方法

android检测网络连接状态示例讲解

jquery showModelDialog的使用方法示例详解

C#编写ActiveX网页截图控件

JS动态增加删除UL节点LI及相关内容示例

AJAX和JSP混合使用方法实例

PHP上传图片进行等比缩放可增加水印功能

MAC系统iTunes清理iOS备份文件增大磁盘空间的方法

浅谈C语言编程中的布尔bool数据类型

CSS实现背景透明文字不透明兼容各种浏览器有图有真相