财神发发发游戏下载

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 2028字
更新時間： 2020-11-28 23:47:16

2.2 編寫JavaScript的工具

“工欲善其事，必先利其器”。隨著JavaScript的發展，大量優秀的開發工具接踵而出。找到一個適合自己的開發工具，不僅可以加快學習進度，而且在以后的開發過程中能及時發現問題，少走彎路。下面就來介紹幾款簡單易用的開發工具。

2.2.1 記事本

記事本是最原始的JavaScript開發工具，它最大的優點就是不需要獨立安裝，只要安裝微軟公司的操作系統，利用系統自帶的記事本，就可以開發JavaScript應用程序。對于計算機硬件條件有限的讀者來說，記事本是最好的JavaScript應用程序開發工具。

【例2.1】下面介紹如何通過使用記事本工具來作為JavaScript的編輯器編寫第一個JavaScript腳本。（實例位置：光盤\TM\sl\2\1）

（1）單擊“開始”菜單，選擇“程序”/“附件”/“記事本”命令，打開記事本工具。

（2）在記事本的工作區域輸入HTML標識符和JavaScript代碼。

        <html>
        <head>
        <title>一段簡單的JavaScript代碼</title>
        <script language="javascript">
            window.alert("歡迎光臨本網站");
        </script>
        </head>
        <body>
        <h3>這是一段簡單的JavaScript代碼。</h3>
        </body>
        </html>

（3）編輯完畢后，選擇“文件”/“保存”命令，在打開的“另存為”對話框中，輸入文件名，將其保存為．html格式或．htm格式。保存完．html格式后，文件圖標將會變成一個IE瀏覽器的圖標，雙擊此圖標，以上代碼的運行結果會在瀏覽器中顯示，如圖2.7所示。

圖2.7 用記事本編寫JavaScript程序

說明

利用記事本開發JavaScript程序也存在著缺點，就是整個編程過程要求開發者完全手工輸入程序代碼，這就影響了程序的開發速度。所以，在條件允許的情況下，最好不要只選擇記事本開發JavaScript程序。

2.2.2 FrontPage

FrontPage是微軟公司開發的一款強大的Web制作工具和網絡管理向導，它包括HTML處理程序、網絡管理工具、動畫圖形創建、編輯工具以及Web服務器程序。通過FrontPage創建的網站不僅內容豐富而且專業，最值得一提的是，它的操作界面與Word的操作界面極為相似，非常容易學習和使用。

【例2.2】下面介紹應用FrontPage編寫JavaScript腳本的步驟。（實例位置：光盤\TM\sl\2\2）

（1）打開FrontPage，默認創建一個名為new_page_1.htm的文檔，如圖2.8所示。用戶可以直接在該文檔中編寫JavaScript腳本。另外，用戶也可以通過菜單欄新建一個HTML文件來編寫JavaScript腳本。選擇“文件”/“新建”/“網頁”命令，將會彈出一個網頁制作的向導，從3方面提供了幾十種基本方案供用戶選擇，如圖2.9所示。在“常規”選項卡中一共提供了26種模板供用戶選擇。在“框架網頁”中，提供了10種框架結構，幾乎包括了所有常見的網頁框架。“樣式表”則能幫助用戶確定統一的文字風格。

圖2.8 默認文檔頁

圖2.9 新建文檔

（2）在打開的頁面中，頁面下方有3個視圖形式，分別為“普通”、HTML和“預覽”。在“普通”視圖中，可以在頁面插入HTML元素，進行頁面布局和設計，如圖2.10所示；在HTML視圖中，可以編輯JavaScript程序，如圖2.11所示；在“預覽”視圖中，可以運行網頁內容，如圖2.12所示。

圖2.10 “普通”視圖

圖2.11 HTML視圖

圖2.12 “預覽”視圖

2.2.3 Dreamweaver

Dreamweaver是當今流行的網頁編輯工具之一。它采用了多種先進技術，提供了圖形化程序設計窗口，能夠快速高效地創建網頁，并生成與之相關的程序代碼，使網頁創作過程變得簡單化，生成的網頁也極具表現力。從MX開始，DW開始支持可視化開發，對于初學者確實是比較好的選擇，因為都是所見即所得的，特征包括語法加亮、函數補全，參數提示等。值得一提的是，Dreamweaver不但提供了強大的網頁編輯功能，還提供了完善的站點管理機制，極大地方便了程序員對網站的管理工作。下載地址為http://www.adobe.com/downloads/。

【例2.3】下面介紹應用Dreamweaver編程JavaScript腳本的步驟。（實例位置：光盤\TM\sl\2\3）

（1）安裝Dreamweaver后，首次運行Dreamweaver時，展現給用戶的是一個“工作區設置”的對話框，在此對話框中，用戶可以選擇自己喜歡的工作區布局，如“設計者”或“代碼編寫者”，如圖2.13所示。這兩者的區別是在Dreamweaver的右邊還是左邊顯示窗口面板區。

圖2.13 “工作區設置”對話框

（2）選擇工作區布局并單擊“確定”按鈕后，選擇“文件”/“新建”命令，將打開“新建文檔”對話框。在該對話框中的“類別”列表區選擇“基本頁”，再根據實際情況來選擇所應用的腳本語言，這里選擇的是HTML，然后單擊“創建”按鈕，創建以JavaScript為主腳本語言的文件，如圖2.14所示。

圖2.14 “新建文檔”對話框

說明

如果用戶選擇了JavaScript選項，則創建一個JavaScript文檔。在創建JavaScript腳本的外部文件時不需要使用<script>標記，但是文件的擴展名必須使用．js類型。調用外部文件可以使用<script>標記的src屬性。如果JavaScript腳本外部文件保存在本機中，src屬性可以是全部路徑或是部分路徑。如果JavaScript腳本外部文件保存在其他服務器中，src屬性需要指定完全的路徑。

（3）在打開的頁面中，有3種視圖形式，分別為代碼、拆分和設計。在代碼視圖中，可以編輯程序代碼，如圖2.15所示；在拆分視圖中，可以同時編輯代碼視圖和設計視圖中的內容，如圖2.16所示；在設計視圖中，可以在頁面中插入HTML元素，進行頁面布局和設計，如圖2.17所示。

圖2.15 代碼視圖

圖2.16 拆分視圖

圖2.17 設計視圖

注意

在代碼模式中編寫的JavaScript腳本，在設計模式中不會輸出顯示，也沒有任何標記。

在Dreamweaver中插入HTML元素后，通過“屬性”面板可以方便地定義元素的屬性，使其滿足頁面布局的要求。在頁面中，允許多個表格的嵌套；可以插入圖像、Flash動畫等；可以插入表單元素，如文本框、列表/菜單、復選框、按鈕等。

（4）設計頁面及編寫代碼完成后，保存該文件到指定目錄下，文件的擴展名為．html或．htm。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

2.2 編寫JavaScript的工具

2.2.1 記事本

2.2.2 FrontPage

2.2.3 Dreamweaver

jQuery從入門到精通（軟件開發視頻大講堂）