🔍 搜尋結果:系列

🔍 搜尋結果:系列

JavaScript 系列七:第2課 ── 體驗一下 Reactivity 的效果與便利

## 課程目標 - 體驗一下 Reactivity 的效果與便利 ## 課程內容 來學 Vue 之中 Reactivity 的基本觀念 - https://vuejs.org/guide/essentials/reactivity-fundamentals.html 老樣子,大部份看不懂沒關係,稍微有個印象就好 記得之前的課程,每次更新完 state,你都要接著去執行 `render()` 函式嗎? 所謂 Reactivity 就只是說:當你更新完 application state 之後,Vue 會自動幫你更新 UI 上的內容 就只是這樣,不要把它想得太複雜 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> 嗨,我是 {{ user.name }} <button @click="changeNewName"> 改名字 </button> </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" } } }, mounted() { this.user.name = "Frank" }, methods: { changeNewName() { this.user.name = "Kevin" } } }).mount('#app') </script> ``` 到 jsfiddle 跑跑看,看看畫面上出現什麼 `mounted` 是 vue 將畫面第一次載入之後,可以安排任務的地方,通常會放一些「系統初始化任務」 `@click` 跟 `methods` 那些,就只是操作事件的寫法而已,先照做就好 以上兩點,後面課程會詳談 --- 在 Vue 文件中,你會到處看到 `this` 這個關鍵字 要存取 application state,有時前面要加 `this.` 有時又不用 關於 `this` 關鍵字,它是一個 JavaScript 程式語言裡面過時又晦澀難懂的觀念 我不想細談,你也先不用研究。就先照做、程式能跑就好了 反正改天你真的遇到問題,大概知道要往這方向研究就是了 --- 接著來學 Vue 之中 Computed 屬性的觀念 - https://vuejs.org/guide/essentials/computed.html 老話一句,看不懂沒關係 雖然大家都說用這寫法,效能會比較好、程式碼會比較優雅 但實際上,我自己在好幾個專案,就完全不使用任何 `computed` 功能 一律通通只用 `methods` 來寫程式,根本也不會怎麼樣 --- 在整門系列課程,會常常像這樣,我叫你讀官網文件的很多內容 但我接著又會說,看不懂沒差,其中 XXX 根本沒用,其中 YYY 也沒必要用,只學 ZZZ 就好 這些都是我個人的主觀意見。如果你在網路上找資料,會看到許多工程師,有跟我完全相反的建議 這是軟體工程師圈子的常態,充滿各種主觀喜好、偏見,你要習慣一下 (如果你很好奇我是怎麼做出這些判斷的,請重新閱讀此系列課程,第一篇文章:前言,裡面的最後一段) 你不需要完全同意我的觀點,在研究過程中,如果你有發現比較喜歡的寫法,就直接用沒關係 如同我多次提醒過:只要能解決問題就好,你就隨便寫沒關係 各種做法細微的差異,將來有一天你會慢慢理解 ## 課後作業 承接上一課的作業 這一課來簡單體驗一下 reactivity 的效果就好 也就是簡單更新一下 application state 就好 請加入 `mounted` 函式,在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」 完成之後,你會發現,你的春節行程安排,看起來積極多了~ 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:第1課 ── 認識 Vue 基本環境與 render state

