《JavaScript和jQuery實戰手冊（原書第2版）》——2.6節教程：使用變量建立消息

2.6 教程：使用變量建立消息

在這個教程中，我們将使用變量在web頁面上顯示一條消息。

在文本編輯器中打開chapter02目錄下的檔案use_variable.html。

這個頁面隻是一個基本的html檔案，其中帶有一些簡單的使用css的設計。它還沒有任何的javascript。我們可以使用變量在web頁面上顯示消息。

找到< h1>标簽（在檔案中部略微偏下的位置），添加開始< script>标簽和結束< script>标簽，代碼如下所示：

現在，我們應該熟悉這段html了：它隻是讓頁面準備好等待編寫腳本。

注意： 這個頁面使用html5作為doctype。如果你使用xhtml 1.0或html 4.01，像下面這樣把type=”javascript”添加到< script>标簽：< script type=”text/javascript”>。這個步驟不是為了使腳本能夠工作而必需的，隻是為了讓頁面能夠通過w3c驗證器（參見本書“前言”部分以了解更多關于驗證的内容）。

在< script>标簽之間輸入：

這就建立了兩個變量firstname和lastname，并且在其中存儲了兩個字元串值。接下來将把兩個字元串加在一起，并且在web頁面上顯示結果。

在兩個變量聲明下面輸入：

第1章已介紹過，document.write()指令直接把文本添加到web頁面。在這個例子中，我們使用它來把html标簽顯示在頁面上。我們為該指令提供了一個字元串'

'，它輸出的字元串正是我們在html代碼中錄入的内容。提供html标簽作為document.write()指令的部分也沒問題。在這個例子中，javascript為段落添加了一個開始标簽，以存儲要在頁面上顯示的文本。

注意： 有比document.write()效率更高的方法可以把html添加到web頁面。我們将在本書4.7節學習。

按Enter鍵後輸入如下javascript代碼：

這裡使用在步驟3中所建立的變量中所存儲的值。+操作符允許把幾個字元串組合到一起，産生一個較長的字元串，然後document.write()指令把該字元串顯示到頁面。在這個例子中，對于存儲在firstname中的值'cookie'，先添加了一個空格字元，然後，再添加lastname的值'monster'。結果就是字元串'cookie monster'。

再次按下Enter鍵後輸入document.write('');。

完成後的腳本如下所示：

在web浏覽器中預覽頁面，享受勞動成果（如圖2-2所示）。

單詞“cookie monster”應該出現在标題 “using a variable”的下方。如果你沒有看到任何内容，可能是由于代碼存在錄入錯誤。把你錄入的腳本和上面的腳本進行比較，并參考1.6小節介紹的關于使用firefox、safari、chrome或ie 9調試腳本的技巧。

傳回文本編輯器，把腳本的第二行代碼改為：

儲存頁面并在web浏覽器中預覽。瞧，現在的消息是cookie jar（檔案complete_use_variable.html中有這段腳本的一個可工作的副本）。