課程簡介 Windows Store App 支援以原先用於網頁前端開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發這使得原先做網頁開發的開發人員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win

Size: px

Start display at page:

Download "課程簡介 Windows Store App 支援以原先用於網頁前端開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發這使得原先做網頁開發的開發人員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win"

祖舜
7 years ago
Views:

1 DEV308 精通 JavaScript 作 Windows Store App 開發蔡秉諺 Vexed 中華電信 Xuite

2 課程簡介 Windows Store App 支援以原先用於網頁前端開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發這使得原先做網頁開發的開發人員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win dows 8 Apps 時的細節以及瞭解如何運用開發環境提供的 WinJS 函式庫來開發 Window s 8 Apps

3 微軟跟你說用 JavaScript 開發 Windows Store App 和開發網頁前端很像很像!== 一樣

4 不一樣顧名思義可以上 Windows Store 可以碰到系統底層可以離線操作

5 不一樣多 Windows WinJS MSApp 物件少不適合 App 環境函式適應 App 環境行為改變 Cross-Domain AJAX

6 Windows 物件不是 window 物件 Windows Runtime API (WinRT API) C++ C# VB JavaScript 共通

7 Windows 物件不夠用自己寫 WinRT Component C++ C# VB

8 WinJS 物件 Windows Library for JavaScript 100% JavaScript 寫成跟 jquery YUI 一樣原始碼可以看不能改

9 WinJS 物件看原始碼比看文件快鎖註解 base.js WinJS ui.js WinJS.UI 搜尋

10 不用 WinJS 能寫 Windows Store App 嗎不用 jquery 能寫網頁嗎能但麻煩 WinJS 存在意義拉近 Windows 物件與網頁前端開發距離

11 WinJS 能在 Windows Store App 外用嗎 base.js ui.js 開頭註解 This library is supported for use in Windows Store apps only. 原始碼找 haswinrt 未使用 Windows 物件分出為了 web context

12 少不適合 App 環境函式不可開新視窗無 open moveby moveto resizeby resizeto window.close() 中止 App 例外使用無 alert comfirm prompt Windows.UI.Popups.MessageDialog 替代改變動線