## 課程目標 - 能夠運行 Vue 基本環境 - 能夠 render state ## 課程內容 身為工程師,要習慣到處翻閱各種技術文件 這次的課程,我不會手把手帶領,細談所有觀念 我會一次提供一個官網連結。請你一邊閱讀,一邊把其中的範例貼到 jsfiddle 跑跑看 我會額外提供簡單介紹&關鍵字,然後補充一些注意事項 官網文件內容是英文,如果對英文沒把握,就去翻中文官網 https://cn.vuejs.org/guide/introduction.html 但是,長遠來說,還是要逐漸提升自己的英語閱讀能力才行 --- 先學基本的安裝&運行 - https://vuejs.org/guide/quick-start.html 這系列課程,我們用最簡單的 CDN 環境來跑就好了,先只學 CDN 那一段就好 --- 接著來學 Vue 最基本觀念 - https://vuejs.org/guide/essentials/application.html - https://vuejs.org/guide/essentials/template-syntax.html 內容很多,大部份看不懂沒關係,稍微有個印象就好 如同我在前言所說,同一件事有很多種花俏寫法,你根本不用全部學會 這一課我們只要學會如何 render state 就好了 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> {{ user.name }} 喜歡吃 {{ fruits[0].name }} 以及 {{ fruits[1].name }} </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" }, fruits: [ { name: "Apple", }, { name: "Banana", }, ] } } }).mount('#app') </script> ``` 上面這段範例,在 `data()` 函式將 application state 準備好 然後只要將一段作為 UI 的 html 寫好,我們稱之為模板(template) 接著 Vue 就會把 state 放進 template 裡面,把結果給 render 出來 貼到 jsfiddle 跑跑看吧,你會發現非常簡單、好理解 ## 課後作業 這系列課程,我們要模仿 Google Keep 製作一個應用程式 請先把玩一下 Google Keep https://keep.google.com/ 作業使用 jsfiddle 來寫 --- 這一課先簡單呈現 UI 就好 請使用以下這段 code 作為 application state ``` data() { return { notes: [ { title: "春節行程安排", content: "吃飽睡,睡飽吃", color: "red", }, { title: "工作待辦事項", content: "詢問各家廠商報價", color: "green", }, { title: "運動健身計畫", content: "每天早上六點去健身", color: "blue", }, ] } } ``` 使用以下這段 code 作為 template ``` <div id="app"> <div class="note"> <h3 class="title"> <!-- 請顯示第一個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第一個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第二個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第二個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第三個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第三個項目的內容 --> </p> </div> </div> ``` - 陣列內容就只有三筆資料,就只要顯示這三筆資料就好 - 在 application state 裡面的陣列,直接用 `索引` 來取出值就好,這一課先不用寫 for 迴圈 - color 這一課還不會用到,可以先忽略沒關係 - 請在 `<style>` 加上一些樣式,讓整個頁面漂亮一點 - 每則記事可以單純的放進網頁就好,不用像 Google Keep 那樣花式的排版(那種叫瀑布流排版,很難寫) 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列七:前言

我知道你們很多人,來上這門課程,都是希望可以儘快去上班、賺錢 所以... 我們來學 Vue 吧! --- 在開始之前,我必須再次強調 與坊間很多補習班不同,我們已經花了六門課程的時間,在練習原生 JavaScript 與網頁基本觀念 也就是説,就算完全不使用任何套件,只用最原始的開發方式,你也已經可以寫出各種前端功能了 就算現在直接拿職場上的客戶需求給你,請你做出來,其實很多需求「你已經可以直接寫出來」了 只是有些客戶要求的功能,畫面上的 `狀態` 與 `互動行為` 太多,原生 JavaScript 寫起來會很吃力 就算引入 data model + render function 的觀念來輔助,還是很難寫 所以我們要學習「框架」,讓應用程式的 `狀態` 與 `互動行為` 變得更好管理 --- 我想說的是,不管你被要求去學習哪種框架 你都要知道,不管寫起來多花俏、或者語法看起法多晦澀難懂,追根究底,都只是在管理 `狀態` 與 `互動行為` 然後底層就只是一堆 `變數` 跟 `各種對於 DOM 的增減操作` 而已 不要把框架想得太神奇,都是你已經會寫的東西,只是為了方便而進一步包裝而已。業界術語叫:抽象化(abstraction) --- 最後,我想說明一下學習複雜工具該有的心態 即便是在同一個社群內(例如 Vue 社群) 對於完成一個任務,該把語法設計成什麼樣,都有各種不同意見 也就是想要解決一個問題,看起來寫法 A 就可以做到 有人會說不夠好,要用寫法 B 才算是漂亮 有人會說都不行,要用花俏的寫法 C 才算是真正完成 我個人的建議是:先從最單純、好理解的寫法開始學起!工作上也只使用這些即可!就算程式碼會因此冗長一點,也沒關係! --- 在學習任何框架的路上,面對某個部份,經常會出現這種感覺: 「這部份好複雜,雖然好像可以解決問題,但我有點不懂,這好像用更簡單的 XX 寫法就可以,不是嗎?」 一旦出現這種感覺,一律就只用 XX 寫法就好,不用管別人怎麼說 用簡易好懂的寫法 A 如果可以完成一堆任務,就通通都用寫法 A 就好 更進階的寫法 B 以及更花俏的寫法 C,只要「知道有他們的存在」就好,不用急著搞懂 在未來,真的遇到寫法 A 的瓶頸時,你自然會想起 B 跟 C,也才會終於了解他們的價值 也很有可能,整個職業生涯都用不到 B 跟 C,那本來就是一些花俏人士的個人偏好而已,你不用在意 所以,能解決問題就好,不要被框架的龐大文件,與社群的各種五花八門意見所迷惑了! 話不多說,讓我們馬上開始來寫 Vue 吧!

