客户端脚本中常常出现的一些问题和调试技巧


Posted in Javascript onJanuary 09, 2007

1.出错情况:语法错误
<div id=div1></div>
<script language="javascript">
document.write("never-online";
</script>
解释:上面的示例是一个典型例子,方法名都要用()括起来()里的是参数。
也许有人不屑一顾,但在论坛中。这种错误不在少数。
Tips:这种问题解决起来比较简单,一般都可以解决。

2.出错情况:引号用法不正确
<script>
s="alert("never-online")";
</script>
解释:在javascript或是vbscript的编程中,引号出错的机率是很大的,不管是有多丰富的编程经验,遇到大量的字符串拼接,或者是一不小心的敲错'("),都会出现“语法错误”或者是“缺少'”。
Tips:在进行大量的字符拼接时,需要注意引号的转义用法。如上面的就可以写成:s="alert(\"never-online\")";或者s='alert("never-online")';
相关链接:js技巧--转义符"\"的妙用 - http://blog.csdn.net/bluedestiny/archive/2006/03/15/625061.aspx

3.出错情况:未知软性错误

<script language="javascript">
cntMax=100;
div=document.createElement("DIV");
document.body.appendChild(div);
var myFun=function() {
for(var i=0;i<cntMax;i++);
div.innerHTML+="<b>i: " +i+ "</b><br/>";
div.innerHtml+="http://www.never-online.net";
}
myFun();
</script>

运行出来,没有提示错误,这给人一个错觉,像类似这种软性错误是比较难找的。
所以平常写程序,必须细心。
Tips:编程时应该注意自己的习惯,像在for(var i=0;i<cntMax;i++);这里,分号如果用了{来括起来,这种情况就完全可以避免,看SDK文档时,要仔细阅读,大小写出错一般都会“对象没有此方法”之类的提示,但在脚本中,对象可以动态的添加方法和属性。所以,上面的div.innerHtml="http://www.never-online.net"不会出错。而div的innerHTML又没有得到值。

4.出错情况:对语言的理解错误
最常见的可能算是this关键字了,这里就举一个例子来说明
this语义:指向当前对象的指针。
例子:
<script>
function a() {
this.m = "never-online";
this.f = function() {
alert(this.m);
}
}
var b = new a();
b.f();
</script>
相信上面这个例子,很多人都理解。this指向的是a()
再看下面这个例子:
<div id=div1>div container - onmouseover handle</div>
<script>
function a() {
this.m = val = 'never-online';
var div = document.getElementById("div1");
div.onmouseover=function() {
alert(this.m);
}
alert(this.m);
}
a();
</script>
这一个例子,有些兄弟可能就不能理解了,仔细看看之后,也可以预测输出结果。
解释:this.m = val = 'never-online'这一句是赋值,其中的this.m中的this指向的是当前对象a();
而div.onmouseover里的this指的对象是document.getElementById("div1")这个对象,(因为div并不属于a对象)即相当于把代码写在这里:
<div id=div1 onmouseover="alert(this.m)">div container - onmouseover handle</div>
因此在div.onmouseover的function里this.m出现undefined并不奇怪。 

Javascript 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
javascript常用的方法整理
Aug 20 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
轻松搞定js表单验证
Oct 13 Javascript
vue中appear的用法
Aug 17 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
Javascript miscellanea -display data real time, using window.status
Jan 09 #Javascript
Javascript - HTML的request类
Jan 09 #Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 #Javascript
Javascript调试工具(下载)
Jan 09 #Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 #Javascript
如何让动态插入的javascript脚本代码跑起来。
Jan 09 #Javascript
You might like
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
小程序实现发表评论功能
2018/07/06 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
校园招聘策划书
2014/01/09 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python