Skip to main content
第一部分:建立 "Hello, world" 應用程式 (HTML)

Applies to Windows only

本教學課程會教您如何使用 JavaScript 建立簡單的 "Hello, world" Windows 市集應用程式。教學課程系列總共有 5 個教學課程,這是第 1 個教學課程,本課程將傳授您建立 Windows 市集應用程式的必要知識。

在本教學課程中,您將了解如何:

  • 建立新專案
  • 將 HTML 內容新增到起始頁
  • 處理觸控、手寫筆以及滑鼠輸入
  • 在淺色和深色樣式表之間切換
  • 建立自己的自訂樣式
  • 使用適用於 JavaScript 控制項的 Windows Library

我們會為您示範如何使用 HTML、JavaScript 以及 CSS 建立 Windows 市集應用程式。

提示  

如果您想要略過教學課程並直接跳到程式碼,請參閱 JavaScript 入門:教學課程系列的完整程式碼

開始之前...

  • 若要完成這個教學課程,您需要 Windows 8.1 與 Microsoft Visual Studio Express 2013 for Windows。若要下載它們,請參閱 下載頁面。
  • 您也需要開發人員授權。如需指示,請參閱 取得開發人員授權

步驟 1:在 Visual Studio 中建立新專案

讓我們建立名為 HelloWorld 的新應用程式。方法如下:

  1. 啟動 Visual Studio Express 2013 for Windows。

    隨即顯示 Visual Studio Express 2013 for Windows 開始畫面。

    (從這裡開始,我們將 Visual Studio Express 2013 for Windows 簡稱為 "Visual Studio"。)

  2. 在 [檔案] 功能表上,選取 [新增專案]

    隨即顯示 [新增專案] 對話方塊。對話方塊的左窗格能夠讓您選取要顯示的範本類型。

  3. 在左窗格中,依序展開 [已安裝的]、[範本]、[JavaScript],然後選取 [Windows 市集] 範本類型。對話方塊的中央窗格會顯示 JavaScript 的專案範本清單。

    [新增專案] 視窗

    在本教學課程中,我們使用 Blank App 範本。這個範本會建立能夠編譯和執行的最基本 Windows 市集應用程式,但不包含使用者介面控制項或資料。在這些教學課程系列中,我們會將控制項和資料新增到應用程式。

  4. 在中央窗格中,選取 Blank App 範本。
  5. Name 文字方塊中,輸入 "HelloWorld"。
  6. 取消核取 [為方案建立目錄] 核取方塊。
  7. 按一下 [確定] 來建立專案。

    Visual Studio 會建立您的專案,然後在 [方案總管] 中顯示。

    HelloWorld 專案的 [方案總管]

雖然 Blank App 是最基本的範本,但是仍然包含少數檔案:

  • 一個資訊清單檔案 (package.appxmanifest),說明應用程式的名稱、描述、磚、起始頁、啟動顯示畫面等,以及列示其中包含的檔案。
  • 在 [開始] 畫面上顯示的一組大的和小的標誌影像 (logo.png 和 smalllogo.png)。
  • 在 Windows 市集中代表您的應用程式的影像 (storelogo.png)。
  • 應用程式啟動時顯示的啟動顯示畫面 (splashscreen.png)。
  • WinJS 的 CSS 和程式碼檔案 (位於參考資料夾內)。
  • 應用程式啟動時執行的起始頁 (default.html) 和伴隨的 JavaScript 檔案 (default.js)。

若要檢視和編輯檔案,按兩下 [方案總管] 中的檔案。

這些檔案對於所有使用 JavaScript 的 Windows 市集應用程式都是必要的。您在 Visual Studio 中建立的任何專案都包含這些檔案。

步驟 2:啟動應用程式

到目前為止,我們已經建立了非常簡單的應用程式。如果您想要看看它的外觀,按 F5 可以建置、部署及啟動您的應用程式。預設啟動顯示畫面會先顯示。啟動顯示畫面是由影像 (splashscreen.png) 和背景色彩 (在應用程式的資訊清單檔案中指定) 所定義。 這裡的內容沒有涵蓋這個部分,但是自訂啟動顯示畫面很容易。(若要了解做法,請參閱 新增啟動顯示畫面。)

啟動顯示畫面消失之後,接著就出現我們的應用程式。它包含一個黑色畫面,上面有 "Content goes here" 的文字。

我們的 HelloWorld 應用程式

