久久亚洲精品成人777大小说,亚洲中文字幕久久精品无码APP,77777亚洲午夜久久多喷

javascript中函數的深入理解

劉錚 — Thu, 17 Jan 2008 02:05:00 GMT

unction funcName(){
//函數體
}
//等價于
var funcName=function(){
//函數體
}

　　但前面一種方式創建的是有名函數，而后面是創建了一個無名函數，只是讓一個變量指向了這個無名函數。在使用上僅有一點區別，就是：對于有名函數，它可以出現在調用之后再定義；而對于無名函數，它必須是在調用之前就已經定義。例如：
script language="JavaScript" type="text/javascript"＞
＜!--
func();
var func=function(){
alert(1)
}
//--＞
＜/script＞

　　這段語句將產生func未定義的錯誤，而：

＜script language="JavaScript" type="text/javascript"＞
＜!--
func();
function func(){
alert(1)
}
//--＞
＜/script＞

　　則能夠正確執行，下面的語句也能正確執行：

＜script language="JavaScript" type="text/javascript"＞
＜!--
func();
var someFunc=function func(){
alert(1)
}
//--＞
＜/script＞

認識函數對象（Function Object）

　　可以用function關鍵字定義一個函數，并為每個函數指定一個函數名，通過函數名來進行調用。在JavaScript解釋執行時，函數都是被維護為一個對象，這就是要介紹的函數對象（Function Object）。

　　函數對象與其他用戶所定義的對象有著本質的區別，這一類對象被稱之為內部對象，例如日期對象（Date）、數組對象（Array）、字符串對象（String）都屬于內部對象。這些內置對象的構造器是由JavaScript本身所定義的：通過執行new Array()這樣的語句返回一個對象，JavaScript內部有一套機制來初始化返回的對象，而不是由用戶來指定對象的構造方式。

JavaScript為函數對象定義了兩個方法：apply和call，它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數的方式有所區別：

Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);

在javascript的繼承中可以使用其方法

例如：
function ClassA(sColor){
    this.color=sColor;
    this.sayColor=function()
    {
    alert(this.color);
    }
}
function ClassB(sColor,sName){
    ClassA.call(this,sColor);
    或者
    ClassA.apply(this, new Array(sColor));
    this.name=sName;
    this.sayName=function()
    {
    alert(name);
    }
}

劉錚 2008-01-17 10:05 發表評論

在IE中使用Javasript對xml的解析

劉錚 — Sat, 17 Nov 2007 06:43:00 GMT

以下是萬用的生成處理xml的

ActiveXObject

function loadXMLDoc(dname)

{

var xmlDoc;

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('Your browser cannot handle this script');

}

xmlDoc.async=false;

xmlDoc.load(dname);

return(xmlDoc);

}





然后就可以使用xmlDoc了



例如：



xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel

for (i=0;i
{

newel=xmlDoc.createElement('edition');

x[i].appendChild(newel);

}



進行添加刪除節點屬性等

劉錚 2007-11-17 14:43 發表評論

prototype對ajax的支持

劉錚 — Fri, 16 Nov 2007 02:51:00 GMT

`Ajax` 對象

上面提到的共通方法非常好，但是面對它吧，它們不是最高級的那類東西。它們是嗎？你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。

我很肯定你對prototype.js感興趣的原因很可能是由于它的AJAX能力。所以讓我們解釋當你需要完成AJAX邏輯的時候，這個包如何讓它更容易。

Ajax 對象是一個預定義對象，由這個包創建，為了封裝和簡化編寫AJAX 功能涉及的狡猾的代碼。這個對象包含一系列的封裝AJAX邏輯的類。我們來看看它們的一些。

1.4.1. 使用 `Ajax.Request`類

如果你不使用任何的幫助程序包，你很可能編寫了整個大量的代碼來創建XMLHttpRequest對象并且異步的跟蹤它的進程，然后解析出響應然后處理它。當你不需要支持多于一種類型的瀏覽器時你會感到非常的幸運。

為了支持 AJAX 功能。這個包定義了 Ajax.Request 類。

假如你有一個應用程序可以通過url http://yoursever/app/get_sales?empID=1234&year=1998與服務器通信。它返回下面這樣的XML 響應。

用 Ajax.Request對象和服務器通信并且得到這段XML是非常簡單的。下面的例子演示了它是如何完成的。

你看到傳入 Ajax.Request構造方法的第二個對象了嗎？參數{method: 'get', parameters: pars, onComplete: showResponse} 表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名為 method 值為 'get'的屬性，另一個屬性名為 parameters 包含HTTP請求的查詢字符串，和一個onComplete 屬性/方法包含函數showResponse。

還有一些其它的屬性可以在這個對象里面定義和設置，如 asynchronous，可以為true 或 false 來決定AJAX對服務器的調用是否是異步的（默認值是 true）。

這個參數定義AJAX調用的選項。在我們的例子中，在第一個參數通過HTTP GET命令請求那個url，傳入了變量 pars包含的查詢字符串， Ajax.Request對象在它完成接收響應的時候將調用showResponse 方法。

也許你知道， XMLHttpRequest在HTTP請求期間將報告進度情況。這個進度被描述為四個不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對象在任何階段調用自定義方法，Complete 是最常用的一個。想調用自定義的方法只需要簡單的在請求的選項參數中的名為 onXXXXX 屬性/方法中提供自定義的方法對象。就像我們例子中的 onComplete 。你傳入的方法將會被用一個參數調用，這個參數是 XMLHttpRequest 對象自己。你將會用這個對象去得到返回的數據并且或許檢查包含有在這次調用中的HTTP結果代碼的 status 屬性。

還有另外兩個有用的選項用來處理結果。我們可以在onSuccess 選項處傳入一個方法，當AJAX無誤的執行完后調用，相反的，也可以在onFailure選項處傳入一個方法，當服務器端出現錯誤時調用。正如onXXXXX 選項傳入的方法一樣，這兩個在被調用的時候也傳入一個帶有AJAX請求的XMLHttpRequest對象。

我們的例子沒有用任何有趣的方式處理這個 XML響應，我們只是把這段XML放進了一個文本域里面。對這個響應的一個典型的應用很可能就是找到其中的想要的信息，然后更新頁面中的某些元素，或者甚至可能做某些XSLT轉換而在頁面中產生一些HTML。

更完全的解釋，請參照 Ajax.Request 參考和 Ajax選項參考。

1.4.2. 使用 `Ajax.Updater` 類

如果你的服務器的另一端返回的信息已經是HTML了，那么使用這個程序包中 Ajax.Updater 類將使你的生活變得更加得容易。用它你只需提供哪一個元素需要被AJAX請求返回的HTML填充就可以了，例子比我寫說明的更清楚。

你可以看到，這段代碼比前面的例子更加簡潔，不包括 onComplete 方法，但是在構造方法中傳入了一個元素id。我們來稍稍修改一下代碼來描述如何在客戶端處理服務器段錯誤成為可能。

我們將加入更多的選項，指定處理錯誤的一個方法。這個是用 onFailure 選項來完成的。

我們也指定了一個 placeholder 只有在成功請求之后才會被填充。為了完成這個目的我們修改了第一個參數從一個簡單的元素id到一個帶有兩個屬性的對象， success (一切OK的時候被用到) 和 failure (有地方出問題的時候被用到) 在下面的例子中沒有用到failure屬性，而僅僅在 onFailure 處使用了 reportError 方法。

如果你的服務器邏輯是返回JavaScript 代碼而不是單純的 HTML 標記， Ajax.Updater對象可以執行那段JavaScript代碼。為了使這個對象對待響應為JavaScript，你只需在最后參數的對象構造方法中簡單加入evalScripts: true屬性。

劉錚 2007-11-16 10:51 發表評論

關于頁面兩個列表的數據傳輸的js算法

劉錚 — Tue, 13 Nov 2007 12:03:00 GMT

頁面設計如下：




 Add >


 < Remove





對應的js如下（這里的js是使用的prototype的js方法）

Security = Class.create();

Security.prototype =
{

addRole: function()
{
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(availableRolesList, rolesList);
},

removeRole: function()
{
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(rolesList, availableRolesList);
},

moveOption: function(source, target)
{
  var lastInsert = null;
  for (var i = source.options.length - 1; i >= 0; i--)
  {
   if (source.options[i].selected)
   {
    var option = source.removeChild(source.options[i]);
    target.insertBefore(option, lastInsert);
    lastInsert = option;
   }
  }
},
}

var secure = null;

function initSecurity()
{
secure = new Security();
secure.setup();
}

Event.observe(window, "load", initSecurity, false);

劉錚 2007-11-13 20:03 發表評論

javascript的基本概念

劉錚 — Tue, 30 Oct 2007 04:01:00 GMT

javascript 中對類型的轉化

1.轉換成字符串
使用toString()的方法
2.轉換成數字
使用parseInt和parsefloat的方法

NaN表示是不是數字（not a number）這種情況發生在類型轉化失敗時候，并且NaN和自身比較不相等。
isNaN是判斷是否是數字。

typeof運算需要一個參數，即要檢查的參數或變量。
比如t變量是null或引用類型，typeof返回object

javascript中的switch語句

switch（expression）
{
    case value: statement
    break;
    case value: statement
    break;
}

如果函數無返回值，那么可以調用沒有參數的 return運算符隨時退出函數。
如果函數沒有明確的返回值，或調用了沒有參數的return語句，那么他真正返回的值是undefined

Array對象聲明數組
toString()方法
返回字符串，用逗號將他們連接起來
join(“”)方法，選擇特定的符號連接字符串。

string的split方法可以將string轉化為array

javascript中的object類

javascript中所有的類都是繼承object類，很重要的屬性就是prototype--對該對象的對象原型的引用，返回對象object的實例 ,
可以使用prototype為任何已有的類定義新的方法

javascript中的array類
shift（）方法是刪除第一個字符串
unshift（“”）方法是在數組的第一個位置上添加新元素，其他的向后摞
array中還可以使用pop和push方法，把array當作棧來使用。

javascript中的date類用來表示時間
var date=new Date()
date.getTime()

劉錚 2007-10-30 12:01 發表評論

javascript中定義類和對象最好的方法

劉錚 — Mon, 29 Oct 2007 09:59:00 GMT

劉錚 2007-10-29 17:59 發表評論

轉貼javascript心得（二）

劉錚 — Mon, 15 Oct 2007 09:34:00 GMT

1，不要認為Struts已經過時了，也不要盲目的去追隨JSF以及更新的MVC框架，在目前Struts仍舊是最為優秀的MVC框架，尤其是后來與Spring、Hibernate（或者Ibatis）的結合，使得Struts的應用得到了進一步的發展，也許你認為Webwork2、SpringMVC或者JSF更為優秀和實用，那么也沒有關系，其實只要對你或你的公司適用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作嗎，如果不知道，勸你還是看看這方面的知識吧，typeof返回的是對象的類型，例如string、number、object等等，而instanceof判斷的是一個對象是否是某個類的實例，例如：
var arr=new Array();
var type=typeof(arr);//返回object
var flag=arr instanceof Array;//返回true
var flag2=arr instanceof Object;//返回true;
在實際使用過程中，你會發現instanceof是更為強大的，當然了許多時候typeof用起來很方便，但是對于復雜的場合typeof就不太適用了，尤其是對于自定義對象以及對象之間有著復雜的繼承關系時，使用instanceof可以方便的對這些進行判斷。

3，雖然你可能知道javascript中typeof的用法，但是如果你不能做對下面的題，說明你對typeof的理解還是不夠的，例如：
var a;
var rs=typeof(a);//請問rs的值是什么？
（A）object （B）variable （C）undefined (D) string （E）null （F）以上答案全不正確
如果你選擇A還算對JS有一些了解，如果選擇B則基本上是亂猜的，如果選擇D什么也說明不了，如果選擇E則說明你對于Java和Javascript有些東西還沒有分清楚，選擇F也是不正確的。答案是C，記住在Javascript之中，如果一個變量沒有初始化，那么該變量的類型為undefined。

4，也許你一直在抱怨Javascript之中沒有列表、哈西表以及堆棧、隊列等數據結構，如果真的在抱怨，那么也不是你的錯，畢竟包括我自己在內，我們對JS的了解太少了，其實在JS之中，數組對象自身完全支持上面的那些數據結構，例如：
var list=new Array();//列表
list[0]="a";
list[100]="b";
var map=new Array();//哈西表
map["001"]="a";
map["username"]="zhangsan";
var stack=new Array();//堆棧，即后進先出
stack.push("a");
stack.pop();
var queue=new Array();//隊列，即先進先出
queue.unshift("a");
queue.shift();
可見JS是非常強大的，關鍵是我們知道的太少了，關于Javascript對于數組的操作，你也可以參考《Javascript對數組的操作》。

5，作為一個web開發人員，我們不能指望美工在完成漂亮的效果圖之后，還要為我們將圖切分，最后生成html文件后再給我們，然后我們對這些html文件，再修改轉換為jsp、asp或者php文件。我一直認為效果圖的切分應該或者最好由我們程序員自己來做，因為美工做的效果圖實際上是要應用到我們的產品或者項目中的，而具體的產品和項目，對效果圖中哪些部分是需要輸入文字的，哪些地方是需要背景的，哪些地方是需要可以自動伸縮的，而哪些地方又是必須保證大小的，是有很嚴格的要求的，尤其是我們的產品或項目中如果使用了類似sitemesh等的模板技術，那么切圖的工作就更要由我們自己來做了。這樣并不是說美工不需要懂得html、css等技術，也不是說美工切出的圖，會不符合我們的要求，我們知道，一張效果圖，可以有n種切法，但是要能夠滿足實際的需求，往往只有一種最合適的切法，而這個切法一般來說美工是不太清楚的，開發人員也是不清楚的，只有既是開發人員，又懂得美工切圖的人，才能夠找到最為合適的切分方法，而這樣的人才是非常奇缺的！

6，不要過于癡迷Ajax技術，也不要過于追捧web2.0這個時髦的詞匯，并不是說什么東西粘上ajax或者web2.0，就能夠火起來或者對我們的實際發展有利的，如果你是做公網網站的，那么要注意，不合適的ajax使用，會使得網站被搜索引擎收錄的信息大幅度減少，但是ajax或者Flex2等技術對于用戶體驗而言，還是相當不錯的，因此是否使用ajax等技術，一要看對你們的解決方案宣傳是否有作用，另外一點就是要看，它是否真正的改進了我們的應用。

7，對于ajax的post提交方式，可能你有些問題要問，例如post的方式是不是只要在open時指定method就可以了，為什么我將大數據放到url后面，而沒有被完全傳遞過去，為什么我后臺使用類似jsp中的request.getParamter方法接收不到數據，我們通過一個例子看一下ajax發送/接受大數據的方式：

1）send.jsp:（我舉的例子使用的是Javascript開源框架JsJava的ajax類庫，該類庫對IE和Firefox等的XMLHttpRequest等對象進行了易用性的封裝，不像prototype.js默認對傳遞的數據進行urlencode編碼）

var ajaxRequest=new AjaxRequest();
ajaxRequest.setRequestMethod("post");
ajaxRequest.setRequestURL("ajaxresponse.jsp");
ajaxRequest.setAsync(true);
ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);
ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
ajaxRequest.send("content=這是一篇幾千字的文檔...在此省略");

要注意設置發送方式為post，設置頭信息的內容類型為application/x-www-form-urlencoded，charset是否設置要看內容的編碼情況，另外大數據就放到send之中，記住大數據不是放在url的參數之中的。

2）receive.jsp

    InputStream stream=request.getInputStream();
    InputStreamReader isr=new InputStreamReader(stream);
    BufferedReader br=new BufferedReader(isr);
    String str=br.readLine();
    System.out.println(str);
    br.close();

要知道，對于ajax post方式提交的數據，在服務器端如果是jsp不是簡單使用getParameter就能取得到的，需要從輸入流中去取，這和附件上傳有些類似的地方。當然要注意編碼和解碼的問題。

8，我們在界面中經常會通過setTimeout方法來實現定時或者異步操作，例如：
setTimeout(myfunc,2000);//兩秒后執行myfunc函數
但是要注意setTimeout方法并不能阻止后面js代碼邏輯的執行，例如：

