Ajax基本原理讲解，javascript小技巧，正则表达式，MSN消息提示类

来源：互联网发布：恶搞小视频软件编辑：程序博客网时间：2024/05/20 07:15

Ajax基本原理讲解
这段时间在学习ajax，前今天给公司同事讲解了一下基本原理，也随便放在网上给大家参考一下。
我认为ajax简单的讲就是客户端通过javascript脚本获取服务器端的文本，通过解析返回值，更新部分的网页内容。
下面结合一个获取QQ天气预报网页，并且对返回值进行处理的例子进行一下讲解。
行数：解释。
14：点击按钮开始获取。
29：显示右上角的“正在加载...”的小区域（仿造gmail）。
30：创建XMLHTTP，IE的方式，其它的浏览器创建方式不同。
31：XMLHTTP状态发生变化时调用的回调函数，实现异步调用。
32：指定调用的URL。
33：开始调用（可以发送一段XML到服务器端，例子可以查看：用javascript通过MetaWeblog获取Blog ）。

37：xmlhttp的状态：1 装备阶段、2 发送、3 接收、4 所有数据接收完成。
40：隐藏右上角提示。
41：服务器返回的状态：200 正常返回。 404 网页不存在等。

45：以HTML格式显示获得的网页。
46：以文本方式显示获得网页源代码。

49-53：截取部分网页显示。

58-60：没有正常获取网页的提示。
----------------------
代码下载：weather.zip

1<HTML>
2<HEAD>
3<TITLE> 天气预报 </TITLE>
4<META NAME="Author" CONTENT="http://pharaoh.cnblogs.com">
5</HEAD>
6<BODY>
7    
11<div id=load style="display:none; position:absolute;right:0px;top:0px;background:#FF5B5B;border:1px solid">正在加载</div>
12
13<input id=wurl style="width:500px" value="http://appnews.qq.com/cgi-bin/news_qq_search?city=重庆">
14<button onclick="GetWeather();">加载</button>
15
16<hr />
17<div id=city>片断</div>
18<hr />
19<center><div id="wuhan_weather">数据区域</div></center>
20<hr />
21<div id=stext>代码区</div>
22
23<script language="javascript">
24
25 var xmlhttp ;
26 function GetWeather()
27 {
28         window.status = '';
29         document.all("load").style.display='';
30     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
31     xmlhttp.onreadystatechange = getReady;
32     xmlhttp.Open("GET",document.getElementById('wurl').value,true);
33     xmlhttp.Send(null);
34}
35function getReady()
36{
37    window.status += xmlhttp.readyState+' ';
38   if(xmlhttp.readyState == 4)
39   {
40       document.all("load").style.display='none';
41     if(xmlhttp.status == 200)
42     {
43        var xmlReturn = xmlhttp.responseText;
44
45        document.all("wuhan_weather").innerHTML=xmlReturn;
46        document.all("stext").innerText=xmlReturn;
47
48
49        var newText = xmlReturn.replace(//n+/g,' ');
50        //document.all("stext").innerText=newText;
51        var re = /<table .+?table>/ig;
52        var cityText = newText.match(re);
53        document.all("city").innerHTML=cityText[2];
54
55     }
56     else
57     {
58       document.all("wuhan_weather").innerHTML="<b>出现错误：</b><br />"+new Date()+"<br />"+xmlhttp.statusText+"<br />"+xmlhttp.status;
59       document.all("stext").innerHTML="代码区";
60       document.all("city").innerHTML="片断";
61
62     }
63     xmlhttp = null;
64   }
65
66}
67
68</script>
69</BODY>
70</HTML>
71
posted on 2006-03-13 15:08 Pharaoh 阅读(101) 评论(2) 编辑收藏收藏至365Key 所属分类: Html

javascript小技巧
事件源对象
event.srcElement.tagName
event.srcElement.type
捕获释放
event.srcElement.setCapture();
event.srcElement.releaseCapture();
事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
事件返回值
event.returnValue
鼠标位置
event.x
event.y
窗体活动元素
document.activeElement
绑定事件
document.captureEvents(Event.KEYDOWN);
访问窗体元素
document.all("txt").focus();
document.all("txt").select();
窗体命令
document.execCommand
窗体COOKIE
document.cookie
菜单事件
document.oncontextmenu
创建元素
document.createElement("SPAN");
根据鼠标获得元素：
document.elementFromPoint(event.x,event.y).tagName=="TD
document.elementFromPoint(event.x,event.y).appendChild(ms)
窗体图片
document.images[索引]
窗体事件绑定
document.onmousedown=scrollwindow;
元素
document.窗体.elements[索引]
对象绑定事件
document.all.xxx.detachEvent('onclick',a);
插件数目
navigator.plugins
取变量类型
typeof($js_libpath) == "undefined"
下拉框
下拉框.options[索引]
下拉框.options.length
查找对象
document.getElementsByName("r1");
document.getElementById(id);
定时
timer=setInterval('scrollwindow()',delay);
clearInterval(timer);
UNCODE编码
escape() ,unescape
父对象
obj.parentElement(dhtml)
obj.parentNode(dom)
交换表的行
TableID.moveRow(2,1)
替换CSS
document.all.csss.href = "a.css";
并排显示
display:inline
隐藏焦点
hidefocus=true
根据宽度换行
style="word-break:break-all"
自动刷新
<meta HTTP-EQUIV="refresh" CONTENT="8;URL=http://c98.yeah.net">
简单邮件
<a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy">
快速转到位置
obj.scrollIntoView(true)
锚
<a name="first">
<a href="#first">anchors</a>
网页传递参数
location.search();
可编辑
obj.contenteditable=true
执行菜单命令
obj.execCommand
双字节字符
/[^/x00-/xff]/
汉字
/[/u4e00-/u9fa5]/
让英文字符串超出表格宽度自动换行
word-wrap: break-word; word-break: break-all;
透明背景
<IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe>
获得style内容
obj.style.cssText
HTML标签
document.documentElement.innerHTML
第一个style标签
document.styleSheets[0]
style标签里的第一个样式
document.styleSheets[0].rules[0]
防止点击空链接时，页面往往重置到页首端。
<a href="javascript:function()">word</a>
上一网页源
asp:
request.servervariables("HTTP_REFERER")
javascript:
document.referrer
释放内存
CollectGarbage();
禁止右键
document.oncontextmenu = function() { return false;}
禁止保存
<noscript><iframe src="*.htm"></iframe></noscript>
禁止选取<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()>
禁止粘贴
<input type=text onpaste="return false">
地址栏图标
<link rel="Shortcut Icon" href="favicon.ico">
favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
收藏栏图标
<link rel="Bookmark" href="favicon.ico">
查看源码
<input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">
关闭输入法
<input style="ime-mode:disabled">
自动全选
<input type=text name=text1 value="123" onfocus="this.select()">
ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
文本框的默认值
<input type=text value="123" onfocus="alert(this.defaultValue)">
title换行
obj.title = "123&#13sdfs&#32"
获得时间所代表的微秒
var n1 = new Date("2004-10-10".replace(/-/g, "//")).getTime()
窗口是否关闭
win.closed
checkbox扁平
<input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br>
获取选中内容
document.selection.createRange().duplicate().text
自动完成功能
<input type=text autocomplete=on>打开该功能
<input type=text autocomplete=off>关闭该功能
窗口最大化
<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)">
无关闭按钮IE
window.open("aa.htm", "meizz", "fullscreen=7");
统一编码/解码
alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))
encodeURIComponent对":"、"/"、";" 和 "?"也编码
表格行指示
<tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'">

