腳本更智能：從頭開始的質量JavaScript

>它可能直接在其中有代碼：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

不必擔心這些片段之間的差異。我們可以在網頁上添加JavaScript的多種方法 - 好與壞。我們將在本章稍後詳細介紹這些方法。

> JavaScript是由Netscape開發的，並在Netscape 2中實施，儘管它最初稱為Livescript。另一種語言Java越來越受歡迎，促使Netscape更改名稱以試圖兌現連接，因為JavaScript提供了在瀏覽器和Java Applet之間進行交流的能力。

但是，由於語言是由Netscape，其原始形式和Microsoft開發的，在類似但不同的JScript實現中，很明顯，Web腳本太重要了，無法留給供應商競爭的狼。因此，在1996年，開發被移交給了一個名為ECMA的國際標準機構，JavaScript成為Ecmascript或ECMA-262。

大多數人仍然將其稱為JavaScript，這可能是造成混亂的原因：除了語法，Java和JavaScript的名稱和相似之處外，都不一樣。

> JavaScript的限制

JavaScript >由於JavaScript無法訪問服務器環境，因此有許多任務，儘管在PHP中執行瑣碎的任務，但JavaScript：讀取和寫入數據庫或創建文本文件就無法實現。但是，由於JavaScript確實可以訪問客戶端環境，因此可以根據服務器端語言根本沒有的數據做出決定，例如鼠標的位置或元素的渲染大小。

activex？

>

>

如果您已經對Microsoft的JScript非常熟悉，則可能會在考慮“但是JavaScript可以使用ActiveX來做其中的某些事情”，但這是事實 - 但是ActiveX並不是Ecmascript的一部分。 ActiveX是一種特定於Windows的機制，用於允許Internet Explorer訪問COM（Windows腳本技術核心的組件對像模型），通常僅在受信任的環境（例如Intranet）中運行。我們會遇到一些具體的例外 - IE中沒有特殊安全性的ActiveX控件的示例（例如Flash插件和XMLHTTPRequest） - 但在大多數情況下，使用ActiveX的腳本不在這本書的範圍之內。

>

通常，運行客戶端的計算機不會像服務器那樣強大，因此JavaScript並不是進行大量數據處理的最佳工具。但是，對客戶的數據處理的即時性使此選項對少量處理有吸引力，因為可以立即收到響應；例如，表單驗證是客戶端處理的良好候選人。

>

但是要比較服務器端和客戶端語言與“更好”的視圖是誤導的。這兩個都不是更好 - 它們是用於不同工作的工具，它們之間的功能交叉很小。但是，客戶端和服務器端腳本之間的交互增加正在引起新一代的Web腳本，該腳本使用XMLHTTPRequest之類的技術來提出服務器數據的請求，運行服務器端腳本，然後在客戶端端管理結果。我們將在第18章中深入研究這些技術，並使用JavaScript構建Web應用程序。

安全限制

由於JavaScript在高度敏感的數據和程序的領域內運行，因此其功能受到限制，以確保無法惡意使用它。因此，簡直不允許JavaScript做很多事情。例如，它無法從計算機中讀取大多數係統設置，直接與硬件進行交互或導致程序運行。 此外，由於該元素的屬性，在JavaScript中不允許在JavaScript中允許某些特定的交互。例如，更改表單

的值 通常沒有問題，但是如果它是文件輸入字段（例如，），完全不允許寫信給它 - 一種限制，可以防止惡意腳本使用戶上傳他們沒有選擇的文件。

>

>有很多類似的安全性限制的示例，我們將在本書中介紹的應用程序中進行擴展。但總而言之，以下是JavaScript的主要限制和安全限制的列表，包括我們已經看到的那些。 JavaScript不能：

• >直接打開並讀取文件（在特定情況下（如第18章中詳細介紹），使用JavaScript構建Web應用程序）。
• >在用戶的計算機上創建或編輯文件（cookie除外，這是在第8章中討論的，使用cookie）。
>
• 讀取http post data。
• >讀取系統設置或用戶計算機中未通過語言或主機對象提供的任何其他數據（主機對像是窗口和屏幕之類的東西，這些內容由環境而不是語言本身提供。）
修改文件輸入字段的值。
更改A的顯示器的顯示。
• 關閉或修改腳本未打開的窗口的工具欄和其他元素（即，主瀏覽器窗口）。
>
>最終，JavaScript可能根本不支持。

>

>還值得記住的是，許多瀏覽器都包含允許更精確的選項，而不是簡單地啟用或禁用JavaScript。例如，Opera包括禁止腳本關閉窗口，移動窗口，寫入狀態欄，接收右鍵單擊的選項……列表還在繼續。您幾乎無法做到這一點，但是大多數情況下，您不需要嗎？這樣的選擇已經演變成壓制“煩人的”腳本（狀態欄滾動器，無右鍵單擊腳本等），因此，如果您遠離這些腳本，那麼這個問題只會很少出現。

>>

。

> JavaScript最佳實踐

JavaScript最佳實踐

最重視您應該為瀏覽器不支持腳本的人做什麼的問題。

最終問題是最難解決的，我們將重點關注第16章，JavaScript和可訪問性的解決方案。在本節中，我想查看良好JavaScript的三個核心原則：

漸進式增強 - 為沒有JavaScript的用戶提供

的用戶
• >不引人注目的腳本 - 將內容與行為分開
• 一致的編碼實踐 - 使用牙套和半終止量
>第一個原則可確保每當我們在網站上使用腳本時，我們都在考慮更大的情況。第二點使我們可以更輕鬆地維護我們，並為用戶提供更好的可用性和優雅的降解

。 （優雅的退化意味著，如果不支持JavaScript，瀏覽器可以自然地落在或“退化”到非腳本功能。）第三個原理使代碼更易於閱讀和維護。

> 為沒有JavaScript（漸進增強）的用戶提供 >用戶可能沒有JavaScript的原因有幾個：

>

• 他們使用的是根本不支持腳本的設備，或以有限的方式支持它。
• >它們是濾波javaScript的代理服務器或防火牆後面。
他們故意關閉JavaScript。
• >

第一點涵蓋了令人驚訝且不斷增長的設備，包括PDAS，包括WebTV和Sony PSP等小屏幕設備，包括Opera 5和NetScape 4等傳統JavaScript瀏覽器。

>上面列表中的最後一點可以說是最不可能的（除了其他扮演魔鬼的倡導者的開發人員之外！），但原因並不重要：有些用戶根本沒有JavaScript，我們應該容納它們。沒有辦法量化屬於此類別的用戶數量，因為眾所周知，從服務器中檢測JavaScript支持是不可靠的，但是我看到的數字將JavaScript的用戶比例放在5％和20％之間，具體取決於您是否將搜索引擎描述為“用戶”。

解決方案

>解決此問題的長期方法是使用HTML NoScript元素，其內容是由根本不支持腳本元素的瀏覽器渲染的內容，並且瀏覽器支持它，但腳本已關閉。 儘管這是一個合理的想法，但實際上，隨著時間的流逝，該解決方案變得越來越少，因為NoScript無法通過功能來區分。提供有限的JavaScript支持的瀏覽器將無法運行複雜的腳本，但是此類設備是具有腳本功能的瀏覽器，因此它們也不會解析NoScript元素。這些瀏覽器最終將一無所有。

解決此問題的一種更好的方法是從靜態HTML開始，然後使用腳本修改或在該靜態內容中添加動態行為。

>讓我們看一個簡單的示例。製作DHTML菜單的首選技術使用無序的列表作為主菜單結構。我們將在第15章，DHTML菜單和導航上全部專門針對此主題，但是這個簡短的例子說明了這一點：

>

>鏈接列表是普通的HTML，因此對於所有用戶都存在，無論是否啟用了腳本。如果支持腳本，我們的菜單腳本可以應用動態行為，但是如果不支持腳本，則內容仍然出現。我們沒有明確區分設備 - 如果瀏覽器可以處理它，我們只是提供了動態的內容，如果沒有，則靜態。

討論

>“傳統”方法是在純JavaScript中生成單獨的，動態的菜單，並在NoScript元素中具有後備靜態內容：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

，但是，正如我們已經看到的那樣，由於JavaScript支持不再是全有或全無的主張，因此各種各樣的設備將掉落。上面的方法為所有設備提供默認內容，並且僅在工作時才應用腳本功能。

>

這種腳本方法通常被稱為漸進式增強，這是我們在本書中使用的一種方法。

>

>不要問！

>> 均不應使用此技術和NoScript元素添加一條讀的消息，該消息讀：“請打開JavaScript繼續進行。”充其量，這樣的信息是自以為是的（“為什麼？”）；最糟糕的是，它可能是無助的（“我不能！”）或毫無意義（“什麼是JavaScript？”）。就像那些說“請升級您的瀏覽器”的飛濺頁面一樣，這些消息對普通網絡用戶也一樣有用，就像路標一樣，讀寫：“請使用其他汽車”。 有時，您可能會面臨一個情況，在沒有JavaScript的情況下，無法提供等效功能。在這種情況下，我認為可以發出一條靜態信息，該消息將這種不相容性告知用戶（當然，以非技術性的術語）。但是，在大多數情況下，除非實際上是唯一的方法，否則盡量避免提供這種信息。

將內容與行為分開（不引人注目的腳本）

> >將內容與行為分開意味著將網頁構造的各個方面與眾不同。杰弗裡·扎爾德曼（Jeffrey Zeldman）著名地將其稱為網絡開發的“三足腳凳”（Zeldman，J。使用網絡標准設計。新車手，2003年） - 包含內容（HTML），演示（CSS）和行為（JavaScript） - 不僅強調了每個方面功能的差異，而且還應該與他們分開良好的分離使得更易於維護，更容易訪問並在較舊或較低的瀏覽器中降低的網站。

>

解決方案

在一個極端，這與將內容與行為分開的理想直接相反，我們可以直接在屬性事件處理程序中編寫內聯代碼。這很混亂，通常應該避免：

我們可以通過獲取完成工作並將其抽象為函數的代碼來改善情況：> >定義一個為我們完成工作的函數，讓我們可以在單獨的JavaScript文件中提供大多數代碼：>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>但是，更好的方法是避免完全使用內聯事件處理程序。相反，我們可以利用文檔對像模型（DOM）將事件處理程序綁定到HTML文檔中的元素。 DOM是一個標準編程界面，諸如JavaScript之類的語言可以訪問HTML文檔的內容，從而消除了任何JavaScript代碼出現在HTML文檔本身中的需求。在此示例中，我們的HTML代碼看起來如下：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

這是我們要使用的腳本：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>這種方法允許我們不必編輯HTML添加，刪除或更改事件處理程序，並且由於文檔本身根本不依賴或參考腳本，因此不了解JavaScript的瀏覽器不會受到影響。該解決方案還提供了可重用性的好處，因為我們可以根據需要將相同的功能綁定到其他元素，而無需編輯HTML。

該解決方案取決於我們通過DOM訪問元素的能力，我們將在第5章中深入介紹文檔對像模型。

>

分離的好處 通過實踐內容和行為的良好分離，我們不僅會從更順暢的退化方面獲得實際好處，而且還可以從分離方面進行思考的優勢。由於我們已經將HTML和JavaScript分開了，而不是將它們組合在一起，而是當我們查看HTML時，不太可能忘記其核心函數應該描述頁面的內容，而不是獨立於任何腳本。

安迪·克拉克（Andy Clarke）指的是網絡標準的瑣事，這是一個有用的類比，一個瑣事看起來像一個好的網站應該：當您看碗時，您可以看到所有組成甜點的單獨層。相反的情況可能是水果蛋糕：當您看蛋糕時，您無法分辨每種不同的成分是什麼。您只能看到一塊蛋糕。

> 討論

>重要的是要注意，當您將事件處理程序綁定到這樣的元素時，直到元素實際存在之前，您才能做到這一點。如果將上一個腳本放在頁面的頭部部分中，則它將報告錯誤並且無法正常工作，因為在處理腳本時尚未呈現內容div。

>最直接的解決方案是將代碼放入加載事件處理程序中。它總是很安全，因為在文檔完全渲染之後，加載事件才發射： 或更清楚，有更多的打字：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

加載事件處理程序的問題是，頁面上只有一個腳本可以使用它。如果兩個或多個腳本試圖安裝加載事件處理程序，則每個腳本將覆蓋之前的處理程序。解決此問題的方法是以更現代的方式響應負載事件。我們將很快在“在同一頁面上使用多個腳本工作”的部分中查看。

使用牙套和分號（一致的編碼實踐） 在許多JavaScript操作中，括號和半柱都是可選的，因此，當它們不是必需的時，包括它們是否有任何價值？

解決方案

>儘管括號和半龍通常是可選的，但您應該始終包括它們。這使得代碼更易於閱讀 - 其他人以及將來您自己都可以幫助您避免在腳本中重複使用和重組代碼時避免問題（這通常會呈現出可選的Semicolon Essential。 例如，此代碼是完全有效的： 由於JavaScript解釋器中的一個名為Semicolon插入的過程，此代碼是有效的。每當解釋器找到兩個由一個或多個線路分離的代碼片段時，如果它們在一條線上，這些片段就不會有意義，那麼解釋器就會對待它們，就像它們之間存在半分離龍一樣。通過類似的機制，即使不存在，通常可以從語法中推斷出要在if-else語句中執行的代碼的括號，即使它們不存在。將此過程視為解釋器，為您添加缺少的代碼元素。