上面的代碼中，document.write("wait...");邏輯并不會等到3秒后才執行，而是立即執行的，其實這一點可能大部分開發人員都知道，但是如果不注意，就很容易犯下面的錯誤，如下面代碼所示：
var ajax2HasExecuted=false;
var ajaxRequest1;
function ajax1Func(){
    if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
   }
   var text=ajaxRequest1.getResponseText();
   ...
}
var ajaxRequest2;
function ajax2Func(){
   var text=ajaxRequest2.getResponseText();
   ...
   ajax2HasExecuted=true;
}
上面的代碼是一個頁面中同時發送了兩個ajax異步請求，分別有兩個對應的接收操作，而業務邏輯要求，這兩個操作是要有先后順序的，其中第一個接收操作，需要等待第二個接收操作完成之后，才能進行處理，于是第一個操作中就采用setTimeout的方式，本意是在執行第一個操作的開始的地方，先判斷第二個操作是否已經執行完畢，如果沒有執行完畢，則等待200毫秒后，重新執行第二個操作，然后由于setTimeout并不能組織后續的邏輯繼續執行，所以實際上不管第二個操作是否完成，第一個操作都會一直往下執行下去，從而導致業務上的錯誤。解決方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：
if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
      return;
   }

9，window.open和window.showModalDialog方法相信你已經用到過許多次了，但是總是出現這樣或那樣的問題，問題主要是以下幾個方面：
1）showModalDialog這個函數名經常被寫錯，例如經常被寫成showModelDialog，使得不能執行打開窗口的操作。
2）控制打開窗口的屬性，例如尺寸、滾動條、菜單、狀態欄等，是我們經常會碰到的情況，但是我們經常會將這兩種打開方式的屬性名稱以及屬性之間的分隔符混用，使得屬性執行不正確，例如我舉下面的例子，要求彈出一個寬200高300的窗口，你看哪些方式是對的？
（A） window.open("about:blank","","width=200,height=300");
（B） window.open("about:blank","","width:200,height:300");
（C） window.open("about:blank","","width=200;height=300");
（D） window.open("about:blank","","width:200;height:300");
（E） window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");
（F） window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");
（G） window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");
再多的選項就不寫了，正確答案是A和E，通過上面的問題我們需要記住一下幾點：

window.open控制屬性之間的分隔符是逗號“,”，屬性和值之間用等于號"="連接
window.showModalDialog控制屬性之間的分隔符是分號“;”，屬性之間的用冒號“:”連接
window.open控制屬性中長度和寬度尺寸可以直接寫數字，也可以加上度量，例如px，但是對于window.showModalDialog的長度和寬度則必須帶上px，否則尺寸無效，這一點是很重要的。

10，對于數據庫中的varchar型字段，是有長度限制的，例如oracle10g中varchar2字段的最大長度為4000字符,在mysql中varchar最長為255字符，要注意這里面的限制值是單字節字符值，而漢字屬于雙字節字符，因此對于漢字存儲而言，varchar2字段最多可以存儲2000個漢字，由此引申出來的一個問題，就是web開發過程中的表單提交驗證問題，因為對于中國用戶而言，輸入的內容有可能是漢字和英文字符的組合，因此判斷輸入字符串的長度需要注意，Javascript中判斷一個字符串的長度的方法為：
var str="abcdef";
var length=str.length;
但是字符串的這個屬性，計算的是獨立字符的長度，例如一個中文字符按長度1計算，因此如下：
var str="你好";
var length=str.length;
其長度的值為2，而不是4，那么如何計算含有漢字或者說是雙字節字符的真實長度呢？通過搜索可以很快找到方法，就是先將雙子節字符替換為兩個單字節字符，然后計算替換后的字符的長度，當然了JsJava中提供了對于雙字節字符串真實長度的計算支持，你可以查看其中的StringUtils類。

11，如果你不能默寫出常用顏色的英文表示值和16進制表示值，那么說明你的HTML基本功還是需要練的，例如白色是white，十六進制是FFFFFF，紅色是red，十六進制是FF0000，藍色是blue，十六進制是0000FF，紫色是purple，橙色是orange，網頁中常用的灰色一般都是EEEEE，或者再淺一些EFEFEF，當然說這些并不是讓你去背大量的顏色和十六進制值，但掌握一些常用的，還是很有必要的。

12，Javascript支持多維數組，但是沒有構造函數可以直接生成多維數組，例如一維數組可以通過Array生成，例如：
var arr=new Array(12);
生成多維數組，雖然沒有構造函數支持，但是可以通過另外一種方式實現，例如實現一個12x5的二維數組：
var arr=new Array(12);
for(var i=0;i arr[i]=new Array(5);
}
另外，你可以直接使用JsJava的標準類MultiDimensionArrayUtils，支持生成二維和三維數組。

13，對于img標簽，我們知道它有一個align屬性，這個align是控制該圖片與臨近文本的位置關系，按照MSDN的說法，該屬性的默認值是left，但是從實際的顯示效果來看，好像并非如此，我們可以一起來比較一下不寫align屬性和將align賦值為left的情況，如果默認就是left，那么不寫align和將align賦值left，其效果應該是一樣的，那我們來一下：
JsJava是最優秀的Javascript類庫解決方案和界面應用開發支撐框架！
效果如下：

再看加入align=left的情況：
JsJava是最優秀的Javascript類庫解決方案和界面應用開發支撐框架！
效果圖如下：

從實際效果來看，img的默認align并非是left，好像應該是bottom，而且上面的情況在IE6.0和Firefox2.0上都試驗過，看來MSDN的說法是不太可信的，或者是自己理解錯了？你可以看一下MSDN中的描述：http://msdn2.microsoft.com/en-us/library/ms533066.aspx

14，在界面中添加事件的方式主要有如下幾種，例如當頁面加載之后，執行函數myfunc，幾種定義方式如下：
1）在標簽中加入onload事件，即：

2）在任何一個可以執行Javascript的地方定義window.onload，即：
window.onload=myfunc;
3）在
4）將事件加入到事件隊列中，即：
IE中 window.attachEvent("onload",myfunc)
Firefox中 window.addEventListener("load",myfunc,false)
建議大家使用第四種方式，因為只有第四種方式，可以避免將其它的同類事件覆蓋，第四種方式是將該事件加入到同類的事件的隊列之中，不會覆蓋其它的同類事件，這在web開發過程種，是需要特別注意的，尤其我們自己定義一些界面框架或者組建的時候，經常需要定義onload事件，這個時候最好是使用第四種方式，因為引用界面框架和組建的用戶，可能在頁面上也想使用onload邏輯，當然用戶自己使用第四種方式也不會有問題，但是做為一個負責任的界面高手，是不應該這樣想得，我們應該嚴于律己，而寬以待人。

15，并不只是body（或者說window）有onload事件，中也可以定義onload事件，還有也可以定義onload事件，例如當圖片加載完畢后，在window的狀態欄種顯示加載成功的字樣：

當然了對于img，你最好深入研究一下其各個事件和屬性的用法，你會發現原來不知道的東西還有那么多，當然肯定有不少開發人員，已經對這一點有所研究了，但是大多數開發人員還是缺乏對這方面知識的了解。

16，如何在HTML種加入一段保留格式化的文本，相信你會想到

標簽，例如：



  這是一段格式化文本，

里面的文字直接將格式輸出

顯示結果為：
這是一段格式化文本，
里面的文字直接將格式輸出

對于一般情況而言，pre標簽就夠用了，但是pre標簽的不足之處，在于它不能將其中的html標簽也原樣輸出，而是進行了解析，例如：



  這是一段格式化文本，里面的文字直接將
格式輸出

顯示結果為：
這是一段格式化文本，里面的文字直接將
格式輸出

那么如何才能將含有HTML的內容也原樣輸出呢？實際上在HTML規范種有

標簽，可以實現這種效果，例如： <xmp>   這是一段格式化文本，里面的文字直接將 格式輸出 
顯示結果為：
這是一段格式化文本，里面的文字直接將
格式輸出

17，如何獲取某個對象區域的尺寸以及坐標，是我們界面開發過程種經常會遇到的一個問題，一般我們都采用getBoundingClientRect方法來獲取對象的區域，進而得到該區域的尺寸和坐標，但是該方法只能在IE中使用，當然Firefox也有類似的方法，相信大多數開發人員不知道，該方法就是getBoxObjectFor，為了不想為跨瀏覽器而操心，你可以直接下載JsJava，使用其中的DocumentUtils類的getElementRectangle靜態方法，例如：

JsJava的類和方法都是經過IE和Firefox測試的，使用起來很方便。