這裡沒有可以關閉應用程式的按鈕或命令。若要關閉應用程式,從螢幕的上邊緣向下撥動直到下邊緣,或是按 Alt+F4。 移至 [開始] 畫面;請注意,部署應用程式會在 [開始] 畫面上的最後一個群組新增磚。若要再次執行應用程式,點選或按一下 [開始] 畫面上的磚,或在 Visual Studio 中按 F5,在偵錯工具中執行應用程式。

它沒有太多功能—還沒有—但是,恭喜您,您已經建立第一個 Windows 市集應用程式了!

若要停止偵錯應用程式,按 Alt+Tab 返回 Microsoft Visual Studio。在 Visual Studio 中,按一下 [偵錯] > [停止偵錯] 以關閉應用程式。偵錯時無法在 Visual Studio 中進行編輯。

如需有關在 Visual Studio 中以不同方式啟動應用程式的詳細資訊,請參閱 從 Visual Studio 執行 Windows 市集應用程式

步驟 3:修改起始頁

Visual Studio 為我們建立的其中一個檔案是 default.html,也就是我們應用程式的起始頁。 當應用程式執行時,它會顯示起始頁的內容。 起始頁也包含應用程式的程式碼檔案及樣式表的參考。 以下是 Visual Studio 為我們建立的起始頁:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

讓我們將一些新的內容新增到您的 default.html 檔案。就像您將內容新增到任何其他 HTML 檔案的方式一樣,您要將內容新增到 body 元素內。您可以使用 HTML5 元素建立應用程式 (只有 少數例外)。 這表示您可以使用如 h1 p button div 以及 img 之類的 HTML5 元素。

Hh986964.wedge(zh-tw,WIN.10).gif修改起始頁

  1. 使用 "Hello, world!" 做為第一層標題、詢問使用者名稱的一些文字、接受使用者名稱的 input 元素、 button 以及 div 元素,取代 body 元素中的現有內容。 將識別碼指派給 inputbuttondiv

    <body>
        <h1>Hello, world!</h1>
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput"></div>
    </body>
  2. 執行應用程式。

    包含新內容的 HelloWorld 應用程式

    您可以在 input 元素中撰寫,但是在這個時候,按一下 button 並不會執行任何動作。某些物件,例如 button,可以在特定事件發生時傳送訊息。這些事件訊息讓您有機會採取動作來回應事件。您可以將回應事件的程式碼放置在事件處理常式方法中。

    在後續步驟中,我們要為顯示個人化問候語的 button 建立一個事件處理常式。我們要將事件處理常式程式碼新增到 default.js 檔案。

步驟 4:建立事件處理常式

當我們建立新專案時,Visual Studio 會為我們建立 /js/default.js 檔案。這個檔案包含處理應用程式週期的程式碼,也就是我們在 第二部分:管理應用程式週期與狀態中說明的概念。您也在這裡撰寫其他的程式碼,為 default.html 檔案提供互動功能。

開啟 default.js 檔案。

開始新增我們自己的程式碼之前,我們先來看看檔案中最前面和前後面的幾行程式碼:

(function () {
    "use strict";

     // Omitted code 

 })(); 

您或許好奇這裡發生了什麼事。這幾行程式碼將 default.js 程式碼的剩餘部分包裝在自我執行的匿名函式中。

既然您知道它要做什麼,可能就會好奇為什麼我們要把程式碼包裝在自我執行的匿名函式中。這是因為這樣更容易避免命名衝突或避免意外修改到不想修改的值。它也能夠將非必要的識別碼排除在全域命名空間外,進而提升效能。它看起來有一點奇怪,但卻是很好的程式設計做法。

下一行程式碼會開啟 JavaScript 程式碼的 strict 模式。Strict 模式為程式碼提供額外的錯誤檢查。例如,它會防止您使用隱含宣告的變數或將值指派給唯讀屬性。

看看 default.js 中其餘的程式碼。它會處理您應用程式的 activated checkpoint 事件。稍後我們會詳細說明這些事件。現在,只需要知道應用程式啟動時會觸發 activated 事件就可以了。

讓我們為您的 button 定義一個事件處理常式。我們新的事件處理常式會從 nameInput input 控制項取得使用者的名稱,並使用它將問候語輸出到您在上一節中建立的 greetingOutput div 元素。

使用適用於觸控、滑鼠及手寫筆輸入的事件

在 Windows 8.1 中,您不需要擔心觸控、滑鼠以及其他指標輸入形式之間的差異。您可以只使用您知道的事件 (例如 click),而這些事件適用於所有輸入形式。

提示   您的應用程式也可以使用新的 MSPointer*MSGesture* 事件 (適用於觸控、滑鼠以及手寫筆輸入),而且可以提供觸發事件之裝置的其他資訊。如需詳細資訊,請參閱 回應使用者互動以及 手勢、操作以及互動

