四川麻将免费下载

書名： 15天學會JavaScript（視頻教學版）
作者名：王金柱
本章字數： 1412字
更新時間： 2019-12-06 14:00:31

1.4　JavaScript腳本語言開發與調試

本節將通過一個實例介紹JavaScript腳本語言開發與調試的基本方法，即JavaScript腳本語言開發工具和調試工具的使用。

開發JavaScript腳本語言的方式非常靈活、可供選擇的工具也非常多，比如：簡單的文本編輯器，輕量級的EditPlus、UltraEdit或Sublime Text代碼編輯器，以及功能非常強大的Visual Studio、Adobe Dreamweaver和JetBrains WebStrom重量級的集成開發平臺，這些工具均可編寫開發JavaScript腳本程序。筆者個人感覺，如果只是單純編寫JS代碼可選擇EditPlus這類的輕量級代碼編輯器，因其具有簡潔、快速、易于上手的特性，同時功能也非常齊全。但如果是開發大型Web項目，最好是選擇WebStrom這類重量級的集成開發平臺，因其具有強大的代碼管理和調試功能，自然會事半功倍。

雖然集成開發平臺具有一定的JavaScript腳本語言調試功能，不過更專業的做法是使用帶有JS調試功能的瀏覽器進行JavaScript腳本代碼的調試工作。目前，Google Chrome、Firefox、Safrai、Microsoft Edge、Opera developer等這些國外主流廠商的瀏覽器均內置有JS調試功能，且各個瀏覽器的界面、功能和方法大同小異，讀者可根據個人喜好自行選擇一款瀏覽器進行測試即可。筆者這里選用的是FireFox瀏覽器，主要是因為FireFox是較早實現JS調試功能的瀏覽器之一，且一直保持著及時更新。

下面通過一個具體的JavaScript代碼實例介紹一下JS腳本開發與調試的基本步驟（基于WebStrom + EditPlus + FireFox）。

1.4.1　使用WebStrom集成開發平臺創建項目、頁面文件

打開WebStrom開發平臺，在文件（File）菜單中選擇New Projects（新建工程）命令，新建一個Web工程項目，命名為“js-15days”，如圖1.10所示。在工程項目中新建一個HTML5網頁文件，命名為“ch01-js-debug.html”，如圖1.11所示。

圖1.10　使用WebStrom創建Web項目

圖1.11　使用WebStrom創建HTML5網頁

該HTML5網頁文件中定義的代碼如下（詳見源代碼ch01目錄中ch10-js-debug.html文件）。

【代碼1-8】

   01  <!doctype html>
   02  <html lang="en">
   03  <head>
   04   <!-- 添加文檔頭部內容 -->
   05   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   06   <meta http-equiv="Content-Language" content="zh-cn" />
   07   <link rel="stylesheet" type="text/css" href="css/style.css">
   08   <title>JavaScript in 15-days</title>
   09  </head>
   10  <body>
   11   <!-- 添加文檔主體內容 -->
   12   <header>
   13        <nav>JavaScript 基礎 - 腳本調試</nav>
   14   </header>
   15   <hr>
   16   <!-- 添加文檔主體內容 -->
   17   <div id="id-div-count">
   18   </div>
   19  </body>
   20  <script type="text/javascript" src="js/ch01-js-debug.js"></script>
   21  </html>

關于【代碼1-8】的分析如下：

第17～18行代碼通過<div>標簽定義了一個層元素，用于動態輸出頁面內容；

第20行代碼通過<script>標簽引入了外部JavaScript腳本文件，其中“src”屬性定義了外部腳本文件的相對路徑地址（"js/ch01-js-debug.js"）。

1.4.2　使用WebStrom集成開發平臺創建腳本文件

下面通過WebStrom開發平臺創建【代碼1-8】中引入的“ch01-js-debug.js”腳本文件，如圖1.12所示。

圖1.12　使用WebStrom創建JavaScript腳本文件

然后暫時離開WebStrom開發平臺，使用EditPlus代碼編輯器編寫JS代碼，如圖1.13所示。

圖1.13　使用EditPlus編寫JavaScript腳本代碼

EditPlus代碼編輯器簡潔、快速、易于上手，編寫具體代碼時比使用集成開發工具有一定優勢。當然，這也因人而異，軟件本身沒有高低優劣之分。

JavaScript腳本文件（“ch01-js-debug.js”）中定義的代碼如下（詳見源代碼ch01目錄中js/ch01-js-debug.js文件）。

【代碼1-9】

   01  var v_id_div_count = document.getElementById("id-div-count");
   02  var strLine;
   03  for(var i=1; i<10; i++) {
   04      strLine = "i=" + i.toString() + "<br>";
   05      console.log(strLine);
   06      v_id_div_count.innerHTML += strLine;
   07  }

【代碼1-9】的主要功能就是向HTML網頁中循環動態寫入文本，因這里主要是介紹JavaScript腳本語言開發與調試的基本方法，所以每行代碼的具體功能含義在此就不具體介紹了。

1.4.3　使用FireFox瀏覽器運行HTML頁面和調試JS腳本

下面使用FireFox瀏覽器運行【代碼1-8】與【代碼1-9】定義的HTML網頁（ch01-js-debug.html），如圖1.14所示。打開FireFox瀏覽器的調試功能窗口，如圖1.15所示。

圖1.14　使用FireFox瀏覽器調試JS腳本

圖1.15　打開FireFox瀏覽器JS調試功能窗口

在圖1.15的JS源碼窗口中為【代碼1-9】的第05行腳本語句設置斷點，如圖1.16所示。

然后，按F5功能鍵重新刷新頁面，再按“步進F11”功能鍵來調試執行JS代碼，頁面效果如圖1.17和圖1.18所示。從這兩幅圖中可以看到，每次執行到【代碼1-9】中第05行腳本語句設置的斷點處時，JS代碼均會被中斷，然后在日志窗口中輸出調試信息（變量“i”計數器的數值）。以上就是JavaScript腳本語言開發與調試的基本過程方法。

圖1.16　使用FireFox瀏覽器為JS腳本代碼設置斷點

圖1.17　使用FireFox瀏覽器調試腳本代碼（1）

圖1.18　使用FireFox瀏覽器調試腳本代碼（2）

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

15天學會JavaScript（視頻教學版）

1.4 JavaScript腳本語言開發與調試

1.4.1 使用WebStrom集成開發平臺創建項目、頁面文件

1.4.2 使用WebStrom集成開發平臺創建腳本文件

1.4.3 使用FireFox瀏覽器運行HTML頁面和調試JS腳本

1.4　JavaScript腳本語言開發與調試

1.4.1　使用WebStrom集成開發平臺創建項目、頁面文件

1.4.2　使用WebStrom集成開發平臺創建腳本文件

1.4.3　使用FireFox瀏覽器運行HTML頁面和調試JS腳本