> 即使這些代碼元素並不總是必要的，即使在需要時使用它們，也更容易記住它們，並且易於讀取結果代碼，如果您確實使用它們。

我們上面的示例會更好地寫下：

此版本代表代碼可讀性中的終極：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

使用函數文字

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>隨著您對JavaScript語言的複雜性的經驗，您將使用函數文字根據需要創建匿名函數並將其分配給JavaScript變量和對象屬性很普遍。在這種情況下，函數定義應遵循半隆，該函數終止變量分配：

>

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

>

var saymething = function（message）> {  ...

};

>將腳本添加到頁面

>在腳本開始做令人興奮的事情之前，您必須將其加載到網頁中。有兩種技術可以做到這一點，其中一種比另一種技術要好得多。 >

解決方案

>正如我們之前看到的那樣，第一個也是最直接的技術是直接在腳本元素中編寫代碼：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

這種方法的問題是，在舊版和僅文本瀏覽器中 - 那些根本不支持腳本元素的瀏覽器 - 內容可以用作文字文本。

>

避免此問題的更好替代方案始終將腳本放在外部JavaScript文件中。這就是外觀：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

這將加載一個名為What-IS-JavaScript.js的外部JavaScript文件。該文件應包含您否則將其放入腳本元素中的代碼，例如：

>

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>使用此方法時，瀏覽腳本元素的瀏覽器將忽略它，也不會渲染任何內容（因為該元素為空），但是瀏覽器的瀏覽器確實會加載和處理腳本。這有助於將腳本和內容分開，並且更容易維護 - 您可以在多個頁面上使用相同的腳本，而無需在多個文檔中維護代碼的副本。

討論

>您可能會質疑不直接在腳本元素中使用代碼的建議。 “沒問題，”您可能會說。 “我只是將HTML評論圍繞著。”好吧，我必須不同意這一點：使用HTML評論“隱藏”代碼是一個非常不好的習慣，我們應該避免陷入。

>

圍繞代碼添加html註釋

>驗證解析器不需要閱讀評論，更不用說處理它們了。評論JavaScript完全有效的事實是一種過時的，這是對舊的，過時的實踐的回歸，該實踐對文檔的假設可能是不真實的：它假設該頁面被用於非驗證的解析器。 >

本書中的所有示例均在HTML中（與XHTML相反）提供，因此，如果您使用XHTML（正確地使用MIME類型的應用程序/XHTML XML），則可以通過驗證XML的文檔錄製的案件，該案件在BROSSER的情況下進行了驗證，因此可以通過驗證XHTML的評論來確定代碼中的評論。為了確保向前的兼容性（以及對您自己的編碼習慣的相關好處以及對單個項目的相關好處），我強烈建議您避免以這種方式在代碼周圍發表評論。您的JavaScript應始終包含在外部JavaScript文件中。

>

語言屬性

不再需要語言屬性。在Netscape 4及其同時代人是主要的瀏覽器的日子裡，<script> TAG的語言屬性具有嗅探以獲得上層支持的作用（例如，通過指定JavaScript1.3），並影響了腳本解釋器工作方式的小方面。<p>>但要指定JavaScript版本的JavaScript是eCmascript，並且語言屬性已被棄用以替代類型屬性。此屬性指定了隨附的文件的MIME類型，例如腳本和样式表，並且是您唯一需要使用的文件：</script>

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

從技術上講，該值應該是文本/ecmascript，但是Internet Explorer不明白這一點。就個人而言，如果這樣做，我會更快樂，僅僅是因為JavaScript（具有諷刺意味的）我很難鍵入一個字 - 我丟失了腳本失敗的次數，因為我輸入了type =“ text/javsacript”。

獲得多個腳本可以在同一頁面上工作

>當多個腳本無法一起使用時，幾乎總是因為腳本想在給定元素上為同一事件分配事件處理程序。由於每個元素對於每個事件都只能具有一個處理程序，因此腳本互相覆蓋彼此的事件處理程序。

解決方案

通常的懷疑是窗口對象的加載事件處理程序，因為頁面上只有一個腳本可以使用此事件。如果兩個或多個腳本正在使用它，那麼最後一個將覆蓋它之前的腳本。

>

我們可以從單個負載處理程序內調用多個功能，例如：

>

>但是，如果我們使用了此代碼，我們將與一件代碼綁定，我們必須在加載時完成所有需要做的一切。一個更好的解決方案將提供一種添加與其他處理程序不衝突的負載事件處理程序的方法。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>

>調用以下單個功能時，它將允許我們分配任意數量的加載事件處理程序，而沒有任何相互衝突：

>

該功能到位後，我們可以多次使用它：>

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

你明白了！

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

討論

> JavaScript包括添加（和刪除）事件偵聽器的方法，這些方法與事件處理程序類似，但允許多個偵聽器在元素上訂閱單個事件。不幸的是，Internet Explorer中的事件聽眾語法與其他瀏覽器中的語法完全不同：IE使用專有方法，而其他瀏覽器則實現了W3C標準。我們將經常遇到這種二分法，我們將在第13章中詳細討論基本動態HTML。 。

W3C標準方法稱為AddeventListener：

IE方法稱為attachevent：

>

如您所見，標準構造以事件的名稱（沒有“ ON”前綴），然後在事件發生時要調用的功能，以及控制事件冒泡的參數（請參閱第13章，基本動態HTML，有關此的更多詳細信息）。 IE方法獲取事件

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

handler

名稱（包括“

on

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

”前綴），然後是功能的名稱。

>

要將它們放在一起，我們需要添加一些測試來檢查每種方法的存在，然後再嘗試使用它。我們可以使用JavaScript運算符Typeof來執行此操作，該類型可以標識不同類型的數據（如“字符串”，“ number”，“ boolean”，“對象”，“ array”，“ function”，“ function”或“ undefined”）。一種不存在的方法將返回“未定義”。

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

還有一個附加的複雜性：在Opera中，可以觸發多個事件偵聽器的負載事件來自文檔對象，而不是窗口。但是我們不能僅僅使用文檔，因為這在較舊的Mozilla瀏覽器中不起作用（例如Netscape 6）。要繪製穿過這些怪癖的路線，我們需要測試window.addeventlistener，然後是document.addeventlistener，然後按照該順序進行window.attachevent。

>最後，對於不支持任何這些方法的瀏覽器（實際上是Mac IE 5），後備解決方案是將多個老式的事件處理程序鏈接在一起，以便在事件發生時依次被調用。我們通過動態構建一個新事件處理程序來做到這一點，該新事件處理程序在事件發生時調用新分配的處理程序之前調用任何現有處理程序。 （這項技術是由西蒙·威利森（Simon Willison）開創的。）

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

如果您不了解其工作原理的細節，請不要擔心 - 我們將探討第13章基本動態HTML中更詳細地涉及的技術。在那裡，我們將了解事件聽眾不僅對負載事件有用，而且對任何類型的事件驅動腳本有用。

。

隱藏JavaScript源代碼

>如果您曾經創建過自己為之驕傲的東西，那麼您將了解保護自己的知識產權的願望。但是網絡上的JavaScript本質上是一種開源語言。它以其源形式介紹瀏覽器，因此，如果瀏覽器可以運行它，一個人可以閱讀它。

>網絡上有一些應用程序聲稱提供源代碼加密，但實際上，您無能為力地加密另一個編碼器在幾秒鐘內無法解密的源代碼。實際上，其中一些程序實際上會引起問題：它們通常以使其較慢，效率降低或易於破壞的方式重新格式化代碼。我的建議？像瘟疫一樣遠離他們。

>但是，隱藏代碼的願望仍然存在。您可以做一些事情來混淆您的用戶可以看到的代碼，即使不是直接加密。

解決方案

已經刪除了所有註釋和不必要的空間的代碼很難閱讀，正如您可能期望的那樣，從此類代碼中提取單個功能的位置非常困難。以這種方式壓縮您的腳本的簡單技術可以剝奪除最確定的黑客外的所有方法。例如，以此代碼：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

我們可以簡單地刪除不必要的空格來將該代碼壓縮到以下兩行中：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

但是，請記住那個重要的詞 - 不必要。某些空格是必不可少的，例如var和typeof之後的單個空間。

>

討論 這種做法除了混淆的好處外，還具有很高的優勢。剝奪了評論和不必要的白道的腳本較小；因此，它們的加載速度更快，並且可能會更快地處理。

>

>但請記住，該代碼必須使用半隆線終止器和牙套進行嚴格格式（如我們在“使用括號和半隆（一致的編碼實踐）”部分所討論的那樣））；否則，刪除線路斷裂將使代碼線一起運行，並最終導致錯誤。

>開始壓縮之前，請記住製作腳本的副本。我知道這似乎很明顯，但是我已經犯了很多次，而且要變得如此小，這更加艱鉅！這些天我要做的是以完全間隔和評論的形式編寫和維護腳本，然後在發布之前通過大量搜索/替換錶達式運行它們。通常，我保留兩個腳本的副本，命名為myScript.js和myScript-commented.js或類似的內容。

>

>我們將在第20章中回到這個主題，以保持步伐，在這裡我們將在提高腳本的速度和效率的一系列技術中進行討論，並減少所需的物理空間。

調試腳本

調試是查找和（希望）修復錯誤的過程。大多數瀏覽器都內置了某種錯誤報告，並且幾個外部辯論者也值得研究。

了解瀏覽器的內置錯誤報告

Opera，Mozilla瀏覽器（例如Firefox）和Internet Explorer都內置了不錯的錯誤報告功能，但是Opera和Mozilla的調試工具是最有用的。

>

opera

從工具>高級> JavaScript控制台打開JavaScript控制台。您還可以通過轉到工具>“偏好>高級>內容”時將其設置為自動打開，然後單擊JavaScript選項按鈕以打開其對話框，並在錯誤時檢查Open JavaScript Console。

firefox和其他Mozilla瀏覽器

> 從工具> JavaScript控制台打開JavaScript控制台。 Windows的Internet Explorer

轉到工具> Internet選項>高級並取消選中選項禁用腳本調試，然後檢查選項顯示有關每個腳本錯誤的通知，以在發生錯誤時彈出一個對話框。 Mac

Mac

的Internet Explorer 轉到Explorer>“首選項”> Web瀏覽器> Web內容，然後檢查顯示腳本錯誤警報選項。

> Safari默認不包括錯誤報告，但是最近的版本具有“秘密”調試菜單，包括JavaScript控制台，您可以通過輸入以下終端命令來啟用該菜單。 （$代表命令提示

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>您還可以使用稱為Safari增強劑的擴展程序，該擴展程序包括將JavaScript消息轉移到Mac OS控制台的選項；但是，這些消息不是很有幫助。

>

了解各種瀏覽器的控制台消息可能需要一些練習，因為每個瀏覽器都提供瞭如此不同的信息。這是一個錯誤的示例 - 錯誤的函數調用：

Firefox提供了一個簡潔但非常準確的報告，其中包括發生錯誤的行號，以及描述，如圖1.1所示，“ Firefox中的JavaScript錯誤控制台”。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>圖1.1。 firefox
中的JavaScript錯誤控制台 如圖1.2所示，“歌劇中的JavaScript控制台”說明了Opera提供了極其詳細的報告，包括回溯到該錯誤發起的事件，發生在該行發生的線路的通知以及描述。 當在其他代碼最初調用的代碼中發生錯誤時，回溯有助於；例如，事件處理程序調用一個函數，該函數繼續調用第二個功能，而在這一點上發生了錯誤。 Opera的控制台將通過每個階段追溯此過程到其原始事件或呼叫。 > Internet Explorer提供了相當基本的報告，如圖1.3所示，“ Windows IE中的JavaScript控制台”。它提供了解釋器遇到錯誤的行數（這可能與實際問題的真實位置接近），以及錯誤類型的摘要，儘管它沒有解釋錯誤本身的細節。 （Internet Explorer在位於外部JavaScript文件中的錯誤方面特別糟糕。通常，它會報告的行號實際上是將腳本加載到HTML文件中的行的數量。）

>圖1.2。 opera

中的JavaScript控制台

>圖1.3。 Windows中的JavaScript控制台IE
>您可能會收集到的，我對Internet Explorer的錯誤報告並沒有給我留下深刻的印象，但是它總比沒有好：至少您知道發生了錯誤。

使用警報

警報功能是分析錯誤的一種非常有用的方法 - 您可以在腳本中的任何時候使用它來探測對象和變量，以查看它們是否包含您期望的數據。例如，如果您的函數具有多個條件分支，則可以在每個條件中添加一個警報以找出正在執行的：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

也許多年來的價值不會像應該一樣回到數字。您可以將腳本的開始添加到一個警報，該警報測試變量以查看其是什麼類型：>

從理論上講，您可以在警報對話框中放置任何數量的信息，儘管很長的數據可能會創建如此寬的對話框，以至於某些信息將被刪除或窗口外面。您可以通過使用逃生字符格式化輸出，例如n段中斷。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

使用try-catch

