javascript中简单的进制转变代码实例,tool详细介绍

http://www.cr173.com/html/19114\_4.html

不知底怎么微专门的学业总是要把调节和测验放到最前边来说,未有基础地看那些代码很辛劳,不过作者明明看过了DOM,依旧不会=
=,真是辣鸡。不过可以看出来,实际支付中调治将养是老大至关心珍视要的一步,所以也理应重申。

复制代码 代码如下:

第 4 页 js调节和测量试验源码调控面板

前期是在代码中加多alert()和console.log()来查阅变量的值,不过假如要翻看的变量很多,就不能够了,所以照旧要用工具来调节相比较平价。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt
<html xmlns=”http://www.w3.org/1999/xhtml"&gt
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/> 
<title>10进制<–>2进制</title> 
</head> 

5 源码调整面板(js调节和测量试验)

各浏览器都含有调节和测量试验工具,右击核实成分得以查阅,调节和测量检验脚本都是在sources面板和console面板。

<body> 
Decimal:  
    <input type=”text” id=”decimal” /> 
    <input type=”button” value=”to Binary” onclick=”return
toBinary();” /> <br /> 
Binary:  
    <input type=”text” id=”binary” /> 
    <input type=”button” value=”to Decimal” onclick=”return
toDecimal();” /> 

Javascript的调节和测量试验,基本上是透过源码调节面板和命令行协作开展的。

翻开变量须求相配断点使用,然后一步一步检查变量的值,未有代码也调节和测量试验不了,所以在写代码的时候再熟知熟习。

      
<script type=”text/javascript”> 
var d = document.getElementById(‘decimal’);  
var b = document.getElementById(‘binary’);  

5.1 Beautiful javascript

附录:八个简练的加法计算器

function toBinary() {  
    var num = d.value;  
    if (isNaN(num) || !num) {  
        d.value = “”;  
        return false;  
    }  
    b.value = (parseInt(num)).toString(2);  
}  

网上的js一般是压缩过的,阅读压缩过的javascript肯定是否人能张开的,更别讲增加断点了。在
Scripts 面板上边有个 Pretty print 开关(这种标识 {}), 点击会将精减 js
文件格式化缩进规整的文书, 那时候在设定断点可读性就大大进步了。

看到那个大约的加法函数也很想尝试一下,撸代码如下:

function toDecimal() {  
    var num = b.value;  
    if (isNaN(num) || !num) {  
        b.value = “”;  
        return false;  
    }  
    d.value = parseInt(num, 2);  
}  
</script> 
</body> 
</html>

图片 1

一天过去了。。。

你或然感兴趣的篇章:

调整前

算了,还是copy一下吧。。。。

图片 2

<!DOCTYPE html>

调整后

    <head>

5.2 代码出错定位

        <meta charset=”utf-8″>

1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; 2 3 <htmlxmlns=”http://www.w3.org/1999/xhtml"&gt; 4 5 <head> 6 7 <title>javascript
add</title>8 9 <script type=”text/javascript”>10 11 var div=document.getElementByd(“a”);12 13function calSum(){14 15 var a=parseInt(document.getElementById(“num1”).value);16 17var b=parseInt(document.getElementById(“num2”).value);18 19document.getElementById(“num3″).value=(a+b);20 21 }22 23 </script>24 25 </head>26 27<body>28 29 <input type=”text” id=”num1″/>add<input type=”text” id=”num2″/>30 31<input type=”button” id=”btnCal” onclick=”calum()” value=”equal”/><input type=”text”id=”num3″/>32 33 </body>34 35 </html>

        <title>Demo</title>

地点的代码中,铁黄标识部分显明是谬误的,在IDE中微微错误是反省不出去的(非常是跟浏览器有关的有的)。加载该页面后,能够在展现栏看到报错音讯,然后径直定位至出错点。

        <style>

图片 3

            #result{

Javascript错误地点固定

                display:inline-block;

5.3 增加断点及单步

                color:#f00;

5.3.1 断点中断

                width:40px;

能够通过单击左侧侧增加断点,并在左边显示。也能够透过watch
expression增多查看的变量。

            }

图片 4

        </style>

小编们增多了多个断点,假使在页面上的操作实行到断点处,就能在断点处终止。然后,我们能够经过右边最上面的按键调节和测量试验,与VS等IDE的调和特别周边。Call
stack是呈现函数的调用栈,在调节和测量检验大范围的javascript程序是不行政管理用。

    </head>

图片 5

    <body>

图片 6

        <h2>Demo</h2>

单步调节和测量检验

        <input type=”text” id=”num1″>

5.3.2 页面中断调试

        <span>+</span>

除外给设定常规断点外, 还足以在某一特定事件发生时停顿(不对准成分) , 在
Scripts 面板侧边, 有个 伊夫nt Listener Breakpoints,
这里列出了协理的有着事件, 不止 click, keyup 等事件, 还援助 Timer(在
setTimeout setInterval 管理函数早先实施时暂停), onload, scroll 等事件。

        <input type=”text” id=”num2″>

图片 7

        <span>=</span>

6 显示行(命令行)

        <div id=”result”> </div>

命令行对于大家这种新手有五个特别实惠的地点,对于javascript提供的API恐怕API的功力不是特别熟习。那一年命令行就成为我们试验最棒的地点。如,大家想查看document上面有何样函数,大家就足以在命令行中输入,然后选中并尝试。对于jquery等开源框架的读书,这种办法也丰裕飞快,学代码依旧得跑起来才行。

        <input type=”submit” value=”计算” id=”btn”>

图片 8

        <script>

图片 9

            var nNum1 = document.getElementById(‘num1’),

大家可以在命令行里面一贯退换内部存款和储蓄器中的内容,对于小函数本人就足以用这么的方法直接调换。

            nNum2 = document.getElementById(‘num2’),

咱俩按enter是对输入的内容运作,假诺要换行须要按shift+enter。在那中间,我们一直在命令行里面里面讲calSum函数覆盖掉,a+b换来了a*b。运转结果如下所示。

            nResult = document.getElementById(‘result’),

图片 10

            nBtn = document.getElementById(‘btn’);

命令行使用

            nBtn.addEventListener(“click”,onClickAdd,false);

图片 11

            function onClickAdd(){

运作结果

                var a = parseInt(nNum1.value),

                b = parseInt(nNum2.value),

                result;

                result = add(a,b);

                nResult.innerHTML = result;

            }

            function add(a,b){

                return a+b;

            }

        </script>

    </body>

</html>