▶ 前言 📖 使用指南 📅 學習進度規劃 📌 里程碑規劃 🍅 網頁切版秋季班 【week6】 bootstrap5 grid格線系統 🍎 HTML

tags: 里程碑規劃 Last updated: 2022/11/27 📌 里程碑規劃 里程碑最終目標是 2023/2 月轉職前端工程師為首要，並且以 Vue 框架完成面試作品，在學習進程規劃順序會以小里程 (短期)、中階里程碑 (中期)、大里程碑(長期)，並以三個月為基準，採取滾動式調整學習進度與順序。 ▶ 1. 小里程碑 [x] 完成 JS 直播班最終作業(前、後台) 每日習慣養成( 番茄鐘: 🍅 / 天)

tags: v-text 六角學院 date: 2022 / 12/ 28 ✏ 綁定內容於畫面上 v-text 綁定資料於畫面上 {{ }}: 使用雙大括號中間可直接插入 元件資料 或者任何表達式內容 來呈現。 v-text: (綁定在html 標籤元素內) v-model: 畫面與資料雙向綁定 v-html: 可同時輸出 HTML 結構，在使用上要特別注意：請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。詳細說明可參考 XSS 攻擊 v-once: 只進行一次畫面渲染，資料更新時，畫面不會再更動。

指令語法全介紹 綁定內容於畫面上

tags: JS 5組 - 2022 秋季 JS直播班 、最終關卡挑戰 Day1 - 前台(取得產品、購物車列表) date: 2022 / 11/ 21 Day 1 - 前台(取得產品、購物車列表) 今日挑戰目標: 前台(取得產品、購物車列表) 使用到 API 六角學院 - 最終關卡資源 攻克最終關卡前準備:

tags: JS 5組 - 2022 秋季 JS直播班 、 最終關卡挑戰 Day4 - 後台(訂單列表 - 功能整合) date: 2022 / 11/ 23 Day4 - 後台(訂單列表 - 功能整合) 昨天我們已經完成前台頁面的 API資料串接 與 功能整合，今天將進入到後台開發的訂單列表 API設計。 今日挑戰目標: 後台(訂單列表 - 功能整合) 使用 API 確認 API 路徑

tags: JS 5組 - 2022 秋季 JS直播班 、最終關卡挑戰 Day3 - 前台(表單 - 功能整合) date: 2022 / 11/ 23 Day3 - 前台(表單 - 功能整合) 昨天我們已經完成購物車功能整合，今天我們將專注於表單的功能整合。 今日挑戰目標: 前台(表單 - 功能整合) 使用API 表單 - 功能整合任務

tags: JS 5組 - 2022 秋季 JS直播班 、 最終關卡挑戰 Day5 - 後台(C3.js 圖表設計 - LV2 ) date: 2022 / 11/ 25 Day5 - 後台(C3.js 圖表設計 - LV2 ) 昨天我們已經完成後台訂單列表的API 串接與功能整合，今天是最終關卡挑戰的最後一天，要完成的任務是後台 C3.js 圖表設計 - LV2 區塊，大家一起加油吧! 今日挑戰目標: 後台(C3.js 圖表設計 - LV2 ) 訂單列表 - 功能整合任務 後台( LV2 圖表)設計

tags: JS 5組 - 2022 秋季 JS直播班 、最終關卡挑戰 Day2 - 前台(購物車 - 功能整合) date: 2022 / 11/ 22 Day 2 - 前台(購物車- 功能整合) 昨天我們已經完成取得商品與購物車列表資訊，今天我們將專注於把產品新增到購物車內與整合購物車功能。 今日挑戰目標: 前台(新增產品、修改產品數量、單筆刪除、全部刪除) 使用API 購物車功能任務

tags: 2022 JS 直播班 - 心得分享 、JavaScript date: 2022 / 11/ 21 2022 JS 直播班 - 心得分享 當初為什麼報名這堂課？ 這是我第二次參與 JS 直播班，在 2021年也參加過 JS 直播班，因為那時候基礎還不太穩，光聽課與練習就滿吃力的，今年會再度挑戰 JS 直播班是因為 想檢視從去年到今年的自己 JS 技術與觀念到底掌握了多少，是否能夠戰勝 2022 JS直播班的課程與任務。 今年的課程大綱有大幅度的加碼，除了基本課程與主線任務外，還有邏輯測驗與面試考題，讓你可以盡情的狂練 JS。