> try-catch構造是獲取腳本以“嘗試某些東西”的一種非常有用的方法，使您可以處理可能導致的任何錯誤。基本結構看起來像這樣：

>如果您不確定錯誤來自哪裡，則可以在非常大的代碼塊上包裹一個試用器以捕獲一般故障，然後將其擰緊，然後在該塊內逐漸較小的代碼塊擰緊。例如，您可以在函數的上半部分（在代碼的方便點），然後在下半部分佈試用撐桿，以查看錯誤的發生位置；然後，您可以在方便的位置再次將嫌疑人一半劃分為一半，然後繼續前進，直到您隔離了有問題的線。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>通常，我使用一個for-In迭代器來貫穿整個對象，並找出它說的內容：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

寫入頁面或窗口

>如果您在調試時正在檢查大量數據，或者要處理以復雜方式格式化的數據，那麼將數據直接寫入頁面或彈出窗口通常比嘗試處理大量警報對話框要好。如果您在循環中檢查數據，特別是您最終可能會產生數百個對話框，每個對話都必須手動解散？一個非常乏味的過程。

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

> 在這種情況下，我們可以使用元素的InnerHTML屬性將數據寫入頁面。這是一個示例，我們在其中使用數組的內容（數據）構建列表，然後將其寫入測試div：>

>我們還可以將數據寫入彈出窗口，如果沒有方便的位置將其放在頁面上很有用：

>您可以根據自己喜歡的方式格式化輸出，並以任何方式構建數據，以使您更容易找到錯誤。

>

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

>使用少量數據時，您可以通過將數據寫入主要標題元素來獲得類似的優勢：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

在跟踪連續或迅速變化的數據時，這種最終方法最有用，例如由setInterval函數處理的值（異步計時器我們將在第14章，時間和運動中正確碰到）。

>）。

使用外部調試器

我可以推薦兩個辯論者：

Mozilla和Firefox
• > Venkman Windows Internet Explorer的Microsoft Script Debugger
> Microsoft腳本調試器
>外部調試者是分析您的腳本的一種更詳細的方法，並且比其瀏覽器內部的功能更大。外部辯論者可以做一些事情，例如停止在特定點停止執行腳本，或者觀看特定的屬性，以便您知道對它們的任何更改，但是可能會導致。它們還包含允許您按行“逐步瀏覽”代碼的功能，以便幫助您找到可能僅短暫發生或其他難以隔離的錯誤。

>

>外部調試者是複雜的軟件，開發人員可能需要花費一些時間來學習如何正確使用它們。它們對於突出邏輯錯誤非常有用，並且本身就是學習工具的有價值，但是它們的能力有限，可以幫助瀏覽器不兼容：只有當您要尋找的錯誤是在調試器支持的瀏覽器中，它們才有用！

嚴格警告

如果您在Firefox中打開JavaScript控制台，您會發現它包含顯示錯誤和警告的選項。警告通知您代碼，儘管它本身不是錯誤的，但確實依賴於自動錯誤處理，使用棄用語法，或者以其他方式對Ecmascript規範不真實。 （要查看這些警告，可能有必要通過在地址中輸入有關以下地址來啟用嚴格的報告：config and javaScript.options.strict to true。）

例如，可變水果在下面的代碼中進行了兩次定義：

>

>我們應該省略第二個var，因為VAR用於首次聲明變量，我們已經完成了。圖1.4，“ Firefox中的JavaScript警告控制台”顯示了JavaScript控制台如何突出我們的錯誤作為警告。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>圖1.4。 firefox
中的JavaScript警告控制台 有幾種編碼錯誤可能會引起這樣的警告。例如：

• >重新刪除變量 - 如我們剛剛看到的。
>一開始就沒有聲明變量 - 此疏忽會產生“指定為未宣布的變量名稱”的警告。 例如，如果我們的代碼的第一行讀取果實='Mango'; ，則可能會出現。
• 假設存在一個對象 - 此假設會產生警告“對未定義屬性名稱”的警告。
例如，例如（document.getElementById）的測試條件假設存在getElementById方法，並且基於以下事實：JavaScript的自動錯誤處理能力將不存在此方法不存在的瀏覽器中的false方法轉換為false。為了在不看到警告的情況下達到相同的目的，我們會更具體地使用IF（typeof document.getElementById！='undefined'）。
>也有一些與功能相關的警告，以及其他一系列其他警告，其中包括我個人最喜歡的“無用表達”，這是由函數中無用的陳述產生的：

>

為了徹底介紹該主題，我建議Alex Vincent的文章解決JavaScript嚴格警告。

警告在某種意義上並不能阻止我們的腳本工作，但要避免警告有助於我們採用更好的編碼實踐，這最終會帶來效率優勢。例如，如果沒有嚴格的警告，腳本在Mozilla中運行得更快，這是我們在第20章中再次研究的主題，以保持步伐。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

鍵入轉換測試

>儘管我們不應該依靠類型轉換來測試可能不確定的值，但是對於可能為null的值來說，這樣做是完全可以的，因為ecmascript規範要求null評估為false。因此，例如，已經使用如上圖所示的使用類型運算符建立了GetElementById的存在，從那時起，它是完全安全的，以測試單個元素，如下所示，因為GetElementById返回了DOM中的不存在的元素：

摘要

>在本章中，我們討論了腳本的最佳實踐方法，這些方法將使我們的代碼易於閱讀和管理，並允許其在不支持的設備中優雅地降級。我們還開始介紹一些我們需要構建有用腳本的技術，包括無處不在的負載事件偵聽器，我們將用於本書中的幾乎每個解決方案！ >我們已經介紹了一些非常高級的東西，所以不用擔心一些很難接受。我們將回到我們在此處介紹的所有概念和技巧，因為我們在其餘的章節中進行。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

第5章。導航文檔對像模型

瀏覽器通過文檔對像模型（DOM）為JavaScript程序訪問網頁上的元素 - 標題，段落，列表，列表，樣式，ID，類，類和所有其他數據的內部表示。

可以將DOM視為由互連節點組成的樹。 HTML文檔中的每個標籤均由節點表示；嵌套在該標籤中的任何標籤都是與兒童相連的節點，或樹上的分支。這些節點中的每一個稱為元素節點。 （嚴格地說，每個元素節點代表一對標籤 - 元素的開始和結束標籤（例如

和

） - 或一個單個自關閉標籤（例如，xhtml中的
或
）。最有用的是文檔節點，文本節點和屬性節點。文檔節點代表文檔本身，是DOM樹的根。文本節點表示元素標籤之間包含的文本。屬性節點表示元素開放標籤中指定的屬性。考慮此基本HTML頁面結構：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

此頁面的DOM可以看到如圖5.1，“簡單的HTML頁面的DOM結構，可視化為樹層次結構”。

>

每個頁面都有一個文檔節點，但是其後代是從文檔本身的內容中得出的。通過使用元素節點，文本節點和屬性節點，可以通過JavaScript訪問頁面上的每條信息。

不過，

不僅限於HTML和JavaScript。 W3C DOM規範網站的解釋是如何解釋此問題的：

文檔對像模型是平台和語言中立的接口，它將允許程序和腳本動態訪問和更新文檔的內容，結構和样式。 因此，即使JavaScript和HTML的混合物是利用DOM的最常見組合的混合物，您從本章中獲得的知識可以應用於許多不同的編程語言和文檔類型。 為了使您成為“域的主人”，本章將解釋如何在網頁上找到您要查找的任何元素，然後更改它，重新佈置或完全刪除。

圖5.1。簡單的HTML頁面的DOM結構，可視化為樹層次結構

>

>訪問元素
訪問提供控制，控制是電源，而您是電源程序員，對嗎？因此，您需要訪問網頁上的所有內容。幸運的是，JavaScript可讓您僅使用幾個方法和屬性訪問頁面上的任何元素。 >

解決方案

>儘管可以像路線圖這樣的HTML文檔瀏覽嗎？從家裡開始，一次朝著目標一個節點進行工作？這通常是找到元素的效率低下的一種方法，因為它需要大量代碼，並且文檔結構的任何更改通常意味著您必須重寫腳本。如果您想快速而輕鬆地找到一些東西，則應該在手的背面紋身的方法是document.getElementById。

>假設您已經有正確的標記，getElementById將允許您通過其唯一的ID屬性值訪問任何元素。例如，想像一下您的網頁包含此代碼：>

>您可以使用A元素的ID屬性來直接訪問該元素本身：>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>變量ElementRef的值現在將引用到a元素 - 您在ElementRef上執行的任何操作都會影響該精確的超鏈接。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

從名稱可以看出，getElementsbytagname取標籤名稱並返回該類型的所有元素。假設我們有此HTML代碼：

>

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

我們可以檢索包含每個超鏈接的集合，例如：

>

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

>變量錨的值現在是元素的集合。集合類似於數組，因為使用方括號表示集合中的每個項目都在集合中引用，並且這些項目以數字索引從零開始。 getElementsbytagname返回的集合按元素順序對元素進行分類，因此我們可以參考每個鏈接：

>

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

使用此集合，您可以通過元素迭代並在其上執行操作，例如使用元素Nodes的className屬性分配類：

與getElementById不同，只能在文檔節點上調用，getElementsBytagName方法可從每個元素節點獲得。您可以通過在特定元素上執行getElementsBytagname方法的範圍。 getElementsBytaGname只會返回元素，這些元素是該方法所在的元素的後代。

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

如果我們有兩個列表，但要將新類分配給一個列表中的鏈接，我們可以通過在其父母列表上調用getElementsbytagname來專門針對這些元素：

>

<div >

為了定位恆星列表，我們需要獲得對父元素元素的引用，然後直接在其上撥打getElementsbytagname：

變量星人的值將是無序列表中星星中的A元素的集合，而不是頁面上所有A元素的集合。 >

Example 1.2. separate-content-behaviors.js <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
} <br>
 <br>
var contentDiv = document.getElementById('content'); <br>
 <br>
contentDiv.onmouseover = function() <br>
{ <br>
  changeBorder('red'); <br>
}; <br>
 <br>
contentDiv.onmouseout = function() <br>
{ <br>
  changeBorder('black'); <br>
};

dom 0 collections

window.onload = function() <br>
{ <br>
  var contentDiv = document.getElementById('content'); <br>
 <br>
  ... <br>
};

HTML文檔中的許多“特殊”元素可以通過更直接的方式訪問。文檔的身體元素可以作為文檔訪問。文檔中所有表格的集合可以在文檔中找到。文檔中的所有圖像都可以在document..images中找到。

> >

實際上，這些集合中的大多數自從DOM被W3C標準化之前就已經存在，通常稱為DOM 0屬性。

>由於這些功能的初始實現不是標準化的，因此這些集合在朝著標準符合性方面的瀏覽器中證明是不可靠的。例如，一些Mozilla瀏覽器的早期版本（例如，Firefox）不支持XHTML文檔上的這些收藏。

今天的瀏覽器通常在支持這些收藏方面做得很好；但是，如果您確實遇到了問題，那麼值得嘗試使用更多的詳細getElementsbytagname方法來訪問相關元素。例如，您可以使用：

，而不是文檔。

var body = document.getElementsbytagname（“ body”）[0];

討論

如果您確實需要按元素逐步瀏覽DOM層次結構元素，則每個節點都有幾個屬性，使您能夠訪問相關的節點：

> node.ChildNodes - 一個包含對指定節點的每個孩子的源訂單引用的集合，包括元素和文本節點

>

> node.firstchild - 指定節點的第一個子節點

> node.lastchild - 特定節點的最後一個子節點

• > node.parentnode - 指定節點的父元素的引用
> node.nextsibling - 文檔中的下一個節點，其父母與指定的節點
• 具有相同的父
> node.previoussibling - 以前的元素與指定節點
• 相同的級別
• >如果特定節點不存在這些屬性（例如，父的最後一個節點將沒有下一個兄弟姐妹），則它們的值為null。
看這個簡單的頁面：
• 可以使用以下任何表達式引用帶有ID star2的列表項目：>

whitespace節點

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

一些瀏覽器將在任何從文本字符串（例如HTML文件）中解釋的元素結構中的元素節點之間創建空格節點。空格節點是僅包含Whitespace（Tabs，Space，New Lines）的文本節點，以幫助將其寫入源文件中的代碼進行格式化。

> 當您使用上述屬性通過節點遍歷DOM節點時，應始終允許這些空間節點。通常，這意味著檢查您檢索到的節點是一個元素節點，而不僅僅是一個分開元素的空格節點。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>有兩種簡單的方法來檢查節點是元素節點還是文本節點。文本節點的nodeName屬性將始終為“ #text”，而元素節點的nodeName將識別元素類型。但是，在區分文本節點和元素節點時，更容易選中nodeType屬性。元素節點具有1個

的結節，而文本節點的結節為3。您可以在檢索元素時將此知識用作測試：

>示例5.9。 Access_Element4.js（摘錄）
 
var star2 = document.getElementById（“ star1”）。 sextsibling;  
 
while（star2.nodeType ==“ 3”）
{
 star2 = star2.nextsibling;  
}

使用這些域屬性，有可能在根HTML元素上開始您的旅程，並最終被埋葬在某些深nested Fieldset的傳說中嗎？這只是遵循節點的問題。

>