讓我們繼續建立事件處理常式。

Hh986964.wedge(zh-tw,WIN.10).gif建立事件處理常式

  1. 在 default.js 中,就在 app.oncheckpoint 事件處理常式及呼叫 app.start 之前,建立名為 buttonClickHandler click 事件處理常式函式,它接受名為 eventInfo 的單一參數。
        function buttonClickHandler(eventInfo) {
     
        }
  2. 在事件處理常式中,從 nameInput input 控制項擷取使用者的名稱,並用它來建立問候語。使用 greetingOutput div 顯示結果。
        function buttonClickHandler(eventInfo) {
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString; 
        }

我們已將事件處理常式新增到 default.js 了。現在我們需要登錄它。

步驟 5:在應用程式啟動時登錄事件處理常式

目前我們唯一需要做的事是在按鈕上登錄事件處理常式。登錄事件處理常式的建議做法是從我們的程式碼呼叫 addEventListener。登錄事件處理常式的理想時機是應用程式啟用時。幸運的是,Visual Studio 已經為我們在 default.js 檔案中產生一些程式碼,用來處理應用程式的啟用: app.onactivated 事件處理常式。 我們來看看這個程式碼。

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

onactivated 處理常式中,程式碼會檢查發生了哪一種類型的啟用。啟用有許多不同的類型。例如,當使用者啟動您的應用程式以及當使用者想要開啟與您應用程式相關的檔案時,您的應用程式就會啟用。(如需詳細資訊,請參閱 應用程式週期)。

我們只針對 launch 啟用。只要應用程式不在執行中,然後使用者啟用它,應用程式就被「啟動」了。

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

如果啟用屬於 Launch 啟用,程式碼會檢查應用程式上次執行時的關機方式。


            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }

接著它會呼叫 WinJS.UI.processAll


            args.setPromise(WinJS.UI.processAll());           
        }
    };

無論應用程式是過去已經關機或者是第一次啟動,都會呼叫 WinJS.UI.processAllWinJS.UI.processAll 包含在 setPromise 方法的呼叫中,可以確保在應用程式頁面準備好前都不會關閉啟動顯示畫面。

提示   WinJS.UI.processAll 函式會掃描您的 default.html 檔案,尋找 WinJS 控制項並初始化它們。到目前為止,我們還沒有新增任何這些控制項,但是最好保留這個程式碼,萬一您之後想要新增就可以使用。 如需深入了解 WinJS 控制項,請參閱 快速入門:新增 WinJS 控制項與樣式

如果要登錄非 WinJS 控制項的事件處理常式,最好緊接在呼叫 WinJS.UI.processAll 之後。

Hh986964.wedge(zh-tw,WIN.10).gif登錄事件處理常式

  • 在 default.js 的 onactivated 事件處理常式中,擷取 helloButton,並使用 addEventListener 登錄 click 事件的事件處理常式。將這個程式碼新增到對 WinJS.UI.processAll 的呼叫之後。

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);
    
            }
        };

我們已更新的 default.js 檔案的完整程式碼如下:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());

            // Retrieve the button and register our event handler. 
            var helloButton = document.getElementById("helloButton");
            helloButton.addEventListener("click", buttonClickHandler, false);
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

    app.start();
})();

執行應用程式。在文字方塊中輸入您的名稱並按一下按鈕時,應用程式會顯示個人化問候語。

我們的 HelloWorld 應用程式的個人化問候語

附註  如果您想知道為什麼我們使用 addEventListener 在程式碼中登錄事件而不是在 HTML 中設定 onclick 事件,請參閱 撰寫基本應用程式的程式碼以取得詳細的說明。

步驟 6:設定起始頁的樣式

自訂您應用程式的外觀和操作方式非常容易。Windows 市集應用程式可讓您使用階層式樣式表層級 3 (CSS3),就像您對網站的做法一樣。

Visual Studio 為我們建立的 default.html 中包含對 WinJS 樣式表的參考:

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

這個樣式表的功能是什麼?非常多!它提供下列好處:

  • 一組自動提供我們應用程式 Windows 8 外觀及操作方式的樣式。只要加入這個樣式表,我們的控制項就會很美觀,而且這些控制項與觸控式顯示器也將是完美的搭配。
  • 自動支援高對比模式。這些樣式是針對高對比所設計,因此,當我們的應用程式在裝置上以高對比模式執行時,將會正常顯示。
  • 自動支援其他語言。WinJS 樣式表會針對 Windows 8 支援的每種語言,選取正確的字型。您甚至可以在相同的應用程式中使用多種語言,這些控制項還是會正常顯示。
  • 自動支援其他讀取順序。它會針對從右至左讀取順序的語言自動調整 HTML 及 WinJS 控制項、配置及樣式。