18，在界面中對象的位置的計算與理解是比較麻煩的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，這些該怎么區分，又分別代表什么意思，對位置屬性的深入理解，非常有助于對HTML界面布局本質的理解，是成為高手的必由之路，下面就簡單介紹一下：
1）clientHeight，代表對象區域的屏幕高度，不包含區域的border尺寸，但包含padding的尺寸
2）clientTop，對象區域offsetHeight與clientHeight的差的一半
3）scrollHeight，代表對象區域內容的底部距區域最上邊的距離
4）scrollTop，代表對象區域滾動部分的高度，即區域的最上邊距離該區域可見部分的最上邊的距離
5）offsetHeight，代表對象區域的屏幕高度，包含border和padding尺寸
6）offsetTop，代表對象區域距離上一個對象高度
上面的解釋如果沒有實際的經驗，多少會有些迷糊，沒有關系，我給你一個示意圖：

因此，scrollHeight并非總是大于或等于clientHeight，實際上確實有一些開發人員認為一個區域沒有滾動時scrollHeight和clientHeight相等，有滾動時scrollHeight＝clientHeight+scrollTop，這種認識是不對的或者說是不準確的。
上面的圖的html源碼為：

區域1，高100

區域2，高50

區域4，高100

顯示結果為：
70
15
28
0
100
15
--------------
50
0
18
0
50
115
--------------

19，網上許多人都問，如何將一個RGB顏色轉換為HTML中的十六進制顏色，我看到了一些網友的實現，例如定義一個長度為256的數組，并按照十六進制的規律將其全部初始化，還有的利用了HTML標簽的一些特點，不過有一定的局限性，其實我們只要理解了RGB顏色的基本知識，轉換起來是很方便的，RGB分別代表紅（Red）、綠（Green）、藍（Blue）三種基色，其中每一種基色從淺到深又可以定義256色，這樣RGB總共可以表示256x256x256種顏色，而對于十六進制顏色來說，其實就是用十六進制數字來表示RGB，例如FFFFFF代表rgb(256,256,256)，換算起來也很簡單，就是十進制與十六進制之間的表示方法的轉換，例如對于RGB顏色rgb(132,216,12)，用十六進制顏色表示的計算方式為：
132轉換為十六進制數字為84
216轉換為十六進制數字為D8
12轉換為十六進制數字為0C
因此rgb(132,216,12)的十六進制顏色就是84D80C，我們可以看一下兩者的效果：

顯示為：

那么Javascript之中是否提供了十進制數與十六進制數的轉換呢，Javascript沒有提供內置的函數來進行這種轉換，不過你可以下載JsJava，使用其中Integer類的靜態方法：toHexString方法，例如

或者你直接使用JsJava種的Color對象：
var color=new Color(132,216,12);
var hex=color.toHexValue();//hex的值為84d80c

20，web開發過程中，經常會遇到原頁面與彈出頁面之間進行交互的問題，如果只是簡單的變量傳遞，還是不難的，而我們經常遇到的一個實際場景是：例如有一個用戶列表頁面，點擊“新建”按鈕，彈出一個創建用戶的頁面，填寫完信息后要提交表單并關閉窗口，同時列表頁面中要列出新建的用戶，這個時候我們一些開發人員喜歡使用的方式為：
userForm.submit();
opener.location.reload();//或者有些開發人員喜歡用opener.location=列表頁面的請求url
window.close();
上面的代碼有一個很明顯的問題，就是如果表單提交給后臺，后臺還在處理，而此時原頁面已經執行了重載，那么等新用戶在后臺存儲后了，也不會反映到列表頁面中了，當然刷新一個就有了，但是就達不到我們所要的效果了。下面給你介紹一種比較穩妥的方式（ajax方式就不介紹了）：
先讓表單提交，提交后還是回到彈出的那個頁面，或者一個其它的頁面，然后在該頁面中做判斷，如果后臺信息處理成功，那么就執行原頁面的重載，然后關閉窗口。
當然有些開發人員說，前面的那種方式，一直在項目中使用沒有發現什么問題，那我告訴你，那是因為你比較幸運，后臺處理速度很快，列表重載的時候，后臺已經處理完了，但是一旦后臺處理慢了，客戶就該找麻煩了。

21，界面問題是當前web開發領域（不要認為只是asp、jsp和或者php等的開發，大的說可以包括ASP.NET以及J2EE等）最為棘手的問題之一，而且大部分開發人員，不懂得該如何去解決界面問題，而且經常會遇到一些不可思議的問題。其實我告訴你，界面問題的確有一些是非常奇怪的，但是不要因為這樣，就不去深究問題的原因所在，我在這些年的開發中，遇到了不少的離奇的界面問題，包括自己碰到的和別人讓我去解決的，不過我發現，在這些離奇的問題背后，體現的卻是我們大部分開發人員，在界面能力和素養方面的一些問題，例如有些人就是太粗心，而有些人則是缺乏界面基礎知識等等。成為界面高手不是目的，培養解決界面問題的能力和素養才是最關鍵的。

22，在連接標簽中加入onclick操作是很常用的一種方式，例如：
人員管理
一般情況，這種方式是沒有問題，但是如果頁面內容比較長，出現了上下滾動條的時候，這種方式就會出一些問題，主要是由于href的#造成的，我們知道錨的作用就是讓頁面定位并移動到錨處，上面的代碼開發人員的意圖主要是想點擊的時候不要執行鏈接href，所以寫一個#，但是#對于滾動的頁面，會在執行onclick的同時，頁面出現移動定位行為，這樣的用戶體驗是很不好，解決方式有如下幾種：
人員管理
 人員管理
建議使用void 0方式，因為return方式，有時會影響click事件的傳播，尤其是return false的時候。

23，在Window XP系統中，我們經常奇怪為什么我們使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然沒有全部支持呢，例如下面的代碼：

按道理應該彈出一個10000x15000的大窗口，然后實際上IE給我們彈出的不過是一個和瀏覽器尺寸大小一致的窗口，為什么會這樣呢？其實我們理解微軟，如果不這樣限制，系統可能會因為大量的這種代碼而最終崩潰，當然微軟的IE也提供了配置入口，配置是否進行限制，具體入口為：

對一般站點類說，默認都是禁用的，只要打開就可以了。

24，我們頁面中經常會以post方式提交表單數據，提交之后，如果我們刷新頁面，IE中一般都會提示如下圖所示的信息：

如果避免這種提示出現，一種是編程上去解決，即表單提交后，不要從其它窗口對該窗口繼續執行location的reload方法等等，最好是使用location的href屬性或者assign、replace等方法），在IE的高級選項中，也有一個條目可以設置重定向表單提交時是否給出提示信息，但是設置了之后，沒有什么效果，因此也就不過多介紹了。

25，現在很流行div+css方式的布局，的確這樣做界面框架的靈活性大為增加，可以說什么布局都能出的來，而且目前的ajax方式的輕量級portal框架基本上都采用的是div+css的布局方式，但是也不要過度的使用，或者什么場合下都使用，例如對于一個中大型的項目而言，要考慮的不僅僅是布局這樣的事情，還要考慮界面框架的許多東西，在這種情況下，還是使用模板的方式比較好，事實上div+css是一種布局，而模板是一種“框架”，兩者可以結合使用，至于能結合到什么程度，就看你的實際本領了。

26，做為一個項目經理、產品經理或者是技術總監，你應該要重視界面方面的問題了，想想吧我們現在的開發人員，大都能很快的完成后臺邏輯的開發，但是到了界面展現卻是捉襟見肘，界面效果和易用性做的都不到位，界面方面都調整好了，需要的時間往往并不比后臺邏輯開發用的時間少多少，相信你見到過吧，為了調試一個界面中的奇怪的問題，往往會用掉一個人一兩天的時間，如果再不重視界面技術的學習和素養的培養，我們的路還能走多遠。

又七七八八的為大家總結了一下我在web開發尤其是界面開發上的一些經驗，這些都是摸爬滾打出來的，可以算作是經驗，但不一定就特別的正確，許多東西還需要你自己去實踐、檢驗和再總結，如果我寫的這些東西，對你而言哪怕只是有一點的用處，我都是很欣慰的，另外一點我需要說的，就是我們應該逐步走出大師崇拜的陰影，不要再津津樂道于敏捷開發、極限編程等等，面對那些國外的大師，我們更為重要的是學習他們身上的精神和品質，而不是做一個忠實的傳道士，對于這些精神和品質，我們中華民族實際上很早就有了，只是到現在已經少的可憐的，但并不是說我們就沒有希望了，看看當今科學界和各個行業的民族精英們，看看他們骨子里面的那種精神，是很值得我們崇敬和學習的。

劉錚 2007-10-15 17:34 發表評論

轉貼javascript學習心得

劉錚 — Mon, 15 Oct 2007 09:18:00 GMT