創建元素和文本節點

JavaScript

>不僅有能力修改DOM中的現有元素；它還可以創建新元素並將它們放置在頁面結構中。

解決方案

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

變量新建商將是一個新的A元素，準備插入頁面。

>用XML Mime Type

指定文檔中的命名空間

>如果您要編碼JavaScript，以用於使用MIME類型的應用程序/XHTML XML（或其他某些XML MIME類型），則應使用方法createElementns，而不是CreateElement，以指定namespace的名稱空間：您要為哪個元素：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

>

此區別適用於許多DOM方法，例如Removelement/RemoveElementns和GetAttribute/getAttributens；但是，我們不會在本書中使用這些方法的命名空間增強版。 Simon Willison

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

簡要說明了與JavaScript和他的網站上不同的MIME類型一起工作。

元素內部的文本實際上是該元素的兒童文本節點，因此必須單獨創建它。文本節點與元素節點不同，因此它們具有自己的創建方法，createTextNode：>

如果您正在修改現有文本節點，則可以通過NodeValue屬性訪問其包含的文本。這使您可以在文本節點中獲取並設置文本：

變量oldText的值現在為“ monoceros”，文本節點內的文本現在為“ pyxis”。

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

>

>您可以使用其附錄方法將元素節點或文本節點插入現有元素的最後一個孩子。此方法將在所有現有的孩子之後放置新節點。

考慮html的這個片段： 我們可以使用DOM方法在段落結束時創建和插入另一個鏈接：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

變量紐子的值將是對新插入的元素的引用。

>

如果我們要在此代碼執行HTML代碼後翻譯DOM的狀態，則看起來像這樣：>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>我們沒有為新元素指定任何屬性，因此它目前尚未鏈接。在“讀取和編寫元素的屬性”部分中，不久將解釋了指定屬性的過程。

>

討論

有三種基本方法可以將新元素或文本節點插入到網頁中。您使用的方法將取決於您希望將新節點插入的點：作為元素的最後一個孩子，在另一個節點之前或作為節點的替換。上面解釋了像最後一個孩子一樣附加元素的過程。您可以使用其父元素的插入方法在現有節點之前插入節點，並且可以使用其父元素的替換方法替換節點。 >

為了使用插入，您需要對要插入的節點以及您希望插入的節點進行引用。考慮此HTML代碼：

>我們可以通過從其父元素（段落）調用插入之前插入一個新鏈接：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>

變量紐子的值將是對新插入的元素的引用。

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

>

如果我們要在此操作後轉化為html DOM的狀態，則看起來像這樣：

而是，我們可以使用替代技術完全替換現有鏈接：>

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

dom然後看起來像這樣：

>

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

更改元素的類型

<div >

>您的訂購列表是否有些無序？您的標題有令人羨慕的段落嗎？使用一些JavaScript知識，可以完全更改元素的類型，同時保留其孩子的結構。

解決方案

>沒有直接，簡單的方法來更改元素的類型。為了實現這一壯舉，您必須執行一些雜耍表演。

>假設我們想將此段落更改為div：>

我們需要創建一個新的div，將每個段落的孩子都移入其中，然後將新元素交換為舊元素：

>這裡唯一的陌生線應該是為每個段落的孩子創建克隆的點。 Clonenode方法產生了所謂的節點的相同副本。通過傳遞此方法，論點是正確的，我們指出，我們希望該元素的所有孩子與元素本身一起復制。使用CloneNode，我們可以在新的Div下鏡像原始元素的孩子，然後在我們複製完成後刪除段落。 >在某些情況下，克隆節點很有用，但事實證明，有一種更乾淨的方法可以解決此特定問題。我們可以簡單地將現有段落的子節點移至新的Div。 DOM節點一次只能屬於一個父元素，因此將節點添加到DIV中也將其從段落中刪除：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>

請注意更改DOM 的節點結構 >

集合中的元素在DOM中發生更改時會自動更新 - 即使您在更改發生之前將該集合複製到變量中。因此，如果您從DOM中刪除了您一直在工作的集合中包含的元素，則該元素參考也將從集合中刪除。這將改變集合的長度以及在刪除元素後出現的任何元素的索引。 當執行影響DOM節點結構的操作（例如將節點移至新父元素）時，您必須謹慎對待迭代過程。上面的代碼使用一個僅訪問段落的第一個孩子的W循環，因為每次重新定位孩子時，子諾德斯集合的長度都會減少一個，並且集合中的所有元素都會隨身攜帶。一個帶有計數器變量的循環無法正確處理所有孩子，因為它假設該集合的內容在整個循環中保持不變。

討論

>沒有簡單的方法將元素的屬性複製到其替換。 （如果您查看DOM規範，則看起來好像是。不幸的是，Internet Explorer對相關屬性和方法的支持只是不符合任務。）如果您希望新元素具有相同的ID，類，HREF等，則必須以手動複製該值：>>>

>>

>> >

刪除元素或文本節點

>一旦元素已經超過了其實用性，就該給它切碎了。您可以使用JavaScript從DOM刪除任何元素。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>

解決方案

removechild方法從其父母那裡刪除了任何子節點，並返回對刪除對象的引用。 > 讓我們從此HTML開始：

我們可以使用removechild從其父段中刪除超鏈接，例如：

>變量刪除的子將是對A元素的引用，但是該元素不會位於DOM中的任何位置：它將僅在內存中可用，就像我們剛剛使用CreateElement創建了它一樣。這使我們能夠將其重新安置到頁面上的另一個位置，或者我們可以簡單地讓變量在腳本末尾消失，並且參考將完全丟失 - 有效地刪除了它。遵循上述代碼，DOM最終將像這樣：>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

當然，您無需將返回值從removechild分配給變量。您可以執行它，而完全忘記了元素：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

討論

>如果要刪除的元素有要保留的孩子（即，您只想通過刪除父母來“解開”他們），則必須救出這些孩子，以確保在刪除父母時他們留在文件中。您可以使用已經提到的插入方法來實現此目標，當在DOM中包含的元素上使用時，首先將其刪除，然後在適當的點插入。

>以下html中的段落包含多個孩子：

>我們可以循環瀏覽段落的兒童款項，並在刪除元素本身之前單獨搬遷其每個孩子：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

該頁面的DOM現在看起來像這樣：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

讀寫元素的屬性

HTML元素中最常用的部分是其屬性？它的ID，類，HREF，標題或其他一百個可以包含在HTML標籤中的信息中的任何一個。 JavaScript不僅能夠讀取這些值，而且還可以寫下它們。

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

>

解決方案

>存在讀取和編寫元素屬性的兩種方法。 getAttribute允許您讀取屬性的值，而setAttribute允許您編寫它。 考慮此html：

我們將能夠像這樣讀取元素的屬性：

>

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

變量錨固的值將為“ antares”，變量錨定的值將為“遙遠的位置”。

要更改超鏈接的屬性，我們使用setAttribute，將其傳遞給要更改的屬性的名稱，以及我們要將其更改為：>的值

<div >

變量newtitle的值現在將“不那麼遙遠”。

>

討論

Example 1.2. separate-content-behaviors.js <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
} <br>
 <br>
var contentDiv = document.getElementById('content'); <br>
 <br>
contentDiv.onmouseover = function() <br>
{ <br>
  changeBorder('red'); <br>
}; <br>
 <br>
contentDiv.onmouseout = function() <br>
{ <br>
  changeBorder('black'); <br>
};

在從自由漫遊的Netscape Wilderness到現代基於標準的基於標準的地形更加緊密定義的旅程中，DOM標準已經為與HTML打交道了相當多的額外語法。這些附加功能中最普遍的是dom屬性和HTML屬性之間的映射。

>

將文檔解析為其DOM形式時，為元素的屬性創建了特殊屬性節點。這些節點無法作為該元素的“孩子”訪問：僅通過上述兩種方法才能訪問它們。但是，作為對原始DOM實現的回報（稱為DOM 0，零建議這些功能在標準之前出現），當前的DOM規格包含HTML特定的其他功能。特別是，屬性可直接作為元素的屬性訪問。因此，可以通過link.getAttribute（“ href”）以及通過link.href。

>此快捷方式語法不僅更清潔，更可讀性：在某些情況下，也有必要。 Internet Explorer 6及以下版本將不會通過setAttribute進行元素的視覺顯示。因此，使用SetAttribute對元素的類，ID或樣式進行的任何更改都不會影響其顯示方式。為了使這些更改生效，必須通過元素節點的屬性特定屬性進行。 為了進一步混淆問題，當讀取特定於屬性的屬性時返回的值在瀏覽器之間變化，這是Konqueror中最顯著的變化。如果不存在屬性，Konqueror將返回null作為特定於屬性屬性的值，而所有其他瀏覽器將返回一個空字符串。在更具體的情況下，一些瀏覽器將返回link.getAttribute（“ href”）作為絕對URL（例如，“ http://www.example.com/antares.html”），而另一些則返回實際屬性值（例如，“ antares.html”）。在這種情況下，使用點屬性是更安全的，因為它始終返回跨瀏覽器的絕對URL。

那麼，解決這些問題的一般解決方案是什麼？

基本規則是：如果您確定屬性已被分配了一個值，則可以安全地使用點屬性方法訪問它。如果您不確定是否設置了屬性，則應首先使用其中一種DOM方法來確保其具有值，然後使用點屬性來獲得其值。

讀取

一個未驗證的屬性，請使用以下內容：>

這確保屬性在獲取其值之前存在，而不是null。

寫入>未經驗證的屬性，請使用以下代碼：>

此代碼確保首先正確創建屬性，然後以某種方式設置Internet Explorer如果屬性會影響元素的可視化顯示。

此規則對您可以保證的存在的屬性有一些例外。這些“必備”屬性中最著名的是樣式和類別，對於任何給定的元素始終有效；因此，您可以立即將它們引用為dot屬性（分別分別為element.Style and element.ClassName）。

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>我們必須注意的另一個屬性是標籤的屬性。它遵循與類相同的規則，但其屬性表格為HTMLFOR。使用getAttribute/setAttribute，我們編寫element.getAttribute（“ for”），但是在Internet Explorer中它的element.getAttribute（“ htmlfor”）。

>獲取具有特定屬性值的所有元素

當您需要修改具有相同類或標題的所有元素時，找到具有特定屬性的所有元素的能力。

解決方案

為了找到具有特定屬性值的元素，我們需要檢查該屬性頁面上的每個元素。這是一個非常密集的操作，因此不應輕易進行。如果您想找到所有帶有類型=“複選框”的輸入元素，最好先將搜索限制為輸入元素：> >這將比通過頁面上的每個元素進行迭代並檢查其類型所需的計算。但是，當您需要找到具有相同屬性值的不同類型的元素時，此解決方案中介紹的功能是理想的。

>檢查頁面上的每個元素的最簡單方法是循環瀏覽getElementsbytagname返回的集合（“*”）。這種方法的唯一問題是Internet Explorer 5.0和5.5不支持標籤選擇的星號通配符。幸運的是，這些瀏覽器支持文檔。所有屬性，該屬性是包含頁面上所有元素的數組。 getElementsByAttribute用簡單的代碼分支處理此問題，然後繼續檢查給定屬性值的元素，將匹配添加到要返回的數組中：>

> getElementsbyAttribute中的許多代碼都與本章前面提到的屬性處理中的瀏覽器差異有關，該部分稱為“讀取和編寫元素的屬性”。如果所需的屬性是類或用於，則使用必要的技術。作為檢查類屬性的匹配時，作為額外的獎勵，如果元素已分配了多個類，則該函數會自動檢查其中的每個類別，以查看其是否匹配所需值。

添加並刪除多個類，以/從元素

組合多個類是一種非常有用的CSS技術。它通過允許在一個元素上組合多種不同的樣式來提供一種非常原始的繼承手段，從而使您可以在整個站點中混合和匹配不同的效果。它們在突出顯示元素之類的情況下特別有用：可以添加一個類，該類可以突出顯示元素而不打擾其他類可能已應用於該元素的任何其他視覺屬性。但是，如果您要在JavaScript中分配類，則必須小心，不要無意間覆蓋先前分配的類。

解決方案

任何元素的類可通過其className屬性訪問。此屬性允許您既可以讀寫當前應用於該元素的類。因為它只是一個字符串，所以使用className最困難的部分是您需要處理它用來表示多個類的語法。

>

>元素的類名稱屬性中的類名是由空格分開的。第一類名稱沒有任何內容，最後一堂課的名稱也不是任何內容。這使得可以輕鬆地在類列表中添加一類：只需將一個空間和新的類名稱加入到ClassName的末尾。但是，您需要避免添加列表中已經存在的類名稱，因為這將使刪除班級更加困難。您還需要避免在className值開始時使用一個空間，因為這會在Opera 7中導致錯誤：>

首先，AddClass創建一個正則表達式模式，其中包含要添加的類。然後，它使用此模式測試當前的類名值。如果類名稱不存在，我們會檢查一個空的className值（在這種情況下，將類名稱分配給屬性逐字化），或者我們附加到現有值一個空間和新的類名稱。

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

分開類

> 一些用於查找類的正則表達示例使用“邊界特殊字符”（b）單詞分開的類。但是，這將無法與所有有效的類名稱（例如包含連字符的名稱）一起使用。