發問-能不能做解讀代碼系列!?(內有題材之一:破解右鍵

# 主題 一直覺得看別人的code可以學到很多 不只是方法還有寫程式的觀念 想許願新的教學文章是 帶著看code 解讀網頁上實際運用到的東西 我第一個想丟出來討論的是破解右鍵 # 程式碼 ```javascript= javascript: (function() { function R(a) { ona = "on" + a; if (window.addEventListener) window.addEventListener(a, function(e) { for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null; }, true); window[ona] = null; document[ona] = null; if (document.body) document.body[ona] = null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart"); } )() ``` # 我的觀察與分析 ## 程式風格分析 我只看的出來這邊 他非常非常聰明 的利用一個function 去做一堆addEventListener 感覺這是pureJs很漂亮的寫法  而不是每個都在那邊addEventListener五坨 似乎這樣寫會比較乾淨 或者說有概念 總之就是比較酷也比較厲害的感覺 ### 我的看法 不知道有沒有什麼名詞可以形容這個概念 如果是Jquery 我覺得類似手法應該是變成一個Jquery物件群組(不太確定這個名詞) 然後再直接live或on或是trigger好像就可以了!? ## 程式內容討論 originalTarget跟parentNode可以查MDN看到,不過還是不太了解具體內涵。 大概只知道原理應該就是解除所有,監聽那些「禁止操作」的listener 但搞不太清楚怎麼寫成這樣子 ### 我的看法 感覺如果用Jquery 似乎可以直接unbind就解決了!? # 總結 以上我覺得這題材是很不錯的討論 目前網路上應該都沒有人願意進行這種探討 但這恐怕卻是最多人接觸JS的其中一環 有點矛盾XD 看是不是有機會可以以此為題材 針對code去重構 分析討論都滿好的~~~ 如果各位同學也好奇的一起+1 或是有懂的  也來分享!! 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害!!

JavaScript 系列六:結語

讓我總結說明一下,老方法、新方法的關鍵思維差異: - 在老方法中,工程師眼中主要關心 html,開發過程會一直去思考 html 結構,因為「應用程式的狀態(資料)」就存在 html 之中,html 同時是狀態、也是 UI - 在新方法中,工程師眼中主要關心 data model,通常就是一個 JSON 物件。這個物件的各個屬性,足以表達目前應用程式的狀態。至於狀態要怎麼呈現為 UI,則視為另一個獨立任務,可以另外處理。像這樣把兩件事分開來思考,對頭腦的負擔也比較小 --- 同樣的待辦清單小工具,原本的寫法,與現在的新寫法,請你比較一下程式碼 有沒有覺得變得易讀、好維護許多呢? 在課程中,我多次說過以下這段描述: > 原本那種寫法,我稱之為「在各處胡亂更新各處 DOM」的寫法 > 新的那種寫法,只有在寫 render 時,腦中要思考 DOM > 在應用程式的其他地方,腦中都是思考 data model 就好 現在你懂我描述的感覺了嗎? 在這個小工具的例子中,改善的程度可能不夠明顯 但在中型以上的網站、具有高互動性的複雜網頁,一定是用新寫法比較好 --- 這次的課程,讓你的能力從「前端設計」進入到「前端工程」了 之所以叫「工程」,是因為有時候需要建立中型、大型應用程式,這時就需要工程素養 原本那種「在各處胡亂更新各處 DOM」的寫法,絕對無法建立出大型軟體 就跟蓋房子一樣,隨便蓋的小房子臨時居住一下還可以,真的要蓋出厲害的高樓,當然需要足夠的工程技法、素養 --- 寫本課程作業時,render function 的內容會變很多 在實務上,render function 的任務會由框架或者某種模板引擎(template engine)套件完成 所以開發起來會省力很多,不像本課程作業寫起來那樣吃力 你未來使用任何工具只要知道:這些工具的背後,大概就是做了類似這樣 data model + render function 的事情即可! --- 本課所教的 data model + render function 的寫法 是我為了教學方便,設計出來的一種「手工」開發方法 實務上,中型以上專案,幾乎都會使用 React 或者 Vue 框架 我留意到坊間許多課程、補習班,很快就進入框架的教學 我認為許多學員在結業之後,還是一知半解,甚至分不清哪些是 JavaScript 觀念,哪些是框架獨有的觀念 所以我才在這邊,教導這套手工、但很簡單的開發方法 寫過這種開發方法,接著再去學前端框架,我認為可以大幅改善那種「框架後面很黑箱」的感覺 所以你之後挑選任何框架學習,關於 `application state` 與 `render 出 UI` 這兩者的關係,就大致有個底了 --- 最後,老話一句,視網頁的需要,如果只是簡單頁面、小小 UI 工具,那麼就用老方法隨便寫即可。何況還有 data attribute 可以使用來管理狀態,簡單又方便。很多實務情境下,這樣也很夠了 如果真的有工程等級的需要,則可以使用本課程技巧,管理好「應用程式的狀態」,或者直接挑選框架使用 這行業有一句話叫做:No Silver Bullet(沒有萬用解法) 在開發手法的選擇上,也是一樣,請綜合權衡之後,選擇當下適合的方法吧! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(七)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/AqJGxd

JavaScript 系列六:第5課 ── 熟悉匿名函式

## 課程目標 能夠在陣列更新元素 繼續熟悉 anonymous function 的觀念 ## 課程內容 這課先介紹一種資料型態:布林(boolean) 這種資料型態,幾乎所有程式語言都有,是一種寫程式必備的基本資料型態 ``` var x = true; var y = false; if (x) { alert('hello x'); } if (y) { alert('hello y'); } ``` 布林值只有 `true` 跟 `false` 兩種,在 if/else 條件流程控制中,會影響程式流程 這種型態,也是建造 data model 時一定會用到的型態 --- 在 JavaScript 更新陣列元素的方法,一樣有非常多種 這邊介紹一種根據索引更新的方法 ``` var fruits = ['apple', 'banana', 'orange']; fruits[2] = 'lemon'; console.log(fruits) ``` 老話一句,就是實務上,你就根據情況,隨便找一個能用的方式,來操作陣列就對了 ## 課後作業 接續上一課作業,這次來實作「已完成」按鈕 data model 的結構請更新成這樣 ``` var todos = [ { title: "倒垃圾", category: "normal", isCompleted: false }, { title: "繳電話費", category: "important", isCompleted: false }, { title: "採買本週食材", category: "urgent", isCompleted: false }, ]; ``` 請更新 `render` 函式,讓 UI 看起來像這樣 ``` - 倒垃圾 [標示為已完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 如果倒完垃圾了,就可以點擊按鈕,來備註已完成,這時才顯示 (已完成) 文字 ``` - 倒垃圾(已完成)[標示為未完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 然後在 render 過程中,動態產生 button 的時候,將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM,而是先去更新 data model,接著 render,用這種方式間接更新 DOM ``` toggleBtn.onclick = () => { // 請寫出此 arrow function 內容(更新 todos 陣列) render(); }; ``` 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列六:第4課 ── 熟悉 render function

## 課程目標 繼續熟悉 render function 的觀念 ## 課程內容 render function 雖然只是將 data model 轉換成 UI 呈現在 root 裡面 但是根據資料內容的不同,render function 當然也可以有各種條件判斷、巢狀結構等等,較複雜的邏輯 ``` <div id="root"> </div> ``` ``` var products = [ { name: "冬季外套", category: "women", }, { name: "男士大衣", category: "men", }, ] render(); function render() { var root = document.querySelector('#root'); root.textContent = ""; for (product of products) { var name = document.createElement('div'); name.textContent = '商品名稱:' + product.name; if (product.category == 'men') { name.style.color = 'blue'; } else if (product.category == 'women') { name.style.color = 'red'; } root.append(name); } } ``` 別忘了 render function 肩負呈現 UI 的重責大任 所以 `render` 會看起來比較複雜 但是,除了 `render` 以外的函式,通通都變簡單了 ## 課後作業 接續上一課作業,這次來實作「急迫性分類」 data model 的結構請更新成這樣 ``` var todos = [ { title: "倒垃圾", category: "normal" }, { title: "繳電話費", category: "important" }, { title: "採買本週食材", category: "urgent" }, ]; ``` 然後 html 的部份會變成像這樣 ``` <input type="text"> <button onclick="add()">新增</button> <select> <option value="normal">一般</option> <option value="important">重要</option> <option value="urgent">緊急</option> </select> <div id="root"> </div> ``` 請更新 `render` 函式,將重要事項顯示為「橘色」,緊急事項顯示為「紅色」 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列六:第3課 ── 認識匿名函式

## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式(anonymous function) ## 課程內容 在 JavaScript 中,刪除陣列元素的方法,有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits = ["apple", "banana", "orange"]; var index = 1; var num = 1; fruits.splice(index, num) console.log(fruits) ``` `.splice()` 函式第一個傳索引,第二個傳要刪的數量,通常就傳 1 就好了(一次刪一個即可) 實務上,你就根據情況,隨便找一個能用的方式,來操作陣列就對了 --- 之前我們介紹過 for of 的寫法,很簡單好用 ``` var fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit) } ``` 這邊多介紹一個 for in 的寫法,需要索引時可以用 ``` var fruits = ["apple", "banana", "orange"]; for (const index in fruits) { const fruit = fruits[index]; console.log(index); console.log(fruit); } ``` --- 最後來介紹匿名函式(anonymous function) 聽起來很玄,但其實就只是沒有名字的函式而已 以下是有名字的函式 ``` function hello1() { alert("hello1"); } var hello2 = () => { alert("hello2"); } ``` 以下是沒有名字的函式 ``` <button> hello </button> ``` ``` var button = document.querySelector('button'); button.onclick = () => { alert(123) }; ``` 動態宣告一個函式,然後直接指派、使用,就是匿名函式 在 JavaScript 中,很多時候,有些小任務,需要宣告新函式來用,但又懶得去設計命名那些的 這時候就可以用匿名函式來節省時間 雖然看起來有點不習慣、有點奇怪 但在實務上,非常多地方,其實都會用到匿名函式,算是 JavaScript 非常好用的一個功能、特性 ## 課後作業 接續上一課作業,這次來實作「刪除事項」 請更新 `render` 函式,讓 UI 看起來像這樣 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 然後在過程中,動態產生 button 的時候,將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM,而是先去更新 data model,接著 render,用這種方式間接更新 DOM ``` deleteBtn.onclick = () => { // 請寫出此 arrow function 內容(更新 todos 陣列) render(); }; ``` --- 提示:由於 javascript 中 hoisting 的特性,for loop 拿到的索引,在裡面的 arrow function 中使用,很容易抓錯 關於索引一直拿不到的問題,請參閱這邊我跟 birdie 同學的討論 https://codelove.tw/@birdie2019/post/2anbka --- 做出以上功能,你就完成這次的課程目標了!

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> ``` 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列五:第7課 ── 學會 AJAX 與 data attribute 的結合

## 課程目標 學會結合 AJAX 與 data attribute 來製作應用程式 ## 課程內容 打造應用程式的時候,有些資料不會直接顯示在畫面上,但之後的其他動作會用到 這時可以把資料存在 data attribute 裡面 ``` <div data-email="don't know yet" data-phone="0987654321"> <span></span> <button onclick="showEmail()">show email</button> <button onclick="showPhone()">show phone</button> </div> <hr> <button onclick="load()">Load User</button> ``` ``` function showEmail() { alert(document.querySelector('div').dataset.email) } function showPhone() { alert(document.querySelector('div').dataset.phone) } function load() { fetch('https://fakestoreapi.com/users/1') .then(res => res.json()) .then(json => { const element = document.querySelector('div'); element.querySelector('span').textContent = json.username; element.dataset.email = json.email; element.dataset.phone = json.phone; }) } ``` 到 jsfiddle 跑跑看,按鈕到處點點看,就知道 data attribute 的用法了 非常簡單,寫 html 的時候,直接設定 `data-*` 屬性就是了 寫 js 的時候,直接存取 DOM 元素的 `dataset` 屬性就是了 如果 AJAX 撈到了大量資料,但畫面上只需先顯示一部分資料 那麼就可以用 data attribute 先把資料整理起來放著 之後要擴充這個應用程式,或者有同事接手維護,要拿資料時,就很方便,也可以避免一直重複發 AJAX 拿同樣的資料 ## 課後作業 接續上一課的作業,這次要改得更漂亮 點擊 Details 按鈕,本來是連續跳出三個 alert 實務上不可能用連續跳出 alert 來說明商品細節,太醜了 這次要拿掉 alert,改成跳出一個 modal 互動視窗元件, 你可以使用之前課程中,自己製作過的 modal 元件 也可以上網找套件,找一款現成的使用 --- 這個 modal 視窗要包含以下資訊 - 名稱 - 分類 - 描述 - 圖片 - 價格 請使用 data attribute 將資料存放在 `<li>` 元素 點擊 Details 按鈕時,再將這些資料撈出來,放進 modal 元件內 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列五:第6課 ── 學會 AJAX 與各種 HTTP 請求方法

## 課程目標 認識 AJAX 與不同的 HTTP 請求方法 ## 課程內容 HTTP 協定中,HTTP Request 有多種不同的方法 前面幾課的寫法,都是 HTTP GET 類型,這一課來接著談談更多不同的請求方法 繼續使用模擬電商網站的範例 API ### 使用 HTTP POST 新增一筆用戶資料 ``` fetch('https://fakestoreapi.com/users', { method: "POST", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中,`fetch()` 函式的第二個參數是一個物件,把 method 屬性設定好,然後 body 代表 HTTP body 的內容 必須是字串,所以用 `JSON.stringify()` 把物件轉換成 JSON 字串 整段看不太懂沒關係,需要了解 HTTP 協定的細節才比較看得懂,現在就先照做即可 要注意我們是用模擬電商 API,一切都是模擬的 最後主機會回應一個新的用戶 ID,看起來是新增成功了,但實際上並沒有東西新增到資料庫喔~ ### 使用 HTTP PUT 更新一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/7', { method: "PUT", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中,去更新用戶 ID 為 7 的使用者資料 方法設定為 PUT,body 一樣放整個 JSON 字串 ### 使用 HTTP DELETE 刪除一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/6', { method: "DELETE" }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中,去刪除用戶 ID 為 6 的使用者資料 方法設定為 DELETE,不需要提供 body --- 實務上,API 設計時,有人偏好這種 GET POST PUT DELETE 都用到的寫法 有人則偏好只使用 GET 與 POST 撈資料一律都用 GET,除此之外,會更新到資料庫內容的動作,通通都用 POST 這屬於主觀偏好,沒有對錯問題,團隊討論後有共識即可 --- 上面的範例,用戶參數都是在網址最後加上 `/{ID}` 這種格式帶入 實務上,GET 參數也可能用 `?id={ID}` 這種格式 而在 POST 或其他類型的請求中,用戶參數也可能直接加在 `body: JSON.stringify({` 裡面的屬性之中 各種做法,都可以,一樣屬於主觀偏好,沒有對錯問題,團隊討論後有共識即可 ## 課後作業 接續上一課的作業,加上刪除按鈕 請翻閱 API 文件說明 https://fakestoreapi.com/docs 找出「刪除商品」的 API 把每個商品的 html 改成 ``` <li> <span>xxx</span> <button>Details</button> <button>Delete</button> </li> ``` 點擊 Delete 按鈕,就發送 API 出去 - 主機回應成功的話,就把整個 `<li>` 元素刪掉 - 主機回應失敗的話,就跳 alert 提醒用戶稍後再試 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列五:第5課 ── 學會 AJAX 錯誤處理

## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課,我們說過以下的話 > 有些任務現在還不會立刻執行,但我先把要執行的任務交待清楚,時間點到的時候,就執行 > 以 UI 動作來說,時間點就是 `onclick` 之時、`onchange` 之時 > 以 AJAX 動作來說,時間點就是 `拿到主機回應` 之時 實際上,AJAX 的時間點,除了 `拿到主機回應` 之時,還有一個,就是 `發現主機回應失敗` 之時 把原本的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 故意打錯字試試看,然後加上錯誤處理機制 ``` fetch('https://fakestoreapi.com/users1') .then(res=>res.json()) .then(json=>console.log(json)) .catch(error => { alert(error); }) ``` 就跟 `.then()` 函式把任務傳進去類似,`.catch()` 一樣是把任務傳進去,只是改傳「AJAX 失敗的時候要執行的任務」 --- 這邊只是舉例,才故意打錯字 實務上,AJAX 失敗可能是 - 主機故障、或者過度忙碌無法回應 - 呼叫 API 時,登入驗證資訊過期 - API 設計成有額度限制,用戶額度耗完了,被主機拒絕 - 用戶自己的網路斷線了(網頁打開時正常,但發送 AJAX 時已斷線) 等等很多可能,要看 API 主機是如何設計的 --- 實務上,`.catch()` 內要提醒使用者,剛才的動作失敗,請他重新嘗試 我個人通常就用 alert 跳一個訊息「抱歉,系統出現錯誤,請稍後重新嘗試。若持續出錯,請聯絡客服信箱」就結束了 但在公司的大型專案,需要更好 UX 的話,請與設計師討論後決定如何優雅地處理錯誤情境 ## 課後作業 接續前一課的作業,請加上錯誤處理機制 用 alert 跳出 `抱歉,請稍後重新嘗試。` 就好了 接著,請把電腦的 wifi 或有線網路,斷線 然後點擊「Load Products」按鈕,應該會看到錯誤提示訊息 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列五:第4課 ── 學會 AJAX 基本原理

## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說,就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁,都是瀏覽器向主機發送 HTTP 請求 -> 主機回應一大坨 html 內容 -> 瀏覽器顯示漂亮網頁給用戶看 因為是一次拿到一大坨 html 內容,我們說「網頁上全部內容都是同步取得」 現代的網頁,也是有很多頁面是這樣直接取得,但有更多功能,是依靠非同步取得資料之後來更新的 - 滑動到網頁下方,動態載入了更多貼文 - 對內容按讚,按讚成功網頁出現了小變化 - 聊天室與別人聊天,網頁也是一段一段文字更新 這些都是使用 AJAX 技術的例子 也就是先載入基本網頁內容,再接著根據需求,於不同時間點發送 HTTP 請求取得部份內容,所以叫做非同步 實務上,我們會說「這邊要發一個 AJAX 跟主機要資料」 --- 讓我們拿一個「模擬線上購物網站 API」來當作例子 https://fakestoreapi.com/ 發一個 AJAX 取得 ID 為 1 的用戶資料 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 請在 jsfiddle 試試,看看結果 會看到一個包含信箱、ID、姓名、電話等等欄位的用戶個資,以物件的形式呈現 這邊使用了內建的 fetch 函式,參數放入要呼叫的 API 網址 接著使用 `.then()` 函式,由於是直接寫在後面,這相當於把 `fetch()` 回傳的東西,直接當成物件再接著呼叫 `.then()` 函式,然後再把結果當成物件再呼叫 `.then()` 一次 也就是跟這段一模一樣 ``` var result1 = fetch('https://fakestoreapi.com/users/1'); var result2 = result1.then(res=>res.json()); var result3 = result2.then(json=>console.log(json)); alert(result1) alert(result2) alert(result3) ``` 請在 jsfiddle 試試,會發現 console 顯示的個資一樣,這邊用三個 alert 觀察過程中的東西 會發現顯示三次 `[object Promise]`,這個 Promise 是一個進階觀念,這邊不細談,簡單講就是處理非同步請求的一種資料格式 `.then()` 參數傳進一個箭頭函式,這是省略大括號 `{}` 的箭頭函式寫法,其實就只是會自動回傳結果的函式寫法而已 但參數放了個函式,看起來有點怪,為何要這樣寫? --- 記得我們之前寫過的動態綁定 onclick 事件嗎? ``` <button id="my-btn">Click me</button> ``` ``` // 第一種寫法 function myFunction() { alert('你點擊了按鈕!'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` 網頁元素的事件處理,也是一種「非同步」程式設計 也就是我不確定「點擊」事件何時會發生,但我先「綁定」好事件發生時要做的任務,綁完就讓網頁正常呈現就好 上面的程式碼,可以改寫成這樣 ``` // 第二種寫法 var btn = document.getElementById('my-btn'); btn.onclick = () => { alert('你點擊了按鈕!'); } ``` 如果使用 jQuery,那還可以這樣改寫 ``` // 第三種寫法 $('#my-btn').click(() => { alert('你點擊了按鈕!'); }) ``` 第一種寫法,看起來像是:我先定義好函式,接著把函式名稱當作變數,綁定到 onclick 屬性 第二種寫法,看起來像是:onclick 這邊現場寫一個箭頭函式,把要執行的任務,當場交待清楚 第三種寫法,看起來像是:jQuery 提供的 `.click()` 函式,會負責把事件綁好,參數傳任務進去就對了 以上三種寫法,效果是完全一模一樣的! 所以你早就接觸過「非同步」程式設計了 也就是「有些任務現在還不會立刻執行,但我先把要執行的任務交待清楚,時間點到的時候,就執行」 以 UI 動作來說,時間點就是 `onclick` 之時、`onchange` 之時 以 AJAX 動作來說,時間點就是 `拿到主機回應` 之時 像這種不是馬上執行的動作,在 JavaScript 領域,我們習慣用「寫一段函式定義當作參數傳進去」來表達! --- 回頭看一下我們的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 因為 fetch 第一個回傳的結果,代表的是一個 `HTTP 回應物件`,這個回應物件的 HTTP body 是實際的 JSON 內容,可以用 `.json()` 函式取得內容 所以第二個 `.then()` 的參數,才是我們真正想做的事情 看不懂沒關係,我們多看幾個例子吧 取得全部用戶個資的 AJAX。觀察 console 結果,會看到一個陣列,內含大量個資物件 ``` fetch('https://fakestoreapi.com/users') .then(res=>res.json()) .then(json=>console.log(json)) ``` 取得五筆用戶個資,也是拿到陣列 ``` fetch('https://fakestoreapi.com/users?limit=5') .then(res=>res.json()) .then(json=>console.log(json)) ``` 以上內容,全部通通看不懂沒關係,畢竟,需要多了解一些 HTTP 協定與術語,比較好理解 你就先照做就好:要發 AJAX,就用 `fetch()` 函式,接著第一個 `then()` 要執行 `.json()` 函式,然後第二個函式才是你真正要執行的任務! ## 課後作業 請使用 https://jsfiddle.net/ 請使用「模擬線上購物網站 API」 https://fakestoreapi.com/ 假設正在開發一個讀取全部商品資料的頁面 用以下 html 為基礎 ``` <button>Load Products</button> <hr> <ul></ul> ``` 點擊按鈕,發送 AJAX 到 https://fakestoreapi.com/products 請求全部商品資料 拿到資料之後,將每筆資料用以下格式呈現,塞進 `<ul>` 元素裡面 ``` <li> <span>xxx</span> <button>Details</button> </li> ``` xxx 是商品名稱。點擊 Details 按鈕,連續跳出三個 alert,分別顯示 `id` `category` `description` --- 請注意,在 for 迴圈裡面綁定 onclick 事件的時候,for 迴圈的參數請加上 `const` 舉例來說,請這樣寫 ``` for (const product of json) { ``` 請「不要」這樣寫 ``` for (product of json) { ``` 否則,在迴圈裡面的 onclick 事件,執行起來會有 bug 原因跟上一課提到的 Hoisting 現象有關 我認為這是 JavaScript 的設計失敗,所以詳細原因我不想說明 這是屬於上個世代 JS 工程師的痛苦回憶,這一代的 JS 工程師不需要經歷 現在就用 ES6 語法,宣告變數一律記得加上 `const` 或 `let` 就對了 --- 做出以上功能,你就完成這次的課程目標了!