執行 Node 在命令提示字元下，執行 node 檔案.js
離開 Node 輸入 .exit 或 Ctrl+D
讓CSS重新整理->按CTRL+F5就能讓瀏覽器重新取的新的CSS內容。 20240727
或是在<script src="xx.js?20250119"，加上問號重新載入 20250119
翻牌遊戲的專案裡，用到 Fisher–Yates shuffle 的概念。用於讓牌組Array隨機排序(洗牌的概念)，而洗牌演算法的好處在於，能夠把順序洗的很徹底。
Fisher-Yates Shuffle的條件：
1.結果要能覆蓋所有狀況
2.出現在其他位置的機率相等
操作方式：
以撲克牌52張為例，具體文字表述會是：
1.將最底部的卡片抽出，與前面的剩餘卡片中，隨機一張牌交換。
2.接著重複步驟直到最上面的第二張牌為止
將最後一張牌不斷地和前面隨機的卡牌交換位置，就可以保證每一張牌都被換過。
程式碼範例：
let arr = [1, 2, 3, 4, 5]
function shuffle(arr) {
const n = arr.length;
for (let i = 0; i < n; i ++) {
const rand = Math.floor(Math.random() * (n - i)) + i;
[arr[i], arr[rand]] = [arr[rand], arr[i]];
}
}
shuffle(arr)
console.log(arr)
假設結果為 [5, 1, 4, 2, 3]
初始陣列 [1, 2, 3, 4, 5]
第一次rand為 0~4
arr[0], arr[4] = arr[4], arr[0] 也就是 1, 5 = 5, 1 。 [5, 2, 3, 4, 1]
第二次rand為 1~4
arr[1], arr[4] = arr[4], arr[1] 也就是 2, 1 = 1, 2 。 [5, 1, 3, 4, 2]
第三次rand為 2~4
arr[2], arr[3] = arr[3], arr[2] 也就是 3, 4 = 4, 3 。 [5, 1, 4, 3, 2]
第四次rand為 3~4
arr[3], arr[4] = arr[4], arr[3] 也就是 3, 2 = 2, 3 。 [5, 1, 4, 2, 3]
Javsscript 語法
const points = [40, 100, 1, 5, 25, 10];
for (let i = points.length -1; i > 0; i--) {
let j = Math.floor(Math.random() * (i+1));
let k = points[i];
points[i] = points[j];
points[j] = k;
}
const points = new Array(40, 100, 1, 5, 25, 10); -->Object way
const points = [40, 100, 1, 5, 25, 10]; -->Arrays way
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
在開發網頁時，修改了javascript，但重新整理數次，
仍是使用 cache 的 javascript ..；
如何叫它重新載入？
瀏覽器物件模型 (BOM, Browser Object Model) 是瀏覽器提供的物件，讓你可以透過 JavaScript 直接跟瀏覽器溝通或做操作。
瀏覽器物件模型其實沒有一個統一標準，但現代瀏覽器都有提供以下的物件讓你做操作：
DOM (Document Object Model) 定義了一組標準 API (Application Programming Interface) 讓我們可以用 JavaScript 對 HTML 文件做操作。
API (HTML 網頁) = DOM + JavaScript。
DOM 將一份 HTML 文件看作是一個樹狀結構的物件，讓我們可以方便直觀的存取樹中的節點 (node) 來改變其結構、樣式 (CSS) 或內容等：
HTML DOM 規範中定義了這些類型的 API：
讓我們可以對 HTML 的元素 (element) 當作是 JavaScript 物件 (object) 來操作
定義了 HTML 元素有哪些屬性 (properties) 可以來做存取
定義了 HTML 元素有哪些方法 (methods) 可以來被操作
定義了 HTML 元素事件 (events)，讓我們可以針對特定元素來綁定事件處理函式 (例如使用者按下滑鼠、在鍵盤打字都是所謂的事件)
// 取得頁面上所有的 <p> 元素
var paragraphs = document.getElementsByTagName('p');
// 將所有的 <p> 元素的文字顏色都改成綠色
for (var i=0; i<paragraphs.length; ++i) {
paragraphs[i].style.color = 'green';
}
更多 HTML DOM API 的使用方法，請看：