> 刪除類的過程使用的正則表達式模式與我們用來添加類的過程相同，但我們不需要執行盡可能多的檢查：

>在RemoveClass在className屬性值的副本上執行替換正則表達式之後，它通過刪除任何尾隨空間（當我們在多個類別類中刪除最後一個類），然後將其分配給目標className。

>

>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>

>

>

摘要

本章介紹了您需要的基本但功能強大的工具，以操縱文檔對像模型。當您操縱任何網頁時，重要的是要了解DOM（在瀏覽器中看到的所有內容）。知道如何創建，編輯和刪除DOM的一部分對於理解本書的其餘部分至關重要。掌握了這些技術後，您將成為一名熟練的JavaScript程序員。

第7章。使用Windows和Framames

>本章涉及簡單的窗口和框架操縱，包括諸如打開彈出窗口，在幀之間進行通信（從iframe讀取數據所涉及的技術），第18章將在第18章中介紹，使用JavaScript構建Web應用程序。 ）

>很多人覺得窗戶的操縱類似於黑暗的一面。他們認為，窗口是用戶GUI的一部分，而不是文檔的一部分，並且由於JavaScript是文檔腳本語言，因此沒有業務操縱Windows。

>我通常傾向於同意，但我知道有時候意見是一種奢侈品。如果您的客戶要求提供特定的東西，那麼您不一定會改變他們的主意，或者自由地根據這樣的原則拒絕工作。在本章中，我們將介紹一系列實用的窗口和框架操縱任務，同時對它們的使用可能引起的可用性和可訪問性問題保持敏感。

> 但是，請注意，存在局限性，窗戶腳本的某些品種特別不友好。我們不會處理積極的策略，例如關閉或修改用戶的主要窗口，在屏幕上移動窗口，或打開全屏或“無鍍”窗口。這些正是給JavaScript一個壞名稱的濫用類型。

> 在本章的大部分時間裡，我們將仔細研究窗口對象的屬性和方法。這些都是由不同的瀏覽器以多種方式實施的，自JavaScript標準化以來，其中大多數已經使用。

>。

>我們將有很多代碼分支要處理，但是我們會避免通過仔細使用對象檢測，檢測對像或功能來測試兼容性而不是檢測特定瀏覽器的過程。

使用彈出窗口

您應該使用彈出窗口嗎？我最考慮的答案是：如果您可以幫助您。彈出式窗口從營銷人員對它們的積極使用中獲得了糟糕的聲譽，但即使要求的彈出窗口也可能是具有良好可用性的障礙。

>

>我不會說彈出窗口永遠不合適，但是我會說他們很少如此。然而，在某些情況下，彈出打開新窗口可以說是最合適的解決方案：在線調查可能是一個例子，因為格式可能會使內容更平易近人； DHTML遊戲是另一回事，因為視口可能需要具有已知尺寸。 >

>我將通過討論彈出窗口創建的問題，然後提供一種務實的方法來使用它們來減輕這些問題。

>彈出窗口有什麼問題？

>大多數彈出窗口腳本的主要問題是他們不考慮用戶的需求？它們僅滿足設計師的需求。結果？我們都看過它們：

>從鏈接生成的彈出窗口，儘管這些鏈接在不可用時無能為力

>
• >沒有狀態欄的彈出窗口，因此您不一定要判斷文檔是否已加載或停滯，仍在加載等。
• >彈出窗口無法使用戶能夠調整窗口的大小，並且無法生成可能在窗口外擴展的內容的彈出式彈出窗口
“鍍鉻”的窗口或向用戶屏幕的全尺寸打開
這些問題不僅是可用性的問題，而且是可訪問性的問題。例如，屏幕閱讀器用戶可能不會被新窗口打開的設備通知。如果他們試圖回到瀏覽器歷史記錄（他們不能），這顯然可能會引起混亂。如果窗口全尺寸打開，則可能會發生同樣的事情：您和我可能熟悉使用任務欄監視打開的窗口，但並非所有的計算機用戶都是 - 他們甚至可能沒有意識到新窗口已經彈出。
• >
如果您要使用彈出窗口，尋找此類問題，並且通常對其影響敏感，將使您的彈出窗口與用戶更加友好，而對您的良心卻更少。

>另外，請記住，從開發人員的角度來看，彈出窗口不能保證可以正常工作：現在，大多數瀏覽器都包含抑制彈出窗口的選項，並且在某些情況下，即使響應用戶事件而生成彈出窗口，也會發生抑制。

>您可能能夠像不支持腳本的情況一樣允許這樣做：通過確保彈出窗口的基礎觸發器，如果​​彈出窗口失敗，仍然可以做一些有用的事情。或者，您可能會打開代碼一個窗口，然後檢查其自己的關閉屬性，以查看它是否實際顯示（我們將在下一個解決方案中查看此技術）。

>

>但是，這些方法都不能保證與每個瀏覽器和彈出式阻滯劑一起使用，因此，對於可用性的原因而言，避免在可能的情況下避免使用彈出窗口越來越簡單。

>如何最大程度地減少問題？

我們需要做的是為彈出窗口的道德使用建立一些黃金規則：>

確保在不可用時正確觸發鏈接降低。
• >
始終包含狀態欄。
始終包含一個溢出內容的機制：允許窗口調整大小，或者允許滾動欄出現，或兩者兼而有之。
不要打開大於640×480像素的窗戶。通過限制彈出窗口的大小，您可以確保它們在絕大多數監視器上的主要窗口小。這增加了用戶意識到彈出窗口是一個新窗口的可能性。

解決方案

這是一個基於上述準則的通用彈出函數：>

以及限制窗口的大小，此腳本拒絕創建沒有溢出的彈出窗口，因此，如果您不指定“滾動”，“ ressize”或“ acter”，則為溢出參數，則將使用“兩者”的默認設置。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>三元運算符

>此腳本使用稱為三元運算符的快捷表達式來評估每個溢出選項。三元操作員使用？和：字符劃分評估的兩個可能結果，相當於一對if..else條件。考慮使用此代碼：

該代碼等效於下面的標記：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>

不需要括號，但是您可能會發現它們使表達式更易於閱讀。有關此和其他有用的快捷方式的更多信息，請參見第20章，保持步伐。 >擁有彈出功能後，您可以以多種方式調用它。例如，您可以使用常規鏈接：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

如果腳本不可用，這將像其他任何鏈接一樣起作用，但是如果可用腳本，該腳本可以觸發單擊事件處理程序，將其HREF傳遞給MakePopup功能以及其他設置。處理程序的返回值取決於窗口是否實際打開；阻止彈出窗口的瀏覽器將按照鏈接按照鏈接遵循：

通常，如果您有一個需要生成窗口的腳本，則可以使用url直接調用makePopup函數：

如果您需要在腳本稍後關閉該窗口，則可以使用存儲的窗口參考上的關閉方法來進行：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

>

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

討論。

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

窗口。開機方法還可以採用許多參數（除了URL和窗口名稱），該參數指定窗口是否應具有特定的裝飾，例如菜單欄，工具欄或地址（位置）欄。這些參數以逗號限制的字符串傳遞給窗口的第三個參數。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

在我們的popopup函數中，梅納巴爾，工具欄和位置參數都是不可預見的，因為這些元素對於彈出窗口很少有用 - 畢竟它們是導航工具。彈出窗口主要用於一頁接口，或不建議使用歷史導航的彈出式接口，例如我們的調查示例或銀行網站的登錄過程。

> 如果需要，您可以更改這些參數，但是狀態參數應始終設置為“是”，因為將其關閉會破壞良好的可用性。 （我知道 - 我已經提到過，但是我再說一遍，因為它很重要！）>

>可解析的參數可能沒有任何效果 - 在某些瀏覽器中，無論是通過設計還是由於用戶偏好的結果，也無法創建不可避免的窗口，即使您將此值設置為否。實際上，在Mac OS X的Opera 8中，根本不可能創建自定義大小的窗口 - 創建的窗口將顯示為當前窗口中的新標籤。該特定例外本身可能並不重要，但它可以說明對創建窗口屬性的控制並不能絕對保證的一般點。

>

>打開新窗口後，您可以使用對象的焦點方法將其重點放在焦點中。這通常不是必需的 - 通常，默認情況下會發生 - 但是當您用多個窗口腳本腳本時，該技術可能會很有用：

或者，您可能需要打開一個彈出窗口，但將焦點保留在主窗口中（從而創建所謂的“ Popunder”）。您可以使用其模糊方法將焦點從窗口中取出：

但是，在這種情況下，您無法預測焦點將轉移到下一步的位置，因此重新關注主要窗口是更可靠的：>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>在新窗口中打開現場鏈接

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

在HTML 4和XHTML 1的嚴格版本中，鏈接的目標屬性不再存在。對此的一種解釋是，網頁根本不應該在新窗口中打開鏈接。另一個是目標沒有通用語義，因此不應在HTML中定義。 （CSS 3的工作草案包括一組鏈接演示的目標屬性，最終可以看到將此機制交給CSS。我個人希望這永遠不會超越草稿階段，因為它與CSS無關：界面控制與設計語言相比，在語義上的語言中，界面控制不太合適！）

還有其他解釋，論點很長（有時甚至很乏味），但可以說您可能會發現自己需要解決這個問題的解決方案。無論您的個人觀點是什麼，這都是網絡開發客戶的共同要求。

>

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

解決方案

此腳本通過外部屬性值標識鏈接。 REL屬性是描述鏈接與其目標之間關係的一種方式，因此其用於識別指向另一個站點的鏈接的使用是語義上的無關：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

如果這樣識別每個外部鏈接，則一個文檔。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

討論

使用單個範圍內的事件處理程序是最有效的方法 - 它比在所有鏈接中迭代並分別將處理程序綁定到每個鏈接的方法要好得多。我們可以通過引用事件目標屬性來找出實際單擊的元素。有關事件和事件屬性的更多信息，請參見第13章，基本動態HTML，但這是有關情況的簡要摘要。

>當前瀏覽器採用了兩個完全不同的事件模型。該腳本建立了應該通過尋找e（Mozilla瀏覽器使用的事件參數）來使用的腳本，並且已被大多數其他瀏覽器採用 - 與Internet Explorer使用的窗口相反。然後，它保存了適用於使用的模型的對象屬性：Mozilla的目標和喜歡瀏覽器，或IE。

目標對象（如果不是null）可以是以下三件事之一：鏈接節點，鏈接中的元素或文本節點或其他節點。我們希望前兩個情況由我們的腳本處理，但是可以安全地忽略從最後情況引起的點擊。我們要做的是遵循事件目標的父節點的踪跡，直到我們找到鏈接或到達身體元素。

>我們擁有一個統一的目標鏈接後，我們只需檢查具有正確值的REL屬性即可；如果存在，我們可以使用鏈接的HREF打開一個窗口，如果所有這些都成功（按照新窗口對象的封閉屬性判斷），處理程序將返回false，以防止遵循原始鏈接。

將鏈接傳遞到window。開放而不定義參數將創建一個帶有默認裝飾的窗口 - 帶有target =“ _ blank”的鏈接也將創建一個。

第一個測試

我們使用getAttribute作為RER的第一個測試，因為屬性特定的屬性僅在您確定所涉及的屬性已分配值時才可靠。我們不能直接去測試target.rel針對字符串，因為它可能是無效的或未定義的。在“讀寫元素的屬性”部分中對此進行了詳細討論。

在框架之間進行通信

如果您在框架環境中工作，則可能有必要在框架之間進行腳本進行通信，讀取或寫作屬性或在不同文檔中調用函數。 >

您可以選擇是否使用框架，我強烈建議您不要這樣做，因為它們存在許多嚴重的可用性和可訪問性問題，除了它們在概念上被損壞（它們在無法解決的瀏覽器狀態下創建）之外）。但是，就像您使用彈出窗口一樣，在某些情況下，您可能沒有選擇使用框架。因此，如果您確實必須使用它們，這就是您需要做的。

>

解決方案

>讓我們從一個簡單的框架文檔開始：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

我們可以使用四個參考文獻進行跨幀腳本：>

窗口或自我指的是當前的框架頁面。
parent指的是包含包含當前頁面的幀的頁面。
• >
頂部是指框架層次結構的頂部的頁面，如果層次結構中只有一個框架，則該頁面將與父母相同。
• >
框架集合是當前頁面中所有幀的關聯數組。
>假設我們有一個腳本在ContentFrame中，希望在NavigationFrame中傳達頁面。這兩個頁面都包含在單個框架集中 - 層次結構中唯一的頁面 - 因此我們可以成功地從ContentFrame中進行以下任何引用：>

parent.frames [0]

> top.frames [0]
parent.frames ['navigationFrame']
> top.frames ['navigationFrame']
• 框架集合是一個關聯數組（例如我們在第6章中看到的表單集合，處理和驗證表單），因此可以通過索引或名稱訪問每個元素。通常最好使用該名稱（除非您有充分的理由不這樣做），這樣，如果框架訂單更改，則不必以後編輯代碼。同樣，如果層次結構更改，複雜嵌套框架集中的父母引用可能會更改，因此我通常建議開發人員始終開始從頂部引用。在上述選項中，我更喜歡的參考是top.frames ['navigation frame']。

