溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Win8 HTML5與JS編程學(xué)習(xí)筆記（一）

發(fā)布時(shí)間：2020-07-17 21:57:30 來源：網(wǎng)絡(luò) 閱讀：406 作者：qq570842253 欄目：移動(dòng)開發(fā)

      微軟的Visual Studio提供了多種構(gòu)成win8應(yīng)用的方式，其中最讓我感到激動(dòng)的是基于網(wǎng)頁設(shè)計(jì)語言的開發(fā)模式，它提供了結(jié)合HTML5與Javascript來開發(fā)應(yīng)用的方法，通過這種方法進(jìn)行開發(fā)，不但可以掌握win8應(yīng)用的開發(fā)方式，又可以提高網(wǎng)頁的設(shè)計(jì)水平，達(dá)到一石二鳥的效果。

      為了學(xué)習(xí)這種開發(fā)，我找了許多電子書來看，但最后結(jié)果都不太理想，突然有一天我驚喜的發(fā)現(xiàn)微軟的官方有相應(yīng)的教程和完整的電子書供下載，于是我就通過這兩樣資料，展開了學(xué)習(xí)，并把自己的學(xué)習(xí)經(jīng)歷記錄下來，供以后查閱和大家參考。

      一、總體概述

      在Hello World這一節(jié)內(nèi)容中，HTML文件主要使用了三種元素，input、button與Rating，還利用了組塊級(jí)元素div用于區(qū)域分隔。

       一般調(diào)用方式為：

       <input id=" " type="text"/>

       <button id=" ">內(nèi)容</button>

       <div id=" ">內(nèi)容</div>

       div元素可以不填寫內(nèi)容，然后利用innerText方法進(jìn)行動(dòng)態(tài)生成，例如顯示歡迎信息。

       在JS部分，包含了onactivated與oncheckpoint函數(shù)，前者涉及到首次啟動(dòng)和再次喚醒的初始化問題，后者涉及程序掛起的問題。


     二、功能實(shí)現(xiàn)

       ①獲取input框內(nèi)的內(nèi)容

          使用 document.getElementById("<id>").value

          例如：

          對(duì)<inputid="nameInput"type="text"/>

          使用 var userName =document.getElementById("nameInput").value;來調(diào)用


      ②更改div元素的內(nèi)容

          對(duì)<div id="greetingOutput"></div>

          使用document.getElementById("greetingOutput").innerText="<string>";來調(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ò)誤。

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

          使用setPromise的then方法可以解決這個(gè)問題，對(duì)于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)椋?/span>

          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修飾

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

          <link rel="stylesheet" />

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


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

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


<body>
    <h2 class="headerClass">Hello, world!</h2>
    <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>

           在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è)邊距的含義。

Win8 HTML5與JS編程學(xué)習(xí)筆記（一）

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


           四、WinJS控件Rating

           與HTML不同，WinJS控件不是通過標(biāo)簽添加，而是通過為div元素指定data-win-control屬性，如下：<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>，這個(gè)控件用于打分，一共五顆星，值可以在0到5之間變化。

           接下來同樣要注冊和處理該事件，把它放在completed函數(shù)內(nèi)注冊即可，注冊代碼如下：

var ratingControlDiv = document.getElementById("ratingControlDiv");
var ratingControl = ratingControlDiv.winControl;
ratingControl.addEventListener("change", ratingChanged, false);

           同樣的，先獲取元素，不同的是還要在獲取的基礎(chǔ)上獲取winControl方法的值，然后是事件注冊，此時(shí)的觸發(fā)條件為change。

           當(dāng)事件觸發(fā)時(shí)，執(zhí)行ratingChanged函數(shù)打印分?jǐn)?shù)：

function ratingChanged(eventInfo)
{
    var ratingOutput = document.getElementById("ratingOutput");
    ratingOutput.innerText = eventInfo.detail.tentativeRating;
}

           經(jīng)過這些步驟，第一個(gè)應(yīng)用“Hello World”就完成了，在這個(gè)過程中我不僅鞏固了網(wǎng)頁設(shè)計(jì)的知識(shí)，也了解了WinJS的一些特點(diǎn)。


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手