tags: React Create React App React Developer Tools date: 2022 / 11 / 16 ✏ 認識 React 環境建置與擴充套件 React 官網有提供因應不同開發模式所建議的環境設定，因為我們希望能建構一個 single-page 專案的練習，因此我們選擇 Create React App 來建立開發環境。 在此系列的筆記都會以 Functional component 為主。 使用 Create React App 建立環境 npm 安裝 React

tags: JavaScript for of forEach date: 2022 / 11 / 1 ✏ for of 與 forEach 差別 我們在開發時，經常使用 for of 和 forEach 的迴圈方法去處理資料，但會因為使用情境的不同，而去使用不同的迴圈方法，接下來讓我們介紹兩者的差異性與應用情境。 資料範例: 1. 陣列資料 const numArr = [1, 2, 3];

tags: Codewars 、7kyu 7 kyu Incrementer、JavaScript date: 2022 / 11/ 10 💪 7 kyu Incrementer 思考邏輯: 將陣列傳入的數字從第一個數字開始加一、第二個數字加二，依序下去， 如果數字的累加的位數超過兩位，則取個位數，最後將依序累加完的數字返回陣列格式。 方法一. 雙迴圈 .map 兩次 + 三元運算子做條件判斷 先用 .map()，將 num + (index)索引位置 +1 進行數字遞增累加 + 1 、+ 2....。

tags: Codewars 、JavaScript 、7kyu Incrementer date: 2022 / 11/ 10 💪 7 kyu Incrementer 思考方式: 將陣列傳入的數字從第一個數字開始加一、第二數字加二，依序下去 如果數字的累加的位數超過兩位，則取個位數，最後將依序將累加完的數字返回陣列格式。 方法一. 雙迴圈 .map 兩次 + 三元運算子做條件判斷 先用 .map()，將 num + (index)索引位置 +1 進行數字遞增累加 + 1 、+ 2....。

tags: Codewars 、JavaScript 、Count of positives / sum of negatives date: 2022 / 11/ 7 💪 8 kyu Count of positives / sum of negatives 思考方式: 判斷傳入的陣列資料是否為空值。 如果傳入的陣列資料有值的話，在使用迴圈判斷 判斷正、負數。 最後計算正數出現的次數 和 負數的總和，放在陣列中並回傳。

tags: Codewars 、7kyu Filter the number、JavaScript date: 2022 / 10/ 27 💪 7kyu Filter the number 思考模式: 把傳入字串列中的字串部分過濾掉並回傳數字型別。 解法一 使用 split('') 將字串轉陣列在使用 filter() 下篩選條件 運用 isisNaN 內含 Number() 轉數字的資料轉型方法把 false 結果，使用 !(not) 轉為 true 的結果回傳出來。 最後使用Number() 將字串轉為數字型別並回傳出來。

tags: Codewars 、7kyu V A P O R C O D E、JavaScript date: 2022 / 11 / 3 💪 7kyu V A P O R C O D E 思考模式: 將字串統一轉成大寫並每個字母間加一個空白，並回傳字串。 解法一: 字母都轉大寫 .toUpperCase() 把字母字串轉成陣列使用 .filter() 把空白處篩選。 最後使用 .join(" ")組成字串再將字母間插入空白處。

BS5 SCSS 載入 (架構圖講解) SCSS default 觀念講解 <h1>hello,world</h1> //載入兩隻變數檔案 // 自己客製化的變數檔案 $primary: red !default;

原因: 因為gulp卡關多天，也尋求洧杰老師和觀看網路上許多資源， 想分享自己遇到的問題點與解決方法 [Bug - 1] 圖片路徑選取錯誤 (必須選取相對定位) gulp 環境

JS 直播班 - 2021 春季班 (最終關卡開發流程) 待辦事項 [x] 環境建立 [x] 建立基本環境 [x] 拉至榮設計稿整到自己的桌面 [x] 稍微看至榮的 CSS 結構