現在我們有了對框架的引用，我們可以在另一個框架頁面中調用函數：>

另外，我們可以參考其他框架文檔，並從那裡與DOM一起工作：>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

討論

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

幀之間的通信僅適用於同一域中的文檔 - 出於安全原因，不可能使用與腳本不同域中加載的文檔。例如，惡意網站所有者將您定期訪問的網站加載並竊取您輸入的個人數據。

>

實際上，有些瀏覽器讓用戶不允許所有腳本在幀之間進行通信，只是消除了跨站點腳本漏洞的任何可能性，如果您的腳本發現自己在瀏覽器中運行如此配置，則無法處理此偏好。

>如果您確實有抱怨問題的用戶（並且他們無法或不會更改其設置以允許跨框架腳本），那麼最安全的事情就是避免完全跨框架腳本。 第6章，處理和驗證表格和第8章，與cookie合作。

獲得滾動位置

頁面滾動是JavaScript中最不可值的屬性之一：不同版本的不同瀏覽器正在使用三種變體。但是，有了一些仔細的對象測試，我們可以可靠地獲得一致的價值。

>

解決方案

有三種獲取此信息的方法。我們將在每種方法上使用對象測試，以確定可用的支持級別：

> 現在可以根據需要調用該函數。這是一個簡單的示範，使用窗口。 Croll事件處理程序，它獲取數字並將其寫入標題欄：>

捲軸

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

的問題

>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

滾動不是事件中最可靠的：它可能根本不會在Konqueror或Safari 1.0中發射，或者用戶在Firefox中用鼠標滾輪導航時。而且，如果它確實發射，它可能會不斷地和快速地進行（就像在Internet Explorer中一樣），如果您設置為事件的腳本響應的腳本非常複雜，則可能會緩慢且效率低下。

>>>

>

如果您遇到了這種困難，則可能會發現使用SetInterval功能而不是OnScroll事件處理程序更好。 SetInterval將允許您以可預測的間隔調用該功能，而不是響應事件。您可以在第14章，時間和動作中找到有關此類腳本的更多信息，但這是一個可比的示例：>

window.setInterval（function（） {  var scrollpos = getsCrollingPosition（）;      

 document.title ='left ='scrollpos [0]'top ='

     scrollpos [1];       }，250）;



討論

>這裡唯一真正的複雜性是IE 5實際上確實識別了紀錄片。 CrollTop屬性，但其值始終為零，因此我們必須檢查值並查找屬性的存在。

>否則，哪個瀏覽器正在使用哪個屬性，這對我們來說並不重要。最重要的是，我們的腳本通過兼容性測試之一獲得併返回有用的值。但是，此處顯示每個瀏覽器使用的屬性以供參考：>

Firefox和其他Mozilla瀏覽器，Safari，Konqueror和Opera使用的 window。 IE 6在符合標準的模式下使用document.body.scrolltop由IE 5使用，IE 6在“怪異”模式下使用。
• 此列表不能說明完整的故事，但主要是要描述測試的順序。最近的Mozilla瀏覽器（例如Firefox）也支持Invoryelement.scrolltop和body.scrolltop，通過與IE 6相同的渲染模式規則。 Opera以任何模式支持所有三個屬性！
>
• >，但這對您來說都不重要 - 瀏覽器供應商添加了這些多個屬性，以允許不知道一個屬性或另一個屬性的腳本，而不是為此而提供任意選擇。從我們的角度來看，重要的是要確定一組兼容性測試，以確保我們的腳本盡可能廣泛地工作。

渲染模式

“標準”模式和“怪異”模式是當前瀏覽器使用的兩個主要渲染模式。這些模式會影響輸出文檔的各個方面，包括哪個元素是畫布（或），以及如何計算CSS盒子大小。有關渲染模式的更多信息，請參見第11章，檢測瀏覽器差異。

使頁面滾動到特定位置 >所有當前瀏覽器實現了相同的（非標準）方法來滾動頁面。至少這裡的東西很簡單！

>

解決方案

有兩種方法可用於滾動頁面（或更確切地說是窗口或框架），要么由特定量（window.scrollby）或特定點（window.scrollto）：

>

這些示例說：向下滾動200個像素，然後用200個像素沿著200個像素，然後從左側的300個像素和100像素從頂部，然後回到頂角。

>獲取視口尺寸（窗口內的可用空間）

在許多類型的腳本中，無論可用空間是腳本邏輯中的一個因素，都需要視頻大小的詳細信息。該解決方案提供了一個實用程序功能，以獲取視口大小，我們將在本書中再次看到該功能！

！

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

解決方案

我們需要的屬性以三種不同的方式實現，例如我們在上一節中看到的頁面滾動的屬性（稱為“使頁面滾動到特定位置”的部分）。與該示例一樣，我們可以使用對象測試來確定哪種實現相關，包括我們在IE 5中需要的零值測試（出於相同的原因需要此測試：因為，儘管存在屬性，但它不是我們想要的）：

>>>>>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

該函數返回寬度和高度的數組，因此我們可以在需要該數據時稱其為：

>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

摘要

>我們從本章中的實用主義者的角度涵蓋了窗口和框架操縱的基礎知識。我們還討論了我們可以使用的原理和技術，以確保這樣的腳本與我們可以製作的腳本一樣易於且易於訪問。毫無疑問，這種工作將保持爭議，顯然我們確實需要某種定位機制，因為即使使用框架正在慢慢垂死，更複雜的接口的出現也使這些問題保持了。

>我更喜歡Xlink Standard的show屬性，該屬性具有新的值和替換。這些暗示了一個目標過程（打開一個新窗口，分別替換當前窗口的內容），但實際上並未定義特定的行為。他們將其留給用戶代理以控制實際發生的事情，例如，新的可以用來打開標籤而不是Windows。

第13章。基本動態HTML

>動態HTML並不是您可以指出並說：“這是DHTML的一項技術。”該術語是一個描述符，其中包含所有結合起來以使網頁動態的技術：使您可以創建新元素而不刷新頁面，更改這些元素的顏色並使其擴展，收縮和放大屏幕的技術。 DHTML使用HTML，DOM和CSS與客戶端的腳本語言（JavaScript）結合使用HTML，將生命帶入傳統上是一種靜態媒介。在前幾章中，我們了解到我們可以使用JavaScript來操縱頁面的一部分以取得一些非常方便的結果。 DHTML通過將這些部分組裝成一個連貫的整體來提供更複雜的問題的解決方案 - 滿足現實世界需求而不是編程難題的解決方案。

>

>本章探討了我們需要的一些工具，以便與DHTML創建有效的用戶界面。然後，它討論了幾個簡單的小部件，以準備在本書其餘部分中考慮的更複雜的模塊。

處理事件

>用戶與網頁的任何交互（無論是移動鼠標還是敲擊鍵盤）都會導致瀏覽器生成事件。有時，我們希望我們的代碼對此互動做出響應，因此我們聆聽這些事件，這讓我們知道何時應該執行代碼。

解決方案

有兩種處理事件的方法：簡短的方式和W3C方式。每個人都有其優點和缺點，但是當事件發生在特定元素上時，您都可以執行指定的函數。

簡短的方式：使用事件處理程序

處理事件的較短方法是使用分配為每個元素的快捷屬性的DOM 0事件處理程序。正如我們在第5章中看到的那樣，當我們討論DOM 0屬性快捷方式時，這些事件處理程序並非未來。但是，它們確實提供了比標準W3C活動聽眾的一些優勢：

>當前正在操作的每個瀏覽器都支持DOM 0事件處理程序，而無需代碼分支。
• DOM 0事件處理程序執行的每個函數都可以訪問分配事件處理程序的確切元素。 （如稍後您會看到的那樣，這在W3C活動聽眾中並不總是可用的。）
>
使用DOM 0事件處理程序的主要問題是，它們並非設計用於使用多個腳本。每次分配DOM 0事件處理程序時，您都會覆蓋該事件的任何先前分配的處理程序。這可能會干擾需要在同一元素上進行事件處理的多個腳本的操作。使用W3C活動聽眾，您可以在同一元素上應用任何數量的事件聽眾，並享受隨時刪除其中任何一個的能力。

>

>如果您可以確定您的代碼不會干擾別人的事件處理（例如，您正在將事件放置在動態創建的元素上，則可以安全地使用DOM 0事件處理程序。但是 - 所有事物都是平等的 - 在本書中，使用W3C事件聽眾更加安全。

>可通過瀏覽器獲得許多DOM 0事件處理程序；表13.1，“ DOM 0事件處理程序”列出了最常用的處理程序。

表13.1。 DOM 0事件處理程序

在使用DOM 0事件處理程序中，一旦您提到了要處理的事件的元素，這是將處理函數分配給適當屬性的簡單問題：

>您會注意到，在函數分配（button.onclick = gangem;）中，括號不遵循函數名稱。他們的包含將立即執行該函數，並將返回值分配為事件處理程序。通過省略括號，您可以將功能本身分配給處理程序。這也意味著您不能直接向處理功能提供參數：該功能必須通過其他方式獲取其信息。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

匿名函數

您可以為事件處理程序提供匿名函數，而不是提供對命名函數的引用：

var mylink = document.getElementById（“ mylink”）;      

      mylink.onclick = function（） {

 警報（“參與！”）;      

       返回false;      
}

>>取決於您是否需要重複使用處理功能（和您自己的編碼首選項），這可能是編寫事件處理代碼的一種更簡單的方法。 處理函數的返回值確定該事件的默認操作是否發生。因此，在前面的代碼中，如果Mybutton是超鏈接，則單擊時的默認操作將導航到其HREF位置。通過返回false，連接函數不允許執行默認操作，並且超鏈接導航不會發生。如果返回值為真，則在事件處理函數的代碼執行後將發生默認操作。

發生事件時，詳細的信息，有關該事件的方式，原因和何處的詳細信息寫入事件對象。在Internet Explorer中，這採用了全局窗口的形式。事實對象，但在其他瀏覽器中，該對像作為參數傳遞給事件處理函數。在處理功能中，此差異很容易解決：

>事件對象允許您找到一系列詳細信息，例如單擊哪個元素，是否按下任何鍵，事件的坐標（例如，在單擊鼠標按鈕時，光標位於位置）以及觸發函數的事件類型。在瀏覽器中，相當多的事件屬性名稱是一致的，但有些不同。 Mozilla事件屬性可以通過壁虎DOM參考查看，而Internet Explorer事件屬性則可以在MSDN上看到。對於其名稱在瀏覽器之間變化的屬性，通常可以通過少量對象檢測來糾正相關問題的潛力；我們將在本章稍後詳細討論。

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

w3c Way（事件聽眾）

>儘管DOM 0事件處理程序快速又容易，但它們確實有局限性（除了最終將被棄用的事實）。 W3C事件聽眾的主要優點是，他們在單個元素上本身支持同一事件的多個處理功能的添加和刪除。活動聽眾還可以在多個階段響應事件（儘管大多數瀏覽器尚未支持此功能）。 在W3C規範中，可以使用該元素的AddEventListener方法將事件添加到元素中，但是Windows的Internet Explorer選擇使用一種稱為AstactEvent的方法，該方法的語法略有不同。 （Mac的Internet Explorer不支持這兩個事件模型，因此我們必須依靠DOM 0處理程序與此瀏覽器中的事件一起使用。）

>要在Internet Explorer以外的每個瀏覽器中添加事件偵聽器，您將編寫與此類似的代碼：

為了支持Internet Explorer，您需要此代碼：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

以及不同的函數名稱，重要的是要注意，Internet Explorer為事件使用DOM 0處理程序名稱 - “ OnClick” - 而不是真實的事件名稱：“ click click”。提供的額外參數用於AddEventListener，指定在捕獲（true）還是氣泡（false）事件傳播階段中應用聽眾。在下面的討論中更詳細地說明了事件傳播，但是泡泡確實是最有用的選擇，並確保在符合標準的瀏覽器中的行為與Internet Explorer中的相同行為。

這兩種方法之間的差異很容易使用抽像功能。我們還可以為不支持W3C活動聽眾的瀏覽器提供後備。

>前兩個IF語句分別涉及基於標準的和Internet Explorer方法，但是其他所有內容都涉及不支持這兩種方法的舊瀏覽器，尤其是Internet Explorer 5。在最後一個情況下，使用了DOM 0事件處理程序，但是為了確保可以使用多個功能來處理特定元素的單個事件，請閉合來執行事件附加的任何現有功能。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>

封閉是與範圍有關的JavaScript的高級功能（您可以在第19章中閱讀，在JavaScript中的對象方向）。閉合允許內部函數引用包含函數的變量，即使包含函數完成運行。西蒙·威利森（Simon Willison）已詳細解釋了與活動處理程序有關的用法。可以說封閉使我們可以在不支持W3C活動聽眾的瀏覽器中堆疊多個事件處理程序。 >

>分配事件偵聽器的跨瀏覽器代碼如下：

不（完全）真正的文章

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

> 儘管DOM 0事件處理程序後備模擬了在元素上添加多個事件偵聽器的多個事件偵聽器的能力，但它不能提供W3C事件模型的精確複製，因為無法從元素中刪除特定的操作員。