1，document.getElementById方法只能獲取到一個對象，即使有多個同名的對象，也只取第一個具有該名稱的對象，例如在一個form（名稱為myform）中，有三個id="mycheckbox"的復選框，那么使用document.getElementById("mycheckbox")，返回的是第一個checkbox對象，而不是返回一個數組，如果使用document.myform.mycheckbox則返回一個數組。

2，使用showModalDialog打開一個頁面，則在這個頁面中，對于任何鏈接和任何表單提交，都會在新的窗口中執行，即使你在鏈接或form中指定了target="_self"也是沒有用的。例如使用showModalDialog打開一個test.html，在該頁面有一段代碼
打開
如果點擊該鏈接，那么將會在新窗口中打開test2.html，至少在ie中是這樣的，那么是不是就沒有辦法解決了呢？不是的，我們可以通過在彈出的頁面的head中加入下面的代碼來解決這個問題：

3，在一個頁面含有某個iframe，其id="myframe" name="myframe"，此時使用document.getElementById("myframe")取到的是iframe標簽對象，通過該對象可以獲取iframe的各個屬性，例如src、frameborder、style等等，但是不能獲取到iframe所包含的子頁面的各個對象。如果使用document.frames("myframe")取到的是iframe組件對象，通過該對象可以獲取到iframe所包含的頁面的子頁面的各個對象，例如子頁面的window對象，但是不能獲得iframe標簽得各個屬性，例如上面說到的src等等。請參看如下類似代碼：
1.html

2.html

4，在table中，如果在table中加入border="1" bordercolor="red"，那么table中所有單元格都會加上厚度為1的紅色邊框，但是如果在table中加入css style="border-width:1;border-color:red;border-style:solid" 那么只會在整個table的最外面加上厚度為1的紅色邊框，分別如下圖所示：

當然第一個出現了雙邊框，這是因為沒有設置cellspacing的緣故，只要在table中設計cellspacing="0"，那么就變為單邊框了。

5，許多時候我們需要在頁面加載時能夠通過javascript去動態操作html中的一些對象，對于這些操作我們最好是在body中定義onload操作，然后在該操作中去完成這些任務，盡量避免在html中嵌入script執行代碼，因為對于比較大的頁面，當這些腳本執行的時候，頁面往往還沒有加載完畢，因此許多頁面對象還沒有被生成，此時動態去改變很可能會報異常。

6，有時候我們需要在iframe子頁面中調用父頁面的javascript函數，例如在父窗口中定義了一個函數如下：

//...

那么在iframe子頁面中可以通過parent.loadImage()來實現調用，這也說明用戶在頁面定義的所有javascript函數都屬于window對象之下。那么在父窗口如何調用子窗口中的函數呢，應該很簡單了，就是獲得子窗口對象，然后調用子窗口對象的window對象下的這些函數即可，例如iframe的name為myframe，在子窗口定義了一個函數getUserName，那么父窗口中的調用方式為document.frames("myframe").getUsername();另外對于父窗口調用子窗口中的方法，還要注意一個問題，就是子窗口的加載有時候會比較慢，如果子窗口正在加載，那么此時它的各種頁面對象都不存在，那么當在父窗口調用子窗口的方法時，為了保險可以使用借助setTimeout來實現異步調用，即通過setTimeout指定一定時間之后（例如100ms），再執行調用，調用執行總是判斷子窗口頁面是否加載完畢，如果沒有加載完畢，則繼續使用setTimeout方法，循環往復直到子窗口被完全加載，然后執行子窗口的函數調用。既然這里解釋了窗口間的異步調用，后面就不專門解釋了。

7，在一個網頁中如何最小化窗口，當然你可能會說，網頁的右上角不是有最小化、最大化和關閉三個按鈕嗎，當然了這里說這個問題是指，如果不點擊網頁右上角的最小化，如何實現網頁的最小化操作，例如有些項目中，用戶需要辦公界面是全屏化的，這意味著網頁自己提供的許多操作都不可見，更不用說去操作了。在網絡上我們搜索最小化的解決方式，我們會發現千篇一律的使用如下的方式實現：

在win98和windows2000中這個方式可能是可以的，但是在windows XP中卻是不再支持了，不僅如此在windows XP中對javascript不少函數做了限制。那么在XP中如何實現最小化呢，一個可以實現的方式就是自己寫一個activeX控件，這個是在項目中證明可以實現的。（不要認為activeX控件很難寫，也不要以為activeX控件用戶不接受，在實際的項目中如果用戶使用的都是ie，那么用戶一般是會接受的，當然這里的項目最好是內網辦公項目，對于公網項目來說，用戶接不接受就很難說了）

8，注意td中nowrap的使用，這個屬性是很有用的，例如如果一個td中含有多張圖片，那么如果不加入nowrap，那么很可能這些圖片會由于其它的td的擠壓而產生細微的上下錯位，這表現的頁面上就是某處出現了一條橫向的細縫。這一點很重要，頁面中許多非常奇怪的現象都與此有關。

9，對于showModalDialog彈出的頁面，不能使用右鍵菜單，也不支持F5和ctrl+r刷新，如果此時修改彈出頁面的內容，那么必須關閉該窗口，然后重新彈出才可以。另外，對于許多web服務器，由于服務器都設置有緩存，如果修改了彈出頁面的內容，那么許多時候只是關閉彈出頁面還是不夠的，往往還需要關閉彈出該頁面的那個頁面才可以。在這里多說一句，web開發許多奇怪的頁面現象都和web服務器的緩存有著很大的關系，因此出現問題時考慮一下是否是由于服務器的緩存所致。

10，我們喜歡在form中定義onsubmit操作，主要是為了在表單提交之前可以做一些有意義的操作，例如檢查輸入域的有效性等等，但是一定要注意，如果我們通過點擊該form中的submit按鈕（type=submit或type=image）提交表單，那么該onsubmit操作會被執行，但是如果通過document.formName.submit()提交表單，那么此onsubmit操作將不被執行。

11，許多時候我們修改了頁面的內容，但是我們刷新頁面或重新打開該頁面，卻看不到修改的效果，除了前面提到過的showModalDialog和緩存的情況要考慮外，還要檢查一下是否改對了地方，即你修改的那個頁面是否是服務器上的那個頁面，有可能你修改了其它地方的一個頁面，如果不是這個原因，那么再進行其它方面的檢查。

12，在沒有系統規劃好之前，請不要在css中定義html標簽的統一行為，即下面的形式：

因為一但定義了這些標簽的屬性，那么這將會影響頁面中所有的這些標簽屬性，尤其在一些公用的css文件中，盡量不要定義html標簽的統一行為。當然如果經過了系統的良好的規劃，那么這樣做將是非常好的，只是在國內在css上經過良好規劃的并不多，因此雖然我們見到許多項目和產品中對html標簽做了許多css的定義，但是真正起到作用的并不多。

13，在html標簽中有許多屬性的名稱都是復合詞，例如borderColor、frameBorder、readOnly等等，注意這些復合詞在html的書寫，一般來說我們在html標簽中寫為borderColor和bordercolor，各個瀏覽器的解析都會通過，但是我們在使用javascriopt引用這些屬性時卻需要注意了，一定使用正確的屬性名稱，嚴格來說，對于復合詞而言，除了第一個有意義的詞之外，其它任何有意義的詞的首字母都要大寫，例如對于上面列出的三個屬性的引用，一定要使用borderColor、frameBorder、readOnly的形式。

14，我們知道當使用瀏覽器的菜單“查看”->“文字大小”來改變文字的顯示時（或者有些瀏覽器也可以使用ctrl+滾輪鍵），網頁中的文字的字號會發生相應的變化，如果我們在網頁中的文字塊中定義了style="font-size:10pt"，那么這些文字塊中的文字的大小將是固定的了（注意在標簽定義size屬性是不能固定字號的），我想這一點多數人都應該知道的。但是我們使用中有時會出現一種非常奇怪的現象，例如下面的一段代碼：

這是上面

這是下面

我們看一下在字號顯示“最大”和“最小”下的差別：

從上圖我們可以看到字號我們是固定住了，但是table的高度卻會隨著查看方式的不同而發生變化，這是為什么呢？原因就在于td當中的那個
，我們知道
是表示段內換行，但是要注意在網頁中所謂的行也是有一定的默認高度的，而且這個高度隨著查看方式的不同而發生相應的變化，因此如果我們想固定上面table的高度不發生變化，有下面兩種方式：
方式一：在table標簽中加入字號限制例如方式二：在
中加入字號限制例如
...
如果你是一個web開發人員，你可以試著使用ctrl+滾輪鍵改變網頁查看文字的大小，你會發現不少頁面都存在這個問題的。

