V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
binarymann
V2EX  ›  问与答

Javascript怎么能找出出错在哪里呢?

  •  
  •   binarymann · 2012-03-27 17:35:08 +08:00 · 4274 次点击
    这是一个创建于 4609 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Javascript实在太不newbie-friendly了,照着书上写了个计算器,对着看了N遍没有一个错误但就是运行不起来,也不报错,打开chrome的developer tool切换到script标签啥都看不到...

    作为第一门语言学习是不是得换门语言啊,譬如Python?

    <!DOCTYPE html>

    <html>
    <head>
    <title></title>
    <style type="text/css">
    td {
    border: 1px solid gray;
    width: 50px;
    }
    #results {
    height: 20px;
    }
    </style>
    </head>
    <body>
    <table border="0" cellpadding="2" cellspacing="2">
    <tr>
    <td colspan="4" id="result"></td>
    </tr>
    <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">+</a></td>
    </tr>
    <tr>
    <td><a href="#">4</a></td>
    <td><a href="#">5</a></td>
    <td><a href="#">6</a></td>
    <td><a href="#">-</a></td>
    </tr>
    <tr>
    <td><a href="#">7</a></td>
    <td><a href="#">8</a></td>
    <td><a href="#">9</a></td>
    <td><a href="#">*</a></td>
    </tr>
    <tr>
    <td><a href="#">Clear</a></td>
    <td><a href="#">0</a></td>
    <td><a href="#">=</a></td>
    <td><a href="#">/</a></td>
    </tr>
    </table>
    <script type="text/javascr ipt">
    //using early dom event handlers
    function addDigit(digit){
    var resultField = document.getElementById("result");
    resultField.innerHTML += digit;
    return false;
    }
    function calculate(){
    var resultField = document.getElementById("result");
    resultField.innerHTML = eval(resultField.innerHTML);
    return false;
    }
    function clear(){
    var resultField = document.getElementById("result");
    resultField.innerHTML = "";
    return false;
    }
    function getHandlerFunction(innerHTML){
    return function(){
    addDigit(innerHTML);
    return false;
    };
    }

    onload = function() {
    var links = document.getElementsByTagName("a");
    var length = links.length;

    for (var i = 0; i < length; i ++) {
    var link = links[i];
    var innerHTML = link.innerHTML;

    switch(innerHTML) {
    case "Clear":
    link.onclick = clear;
    break;
    case "=":
    link.onclick = calculate;
    break;
    default:
    link.onclick = getHandlerFunction(innerHTML);
    break;
    }
    }
    };

    </script>
    </body>
    </html>
    24 条回复    1970-01-01 08:00:00 +08:00
    icyflash
        1
    icyflash  
       2012-03-27 17:39:22 +08:00
    切到 console
    binarymann
        2
    binarymann  
    OP
       2012-03-27 17:44:18 +08:00
    @icyflash 切到console了一片空白要如何调试呢?可以将我上面的代码全部复制粘贴到console里面运行不(貌似不行,刚试过了)
    lackrp
        3
    lackrp  
       2012-03-27 17:47:37 +08:00
    <script type="text/javascr ipt"> 这句话多了个空格
    jiyinyiyong
        4
    jiyinyiyong  
       2012-03-27 17:48:47 +08:00
    `<script type="text/javascr ipt">`中间去掉多余空格,, 然后我这边能运行了...
    好像 HTML 当中的 script 不会显示到 script 里面的, 要单独文件才那个.
    JS 感觉因为浏览器环境太复杂才有问题.. 换成 Node 的话感觉和 Python 至少入门不差太多..
    如果有机会楼主来玩 CoffeeScript 吧..
    icyflash
        5
    icyflash  
       2012-03-27 17:49:27 +08:00
    你这个是onload的原因, 换成window.onload
    icyflash
        6
    icyflash  
       2012-03-27 17:54:59 +08:00
    你代码没错,所以捕捉不到,只是按钮点击后没反应,你该考虑下是不是事件没绑定。

    你用 onload,代码是没错的,但仅仅只是定义了一个函数,没将它绑定到对象上。
    binarymann
        7
    binarymann  
    OP
       2012-03-27 17:56:24 +08:00
    @lackrp
    @jiyinyiyong
    @icyflash

    感谢你们!怎么跑了个空格进去...但不报错的确太难找了...

    @jiyinyiyong
    coffeescript看起来很不错,但是还是需要js的背景知识才能学习吧?
    jiyinyiyong
        8
    jiyinyiyong  
       2012-03-27 18:05:01 +08:00
    @binarymann JS 我比较菜, 只是玩的话 CoffeeScript 直接学也是可以的
    另外, 比方说网上的文档基本是用 JS 写的, 那当然要熟悉 JS 啦才能懂了
    先后顺序我没试过, 估计影响不大, 因为 coffee 本身也能当一门语言了
    .. 就是不能浏览器直接 REPL 运行, 自己配环境入门的时候有点烦
    zephyro
        9
    zephyro  
       2012-03-27 18:10:31 +08:00
    前几天使用vim+chrome开发html5小游戏,找着bug一个晚上晃晃悠悠地就过去了... ...各种alert加输出,最后总是超低级的无聊错误。
    我记得有浏览器运行的时候会报错的,第几行第几个字符缺少定义什么的。
    我的ie是有的,chrome和firefox是不是有插件可以辅助开发。
    gDD
        10
    gDD  
       2012-03-27 18:12:16 +08:00
    @zephyro 看一楼。
    cmonday
        11
    cmonday  
       2012-03-27 18:15:14 +08:00
    @zephyro 你竟然用IE做前端开发,效率得有多低……
    cmonday
        12
    cmonday  
       2012-03-27 18:17:29 +08:00
    Javascript在浏览器环境下会碰到很多意料之外的问题,确实不是很适合新手。不过如果LZ想学前端相关的知识,我倒是有一个建议,就是直接从学习jQuery开始入门
    icyflash
        13
    icyflash  
       2012-03-27 18:26:48 +08:00
    呃,我弄错了,onload是可以的。一直用jquery,JS基础还是太差了。
    reus
        14
    reus  
       2012-03-27 18:34:53 +08:00
    表……表格布局!
    感觉这书不靠谱啊
    reus
        15
    reus  
       2012-03-27 18:35:47 +08:00
    哦是计算器,我错了(脸红地匿
    Livid
        16
    Livid  
    MOD
       2012-03-27 19:21:36 +08:00
    leecade
        17
    leecade  
       2012-03-27 19:29:59 +08:00
    呵呵,来吓吓你:

    猜你不知道的JavaScript, Part I: operator
    http://www.jsser.com/t/21
    iwege
        18
    iwege  
       2012-03-27 19:32:36 +08:00
    script为了减少错误,最好不要写type..或者是使用自动生成。
    另外新版chrome的inspector很强,基本上等价于编辑器了,Scripts的tab,对于页面内嵌的script它可以抽出来作为单个script内容,也可以通过那个检查是否已经作为Script来执行了。同时也自带代码格式化工具,可以将任何恶心的代码格式化。
    likuku
        19
    likuku  
       2012-03-27 20:21:25 +08:00 via iPhone
    JS太难了,python入门蛮好的
    benzhe
        20
    benzhe  
       2012-03-27 20:30:00 +08:00
    选一个合适的IDE吧,比如netbeans,以上错误它会毫不客气的告诉你
    ant_sz
        21
    ant_sz  
       2012-03-27 20:32:45 +08:00
    firefox有firebug,webkit系的浏览器都有webkit自带的开发人员工具,设置缎带年什么的都可以哦
    caoyue
        22
    caoyue  
       2012-03-27 20:55:52 +08:00
    firebug有断点调试的功能的吧,很容易找到错误点
    binarymann
        23
    binarymann  
    OP
       2012-03-27 21:30:55 +08:00
    @benzhe 看来我得去下载netbeans来试试,现在用的是aptana
    ihacku
        24
    ihacku  
       2012-03-27 22:21:22 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   970 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:28 · PVG 06:28 · LAX 14:28 · JFK 17:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.