> > DOM 0處理程序允許通過返回false的false，W3C事件聽眾取消元素的默認操作，以略有不同。要取消此模型中的默認操作，我們需要修改事件對象。 Internet Explorer要求您將其returnValue屬性設置為false；基於標準的實現提供了預防違規方法來執行同一操作。我們可以創建一個小函數，以找出我們的區別：

>我們可以在要取消默認操作時調用此功能：> >您仍然需要在執行StopDefaultAction之後返回false，以確保不支持W3C事件模型的瀏覽器也將阻止默認操作。

>> safari和W3C事件聽眾

> 由於Safari中的一個錯誤，不可能取消使用W3C事件偵聽器時單擊該瀏覽器中的超鏈接的默認操作。為了實現取消，您必須使用具有false的返回值的DOM 0事件處理程序。

>

>檢查AstactEvent

當使用attactevent用於附加事件偵聽器時，

Internet Explorer實際上將事件對像傳遞給事件處理函數。但是，我們仍然需要檢查使用使用舊事件模型的任何瀏覽器的對象的存在。

>使用W3C事件聽眾的優點之一是，您可以從元素中刪除單個偵聽器，而不會在同一事件上打擾任何其他偵聽器。使用DOM 0處理程序是不可能的。 Internet Explorer使用Decachevent方法，而符合標準的瀏覽器則指定一種稱為RemothEventListener的方法。這些方法中的每一種都與偵聽器添加對應物相似：必須提供一個事件類型以及分配給處理該事件類型的功能。該標準方法還需要知道事件處理程序是否已註冊在捕獲或氣泡階段中進行響應。 > 這是一個支持這種方法跨瀏覽器的函數：

W3C事件模型和匿名函數

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

W3C事件模型不允許刪除匿名函數，因此，如果您需要刪除事件偵聽器，請掛在所討論的功能上。 在不支持W3C事件聽眾的瀏覽器中，此功能在給定事件上刪除了所有事件處理程序：不可能僅刪除其中一個並留下其他事件。

討論

引用目標元素 >通常，您需要使用事件處理程序本身內事件的目標的對象。使用DOM 0事件處理程序，使用特殊變量在處理函數內將是指事件目標對象。考慮此代碼：

>在這裡，這是指帶有ID myLink的鏈接。我們可以使用它來獲取鏈接的HREF屬性。

但是，如果您使用W3C事件偵聽器，則事件的目標作為事件對象的一部分存儲在不同的瀏覽器中的不同屬性下。 Internet Explorer將目標存儲為SRCELEMENT，而標準模型將其作為目標存儲。但是，這些屬性點的元素不一定是分配事件偵聽器的元素。實際上，這是事件影響的層次結構中最深的元素。看看以下html。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

如果將單擊事件偵聽器放在段落上，並且用戶單擊鏈接，則將執行段落的單擊事件處理程序，但是可以通過上述屬性訪問的事件目標是超鏈接。一些瀏覽器（最著名的是Safari）甚至可以將鏈接中的文本節點計為目標節點。 。

>我們可以編寫一個返回事件目標的函數，而與已實施的屬性無關，但這並不能解決找到我們最初應用事件偵聽器的元素的問題。 （W3C標準指定了另一個稱為CurrentTarget的屬性，該屬性使您可以獲得偵聽器的分配的元素，但沒有互聯網瀏覽器等效。支持CurrentTarget的瀏覽器也設置了事件處理程序，以相同的價值設置了此變量，但是再次，如果沒有特別有用的Iss Tromist，則可以通過互聯網探險者提供的目標，直到我們提供的目標。）找到一個可能是我們附上事件偵聽器的元素。為此，我們可以針對元素的標籤名稱，類和其他屬性執行檢查。

>

抽象事件目標函數看起來像這樣：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

if-else跨瀏覽器檢索事件目標；然後，如果瀏覽器報告的目標恰好是文本節點。

如果我們要檢索單擊的元素，然後我們打電話給geteventtarget：>

>因為在這種情況下，我們知道事件處理函數將僅附加到鏈接（標籤），所以我們可以從事件目標上迭代，從而檢查“ A”的節點名稱。我們發現的第一個將是與處理程序分配的鏈接；這樣可以確保我們與鏈接中的某些元素不使用（例如強或跨度）。 >

顯然，這種目標發現方法不是理想的選擇，除非您了解要與之合作的確切HTML，否則不能100％準確。最近，解決此問題的努力已經大大努力，並且有很多建議的解決方案提供了與DOM 0事件處理程序中可用的相同的此變量，並且在支持活動聽眾W3C標準的瀏覽器中（而不是Internet Explorer）。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>這樣的解決方案是使事件聽力功能成為Internet Explorer中目標對象的方法。然後，當調用該方法時，這自然會指向該方法的對象。這需要修改AstactEventListener和distacheventlistener：>

在彼得·保羅·科赫（Peter Paul Koch）改進的Addevent競賽的參賽作品中，這種思維方式很好地代表了。Dean Edwards的另一種解決方案完全避免了W3C事件模型，而有利於實現具有獨立添加和刪除功能的DOM 0事件處理程序。

>儘管這兩種解決方案都可能被證明是寫作和強大的，但在撰寫本文時，它們在很大程度上沒有測試，因此我們將堅持我們所知道和可以處理的缺陷的方法：在主要解決方案中呈現的方法。此外，在實踐中，迭代尋找事件的目標的過程並不像看起來那樣不可靠。

>

什麼是事件冒泡，我如何控制它？

>

>您可能已經註意到，我們需要為W3C標準AddEventListener方法提供第三個參數，並且我們的tactereventleistener函數中包含捕獲參數以適應此內容。該參數確定了偵聽器操作的事件週期的階段。

>

假設您有兩個元素，一個元素嵌套在另一個元素：>

用戶單擊鏈接時，單擊事件將在段落和超鏈接上註冊。問題是，哪一個首先接收活動？

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

事件週期包含兩個階段，每個階段都以不同的方式回答了這個問題。在捕獲階段，事件從外部起作用，因此該段落將首先單擊，然後接收超鏈接。在氣泡階段，事件是從內而外工作的，因此錨將在段落之前接收單擊。

>

Internet Explorer和Opera僅支持冒泡，這就是為什麼AstactEvent不需要第三個參數的原因。對於支持AddEventListener的瀏覽器，如果第三個參數為真，則將在捕獲階段捕獲該事件；如果是錯誤的，則該事件將在氣泡階段捕獲。

> 在支持這兩個階段的瀏覽器中，捕獲階段首先發生，並且始終是氣泡相。只要您為每個階段設置偵聽器，就可以在捕獲階段和冒泡階段的同一元素上處理一個事件。

>

這些階段還強調了嵌套元素受同一事件影響的事實。如果您不再希望事件繼續在觸發事件偵聽器後繼續向上或向下傳播層次結構（取決於階段），則可以停止。在Internet Explorer中，這涉及將事件對象的取消吹動屬性設置為true；在W3C模型中，您必須調用其停止propagation方法：>

如果我們不希望事件比活動處理程序更進一步，我們將使用此代碼：

>儘管我們已經分配了互動函數來收聽鏈接和包含它的段落上的單擊事件，但該函數只會每次點擊一次調用一次，因為該事件的傳播首次被召喚。

查找元素的大小

>有很多變量會影響元素的大小 - 內容長度，CSS規則，字體家族，字體大小，線高，文本縮放……列表還在繼續。再加上這一事實，即瀏覽器不一致地解釋CSS維度和字體大小，並且您永遠無法預測呈現元素的尺寸。確定元素大小的唯一一致方法是一旦瀏覽器渲染。

解決方案

>您可以立即告訴您確切地知道一個元素有多大，這將是有用的。好吧，W3C無濟於事：沒有標準化的方法來確定元素的大小。值得慶幸的是，瀏覽器製造商或多或少地解決了一些讓我們弄清楚的域。

儘管框模型差異意味著Internet Explorer在元素的CSS維度的一部分中包括填充和邊界不一致，但OffsetWidth和Offseight屬性將始終如一地返回元素的寬度，包括填充和邊界，包括所有瀏覽器。

讓我們想像一個元素的尺寸是在這樣的CS中指定的：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

我們可以通過檢查相應的OffsetWidth和Offsesteight屬性來確定JavaScript中元素的精確像素寬度：>

In Internet Explorer 6, Opera, Mozilla, and Safari, the variable pixelWidth will now be set to 450, and the variable pixelHeight will be set to 250. In Internet Explorer 5/5.5, pixelWidth will be 350 and pixelHeight 150, because those are the dimensions at which the broken box model approach used in those browsers will render the element.這些值在瀏覽器之間是不同的，但這僅僅是因為實際渲染尺寸也有所不同。偏移尺寸始終計算元素的精確像素尺寸。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

如果我們沒有指定元素的尺寸，而是將其顯示到默認塊渲染（從而避免使用框模型錯誤），則該值在瀏覽器之間是可比的（允許Scrollbar寬度差異，字體等。

達到正確的尺寸

為了正確確定元素的尺寸，您必須等待，直到瀏覽器完成該元素的渲染，否則尺寸可能與用戶最終看到的尺寸不同。沒有保證的方法可以確保瀏覽器完成渲染元素，但是通常可以安全地假設一旦窗口的負載事件發射，所有元素都已渲染。

討論

>可以檢索元素的尺寸減去邊界，但包括其填充。這些值將使用clientwidth和clientHeight屬性訪問，對於上面的示例元素，在Internet Explorer 5/5.5中將為300和100，在所有其他瀏覽器中為400和200。

沒有任何屬性可以讓您在沒有邊界或填充的情況下檢索元素的寬度。

>

找到元素的位置

當您希望將其他元素定位在其上時，了解元素的確切位置非常有幫助。但是，由於瀏覽器尺寸，字體大小和內容長度不同，在加載頁面之前，通常不可能對元素的位置進行硬編碼。 JavaScript提供了一種方法來確定頁面呈現後任何元素的位置，因此您可以確切知道元素的位置。

>

解決方案

offsetTop和OffsetLeft屬性告訴您元素頂部和其偏移量的頂部之間的距離。但是什麼是偏移者？好吧，對於不同的元素和不同的瀏覽器，它的變化很大。有時是直接包含的元素；其他時候，它是HTML元素；在其他時候不存在。 >

幸運的是，解決方案是遵循Outsparents的踪跡並添加其偏移位置 - 這種方法將為您在每個瀏覽器中在頁面上的準確絕對位置提供。

如果所討論的元素沒有偏置，則元素本身的偏移位置就足夠了。否則，我們將元素的偏移量添加到其偏移者的偏移量，然後重複其Oftsetparent的過程（如果有）：>

ie 5 for Mac bug

Mac的Internet Explorer 5在計算偏移尺寸時，Internet Explorer 5不考慮身體的邊距或填充，因此，如果您希望在此瀏覽器中進行準確的測量值，則應在體內具有零保證金和填充。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

討論

上面的方法適用於簡單而復雜的佈局；但是，當一個或多個元素的祖先將其CSS位置屬性設置為靜態以外的事物時，您可能會遇到問題（默認值）。

> >嵌套定位和瀏覽器差異有很多可能的組合，幾乎不可能編寫一個將它們全部考慮在內的腳本。如果您使用的是使用大量相對或絕對定位的界面，那麼嘗試特定案例並編寫特殊功能來處理它們可能是最容易的。這只是您可能會遇到的一些區別：

在Windows和Mozilla/Firefox的Internet Explorer中，任何其父母相對定位的元素都不會在其自身偏移中包含父母的邊界；但是，父母的偏移只會衡量其邊界的邊緣。因此，這些值的總和將不包括邊界距離。
• > 在歌劇和野生動物園中，任何絕對或相對位置的元素，其偏見的人是身體的偏移。人體的偏移也將包括自己的餘量。
在Windows的Internet Explorer中，相對位置的元素內的任何絕對位置的元素都將在其偏移量中包括相對位置的元素。相對位置的元素也將包括其邊距。
• >
• 檢測鼠標光標的位置

使用鼠標事件（例如鼠標或鼠標）時，您通常需要使用鼠標光標的坐標作為操作的一部分（例如，將元素放在鼠標附近）。下面解釋的解決方案實際上是一種比我們在“找到元素的位置”部分討論的元素位置檢測方法更可靠的位置檢測方法，因此，如果可以使用以下解決方案而不是上一個解決方案，請努力！

解決方案

事件對象包含您需要知道的所有與光標位置一起使用的所有內容，儘管需要一點對象檢測以確保您在所有瀏覽器中獲得等效值。 > >通過事件對象的pagex和pagy屬性，獲得光標的位置相對於整個頁面獲得的標準方法。 Internet Explorer不支持這些屬性，但它確實包含了一些我們想要的屬性。客戶端和客戶端可在Internet Explorer中找到，儘管它們測量了從鼠標光標到瀏覽器窗口邊緣的距離。為了找到光標相對於整個頁面的位置，我們需要將當前的滾動位置添加到這些維度。該技術在第7章中涵蓋，使用窗戶和框架；讓我們使用該解決方案的getCrollingPosition函數來檢索所需的尺寸：>

顯示鼠標在元素