15，網頁中定位對象的方式有許多種，下面先簡單總結一下，以后再專門寫這個方面的文章的：
1）頁面內通用定位方式（這些定位方式適用于后面其它元素的定位）
document.getElementById(objId);//通過對象的id獲取對象，這個是各個瀏覽器都支持的，返回一個對象
document.getElementsByName(objName);//通過對象的name獲取對象，這個是各個瀏覽器都支持的，返回一個數組
document.getElementsByTagName(tagName);//通過標簽名稱獲取對象，這個是各個瀏覽器都支持的，返回一個數組
document.all.objId;//通過對象id獲取對象，這個是ie支持的，返回一個對象
document.all(objId);//通過對象id獲取對象，這個是ie支持的，返回一個對象
document.layers.objId;//通過對象id獲取對象，這是Netscape支持的，返回一個對象
document.layers(objId);//通過對象id獲取對象，這是Netscape支持的，返回一個對象
window.objName;//通過對象名稱獲取對象，至少在ie中如此
objName;//通過對象名稱獲取對象，至少在ie中如此
2）頁面內集合元素的定位方式
我們知道在頁面中有許多集合，例如form、frame、image等等，引用這些集合中某個對象的方式為，舉其中一個為例，其它都差不多，以form為例：
document.formName;//通過表單name獲取表單對象
document.forms[index];//通過索引獲取表單對象，瀏覽器會按順序將頁面中所有的表單集合城數組，可以通過下標引用
document.forms(formName);//通過表單name獲取表單對象
3）定位子窗口的方式（定位子窗口對象，不是標簽對象，見前面3中的說明）
子窗口是指頁面中frame或iframe窗口，定位方式為：
document.frames[index];//索引定位方式
document.frames(frameName);//通過名稱定位
window.frameName;//通過名稱定位
frameName;//直接通過名稱來定位
4）在子定位父窗口的方式
通過關鍵字parent來引用即可，同理parent.parent則表示父父窗口，top則表示最上層窗口。
5）原窗口定位open彈出窗口的方式，例如下面代碼：
window.open("test.html");
這里我們要知道window.open將會返回一個彈出窗口的句柄，即可以如下：
var owin=window.open("test.html");
owin即代碼彈出窗口對象，通過改對象可以引用到彈出窗口的各個對象。
6）原窗口定位showModalDialog彈出窗口的方式，例如：
window.showModalDialog("test.html");
注意showModalDialog與open不同，open彈出窗口后，window.open后面的代碼可以繼續執行，而showModalDialog彈出窗口后，原頁面被阻塞，即window.showModalDialog后面的代碼不被執行，直到用戶關閉了彈出窗口才會繼續往下執行，但這時因為已經關閉了彈出窗口，所以已經無法再對該窗口進行引用。
7）open彈出的窗口對原窗口的定位方式，這個我們一般都知道，在彈出窗口中使用opener即可。
8）showModalDialog彈出的窗口對原窗口的定位方式，這個不是使用opener，而應該在彈出窗口中使用parent。

16，編寫頁面代碼盡量使用標準的html、css和javascript，不要以為只要在ie上通過就可以了，要注意最近瀏覽器市場已經開始發生變化了，不知道你是否聽說過Firefox2.0，它的用戶量已經不在ie之下了，至少你的代碼要在ie和Firefox上都通過才可以，另外現在linux越來越吃香，保不準幾年后我們的許多客戶都開始使用linux，到那個時候，我們將不得不對原來已經完成的項目進行維護，與其這樣的后果，還不如從現在開始就使用標準為好，不要認為跨瀏覽器是很虛的話題，覺得沒有必要，要知道這已經不是幾年前了，現在形式和市場都在發生變化，我們的思想也該變一變了。

17，我們的產品或OA系統往往會有許多模塊，例如用戶管理、發文流程、物品管理等等，我們在為這些模塊命名時往往都是不太講究的，沒有注意名字的結構、字數等的統一，例如在個人事務模塊下面有三個子模塊，名稱分別如下：待辦事項、已辦事項，維護個人信息。對于字數而言我們往往不會苛求太多，但是對于詞的結構，我們還是要講究的，例如上面的三個模塊，前兩個是名詞結構，而后一個是謂詞結構（動賓結構），這是不太妥當的，也許你覺得這有些吹毛求疵，當然大多數項目中不會要求這么嚴格，但是有些客戶的確會有這樣的要求，另外對我們自己而言，這也體現了我們做事認真、一絲不茍的品格和態度。

18，圖標與文字的配比要合適，這不僅要求圖標能夠正確顯示文字的意思，而且還要求圖標不能蓋過文字的顯示與含義，即圖標太顯眼而文字無足輕重的情況需要避免，例如下面的情況就是不太合適的：
用戶管理
之所以不合適，主要是因為圖標的含義與用戶管理關系不大，圖標的含義更接近“XX編輯”的意思，和用戶管理基本沒有什么聯系。

19，在用戶登錄和表單處理頁面，我們要處理用戶按enter鍵的情況，即用戶按enter鍵也要觸發提交事件，不要只有用戶點擊“登錄”或“提交”按鈕才觸發提交操作。

20，如果我們在頁面中使用標簽，那么默認情況，當鼠標移到該鏈接時，鼠標自動會變為手的形狀，許多時候我們希望鼠標移動到其它非鏈接的區域，也希望鼠標變為手的形狀，我們一般的處理方式為在該區域的style中加入cursor屬性，如下：
下一頁
或者使用：
下一頁
但是要注意，只有在ie中才支持cursor:hand，在firefox2.0中的cursor中是沒有hand的，像wait、help等都是支持的，另外firefox中也不支持cursor:url方式。

21，我們有時想通過javascript進行跨域頁面的調用，不過出于安全性的考慮，各個瀏覽器一般都是不支持的，例如下面的代碼：
http://www.google.com">>

使用setTimeout是為了可以讓iframe子頁面可以加載完畢，上面的調用會報安全性警告，例如在ie如下：

那么是不是說只要是跨域就能不能進行javascript訪問了呢？不是的，一種比較常用的辦法就是設置document.domain屬性，這種方式的描述如下：
假設有兩個頁面
test1.html 所在域：aaa.maindomain.com 訪問協議：http 端口：8080
test2.html 所在域：bbb.maindomain.com 訪問協議：http 端口：8080
滿足上面條件的兩個頁面test1.html、test2.html是可以通過javascript相互訪問的，上面的條件即為兩個頁面位于同一個基礎域（例如上面同為maindomain.com），遵循同一個訪問協議和端口（例如上面同為http 8080）。只要在這樣的兩個頁面中都設置document.domain為所在基礎域名，就可以相互調用了，例如：
test1.html 所在域為aaa.mydomain.com

test2.html 所在域為bbb.mydomain.com

...
這樣一來，test1.html的調用就是可以的了。一般來說跨域調用的場景發生在集團型企業項目或多機構的政務項目中，而對于這種類型的項目，它們的基礎域基本上是相同的，只是三級域名不同，因此可以使用上面的方式來進行跨域調用。

22，你會頁面中的javascript調試嗎？也許你還不會使用ie或firefox提供的頁面調試器或插件，那么沒有關系，至少你懂得一種最基本的調試：alert調試，不要認為這是一種很土或很傻的方式，很多時候這種方式都很非常有用的，對于一段很長的javascrip代碼，從頭到尾加入幾個alert，那么立即就能定位錯誤的大概位置，當然使用調試器的斷點也可以很快定位，只是說alert也是一種不錯的方式。當然還是希望你能夠掌握更為高級的調試器的使用，畢竟調試器帶給我的功能更強大。

23，我們許多時候編寫完網頁之后，發現最終的顯示效果和我們想象的不太一樣，這有些時候是由于瀏覽器的不同造成的，但除此之外，我們如何具體定位到底是頁面的哪塊代碼導致不太理想的頁面效果呢？當然你可能會使用Dreamweaver或Frontpage打開出問題的頁面，然后查找原因，但是這些所見即所得的網頁設計器，并非我們想象的那么完美，例如明明在設計器種預覽很好的效果，到了真實環境中頁面竟然出現了錯位等等，這里和你介紹一種非常不錯的css的調試方式，這里就不具體說了，請參看我新寫過的一篇文章【css在html中的調試作用】