根據預設,專案中的每個 HTML 頁面都包含深色樣式表的參考。 WinJS 也提供淺色樣式表。讓我們來嘗試一下,再看看它的外觀如何。

Hh986964.wedge(zh-tw,WIN.10).gif切換至淺色樣式表

  1. 在 default.html 檔案中,取代深色樣式表的參考:
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    

    用這個取代:

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
  2. 執行應用程式。它現在使用淺色樣式表。

    具有淺色樣式表的 HelloWorld 應用程式

您應該使用哪個樣式表?隨您的喜愛選擇。對於大部分顯示影像或視訊的應用程式,建議您使用深色樣式表;對於包含大量文字的應用程式,則建議使用淺色樣式表。(如果您要使用自訂色彩配置,請使用與您應用程式外觀及操作方式最搭配的樣式表)。

建立自己的樣式

如果您要自訂應用程式的外觀及操作方式,並不需要捨棄 WinJS 樣式從頭開始。透過覆寫您要變更的樣式,就可以輕鬆地一步一步進行變更。

事實上,最好是覆寫 WinJS 樣式,而不要建立自己的樣式。當您的應用程式以高對比模式執行時,在預設樣式中對色彩進行的任何變更都會自動被支援高對比的色彩配置覆寫。

您可以建立自己的樣式表,然後將該樣式表加到 WinJS 樣式表後面,以覆寫預設樣式表中的任何樣式。Blank App 範本會為您執行這個動作。它會建立名為 default.css 的樣式表,您可以用它來建立自己的樣式。

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" /> 
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

