CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：待辦事項小工具

hung · 04月19日

JavaScript（二）—— 親手做個待辦事項小工具 - 統整

[第1課 ── 認識 DOM 樹、新增元素](https://codelove.tw/@howtomakeaturn/post/9xL07x) [my code](https://jsfiddle.net/y97oenpv/13/) --- [第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件](https://codelove.tw/@howtomakeaturn/post/RqzDX3) [my code](https://jsfiddle.net/y97oenpv/27/) --- [第3課 ── 認識 for 迴圈](https://codelove.tw/@howtomakeaturn/post/Aq5Agq) [my code](https://jsfiddle.net/24vyer91/26/) --- [第4課 ── 讀取與修改 DOM 元素的 class](https://codelove.tw/@howtomakeaturn/post/n3VzD3) [my code](https://jsfiddle.net/24vyer91/26/) --- [第5課 ── 認識 onchange 事件](https://codelove.tw/@howtomakeaturn/post/Ja6GJq) [my code](https://jsfiddle.net/24vyer91/41/) --- [第6課 ── 讀取與修改 DOM 元素的 style](https://codelove.tw/@howtomakeaturn/post/YqZQQa) [my code](https://jsfiddle.net/24vyer91/77/) --- [第7課 ── 用 Selector API 選取元素](https://codelove.tw/@howtomakeaturn/post/NxNQ6q) [my code](https://jsfiddle.net/hm6w7ejg/6/)

1個讚 0留言 321瀏覽

站長阿川 · 01月29日

JavaScript 系列六：第1課 ── 認識 data model 與 render function

## 課程目標認識 data model 的觀念認識 render function 的觀念 ## 課程內容如果電商網站上有這樣的內容 ``` <div> 商品名稱：<span id="name">冬季外套</span> 價格：<span id="price">$1,990</span> 分類：<span id="category">女裝</span> 剩餘數量：<span id="remain">5</span> </div> ``` 在網站上的任何操作，菜鳥工程師會覺得就直接去更新 DOM 就好了在程式還小的時候，這樣開發沒問題但是當專案變大之後，這樣的開發會遇到問題，程式碼會越來越難維護這種很難維護的寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 --- 有經驗的工程師在開發的時候，會習慣將應用程式的「狀態」與程式的其他部份分開來這個「狀態」我們叫 state 或者 model 或者 data model 實務上，這三種名詞都很常看到，我在文章中也會混雜著交互使用同樣的電商頁面，資深工程師會覺得看到了以下 data model ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 } ``` 而在開發各種功能的時候，資深工程師會覺得，一律先更新 data model，再接著拿 data model 來呈現出 UI 比較好這樣在開發複雜應用程式的時候，相關函式一律只要關心 data model 就好，不用管 UI 在思考的時候，腦子的負擔會小很多，因為你變得只要想著應用程式的「狀態」就好 --- 那麽只更新 data model，那何時更新 UI 呢？這邊介紹一個簡單的方法，叫做 render function 就是放一個 root 元素，作為程式 UI 的容器接著寫一個 render 函式，來根據 data model，畫出全部 UI 到 root 裡面這個 render 函式有三個注意事項 - 第一行要先清空 UI - 在所有跟「狀態」有關操作的最後一行，都要呼叫這個函式 - 所有 DOM 操作一律由 render 函式處理（其他全部函式，通通禁止更新 DOM）請在 jsfiddle 嘗試以下範例 ``` <div id="root"> </div> <button onclick="decrease()">decrese</button> <button onclick="increase()">increase</button> ``` ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 }; render(); function render() { var root = document.querySelector('#root'); root.textContent = ""; var name = document.createElement('div'); name.textContent = '商品名稱：' + product.name; var price = document.createElement('div'); price.textContent = '價格：' + product.price; var category = document.createElement('div'); category.textContent = '分類：' + product.category; var remain = document.createElement('div'); remain.textContent = '剩餘數量：' + product.remain; root.append(name); root.append(price); root.append(category); root.append(remain); } function decrease() { product.remain = product.remain - 1; render(); } function increase() { product.remain = product.remain + 1; render(); } ``` 這樣的寫法，很神奇地，關於 DOM 的操作通通放在 `render` 即可雖然 `render` 函式變得很多行、很大、寫起來比較麻煩但是除了 `render` 以外的函式，通通都變簡單了這是「短期麻煩，長期方便」的一個明顯例子 ## 課後作業在之前的課程，你開發過一個「待辦事項小工具」，甚至還加上了 local storage 儲存功能在開發的過程中，我相信你有感覺到，程式碼越來越大團了，新功能雖然寫得出來，但越來越難寫了回頭看看當初的程式碼，你會發現讀起來不容易，要再維護、擴充功能，也都不太容易讓我們使用新方法，重新開發一次這個小工具請使用 https://jsfiddle.net 並且建立一份新的 fiddle --- 這一課，不開發任何功能，先實作把 data model 給 render 出來的效果請使用以下 html 作為 root 元素 ``` <div id="root"> </div> ``` 然後複製以下 js 使用，將 `render` 函式完成 ``` var todos = [ { title: "倒垃圾" }, { title: "繳電話費" }, { title: "採買本週食材" }, ]; function render() { // 請寫出此函式內容 } render(); ``` 在這段 js 中，`todos` 陣列，就是我們的 data model 最後，在畫面上，應該會出現以下內容 ``` <div id="root"> <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> </div> ``` 做出以上功能，你就完成這次的課程目標了！

1個讚 22留言 1,444瀏覽

站長阿川 · 01月20日

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

## 課程目標認識並且能使用 Local Storage 相關功能 ## 課程內容 Local Storage 提供了前端開發者簡易的儲存功能，能夠把資料儲存在瀏覽器上跟 cookie 不同的是，local storage 的資料不會挾帶在 http request 中發送，也就是伺服器端無法直接存取並且 local storage 能儲存的資料大小，比 cookie 大很多 ``` Name: <input type="text"> Age: <input type="text"> <button onclick="save()">Save</button> ``` ``` if (localStorage.getItem("me")) { var me = JSON.parse(localStorage.getItem("me")); alert('hello, ' + me.name + ' (' + me.age + ')'); } function save() { var name = document.querySelectorAll('input')[0].value; var age = document.querySelectorAll('input')[1].value; var me = { name: name, age: age }; localStorage.setItem("me", JSON.stringify(me)); alert('saved'); } ``` 在這邊的範例中，使用 `localStorage.setItem()` 來儲存資料，使用 `localStorage.getItem()` 來取得資料因為只能在 local storage 中儲存字串，所以使用 `JSON.stringify` 將物件轉換成字串，使用 `JSON.parse` 將字串轉換成物件在 JavaScript 中，表達物件的字串格式又稱為 JSON 字串，反正就是一種格式而已，資料類型是字串上述的程式碼，寫起來比 cookie 簡單很多，API 乾淨很多實務上，如果儲存的資料，不需要在主機端使用，就都用 local storage 即可 --- 關於 local storage 的 debug 除錯，也要知道一下跟 cookie 差不多打開瀏覽器開發者工具 -> Application -> Storage -> Local Storage 可以看到網站上有哪些資料，也可以直接在這邊修改、刪除資料 ## 課後作業請回頭找出你在系列課程二寫的作業 https://codelove.tw/@howtomakeaturn/course/vx8gqZ 當初的待辦事項小工具，少了一個重要功能：儲存按鈕也就是重新整理之後，待辦事項就通通不見了請在「匯出」按鈕旁邊，增加一個「儲存」按鈕，讓待辦事項在頁面重新整理之後，還可以繼續使用 - 按下按鈕之後，使用 local storage 儲存待辦事項資料，並跳出 alert 提示「儲存成功！」 - 頁面載入的時候，檢查 local storage，有資料的話，就復原到畫面上做出以上功能，你就完成這次的課程目標了！

0個讚 20留言 1,171瀏覽

站長阿川 · 01月10日

JavaScript 系列三：前言

本課程為 JavaScript 基礎課程的第三部份在前兩部份的課程中，已經學會程式設計的基本觀念，以及 DOM 操作的基本方法在這次的課程，我們將練習製作實務上常用的 UI 元件藉由這次練習，強化在前兩部份課程學到的知識 --- 身為工程師，常常要做一些沒做過的功能這時，就需要足夠的自學、研究能力，以及敢於面對未知的信心也就是雖然功能看起來沒做過，但你有把握稍微研究之後，就能做得出來所以這次的課程，我只會提供簡單介紹＆關鍵字接著就直接提出作業規格，你需要自行研究如何完成作業 --- 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) - [自學網頁の嬰兒教材：JavaScript（二）—— 親手做個待辦事項小工具](https://codelove.tw/@howtomakeaturn/course/vx8gqZ) 準備好的話，讓我們馬上開始吧！

1個讚 0留言 588瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）