24，網頁打印我們都知道可以調用window.print函數，那么如果想打印iframe子窗口中頁面呢，如果你只是獲得子窗口對象，然后調用子窗口對象的print方法，此時打印機打印出卻不是子窗口頁面的內容，而是父窗口頁面自身，為什么會這樣呢？原來（至少在ie中如此）在父頁面調用子窗口的print函數時，因為此時焦點還在父窗口之中，所以打印機此時會將獲得焦點的窗口進行打印，我們在打印子窗口之前，只需做一件事即可完成對子窗口的打印，如下代碼：

25，網頁切圖許多人都習慣于網頁三劍客的配合使用，網頁三劍客就是網頁開發者都熟悉的Dreamweaver、Fireworks和Flash，一般我們使用使用Flash或Fireworks將動畫或圖切分后輸出成為html頁面，然后通過Dreamweaver編輯輸出后的頁面，這是我們網頁切圖常用的配合方式，但是通過使用比較發現，在圖片的切分方面，使用Photoshop要好于Fireworks，Photoshop不僅定位更加精確，而且由于自身是平面設計的標準，因此它提供了許多圖片編輯的其它功能，這要比fireworks強大得多。目前專業的網頁設計師都在開始或一直使用Photoshop進行網頁設計并切分后輸出成為HTML頁面。如果你是三劍客的愛好者也沒有關系，你可以使用一下看看效果如何，總之我從2000年就開始使用三劍客，現在才逐漸認識到Photoshop已經不僅僅是平面設計的標準了。

26，在javascript中有一個方法可以列出當前對象所支持的所有屬性、集合和事件，通過使用in關鍵字來實現，如下樣例代碼：
var str="";
for(var i in document){
str+=i+"\n";
}
alert("document's all attributes:"+str);

27，在一個名稱為myform的表單中，含有一個名稱為mychckbox的復選框，那么document.myform.mycheckbox所取到的是那個復選框對象，那么此時調用document.myform.mycheckbox.length是錯誤的，如果該表單中含有多個名稱為mycheckbox的復選框，那么document.myform.mycheckbox返回的是一個數組，此時調用document.myform.mycheckbox.length就是正確的。單獨說這個問題，可能感覺比較簡單，但是在實際應用中我們經常會犯與此相關的錯誤，如下圖所示：

上圖是我們在應用中經常遇到的“增、刪、改”的邏輯，我們在其中經常會對復選框做操作，經常會使用類似document.myform.mycheckbox.length的方式，一般情況不會報錯，這主要是因為在我們的列表中一般來說都不會只有一條記錄，但是當列表中只有一條記錄的時候（盡管這種時候不常見），這樣引用就會報錯，因為此時document.myform.mycheckbox返回的不是一個數組，則對length的引用就沒有意義了，這種錯誤說起來很容易，但是在編程時往往就會忽略，因此在編程時我們建議如下方式：
if(document.myform.mycheckbox.length){
//...
}else{
//...
}

28，在ie中有一個很特別的css語法，如果你聽說過，那說明你的積累真是太豐富了！在css中有一種給漢語注音的語法，如下所示：

你知道這個語法嗎？ni zhi dao zhe ge yu fa ma

不知道bu zhi dao

你運行這段代碼看看什么效果（要在ie中運行），我這里效果如下：

29，我們項目中經常會遇到頁面打印的需求，許多時候用戶需要只打印頁面某一部分，如果直接調用window.print則打印的是整個網頁的內容。解決辦法不外乎兩種，第一種方式是將整個頁面分為幾個部分，將需要打印的部分放在其中的一個部分，然后定義onbeforeprint和onafterprint兩個操作，即打印之前將不要打印的部分隱藏，打印之后將隱藏的部分顯示，類似代碼如下：

這里不需要打印

這里需要打印

這里不需要打印

第二種方式是將需要打印的部分放到iframe之中，然后將焦點移到子窗口，然后調用子窗口的print方法即可。

30，Javascript中的數組和我們一般的編程語言中的數組是不太一樣，一般語言中數組的長度是固定的，有些語言中數組中的數據類型也要求是一樣的，但是javascript數組卻不受這些限制，在javascript中數組基本上是沒有長度限制的，而且類型也沒有限制，例如下面的一些使用方法：
var arr=new Array();
arr[1000]="ok";
arr[300]=255;
arr[200]=new Date();
var date=arr[200];
alert(date.getTime());
因為數組的這種機制，我們可以使用數組實現許多數據結構，例如列表、哈西表等等。

31，對于XML的處理一般情況下都是在服務器端處理的，例如在Java中有W3C、JDOM、XPath等許多xml的解析器，但是現在許多時候我們需要在瀏覽器端處理xml字符串，目前在ie和netscape中都有針對xml字符串的解析，如果你喜歡使用，也沒有什么關系，不過對于Java程序員，我給你介紹一個完全按照W3C Document API實現的XML解析器，相信你會非常喜歡的，因為完全是Java的風格，請從 http://download.jsjava.com 下載jsjava0.91，在其中的src/jsorg/w3c/dom下有XML各個對象的實現，在頁面中只需引用其中的xmlp.js和i18n.js即可，具體使用可以參考里面的例子：位于下載包的examples/XMLParser/XMLW3CParser下面，也可以直接訪問：http://jsjava.sourceforge.net/examples/XMLParser/XMLW3CParser/W3CXMLParser.html 查看例子。

32，一段文本的首行文本縮進兩個漢字，這是中文段落的格式要求，我們可以通過在首行加入多個來實現，不過還是建議使用css的標準屬性text-indent，例如下面的代碼：

這是一段文本，請注意它的格式，

你看到了什么效果？如果你看到首行

縮進了，那么說明起作用了。

顯示效果如下：

33，在Javascript中字符串的替換函數為replace(regexp, newSubStr)，其中第一個參數是一個正則表達式，但是我們在實際使用中，往往習慣使用為一個字符串，這雖然不會報錯，但是得到的結果往往是不正確的，例如下面的例子：
var str=“ abbbbacc”;
var rs=str.replace(“a”,”0”);
(A)0bbbbacc (B)0bbbb0cc
正確答案是A，當然A可能不是你想要的結果，你想要的結果是字符串中所有的“a”都被替換為“0”，可是上面的使用方式只能將第一個“a”替換為“0”，正確的使用方式，在第一個參數中輸入一個正則表達式，如下所示：
var str=“ abbbbacc”;
var rs=str.replace(“/a/g”,”0”);//注意如果第一個參數為/a/，結果也是不正確的。
(A)0bbbbacc (B)0bbbb0cc
這樣的話答案就是B了，如果你不明白/a/g是什么意思，那么你就需要對Javascript的正則表達式好好學習了，具體可以參看我以前寫過的一篇文章：http://blog.csdn.net/eye_of_back/archive/2006/07/14/922667.aspx

34，無論你使用的是ASP，還是PHP，或者JSP，都不建議在頁面代碼中夾雜著大量的業務邏輯代碼。我們應該將業務邏輯代碼封裝到應用服務器層或者說業務層，web端只是進行調用。在JSP和PHP中我們可以將業務邏輯封裝到BO（業務對象）中，由于支持類、接口等一套面向對象的機制，使得這種封裝顯得很容易，對于ASP，由于ASP.NET和C#的興起，使得它對業務封裝也變得相當方便。雖然我們都懂得服務器的三層架構，但是我們發現許多的項目之中，開發人員仍然在頁面中直接編寫業務邏輯，甚至直接訪問數據庫，面對這種情況，不能不說我們的項目管理是存在很大的問題的，我們的項目經理和程序設計師們，我們應該好好反思一下了。

35，有些時候我們在標簽的href中直接加入javascript代碼，通過window.open來打開一個自己可以控制許多屬性的窗口，例如下面的代碼：
打開Google
當我們點擊鏈接后，確實彈出了Google的頁面，但同時原頁面卻變為了下面的樣子：

這種情況相信有些人遇到過，解決方式如下：
打開Google
但是為什么前面的那種方式就會出現那種情況呢，其實只要做個簡單實驗就會明白了，你運行一下下面的代碼，點擊鏈接看看會出現什么結果：
打開Google
實驗后你會發現，點擊鏈接后頁面出現的結果與上面那種結果相同，然后你再實驗一下下面的代碼：
打開Google
點擊鏈接后，你會發現頁面中會顯示test字樣。可見對于類似
點擊
的代碼，如果js代碼執行完畢后返回一個對象，那么頁面內容會被沖掉，然后將該對象的描述輸出到頁面中，我們知道window.open方法返回的是彈出的頁面的窗口對象（window），因此javascript:window.open將會在彈出一個窗口的同時，原頁面會沖掉原有內容并將返回的window對象輸出到原頁面中。如果在window.open后面加入window.opener=null;window.close()，則彈出窗口后，返回給原頁面的對象為空，則原頁面不執行任何其它操作。

