學期 2–1 紀錄

學習用 JavaScript 實作 週年慶摸彩活動

彩券號碼產生機

字串處理：運用 Math.random 組合隨機字串、前兩個字符為大寫英文字母、後四個字符為數字

組合字串、裁切字串、加密處理

slice( ) 方法裁切字串、名字的總長度不變、顯示前兩個字母、剩下改成 *

indexOf( ) 方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1

陣列與物件處理、刪除黑名單資料

運用索引 [ index ] 來存取陣列資料、includes( ) 方法會判斷陣列是否包含特定的元素、、、、、、splice( ) 方法可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容刪掉資料

運用點記法 (dot notation) 來存取物件屬性的值、雙層 for 迴圈 ＋ if 條件判斷、

函式應用處理、摸彩活動後端程式、把細節都封裝在函式裡

函式封裝程式碼、函式中呼叫另一個函式、把函式當值，搭配迴圈應用： do….while 、 forEach

用 一維佈局系統： Flexbox 實作 RWD

排版如果已經有了現成的內容，想要微調他們的間距或對齊方式
(所謂 content-out 排版)，適合用 flexbox。

依設計稿分析 HTML 架構實現 RWD 設計、遵照 mobile first 來撰寫 CSS、根據設計稿圖 RWD 設計來佈局 HTML 架構

局部流動 (Mostly Fluid局部流動 (Mostly Fluid)、可用 Flexbox 來控制寬度的變化創造 RWD 效果。

學習使用 二維佈局系統：Grid 實作 RWD

可同時操作欄與列兩個維度，如先有排版設計，打算從零開始把元素放進去 (所謂 layout-in 排版)，適合使用 CSS grid。

使用 grid 佈局結構

使用 Bootstrap 的 grid 佈局結構

Bootstrap 網格系統預設有 12 個 column，直接在 .col-* 後加上數字，表示要跨用幾個 column，如上圖、、、、、、、、、、、、、、、、、 Bootstrap的RWD佈局裡一共有五個分界點，分別用 xs、sm、md、lg、xl 等前綴詞來表示。 例如 sm ≥ 576px、沒加上前綴詞，就會判定是 xs。

用 DOM 操作與事件處理RGB 與 HEX 色碼的轉換器