//各种尺寸

s += "/r/n网页可见区域宽："+ document.body.clientWidth;
s += "/r/n网页可见区域高："+ document.body.clientHeight;
s += "/r/n网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)";
s += "/r/n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "/r/n网页正文全文宽："+ document.body.scrollWidth;
s += "/r/n网页正文全文高："+ document.body.scrollHeight;
s += "/r/n网页被卷去的高："+ document.body.scrollTop;
s += "/r/n网页被卷去的左："+ document.body.scrollLeft;
s += "/r/n网页正文部分上："+ window.screenTop;
s += "/r/n网页正文部分左："+ window.screenLeft;
s += "/r/n屏幕分辨率的高："+ window.screen.height;
s += "/r/n屏幕分辨率的宽："+ window.screen.width;
s += "/r/n屏幕可用工作区高度："+ window.screen.availHeight;
s += "/r/n屏幕可用工作区宽度："+ window.screen.availWidth;
//过滤数字

//特殊用途

//不缓存

//正则匹配

匹配中文字符的正则表达式： [/u4e00-/u9fa5]
匹配双字节字符(包括汉字在内)：[^/x00-/xff]
匹配空行的正则表达式：/n[/s| ]*/r
匹配HTML标记的正则表达式：/<(.*)>.*<///1>|<(.*) //>/
匹配首尾空格的正则表达式：(^/s*)|(/s*$)（像vbscript那样的trim函数）
匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配网址URL的正则表达式：http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?
以下是例子：
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))"
1.用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^/uFF00-/uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/uFF00-/uFFFF]/g,''))"
2.用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"
3.用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[/W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"
//消除图像工具栏

<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false">
or
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
//无提示关闭

oRect = obj.getBoundingClientRect();
oRect.left
oRect.
//最小化,最大化,关闭

//光标停在文字最后

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使
用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23
//网页是否被检索

//打印分页

//设置打印

WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销，有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<object id="WebBrowser" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
</object>

<center class="Noprint" >
<input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>
<input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
<p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>
</center>
//去掉打印时的页眉页脚

function checkBrowser()
{
   this.ver=navigator.appVersion
   this.dom=document.getElementById?1:0
   this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
   this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
   this.ie4=(document.all && !this.dom)?1:0;
   this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
   this.ns4=(document.layers && !this.dom)?1:0;
   this.mac=(this.ver.indexOf('Mac') > -1) ?1:0;
   this.ope=(navigator.userAgent.indexOf('Opera')>-1);
   this.ie=(this.ie6 || this.ie5 || this.ie4)
   this.ns=(this.ns4 || this.ns5)
   this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope)
   this.nbw=(!this.bw)
   return this;
}
//计算内容宽和高

<SCRIPT language="javascript">
function test(obj)
{
       var range = obj.createTextRange();
       alert("内容区宽度: " + range.boundingWidth
                                                 + "px/r/n内容区高度: " + range.boundingHeight + "px");

}
</SCRIPT>
<BODY>
<Textarea id="txt" height="150">sdf</textarea><INPUT type="button" value="计算内容宽度" onClick="test(txt)">
</BODY>
//无模式的提示框

function modelessAlert(Msg)
{
window.showModelessDialog("javascript:alert(/""+escape(Msg)+"/");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;");
}

