这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 程序设计中的重要环节:JS 调试,本文通过一个加法器,介绍 JS 如何调试,感兴趣的小伙伴们可以参考一下
本文主要通过一个加法器,介绍 JS 如何调试。先上代码: 效果:
test.html:
- <span style="font-family:Comic Sans MS;font-size:18px;">
- <!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>
- </span>
demo.js
- <span style="font-family:Comic Sans MS;font-size:18px;">/**
- * 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;
- }</span>
重点摘要:
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 进行调试,谢谢大家的阅读。
来源: http://www.phperz.com/article/17/0412/268214.html