使用document.getElementById("greetingOutput").innerText="";來調(diào)用，注意此時(shí)不用獲取value屬性。

       ③注冊button事件與寫button函數(shù)

          首先要寫一個(gè)button的執(zhí)行函數(shù)，它執(zhí)行的內(nèi)容就是獲取input，經(jīng)過字符運(yùn)算，打印到div元素，注意到JS的字符串支持相加，相加后串聯(lián)。

          代碼如下

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

          其中事件參數(shù)eventInfo可以隨便命名，不寫也不會(huì)報(bào)錯(cuò)，但為了嚴(yán)密起見，還是跟隨著官方的寫法。

          接下來就是要注冊事件，注冊時(shí)間發(fā)生在程序激活以后，在onactivated函數(shù)內(nèi)，有語句args.setPromise(WinJS.UI.processAll());這一句用來掃描HTML中的WinJS控件并進(jìn)行初始化。

          WinJS.UI.processAll()方法具有異步性，也就是說它后面的代碼可以比它先執(zhí)行，這樣有可能就會(huì)造成未初始化完畢就執(zhí)行后面的代碼，從而引發(fā)錯(cuò)誤。

          對于一般的HTML元素如button沒有這個(gè)顧慮，但是對WinJS控件就不行，為了統(tǒng)一起見，我們把所有的腳本都放在通用的位置。

          使用setPromise的then方法可以解決這個(gè)問題，對于WinJS的processAll，它返回一個(gè)promise來表明已經(jīng)完成，它支持then方法，該方法的參數(shù)為completed函數(shù)，當(dāng)promise返回時(shí)會(huì)執(zhí)行completed，從而保證它在processAll之后執(zhí)行。具體寫法如下：

          原來的函數(shù)為：

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

          現(xiàn)在變?yōu)椋?/p>

          args.setPromise(WinJS.UI.processAll().then(function completed { } ));

          我們只需要在completed函數(shù)內(nèi)填寫注冊程序即可，如下：

args.setPromise(WinJS.UI.processAll().then(function completed()
{
    var helloButton = document.getElementById("helloButton");
    helloButton.addEventListener("click", buttonClickHandler, false);
}));

          可以看到，注冊時(shí)不用獲取value的值，而直接訪問元素，注冊使用addEventListener方法，該方法的三個(gè)參數(shù)分別為：觸發(fā)方式、函數(shù)名、事件處理時(shí)機(jī)，其中觸發(fā)方式有click、mousemove等，觸發(fā)時(shí)機(jī)分為：捕獲、目標(biāo)、冒泡，true只在捕獲階段處理事件，而false在目標(biāo)與冒泡階段處理，一般填false，該方法還有后續(xù)參數(shù)，這里暫時(shí)用不到。

          這樣就完成了button、input、div的事件，程序就可以運(yùn)行了。

          三、CSS修飾

          ①對于背景，在default.html中有一行對css的調(diào)用如下：

          它表示深色背景，將dark改為light，即可顯示淺色背景。

          ②對于元素，一般在default.css中進(jìn)行設(shè)置。

           設(shè)置步驟為，先為元素添加class屬性，如下：

    
Hello, world!
    

        
What's your name?
        
        Say "Hello"
        

    

           在css中調(diào)用的方式為：            

body {
}
.headerClass {
    margin-top: 45px;
    margin-left: 120px;
}
.mainContent {
    margin-top: 31px;
    margin-left: 120px;
    margin-bottom: 50px;
}
#greetingOutput {
    height: 20px;
    margin-bottom: 40px;
}

            注意到與body直接相連的元素使用了"."，而中間隔著mainContent的greetingOutput使用了"#"，其中的屬性margin表示邊距，單位為px（像素點(diǎn)），下面這張來自百度百科的圖片指明了各個(gè)邊距的含義。

           此外還有很多修飾屬性，可以查閱有關(guān)css的資料。

           四、WinJS控件Rating

           與HTML不同，WinJS控件不是通過標(biāo)簽添加，而是通過為div元素指定data-win-control屬性，如下：