This topic created in 5147 days ago, the information mentioned may be changed or developed.
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>
作为第一门语言学习是不是得换门语言啊，譬如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>
 | 1 icyflash Mar 27, 2012 切到 console |
 | 2 binarymann OP @icyflash 切到console了一片空白要如何调试呢？可以将我上面的代码全部复制粘贴到console里面运行不（貌似不行，刚试过了） |
 | 3 lackrp Mar 27, 2012 <script type="text/javascr ipt"> 这句话多了个空格 |
 | 4 jiyinyiyong Mar 27, 2012 `<script type="text/javascr ipt">`中间去掉多余空格,, 然后我这边能运行了... 好像 HTML 当中的 script 不会显示到 script 里面的, 要单独文件才那个. JS 感觉因为浏览器环境太复杂才有问题.. 换成 Node 的话感觉和 Python 至少入门不差太多.. 如果有机会楼主来玩 CoffeeScript 吧.. |
| 5 icyflash Mar 27, 2012 你这个是onload的原因， 换成window.onload |
| 6 icyflash Mar 27, 2012 你代码没错，所以捕捉不到，只是按钮点击后没反应，你该考虑下是不是事件没绑定。 你用 onload，代码是没错的，但仅仅只是定义了一个函数，没将它绑定到对象上。 |
| 7 binarymann OP @lackrp @jiyinyiyong @icyflash 感谢你们！怎么跑了个空格进去...但不报错的确太难找了... @jiyinyiyong coffeescript看起来很不错，但是还是需要js的背景知识才能学习吧？ |
| 8 jiyinyiyong Mar 27, 2012 @binarymann JS 我比较菜, 只是玩的话 CoffeeScript 直接学也是可以的 另外, 比方说网上的文档基本是用 JS 写的, 那当然要熟悉 JS 啦才能懂了 先后顺序我没试过, 估计影响不大, 因为 coffee 本身也能当一门语言了 .. 就是不能浏览器直接 REPL 运行, 自己配环境入门的时候有点烦 |
 | 9 zephyro Mar 27, 2012 前几天使用vim+chrome开发html5小游戏，找着bug一个晚上晃晃悠悠地就过去了... ...各种alert加输出，最后总是超低级的无聊错误。 我记得有浏览器运行的时候会报错的，第几行第几个字符缺少定义什么的。 我的ie是有的，chrome和firefox是不是有插件可以辅助开发。 |
 | 12 cmonday Mar 27, 2012 Javascript在浏览器环境下会碰到很多意料之外的问题，确实不是很适合新手。不过如果LZ想学前端相关的知识，我倒是有一个建议，就是直接从学习jQuery开始入门 |
| 13 icyflash Mar 27, 2012 呃，我弄错了，onload是可以的。一直用jquery，JS基础还是太差了。 |
 | 14 reus Mar 27, 2012 表……表格布局！ 感觉这书不靠谱啊 |
| 15 reus Mar 27, 2012 哦是计算器，我错了（脸红地匿 |
 | 16 Livid MOD PRO |
 | 17 leecade Mar 27, 2012 |
 | 18 iwege Mar 27, 2012 script为了减少错误，最好不要写type..或者是使用自动生成。 另外新版chrome的inspector很强，基本上等价于编辑器了，Scripts的tab，对于页面内嵌的script它可以抽出来作为单个script内容，也可以通过那个检查是否已经作为Script来执行了。同时也自带代码格式化工具，可以将任何恶心的代码格式化。 |
 | 19 likuku Mar 27, 2012 via iPhone JS太难了，python入门蛮好的 |
 | 20 benzhe Mar 27, 2012 选一个合适的IDE吧，比如netbeans，以上错误它会毫不客气的告诉你 |
 | 21 ant_sz Mar 27, 2012 firefox有firebug，webkit系的浏览器都有webkit自带的开发人员工具，设置缎带年什么的都可以哦 |
 | 22 caoyue Mar 27, 2012 firebug有断点调试的功能的吧，很容易找到错误点 |
| 23 binarymann OP @benzhe 看来我得去下载netbeans来试试，现在用的是aptana |
 | 24 ihacku Mar 27, 2012 |
Select Language