一直以來博文中使用最多的就是C# + XAML。進入Windows App時代，又多了一對 Javascript + HTML組合，這對于Web開發的程式員來說再熟悉不過了。其實小編也做過幾年的Web開發，算不上什麼大拿，但那時無時不刻的在網絡上尋找Javascript、AJAX、JQuery代碼，研究各種動态Web效果。每次打開VS總是看到Javascript項目選項，但從來也沒建立過。随着Windows 8.1 Preview、Visual Studio 2013 Preview釋出，我也來體驗一下Javascript開發Windows App是什麼感覺。
打開Visual Studio 2013 Preview，建立一個空Javascript項目，在工程目錄中有三個default檔案，字尾分别為css、js、html，看到這三個檔案不用打開就應該知道是幹什麼的。Default.css控制界面顯示效果，比如字型大小、間距、顔色等。Default.js程式邏輯處理，如事件、動态效果等。Default.html這個就是界面展示了，程式的UI效果都通過它來展示。
在Default.html的<Body>标簽裡添加一些簡單的代碼，我們的目的是當點選Go！按鈕時，顯示username填寫的名字。個人喜好用Blend進行界面編輯，用起來比VS友善一些。
<body>
<div class="apptitle">Hello World!</div>
<div class="appname" id="showname"></div>
<div class="appinput">
<input id="username" type="text" /> <button id="nameBtn" type="button">Go!</button>
</div>
</body>
接下來，需要在Default.js裡定義按鈕點選事件，事件寫好後需要在app.onactivated中注冊該事件，這樣才能使點選按鈕生效。
function showNameBtnClick(eventInfo) {
var userName = document.getElementById("username").value;
var showString = "This is " + userName + "!";
document.getElementById("showname").innerText = showString;
}
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());
var nameBtn = document.getElementById("nameBtn");
nameBtn.addEventListener("click", showNameBtnClick, false);
}
};
運作F5啟動程式，在Input中輸入名字，點選Go！按鈕，達到預期效果。
本文轉自Gnie部落格園部落格，原文連結：http://www.cnblogs.com/gnielee/p/build-windows-app-using-html-javascript.html，如需轉載請自行聯系原作者
![（javascript學習）複習記錄21.iterator2.函數3.變量的作用域4.方法的定義和調用 apply5.Date日期對象6.json7.面向對象程式設計8.class繼承9.操作BOM對象10.操作DOM對象（擷取）11.更新節點12.删除節點13.建立和插入DOM節點14.操作表單（驗證）15.驗證表單16.jQuery17.jquery事件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)