上時顯示工具提示 在大多數瀏覽器中，工具提示是一個有用的功能，但是如果您打算將其用作界面的一部分，它們可能會有所限制。如果您想使用在需要時出現的圖層，不會被截斷，並且可以包含超過純文本，為什麼不製作自己的增強型工具提示？

解決方案

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

在此示例中，我們將在我們希望出現的工具提示的所有元素上應用一個類（Hastooltip）的課程。我們將從每個元素的標題屬性中獲取將出現在工具提示中的信息：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>從我們在本章早期對瀏覽器事件的探索中，您可能已經意識到我們需要設置一些事件聽眾，以便讓我們知道何時應該出現並消失。

>

工具提示在鼠標上鼠標在元素上時經典出現在固定位置，並在鼠標趕出時消失。 JavaScript工具提示的某些實現也會隨著鼠標移動元素的移動而移動工具提示，但我個人覺得這很煩人。在此解決方案中，我們將重點介紹鼠標和鼠標之路事件：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

>我們已經編碼了此腳本中的許多功能，包括第1章的addloadListener，從第5章開始使用JavaScript，GetElementsByAttribute，瀏覽文檔對像模型以及我們在本章早些時候創建的AstactEventListener函數，因此代碼的大部分是在Event evers Liester函數的：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

>在獲得跨瀏覽器事件對象之後，並從基本事件目標元素到具有一類Hastooltip的一個元素，Showtip將進行創建工具提示（a div）。工具提示的內容是從目標元素的標題屬性中獲取的，並將其放入工具提示內的文本節點。 為了確保瀏覽器不會在我們增強的工具提示上顯示其工具提示，然後清除了目標元素的標題 - 現在，瀏覽器無法顯示為工具提示，因此它不會干擾我們剛剛創建的瀏覽器。不必擔心刪除標題引起的潛在可訪問性問題：我們稍後再放回。

控制工具提示在Opera

中顯示 即使我們將其設置為空字符串，

opera仍會顯示原始標題。如果您希望避免在此瀏覽器中出現的工具提示，則必須使用optDefaultAction函數從稱為“處理事件”的部分（本章的第一部分）停止使用鼠標的默認操作。請注意，這也會影響其他鼠標行為，例如超鏈接的狀態條地址顯示。 >為工具提示的樣式提供鉤子，我們將工具提示元素分配給基於目標元素的ID（targetIdToolTip）的ID，並設置一類工具提示。儘管這種方法允許通過CSS應用樣式，但我們無法提前計算工具提示的位置，因此我們必須使用鼠標光標的坐標（如觸發事件時所計算的）來定位工具提示（使用一些額外的像素來給它一些空間）。 >剩下的就是將工具提示元素附加到身體上，因此當我們鼠標鼠標匹配鏈接時，它將神奇地出現！有了一點CSS，它看起來像是圖13.1，“鼠標上出現的動態生成的圖層”。

>

圖13.1。動態生成的圖層，出現在鼠標

上

>將鼠標從元素移開時，我們將工具提示從文檔中刪除，並且它將消失：

>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

之前，在Showtip中，我們創建了對工具提示元素作為目標元素屬性的引用。完成此操作後，我們可以在此處刪除它，而無需搜索整個DOM。在刪除工具提示之前，我們會檢索其內容並將其插入目標元素的標題，因此我們可以稍後再使用它。

>這些對像是否存在？ 您應該檢查在其他事件中創建的對像在嘗試操縱它們之前實際上存在的對象，因為事件通常會失火，並且您不能保證它們會以設定的順序出現。

討論

>上面代碼的一個問題是，如果目標元素靠近瀏覽器窗口的右側或底部邊緣，則該工具提示將被切斷。為了避免這種情況，我們需要確保有足夠的空間容納工具提示，並相應地將其放置。 通過在每個維度中檢查鼠標位置是否小於瀏覽器窗口尺寸減去工具提示大小，我們可以分辨出移動層以將其移動到屏幕上：

> 這個功能與以前的版本相同，直到我們插入工具提示元素為止。就在插入元素之前，我們將其可見性設置為“隱藏”。這意味著，當它放置在頁面上時，該圖層將佔用與可見的相同空間，但用戶不會在頁面上看到它。這使我們能夠測量工具提示的尺寸，然後重新定位它，而無需用戶看到它以其原始位置閃爍。

為了檢測圖層是否在視口外顯示，我們使用光標的位置相對於視口。從理論上講，這可以通過使用clientx/clienty獲得，但請記住：Safari給出了此屬性的不正確值。取而代之的是，我們在CursorPosition內使用跨瀏覽器值並減去滾動位置（這等同於客戶端/客戶端）。使用我們在第7章中創建的getViewPortsize函數（使用Windows和幀配合使用的GetViewPortsize）的大小，然後，對於每個維度，我們檢查光標位置是否加上圖層的大小大於視口尺寸（減去scrollbars的津貼）。

>如果部分的一部分出現在視口外，我們將其從視口大小中減去其尺寸來定位；否則，它是使用光標位置正常定位的。

>

>要注意的唯一其他例外是​​，如果該圖層通常以兩個維度出現在視口外，則當我們垂直定位時，它會自動定位在光標上方。這樣可以防止圖層直接出現在光標頂部並觸發鼠標out事件。它還可以防止目標元素完全被工具提示遮蓋，這將阻止用戶單擊它。

>

>測量可見工具提示尺寸

為了測量工具提示的尺寸，必須首先將其附加到文檔上。這將自動使其出現在頁面上，因此為了防止用戶看到它以錯誤的位置顯示，我們需要將其隱藏。我們通過將其可見性設置為“隱藏”，直到我們完成了工具提示的位置為止。

> 我們無法在此處使用更熟悉的顯示屬性，因為完全沒有呈現顯示為“無”的對象，因此它們沒有尺寸可以測量。 >按列進行排序表

表可以是信息的礦山，但前提是您可以正確理解它們。具有通過其不同列對錶進行排序的能力，使用戶可以以對它們有意義的方式查看數據，並最終為更多的理解提供了機會。

解決方案

開始，我們將使用語義上有意義的HTML表。這將為我們提供我們需要插入事件聽眾，注入額外元素的結構，並對我們的數據進行排序：

首先，我們需要在每個表標題單元格上設置事件偵聽器。這些將聆聽對我們的列的點擊，並在單擊的列上觸發類別：> Mac的Internet Explorer 5

> Internet Explorer 5難以處理動態生成的表內容，因此我們必須專門將其排除在使任何表可排序的情況下。

>只有具有類交易的表格將變成可排序的表，因此InitStableable可導航DOM以在這些表中找到表標題單元格。找到它們後，每個標題單元格的內容都包裹在超鏈接中 - 這允許鍵盤用戶選擇一列來對錶進行排序 - 並將事件偵聽器設置在這些鏈接上，以監視單擊事件，並在響應中執行sortcolumn。還設置了每個鏈接的標題屬性，向用戶提供有關單擊鏈接時將發生的信息。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

sortColumn功能相當冗長，這是因為它必須每次單擊標題單元格時必須導航和重新排列整個表結構：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

>在所有結構變量被定義後發生的第一個循環，當單擊其中一個時，將每個桌子標題單元格設置為每個表標題單元的各個狀態。不僅要維護類以識別當前對錶的標題單元格，而且在每個單元格上維護了特殊的stordorder屬性，以確定對該列的排序順序。最初，將以降序排序列，但是如果連續兩次單擊標題單元格，則將更改排序順序以反映上升序列。每個標題單元格記得它最近顯示的排序順序狀態，並在重新選擇其標題電池時將列返回到該狀態。單擊標題單元格的超鏈接標題還根據當前排序順序重寫，如果用戶再次單擊它，則排序順序是什麼。

>

第二個循環排列桌子體中包含的每個行。創建原始Tbody的副本是為了存儲重新排序的表行，最初此副本為空。當掃描原始tbody中的每一行時，將我們要排序的列中的表單元格與副本中的行進行了比較。

。

為了找到表單元格的內容，我們使用函數getInternalText：>

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

當SortColumn在副本中找到一排的表格單元格值“少”比我們掃描的副本“少”時，我們將掃描行的副本插入複製的Tbody中。對於按升序順序的列，我們只需扭轉以下比較：副本中的行的值必須“大於掃描行的”。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

。 但是，在進行比較之前，我們檢查排序的表單元格的內容是否可以解釋為整數或浮點。如果是這樣，比較值將轉換。這樣可以確保對包含數字的列進行正確排序；字符串比較將產生與數字比較不同的結果。

>一旦我們所有原始行都被複製到新的tbody中，該元素就被用來替換舊的，我們有排序的表！

>

Using the sortableDescending and sortableAscending classes, which are assigned to the currently sorted table heading cells, we can use CSS to inform the user which column the table is sorted on, and how it is sorted, as shown in Figure 13.2, “A sortable table sorted in descending order on the fourth column” and Figure 13.3, “A sortable table sorted in ascending order on the second column”.

圖13.2。一個可排序的表在第四列
上以降序排序排序

圖13.3。一個可排序的表在第二列上按上升順序排序

摘要

DHTML的兩個主要支柱是事件的捕獲，以及通過DOM的頁面元素重組和創建。使用這些原則，可以捕獲用戶與頁面交互的許多不同方式並使接口做出相應的響應。 通過JavaScript增強的Web應用程序的數量和質量可以看出，DHTML可以將新界面帶入新接口的功能代表了創新JavaScript的最大增長領域之一。本章中顯示的基礎和基本示例使您了解它可以在用戶瀏覽器中傳遞的功能。在以下各章中，我們將在構建一些非常有趣的接口。

這就是我們的樣本：101基本技巧，技巧和駭客

。接下來是什麼？

>將此示例下載為PDF，用於離線閱讀。查看本書的目錄，以查看其涵蓋的內容。並查看其他人對這本書的看法 - 閱讀。

經常詢問有關JavaScript的問題（常見問題解答）

JavaScript在Web開發中的重要性是什麼？這是一種編程語言，可讓您在網頁上實現複雜的功能。當網頁不僅顯示靜態信息（例如顯示及時的內容更新，交互式映射，動畫圖形或滾動視頻點盒）時，涉及JavaScript。這是標準網絡技術的第三層，其中兩個（HTML和CSS）在以前的文章中廣泛使用。

>>我如何開始從划痕中學習JavaScript？

>

開始從Scratch中學習JavaScript，如果您看起來很艱難，但是如果您可以稍作管理，那麼它可以使其較小地管理，從而降低了步驟，該步驟降低了步驟，該步驟降低了步驟。首先了解HTML和CSS的基礎知識，因為它們構成了Web開發的基礎。然後，您可以逐漸轉到JavaScript基礎知識，例如變量，數據類型，功能，循環和條件。練習是學習JavaScript的關鍵，因此請確保您定期編碼。

>初學者在學習JavaScript時會遇到什麼常見錯誤？

>初學者在學習JavaScript時會犯一些常見的錯誤，當時學習JavaScript不包括理解JavaScript和Java和Java之間的差異，沒有足夠的時間理解基礎，並且沒有足夠的時間練習，並且沒有足夠的時間。 JavaScript是一種獨特的語言，具有自己的概念和結構，重要的是要在繼續進行更複雜的主題之前了解這些語言。經常實踐和所學概念的應用對於掌握JavaScript至關重要。

>我可以在沒有任何事先編程經驗的情況下學習JavaScript嗎？儘管具有編程背景可以使學習過程更容易，但這不是先決條件。 JavaScript通常被推薦為初學者的好母語，因為它寬容的語法和在網絡開發中的廣泛用法。

>

>從頭開始學習JavaScript需要多長時間？

從scratch中學習JavaScript所需的時間可以很大程度上取決於您的先前經驗，您可以在學習的時間上差異，並且可以實現知識，並且能夠達到知識，並且可以實現深度的知識。平均而言，如果您每天從頭開始並專門工作幾個小時，您可以期望在幾周到幾個月內學習基礎知識。

>

>學習JavaScript的最佳資源是什麼？ Codecademy，Udemy和FreecodeCamp等在線平台提供全面的課程。強烈建議使用諸如“雄辯的JavaScript”和“您不知道JS”之類的書。此外，Mozilla開發人員網絡（MDN）在JavaScript上具有廣泛的文檔。

>如何在前端開發中使用JavaScript？

在前端開發中，JavaScript用於使網頁頁面動態和交互式。它可用於創建滑塊，形式驗證，彈出窗口等功能。它還允許您操縱文檔對像模型（DOM），使您能夠實時更改網頁的內容和佈局。

我可以將JavaScript用於後端開發嗎？

是的，JavaScript可以用於後端開發。 Node.js是JavaScript運行時，可讓您在服務器上運行JavaScript。使用node.js，您可以僅使用JavaScript。

構建整個Web應用程序。它們提供了JavaScript代碼的結構，使構建大規模，可維護和可擴展的Web應用程序變得更加容易。示例包括react.js，angular.js和vue.js.

> JavaScript的未來是什麼？隨著React，Angular和Vue等框架的興起，JavaScript變得越來越強大和多才多藝。此外，Node.js的開發將JavaScript的覆蓋範圍擴展到了服務器端，使其成為全棧語言。隨著Web應用程序的複雜性不斷增長，對熟練的JavaScript開發人員的需求可能會保持很高。

以上是腳本更智能：從頭開始的質量JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！