13 替代 alert var md = new Windows.UI.Popups.MessageDialog('Hi'); md.showasync().then(function() { //... }); 關閉

14 替代 confirm var md = new Windows.UI.Popups.MessageDialog('Are you OK?'); md.commands.append(new Windows.UI.Popups.UICommand('Yes')); md.commands.append(new Windows.UI.Popups.UICommand('No')); md.showasync().then(function (cmd) { console.log(cmd.label); });

15 替代 prompt 無直接方案改變動線選項明確 Windows.UI.Popups.MessageDialog 同 confirm Flyout 控制項無 Block UI

16 適應 App 環境行為改變 HTML and DOM API changes list <a > 的 href target 屬性 innerhtml document.write... 安全機制限制載入外部 JavaScript Cross-Domain AJAX

17 <a > 的 href 屬性 href="../a.html" href="/b.html" App 內相對路徑絕對路徑 href="ms-appx:///c.html" App 內絕對路徑 3 條斜線

18 為什麼 3 條斜線 <a href="ms-appx://a3001e40-c3bf-4ae9-b71 3-da500ca42135/c.html" > Package 名稱 package.appmanifest 可見 Package 名稱省略 <a href="ms-appx:///c.html" > ms-appx-web:/// ms-appdata:///

19 外部連結 <a href=" >Bing</a> 跳離 App Modern IE 開啟

20 <a > 的 target 屬性 target="_blank" 外部連結有寫跟沒寫一樣跳離 App Modern IE 開啟 App 內連結 JavaScript 錯誤 <a href="b.html" target="if" >b</a> <iframe name="if" src="a.html" ></iframe> 正常運作

21 innerhtml document.write... 安全機制 elm.innerhtml = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 elm.innerhtml = '</link>'; JavaScript 錯誤 elm.innerhtml = tostatichtml(' '); Safe

22 限制載入外部 JavaScript <script src=" JavaScript 錯誤檔案下載加入 App 內 <script src="js/b.js"></script>

23 Cross-Domain AJAX XMLHttpRequest Cross-Domain WinJS.xhr XMLHttpRequest Cross-Domain App 內檔案 WinJS.xhr({ url : 'a.txt' }).then(function() { // });

24 MSApp 物件額外審查都不是好東西 WinJS 原始碼找 Unsafe MSApp.execUnsafeLocalFunction

25 MSApp.execUnsafeLocalFunction innerhtml document.write... 安全機制 elm.innerhtml = '<p onclick="void(0)" >!</p>'; JavaScript 錯誤 Pass MSApp.execUnsafeLocalFunction(function() { elm.innerhtml = '<p onclick="void(0)" >!</p>'; });

26 App 中顯示外部網頁 <a href=" >Bing</a> 外部連結跳離 App Modern IE 開啟外部網頁 <iframe src=" ></iframe> iframe 內 local context 外 web context App 內網頁 <iframe src="a.html" ></iframe> iframe 內外 local context

27 web context 與 Windows Store App 外幾乎相同無 Windows 物件 WinJS 原始碼找 haswinrt WinJS 部分可用無 innerhtml document.write... 安全機制不限制載入外部 JavaScript AJAX 不可 Cross-Domain

28 web context App 內網頁 web context 載入 <iframe src="ms-appx-web:///a.html" ></iframe> local context web context 溝通 HTML5 postmessage()

30 Windows Store App 用 jquery <script src=" ></script> JavaScript 錯誤限制載入外部 JavaScript 檔案下載加入 App 內 <script src="js/jquery.min.js" ></script>

31 Windows Store App 用 jquery App 執行 3 個 JavaScript 錯誤 jquery 初始時觸犯 innerhtml document.write... 安全機制原始碼找改 jquery.support = (function() {... })(); jquery.support = MSApp.execUnsafeLocalFunction(function() {... });

32 Windows Store App 用 jquery 待續

33 Windows Store App 用 Google Maps JavaScript API <script src=" ></script> 限制載入外部 JavaScript 無法檔案下載加入 App 內 <iframe src="ms-appx-web:///map.html" ></iframe> Google Map 放 map.html 裡 web context 載入

34 ECMAScript 5 Windows Store App IE10 支援 WinJS 原始碼兇不普及原因 IE8 + Windows XP ECMAScript 5 compatibility table

35 ECMAScript 5 可 JavaScript 模擬 Array.prototype.forEach Object.keys 需瀏覽器底層支援 Object getter setter Object.defineProperty Strict Mode

36 Object getter setter var strings = { }; get on() { return WinJS.Resources._getWinJSString("ui/on").value; }, get off() { return WinJS.Resources._getWinJSString("ui/off").value; }, on off 屬性只可讀不可寫 var v = 1, o = { get p() { return v; }, set p(x) { v += x; } }; o.p = 2; console.log(o.p); // 3 沒有 JavaScript 錯誤

37 Object.defineProperty Object.defineProperty(element, "winbindingtoken", { configurable: false, writable: false, enumerable: false, } value: bindingtoken ); configurable writable enumerable 以前存在看不到碰不到

38 Strict Mode "use strict"; Visual Studio 2012 自動加上 strict 模式 MSDN arguments.callee 不能用 block 中不可宣告函式 call apply 指定 this 行為改變函式中 this 行為改變

39 arguments.callee 不能用匿名函式中指向函式本身遞迴呼叫最佳化 "use strict"; JavaScript 錯 settimeout(function() { 誤 settimeout(arguments.callee, 1000); }, 1000); "use strict"; settimeout(function f() { settimeout(f, 1000); }, 1000); IE9 ( 含 ) 以下有 bug

40 block 中不可宣告函式 function declaration "use strict"; JavaScript 錯 if(windows) { 誤 function f() { console.log('haswinrt'); } } "use strict"; if(windows) { } 改用 function expression var f = function() { console.log('haswinrt'); }

41 call apply 指定 this 行為改變 "use strict"; function f() { console.log(this); } f.call(null); // null f.call(undefined); // undefined "use strict"; f.apply(null, [1, 2, 3]); 非 Strict 模式 window 使用目的為第二個參數

42 函式中 this 行為改變 "use strict"; f(); // undefined 非 Strict 模式 window function f() { console.log(this); } IE9 bug IE10 ( 原 ) bug

43 "use strict"; 能拿掉嗎嚴謹好事出必有因煩拿掉還沒碰到問題

44 WinJS 實踐 Promise 物件 Observable 物件 Single-page navigation

45 Promise 物件 Promise/A Promise/B Promise/D WinJS.Promise jquery Deferred 物件 Promise/A 不太相同

46 WinJS.Promise 超過 0.5 秒非同步吐回 Promise 物件 messagedialog.showasync() WinJS.Application.local.readText() WinJS.xhr 與 callback 相比語意清晰

AJAX a.php -> b.php -> c.php var xhr = new XMLHttpRequest(); xhr.open('get', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { xhr.

47 AJAX a.php -> b.php -> c.php var xhr = new XMLHttpRequest(); xhr.open('get', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { xhr.open('get', 'b.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { xhr.open('get', 'c.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { //... } }) xhr.send(); } }) xhr.send(); } }); xhr.send();

48 AJAX a.php -> b.php -> c.php WinJS.xhr({ url: 'a.php' }).then(function() { return WinJS.xhr({ url: 'b.php' }); }).then(function() { return WinJS.xhr({ url: 'c.php' }); }).done(function() { /*... */ });

49 AJAX a.php b.php c.php 同時送出等三者皆完成再下一步不用 Promise

50 AJAX a.php b.php c.php 同時送出 WinJS.Promise.join([ WinJS.xhr ({ url: 'a.php' }), WinJS.xhr ({ url: 'b.php' }), WinJS.xhr ({ url: 'c.php' })]).done(function() { /*... */ });

51 視情況 AJAX a.php 或 b.php 使用情境例多元登入 var xhr = XMLHttpRequest(); if(type === 'A') { xhr.open('get', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { // http -> result } f(result); }); xhr.send(); } else { xhr.open('get', 'b.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { // http -> result } } f(result); }); xhr.send(); function f(result) { /*... */ }

52 視情況 AJAX a.php 或 b.php var promise; if(type === 'A') promise = WinJS.xhr({ url : 'a.php' }).then(function(data){ /*... */ }); else promise = WinJS.xhr({ url : 'b.php' }).then(function(data) { /*... */ }); promise.done(function(result) { /*... */ });

53 有值直接用沒值 AJAX a.php if(localstorage.x) f(localstorage.x); else { var xhr = XMLHttpRequest(); xhr.open('get', 'a.php', true); xhr.onreadystatechange(function(http) { if(http.readystate == 4 && http.status == 200) { // http -> result f(result); } }); xhr.send(); } function f(result) { /*... */ };

54 有值直接用沒值 AJAX a.php var promise; if(localstorage.x) promise = WinJS.Promise.as(localStorage.x); else promise = WinJS.xhr({ url : 'a.php' }).then(function(data) { /*... */ }); promise.done(function(result) { /*... */ }); WinJS.Promise.as 非 Promies 轉成 Promise

55 自己兜 Promise 物件 var promise = new WinJS.Promise(function(complete, error, progress) { settimeout(function() { //... complete('demo'); }, 3000); }); Promise 內部 callback 實作參考 WinJS.xhr 原始碼

56 setpromise app.onready = function (ev) { ev.detail.setpromise( WinJS.Application.roaming.writeText("time.txt", new Date()) ); }; 待 Promise 執行完畢 Event 才完畢

57 Observable 物件 var target = document.getelementbyid('target'), a = { x : 1 }, b = WinJS.Binding.as(a); b.bind('x', function(newval, oldval) { target.innerhtml = newval; }); console.log(target.innerhtml); // 1 b.x = 2; console.log(target.innerhtml); // 2 b.x = 3; console.log(target.innerhtml); // 3

58 Observable 物件 ECMAScript 5 Object getter setter Observable Proxy WinJS.Binding WinJS.Binding.as WinJS.Binding.define WinJS 原始碼

59 Single-page navigation Quickstart: Using single-page navigation WinJS.UI.Pages WinJS.Navigation 官方建議使用較像 App

60 Single-page navigation WinJS.UI.Pages.define("/pages/home/home.html", { ready : function (element, options) { WinJS.Utilities.query("a").listen("click", function(ev) { ev.preventdefault(); WinJS.Navigation.navigate(ev.target.href); }, false); } 記得寫否則 });

61 Windows App Cert Kit 簡稱 WACK 或 Windows ACK App 上架前 JavaScript 特有不通過 UTF-8 檔案編碼 Bytecode 產生

62 UTF-8 檔案編碼檔案開頭要有 BOM jquery 待續官方說法 BOM 提高 15 20% 效能

63 Bytecode 產生 App 內 JavaScript 存為 Bytecode 不通過處理步驟本機電腦 App 移除組態選單 Release 專案 -> 市集 -> 建立應用程式套件精靈 Windows App Cert Kit

64 Bytecode 產生

65 Bytecode 產生

66 Bytecode 產生

67 Bytecode 產生

68 立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊優惠內容 : Windows Store / Windows Phone 啟用後 12 個月, 完全免費 Windows Azure 訂閱期間, 每月固定的免費使用量

Resources Connect. Share. Discusss http://www.microsoft.com/taiwan/techdays2012/ Microsoft Certification & Training Resources http://www.microsoft.com/learning/zh/tw/ Resources for IT Professionals Resources for Developers http://social.

69 Resources Connect. Share. Discusss Microsoft Certification & Training Resources Resources for IT Professionals Resources for Developers / /

71 請協助完成本課程問卷並在離開教室時交給工作人員填妥大會背包中的大會問卷可於活動第三天兌換問卷禮哦感謝您的合作

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操计算机基础部程序设计类课程介绍 1. Java 语言程序设计 Java 简介 Java 是一种开放的可以撰写跨平台应用程序的面向对象的程序设计语言 Java 技术具有卓越的通用性高效性平台移植性和安全性, 广泛应用于 PC 数据中心科学超级

課程簡介 Windows Store App 支援以原先用於網頁前端 開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發 這使得原先做網頁開發的開發人 員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win

課程簡介 Windows Store App 支援以原先用於網頁前端開發的 HTML/CSS/JavaScript 技術來進行 ap p 的開發這使得原先做網頁開發的開發人員得以使用既有的知識及技能來開發 Windo ws 8 Apps 本課程將會介紹在使用 JavaScript 開發 Win