劉錚 2007-10-15 17:18 發表評論

網頁中浮動對象總是顯示在窗體的某個位子的javascript實現

劉錚 — Thu, 04 Oct 2007 03:21:00 GMT

網頁中浮動對象總是顯示在窗體的某個位子的javascript實現

例子：


   50"> 走

劉錚 2007-10-04 11:21 發表評論

javascript 中innerText,innerHTML,outerText,outerHTML之間的不同和區別

劉錚 — Thu, 04 Oct 2007 02:39:00 GMT

javascript 中innerText,innerHTML,outerText,outerHTML之間的不同和區別

innerText是指設置和返回的是HTML元素的標簽對之間的內容。如果設置值中包含其他的HTML標簽，其他的HTML標簽符號將作為普通文本顯示在網頁中。讀取時，如果標簽對之間的內容包含其他的標簽，返回內容將不包括其他標簽符號本身。

outerText與innerText不同的是包括設置和返回HTML元素的標簽符號本身和其中嵌套的內容。

innerHTML也是設置和返回的是HTML元素的標簽對之間的內容，但是如果設置值中包含其他的HTML標簽，瀏覽器將按照這個被包含的HTML標簽的意義控制文本在網頁中的顯示的效果，讀取該屬性時，如果標簽對之間的內容包含其他的標簽，則將被包含的標簽符號本身連同其他內容一起返回。

outerHTML與innnerHTML不同的是包括設置和返回HTML元素的標簽符號本身和其中嵌套的內容

劉錚 2007-10-04 10:39 發表評論

JavaScript 中改變當前window和frame的page的方法

劉錚 — Tue, 11 Sep 2007 07:36:00 GMT

可以使用location

To load a different page into the current window or frame, assign the new page's URL string to the location.href property:

location.href=http://www.megacorp.com/products/framistan309.html;

location是window對象和document對像的屬性，所以window.location和document.location是相同的，可以相互使用

劉錚 2007-09-11 15:36 發表評論

javascript中的事件處理

劉錚 — Sat, 18 Aug 2007 06:54:00 GMT

function submitViaEnter(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var form = target.form;
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode =  = 13 || charCode =  = 3) {
if (validateForm(form)) {
form.submit( );
return false;
}
}
return true;
}

NN4和IE有所不同所以先要判斷evt是evt還是event

NN4中的目標元素為target，而IE4+中的目標元素為srcElement

這樣寫可以無論是IE還是NN，都可以接受。

劉錚 2007-08-18 14:54 發表評論

ShowModelDialog的返回值的問題

劉錚 — Fri, 10 Aug 2007 08:36:00 GMT

window.returnValue [ = vValue ]
Sets or retrieves the value returned from the modal dialog window

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

sURL

Required. String that specifies the URL of the document to load and display.

Return Value

Variant. Returns the value of the returnValue property as set by the window of the document specified in sURL .

也就是說window.returnValue可以設置模態對話框的返回值。

劉錚 2007-08-10 16:36 發表評論

document.all[]的意思

劉錚 — Tue, 07 Aug 2007 11:08:00 GMT

從IE4開始IE的object model才增加了document.all[],來看看document.all[]的Description:
Array of all HTML tags in the document.Collection of all elements contained by the object.
　　也就是說document.all[]是文檔中所有標簽組成的一個數組變量，包括了文檔對象中所有元素（見例1）。

IE’s document.all collection exposes all document elements.This array provides access to every element in the document.

　　document.all[]這個數組可以訪問文檔中所有元素。

例1（這個可以讓你理解文檔中哪些是對象）

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Document.All Example

Example Heading

This is a paragraph. It is only a paragraph.

Yet another paragraph.

This final paragraph has special emphasis.

　　它的執行結果是:

Example Heading

--------------------------------------------------------------------------------

This is a paragraph. It is only a paragraph.

Yet another paragraph.

This final paragraph has special emphasis.

--------------------------------------------------------------------------------
document.all.length=18
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
document.all[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all[14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(注意它只可以在IE上運行)
　　例2（訪問一個特定元素）

"http://www.w3.org/TR/html4/loose.dtd">

單擊DIV變色

　　上面的這個例子讓你了解怎么訪問文檔中的一個特定元素，比如文檔中有一個DIV

，你可以通過這個DIV的ID，NAME或INDEX屬性訪問這個DIV：

document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")則返回文檔中所有DIV數組，本例中只有一個DIV，所以用document.all.tags("div")[0]就可以訪問了。

　　3、使用document.all[]

例3

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Document.All Example #2

DHTML Fun!!!

4、標準DOM中的訪問方法

　　開頭就說過document.all[]不符合WEB標準，那用什么來替代它呢？document.getElementById

Most third-party browsers are “strict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.

　　這段話的意思是大多數第三方瀏覽器只支持W3C的DOM，如果你的網站用戶使用其他的瀏覽器，那么你最好避免使用IE的私有屬性。而且IE6也開始支持W3C　DOM。

畢竟大多數人還不了解標準，在使用標準前，你還可以在你的網頁中用document.all[]訪問文檔對象前面寫到WEB標準，今天繼續WEB標準下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問DOCUMENT中的任一個標簽：

　　1、getElementById()

　　getElementById()可以訪問DOCUMENT中的某一特定元素，顧名思義，就是通過ID來取得元素，所以只能訪問設置了ID的元素。

　　比如說有一個DIV的ID為docid：

　　那么就可以用getElementById("docid")來獲得這個元素。

"http://www.w3.org/TR/html4/loose.dtd">

ById

　　2、getElementsByName()

　　這個是通過NAME來獲得元素，但不知大家注意沒有，這個是GET　ELEMENTS，復數ELEMENTS代表獲得的不是一個元素，為什么呢？

　　因為DOCUMENT中每一個元素的ID是唯一的，但NAME卻可以重復。打個比喻就像人的身份證號是唯一的（理論上，雖然現實中有重復），但名字重復的卻很多。如果一個文檔中有兩個以上的標簽NAME相同，那么getElementsByName()就可以取得這些元素組成一個數組。

　　比如有兩個DIV：

　　那么可以用getElementsByName("docname")獲得這兩個DIV，用getElementsByName("docname")[0]訪問第一個DIV，用getElementsByName("docname")[1]訪問第二個DIV。

　　下面這段話有錯，請看forfor的回復，但是很可惜，IE沒有支持這個方法，大家有興趣可以在FIREFOX或NETSCAPE中調試下面這個例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中調試成功。）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Byname,tag

　　3、getElementsByTagName()

　　這個呢就是通過TAGNAME（標簽名稱）來獲得元素，一個DOCUMENT中當然會有相同的標簽，所以這個方法也是取得一個數組。

　　下面這個例子有兩個DIV，可以用getElementsByTagName("div")來訪問它們，用getElementsByTagName("div")[0]訪問第一個DIV，用

getElementsByTagName("div")[1]訪問第二個DIV。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Byname,tag

劉錚 2007-08-07 19:08 發表評論

JS的日期輸入判斷

劉錚 — Tue, 07 Aug 2007 10:36:00 GMT

             }

           }
         }
   }
}

劉錚 2007-08-07 18:36 發表評論

久久亚洲精品成人777大小说,亚洲中文字幕久久精品无码APP,77777亚洲午夜久久多喷

javascript中函數的深入理解

在IE中使用Javasript對xml的解析

prototype對ajax的支持

Ajax 對象

1.4.1. 使用 Ajax.Request類

1.4.2. 使用 Ajax.Updater 類

關于頁面兩個列表的數據傳輸的js算法

javascript的基本概念

javascript中定義類和對象最好的方法

轉貼javascript心得（二）

轉貼javascript學習心得

網頁中浮動對象總是顯示在窗體的某個位子的javascript實現

javascript 中innerText,innerHTML,outerText,outerHTML之間的不同和區別

JavaScript 中改變當前window和frame的page的方法

javascript中的事件處理

ShowModelDialog的返回值的問題

document.all[]的意思

Example Heading

DHTML Fun!!!

JS的日期輸入判斷

`Ajax` 對象

1.4.1. 使用 `Ajax.Request`類

1.4.2. 使用 `Ajax.Updater` 類