2006年8月23日
window對象有兩個主要的定時方法，分別是setTimeout 和 setInteval? 他們的語法基本上相同，但是完成的功能取有區別。
setTimeout方法是定時程序，也就是在什么時間以后干什么。干完了就拉倒。
setInterval方法則是表示間隔一定時間反復執行某操作。
如果用setTimeout實現setInerval的功能，就需要在執行的程序中再定時調用自己才行。如果要清除計數器需要 根據使用的方法不同，調用不同的清除方法：
例如：tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);
或者：
tttt=setInterval('northsnow()',1000);
clearInteval(tttt);
舉一個例子：
?<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
?? var intvalue=1;
?? var timer2=null;
?? function startShow()
?? {
????? liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
????? timer2=window.setTimeout("startShow()",2000);
?? }
?? function stop()
?? {
????? window.clearTimeout(timer2);
?? }
</script>
或者：
?<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
?? var intvalue=1;
?? var timer2=null;
?? function startShow()
?? {
????? liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
?? }
?? function stop()
?? {
????? window.clearInterval(timer2);
?? }
</script>
必須找工作了,最近計劃如下:
1. 看完 ajax設計模式 2006.10.5
2.看完控件開發.?? 2006.10.6
3.實踐.net 處理xml? 2006.10.6
4.看完xslt cookbook????? 2006.10.7
5.看完webservice 的soap 結構 2006.10.8
加油啊! 還有好多要看的!!!
摘要: A Survey of the JavaScript Programming Language
閱讀全文
摘要: AJAX入門之深入理解JavaScript中的函數
閱讀全文
一、屏蔽鍵盤所有鍵
<script language="javascript">
<!--
function document.onkeydown(){
event.keyCode = 0;
event.returnvalue = false;
}
-->
</script>
二、屏蔽鼠標右鍵
在body標簽里加上oncontextmenu=self.event.returnvalue=false 或者:
<script language="javascript">
<!--
function document.oncontextmenu()
{
return false;
}
-->
</script>
function nocontextmenu()
{
if(document.all) {
event.cancelBubble=true;
event.returnvalue=false;
return false;
}
}
或者:
<body onmousedown="rclick()" oncontextmenu= "nocontextmenu()">
<script language="javascript">
<!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
</script>
三、屏蔽 Ctrl+N、Shift+F10、F5刷新、退格鍵<script language="javascript">
<!--
//屏蔽鼠標右鍵、Ctrl+N、Shift+F10、F5刷新、退格鍵
function window.onhelp(){return false} //屏蔽F1幫助
function KeyDown(){
if ((window.event.altKey)&&
((window.event.keyCode==37)|| //屏蔽 Alt+ 方向鍵 ←
(window.event.keyCode==39))){ //屏蔽 Alt+ 方向鍵 →
alert("不準你使用ALT+方向鍵前進或后退網頁！");
event.returnvalue=false;
}
注：這還不是真正地屏蔽 Alt+ 方向鍵，因為 Alt+ 方向鍵彈出警告框時，按住 Alt 鍵不放，用鼠標點掉警告框，這種屏蔽方法就失效了。
if ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password") || //屏蔽退格刪除鍵
(event.keyCode==116)|| //屏蔽 F5 刷新鍵
(event.ctrlKey && event.keyCode==82)){ //Ctrl + R
event.keyCode=0;
event.returnvalue=false;
}
if ((event.ctrlKey)&&(event.keyCode==78)) //屏蔽 Ctrl+n
event.returnvalue=false;
if ((event.shiftKey)&&(event.keyCode==121)) //屏蔽 shift+F10
event.returnvalue=false;
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;}
}
另外可以用 window.open 的方法屏蔽 IE 的所有菜單
第一種方法：
window.open("你的.htm", "","toolbar=no,location=no,directories=no,menubar=no,
scrollbars=no,resizable=yes,status=no,top=0,left=0")
第二種方法是打開一個全屏的頁面：
window.open("你的.asp", "", "fullscreen=yes")
*/
//-->
</script>
四、屏蔽瀏覽器右上角“最小化”“最大化”“關閉”鍵
<script language=javascript>
function window.onbeforeunload()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
window.event.returnvalue = "";
}
}
</script>
或者使用全屏打開頁面
<script language="javascript">
<!--
window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400,
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no,
status=no");
-->
</script>
注：在body標簽里加上
onbeforeunload="javascript:return false"http://使不能關閉窗口
五、屏蔽F5鍵<script language="javascript">
<!--
function document.onkeydown()
{
if ( event.keyCode==116)
{
event.keyCode = 0;
event.cancelBubble = true;
return false;
}
}
-->
</script>
六、屏蔽IE后退按鈕 在你鏈接的時候用
<a href="javascript:location.replace(url)">
七、屏蔽主窗口滾動條 在body標簽里加上
style="overflow-y:hidden"
八、屏蔽拷屏,不斷地清空剪貼板 在body標簽里加上
onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)"
九、屏蔽網站的打印功能<style>
@media print {
* { display: none }
}
</style>
十、屏蔽IE6.0 圖片上自動出現的保存圖標 方法一：
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
十一、屏蔽頁中所有的script<noscrript></noscript>
強制點擊廣告大法(1)：如果你的廣告點擊率太低，這個方法可以強制訪客先點擊廣告
把下面代碼copy入你html文件的<head>和</head>中即可：
<script language="JavaScript">
var num = 2;
var mypage = 'http://www.webjx.com';
var pissoff = ' 你必須先點擊上面的鏈接 ';
allow = Array();
allow[num] = 2;
function gotoit(link){
if (link != num){
allow[link] = 2;
} else {
for (i=1;i<=num;i++){
if (allow[i] != 2){
i = num + 1;
lemmeIn = 0;
} else {
lemmeIn = 1;
}
}
if (lemmeIn == 1){
window.location = mypage;
} else {
alert(pissoff);
}
}
}
//--->
</script>
?
把下面代碼copy入你html文件的<body>和</body>中即可：
<a href="http://www.webjx.com" onClick="gotoit(1)" target="_blank"><u>先幫忙點擊這里</u></a><BR>
<a href="javascript:gotoit(num)"><u>進入</u></a><BR>
<script language="Javascript">
<!--
document.write('<a href="http://www.webjx.com" target="_top">sdfdsf</a>');
//-->
</script>
?
=====================================
強制點擊廣告大法(2)：點了圖象才能看到鏈接．可用于強制點擊廣告
第一步:把如下代碼加入<head>區域中
<SCRIPT language="JavaScript">
<!--
function MM_showHideLayers() { //v2.0
var i, visStr, args, theObj;
args = MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) { //with arg triples (objNS,objIE,visStr)
visStr = args[i+2];
if (navigator.appName == 'Netscape' && document.layers != null) {
theObj = eval(args[i]);
if (theObj) theObj.visibility = visStr;
} else if (document.all != null) { //IE
if (visStr == 'show') visStr = 'visible'; //convert vals
if (visStr == 'hide') visStr = 'hidden';
theObj = eval(args[i+1]);
if (theObj) theObj.style.visibility = visStr;
} }
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
//-->
</SCRIPT>
?
第二步:在<body>區中加入如下代碼
<div id="Layer1" style="position:absolute; left:240px; top:175px; width:306px; height:63px; z-index:1; visibility: hidden"><a href="http://www.webjx.com"><font color=green size="5" face="隸書">帶你去一個意想不到的地方!</font></a></font></div>
<div id="Layer2" style="position:absolute; left:280px; top:237px; width:147px; height:82px; z-index:2; visibility: visible">
<p align="center"><a href="http://www.webjx.com" target="_blank">
<img SRC="http://www.webjx.com/skill/mm.jpg" border="0" onMouseDown="MM_showHideLayers('document.layers[\'Layer1\']','document.all[\'Layer1\']','show')"></a></font><br>
</p>
</div>
?
第三步:把<body>區中內容改為:
<body bgcolor="#fef4d9" onLoad="MM_preloadImages()">
=======================================
強制點擊廣告大法(3)：兩個文字鏈接要先后點擊，否則就跳出警告框
第一步:把如下代碼加入<head>區域中
<script language="JavaScript">
var num = 2;
var mypage = 'http://www.webjx.com';
var pissoff = ' 請先點擊上面鏈接 ';
allow = Array();
allow[num] = 2;
function gotoit(link){
if (link != num){
allow[link] = 2;
} else {
for (i=1;i<=num;i++){
if (allow[i] != 2){
i = num + 1;
lemmeIn = 0;
} else {
lemmeIn = 1;
}
}
if (lemmeIn == 1){
window.location = mypage;
} else {
alert(pissoff);
}
}
}
//--->
</script>
?
第二步:把如下代碼加入<body>區域中
<a href="http://www.webjx.com" onClick="gotoit(1)" target="_blank"><u>先幫忙點擊這里</u></a><BR>
<a href="javascript:gotoit(num)"><u>下載本站所有頁面</u></a>
我們將向你展示 JavaScript 如何實現面向對象的語言中的: 繼承. 同時, 這些例子將向你展示如何實現類的封裝. 在此, 我們不會討論多態實現.
雖然 JavaScript 是腳本語言, 但它所支持的面向對象編程也是非常強大的. 雖然它沒有類和實例, 但它有對象, 原型和隱式的繼承. 我們將會解釋如何模擬繼承及其超類與子類之間關系的形式. 原型是理解繼承概念的關鍵, 我們將會教你如何建立原型, 如何檢測一個對象是否是另外一個對象的原型, 及其 JavaScript 的模型與 Java 面向對象編程之間的區別. 我們同樣會向你展示如何檢測對象所包含的各種屬性的方法. 在另外一篇文章里, 我還會詳細地講解有關 "原型鏈 (prototype chain)" 的知識.
本文大量地參考了 Webreference.com 中 "Object-Oriented Programming with JavaScript, Part I: Inheritance" 的內容, 許多內容我進行了詳細的測試和再探討, 以保證內容不會有太大的失誤.
原文地址: http://www.webreference.com/js/column79/
面向對象語言的特點
面向對象設計是基于以下 3 個主要原理的: 封裝, 繼承和多態. 說某種程序語言是支持 OO (面向對象) 設計的, 只有在它的語法中支持以上 3 個概念才可以這么說. 這種語言應該為你提供某些方法, 以使你能很輕松地定義和使用這些范例. 封裝涉及到了將某個對象變成一個 "黑盒子"的概念. 當你使用某個對象時, 你不用知道它內部是如何工作的, 你也不必理解對象是如何工作的. 這個對象只需將它絕對有用的信息以接口方式提供出來. 此對象應該給你提供友好的接口, 來讓你可以使用其有限的屬性集和方法集. 封裝還有一層意思, 那就是說某個對象包含了它需要的每一樣東西, 這包括數據和對于它的操作. 封裝的概念非常的強大, 因為它允許將一個大的軟件項目有效地分配給每個開發人員, 對于團隊中的每個人, 他們只需要關注自己所實現的對象, 而不需要太多地關注于別人的實現. 開發項目中的開銷使得開發團隊中成員與接口的數量按指數級別增長. 封裝是自 "軟件危機" 以來最受歡迎的 OO 設計理念.
軟件的復用是 OO 設計思想中另外一個重要的特點. 在軟件體系中實現此思想的主要方法就是繼承. 類就是定義對象的功能. 超類是某個新類, 或者說是子類被建立的來源類. 一個子類從它的超類中繼承了所的方法和屬性. 實際上, 所有的子類都是被自動地生成的, 因此節省了大量的工作. 你不需要一個一個地定義這些子類. 當然, 你可以重載那些繼承下來的方法和屬性. 事實上, 誰也沒有指出哪個子類要建立得和其超類一模一樣, 除非你沒有重載任何的屬性和方法.
多態可能是這個 3 個概念中最復雜的一個了. 其本質上是說, 每個對象都可以處理各種不同的數據類型. 你不必為處理不同的數據類型而建立不同的類. 其典型的例子就是畫圖的類, 你不必為實現畫圓, 畫矩形, 畫橢圓而編寫不同的類. 你可以建立一個足夠聰明的類來調用特定的方法來操作特定的形狀.
通過函數實現繼承
雖然 JavaScript 不支持顯示繼承操作符, 但你可以通過其實方式實現隱式繼承. 對于實現類的繼承, 有 2 種比較常用的方式. 第一種將某個類定義成子類的方法是, 通過在負責定義子類函數的內部調用超類的構造函數. 看下面的示例:
// 超類構造函數
function superClass() {
? this.bye = superBye;
? this.hello = superHello;
}
// 子類構造函數
function subClass() {
? this.inheritFrom = superClass;
? this.inheritFrom();
? this.bye = subBye;
}
function superHello() {
? return "Hello from superClass";
}
?
function superBye() {
? return "Bye from superClass";
}
function subBye() {
? return "Bye from subClass";
}
// 測試構造特性的函數
function printSub() {
? var newClass = new subClass();
? alert(newClass.bye());
? alert(newClass.hello());
}
當你運行上面的 printSub 函數時, 它會依次執行 subBuy 和 superHello 函數. 我們可以看到, bye 和 hello 方法最先在 superClass 中被定義了. 然而, 在 subClass 中, bye 方法又被重載了, subClass 構造函數頭兩行的功能只是做了一個簡單的原始的繼承操作, 但它是通過顯示執行 inheritFrom 方法來完成的繼承操作. 繼承的過程先是將 superClass 的對象原型賦給 subClass 下的 inheritFrom 方法, 然后在執行完 superClass 的構造函數后, superClass 的屬性就被自動地加到了 subClass 的屬性列表中.這主要是由于在 subClass 中通過 this 來調用的 inheritFrom (也就是 superClass) 構造函數造成的, 通過此種方式調用 superClass 構造函數時, JavaScript 解釋器會把 superClass 中的 this 與 subClass 中的 this 理解成位于同一個作用域下的 this 關鍵字, 所以就產生了繼承的效果.
另外, 需要說明的是, 對于任何一個實例化的對象, 你任意地為它添加屬性或方法, 如下所示:
? var newClass = new subClass();
? newClass.addprop = "added property to instance object";
很明顯, 通過此種方式添加的屬性和方法只對當前實例化對象有效, 不會影響所有的同類型對象實例. 無疑, 它是你創造的一個獨一無二的對象實例.
通過原型實現繼承
第二種, 也是更強大的方法是通過建立一個超類對象, 然后將其賦值給子類對象的 prototype 屬性, 以此方式來建立子類的繼承. 假設我們的超類是 superClass, 子類是 subClass. 其 prototype 的賦值格式如下:
subClass.prototype = new superClass;
對于原型繼承的實現方式, 讓我們剛前面的代碼改寫一下, 示例如下:
// 超類構造函數
function superClass() {
? this.bye = superBye;
? this.hello = superHello;
}
// 子類構造函數
function subClass() {
? this.bye = subBye;
}
subClass.prototype = new superClass;
function superHello() {
? return "Hello from superClass";
}
?
function superBye() {
? return "Bye from superClass";
}
function subBye() {
? return "Bye from subClass";
}
// 測試構造特性的函數
function printSub() {
? var newClass = new subClass();
? alert(newClass.bye());
? alert(newClass.hello());
}
我們可以看到, 除了將前面第一種繼承方式中 subClass 中的前 2 行內容, 換成函數外的 prototype 賦值語句之外, 沒有其它任何的變化, 但代碼的執行效果和前面是一樣的.
為已經建立的對象添加屬性
通過原型實現的繼承比通過函數實現的繼承更好, 因為它支持動態繼承. 你可以在構造函數已經完成之后, 再通過 prototype 屬性定義超類的其它方法和屬性, 并且其下的子類對象會自動地獲得新的方法和屬性. 下面是示例, 你可以看到它的效果.
function superClass() {
? this.bye = superBye;
? this.hello = superHello;
}
function subClass() {
? this.bye = subBye;
}
subClass.prototype = new superClass;
function superHello() {
? return "Hello from superClass";
}
?
function superBye() {
? return "Bye from superClass";
}
function subBye() {
? return "Bye from subClass";
}
var newClass = new subClass();
/*****************************/
// 動態添加的 blessyou 屬性
superClass.prototype.blessyou = superBlessyou;
function superBlessyou() {
? return "Bless You from SuperClass";
}
/*****************************/
function printSub() {
? alert(newClass.bye());
? alert(newClass.hello());
? alert(newClass.blessyou());
}
這就是我們經常看到的為內部對象, 如 String, Math 等再添加其它屬性和方法的技巧. 對于任何的內部對象和自定義對象, 你都也可以通過 prototype 來重載其下的屬性和方法. 那么在調用執行時, 它將調用你所定義的方法和屬性. 下面是示例:
// 為內部 String 對象添加方法
String.prototype.myMethod = function(){
? return "my define method";
}
// 為內部 String 對象重載方法
String.prototype.toString = function(){
? return "my define toString method";
}
var myObj = new String("foo");
alert(myObj.myMethod());
alert(myObj);
alert("foo".toString());
另外需要注意的是, 所有 JavaScript 內部對的 prototype 屬性都是只讀的. 你可以像上面那樣為內部對象的原型添加或重載屬性和方法，但不能更改該內部對象的 prototype 原型. 然而, 自定義對象可以被賦給新的原型. 也就是說, 像下面這樣做是沒有意思的.
function Employee() {
? this.dept = "HR";
? this.manager = "John Johnson";
}
String.prototype = new Employee;
var myString = new String("foo");
上面的程序在運行之后不會報錯, 但顯然, 如果你調用 myString.dept 將會得到一個非定義的值.
另外, 一個經常使用的是 prototype 下的 isPrototypeOf() 方法, 它主要用來判斷指定對象是否存在于另一個對象的原型鏈中. 語法如下:
object1.prototype.isPrototypeOf(0bject2);
上面的格式是用來判斷 Object2 是否出現 Object1 的原型鏈中. 示例如下:
function Person() {
? this.name = "Rob Roberson";
? this.age = 31;
}
function Employee() {
? this.dept = "HR";
? this.manager = "John Johnson";
}
Employee.prototype = new Person();
var Ken = new Employee();
當執行 Employee.prototype.isPrototypeOf(Ken), Person.prototype.isPrototypeOf(Ken) 和 Object.prototype.isPrototypeOf(Ken) 時, 結果都會返回 true.
用于 Netscape 下的特定繼承檢測
在 Netscape 瀏覽器 4.x 到 6, 及其 Mozilla 系列瀏覽中, JavaScript 將對象間的原型關系存儲在一個特殊的內部屬性對象中, __proto__ (前后是 2 個下劃線). 下面是一個示例:
function Shape() {
? this.borderWidth = 5;
}
function Square() {
? this.edge = 12;
}
Square.prototype = new Shape;
myPicture = new Square;
alert(myPicture.__proto__);
alert(myPicture.borderWidth);
由于腳本執行過 Square.prototype = new Shape 語句, 所以 myPicture 具有了一個指向 Shape 對象的內部屬性 __proto__. 在腳本的執行過程中, 當要獲取對象的某個屬性值, 并且此對象是通過原型賦值而建立的某個對象, 在自身并沒有對某個屬性進行定義時, JavaScript 解析器會查看它的 __proto__ 屬性對象, 也就它的原型對象, 然后枚舉其原型中的所有屬性, 而得出的結果要么是有這個屬性, 要么是沒有這個屬性. 如果沒有此屬性, 再枚舉原型對象下面的原型對象, 直到此過程真正的結束. 而所有的這些 JavaScript 引擎內部的操作, 我們是不會知道的, 下面的內容就是對這個問題的解釋.
其實, 對于所有的自定義對象, 無論它有沒有使用過 prototype 賦值操作, 它都具有一個 __proto__ 內部對象. 而如果某個對象是通過多層 prototype "繼承" 來的, 所有的 "繼承" 而來的屬性卻可以通過簡單的一層循環遍歷出來, 而不需要使用什么遞歸算法, 因為 JavaScript 引擎自動給我們做了. 示例如下:
function Shape() {
? this.borderWidth = 5;
}
function Square() {
? this.edge = 12;
}
function RoundSquare()
{
? this.radio = 0.5;
}
Square.prototype = new Shape;
RoundSquare.prototype = new Square;
var myPicture = new RoundSquare;
for (property in myPicture.__proto__) {
alert(property);
}
我們或者還可以通過更改后面的循環, 來遍歷某個子類對象繼承來的所有屬性, 如下:
for (property in RoundSquare.prototype) {
alert(property);
}
如果你不怕麻煩, 我們甚至還可以通過級連的方式, 取出其構造函數中定義的原始屬性值.
alert(myPicture.__proto__.__proto__.borderWidth);
無論你是否修改過此屬性值, 通過上面語句所取出的屬性值都是原始定義值. 讓我們沿著這個思路再往下看, 下面的代碼涉及到另外一個問題, 這個問題和原型鏈 (prototype chain) 有關. 代碼如下:
function State() {
}
function City() {
}
City.prototype = new State;
function Street() {
}
Street.prototype = new City;
var UniversityAvenue = new Street();
function tryIt() {
? alert(UniversityAvenue.__proto__== Street.prototype);
? alert(UniversityAvenue.__proto__.__proto__==
?? City.prototype);
? alert(UniversityAvenue.__proto__.__proto__.__proto__
?? == State.prototype);
? alert(UniversityAvenue.__proto__.__proto__.__proto__.
?? __proto__== Object.prototype);
? alert(UniversityAvenue.__proto__.__proto__.__proto__.
?? __proto__.__proto__== null);
}
當執行 tryIt 函數時, 所有的顯示均為 true. 也就是說, 子類對象的 prototype.__proto__ 總是等于超類對象的 prototype 屬性; 超類對象的 prototype.__proto__ 總是等于 Object.prototype; Object.prototype.__proto__ 總是為 null; 而實例對象的 __proto__ 總是等于其類對象的 prototype, 這就是為什么任何自定義對象都具有 __proto__ 屬性的原因. 對于上面的敘述, 其對應的代碼如下:
Street.prototype.__proto__ == City.prototype???? // true
State.prototype.__proto__ == Object.prototype??? // true
Object.prototype.__proto__ == null?????????????? // true
UniversityAvenue.__proto__ == Street.prototype??? // true
模擬實現 instanceOf 函數
根據上一節的內容, 我們了解了有關 Netscape 所支持的 __proto__ 特性的內容. 這一節, 我們將利用此特性來創建自己的實例對象檢測函數.
許多時候, 我們都需要判斷某個對象是否是由某個類來定義的, 在其它的語言里, 你可以通過 instanceOf 函數來實現此判斷. 在 JavaScript 中同樣提供了一個 instanceof 運行符, 而在 __proto__ 的基礎上, 我們完全可以自己定義一個同樣的函數, 雖然這看上去是在重復勞動, 但有助于我們更深刻地了解有關 __proto__ 的知識. 下面的代碼只是用來說明功能, 在實際的應用中, 你不需要重復定義 instanceOf 函數, 使用 instanceof 運算符即可.
function instanceOf(object, constructorFunction) {
? while (object != null) {
??? if (object == constructorFunction.prototype)
???? {return true}
??? object = object.__proto__;
? }
? return false;
}
function State() {
}
function City() {
}
City.prototype = new State;
function Street() {
}
Street.prototype = new City;
var UniversityAvenue = new Street();
function demo() {
? alert("instanceOf(UniversityAvenue, Street) is " +
?? instanceOf(UniversityAvenue, Street));
? alert("instanceOf(UniversityAvenue, City) is " +
?? instanceOf(UniversityAvenue, City));
? alert("instanceOf(UniversityAvenue, State) is " +
?? instanceOf(UniversityAvenue, State));
}
你會看到所有的運行結果全部為 true, 其原理和上一節的級連判斷相等如出一轍. 實際證明, 它的運行結果和 instanceof 運行符的運行結果是一致的.
你可以通過 constructor 屬性來檢測任意對象的超類, 此屬性返回通過 new 運算符創建新對象時所調用的構造函數, 返回值是 Function 對象類型. 因為 Object 內部對象是支持 constructor 屬性的, 并且有的對象 (包括內部對象和自定義對象) 都是由 Object 繼承而來的, 所以所有的對象都支持此屬性. 讓我們再看一下下面的例子:
function Employee() {
? this.dept = "HR";
? this.manager = "John Johnson";
}
function printProp() {
? var Ken = new Employee();
? alert(Ken.constructor);
}
調用完 printProp 函數之后, 你會看到彈出框中顯示的是 Employee 函數的定義文本, 其實 Ken.constructor 的返回值本身是 Function 對象類型, 而在 alert 時被隱含地調用了 toString 方法. 對于類對象本身, 你同樣可以調用 prototype.constructor 來取出其構造函數.
對象的分類和打印
JavaScript 支持 3 種主要類型的對象: 內部對象, 宿主對象, 自定義對象, 可能還有特殊的外部對象, 如: ActiveX 對象或 XPCOM 對象. 內部對象被 JavaScript 語言本身所支持, 如: Object, Math, Number 對象等. 所有的內部對象的共同特點是以大寫字母開頭, 并且它們是大小寫敏感的. 如果你想使用數學常量 PI, 必須寫成 Math.PI, 你如果寫成 math.PI, JavaScript 會顯示錯誤. 宿主對象是被瀏覽器支持的, 目的是為了能和被瀏覽的文檔可以交互, 如: document, window 和 frames. 宿主對象的特點是所有對象全部以小寫字母開頭. 因為 JavaScript 本身就是大小寫敏感的, 所以你同樣不能將大小寫搞混. 剩下要說的就只是自定義對象了, 你可以隨便將你的對象定義成小寫或大小寫, 但是一定要符合基本的命名規范. 如下所示, 這就是一個自定義對象:
function employee() {
? this.dept = "HR";
? this.manager = "John Johnson";
}
function printProp() {
? var ken = new Employee();
? for (property in ken) {
??? alert(property);
? }
}
前面我們已經提到過, 所有的內部對象和自定義對象都是從 Object 對象繼承而來的, 它是所有對象的超類對象. 你可建立一個 Object 對象的實例. 如下:
var myObject = new Object();
Object 類型的對象有許多的屬性和方法, 你可以查看相關的手冊. 上面只是定義了一個最簡單的空對象, 你還可以為 Object 構造函數傳入參數, 它會返回相應類型值的實例化對象. 記住, 返回值的類型是某種對象類型的 (如: String, Number 或 Object). 這種方式和直接通過賦值字符串或數值常量不同, 主要表示在類型方面. 如下所示:
var myObject = new Object("foo"); // 返回值類型為 object
var myObject = new String("foo"); // 返回值類型為 object, 效果同上
與
var myObject = "foo";???????????? // 返回值類型為 string
你可以從調試器的 type 列中看出這個細微的差別, 它是簡單類型與對象類型之間的區別. 但是, 你通過 alert 調用是看出不這些內部差別的, 因為在調用 alert 的過程中, 所有的對象類型值都會被自動調用 toString 方法進行字符串類型轉換, 轉換規則在 JavaScript 手冊中有說明. 如果你 alert 的是某個自定義對象, 并且它沒有定義 toString 方法, 那么它的返回值將為 "[object Object]". 對于 Math 對象, 當你查看其 Math.constructor 屬性時, 你會得到一個不同于其它內部對象的內容為 "function Object()..." 的對象構造函數, 這與其它對象返回 "function Function()..." 的構造函數很不相同. 原因很簡單, 因為 Math 對象是不能通過 new 運算符進行創建的.
另外, 如果傳入 Object 構造函數中的值是一個對象, 它將原封不動地將該對象返回. 記住, 此操作只是一個引用, 而不是復制.
請求對象的屬性
在前面的示例代碼中, 已經出現過以循環方式枚舉對象屬性的示例. 其實, 通過 for...in 語句, 無論是任何對象和數組, 其下的元素, 屬性和方法都可以遍歷出來. 示例如下:
function employee() {
? this.dept = "HR";
? this.manager = "John Johnson";
}
function printProp() {
? var ken = new employee();
? for (property in ken) {
??? alert(property + " : " + ken[property]);
? }
}
在遍歷測試過程中, 你會發現, 對于自定義對象和宿主對象一般都可以枚舉出其下的屬性, 而對于內部對象, 幾乎沒有什么屬性可以遍歷出來, 為什么要說幾乎呢? 因為對于 Mozilla 內核的瀏覽和 IE 內核的瀏覽器, 其 JavaScript 引擎有不同, Mozilla 下可以枚舉出部分內容, 而枚舉的原則不得而知.
對于每一個對象, 你還可以使用 hasOwnProperty 方法來檢測其是否具有某個屬性或方法. 由于 hasOwnProperty 是 Object 對象下的方法, 因此所有的對象都具有此方法. 但是, 需要注意的是, 此方法只能檢測通過 this 關鍵字定義的成員, 如果某個成員是通過原型鏈定義的, 那么此方法將返回 false. 也就是說, 通過 prototype 繼承來的屬性和方法, 及其通過 prototype 定義的屬性和方法, 都是不能通過 hasOwnProperty 來進行檢測的. 由此, 我們可以看出, 通過 this關鍵字定義的屬性和方法是同對象本身處于同一個地址空間內的; 而通過 prototype 定義的屬性和方法, 是通過所謂的 "原型鏈" 進行管理的, 其下的的屬性和方法不位于同一個地址空間之間, 當其調用這種屬性或方法時, 必須通過 "鏈表" 才能索引到其下的某個屬性或方法. 也就說, 調用以原型方式定義的屬性和方法會有一個類似于鏈表的 "回溯" 操作.
和 hasOwnProperty 差不多, 對于對象中的每個屬性, 我們還可以通過 propertyIsEnumerable 來測試它是否可以被枚舉出來. 如下所示:
function Employee1() {
? this.dept = "HR";
? this.manager = "John Johnson";
? this.month = new Array("jan", "feb", "mar");
}
var Ken = new Employee1();
Ken.month.propertyIsEnumerable(0);
我們可以看到, 其語法是 propertyIsEnumerable 后跟數組的元素索引或對象中的屬性名稱. 同樣, 對于原型鏈中的屬性或方法它是不予考慮的, 結果當然是返回 false.
對于 JavaScript 和 Java 的比較
與 Java 這種基于類的語言不同, JavaScript 是一種基于原型的語言. 這種特點影響著每一個方面. 如術語 instance 在基于類的語言中有著特殊的意義, 它表示某個實例是隸屬于某個特殊類的獨立個體, 是對類定義的真實實現; 而在 JavaScript 中, 術語 instance 沒有這個意思, 因為在它的語法里面, 類和實例是沒有區別的. 雖然, 實例可以用來說明某個對象是使用某個特殊的構造函數生成的. 如下所示:
function superClass() {
? this.bye = superBye;
? this.hello = superHello;
}
function subClass() {
? this.bye = subBye;
}
subClass.prototype = new superClass;
function superHello() {
? return "Hello from superClass";
}
?
function superBye() {
? return "Bye from superClass";
}
function subBye() {
? return "Bye from subClass";
}
var newClass = new subClass();
newClass 是 subClass 的實例, 它是通過 subClass 的構造函數生成的. 而如果使用基于類的語言呢, 如下所示是 Java 的等價實現.
public class superClass {
? public superClass () {
??? this.bye = superBye;
??? this.hello = superHello;
? }
}
public class subClass extends superClass {
? public subClass () {
??? this.bye = subBye;
? }
}
結束語
我們在上面的幾節中, 詳細地說明了有關 JavaScipt 中的面向對象實現, 或者只能說是模擬實現. 在此期間向你展示了實現方法. 并且闡述了有關如何檢測對象之間關系的方法, 如何打印屬性和測試某個特定的屬性, 還做了一個 JavaScript 和 Java 的簡單比較. 但這顯然是不夠的, 因而, JavaScript 的面向對象編程是非常多樣化的, 格式也非常繁雜. 我打算在后面的內容里, 再總結一下有問封裝的格式問題, 著重說明與對象方法有關的內容和實現, 同時還有上面提到的原型鏈 (prototype chain) 問題.
window對象有兩個主要的定時方法，分別是setTimeout 和 setInteval? 他們的語法基本上相同，但是完成的功能取有區別。
setTimeout方法是定時程序，也就是在什么時間以后干什么。干完了就拉倒。
setInterval方法則是表示間隔一定時間反復執行某操作。
如果用setTimeout實現setInerval的功能，就需要在執行的程序中再定時調用自己才行。如果要清除計數器需要 根據使用的方法不同，調用不同的清除方法：
例如：tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);
或者：
tttt=setInterval('northsnow()',1000);
clearInteval(tttt);
舉一個例子：
?<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
?? var intvalue=1;
?? var timer2=null;
?? function startShow()
?? {
????? liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
????? timer2=window.setTimeout("startShow()",2000);
?? }
?? function stop()
?? {
????? window.clearTimeout(timer2);
?? }
</script>
或者：
?<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
?? var intvalue=1;
?? var timer2=null;
?? function startShow()
?? {
????? liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
?? }
?? function stop()
?? {
????? window.clearInterval(timer2);
?? }
</script>
<script Language="javascript"><br />
/****************** JS2D函數集? *******************<br />
<br />
? 作者：neweroica??? 2003-3-28<br />
<br />
? CopyRight (C) 2003<br />
<br />
? 在引用或轉載時請保留此版權信息，謝謝!!!<br />
<br />
? 本函數集可以單獨存成一個js文件："JS2D.js"<br />
<br />
***************************************************/<br />
<br />
/************* 畫點 **************<br />
? x,y???? 點所在的屏幕坐標（像素）<br />
? color?? 顏色（字符串值）<br />
? size??? 大小（像素）<br />
**********************************/<br />
function drawDot(x,y,color,size){<br />
? document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>")<br />
}<br />
<br />
/************* 畫直線 **************<br />
? x1,y1?? 起點所在的屏幕坐標（像素）<br />
? x2,y2?? 終點所在的屏幕坐標（像素）<br />
? color?? 顏色（字符串值）<br />
? size??? 大小（像素）<br />
? style?? 樣式<br />
????????? =0??? 實線<br />
????????? =1??? 虛線<br />
????????? =2??? 虛實線<br />
**********************************/<br />
function drawLine(x1,y1,x2,y2,color,size,style){<br />
? var i;<br />
? var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));<br />
? var theta=Math.atan((x2-x1)/(y2-y1));<br />
? if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))<br />
??? theta=Math.PI+theta;<br />
? var dx=Math.sin(theta);//alert(dx)<br />
? var dy=Math.cos(theta);<br />
? for(i=0;i<r;i++){<br />
??? switch(style){<br />
????? case 0:<br />
??????? drawDot(x1+i*dx,y1+i*dy,color,size);<br />
??????? break;<br />
????? case 1:<br />
??????? i+=size*2;<br />
??????? drawDot(x1+i*dx,y1+i*dy,color,size);<br />
??????? break;<br />
????? case 2:<br />
??????? if(Math.floor(i/4/size)%2==0){<br />
????????? drawDot(x1+i*dx,y1+i*dy,color,size);<br />
??????? }<br />
??????? else{<br />
??????????? i+=size*2;<br />
??????????? drawDot(x1+i*dx,y1+i*dy,color,size);<br />
??????? }<br />
??????? break;<br />
????? default:<br />
??????? drawDot(x1+i*dx,y1+i*dy,color,size);<br />
??????? break;<br />
??? }<br />
? }<br />
}<br />
<br />
/************* 畫實心矩形 **************<br />
? x1,y1?? 起點（矩形左上角）所在的屏幕坐標（像素）<br />
? x2,y2?? 終點（矩形右下角）所在的屏幕坐標（像素）<br />
? color?? 顏色（字符串值）<br />
**********************************/<br />
function drawFilledRect(x1,y1,x2,y2,color){<br />
? document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x1)+"; top: "+(y1)+";background-color: "+color+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>")<br />
}<br />
<br />
/************* 畫矩形 **************<br />
? x1,y1?? 起點（矩形左上角）所在的屏幕坐標（像素）<br />
? x2,y2?? 終點（矩形右下角）所在的屏幕坐標（像素）<br />
? color?? 顏色（字符串值）<br />
? size??? 大小（像素）<br />
? style?? 樣式<br />
????????? =0??? 實線<br />
????????? =1??? 虛線<br />
????????? =2??? 虛實線<br />
**********************************/<br />
function drawRect(x1,y1,x2,y2,color,size,style){<br />
? drawLine(x1,y1,x2,y1,color,size,style);<br />
? drawLine(x1,y2,x2,y2,color,size,style);<br />
? drawLine(x1,y1,x1,y2,color,size,style);<br />
? drawLine(x2,y1,x2,y2,color,size,style);<br />
}<br />
<br />
/************* 畫橢圓 **************<br />
? x,y???????? 中心所在的屏幕坐標（像素）<br />
? a,b???????? 長軸和短軸的長度（像素）<br />
? color?????? 顏色（字符串值）<br />
? size??????? 大小（像素）<br />
? precision?? 邊緣精細度<br />
**********************************/<br />
function drawOval(x,y,a,b,color,size,precision){<br />
? var i;<br />
? var iMax=2*Math.PI;<br />
? var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5);<br />
? for(i=0;i<iMax;i+=step){<br />
??? drawDot(x+a*Math.cos(i),y+b*Math.sin(i),color,size);<br />
? }<br />
}<br />
<br />
/************* 畫多邊形 **************<br />
? x,y???? 中心所在的屏幕坐標（像素）<br />
? r?????? 多邊形外接圓半徑（像素）<br />
? n?????? 多邊形的邊數<br />
? color?? 顏色（字符串值）<br />
? size??? 大小（像素）<br />
? style?? 樣式<br />
????????? =0??? 實線<br />
????????? =1??? 虛線<br />
????????? =2??? 虛實線<br />
**********************************/<br />
function drawPoly(x,y,r,n,color,size,style){<br />
? var i;<br />
? var theta=Math.PI;<br />
? var x1=x,y1=y-r,x2,y2;<br />
? for(i=0;i<n;i++){<br />
??? theta-=(2*Math.PI/n);<br />
??? x2=x+r*Math.sin(theta);<br />
??? y2=y+r*Math.cos(theta);<br />
??? drawLine(x1,y1,x2,y2,color,size,style);<br />
??? x1=x2;<br />
??? y1=y2;//alert(x1+" "+y1)<br />
? }<br />
}<br />
</script><br />
<br />
<br />
<script><br />
//****************** JS2D函數集示例? *******************<br />
drawLine(20,20,300,20,"#0000cc",2,0);<br />
drawLine(20,40,300,40,"#0000cc",2,1);<br />
drawLine(20,60,300,60,"#0000cc",2,2);<br />
drawFilledRect(20,80,300,200,"009900");<br />
drawRect(20,220,220,320,"ff0000",2,0);<br />
drawRect(240,220,440,320,"ff0000",2,1);<br />
drawRect(460,220,660,320,"ff0000",2,2);<br />
drawOval(250,450,120,50,"006600",1,1);<br />
drawOval(250,650,120,120,"006600",2,0.5);<br />
drawPoly(200,900,100,3,"ff8800",2,0);<br />
drawPoly(400,900,100,4,"ff8800",2,1);<br />
drawPoly(600,900,100,5,"ff8800",2,2);<br />
drawPoly(200,1100,100,6,"ff8800",2,0);<br />
drawPoly(400,1100,100,7,"ff8800",2,1);<br />
drawPoly(600,1100,100,12,"ff8800",2,2);<br />
</script>
JSVM-介紹
?? 我們在 JSVM1.x 中嘗試了一種較傳統方式不同的 JavaScript（基于web中的JS） 開發模式。一年多的時間中，得到了大量積極有效的反饋和建議，在這些基礎上今天我們正式推出 JSVM2。
??? JavaScript 一直以來扮演著Web端“小腳本”的角色，開發者用它來在web上制作一些動態特效，? 以及表單提交前對數據的預校驗等等，隨著客戶端處理能力日益提升，DHTML在表示層的動態特征和豐富表現力，以及XmlHttp,XmlDom等HTTP工具的出現, 另外一種應用模式開始引起人們的關注：基于 JavaScript + DHTML + XML + XmlHttp/XmlDom 的 RIA (Rich Internet Application)，更確切地說，應稱為：RWA (Rich Web Application)。這類應用給用戶帶來的良好體驗遠勝于傳統 Web 中依賴 Form 提交數據的方式，并且較大程度減小了服務器的負載和網絡流量，提高了系統綜合性能。后來一個老外提出了 Ajax 這個名詞，關于這個概念我不再冗余復述。
??? 如今Ajax Framework 像雨后春筍一般涌現很多，其中不乏優秀之作。但在此并不多作介紹。 因為 JSVM 和他們定位不同，JSVM不僅僅是一個 Ajax 框架，也并非僅僅為了實現 Ajax 而產生。它作為一個更底層更抽象的 JavaScript 框架，為我們實現類似Ajax應用提供了一個基礎平臺。我曾經拿jsvm1到51js上與許多js愛好者共同討論，其中有兩種比較典型的不同看法是：
JavaScript 需要框架嗎，是不是把簡單的事情復雜化了? 短小精干才是腳本之道。
非要借鑒 JAVA 的架構嗎？是否有更好的解決方案。
??? 對于第一種意見，我認為某種條件下還是有道理的。例如：我僅僅是想打印一句 Hello, world! 直接 alert()就可以了，何必要弄一個 Framework 出來，豈非勞民傷財，小題大做。 確實，對于一些簡單的web應用，js 在整個體系中充當的角色很小，我覺得是可以不用框架的。但對于一個RIA模式的Web應用，尤其是企業級的應用，系統復雜程度和JS代碼規模相當龐大的情況下，沒有框架帶來的后果是可以預見的。對于第二種觀點：贊成框架的必要性，但對jsvm一些“模仿”java的做法抱有懷疑態度。我不能說這種看法不對，也許確實有更好API架構。但是，本人認為這個不是關鍵所在，jsvm提供了對多種語法解析器的支持，有興趣的人完全可以根據自己喜好在jsvm下開發出另外一套API。類C#,類VB的語法都可以實現。
??? 簡單的說，JSVM 根本目的是為了規范瀏覽器端JavaScript腳本開發，更好的實現代碼復用。傳統面向過程型的JavaScript開發方式已經明顯不能滿足大規模軟件開發的需要。大部分跡象表明? 隨著 RIA 的發展，客戶端都將承擔更多的邏輯處理工作，企業級應用的代碼規模和復雜度都是相當大的。有效的代碼組織結構，合理的模塊粒度，低耦合高內聚的設計原則等等如何引入到JavaScript的開發上來？相信當你了解 JSVM2 之后，會有一些答案。
??? 作為一個框架，JSVM要解決的問題不是提供某一種應用的解決方案，而是針對各種場景提供廣泛的支持。另外一個需要說明的是：jsvm2并不是jsvm1的一個升級版，幾乎是在jsvm1上完全重構。且不提供對原jsvm1.x中的類的支持。（當然，原jsvm1.x下的類需要經過做一些小改動即能在jsvm2下正常工作）較jsvm1.x，jsvm2 有了幾處明顯的變化：
性能上有了明顯的提升。
每個類文件擁有獨立的語法域。
幾種常見的web運行模式在Framework中將直接被支持。
編譯引擎支持多語法解析器，并缺省提供了一個名為"jsvm2"的語法解析器。從語法層面提供了一些OO關鍵字的支持，使jsvm下的面向對象的javascript開發更為直觀和方便。
具有更靈活的擴展性。二次開發者可以很方便的擴展其功能。
這些天在為Qomo項目寫“JavaScript面向對象的支持”這組文章。也一直在期待網上購得的那本《JavaScript 權威指南》(第四版)快快到來。
在前公司，有這本書的第二或第三版，也一直將這本書視為經典。但那時并沒有深入的去看它前幾章的概念性敘述，而是把它當成一本手冊來查。現在卻刻意地關注了，因為Qomo的底層是以純理論的OOP為基礎的。
今天這本書終于寄到了，但是一讀之下，大失所望。不知道作者對JavaScript語言的理解能力不夠，還是他對OOP的理解不夠。《JavaScript權威指南》這本書對面向對象的敘述不但不專業，而且還錯誤百出。實在不值一看。
試舉幾例：
× JavaScript沒有正式的類的概念，……，它用構造函數和原型對象模擬了類
事實上，JavaScript的確沒有正式的類的概念，但模擬類的只是構造函數而不是類。因為類是“聲明”，對象是實體。用“實體”去模擬“聲明”原本就說不通。在JScript中，類的檢測是通過對構造函數來進行的，而不是一種基于原型的檢測。
× JavaScript中的實例屬性是那些在對象中用構造函數創建的或初始化的屬性
這個問題出現在所謂的“實例屬性”還有一種與構造函數無關的情況，也就是直接對原型屬性聲明。例如“MyObject.prototype.prop_1 = 'abcd'”，因此上面這種定義是不完整的。
×類屬性與類方法
JavaScript中沒有“類”，因此也沒有類屬性與類方法。只不過構造器(函數)也被對象系統理解為“對象”，因此構造器也可以創建新的屬性和方法。——這只是它作為一個“單獨的對象實例”的特性而已，把這個作為類屬性和類方法，很不合邏輯。
類似這樣的問題非常之多，顯得作者的邏輯很混亂。作者甚至沒有辦法為讀者理清腳本環境與DOM環境的異同，這在第四章關于局部變量、執行環境和作用域等問題的討論中(4.6~4.7節)尤其突出。
因此，我相信沒有多少人能讀明白這本書有關JavaScript中對象系統的描述。此外，這本書將JavaScript、DOM和CSS這幾種不同層次的體系揉到一起來講述，盡管使這本書內容顯得更為豐富而且刺激了購買，然而也使讀者不得不在幾個不同的泥坑中跳來跳去，最終無所適從。
因此作為建議，最好是把這本書當成一本手冊來查閱，而不是當作理論上的經典。隨便說一點，這不是翻譯的過錯，而真的是作者的問題。
出自同一家出版社的《Delphi技術手冊》的翻譯被一些人罵得很慘，但事實上是讀不懂書的人在胡言。——那本書的翻譯得是非常精道的，一些看似拗口的譯文其實很精準，多讀兩遍就懂了。與此相較，這本《JavaScript權威指南》的作者，看起來對“JavaScript的對象系統”就未必深徹地了解和思考過了。
36 讀取圖像屬性
1: <img src=”image1.jpg” name=”myImage”>
2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3:
37 動態加載圖像
1: <script language=”JavaScript”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </script>
38 簡單的圖像替換
1: <script language=”JavaScript”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6: </script>
7: <a href=”myUrl” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src=”image1.jpg” name=”myImage” width=100 height=100 border=0>
39 隨機顯示圖像
1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script>
40 函數實現的圖像替換
1: <script language=”JavaScript”>
2: var source = 0;
3: var replacement = 1;
4: function createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13: </script>
14: <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src=”image1.jpg” width=100 name=”myImage1” border=0>
17: </a>
41 創建幻燈片
1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: function slideShow(imageNumber) {
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src=”image1.jpg” width=100 name=”slideShow”>
42 隨機廣告圖片
1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var urlList = new Array;
8: urlList[0] = “http://some.host/”;
9: urlList[1] = “http://another.host/”;
10: urlList[2] = “http://somewhere.else/”;
11: urlList[3] = “http://right.here/”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14: </script>
例子：
前面的例子中：
return?"<font?color=gray>"+hit+"</font>"
使用了變量和常量，"<font?color=gray>"和"</font>"是文本常量，hit是變量。
加號(+)則將三者加成一個文本："<font?color=gray>100</font>"，如果hit為100的話。
數值常量
????這個很簡單，上過數學課的都應該知道如何表示數字，JScript中沒有任何特別。
123
0
-100
100.123
1E3????????(1000)
都是合法的數字常量
文本常量
????這個用的最多，因為經常要動態的生成HTML文本。常量必須用引號括起來：
"abc"
"123"
"文本常量"
都是合法的文本常量，為什么要用引號？完全沒有編程經驗的人可能會有些疑惑，其實很簡單，
計算機需要把常量和變量區別開。
變量賦值
????a?=?"abc"
變量a的值為"abc"了。為什么比較時要用==，為了和賦值區別開呀！
????b?=?a?+?"123"
變量b的值為"abc123"了。如果常量不加引號如何和變量區別呢？
????b?=?"a"?+?"123"
變量b的值為"a123"
那么如果文本中包含引號如何？比如如何表示：
<input?type=button?value="A?A">
因為按鈕的名稱里有空格，那么必須用雙引號括起來，如何表示這個文本常量？
JScript還可以使用單引號：
'<input?type=button?value="A?A">'
在單引號中就可以直接使用雙引號了。反過來在雙引號括起來的常量里可以直接使用單引號。
"<input?type=button?value='A?A'>"
那么當常量里兩個引號都有該怎么辦？這就需要使用轉義符號反斜杠\
"abc'def\"ghi"
在常量中可以用“\"”來表示一個雙引號。而且還有：
\r\n????????表示回車
\\??????????表示一個反斜杠
function?myname(name){
????if?(name=="小青"){
???????document.write("<input?type=button?value='隱藏小青'?onclick=\"mytext.style.display='none'\">")
????}
????else
???????document.write(name)
}
上面的函數，當輸入name為“小青”時，輸出：
<input?type=button?value='隱藏'?onclick="mytext.style.display='none'">
變量定義
????JScript中可以不預先定義變量就直接使用，但是這樣往往會帶來潛在問題，
所以建議大家使用變量前都先定義好。
????變量有兩種類型，定義在函數內部的為局部變量。
<script>
function?myfunc(){
//變量定義使用var，下面定義了變量a
var?a
//可以一次定義多個變量，用逗號分開
var?i,j,k
//定義的時候還可以給變量賦初值
var?a="acb"
var?a=123,b="ddd"
}
</script>
局部變量只在函數內有效，離開函數該變量就不存在了。
如果定義在函數外則為全局變量：
<script>
//定義一個全局變量a
var?a
</script>
該變量在所有函數內外都將有效，除非函數內定義了一個相同名稱的變量
<script>
//定義全局變量a
var?a=100
function?myfunc(){
var?a="abc"
//函數輸出的是abc，函數內的變量屏蔽了同名全局變量
document.write(a)
}
</script>
如果不使用var來定義，那么變量是全局變量。因此如果你不明確定義變量在使用，
就可能誤用了全局變量，比如：
<script>
//定義全局變量a
var?a="dddd"
...
function?myfunc(){
????//函數內只想使用一個臨時的變量保存返回結果
????a=b+...
????...
????return?a
}
</script>
那么一旦執行過myfunc，則原先的全局變量的值就被破壞了，這就可能引起其實使用
該全局變量的程序出錯！因此強烈建議大家都明確定義變量，而且盡量少使用全局變量。
<!--撕頁開始-->??
<script>??
<!--
//setTimeout("BigWinGecko_DoFSCommand()",0);
var InitBigWinSrc = "image/photo350";//撕頁開始廣告路徑，為形式的而已；
var InitBigWinWidth = "250";
var InitBigWinHeight = "251";
var InitLittleWinSrc = "image/photo350";//撕頁開始廣告路徑，為形式的而已；
var InitLittleWinWidth = "80";
var InitLittleWinHeight = "80";
var InitUseCookieHours = 24;
//不對Netscape4.0老版本提供完整支持。
var NavName = (document.all)? "IE":"Gecko";
var isFirstTime = true;
var RightSuspent = (screen.width>800)?1004:770;
function WriteObj(Name,InitBigWinSrc,InitBigWinWidth,InitBigWinHeight){
var BigWinHtml = "";
if (NavName == "IE"){
??BigWinHtml= "<DIV id=\\"" + Name + "Div\\" style=\\"LEFT:" + (RightSuspent - parseInt(InitBigWinWidth)) + "px; POSITION: absolute;";
??if (typeof(InitScrollIs) == "undefined"){
?? BigWinHtml += "top:0px;";
??}
??else if ((typeof(InitScrollIs) == "boolean"&&InitScrollIs == false)||(InitScrollIs == "false")){
?? BigWinHtml += "top:0px;";
??}
??else{
?? BigWinHtml += "top:expression(document.body.scrollTop+this.style.pixelHeight);";
??}
??if (Name == "LittleWin") BigWinHtml += ";display:none;z-index:100;";
??else BigWinHtml += ";z-index:120;";
??BigWinHtml += "\\">";
??BigWinHtml += "<OBJECT classid=\\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\\" ";
??BigWinHtml += "codebase=\\"http://download.macromedia.com/pub/shockwave/cabs/flashlash.cab#version=6,0,0,0\\" ";
??BigWinHtml += "WIDTH=\\"" + InitBigWinWidth + "\\" HEIGHT=\\"" + InitBigWinHeight + "\\" id=\\"" + Name + NavName + "\\" ALIGN=\\"\\">";
??BigWinHtml += "<PARAM NAME=movie VALUE=\\"" + InitBigWinSrc + "\\"> <PARAM NAME=quality VALUE=high>";
??//BigWinHtml += "<param name=wmode value=transparent>";
??BigWinHtml += "</OBJECT>";
??BigWinHtml += "</Div>";
}
else if (NavName == "Gecko"){
??BigWinHtml= "<DIV id=\\"" + Name + "Div\\" style=\\"LEFT:" + (RightSuspent - parseInt(InitBigWinWidth)) + "px; POSITION: absolute; TOP: 100px";
??if (Name == "LittleWin") BigWinHtml += ";display:none;z-index:100;";
??else BigWinHtml += ";z-index:120;";
??BigWinHtml += "\\">";
??BigWinHtml += "<EMBED src=\\"" + InitBigWinSrc + "\\" quality=high bgcolor=#FFFFFF??WIDTH=\\"" + InitBigWinWidth + "\\" HEIGHT=\\"" + InitBigWinHeight + "\\" name=\\"" + Name + NavName + "\\" ALIGN=\\"\\"";
?? BigWinHtml += "id=\\"" + Name + NavName + "\\" TYPE=\\"application/x-shockwave-flash\\"??loop=\\"false\\" PLUGINSPAGE=\\"http://www.macromedia.com/go/getflashplayer\\">";
?? BigWinHtml += "</EMBED>";
?? BigWinHtml += "</Div>";
??}
??document.write(BigWinHtml);
}
function _CheckCookie(E){
??var Now = new Date();
??var s = String(Now.getYear())+String(Now.getMonth()+1)+String(Now.getDate());
??if (_GetFullScreenCookie(E)==s){
?? return true;
??}
??else {
?? Now.setTime(Now.getTime() + (parseInt(typeof(InitUseCookieHours)=="undefined" ? 24:parseInt(InitUseCookieHours))*60*60*1000));
?? _SetFullScreenCookie(E,s,Now);
?? return false;
??}
}
function _GetFullScreenCookie (name) {
??var args = name + "=";
??var aLength = args.length;
??var cLength = documents.cookie.length;
??var i = 0;
??while (i < cLength) {
?? var j = i + aLength;
?? if (documents.cookie.substring(i, j) == args)
?? return _GetFullScreenCookieVal(j);
?? i = documents.cookie.indexOf(" ", i) + 1;
?? if (i == 0) break;
??}
??return null;
}
function _GetFullScreenCookieVal(offset) {??
??var endstr = documents.cookie.indexOf (";", offset);??
??if (endstr == -1)????
??endstr = documents.cookie.length;??
??return unescape(documents.cookie.substring(offset, endstr));
}
function _SetFullScreenCookie (name, value) {
??var argv = _SetFullScreenCookie.arguments;
??var argc = _SetFullScreenCookie.arguments.length;
??var expires = (argc > 2) ? argv[2] : null;
??var path = (argc > 3) ? argv[3] : null;
??var domain = (argc > 4) ? argv[4] : null;
??var secure = (argc > 5) ? argv[5] : false;
??documents.cookie = name + "=" + escape (value) +
??((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
??((path == null) ? "" : ("; path=" + path)) +
??((domain == null) ? "" : ("; domain=" + domain)) +
??((secure == true) ? "; secure" : "");
}
function BigWinGecko_DoFSCommand(command,args){
var BigWinOBJ = document.getElementById("BigWinDiv");
var LittleWinOBJ = document.getElementById("LittleWinDiv");
BigWinOBJ.style.visibility = "hidden";
if (isFirstTime){
??LittleWinOBJ.style.display = "block";
??isFirstTime = false;
??return;
}
LittleWinOBJ.style.visibility = "visible";
}
function LittleWinGecko_DoFSCommand(command,args){
var BigWinOBJ = document.getElementById("BigWinDiv");
var LittleWinOBJ = document.getElementById("LittleWinDiv");
var PlayWinOBJ = document.getElementById("BigWin"+NavName);
LittleWinOBJ.style.visibility = "hidden";
BigWinOBJ.style.visibility = "visible";
PlayWinOBJ.Play();
}
if (NavName == "IE"){
document.write("<Scr"+"ipt language=\\"javascript\\" For=\\"BigWinIE\\" Event=\\"FSCommand(command,args)\\">\\n");
document.write(" BigWinGecko_DoFSCommand(command,args);\\n");
document.write("</Scr"+"ipt>");
document.write("<Scr"+"ipt language=\\"javascript\\" For=\\"LittleWinIE\\" Event=\\"FSCommand(command,args)\\">\\n");
document.write(" LittleWinGecko_DoFSCommand(command,args);\\n");
document.write("</Scr"+"ipt>");
}
if (InitBigWinSrc&&InitBigWinWidth&&InitBigWinHeight&&InitLittleWinSrc&&InitLittleWinWidth&&InitLittleWinHeight){
WriteObj("BigWin",InitBigWinSrc,InitBigWinWidth,InitBigWinHeight);
WriteObj("LittleWin",InitLittleWinSrc,InitLittleWinWidth,InitLittleWinHeight);
if (_CheckCookie("TurnBook")){
??BigWinGecko_DoFSCommand("turnbook","big");
}
}
LittleWinGecko_DoFSCommand("FSCommand","www");
setTimeout("BigWinGecko_DoFSCommand()",30000);
//-->
</script>
??<!--撕頁結束-->
我想大家都看過各種各樣的滾動（最常用的就是用在新聞的更新上面），一般情況下只要不是圖片，都是用HTML本身就有提供一個很不錯的滾動標記——marquee來完成的（用JS也可以同樣實現這種效果）；當然并不是說圖片就不能那樣做。
以下為marquee的一些基本的參數：
該標記語法格式如下：
<marquee
aligh=left|center|right|top|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height＝n
hspace＝n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop＝n>內容</marquee>
下面解釋一下各參數的含義：
align：是設定活動字幕的位置，除了居左、居中、居右三種位置外，又增加靠上（top）和靠下（bottom）兩種位置。
Bgcolor：用于設定活動字幕的背景顏色，可以使用英文的單詞也可以是十六進制數的。
Direction：用于設定活動字幕的滾動方向是向左（left）、向右（right）、向上（up）、向下（down）。
Behavior：用于設定滾動的方式，主要由三種方式：
behavior="scroll"表示由一端滾動到另一端；
behavior="slide":表示由一端快速滑動到另一端，且不再重復；
behavior="alternate"表示在兩端之間來回滾動。
Height：用于設定滾動字幕的高度。
Width：則設定滾動字幕的寬度。
Hspace和vspace：分別用于設定滾動字幕的左右邊框和上下邊框的寬度。
Scrollamount：用于設定活動字幕的滾動距離。數值越小，滾動的速度就越快。
scrolldelay：用于設定滾動兩次之間的延遲時間，數值越小，間隔就越小。
Loop：用于設定滾動的次數，當loop=-1表示一直滾動下去，直到頁面更新。其中默認情況是向左滾動無限次，字幕高度是文本高度；滾動范圍：水平滾動的寬度是當前位置的寬度；垂直滾動的高度是當前位置的高度。
現在要介紹的是一種新型的滾動，利用JS的方法來做字幕的滾動：向上，在中間停頓一到兩秒（就像經典的這種）：
將以下代碼貼到您要顯示的位置就可以了：
<script>
var marqueeContent=new Array(); //定義一個數組，用來存放顯示內容
marqueeContent[0]='<A href="#" onclick="reinitMarquee()">刷新最新列表</FONT></A>';
marqueeContent[1]='<a href=http://www.blueidea.com/updatelist.asp target=_blank>站點最新更新六十條</a>';
marqueeContent[2]='<A href=http://www.blueidea.com/tech/graph/2003/875.asp target=_blank>羽毛效果制作教程</a>';
marqueeContent[3]='<A href=http://www.blueidea.com/tech/program/2003/831.asp target=_blank>MySQL＆ASP</a>';
marqueeContent[4]='<A href=http://www.blueidea.com/tech/web/2003/874.asp target=_blank>初步了解CSS3</a>';
marqueeContent[5]='<A href=http://www.blueidea.com/tech/graph/2003/864.asp target=_blank>Fireworks MX 2004執行面版操作</a>';
marqueeContent[6]='<A href=http://www.blueidea.com/tech/graph/2003/872.asp target=_blank>Fireworks MX 2004等高漸變填充</a>';
marqueeContent[7]='<A href=http://www.blueidea.com/photo/gallery/2003/873.asp target=_blank>瓶子里的花</a>';
marqueeContent[8]='<A href=http://www.blueidea.com/tech/graph/2003/871.asp target=_blank>Fireworks MX 實現選項卡式效果</a>';
marqueeContent[9]='<A href=http://www.blueidea.com/photo/gallery/2003/870.asp target=_blank>情侶：黑白的愛情空氣</a>';
marqueeContent[10]='<A href=http://www.blueidea.com/tech/graph/2003/866.asp target=_blank>制作 MAC 風格的蘋果標志</a>';
marqueeContent[11]='<A href=http://www.blueidea.com/tech/graph/2003/868.asp target=_blank>蛋殼制作及破殼而出的人物合成</a>';
var marqueeInterval=new Array(); //定義一些常用而且要經常用到的變量
var marqueeId=0;
var marqueeDelay=4000;
var marqueeHeight=16;
//接下來的是定義一些要使用到的函數
Array.prototype.random=function() {
var a=this;
var l=a.length;
for(var i=0;i<l;i++) {
var r=Math.floor(Math.random()*(l-i));
a=a.slice(0,r).concat(a.slice(r+1)).concat(a[r]);
}
return a;
}
function initMarquee() {
marqueeContent=marqueeContent.random();
var str='';
for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId+=2;
if(marqueeContent.length>3)marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function reinitMarquee() {
js_scroll_content.src='scroll_content2.js';
marqueeContent=marqueeContent.random();
var str='';
for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];
marqueeBox.childNodes[(marqueeBox.childNodes.length==1?0:1)].innerHTML=str;
marqueeId=2;
}
function startMarquee() {
var str='';
for(var i=0;(i<3)&&(marqueeId+i<marqueeContent.length);i++) {
str+=(i>0?' ':'')+marqueeContent[marqueeId+i];
}
marqueeId+=3;
if(marqueeId>marqueeContent.length)marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script> 以上已經將網站的這種滾動的做法做了一個大概的介紹。
常在WEB 打印中都需要ScriptX.cab，這里也是一樣，所以原理都是一樣的，這里將要詳細說明的是，如何控制打印的問題。
打印的必須文件有2個：
1：配置文件：setting.js
2：顯示文件：print.js
setting.js 如下：
document.write("<object id=\"factory\" style=\"display:none\" viewastext classid=\"clsid:1663ed61-23eb-11d2-b92f-008048fdd814\" codebase=\"images/events/ScriptX.cab#Version=5,60,0,360\"></object>");
function Printers() {
agree = confirm('確定打印嗎?');
if (agree) {
if (agree)
{
NoPrinter.style.visibility='hidden';
factory.printing.Print();}
else NoPrinter.style.visibility='visible';
?? }
}
? factory.printing.header = ""
? factory.printing.footer = ""
? factory.printing.leftMargin = 0.75
? factory.printing.topMargin = 0.75
? factory.printing.rightMargin = 0.75
? factory.printing.bottomMargin = 0.75
顯示文件print.js 如下：
document.write('<style media="print">@media print { .noprint{display:none} } </style>');
/////////////////////////////////~~控制打印時不顯示按鈕的樣式，在頁面不需要打印的地方只需要引用該樣式即可
document.write('<div id=NoPrinter name=NoPrinter align=right style="visibility:visible" class="noprint"><br> ');
document.write('<input type=button class=button value=關閉 name="bFQ" id="bFQ" onclick=\"javascript\:window.close()\">');
document.write('<input? type="button" value="打印設置" onclick=\"factory.printing.PageSetup()\">');
document.write('<input type="button" value="打印預覽" onclick=\"factory.printing.Preview()\">');
document.write('<input type=button name=button3 value="打印" onclick="Printers()"> </div>');
在使用打印功能時，只要把文件2個文件包含在頁面中放置打印按鈕的地方即可，代碼如下：
?
??<script src="../inc/print/Printer.js"></script>
??<script src="../inc/print/Printers.js"></script>
經常看到許多網站論壇上面快捷鍵提交表單的方法，比較好奇，經研究寫出來了方法
JS CTRL+ENTER 提交<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>
<form action="http://www.webjx.com/index.html" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
Ctrl+Enter提交內容信息
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
accesskey 提交<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
</head>
<body>
<form action="http://www.webjx.com/index.html" method=POST name=form1>
<textarea ></textarea>
<br><input type=submit accessKey="S" value=提交(Alt+s)>
</form>
對于快捷鍵的使用IE：ALT+快捷鍵
通常狀況下，JavaScript作為一種解釋性的腳本，都是從上而下順序執行的，但是JavaScript還允許在其語句中嵌套，也就是這個樣子：
document.write("<script>alert(t);</scr"+"ipt>");
注意：</script>不能寫作</script>，要用字符串連接的形式來表述，否則會有語法錯誤，估計是因為JavaScript遇到</script>就以為腳本結束了。
在這種情況下，正常的腳本和嵌入的腳本的執行順序就需要研究一下了。
?
b.js：[下載]
alert("5");?
a.js：[下載]
alert("4");
document.write("<script src=b.js></scr"+"ipt>");
alert("6");
test.html：[下載]
<script src=a.js></script>
<script>
alert("1");
document.write("<script src=b.js></scr"+"ipt>");
document.write("<script>alert("3")</scr"+"ipt>");
alert("2");
</script>?
?
執行test.html，可以看到打印的順序是：4,6,5,1,3,2,5
還可以做一些相關測試，得出的結論是：
1.同級的不同的代碼塊，代碼塊間的執行順序為從上到下；
2.在代碼中嵌入代碼的情況下，先執行上層代碼塊，再執行子代碼塊；代碼中嵌入代碼是指一個文件引入另一個文件，而不是指所有的通過document.write形式打出的代碼。
一，編寫構造函數
可以使用 new 運算符結合像 Object()、Date() 和 Function() 這樣的預定義的構造函數來創建對象并對其初始化。面向對象的編程其強有力的特征是定義自定義構造函數以創建腳本中使用的自定義對象的能力。創建了自定義的構造函數，這樣就可以創建具有已定義屬性的對象。下面是自定義函數的示例（注意 this 關鍵字的使用）。
function Circle (xPoint, yPoint, radius) {
??? this.x = xPoint;? // 圓心的 x 坐標
??? this.y = yPoint;? // 圓心的 y 坐標
??? this.r = radius;? // 圓的半徑
}
調用 Circle 構造函數時，給出圓心點的值和圓的半徑（所有這些元素是完全定義一個獨特的圓對象所必需的）。結束時 Circle 對象包含三個屬性。下面是如何例示 Circle 對象。
var aCircle = new Circle(5, 11, 99);
二，使用原型來創建對象
在編寫構造函數時，可以使用原型對象（它本身是所有構造函數的一個屬性）的屬性來創建繼承屬性和共享方法。原型屬性和方法將按引用復制給類中的每個對象，因此它們都具有相同的值。可以在一個對象中更改原型屬性的值，新的值將覆蓋默認值，但僅在該實例中有效。屬于這個類的其他對象不受此更改的影響。下面給出了使用自定義構造函數的示例，Circle（注意 this 關鍵字的使用）。
Circle.prototype.pi = Math.PI;
function ACirclesArea () {
? return this.pi * this.r * this.r; // 計算圓面積
}
Circle.prototype.area = ACirclesArea; // 計算圓面積的函數現在是 Circle Prototype 對象的一個方法
var a = ACircle.area();???????? // 此為如何在 Circle 對象上調用面積函數
使用這個原則，可以給預定義的構造函數（都具有原型對象）定義附加屬性。例如，如果想要能夠刪除字符串的前后空格（與 VBScript 的 Trim 函數類似），就可以給 String 原型對象創建自己的方法。
// 增加一個名為 trim 的函數作為
// String 構造函數的原型對象的一個方法。
String.prototype.trim = function() {
? return this.replace(/(^\s*)|(\s*$)/g, "");?? // 用正則表達式將前后空格
}
var s = "??? leading and trailing spaces??? "; // 有空格的字符串
window.alert(s + " (" + s.length + ")");
s = s.trim();????????????????????????????????? // 刪除前后空格
window.alert(s + " (" + s.length + ")");
三，特別對象、屬性和方法
Error 對象：保存有關錯誤的信息。
var newErrorObj = new Error()
var newErrorObj = new Error(
? number
)
var newErrorObj = new Error(
? number,
? description
)
Error 對象的構造函數語法有以下部分：
參數：－number。與錯誤相聯的數字值。如果省略則為零。
????? －description。描述錯誤的簡短字符串。如果省略則為空字符串。
說明：每當產生運行時錯誤，就產生 Error 對象的一個實例以描述錯誤。該實例有兩個固有屬性保存錯誤的描述（description 屬性）和錯誤號（number 屬性）。
錯誤號是 32 位的值。高 16 位字是設備代碼，而低字是實際的錯誤代碼。
Error 對象也可以用如上所示的語法顯式創建，或用 throw 語句拋掉。在兩種情況下，都可以添加選擇的任何屬性，以拓展 Error 對象的能力。
典型地，在 try...catch 語句中創建的局部變量引用隱式創建的 Error 對象。因此，可以按選擇的任何方法使用錯誤號和描述。
下面的例子演示了隱式創建 Error 對象的使用：
try {
? x = y;???????????????????????????? // 產生錯誤。
} catch(e) {???????????????????????? // 創建局部變量 e。
? response.write(e)????????????????? // 打印 "[object Error]".
? response.write(e.number & 0xFFFF)? // 打印 5009。
? response.write(e.description)????? // 打印 "'y' is undefined".
}
Function 對象：創建新的函數。
語法 1
function functionName([argname1 [, ...[, argnameN]]]) {
?? //body
}
語法 2
functionName = new Function( [argname1, [... argnameN,]] body );
參數：－functionName。必選項。最新創建函數的名稱
????? －argname1...argnameN。可選項。函數接收的參數列表。
????? －body。可選項。包含調用該函數時被執行的 JScript 代碼塊的字符串。
說明：函數 JScript 中的基本數據類型。語法 1 創建在必要時由 JScript 轉換為 Function 對象的函數值。JScript 在調用函數時將用語法 2 創建的函數轉換為 Fnction 對象。
語法 1 是 JScript 中創建函數的基本方法。語法 2 是用于顯式創建函數對象的另一方法。
例如，要創建將傳遞給它的兩個參數相加的函數，可以用兩種方法中的任一種完成：
例子 1
function add(x, y) {
? return(x + y);??????????? // 執行加法并返回結果。
}
例子 2
var add = new Function("x", "y", "return(x+y)");
在兩種情況下，都可以用如下代碼行調用該函數：
add(2, 3);
注意?? 在調用函數時，請確保包含了括號和必需的參數。調用函數時不用括號導致返回函數的文本而不是函數執行的結果。
Object 對象：提供所有 JScript 對象通用的功能。
obj = new Object([value])
參數：－obj。必選項。要賦值為 Object 對象的變量名。
????? －value。可選項。任意一種 JScript 基本數據類型。（Number、Boolean、或 String。）如果 value 為一個對象，返回不作改動的該對象。如果 value 為 null、undefined，或者沒有給出，則產生沒有內容的對象。
說明：Object 對象被包含在所有其它 JScript 對象中；在所有其它對象中它的方法和屬性都是可用的。在用戶定義的對象中可以重定義這些方法，并在適當的時候通過 JScript 調用。toString 方法是經常被重定義的 Object 方法的例子。
arguments 屬性：為當前執行的 function 對象返回一個arguments 對象。
function.arguments
function 參數是當前執行函數的名稱，可以省略。
說明：通過 arguments 屬性，函數可以處理可變數量的參數。 arguments 對象的 length 屬性包含了傳遞給函數的參數的數目。對于arguments 對象所包含的單個參數，其訪問方法與數組中所包含的參數的訪問方法相同。
示例：下面的例子說明了 arguments 屬性的用法：
function ArgTest() {
?? var i, s, numargs = arguments.length;
?? s = numargs;?
?? if (numargs < 2)
???? s += " argument was passed to ArgTest. It was ";
?? else
???? s += " arguments were passed to ArgTest. They were " ;
?? for (i = 0; i < numargs; i++) {
???? s += arguments[i] + " ";
?? }
?? return(s);
}
callee 屬性：返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。
[function.]arguments.callee
可選項 function 參數是當前正在執行的 Function 對象的名稱。
說明：callee 屬性是 arguments 對象的一個成員，僅當相關函數正在執行時才可用。
callee 屬性的初始值就是正被執行的 Function 對象。這允許匿名的遞歸函數。
示例：
function factorial(n) {
?if (n <= 0)
?? return 1;
?else
? return n * arguments.callee(n - 1)
}
print(factorial(3));
要求：版本5.5或以上。
caller 屬性：返回一個對函數的引用，該函數調用了當前函數。
functionName.caller
functionName 對象是所執行函數的名稱。
說明：對于函數來說，caller 屬性只有在函數執行時才有定義。 如果函數是由 JScript 程序的頂層調用的，那么 caller 包含的就是 null 。
如果在字符串上下文中使用 caller 屬性，那么結果和 functionName.toString 一樣，也就是說，顯示的是函數的反編譯文本。
下面的例子說明了 caller 屬性的用法：
function CallLevel() {
? if (CallLevel.caller == null)
??? return("CallLevel was called from the top level.");
? else
??? return("CallLevel was called by another function.");
}
constructor 屬性：表示創建對象的函數。
object.constructor
必需的 object是對象或函數的名稱。
說明：constructor 屬性是所有具有 prototype 的對象的成員。它們包括除 Global 和 Math 對象以外的所有 JScript 固有對象。constructor 屬性保存了對構造特定對象實例的函數的引用。
例如：
x = new String("Hi");
if (x.constructor == String) // 進行處理（條件為真）。
或
function MyFunc {
?? // 函數體。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 進行處理（條件為真）。
description 屬性：返回或設置與特定錯誤相聯系的描述字符串。
object.description [= stringExpression]
description 屬性的語法組成部分如下：
參數：－object。必選項。Error 對象的任意實例。
????? －stringExpression。可選項。包含錯誤描述的字符串表達式。
說明：description 屬性包含與特定錯誤相聯系的錯誤信息字符串。使用包含在這個中的值，來警告用戶發生了一個不能或不想處理的錯誤。
prototype 屬性：返回對象類型原型的引用。
objectName.prototype
objectName 參數是對象的名稱。
說明：用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。
例如，要為 Array 對象添加返回數組中最大元素值的方法。 要完成這一點，聲明該函數，將它加入 Array.prototype， 并使用它。
function array_max( ) {
? var i, max = this[0];
? for (i = 1; i < this.length; i++) {
??? if (max < this[i])
????? max = this[i];
? }
? return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );
該代碼執行后，y 保存數組 x 中的最大值，或說 6。
所有 JScript 固有對象都有只讀的 prototype 屬性。可以象該例中那樣為原型添加功能，但該對象不能被賦予不同的原型。然而，用戶定義的對象可以被賦給新的原型。
apply 方法：應用某一對象的一個方法，用另一個對象替換當前對象。
apply([thisObj[,argArray]])
參數：－thisObj。可選項。將被用作當前對象的對象。
????? －argArray。可選項。將被傳遞給該函數的參數數組。
說明：如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。
要求：版本5.5或以上。
call 方法：調用一個對象的一個方法，以另一個對象替換當前對象。
call([thisObj[,arg1[, arg2[,?? [,.argN]]]]])
參數：－thisObj。可選項。將被用作當前對象的對象。
????? －arg1, arg2,? , argN。可選項。將被傳遞方法參數序列。
說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。
要求：版本5.5或以上。
concat 方法 (Array)：返回一個新數組，這個新數組是由兩個或更多數組組合而成的。
array1.concat([item1[, item2[, . . . [, itemN]]]])
參數：－array1。必選項。其他所有數組要進行連接的 Array 對象。
????? －item1,. . ., itemN。可選項。要連接到 array1 末尾的其他項目。
說明：concat 方法返回一個 Array 對象，其中包含了 array1 和提供的任意其他項目的連接。
要加的項目（item1 … itemN）會按照從左到右的順序添加到數組。如果某一項為數組，那么添加其內容到 array1 的末尾。如果該項目不是數組，就將其作為單個的數組元素添加到數組的末尾。
以下為從源數組復制元素到結果數組：
對于從正被連接到新數組的數組中復制的對象參數，復制后仍然指向相同的對象。不論新數組和源數組中哪一個有改變，都將引起另一個的改變。
對于連接到新數組的數值或字符串，只復制其值。一個數組中值有改變并不影響另一個數組中的值。
示例：下面這個例子說明了使用數組時 concat 方法的用法:
function ConcatArrayDemo() {
? var a, b, c, d;
? a = new Array(1,2,3);
? b = "JScript";
? c = new Array(42, "VBScript);
? d = a.concat(b, c);? // 返回數組 [1, 2, 3, "JScript", 42, "VBScript"]
? return(d);
}
escape 方法：對 String 對象編碼以便它們能在所有計算機上可讀。
escape(charString)
必選項 charstring 參數是要編碼的任意 String 對象或文字。
說明：escape 方法返回一個包含了 charstring 內容的字符串值（ Unicode 格式）。所有空格、標點、重音符號以及其他非 ASCII 字符都用 %xx 編碼代替，其中 xx 等于表示該字符的十六進制數。例如，空格返回的是 "%20" 。
字符值大于 255 的以 %uxxxx 格式存儲。
注意：escape 方法不能夠用來對統一資源標示碼 (URI) 進行編碼。對其編碼應使用 encodeURI 和encodeURIComponent 方法。
unescape 方法：解碼用 escape 方法進行了編碼的 String 對象。
unescape(charstring)
必選項 charstring 參數是要解碼的 String 對象。
說明：unescape 方法返回一個包含 charstring 內容的字符串值。所有以 %xx 十六進制形式編碼的字符都用 ASCII 字符集中等價的字符代替。
以 %uxxxx 格式（Unicode 字符）編碼的字符用十六進制編碼 xxxx 的 Unicode 字符代替。
注意：unescape 方法不能用于解碼統一資源標識碼 (URI)。解該碼可使用 decodeURI 和 decodeURIComponent 方法。
eval 方法：檢查 JScript 代碼并執行。
eval(codeString)
必選項 codestring 參數是包含有效 JScript 代碼的字符串值。這個字符串將由 JScript 分析器進行分析和執行。
說明：eval 函數允許 JScript 源代碼的動態執行。例如,下面的代碼創建了一個包含 Date 對象的新變量 mydate ：
eval("var mydate = new Date();");
傳遞給 eval 方法的代碼執行時的上下文和調用 eval 方法的一樣.
encodeURI 方法：將文本字符串編碼為一個有效的統一資源標識符 (URI)。
encodeURI(URIString)
必選的 URIString 參數代表一個已編碼的 URI。
說明：encodeURI 方法返回一個編碼的 URI。如果您將編碼結果傳遞給 decodeURI，那么將返回初始的字符串。encodeURI 方法不會對下列字符進行編碼：":"、"/"、";" 和 "?"。請使用 encodeURIComponent 方法對這些字符進行編碼。
要求：版本5.5或以上。
decodeURI 方法：返回一個已編碼的統一資源標識符 (URI) 的非編碼形式。
decodeURI(URIstring)
必要的 URIstring 參數代表一個已編碼 URI 的值。
說明：使用 decodeURI 方法代替已經過時的 unescape 方法。
decodeURI 方法返回一個字符串值。
如果 URIString 無效，那么將產生一個 URIError。
要求：版本5.5或以上。
encodeURIComponent 方法：將文本字符串編碼為一個統一資源標識符 (URI) 的一個有效組件。
encodeURIComponent(encodedURIString)
必選的 encodedURIString 參數代表一個已編碼的 URI 組件。
說明：encodeURIComponent 方法返回一個已編碼的 URI。如果您將編碼結果傳遞給 decodeURIComponent，那么將返回初始的字符串。因為 encodeURIComponent 方法對所有的字符編碼，請注意，如果該字符串代表一個路徑，例如 /folder1/folder2/default.html，其中的斜杠也將被編碼。這樣一來，當該編碼結果被作為請求發送到 web 服務器時將是無效的。如果字符串中包含不止一個 URI 組件，請使用 encodeURI 方法進行編碼。
要求：版本5.5或以上。
decodeURIComponent 方法：返回統一資源標識符 (URI) 的一個已編碼組件的非編碼形式。
decodeURIComponent(encodedURIString)
必選的 encodedURIString 參數代表一個已編碼的 URI 組件。
說明：URIComponent 是一個完整的 URI 的一部分。
如果 encodedURIString 無效，將產生一個 URIError。
要求：版本5.5或以上。
for...in 語句：對應于一個對象的每個，或一個數組的每個元素，執行一個或多個語句。
for (variable in [object | array])
?? statements
參數：－variable。必選項。一個變量，它可以是 object 的任一屬性或 array 的任一元素。
????? －object, array。可選項。要在其上遍歷的對象或數組。
????? －statement。可選項。相對于 object 的每個屬性或 array 的每個元素，都要被執行的一個或多個語句。可以是復合語句。
說明：在循環的每次迭代前，variable 被賦予 object 的下一個屬性或 array 的下一個元素。然后可以在循環內的任一語句中使用它，就好像正在使用 object 的該屬性或 array 的該元素一樣。
當在一個對象上迭代時，沒有辦法決定或控制把對象的成員賦給 variable 的次序。在數組內將按元素的次序執行迭代，也就是，0、1、2、......
示例：下面示例說明了 for ... in 語句的用法，它把一個對象用作一個聯合數組：
function ForInDemo() {
? var a, key, s = "";???????????????????????????????????? // 創建某些變量
? a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}? // 初始化對象
? for (key in a)?? {????????????????????????????????????? // 迭代屬性
???? s += a[key] + "
";
? }
? return(s);
}
join 方法：返回字符串值，其中包含了連接到一起的數組的所有元素，元素由指定的分隔符分隔開來。
arrayObj.join(separator)
參數：－arrayObj。必選項。Array 對象。
????? －separator。必選項。是一個 String 對象，作為最終的 String 對象中對數組元素之間的分隔符。如果省略了這個參數，那么數組元素之間就用一個逗號來分隔。
說明：如果數組中有元素沒有定義或者為 null，將其作為空字符串處理。
示例：下面這個例子說明了 join 方法的用法。
function JoinDemo() {
? var a, b;
? a = new Array(0,1,2,3,4);
? b = a.join("-");
? return(b);
}
pop 方法：移除數組中的最后一個元素并返回該元素。
arrayObj.pop( )
必選的 arrayObj 引用是一個 Array 對象。
說明：如果該數組為空，那么將返回 undefined。
要求：版本5.5或以上。
push 方法：將新元素添加到一個數組中，并返回數組的新長度值。
arrayObj.push([item1 [item2 [. . . [itemN ]]]])
參數：－arrayObj。必選項。一個 Array 對象。
????? －item, item2,. . . itemN。可選項。該 Array 的新元素。
說明：push 方法將以新元素出現的順序添加這些元素。如果參數之一為數組，那么該數組將作為單個元素添加到數組中。如果要合并兩個或多個數組中的元素，請使用 concat 方法。
要求：版本5.5或以上。
reverse 方法：返回一個元素順序被反轉的 Array 對象。
arrayObj.reverse( )
必選項 arrayObj 參數為 Array 對象。
說明：reverse 方法將一個 Array 對象中的元素位置進行反轉。在執行過程中，這個方法并不會創建一個新的 Array 對象。
如果數組是不連續的，reverse 方法將在數組中創建元素以便填充數組中的間隔。這樣所創建的全部元素的值都是 undefined。
示例：下面這個例子說明了 reverse 方法的用法：
function ReverseDemo() {
? var a, l;????????????????? // 聲明變量。
? a = new Array(0,1,2,3,4);? // 創建數組并賦值。
? l = a.reverse();?????????? // 反轉數組的內容。
? return(l);???????????????? // 返回結果數組。
}
slice 方法 (Array)：返回一個數組的一段。
arrayObj.slice(start, [end])
參數：－arrayObj。必選項。一個 Array 對象。
????? －start。必選項。arrayObj 中所指定的部分的開始元素是從零開始計算的下標。
????? －end。可選項。arrayObj 中所指定的部分的結束元素是從零開始計算的下標。
說明：slice 方法返回一個 Array 對象，其中包含了 arrayObj 的指定部分。
slice 方法一直復制到 end 所指定的元素，但是不包括該元素。如果 start 為負，將它作為 length + start處理，此處 length 為數組的長度。如果 end 為負，就將它作為 length + end 處理，此處 length 為數組的長度。如果省略 end ，那么 slice 方法將一直復制到 arrayObj 的結尾。如果 end 出現在 start 之前，不復制任何元素到新數組中。
示例：在下面這個例子中，除了最后一個元素之外，myArray 中所有的元素都被復制到 newArray 中：
newArray = myArray.slice(0, -1)
shift 方法：移除數組中的第一個元素并返回該元素。
arrayObj.shift( )
必選的 arrayObj 引用是一個 Array 對象。
說明：shift 方法可移除數組中的第一個元素并返回該元素。
要求：版本5.5或以上。
unshift 方法：將指定的元素插入數組開始位置并返回該數組。
arrayObj.unshift([item1[, item2 [, . . . [, itemN]]]])
參數：－arrayObj。必選項。一個 Array 對象。
????? －item1, item2,. . .,itemN。可選項。將插入到該 Array 開始部分的元素。
說明：unshift 方法將這些元素插入到一個數組的開始部分，所以這些元素將以參數序列中的次序出現在數組中。
要求：版本5.5或以上。
splice 方法：從一個數組中移除一個或多個元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
參數：－arrayObj。必選項。一個 Array 對象。
????? －start。必選項。指定從數組中移除元素的開始位置，這個位置是從 0 開始計算的。
????? －deleteCount。必選項。要移除的元素的個數。
????? －item1, item2,. . .,itemN。必選項。要在所移除元素的位置上插入的新元素。
說明：splice 方法可以移除從 start 位置開始的指定個數的元素并插入新元素，從而修改 arrayObj。返回值是一個由所移除的元素組成的新 Array 對象。
要求：版本5.5或以上。
當頁面上的控件同名且多個的時候,從程序的嚴密角度出發,需要判斷長度,而且有長度和沒長度是兩種引用方法.
oEle= document.all.aaa ;//這里有一個aaa的對象,但我們不知道它現在長度是多少,所以沒辦法對它操作.因此,我們要先做判斷長度的過程.如下:
if(oEle.length){}else{};
在兩種情況下,花括號里面的內容寫法也是不一樣的:
if(oEle.length){
for(var i = 0 ;i<oEle.length;i++){
oEle[i].value..
}
}
else{
oEle.value..
};
但是這樣寫是不是太復雜了點?而且當花括號里面的代碼比較多的時候,我們要寫兩遍代碼,暈了先~
還好有
document.getElementsByName()
這個方法.它對一個和多個的處理是一樣的,我們可以用:
oEle = document.getElementsByName('aaa')
來引用
當oEle只有1個的時候,那么就是oEle[0],有多個的時候,用下標法oEle[i]循環獲取,是不是很簡單?
值得一提的是它對Name和ID的同樣有效的. (它只能應用到document對象)
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio">
<INPUT name=radio1 value=0 type="radio" CHECKED>
</div>
document.getElementsByName("radio1").item(0).value 結果是 1
但是.相對應的,還有另一個方法,可以應用的對象會更廣一點:
getElementsByTagName
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio" id=myRadio1>
<INPUT name=radio1 value=0 type="radio" id=myRadio2 CHECKED >
</div>
radiodiv.getElementsByTagName("input").item(0).value 結果是 1
,比如我知道了一個<DIV ID='aaa'><input name=input1 value=1 type=radio ><input name=input1 value=2 type=radio>......</DIV>我要取DIV里面的所有input,這樣寫就可以了:
aaa.getElementsByTagName('INPUT')
這樣就有效的可以和別的DIV(比如說有個叫bbb的DIV,里面的也是一樣的input)相區別.
同getElementsByTagName相對應,
還有一個document.body.all.tags()
能用這個方法的對象比getElementsByTagName要小得多.但比getElementsByName要多.
到這里我們還要提一下getElementById
它也是只有document對象才能使用,而且返回的是數組的第一個元素,呵呵,它的方法名都寫明了是getElement而不是getElements
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio" id=myRadio1 >
<INPUT name=radio1 value=0 type="radio" id=myRadio2 value="myVal2" CHECKED >
</div>
document.getElementById("myRadio2").value 結果是 myVal2
支持實時監控sliderbar的數據，允許有callback回調的函數，有示例
1、可自定樣式SetStyle()
2、帶有onSroll功能
3、有setSldPoint（設置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己設置sliderBar的最大值（不是sliderbar的長度，而是值）
6、自定義微調功能（setIncrement(10))，默認為5；
代碼有點亂，接口不能清晰的看出來，不好意思了，先用著吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> never Slider Bar </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="javascript Slider Bar">
<META NAME="Description" CONTENT="javascript Slider Bar">
<style>
body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }
.sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }
.sliderBar { width:20px; background-color:#666666; border:1px solid #333; }
.sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }
.r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }
.r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }
.r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }
.g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }
.g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }
.g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }
.b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }
.b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }
.b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }
</style>
</HEAD>
<BODY>
<p>
<div id="s1"></div>
<p>
<div id="d1">r</div>
<p>
<div id="s2"></div>
<p>
<div id="d2">g</div>
<p>
<div id="s3"></div>
<p>
<div id="d3">b</div>
<p>
<div id="color" class="sliderObj"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*===============================================================
//
//??? Module???? : never SliderBar
//??? Script by? : never-online, blueDestiny
//??? Updated??? : 2006-5-12
//??? Copyright? : Miracle technology all reserved
//??? Website??? : http://www.never-online.net
//??? Email????? : blueDestiny@126.com
//??? Blog?????? : http://blog.csdn.net/blueDestiny
//??? Comment??? : if you using never SliderBar please hold
//???????????????? these copyrights.
//
//??? compatible : only for IE
//??? History??? : none
//
================================================================*/
function neverSliderBar(id,callback) { with(this) {
?this.$??????????? = document.getElementById || document.all;
?this.sldID??????? = id;
?this.sldObj?????? = null;
?this.instance???? = this;
?this.barStyle???? = "sliderBar";
?this.objStyle???? = "sliderObj";
?this.btnStyle???? = "sliderBtn";
?this.sldBar?????? = null;
?this.sldBtnL????? = null;
?this.sldBtnR????? = null;
?this.sldPoint???? = null;
?this.sldMoved???? = false;
?this.sldClicked?? = false;
?this.callback???? = callback;
?this.sldObjOffset = null;
?this.sldBarOffset = null;
?this.callbackArg? = Array.prototype.slice.call(arguments,2);
?this.sldMax?????? = 100;
?this.sldIncrement = 5;
?this.sldPoint???? = 0;
?//instance.init.call(this,id);
}};
neverSliderBar.prototype.setObjStyle=function(classname) { with(this)
{
?objStyle=classname;
}};
neverSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this)
{
?sldMax=maxpoint;
}};
neverSliderBar.prototype.setBtnStyle=function(classname) { with(this)
{
?btnStyle=classname;
}};
neverSliderBar.prototype.setBarStyle=function(classname) { with(this)
{
?barStyle=classname;
}};
neverSliderBar.prototype.setStyle=function() { with(this)
{
?if (arguments[0]) barStyle=arguments[0];
?if (arguments[1]) btnStyle=arguments[1];
?if (arguments[2]) objStyle=arguments[2];
}};
neverSliderBar.prototype.setIncrement=function(increment) { with(this)
{
?if (isNaN(parseInt(increment))) return;
?sldIncrement = parseInt(increment);
}};
neverSliderBar.prototype.getSldPoint=function() { with(this)
{
?sldBarOffset = Offset(sldBar);
?sldObjOffset = Offset(sldObj);
?var sldObjwidth = sldObjOffset.w-sldBarOffset.w;
?var sldBarwidth = sldBarOffset.l-sldObjOffset.l;
?var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax);
?return sldLocation;
}};
neverSliderBar.prototype.setSldPoint=function(point) { with(this)
{
?if (isNaN(parseInt(point))) return;
?if (point<0) point=0;
?if (point>sldMax) point=sldMax;
?var sldObjwidth? = sldObjOffset.w-sldBarOffset.w;
?var sldBarwidth? = sldBarOffset.l-sldObjOffset.l;
?sldPoint? = parseInt(point);
?var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1;
?sldBar.style.left = p;
?instance.getSldPoint();
}};
neverSliderBar.prototype.init=function() { with(this)
{
?if ($(sldID + '__BtnL') && $(sldID + '__BtnR') && $(sldID + '__Bar')) {
? sldBtnL = $(sldID + '__BtnL');
? sldBar? = $(sldID + '__Bar');
? sldBtnR = $(sldID + '__BtnR');
?}
?else {
? sldBtnL??? = document.createElement("BUTTON");
? sldBtnL.id = sldID + '__BtnL';
? sldBar???? = document.createElement("DIV");
? sldBar.id? = sldID + '__Bar';
? sldBtnR??? = document.createElement("BUTTON");
? sldBtnR.id = sldID + '__BtnR';
? document.body.appendChild(sldBtnL);
? document.body.appendChild(sldBar);
? document.body.appendChild(sldBtnR);
?}
?//-------------------------------------------------------------------
?sldObj?????????? = $(sldID);
?sldObj.className = objStyle;
?sldBarOffset???? = Offset(sldBar);
?sldObjOffset???? = Offset(sldObj);
?//-------------------------------------------------------------------
?sldBtnL.value????????? = "<<";
?sldBtnL.className????? = btnStyle;
?sldBtnL.style.position = "absolute";
?//-------------------------------------------------------------------
?sldBtnR.value????????? = ">";
?sldBtnR.className????? = btnStyle;
?sldBtnR.style.position = "absolute";
?//-------------------------------------------------------------------
?sldBar.className?????? = barStyle;
?sldBar.style.position? = "absolute";
?sldBar.style.top?????? = sldObjOffset.t;
?sldBar.style.height??? = sldObjOffset.h;
?sldBar.style.left????? = sldObjOffset.l;
?instance.fixed();
?//-------------------------------------------------------------------
?sldObj.onmousedown = function() {instance.handleObjBefore()};
?sldObj.onmouseup?? = function() {instance.handleObjAfter()};
?//-------------------------------------------------------------------
?sldBtnL.onmousedown = function() {instance.handleBtnClick('l')};
?sldBtnR.onmousedown = function() {instance.handleBtnClick('r')};
?sldBtnL.onfocus???? = function() {this.blur()};
?sldBtnR.onfocus???? = function() {this.blur()};
?//-------------------------------------------------------------------
?sldBar.onmousedown = function() {instance.handleSldDragStart()};
?sldBar.onmousemove = function() {instance.handleSldDrag()};
?sldBar.onmouseup?? = function() {instance.handleSldDragEnd()};
}};
neverSliderBar.prototype.fixed=function() { with(this)
{
?sldBarOffset = Offset(sldBar);
?sldObjOffset = Offset(sldObj);
?var sldBtnLOffset????? = Offset(sldBtnL);
?sldBtnL.style.left???? = sldObjOffset.l-sldBtnLOffset.w;
?sldBtnL.style.top????? = sldObjOffset.t;
?sldBtnL.style.height?? = sldObjOffset.h;
?//-------------------------------------------------------------------
?sldBtnR.style.left???? = sldObjOffset.l+sldObjOffset.w;
?sldBtnR.style.top????? = sldObjOffset.t;
?sldBtnR.style.height?? = sldObjOffset.h;
?//-------------------------------------------------------------------
?sldBar.style.top?????? = sldObjOffset.t;
?sldBar.style.height??? = sldObjOffset.h;
?//-------------------------------------------------------------------
?var p = sldBarOffset.l;
?if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l;
?var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
?if (p > w) sldBar.style.left = w;
?window.setTimeout(function(){instance.fixed()},10)
}};
neverSliderBar.prototype.applyArg=function() { with(this)
{
?if (typeof(callback)=='string') callback=eval(callback);
?if (typeof(callback)=='function') {
? var callbackArguments = [];
? for(var i=0; i<callbackArg.length; i++)
? callbackArguments[i] = callbackArg[i];
? callbackArguments.push(instance.getSldPoint());
? callback.apply(this,callbackArguments);
?} else { return; }
}};
neverSliderBar.prototype.handleObjBefore=function() { with(this)
{
}};
neverSliderBar.prototype.handleObjAfter=function() { with(this)
{
}};
neverSliderBar.prototype.handleBtnClick=function(direction) { with(this)
{
?direction = direction.toLowerCase();
?sldPoint=instance.getSldPoint();
?if(direction == 'l') {
? instance.setSldPoint(this.sldPoint-sldIncrement);
?}
?else if (direction=='r') {
? instance.setSldPoint(this.sldPoint+sldIncrement);
?}
?else {
? return alert('not valid argument ' +direction);
?}
?instance.applyArg();
?instance.getSldPoint();
}};
neverSliderBar.prototype.handleSldDragStart=function() { with(this)
{
?sldBar.setCapture();
?sldMoved = true;
?sldBar.onlosecapture = function(){sldMoved=false;};
?sldPoint = event.clientX-sldBarOffset.l;
}};
neverSliderBar.prototype.handleSldDrag=function() { with(this)
{
?if(!sldMoved) return;
?var p = event.clientX-sldPoint;
?if (p <= sldObjOffset.l) {
? sldBar.style.left = sldObjOffset.l;
?}
?else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {
? sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
?}
?else sldBar.style.left = p;
?instance.applyArg();
?instance.getSldPoint();
}};
neverSliderBar.prototype.handleSldDragEnd=function() { with(this)
{
?sldBar.releaseCapture();
?sldMoved=false;
}};
function Offset(e) {
?var t = e.offsetTop;
?var l = e.offsetLeft;
?var w = e.offsetWidth;
?var h = e.offsetHeight;
?while(e=e.offsetParent) {
? t+=e.offsetTop;
? l+=e.offsetLeft;
?}
?return { t:t, l:l, w:w, h:h }
}
var r=new neverSliderBar("s1",callback,' <b>neverSliderBar</b> ');
r.sldMax=255;
r.setBtnStyle("r-sliderBtn");
r.setBarStyle("r-sliderBar");
r.setObjStyle("r-sliderObj");
r.init();
r.setSldPoint(100);
var g=new neverSliderBar("s2",callback,' <b>neverSliderBar</b> ');
g.sldMax=255;
g.setStyle("g-sliderBar","g-sliderBtn","g-sliderObj");
g.init();
g.setSldPoint(150);
var b=new neverSliderBar("s3",callback,' <b>neverSliderBar</b> ');
b.sldMax=255;
b.setBtnStyle("b-sliderBtn");
b.setBarStyle("b-sliderBar");
b.setObjStyle("b-sliderObj");
b.setIncrement(10);
b.init();
b.setSldPoint("200");
callback(' <b>neverSliderBar</b> ');
function callback(s) {
?var $=document.getElementById;
?var color_r=r.getSldPoint();
?var color_g=g.getSldPoint();
?var color_b=b.getSldPoint();
?$("color").style.backgroundColor="rgb(" +color_r+ "," +color_g+ "," +color_b+ ")";
?$("d1").innerHTML=s+color_r;
?$("d2").innerHTML=s+color_g;
?$("d3").innerHTML=s+color_b;
}
//-->
</SCRIPT>
<p>
power by never-online, blueDestiny, http://www.QingGui.com
</p>
</BODY>
</HTML>
?
?本人收集客戶端開發經典javascript方法，希望對大家有所幫助。
???? 1、字符串替代方法。
function?String_Replace(srcString,findString,replaceString){
??return?String_ReplaceB(srcString,?findString,?replaceString,?0);
?}
?function?String_ReplaceB(expression,?find,?replacewith,?start)?{
??var?index?=?expression.indexOf(find,?start);
??if?(index?==?-1)
???return?expression;?
??var?findLen?=?find.length;
??var?newexp?=?"";
??newexp?=?expression.substring(0,?index)+(replacewith)+(expression.substring(index+findLen));
??return?String_ReplaceB(newexp,?find,?replacewith,?index+1+findLen);
?}
???? 2、取字符串長度方法
function?String_GetLength(str){
??var?i,rt=0;
??for(i=0;i<str.length;i++)
??{
???rt++;
???if(str.charCodeAt(i)>256)rt++;
??}
??return?rt;
?}
???? 3、求浮點數方法
function?getFloat(num)
?{
??var?num?=?parseFloat(num);
??if(isNaN(num))num?=?0;
??return?num;
?}
???? 4、求整數方法（用到浮點數取法）
?function?getInt(num)?
?{?
??return?parseInt(getFloat(num));?
?}
???? 5、判斷文本域對象是否惟空
function?at_checkBlank(obj,caption)?{
??if(String_Replace(obj.value,"?","")=="")
??{
???obj.select();
???alert(caption+"不能為空?");
???obj.focus();
???return?false;
??}
??return?true;
?}
???? 6、兩個Select對象(llist,rlist)互相操作
var?llist?=?fmObj.AssignedUser;//左邊已經選中項目
var?rlist?=?fmObj.WaitedUser;//右邊未被選中的項目
//雙擊右邊select中的項目
function?AssignUser()?{
?if(rlist.selectedIndex?<?0?||?rlist.selectedIndex?>?rlist.options.length)return;
?var?i;
?llist.options.length++;
?llist.options[llist.options.length-1].value?=?rlist.options[rlist.selectedIndex].value;
?llist.options[llist.options.length-1].text?=?rlist.options[rlist.selectedIndex].text;
?for(i?=?rlist.selectedIndex;?i?<?rlist.options.length?-?1;?i?++)?{
??rlist.options[i].value?=?rlist.options[i+1].value;
??rlist.options[i].text?=?rlist.options[i+1].text;
?}
?rlist.length?--;
}
//把右邊選中的加入左邊
function?AssignRight_AssignSelected(){
?for(var?i?=?rlist.length?-?1;?i?>=?0;?i?--)?{
??if(rlist.options[i].selected)?{
???llist.options.length++;
???llist.options[llist.options.length-1].value?=?rlist.options[i].value;
???llist.options[llist.options.length-1].text?=?rlist.options[i].text;
???for(var?j?=?i;?j?<?rlist.options.length?-?1;?j?++)?{
????rlist.options[j].value?=?rlist.options[j+1].value;
????rlist.options[j].text?=?rlist.options[j+1].text;
???}
???rlist.length?--;
??}
?}
}
//把右邊所有加入左邊
function?AssignRight_AssignAll(){
?for(var?i?=?rlist.length?-?1;?i?>=?0;?i?--)?{
??llist.options.length++;
??llist.options[llist.options.length-1].value?=?rlist.options[i].value;
??llist.options[llist.options.length-1].text?=?rlist.options[i].text;
??for(var?j?=?i;?j?<?rlist.options.length?-?1;?j?++)?{
???rlist.options[j].value?=?rlist.options[j+1].value;
???rlist.options[j].text?=?rlist.options[j+1].text;
??}
??rlist.length?--;
?}
}
//左邊select項目雙擊
function?DenyUser()?{
?if(llist.selectedIndex?<?0?||?llist.selectedIndex?>?llist.options.length)return;
?var?i;
?rlist.options.length++;
?rlist.options[rlist.options.length-1].value?=?llist.options[llist.selectedIndex].value;
?rlist.options[rlist.options.length-1].text?=?llist.options[llist.selectedIndex].text;
?for(i?=?llist.selectedIndex;?i?<?llist.options.length?-?1;?i?++)?{
??llist.options[i].value?=?llist.options[i+1].value;
??llist.options[i].text?=?llist.options[i+1].text;
?}
?llist.length?--;
}
//把左邊選中的項目加入右邊
function?AssignRight_DenySelected()?{
?for(var?i?=?llist.length?-?1;?i?>=?0;?i?--)?{
??if(llist.options[i].selected)?{
???rlist.options.length++;
???rlist.options[rlist.options.length-1].value?=?llist.options[i].value;
???rlist.options[rlist.options.length-1].text?=?llist.options[i].text;
???for(j?=?llist.selectedIndex;?j?<?llist.options.length?-?1;?j?++)?{
????llist.options[j].value?=?llist.options[j+1].value;
????llist.options[j].text?=?llist.options[j+1].text;
???}
???llist.length?--;
??}
?}
}
//左邊所有項目加入右邊
function?AssignRight_DenyAll()?{
?for(var?i?=?llist.length?-?1;?i?>=?0;?i?--)?{
??rlist.options.length++;
??rlist.options[rlist.options.length-1].value?=?llist.options[i].value;
??rlist.options[rlist.options.length-1].text?=?llist.options[i].text;
??for(j?=?i;?j?<?llist.options.length?-?1;?j?++)?{
???llist.options[j].value?=?llist.options[j+1].value;
???llist.options[j].text?=?llist.options[j+1].text;
??}
??llist.length?--;
?}
}
<script language="javascript">
<!--
var s="close";
function window.onunload(){
??
?? if(s=="fresh")
????? if(window.screenLeft>10000){alert('關閉');}else{alert('刷新');}
?? else
????? alert('關閉');
}
function window.onbeforeunload(){
?? s="fresh";
}
-->
</script>
我的測試環境是2000sever ie6.0+sp4 MYIE1.31 (成功通過測試）
關閉窗口的途徑常用4種：
1.雙擊左上角圖標
2.直接雙擊標題欄（MYIE）
3.單擊右上角關閉按鈕
4.alt+f4
1.新建一個vs2003的web工程,取名為XMLTest
2.將工程目錄下的WebForm1.aspx中內容全部刪除，只留下頂部的一條語句：
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="XMLTest.WebForm1" %>
3.修改WebForm1.aspx.cs中內容，在Page_Load中加入:
??? XmlDocument doc=new XmlDocument();
??? String xmlfile=string.Empty;
??? xmlfile=Context.Request.PhysicalApplicationPath+(Request.QueryString["sel"].ToString()=="xml"?"\\hello.xml":"\\hello.xsl");
??? doc.Load(xmlfile);
??? Response.Write(doc.InnerXml);
4.在工程根目錄下新增test.htm,并設為工程首頁:
<html>
<head>
? <title></title>
</head>
<body>
? <div id="resTree"></div>
? <FONT face="宋體"></FONT><input type="button" value="執行" onclick="GetXml()"><BR>
? <script language="JScript">
? var srcTree,xsltTree,xt;
? var http_request = false;
??
? function GetXml()
? {???
?? srcTree = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
??? srcTree.async=false;
??? xsltTree= new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
??? xsltTree.async = false;
??? xt=new ActiveXObject("MSXML2.XSLTemplate");
?? resTree.innerHTML="";
??? makeRequest("WebForm1.aspx?sel=xml",GetXml_CB);
? }
???
??? function makeRequest(url,callback) {
??????? http_request = false;
??????? if (window.XMLHttpRequest) { // Mozilla, Safari,...
??????????? http_request = new XMLHttpRequest();
??????????? if (http_request.overrideMimeType) {
??????????????? http_request.overrideMimeType('text/xml');
??????????? }
??????? } else if (window.ActiveXObject) { // IE
??????????? try {
??????????????? http_request = new ActiveXObject("Msxml2.XMLHTTP");
??????????? } catch (e) {
??????????????? try {
??????????????????? http_request = new ActiveXObject("Microsoft.XMLHTTP");
??????????????? } catch (e) {}
??????????? }
??????? }
??????? if (!http_request) {
??????????? alert('Giving up :( Cannot create an XMLHTTP instance');
??????????? return false;
??????? }
??????? http_request.onreadystatechange = callback;
??????? http_request.open('GET', url, true);
??????? http_request.send(null);
??? }
??? function GetXml_CB() {
??????? if (http_request.readyState == 4) {
??????????? if (http_request.status == 200) {???
??? srcTree.loadXML(http_request.responseText);
??? makeRequest("WebForm1.aspx?sel=xsl",GetXsl_CB);
??????????? } else {
??????????????? alert('There was a problem with the request.');
??????????? }
??????? }
??? }
???
??? function GetXsl_CB(){
?????? if (http_request.readyState == 4) {
???????? if (http_request.status == 200) {
?????? xsltTree.loadXML(http_request.responseText);
?????? xt.stylesheet=xsltTree;
?????? var proc=xt.createProcessor();
?????? proc.input=srcTree;
?????? proc.transform();
?????? resTree.innerHTML=proc.output;
??????????? } else {
??????????????? alert('There was a problem with the request.');
??????????? }
??????? }
?
??? }
??? function makeRequest(url,callback) {
???? http_request = false;
???? if (window.XMLHttpRequest) { // Mozilla, Safari,...
??????????? http_request = new XMLHttpRequest();
??????????? if (http_request.overrideMimeType) {
??????????????? http_request.overrideMimeType('text/xml');
??????????? }
??????? } else if (window.ActiveXObject) { // IE
??????????? try {
??????????????? http_request = new ActiveXObject("Msxml2.XMLHTTP");
??????????? } catch (e) {
??????????????? try {
??????????????????? http_request = new ActiveXObject("Microsoft.XMLHTTP");
??????????????? } catch (e) {}
??????????? }
??????? }
??????? if (!http_request) {
??????????? alert('Giving up :( Cannot create an XMLHTTP instance');
??????????? return false;
??????? }
??????? http_request.onreadystatechange = callback;
??????? http_request.open('GET', url, true);
??????? http_request.send(null);
??? }
? </script>
</body>
</html>
5.運行工程，看看效果吧!
hello.xml(注意:我的xml文檔中并沒有指定對應的xsl解析文件名)
<?xml version='1.0'?>
<breakfast-menu>
? <food>
??? <name>Belgian Waffles</name>
??? <price>$5.95</price>
??? <description>Two of our famous Belgian Waffles
????? with plenty of real maple syrup.</description>
??? <calories>650</calories>
? </food>
? <food>
??? <name>Strawberry Belgian Waffles</name>
??? <price>$7.95</price>
??? <description>Light Belgian waffles covered with
???? strawberries and whipped cream.</description>
??? <calories>900</calories>
? </food>
? <food>
??? <name>Berry-Berry Belgian Waffles</name>
??? <price>$8.95</price>
??? <description>Light Belgian waffles covered
????? with an assortment of fresh berries
????? and whipped cream.</description>
??? <calories>900</calories>
? </food>
? <food>
??? <name>French Toast</name>
??? <price>$4.50</price>
??? <description>Thick slices made from our homemade
???? sourdough bread.</description>
??? <calories>600</calories>
? </food>
? <food>
??? <name>Homestyle Breakfast</name>
??? <price>$6.95</price>
??? <description>Two eggs, bacon or sausage, toast,
????? and our ever-popular hash browns.</description>
??? <calories>950</calories>
? </food>
</breakfast-menu>
hello.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"? xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
? <xsl:template match="/breakfast-menu">
??????? <xsl:for-each select="food">
????????? <DIV STYLE="background-color:teal; color:white; padding:4px">
??????????? <SPAN STYLE="font-weight:bold; color:white"><xsl:value-of select="name"/></SPAN>
??????????? 至 <xsl:value-of select="price"/>
????????? </DIV>
????????? <DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
??????????? <xsl:value-of select="description"/>
??????????? <SPAN STYLE="font-style:italic">
????????????? <xsl:value-of select="calories"/> 嘿嘿
??????????? </SPAN>
????????? </DIV>
??????? </xsl:for-each>
? </xsl:template>
</xsl:stylesheet>
xml文檔只有純粹的數據，如果需要顯示到html頁面中的話，一般需要使用定制的xsl文檔來解析，或者手工通過js來讀取xml中的值顯示到html中的dom樹中，當使用xsl文檔來解析時，相應的xml文檔中必須指定對應的xsl文檔才能正常顯示，但當有些程序動態輸出xml文檔時，并沒有指定相應的xsl文檔，這時就必須通過其它途徑來加載相應的xsl文檔來解析，當然，在服務器端輸出xml文檔時，通過一些xml api也可以實現，我這兒描述的是通過js來實現的一種方式。用這種方式的話，就拋開了服務器平臺的限制，服務器端只需要輸出相應的xml文檔(.net/j2ee都可以)，并且將對應的xsl文檔輸出給客戶端（可以輸出流或直接在客戶端加載xsl文檔)。
這里有幾個需要注意的地方，我們一般是使用Msxml2.Document組件來加載xml文檔的，但當動態使用xsl解析xml文檔時，必須使用Msxml2.FreeThreadedDOMDocument這種自由線程的組件，同時使用MSXML2.XSLTemplate模板組件來加載xml,xsl數據，通過MSXML2.XSLTemplate的transform方法，就可以動態的用xsl來解析xml數據了,另外，IE5開始，系統默認的xml組件是msxml2，如果需要使用更新的msxml組件需要安裝更新的msxml組件包，并指定新的名稱，例如Msxml2.FreeThreadedDOMDocument.4.0，現在最新的msxml組件是6.0beta，可在M$網站下載。
在提到上述的概念之前，首先想說說javascript中函數的隱含參數：arguments
Arguments
該對象代表正在執行的函數和調用它的函數的參數。
[function.]arguments[n]
參數function ：選項。當前正在執行的 Function 對象的名字。 n ：選項。要傳遞給 Function 對象的從0開始的參數值索引。
說明
Arguments是進行函數調用時，除了指定的參數外，還另外創建的一個隱藏對象。Arguments是一個類似數組但不是數組的對象，說它類似數組是因為其具有數組一樣的訪問性質及方式，可以由arguments[n]來訪問對應的單個參數的值，并擁有數組長度屬性length。還有就是arguments對象存儲的是實際傳遞給函數的參數，而不局限于函數聲明所定義的參數列表，而且不能顯式創建 arguments 對象。arguments 對象只有函數開始時才可用。下邊例子詳細說明了這些性質:
//arguments 對象的用法。
function ArgTest(a, b){
?? var i, s = "The ArgTest function expected ";
?? var numargs = arguments.length;???? // 獲取被傳遞參數的數值。
?? var expargs = ArgTest.length;?????? // 獲取期望參數的數值。
?? if (expargs < 2)
????? s += expargs + " argument. ";
?? else
????? s += expargs + " arguments. ";
?? if (numargs < 2)
????? s += numargs + " was passed.";
?? else
????? s += numargs + " were passed.";
?? s += "\n\n"
?? for (i =0 ; i < numargs; i++){????? // 獲取參數內容。
?? s += "? Arg " + i + " = " + arguments[i] + "\n";
?? }
?? return(s);????????????????????????? // 返回參數列表。
}
在此添加了一個說明arguments不是數組(Array類)的代碼:
Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
??? alert(arguments.selfvalue);
}
運行代碼你會發現第一個alert顯示1，這表示數組對象擁有selfvalue屬性，值為1，而當你調用函數testAguments時，你會發現顯示的是“undefined”，說明了不是arguments的屬性，即arguments并不是一個數組對象。
?caller
? 返回一個對函數的引用，該函數調用了當前函數。
? functionName.caller
? functionName 對象是所執行函數的名稱。
說明
對于函數來說，caller 屬性只有在函數執行時才有定義。如果函數是由頂層調用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 屬性，那么結果和 functionName.toString 一樣，也就是說，顯示的是函數的反編譯文本。
下面的例子說明了 caller 屬性的用法：
// caller demo {
function callerDemo() {
??? if (callerDemo.caller) {
??????? var a= callerDemo.caller.toString();
??????? alert(a);
??? } else {
??????? alert("this is a top function");
??? }
}
function handleCaller() {
??? callerDemo();
}
callee
??? 返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。
[function.]arguments.callee
可選項 function 參數是當前正在執行的 Function 對象的名稱。
說明
callee 屬性的初始值就是正被執行的 Function 對象。
callee 屬性是 arguments 對象的一個成員，它表示對函數對象本身的引用，這有利于匿名
函數的遞歸或者保證函數的封裝性，例如下邊示例的遞歸計算1到n的自然數之和。而該屬性
僅當相關函數正在執行時才可用。還有需要注意的是callee擁有length屬性，這個屬性有時候
用于驗證還是比較好的。arguments.length是實參長度，arguments.callee.length是
形參長度，由此可以判斷調用時形參長度是否和實參長度一致。
示例
//callee可以打印其本身
function calleeDemo() {
??? alert(arguments.callee);
}
//用于驗證參數
function calleeLengthDemo(arg1, arg2) {
??? if (arguments.length==arguments.callee.length) {
??????? window.alert("驗證形參和實參長度正確！");
??????? return;
??? } else {
??????? alert("實參長度：" +arguments.length);
??????? alert("形參長度： " +arguments.callee.length);
??? }
}
//遞歸計算
var sum = function(n){
? if (n <= 0)???????????????????????
? return 1;
? else
??? return n ＋arguments.callee(n - 1)
}
比較一般的遞歸函數：
var sum = function(n){
??? if (1==n) return 1;
else return n + sum (n-1);
調用時：alert(sum(100));
其中函數內部包含了對sum自身的引用，函數名僅僅是一個變量名，在函數內部調用sum即相當于調用
一個全局變量，不能很好的體現出是調用自身，這時使用callee會是一個比較好的方法。
apply and call
?? 它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數方式有所區別：
??? apply(thisArg,argArray);
??? call(thisArg[,arg1,arg2…] ]);
即所有函數內部的this指針都會被賦值為thisArg，這可實現將函數作為另外一個對象的方法運行的目的
apply的說明
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。
如果沒有提供 argArray 和 thisArg任何一個參數，那么 Global 對象將被用作 thisArg，
并且無法被傳遞任何參數。
call的說明
call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisArg指定的新對象。
如果沒有提供 thisArg參數，那么 Global 對象被用作 thisArg
相關技巧：
應用call和apply還有一個技巧在里面，就是用call和apply應用另一個函數（類）以后，當前的
函數（類）就具備了另一個函數（類）的方法或者是屬性，這也可以稱之為“繼承”。看下面示例:
// 繼承的演示
function base() {
??? this.member = " dnnsun_Member";
??? this.method = function() {
??????? window.alert(this.member);
??? }
}
function extend() {
??? base.call(this);
??? window.alert(member);
??? window.alert(this.method);
}
上面的例子可以看出，通過call之后，extend可以繼承到base的方法和屬性。
?
順便提一下，在javascript框架prototype里就使用apply來創建一個定義類的模式，
其實現代碼如下：
var Class = {
? create: function() {
??? return function() {
????? this.initialize.apply(this, arguments);
??? }
? }
}
解析：從代碼看,該對象僅包含一個方法：Create，其返回一個函數，即類。但這也同時是類的
構造函數，其中調用initialize，而這個方法是在類創建時定義的初始化函數。通過如此途徑，
就可以實現prototype中的類創建模式
示例：
var vehicle=Class.create();
vehicle.prototype={
??? initialize:function(type){
??????? this.type=type;
??? }
??? showSelf:function(){
??????? alert("this vehicle is "+ this.type);
??? }
}
var moto=new vehicle("Moto");
moto.showSelf();