week13 - stayjay/wp109b GitHub Wiki
根據 MDN 定義 setTimeout() 的作用 是在延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID：
ar timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);如：
var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);而 setInterval() 則是固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。 當然也會回傳一個獨立的 timer ID：
var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
var intervalID = scope.setInterval(code, delay);如：
var timeoutID = window.setInterval(( () => console.log("Hello!") ), 1000);setInterval() 一啟動之後就會在固定的間隔時間不斷執行，那麼如果想要停下來，該怎麼處理呢？
這時候就需要用到 clearInterval() 來取消 setInterval()。
上面說過，當我們呼叫 setTimeout() 與 setInterval() 的時候，它們會回傳一個獨立的 timer ID， 這個 ID 就是當我們想要取消setTimeout() 與 setInterval() 的時候作為識別的數字： setInterval() 一啟動之後就會在固定的間隔時間不斷執行，那麼如果想要停下來，該怎麼處理呢？
這時候就需要用到 clearInterval() 來取消 setInterval()。
上面說過，當我們呼叫 setTimeout() 與 setInterval() 的時候，它們會回傳一個獨立的 timer ID， 這個 ID 就是當我們想要取消setTimeout() 與 setInterval() 的時候作為識別的數字：
var timeoutID = window.setInterval(( () => console.log("Hello!") ), 1000);
window.clearInterval(timeoutID);當程式執行到 clearInterval() 就會取消 setInterval() 了。
另外，與 setTimeout() 對應的就是 clearTimeout()，用法完全一樣：
var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);
window.clearTimeout(timeoutID);其實 JavaScript 的 Date 物件，有個方法叫做 toLocaleString()，只要搭配適當的參數，就能夠轉成各個時區、各個語言的（每個國家表示時間的方法不同，有人用 YYYY-MM-DD，有人用 DD/MM/YYYY）表示方法。基本用法大概是：
new Date().toLocaleString('language', {...options});舉個例子，如果我們要以臺灣的表示法表示臺北時區的話，就可以用：
new Date().toLocaleString('zh-TW', {timeZone: 'Asia/Taipei'});輸出大概會是：
2019/2/2 上午2:56:27舉一反三，如果要以美國的表示法表示紐約時區，就可以：
new Date().toLocaleString('en-US', {timeZone: 'America/New_York'}); 輸出就會是：
2/1/2019, 1:57:17 PM 而 options 裡面還有很多參數可以用，例如如果要 24 小時制的話，可以加上 hour12: false 的選項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input { width:300px }
</style>
</head>
<body>
<script>
function calculate() {
var exp = document.getElementById('exp')
var result = document.getElementById('result')
result.innerText = eval(exp.value)
}
</script>
<input id="exp" type="text" value="3*5+8"/>
= <label id="result"></label><br/><br/>
<button onclick="calculate()">計算</button>
</body>
</html>結果
3*5+8=23Web Storage API 是一種用於在瀏覽器中存儲和檢索數據的簡單語法。這是非常容易使用：
例子
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");localStorage 對象提供對特定網站的本地存儲的訪問。它允許您存儲、讀取、添加、修改和刪除該域的數據項。
存儲的數據沒有到期日期，並且在瀏覽器關閉時不會被刪除。
這些數據將在幾天、幾周和幾年內可用。
localStorage.setItem() 方法將數據項存儲在存儲中。
它接受一個名稱和一個值作為參數：
例子
localStorage.setItem("name", "John Doe");localStorage.getItem() 方法從存儲中檢索數據項。
它以名稱作為參數：
例子
localStorage.getItem("name");sessionStorage 對象與 localStorage 對象相同。
不同之處在於 sessionStorage 對象存儲一個會話的數據。
當瀏覽器關閉時，數據將被刪除。
例子
sessionStorage.getItem("name"); setItem() 方法 sessionStorage.setItem() 方法將數據項存儲在存儲中。
它接受一個名稱和一個值作為參數：
例子 sessionStorage.setItem("name", "John Doe"); getItem() 方法 sessionStorage.getItem() 方法從存儲中檢索數據項。
它以名稱作為參數：
例子
sessionStorage.getItem("name");Property/Method Description
key(n) Returns the name of the nth key in the storage
length Returns the number of data items stored in the Storage object
getItem(keyname) Returns the value of the specified key name
setItem(keyname, value) Adds that key to the storage, or update that key's value if it already exists
removeItem(keyname) Removes that key from the storage
clear() Empty all key out of the storage
Property Description
window.localStorage Allows to save key/value pairs in a web browser. Stores the data with no expiration date
window.sessionStorage Allows to save key/value pairs in a web browser. Stores the data for one sessionfile://可以自由支配，那麼將不會阻止它加載幾乎任何文件，並將它發送出去，誰知道在哪裡。
因為這太危險了，瀏覽器在file://. 每個頁面都被視為唯一的本地域。這就是“保存網頁”在某種程度上起作用的原因。它在相同的跨站點限制下打開，就像它們在實時服務器上一樣。
在 Windows 上，有許多“捆綁安裝程序”可用，它們將流行的 Web 技術（如 Apache、PHP 和 MySQL）打包在一起並從單個 exe 設置。
SKYPE 喜歡默認竊取 80 端口。確保重新配置它！ 我們推薦WAMP Server或XAMPP，兩者都有簡單的設置指南可用。WAMP 專門在您的系統托盤中安裝了一個圖標，您可以從中停止和重新啟動服務，以及修改 Apache 設置，例如為項目創建新的文件夾別名。
Cesanta 提供Mongoose Web 服務器。這是一個非常小的應用程序，不需要安裝並且可以作為單個 exe 文件運行。如果沒有像 SSI 和 WebDAV 這樣的所有附加包（HTML5 遊戲不需要這些包），exe 的大小只有 45KB。即使是功能齊全的版本也只有 355KB。
您還可以單獨下載一個 Web 服務器，而不是“多合一”捆綁包。無論微軟IIS和Apache的，可以免費下載。
注意：如果您使用 WAMP 服務器，您可能會發現 IE11 會導致它凍結。這是解決這個問題的方法。
作為 Unix 環境的核心，OS X 上的可用選項比 Windows 多。但是，如果您想要像 WAMP 這樣的“多合一”方法，具有漂亮乾淨且易於使用的界面，那麼我們強烈推薦MAMP。這有兩種版本：一種是免費的，一種是付費的。
當然，也有手動設置本地 Web 服務器的指南，例如為 Mountain Lion 編寫的本指南。選擇你覺得最舒服的方法。
咕嚕咕嚕連接 Grunt是一個非常強大的安裝工具，無論您是否將其用作 Web 服務器。從本質上講，它是一個基於 JavaScript 的任務運行器，允許您自動執行繁瑣耗時的任務。例如，我們在 Phaser 中使用它來構建我們的分發腳本。但它也可以使用插件Connect進行配置以提供本地文件，充當 Web 服務器。
使用 Python 的簡單 HTTP 服務器 如果您需要一個快速運行的 Web 服務器，並且不想在設置 Apache 或下載應用程序方面陷入困境，那麼 Python 可以提供幫助。Python 帶有一個簡單的內置 HTTP 服務器，它可以為來自任何本地文件夾的文件提供服務。當然，您唯一需要安裝的是 Python。在此處閱讀完整指南
node.js 的 http 服務器 http-server是一個簡單的、零配置的node.js命令行 http 服務器。它對於生產使用來說足夠強大，但足夠簡單且易於破解，可以用於測試、本地開發和學習。或者正如網站所說的“提供靜態文件，就像綁在火箭上的烏龜一樣”。從http-server 網站獲取 npm 和說明
php 5 內置網絡服務器 從 PHP 5.4.0 開始，CLI SAPI 提供了一個內置的 Web 服務器。它僅適用於開發目的並按順序提供所有文件，但對於測試 HTML5 遊戲來說足夠強大。它從單個命令行調用中調用，您可以在 PHP 手冊 中找到有關如何執行此操作的詳細信息。
不管你怎麼做，重要的是能夠在本地提供文件。完成後，您就可以在第 3 部分中選擇 IDE 了。
需要一個編輯器來準備您的 JavaScript 代碼。有很多可用的，每個都有自己的優點和缺點。如果您是一位經驗豐富的開發人員，您可能已經擁有自己喜歡的編輯器，在這種情況下，請繼續閱讀本指南的第 5 部分。否則，這裡有一些選項供您選擇：
崇高的文字
昇華
這是 Phaser 團隊用於構建框架和所有項目的編輯器。它甚至是編寫本指南的編輯器。 Sublime 應該被視為一個非常強大的文本編輯器，而不是一個 IDE。
諸如“轉到”任何東西的能力、拆分編輯、多個光標、無干擾模式和大量強大的插件等功能使其成為我們在數十年的發展中使用過的最快、最通用的編輯器。
使用其綜合包系統，可以通過多種方式增強它。
筆記文章皆有參考以下網址 https://gitlab.com/ccc109/wp