JS自学_常见错误复盘

最新推荐文章于 2024-11-08 14:58:24 发布

进击的rex

最新推荐文章于 2024-11-08 14:58:24 发布

阅读量140

点赞数 1

文章标签： java javascript

本文链接：https://blog.csdn.net/weixin_39986287/article/details/108000186

版权

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

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

JavaScript自学概述：

在这里插入图片描述

错误案例：

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, 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	和标签的值都要用innerHTML或innerText属性，不能用常见的value属性
错误5	一定要放到btnElt.onclick的事件内，否则页面未加载完成就会执行，会报错	常见错误，JS代码一定要放在标签中才能起作用
错误6	span默认值应放在标签中间,而不是标签内，不用value属性承载默认值	标签默认值要放在中间，不能放在常见的标签内

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