讓我們來建立一些自己的樣式。

  1. 首先,將一些 div 元素和類別新增到 HTML,以輕鬆設定樣式。
    1. 在 Visual Studio 中,開啟 default.html 檔案。
    2. 將頁面標頭的 class 屬性設為 "headerClass"。建立 div 元素,並使用它來放置頁面主要內容。將它的 class 設定設為 "mainContent"。
      <body>
          <h1 class="headerClass">Hello, world!</h1>
          <div class="mainContent">
              <p>What's your name?</p>
              <input id="nameInput" type="text" />
              <button id="helloButton">Say "Hello"</button>
              <div id="greetingOutput"></div>
          </div>
      </body>
      
  2. 現在來定義我們的樣式。開啟 default.css 檔案。

    現在它幾乎是完全空白的:

    body {
    }
    
  3. 根據 配置應用程式頁面中所述,標頭的上邊界為 45 個像素,左邊界為 120 個像素。 內容區域的左邊界也是 120 個像素,而上邊界為 31 個像素,下邊界為 50 個像素。

    定義 headerClassmainContent 類別,並遵循這些指導方針來設定它們的邊界。此外,為 greetingOutput div 建立一個樣式,以將其高度設為 20 像素,下邊界設為 40 像素。

    body {
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
  4. 執行應用程式。注意間距的變化。

    包含邊界的 Hello, world 應用程式

Windows 市集應用程式支援 CSS3,因此您有許多方式可以自訂應用程式。(如需設定應用程式樣式的詳細資訊,請參閱 快速入門:設定控制項的樣式)。

步驟 7:新增適用於 JavaScript 的 Windows Library 控制項

除了標準 HTML 控制項外,使用 JavaScript 的 Windows 市集應用程式還可以使用 WinJS 中的任一個新控制項,例如 WinJS.UI.DatePicker WinJS.UI.FlipView WinjS.UI.ListView 以及 WinJS.UI.Rating 控制項。

和 HTML 控制項不同,WinJS 控制項沒有專用的標記元素:例如,您無法透過加入 <rating /> 元素建立 Rating 控制項。若要新增 WinJS 控制項,要建立 div 元素,並使用 data-win-control 屬性指定所需的控制項類型。若要新增 Rating 控制項,您要將屬性設定為 "WinJS.UI.Rating"。

Rating 控制項新增至我們的應用程式。

  1. 在您的 default.html 檔案中,將 label Rating 控制項新增到 greetingOutput div 後方。

    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>
        </div>
    </body>
    

    為使 Rating 載入,您的頁面必須呼叫 WinJS.UI.processAll。因為我們的應用程式正在使用其中一種 Visual Studio 範本,因此我們的 default.js 已包含對 WinJS.UI.processAll 的呼叫 (如之前的步驟 5 所述),所以不必新增任何程式碼。

  2. 執行應用程式。注意新的 Rating 控制項。

    含有適用於 JavaScript 之 Windows Library 控制項的 Hello, world 應用程式

現在,按一下 Rating 控制項會變更評等,但不會執行其他動作。讓我們使用事件處理常式在使用者變更評分時執行一些動作。

步驟 8:為適用於 JavaScript 的 Windows Library 控制項登錄事件處理常式

為 WinJS 控制項登錄事件處理常式,與為標準 HTML 控制項登錄事件處理常式稍有不同。之前我們提過 onactivated 事件處理常式會呼叫 WinJS.UI.processAll 方法,以在您的標記中初始化 WinJS。WinJS.UI.processAll 是包含在 setPromise 方法的呼叫中。

            args.setPromise(WinJS.UI.processAll());           

如果 Rating 是標準的 HTML 控制項,在此呼叫後,您可以將事件處理常式新增到 WinJS.UI.processAll。但是 WinJS 控制項則較為複雜,就像我們的 Rating 一樣。因為 WinJS.UI.processAll 會為我們建立 Rating 控制項,因此在 WinJS.UI.processAll 完成處理之前,我們無法將事件處理常式新增到 Rating

如果 WinJS.UI.processAll 是一般方法,我們可以在呼叫它以後便登錄 Rating 事件處理常式。但 WinJS.UI.processAll 方法是非同步的,因此,遵循該方法的任何程式碼可能會在 WinJS.UI.processAll 完成之前執行。那麼該怎麼辦呢?我們使用 Promise 物件接收 WinJS.UI.processAll 完成時的通知。

與所有 WinJS 非同步方法一樣, WinJS.UI.processAll 會傳回 Promise 物件。 Promise 是未來會發生某些事的 "Promise";當那件事發生時,表示 Promise 已完成。

Promise 物件有一個 then 方法,會將 "completed" 函式做為參數。Promise 會在完成時呼叫此函式。

透過將您的程式碼新增到 "completed" 函式,並將它傳送到 Promise 物件的 then 方法,便可確保 WinJS.UI.processAll 完成後會執行您的程式碼。

  1. 我們來輸出使用者選取評分時的評分值。在您的 default.html 檔案中,建立一個 div 元素以顯示評分值,並為它提供 id "ratingOutput"。
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>     
            <div id="ratingOutput"></div>
        </div>
    </body>
    
  2. 在我們的 default.js 檔案中,為 Rating 控制項的 change 事件 (名為 ratingChanged) 建立事件處理常式。 eventInfo 參數包含一個提供新使用者評分的 detail.tentativeRating 屬性。抓取此值並顯示在輸出 div 中。

        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating; 
        }
    
  3. 新增呼叫至 then 方法,並將 completed 函式傳送給它,以在呼叫 WinJS.UI.processAll onactivated 事件處理常式中更新程式碼。在 completed 函式中,抓取裝載 Rating 控制項的 ratingControlDiv 元素。然後使用 winControl 屬性抓取實際的 Rating 控制項。(此範例以內嵌方式定義 completed 函式)。

                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                }));
  4. 您可以在呼叫 WinJS.UI.processAll 後為 HTML 控制項登錄事件處理常式,也可以在您的 completed 函式中登錄它們。為了簡化工作,我們將所有事件處理程式登錄移到 then 事件處理常式內。

    下列是更新後的 onactivated 事件處理常式:

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                }));
    
            }
        };
  5. 執行應用程式。當您選取評分值時,它會在 Rating 控制項下方輸出數值。

附註  這個部分與最後一部分只介紹開始使用 WinJS 控制項之前您必須知道的事。 如需深入了解與查看控制項清單,請參閱 快速入門:新增 WinJS 控制項與樣式

摘要

恭喜,您完成這個教學課程了!您學會如何將內容新增到 Windows 市集應用程式,也學會如何新增互動功能以及如何設定應用程式的樣式。

下載範例

您是否遇到困難,或是想檢查您的工作?如果是,請 下載 JavaScript 入門範例

後續步驟

在這個教學課程系列的下一個部分中,您會深入了解應用程式週期的運作方式,以及如何儲存應用程式的狀態。請繼續 第二部分:管理應用程式週期與狀態

相關主題

JavaScript 入門:教學課程系列的完整程式碼
使用 HTML、CSS 及 JavaScript 設計 Windows 8 應用程式 (電子書)

 

 

Microsoft 正展開一份線上問卷調查,了解您對於網站的看法。如果您選擇參加,您離開網站時即會顯示線上問卷調查。

您是否想要參加?