JS自学_常见错误复盘

JavaScript作为Web的最主流编程语言之一，自学的时候还是要尽快拿下。

文章适合于同样是初学或即将开始学习JS的小伙伴，你将看到鲜活的真实错误案例，还有学习的注意事项。

JavaScript自学概述：

错误案例：

1、JSON[解析JSON数据填到<tbody>标签内]

<!--以下是错误的代码-->
<body>
 <script type="text/javascript">
    //步骤1、创建JS数组数据
    var stuarr = {"totalnum":3,
        "students":[{"uname":"zs", "uage":"12", "city":"shanghai"},
        {"uname":"ls", "uage":"11", "city":"shanghai"},
        {"uname":"ww", "uage":"13", "city":"shanghai"}]};
    //步骤4、遍历数据写到表格中
    window.onload = function(){
   var btnElt = document.getElementById("mybtn");
   btnElt.onclick()=function(){ //★错误1_onclick不能加()
    var html = "";
    //alert(stuarr["students"].length);
    var emps = stuarr["students"];
    for(var i, i < emps.length, i++){ //★错误2_只能用;号不能用,号；且i要有起始值！
     html += "<tr>";
     html +=    "<td>" + emps[i].uname+"</td>";
     html +=    "<td>" + emps[i].uage+"</td>";
     html +=    "<td>" + emps[i].["city"]+"</td>"; //★错误3_不能既用.又用["city"]
     html +=    "</tr>";
    };
    var tableElt = document.getElementById("mytable");
    tableElt.value = html;//★错误4_表单写入也不能用value，而用innerHTML
    document.getElementById("mytbody").innerHTML=html;
   }
    }
    //span不能用value而应该用innerHTML
    //★错误5_一定要放到btnElt.onclick的事件内，否则页面未加载完成就会执行，会报错
    document.getElementById("myspan").innerHTML = stuarr.totalnum;
    
 </script>
    <input type="button", value="将JSON数据写进表格中", id="mybtn" />
    <!--步骤2、创建表格-->
    <h2>员工信息列表</h2> <!--h2表示二级标签-->
    <hr>
    <table border="1px", width="50%">
   <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
   </tr>
   <tbody id="mytbody">
   </tbody>
    </table>
    <!--步骤3、创建span信息框-->
    总数等于<span id="myspan", value=0>个人</span>
    <!--★错误6_span默认值应放在标签中间,而不是标签内，不用value属性承载默认值-->
    </body>
</html>

省略前置代码...
<!--以下是正确的代码-->
<body>
 <script type="text/javascript">
    //步骤1、创建JS数组数据
    var stuarr = {"totalnum":3,
        "students":[{"uname":"zs", "uage":"12", "city":"shanghai"},
        {"uname":"ls", "uage":"11", "city":"shanghai"},
        {"uname":"ww", "uage":"13", "city":"shanghai"}]};
    //步骤4、遍历数据写到表格中
    window.onload = function(){
   var btnElt = document.getElementById("mybtn");
   btnElt.onclick=function(){  //★错误1_onclick不能加()
    var html = "";
    //alert(stuarr["students"].length);
    var emps = stuarr["students"];
    for(var i=0; i < emps.length; i++){ //★错误2_只能用;号不能用,号；且i要有起始值！
     html += "<tr>";
     html +=    "<td>" + emps[i].uname+"</td>";
     html +=    "<td>" + emps[i].uage+"</td>";
     html +=    "<td>" + emps[i].city+"</td>"; //★错误3_引用属性不能既用.又用["city"]
     html +=    "</tr>";
    };
    //alert(html);用来调试用
    //★错误4_表单写入也不能用value，而用innerHTML
    document.getElementById("mytbody").innerHTML=html;
    //span不能用value而应该用innerHTML
    //★错误5_一定要放到btnElt.onclick的事件内，否则页面未加载完成就会执行，会报错
    document.getElementById("myspan").innerHTML = stuarr.totalnum;
   }
    }       
 </script>
    <input type="button", value="将JSON数据写进表格中", id="mybtn" />
    <!--步骤2、创建表格-->
    <h2>员工信息列表</h2> <!--h2表示二级标签-->
    <hr>
    <table border="1px", width="50%">
   <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
   </tr>
   <tbody id="mytbody">
   </tbody>
    </table>
    <!--步骤3、创建span信息框-->
    总数等于<span id="myspan">0</span>个人
    <!--★错误6_span默认值应放在标签中间,而不是标签内，不用value属性承载默认值-->
    </body>
</html>

序号	错误描述	错误总结
错误1	onclick不能加()	对象.事件(); 表示执行这个事件对应的函数。对象.事件=function(){}; 表示把等号后面的自定义函数注册到事件中，当触发事件句柄则执行函数内容
错误2	只能用;号不能用,号；且i要有起始值！	这里的遍历同java。就算是python也是用in range(n,m)，没见过用逗号的！
错误3	引用属性不能既用.又用["city"]	引用属性用的不熟练
错误4	表单写入也不能用value，而用innerHTML	<div>和<span>标签的值都要用innerHTML或innerText属性，不能用常见的value属性
错误5	一定要放到btnElt.onclick的事件内，否则页面未加载完成就会执行，会报错	常见错误，JS代码一定要放在<script></script>标签中才能起作用
错误6	span默认值应放在标签中间,而不是标签内，不用value属性承载默认值	<span>标签默认值要放在中间，不能放在常见的标签内

2、文本框内的字符串经过删掉前后空格后显示在页面上

<!--以下是错误的代码-->
window.onload = function(){
   var btn = document.getElementById("mybtn");
    btn.onclick = function(){
    var username = document.getElementById("mytxt").value//★错误1_JS的代码末尾最好都加封号
    username = username.trim();
    alert("-->" + username + "<--");
}

<!--以下是正确的代码-->
window.onload = function(){
   var btn = document.getElementById("mybtn");
    btn.onclick = function(){
    var username = document.getElementById("mytxt").value;//★错误1_JS的代码末尾最好都加封号
    username = username.trim();
    alert("-->" + username + "<--");
}

复盘备注：解决这个错误花了很长时间...网上查了对JS代码的封号有很多讨论，其中一部分场景一定要加封号，以后还是尽量都加封号吧。

3、声明两个函数实现文本框内容变迁影响

<!--以下是错误的代码-->
window.onload=function(){
   document.getElementById("mybtn").onclick = function(){
       var usernameElt1 = document.getElementById("mytxt1");
       usernameElt2 = document.getElementById("mytxt2");
       usernameElt2.value = usernameElt1.value;
   }
   document.getElementById("mytxt1").onchange = function(){
//★错误1_如果是单独的函数，不要拿另一个注册函数的全局变量，要单独声明
       usernameElt2 = document.getElementById("mytxt2");
       usernameElt2.value=""
   }
}

<!--以下是正确的代码-->
window.onload=function(){
   document.getElementById("mybtn").onclick = function(){
    var usernameElt1 = document.getElementById("mytxt1");
    var usernameElt2 = document.getElementById("mytxt2");
    usernameElt2.value = usernameElt1.value;
   }
   document.getElementById("mytxt1").onchange = function(){
    //★错误1_如果是单独的函数，不要拿另一个注册函数的全局变量，要单独声明
    var usernameElt2 = document.getElementById("mytxt2");
    usernameElt2.value=""
   }
}

复盘备注：本质要理解函数注册很可能只在方法区内存占用空间，还没有实际可调用的对象的堆内存

最后，谢谢大家查看，希望帮忙点赞评论~