//屏蔽按键

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<noscript><meta http-equiv="refresh" content="0;url=about:noscript"></noscript>
<title>屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键</title>
</head>
<body>
<script language="Javascript"><!--
//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键
//Author: meizz(梅花雨) 2002-6-18
function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键
function window.onhelp(){return false} //屏蔽F1帮助
function document.onkeydown()
{
if ((window.event.altKey)&&
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ←
       (window.event.keyCode==39)))   //屏蔽 Alt+ 方向键 →
{
     alert("不准你使用ALT+方向键前进或后退网页！");
     event.returnValue=false;
}
     /* 注：这还不是真正地屏蔽 Alt+ 方向键，
     因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放，
     用鼠标点掉警告框，这种屏蔽方法就失效了。以后若
     有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/
if ((event.keyCode==8) ||                 //屏蔽退格删除键
      (event.keyCode==116)||                 //屏蔽 F5 刷新键
      (event.ctrlKey && event.keyCode==82)){ //Ctrl + R
     event.keyCode=0;
     event.returnValue=false;
     }
if (event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11
if (event.ctrlKey && event.keyCode==78) event.returnValue=false;   //屏蔽 Ctrl+n
if (event.shiftKey && event.keyCode==121)event.returnValue=false; //屏蔽 shift+F10
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
      window.event.returnValue = false;             //屏蔽 shift 加鼠标左键新开一网页
if ((window.event.altKey)&&(window.event.keyCode==115))             //屏蔽Alt+F4
{
      window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
      return false;
}
}
</script>
屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
</body>
</html>
//屏蔽打印
<style>
@media print{
* {display:none}
}
</style>

//移动的图层，拖动

1.<span style='position:absolute;width:200;height:200;background:red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>meizz</span>
<script language=javascript>
var Obj;
function MouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
if(Obj!=null)
{
    Obj.style.left = event.x-Obj.l;
    Obj.style.top = event.y-Obj.t;
}
}
function MouseUp()
{
if(Obj!=null)
{
    Obj.releaseCapture();
    Obj=null;
}
}
</script>
2.
<div id="myDiv" src="logo.gif" ondrag="doDrag();" onmouseover="this.style.cursor='hand'" style="position:absolute;left=100;top=100;" onmousedown="doMouseDown();">
<a href="#" onclick="return false"><h1>wlecome</h1></a>
</div>
<script language="JavaScript" type="text/javascript">
var orgMouseX;
var orgMouseY;
var orgObjX;
var orgObjY;
function doDrag()
{
var myObject=document.all.myDiv;

var x=event.clientX;
var y=event.clientY;
myObject.style.left=x-(orgMouseX-orgObjX);
myObject.style.top=y-(orgMouseY-orgObjY);

}
function doMouseDown()
{
orgMouseX=event.clientX;
orgMouseY=event.clientY;
orgObjX=parseInt(document.all.myDiv.style.left);
orgObjY=parseInt(document.all.myDiv.style.top);
}

</script>

//文档状态改变

//刷新后不变的文本框

//访问剪贴板

//操作COOKIE

//自定义的apply,call

Function.prototype.apply = function (obj, argu) {
if (obj) obj.constructor.prototype._caller = this;
var argus = new Array();
for (var i=0;i<argu.length;i++)
argus[i] = "argu[" + i + "]";
var r;
eval("r = " + (obj ? ("obj._caller(" + argus.join(",") + ");") : ("this(" + argus.join(",") + ");")));
return r;
};
Function.prototype.call = function (obj) {
var argu = new Array();
for (var i=1;i<arguments.length;i++)
argu[i-1] = arguments[i];
return this.apply(obj, argu);
};

//下载文件

//检验连接是否有效

//组件是否安装
isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "componentID"))

//检查网页是否存在

<html>
<body>
srno：<input type=text datasrc=#xmldate DataFLD=srno size="76"><BR>
times：<input type=text datasrc=#xmldate DataFLD=times size="76"><BR>
<input id="first" TYPE=button value="<<　第一条记录" onclick="xmldate.recordset.moveFirst()">
<input id="prev" TYPE=button value="<上一条记录" onclick="xmldate.recordset.movePrevious()">
<input id="next" TYPE=button value="下一条记录>" onclick="xmldate.recordset.moveNext()">
<input id="last" TYPE=button value="最后一条记录>>" onclick="xmldate.recordset.moveLast()">
<input id="Add" TYPE=button value="添加新记录" onclick="xmldate.recordset.addNew()">

<XML ID="xmldate">
<infolist>
<info ><srno>20041025-01</srno><times>null</times></info>
<info ><srno>20041101-09</srno><times>2004年10月1日2点22分0秒</times></info>
</infolist>
</XML>
</body>
</html>
//获得参数

<body>
<a href="javascript:location.href=location.href + '?a=1&b=2'">search</a>
<script language="JavaScript">

</script>
</body>
//可编辑SELECT

<input type=text name=re_name style="width:100px;height:21px;font-size:10pt;"><span style="width:18px;border:0px solid red;"><select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
                <option value="1">11111111<option>
                <option value="2">222222</option>
                <option value="3">333333</option>
              </select>
              </span>
//设置光标位置

//页内查找

http://www.itpub.net/attachment.php?s=&postid=1894598
http://www.wrclub.net/down/listdown.aspx?id=1341
//操作EXECL

//自定义提示条

<a href="#" title="这是提示">tip</a>
<script Language="JavaScript">
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

document.onclick =function(){
var oSource = window.event.srcElement;
if(oSource.tagName!="DIV")
return false;
var sel = document.selection;
if (sel!=null) {
var rng = sel.createRange();
if (rng!=null)
rng.pasteHTML("<font color=red>插入文字</font>");
}
}
//netscapte下操作xml

//判断键值

//禁止FSO

1.注销组件
regsvr32 /u scrrun.dll
2.修改PROGID
HKEY_CLASSES_ROOT/Scripting.FileSystemObject
Scripting.FileSystemObject
3.对于使用object的用户，修改HKEY_CLASSES_ROOT/Scripting.

//省略号

//检测media play版本

//图象按比例

//细线SELECT

function getComputerName()
{
var objWMIService = GetObject("Winmgmts:root/cimv2");
for(e = new Enumerator(objWMIService) ; !e.atEnd() ; e.moveNext())
{
var getComputer = e.item();
return getComputer.Name;
}
}

//条件编译

//取得innerText

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
//mergeAttributes 复制所有读/写标签属性到指定元素。

<SCRIPT>
function fnMerge(){
oSource.children[1].mergeAttributes(oSource.children[0]);
}
</SCRIPT>
<SPAN ID=oSource>
<DIV
ID="oDiv"
ATTRIBUTE1="true"
ATTRIBUTE2="true"
onclick="alert('click');"
onmouseover="this.style.color='#0000FF';"
onmouseout="this.style.color='#000000';"
>
This is a sample <B>DIV</B> element.
</DIV>
<DIV ID="oDiv2">
This is another sample <B>DIV</B> element.
</DIV>
</SPAN>
<INPUT
TYPE="button"
VALUE="Merge Attributes"
onclick="fnMerge()"
>

以上内容可以随意转载，转载后请注名来源和出处！

//Import

function Import() {
for( var i=0; i<arguments.length; i++ ) {
var file = arguments[i];
if ( file.match(//.js$/i))
document.write('<script type=/"text/javascript/" src=/"' + file + '/"></sc' + 'ript>');
else
document.write('<style type=/"text/css/">@import /"' + file + '/" ;</style>');
}
};

//js枚举

<IE:clientCaps ID="oClientCaps" style="{behavior:url(#default#clientcaps)}" />
<SCRIPT>
var flash="";
    WMPVersion= oClientCaps.getComponentVersion("{22D6F312-B0F6-11D0-94AB-0080C74C7E95}","ComponentID");
    if (WMPVersion != "") {
    flash = "";
    var version = WMPVersion.split(",");
    var i;
    for (i = 0; i < version.length; i++) {
      if (i != 0)
    flash += ".";
      flash += version[i];
    }
     document.write("您的Windows Media Player 版本是:"+flash+"<p>");
}
</SCRIPT>

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;

function keyDown(e)
{
if(!ie)
{
var nkey=e.which;
var iekey='现在是ns浏览器';
var realkey=String.fromCharCode(e.which);
}
if(ie)
{
var iekey=event.keyCode;
var nkey='现在是ie浏览器';
var realkey=String.fromCharCode(event.keyCode);
if(event.keyCode==32){realkey='/' 空格/''}
if(event.keyCode==13){realkey='/' 回车/''}
if(event.keyCode==27){realkey='/' Esc/''}
if(event.keyCode==16){realkey='/' Shift/''}
if(event.keyCode==17){realkey='/' Ctrl/''}
if(event.keyCode==18){realkey='/' Alt/''}
}
alert('ns浏览器中键值:'+nkey+'/n'+'ie浏览器中键值:'+iekey+'/n'+'实际键为'+realkey);
}
document.onkeydown = keyDown;
</script>
</head>
<body>
//Javascript Document.
<hr>
<center>
<h3>请按任意一个键。。。。</h3>
</center>
</body>
</html>

doc = new ActiveXObject("Msxml2.DOMDocument");
doc = new ActiveXObject("Microsoft.XMLDOM")
->>
doc = (new DOMParser()).parseFromString(sXML,'text/xml')

<SCRIPT language="VBScript">
Function URLEncoding(vstrIn)
    strReturn = ""
    For i = 1 To Len(vstrIn)
        ThisChr = Mid(vStrIn,i,1)
        If Abs(Asc(ThisChr)) < &HFF Then
            strReturn = strReturn & ThisChr
        Else
            innerCode = Asc(ThisChr)
            If innerCode < 0 Then
                innerCode = innerCode + &H10000
            End If
            Hight8 = (innerCode And &HFF00)/ &HFF
            Low8 = innerCode And &HFF
            strReturn = strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)
        End If
    Next
    URLEncoding = strReturn
End Function
Function bytes2BSTR(vIn)
    strReturn = ""
    For i = 1 To LenB(vIn)
        ThisCharCode = AscB(MidB(vIn,i,1))
        If ThisCharCode < &H80 Then
            strReturn = strReturn & Chr(ThisCharCode)
        Else
            NextCharCode = AscB(MidB(vIn,i+1,1))
            strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
            i = i + 1
        End If
    Next
    bytes2BSTR = strReturn
End Function
dim strA,oReq
strA = URLEncoding("submit1=Submit&text1=中文")
set oReq = CreateObject("MSXML2.XMLHTTP")
oReq.open "POST","http://ServerName/VDir/TstResult.asp",false
oReq.setRequestHeader "Content-Length",Len(strA)
oReq.setRequestHeader "CONTENT-TYPE","application/x-www-form-urlencoded"
oReq.send strA
msgbox bytes2BSTR(oReq.responseBody)
</SCRIPT>
//readyState是xmlhttp返回数据的进度，0=载入中,1=未初始化,2=已载入,3=运行中,4=完成

(1)拖拽访问
event.dataTransfer.setData("URL", oImage.src);
sImageURL = event.dataTransfer.getData("URL")
(2)普通访问
window.clipboardData.setData("Text",oSource.innerText);
window.clipboardData.getData("Text");

<HTML>
<HEAD>
<META NAME="save" CONTENT="history">
<STYLE>
.sHistory {behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>
<INPUT class=sHistory type=text id=oPersistInput>
</BODY>
</HTML>

<input type=text onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" onpaste="return !clipboardData.getData('text').match(//D/)" ondragenter="return false">
posted on 2004-11-15 09:22 ttyp 阅读(18248) 评论(49) 编辑收藏收藏至365Key 所属分类: 脚本

评论
各位高手，小弟对程序一知半解，最近在翻译一个中文电子商务平台的时候，遇到这样一个问题，在后台管理程序中贴入的中文文字信息可以在html页面表格中自动换行，而一贴入英文段落，就不能自动换行了，而是每个段落一行到底。经查原代码，字符转换程序是这样写的：

<%
function newsConvert(str)
dim tempstr
dim theStr
dim canConvert
dim theChr
tempStr=str
theChr=""
theStr=""
canConvert=1
for i=1 to len(tempStr)
theChr=mid(tempStr,i,1)
if theChr="<" then
canConvert=0
end if
if theChr=">" then
canConvert=1
end if
if theChr=" " and canConvert=1 then
theChr= " "
end if
theStr=theStr&theChr
next
theStr=replace(theStr,chr(13),"<br>")
newsConvert=theStr
End function
%>

请教各位高手，是不是该转换程序有缺陷才导致的上述问题？
小弟这里先行谢过！！回复

# re: javascript小技巧 2004-12-20 11:20 ttyp
try
theStr=replace(theStr,chr(13) & chr(10),"<br>")

theStr=replace(theStr,chr(10),"<br>")

MSN消息提示类(II)

在JavaScript面向对象编程中使用继承(2)
在JavaScript面向对象编程中使用继承(2) 昨天扔了一堆JavaScript类'继承'的代码，这些代码其实并不是所有的都能正常的执行。不是我不原意写出都能好好执行的继承类代码，而是这些方法本身就各自有自己的优缺点。下面我分别说它们的原理和使用时注意事项。构造继承法的原理：构造继承法关键代码是function ArrayList01()中的： this.base = CollectionBase; this.base(); 这里的base不是C#派生类中的base那个概念，完全就是一个任意的JavaScript变量名。调用this.base();其实就是执行的CollectionBase();，不过不是new CollectionBase();哦！没有new基类那么怎么得到CollectionBase中的方法和属性呢？这里使用了this作用域的一个hack，'欺骗'了脚本引擎。当我们从类ArrayList01的构造函数中调用this.base();时，在基类CollectionBase中的this就是ArrayList01的一个实例，于是执行CollectionBase的构造函数，就动态的把基类的成员和方法attach到ArrayList01实例中了。构造法的问题也就是从这里产生了，注意哦。构造继承法的缺陷：第一个问题，关键是出在上面那两段代码上，因为始终没有new基类呀。这样带来的问题就是不能把基类CollectionBase中的原型属性和方法attach到ArrayList01的实例中，啊，这样还算是什么继承啊?! 所以在上篇文章中我为了不改动CollectionBase类，而单独为其实现了一个Add()方法(只是为了统一示例代码而已)。解决这个缺陷的方法其实也很简单，就是要求基类不能使用prototype来导入属性和方法，而要把所有的属性和方法都写到构造函数中去，分别是：this.Attribute = ...; 和 this.Method = function() {...};这种形式。第二个问题，是this.base = CollectionBase;和this.base();必须写在派生类构造函数的最开头(不是一定要是第一行和第二行，而是它们的前面不能有this.xxx这种定义为ArrayList01导入的任何属性或方法)，因为调用this.base();时会向this(ArrayList01的一个实例)中注入基类的属性和方法，如果基类中有和this中已导入的属性和方法重名的，就自动覆盖掉子类中的方法。第三个问题，是子类也不能使用prototype来导入属性和方法，这和问题二中的重名覆盖道理一样，由于prototype导入的属性和方法在子类一new的时候就生成了，所以也存在和基类重名而被覆盖的潜在错误威胁。解决办法，和基类编写规则一样不要使用prototype，并且将子类的属性和方法定义代码放在导入继承的代码(this.base = CollectionBase;this.base();)之后。构造继承法的示例：构造继承法:
示例运行结果为：构造继承法: [class ArrayList01]: 2: a,b [class ArrayList01]: 3: a,b,c 小结一下：JavaScript的构造继承法其实看起来还是比较直观的，因为子类构造函数中有对基类构造函数的调用，似乎在语法上还比较容易被接受。可是由于没有new基类，带来了不能获得prototype导入的属性和方法的缺陷。解决这个缺陷的方法虽然不难，可是由此而给基类编写限制一个凌驾于JavaScript语法规范的规则，可操作性不是很好。子类也不能利用prototype特性来导入属性和方法，会与基类之间存在潜在的重名覆盖问题。所以对于复杂的基类，不推荐这种继承方法，因为类复杂了，使用prototype可以规范类代码，使类的定义看起来比较的舒服。应用场景：小规模类之间的继承，基类和子类的属性方法在5-8个。还有就是以构造函数中赋值方式导入类的属性和方法，而不用prototype导入的类编写习惯的时候。

在JavaScript面向对象编程中使用继承(1)
在JavaScript面向对象编程中使用继承(1) 前几天做了一个JScript版的CollecionBase类，用来解决需要使用集合作为主要数据结构的类的基类。不过当时挺忙的没有给出继承的示例，搞得有的网友对JavaScript继承比较迷惑，于是今天使用四种方式来分别实现了4个ArrayList派生类。关于使用JavaScript进行面向对象编程(OOP)，网上已有很多的文章说过了。这里我推荐两篇文章大家看看，如果没有理解怎么使用JavaScript的Function对象的prototype属性来实现类定义及其原理，那么就仔细看看'面向对象的JavaScript编程'、'面向对象的Jscript'和'Classical Inheritance in JavaScript'哦(特别是第一篇及其相关讨论的文章)，否则后面一头雾水不能怪我啦。那个CollectionBase就不列了，第一个链接就是它了，下面是用四种方法实现的JavaScript'继承'(以后就不打引号了，反正知道JavaScript的继承不是经典OO里的继承就行了)：构造继承法: 原形继承法：实例继承法：附加继承法：派生类中的foo是一个新增加的函数，用来输出类的类型和m_InnerArray里的数据。toString()相当于override了CollectionBase中的toString()，不过其实就是赋值覆盖，和'从JavaScript函数重名看其初始化方式'一文中说到的原理是一样的。这个四种方法的原理和区别我稍候再作分析，要了...

在JavaScript面向对象编程中使用继承(3)

javascript中常用
1. 屏蔽鼠标右键
oncontextmenu="window.event.returnValue=false"
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. 无法选取、禁止复制
<body onselectstart="return false">

3. 禁止复制
oncopy="return false;" oncut="return false;"

4. 禁止粘贴
onpaste="return false"

5. 最小化、最大化、关闭窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" VALUE="Close"></OBJECT>
<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE

6. 让表单没有凹凸感
<input type=text style="border:1 solid #000000">
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:1 solid #000000"></textarea>

7. 去掉滚动条
去掉竖条:
<body style="overflow:scroll;overflow-y:hidden">
</body>
去掉横条:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都不要:
<body scroll="no">
</body>

8. 去掉图片链接点击后,图片周围的虚线
<a href="#" onFocus="this.blur()"><img src="**.jpg" border=0></a>

9. 在打开的子窗口刷新父窗口的代码
window.opener.location.reload()

10. 设定新开页面的大小
<body onload="top.resizeTo(300,200);">
打开页面的位置
<body onload="top.moveBy(300,200);">

11. 在页面中加入背景,拉动页面时背景图不动
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>

12. TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

13. 网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>

14. 单击鼠标右键弹出添加收藏夹对话框
在<body></body>之间加上如下代码：
<Script Language=JavaScript>
　　 if (document.all)
　　 document.body.onmousedown=new Function("if (event.button==2||event.button==3)
　　 window.external.addFavorite('您的网址','您的网站名称)")
</Script>

15. 随机变换背景图象
在<head></head>之间加上如下代码：
<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

16. 关闭当前窗口
<a href="/"onClick="javascript:window.close();return false;">关闭窗口</a>

17. 2秒后关闭当前页
<script language="JavaScript">
　　 
</script>

18. 2秒后载入指定网页
<head>
　　 <meta http-equiv="refresh" content="2;URL=http://你的网址">
</head>

19. 改变滚动条的颜色
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #000048;
SCROLLBAR-HIGHLIGHT-COLOR: #d82448;
SCROLLBAR-SHADOW-COLOR: #fcd8d8;
SCROLLBAR-3DLIGHT-COLOR: #fc0000;
SCROLLBAR-ARROW-COLOR: #fcfc48;
SCROLLBAR-TRACK-COLOR: #4848fc;
SCROLLBAR-DARKSHADOW-COLOR: #489024;
SCROLLBAR-BASE-COLOR: #482448
}
</STYLE>

20. REALONE播放器镶嵌页面的代码
<object classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" id="RealAudio1" width="300" height="100">
<param name="_ExtentX" value="7938">
<param name="_ExtentY" value="2646">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="你的音乐地址">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>

21. 指定位置随机图片显示
<script language="JavaScript">
a = 3
var slump = Math.random();
var talet = Math.round(slump * (a-1))+1;
function create() {
this.src = ''
this.border = ''
this.alt = ''
}
b = new Array()
for(var i=1; i<=a; i++) { b[i] = new create() }

b[1].src = "../pic/pic01.gif"
b[1].border = "0"
b[1].alt = "图形一"
b[2].src = "../pic/pic02.gif"
b[2].border = "0"
b[2].alt = "图形二"
b[3].src = "../pic/pic03.gif"
b[3].border = "0"
b[3].alt = "图形三"

var visa = "";

visa += '<img src='+b[talet].src+' border="0"'+' alt='+b[talet].alt+'>';
</script>
<script language="JavaScript">

</script>

22. window.open() 支持环境,语法,参数,例子(详细)
① window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
② 基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
③ 各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素

　参数取值范围　说明
　alwaysLowered yes/no 　指定窗口隐藏在所有窗口之后
　alwaysRaised yes/no 　指定窗口悬浮在所有窗口之上
　depended yes/no 　是否和父窗口同时关闭
　directories yes/no 　Nav2和3的目录栏是否可见
　height pixel value 　窗口高度
　hotkeys yes/no 　在没菜单栏的窗口中设安全退出热键
　innerHeight pixel value 　窗口中文档的像素高度
　innerWidth pixel value 　窗口中文档的像素宽度
　location yes/no 　位置栏是否可见
　menubar yes/no 　菜单栏是否可见
　outerHeight pixel value 　设定窗口(包括装饰边框)的像素高度
　outerWidth pixel value 　设定窗口(包括装饰边框)的像素宽度
　resizable yes/no 　窗口大小是否可调整
　screenX pixel value 　窗口距屏幕左边界的像素长度
　screenY pixel value 　窗口距屏幕上边界的像素长度
　scrollbars yes/no 　窗口是否可有滚动栏
　titlebar yes/no 　窗口题目栏是否可见
　toolbar yes/no 　窗口工具栏是否可见
　Width pixel value 　窗口的像素宽度
　z-look yes/no 　窗口被激活后是否浮在其它窗口之上

④ 例子:
<SCRIPT>

</SCRIPT>
脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，
屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏

Added by Admin (2005-9-30 1:43:48)
动态加css文件：document.createStyleSheet("xxx.css")
为某个对象写style：obj.cssText
obj.all.tags("table") //查找所有obj中包含的table
obj.children.getElementByTagName("标签名称") xml中
创建web对象
function addElement(p,el){ return p.appendChild(element.document.createElement(el)); }

发表于 @ 2006年03月09日 6:03 PM | 评论 (0)

JScript中的prototype(原型)属性研究(1)
我们知道JScript中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？

对于对象的prototype属性的说明，JScript手册上如是说：所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。
下面我们看三个经典的prototype属性的使用示例。

1、为脚本环境内建对象添加方法：

Array.prototype.max = function()
{
     var i, max = this[0];
     for (i = 1; i < this.length; i++)
     {
        if (max < this[i])
        max = this[i];
     }
     return max;
};
    2、为用户自定义类添加方法： function TestObject(name)
{
     this.m_Name = name;
}

TestObject.prototype.ShowName = function()
{
     alert(this.m_Name);
};
    3、更新自定义类的prototype： function TestObjectA()
{
    this.MethodA = function()
    {
       alert('TestObjectA.MethodA()');
    }
}

function TestObjectB()
{
    this.MethodB = function()
    {
       alert('TestObjectB.MethodB()');
    }
}

TestObjectB.prototype = new TestObjectA();
第三个很眼熟吧？对啊，它就是我们前面介绍的原型继承法呀~~ 不过今天我们不是研究"继承"，之所以可以这样来实现一种继承，只是利用了prototype属性的一个副作用而已。

prototype还有一个默认的属性：constructor，是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有JScript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。

弄清楚了JScript中prototype属性怎么使用后，下面我们再来深入的研究它。

posted on 2005-02-17 22:59 birdshome 阅读(6944) 评论(6) 编辑收藏收藏至365Key 所属分类: JScript&DHTML开发

评论

晕，我正看着下面要怎么写呢。敲一下回车就提交了。
不好意思，请删除。
说说对第三种的看法：

个人认为这样写不是很方便。^_^

还不如：

function TestObjectA()
{
this.MethodA = function()
{
alert('TestObjectA.MethodA()');
}
this.MethodB = function()
{
alert('TestObjectB.MethodB()');
}
}

可能是我喜欢使用js的动态性的原因吧！
像第三种一定得加上TestObjectB.prototype = new TestObjectA();
这样很不方便。
我觉得还不如在某些不需要MethodA 的地方加上delete。这样就很像virtual了。
比如：
<script>
function A(){
this.a = function(){
alert("asdf");
}
this.b = function(){
alert("ttt");
}
}
var a = new A();
for(var item in a) a[item]();
delete a.a;
for(var item in a) a[item]();
</script>
这样可以想覆盖就覆盖，想删除就删除，想使用就使用。

在JavaScript面向对象编程中使用重载
在此之前，我写了一个'在JavaScript面向对象编程中使用继承'的一系列文章。有很多的热心网友参与了讨论，指出了其中很多的问题并给予了我很多的好建议，非常感谢他们。同时在OOP中和继承关系非常紧密的就是重载这个东西，那么我介绍的继承方法支持重载吗？

这里我要说的重载(override)，确实就是传统OO中的重载，而不是我们在JavaScript对象中对其同名属性或方法的重写(rewrite)。在此我就不详细讲什么是OOP中的override了，因为只要是使用.NET来编程的程序员都应该很了解的。

    在我们的附加继承法的核心代码中：   for ( var key in base )
{
      if ( !this[key] )
      {
          this[key] = base[key];
          if ( typeof(base[key]) != 'function' )
          {
              delete base[key];
          }
      }
}
this.base = base;delete base[key]的作用是删除掉基类对象实例中的属性，因为它们都已经被shallow copy到子类实例中了。而this.base = base;的作用是保留了基类对象实例，实际上就是保留了基类中的所有方法，这些保留下来的方法同时也是shallow copy到子类中了的。只是我们在子类中可以方便的将其rewrite，注意这里不是override，而一定是rewrite。rewrite后其实子类实例中就没有了基类中copy过来的同名方法了。

不过由于我们保留了对基类实例的引用this.base = base;，所以即使在子类中被rewrite的方法，基类中仍然可以使用this.base.MethodName()来访问。这个调用基类方法的语句已经和C#中的override后调用基类方法非常的相似了，我们就这么来调用基类方法可以吗？当然是不可以的，因为这时的方法都属于基类对象base，它是无法访问子类中的属性的。不过幸好JScript提供两个函数，call和apply，于是我们可以使用这样两个方法来重新应用this(子类实例)对象。调用语句如下： this.base.MethodName.call(this);
this.base.MethodName.apply(this, arguments); 第一个语句用来处理没有参数的override的情况，第二个用来处理调用子类方法有参数，而其参数还需要原样传入基类方法的情况。这样的override语句虽然算不时上sexy，不过他的好处是对基类方法的编写没有任何的要求，而且即使错误的使用了this.base.MethodName()还是比较容易debug出错误来的。

    这个override最大问题是什么呢？就是它只能支持对子类中，没有使用同样override方法的方法进行这种override。好绕口，看看下面这个实例就知道问题了： <html>
<head>
    <title>Researh Override in JavaScript OOP</title>
    <meta name="author" content="birdshome@博客园" />
    </head>
<body>
    <script language="javascript">
    function grandpa(name, familyName)
    {
         this.name = name;
         this.familyName = familyName;
    }

    grandpa.prototype.getName = function()
    {
         return "grandpa's name: " + this.name;
    };

    grandpa.prototype.getFamilyName = function()
    {
         return "grandpa's family name: " + this.familyName;
    };

    function father(name, familyName)
    {
         this.Extends(grandpa);
         this.name = name;
         this.familyName = familyName;
    }

    father.prototype.getName = function()
    {
         return this.base.getName.call(this) + "/r/nfather's name: " + this.name;
    };

    function son(name, familyName)
    {
         this.Extends(father);
         this.familyName = familyName;
         this.name;
    }

    son.prototype.getName = function()
    {
         return this.base.getName.call(this) + "/r/nson's name: " + this.name;
    };

    son.prototype.getFamilyName = function()
    {
         return this.base.getFamilyName.call(this) + "/r/nson's family name: " + this.familyName;
    };
    </script>
    <script language="javascript">
    var g = new grandpa('Michael', 'William');
    alert(g.getName());
    var f = new father('John', 'William');
    alert(f.getName());
    var s = new son('Tom', 'William');
    // alert(s.getName());
    alert(s.getFamilyName());
    </script>
</body>
</html>
    // 运行示例代码需要'附加继承法'中那个Extends方法的支持

三个类grandpa、father和son，它们分别具有两个属性和两个方法。其中的getName方法，是从father中调用了grandpa中被override的同名方法，然后又从son中的getName调用了father中被override的同名方法。这样就在执行son中的getName时，在father中的getName方法中产生死循环，最后stack overflow，IE crash。而其中的getFamilyName方法，是从son中调用grandpa中被override的同名方法，而grandpa中的getFamilyName没有再调用任何override方法，所以可以正确的运行。

由于JavaScript的OOP始终是在做一些模拟的工作，除了能实现某些模拟出来的功能外，同时实现模拟的代码的复杂度也是应该考虑的，像这样的override从代码实现上看非常的轻量级，而且也是很容易理解的。同时可以满足绝大多数的JS控件的开发，随后我会再给出一个ListView控件的事例，它的实现完全基于'附加继承法'和我这篇文章中所讲到的'重载'技术。

非常欢迎您的宝贵意见和建议，让我们开发的更好(copy了dudu的语录:)。

Attention：运行代码alert(s.getName())一定要关闭其它的IE，或避免正在任何IE中填写表单。

posted on 2005-02-24 00:22 birdshome 阅读(6237) 评论(1) 编辑收藏收藏至365Key 所属分类: JScript&DHTML开发

评论

由于发现bug，请再参阅："在JScript面向对象编程中使用重载(续)、修复附加继承法中模拟重载的一缺陷"两篇文章。

# re: 在JavaScript面向对象编程中使用重载回复
发表于 @ 2006年03月09日 5:24 PM | 评论 (0)
on my way to be a jser
在JavaScript中也玩变量类型强行转换
我们在C/C++和C#这类强类型语言中，强行转换变量类型简直就是家常便饭。可是JavaScript这个动态类型脚本语言的变量号称是没有类型的，那么我们怎么转换它的变量的类型呢？而且还要强行转。

JavaScript的变量确实是没有类型的，就是说你var variable后，可以随便的给variable赋值，不会有任何问题。可是赋给变量的值本身自己却是有类型的，比如：String、Object、Boolean和Number等等。所以JS的变量还是有类型转换的，当然很多时候JS解析引擎会默认处理很多的type convert。不过有的时候也需要我们强行转换数据类型，最常见的就是：''+数字+数字，这种情况来生成字符串累加。

    象：''+数字+数字，这样的语法真的是比较的ugly，想我们在C中使用(int)xxx和C++中int(xxx)来做类型转换多么的清晰明了。其实JavaScript也支持这样的类型转换语法的，例如：     <script language="javascript">
    var str = '100';
    var num = Number(100);
    alert(typeof(num) + ': ' + num);
    var obj = Object(str);
    alert(typeof(obj) + ': ' + obj);
    var bool = Boolean(str);
    alert(typeof(bool) + ': ' + bool);

    var num = 100;
    var str = String(num);
    alert(typeof(str) + ': ' + str);
    var bool = Boolean(num);
    alert(typeof(bool) + ': ' + bool);
    var obj = Object(num);
    alert(typeof(obj) + ': ' + obj);

    var bool = true;
    var str = String(bool);
    alert(typeof(str) + ': ' + str);
    var num = Number(bool);
    alert(typeof(num) + ': ' + num);
    var obj = Object(bool);
    alert(typeof(obj) + ': ' + obj);

    var obj = {};
    var str = String(obj);
    alert(typeof(str) + ': ' + str);
    var num = Number(obj);
    alert(typeof(num) + ': ' + num);
    var bool = Boolean(obj);
    alert(typeof(bool) + ': ' + bool);
    </script>
    除了Number(obj)转换失败，其它强行转换表达式都能取得有意义的转换效果。

使用强行转换表达式最大的好处就是可以使程序代码变得清晰，为本身就类型混乱的JavaScript编程减少混淆的可能。

至少我觉得类似：var str = String(3) + String(3); 比 var str = '' + 3 + 3; 表意更清晰。
还有默认转换比较混乱的地方，比如："88"-8和"88"+8，前者的默认转换是把字符串转为数字(结果80)，而后者又是把数字转为字符串(结果"888")@_@，真是乱。所以使用变量类型强制转换，就可能避免这类默认转换带来的潜在理解出错的问题。