博客

js json制表符报错_JS自学_常见错误复盘

  • Post author:
  • Post category:其他


e9ba72b1ea6273c17a50dd418234d336.png

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

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

JavaScript自学概述：

a75c4e2b20388750fef5df16d41787bd.png

错误案例：

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

<!--

<!--以下是正确的代码-->
<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>

复盘备注：

643a6ed35b35d7be071db607b8619ea6.png

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=""
   }
}

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

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