## 課程目標 - 學習事件處理的寫法 ## 課程內容 來學一下事件處理的寫法 - https://vuejs.org/guide/essentials/event-handling.html 眼花撩亂沒關係，我已經多次告訴過你應該用什麼心態去面對 不用把這些東西看得太神奇，這些東西的背後，就只是你已經寫過的 html `onclick` 那些東西而已，只是多加一層「抽象化」，由 Vue 中介在中間管理 DOM 我們在寫 Vue 的時候，就是「完全不親自操作 DOM」了，通通交由 Vue 處理 我們負責專心管理 application state 就好，不用費心思去管理 DOM 用了框架，就不要再去直接操作 DOM，否則會跟框架起衝突、讓程式充滿 bug --- 有件事我必須說一下，就是 `@click` 後面可以放函式名稱，也可以直接執行函式 這個設計，實在很糟糕！我非常不喜歡！ ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <button @click="hello1"> hello 1 </button> <button @click="hello2('John')"> hello 2 </button> </div> <script> const { createApp } = Vue createApp({ methods: { hello1() { alert('hi'); }, hello2(name) { alert('hello ' + name) } } }).mount('#app') </script> ``` 以上範例，在 `@click` 裡面的內容，到底要不要加上小括號 `()`？ 乍看之下，根本無法理解。要翻閱文件，才發現原來兩種寫法都可以 我認為這違反了程式碼風格應該要 `保持一致性（consistency）` 的原則 Vue 這種彈性設計，讓程式碼變得令人困惑、難以理解 --- 再提一件事，Vue 的 template 中，雙引號的內容，到底是 `變數` 還是 `字串`？ ``` <button @click="greet">Greet</button> ``` 這個 greet 是函式名稱，是變數 ``` <div :class="{ active: isActive }"></div> ``` 這裡在雙引號內容，宣告 JSON 物件，所以是變數 ``` <template v-if="ok"> ``` 這裡是變數，變數型態大概是布林 ``` <div class="active text-danger"></div> ``` 這裡是字串 ``` <input :value="text" @input="event => text = event.target.value"> ``` 這邊的 `text` 到底是字串還是變數？ ``` <input ref="input"> ``` 這邊的 `input` 到底是字串還是變數？ 透過觀察可以發現，冒號開頭 `:`，或者小老鼠開頭 `@` 或者縮寫法 `v-` 開頭的，雙引號裡面是變數 不然的話，就跟普通 html attribute 一樣，雙引號裡面就只是字串而已 對於 Vue 這種彈性設計，我一樣「非常不喜歡」！ 當然，這些都是我個人主觀看法，一定很多人覺得又好寫、又彈性 這對於只想快速開發、懶得追根究底的新手，可能很方便 但在深入思考、試著搞懂資料型別、試著像資深工程師一樣思考的時候，會造成很多額外的困惑 --- 我想說的是，遇到這類問題，你就多試一下、多翻官網文件 然後不要覺得自己很笨、被框架嚇傻了 要知道複雜的工具，本身背後就代表多種不同的主觀偏好，然後那些主流觀點，可能真的不怎麼樣，所以不是你的問題 隨著更有經驗之後，你會能夠做出各種主觀的判斷、能夠比較各種設計的優劣之處 目前階段，你就先想辦法讓程式能跑、能完成任務就好了！ --- 再來學一下表單欄位內容的處理 - https://vuejs.org/guide/essentials/forms.html 在上個系列課程中，我們學過 data model + render function 的寫法 使用框架之後，則變成，就連表單欄位內容，也是 data model 的一部份 乍聽之下有點怪，其實，實際寫過之後，會發現還滿方便的！ ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <input v-model="username"> <button @click="greet"> Greet </button> <h1> {{ username }} </h1> </div> <script> const { createApp } = Vue createApp({ data() { return { username: "John Doe" } }, methods: { greet() { alert('Hello, ' + this.username); } } }).mount('#app') </script> ``` 正因為把 `欄位中目前輸入的值` 視為 `當前應用程式的狀態` 的一部份 所以可以隨時取得表單欄位內容，而不用像以前那樣，要透過 DOM selector 之類的，去找到元素、才拿到內容！ 一樣，表單欄位內容的取得，寫法多種，就挑順眼、簡單的來用即可 ## 課後作業 承接上一課的作業 這次要來開發「新增」與「刪除」功能囉！ 請在記事列表的上方： - 新增一個 `input` 來輸入「記事標題」 - 新增一個 `textarea` 來輸入「記事內容」 - 新增一個 `select` 來選擇顏色 - 新增一個「新增」按鈕，點擊之後，會新增記事 - 請將這些欄位的內容，放在 application state 裡面管理 然後，請在每則記事的裡面，新增一個「刪除」按鈕。點擊之後，會刪除記事 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 體驗一下 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` 函式，在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」 完成之後，你會發現，你的春節行程安排，看起來積極多了～ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠運行 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 那樣花式的排版（那種叫瀑布流排版，很難寫） 做出以上功能，你就完成這次的課程目標了！
``` <fieldset> <legend>ID</legend> <input type="text" id="position" placeholder="Enter PositionID"> </fieldset> ```  原來有這種東西 不需要CSS耶 很酷很有趣 記錄起來
# 主題 一直覺得看別人的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去重構 分析討論都滿好的～～～ 如果各位同學也好奇的一起＋１ 或是有懂的 也來分享！！ 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害！！
使用這些單行程式碼將您的 JavaScript 技能提升到全新水平，這也將節省您很多開發時間 🚀 原文出處：https://dev.to/nfrankel/20-killer-javascript-one-liners-thatll-save-you-hours-of-coding-o14 --- ###1) 查找陣列中的最大值： ``` Math.max(...array) ``` ###2) 從陣列中刪除重複項： ``` [...new Set(array)] ``` ###3) 生成一個介於 1 和 100 之間的隨機數： ``` Math.floor(Math.random() * 100) + 1 ``` ###4) 檢查字串是否為有效數字： ``` !isNaN(parseFloat(string)) ``` ###5) 獲取當前日期和時間： ``` new Date().toString() ``` ###6) 檢查變數是否為陣列： ``` Array.isArray(variable) ``` ###7) 檢查一個變數是否是物件： ``` typeof variable === "object" ``` ###8) 將陣列轉換為字串： ``` array.join(",") ``` ###9) 檢查一個變數是否是函數： ``` typeof variable === "function" ``` ###10) 將物件轉換為陣列： ``` Object.values(object) ``` ###11) 計算陣列中元素的出現次數： ``` array.filter(x => x === element).length ``` ###12) 使用動態鍵和值建立一個新物件： ``` { [key]: value } ``` ###13) 檢查字串是否為回文： ``` string === string.split("").reverse().join("") ``` ###14) 獲取陣列中所有數字的總和 ``` array.reduce((a, b) => a + b, 0)); ``` ###15) 獲取當前時間戳： ``` Date.now() ``` ###16) 檢查變數是否為 null： ``` variable === null ``` ###17) 檢查變數是否未定義： ``` typeof variable === "undefined" ``` ###18) 查找陣列中的最小值 ``` Math.min(...array) ``` ###19) 檢查陣列是否為空： ``` array.length === 0 ``` ###20) 建立一個具有指定範圍數字的新陣列： ``` Array.from({ length: n }, (_, i) => i) ``` --- 以上簡單分享，希望對您有幫助！
我用XMLHttpRequest實作一個， 找到米特某文章所有圖片的程式碼 其中也會找到上一頁的網址 儲存為url ``` let space url="https://meteor.today/article/a6GSu4" async function test(){let req=new XMLHttpRequest; req.open("get",url); req.onload=function(){ space=this.response; //parser與DOM操作 let parser = new DOMParser(); let parsed = parser.parseFromString(space, "text/html"); let text=parsed.getElementById("article_content") let texted=text.innerText.split("\n") //把圖片網址call出來 for (j=0;j<texted.length;j++){ if(texted[j].search(".jpg")>-1){console.log('https'+texted[j].split("https")[1])}; } //上一頁的網址 url=parsed.querySelector("body > div.pusher > div.ts.container > div.ts.relaxed.grid > div.nine.wide.computer.sixteen.wide.mobile.column > div:nth-child(2) > div.ts.stackable.two.column.grid > div:nth-child(1) > a").href; //這個新的url我想要把它拿出來，讓我未來迴圈可以用！ } req.send(); } test() ``` 我的主要問題是， 我想要拿出來的這個url拿不出來， 並沒有讓我可以呼叫url=上一頁 似乎是因為這個變數在XMLHttpRequest的過程中存取的，因此執行完就拿不到（？ （去年五月就開始研究的．．．一直找不到相關解法QQ）
## 課程目標 繼續熟悉 data model 的觀念 ## 課程內容 有了 data model 與 render function 之後 除了在更新資料時，腦中一律只要想著 data model 就好 就連在撈資料時，也一樣只要思考 data model 就好，非常方便 反觀，原本的原始寫法，需要從 UI 結構中，分析出當前的資料狀態，麻煩得多 ## 課後作業 接續上一課作業，這次來實作「匯出」按鈕 請加入類似這樣的按鈕 ``` <button onclick="export()">匯出</button> ``` 接著請將 `export` 函式完成，過程中不能去讀取 DOM，只能去讀取 data model ``` function export() { // 請寫出此函式內容 } ``` 匯出時用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」 根據事項，如果是重要事項，請用星號包起來 `*重要任務*`，如果是緊急事項，請用雙星號包起來 `**緊急任務**` 舉例來說，按下匯出按鈕之後，就用 alert 跳出訊息「`今日待辦：1. 洗衣服 2. *買文具* 3. **去健身房**`」 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠在陣列更新元素 繼續熟悉 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(); }; ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 繼續熟悉 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` 函式，將重要事項顯示為「橘色」，緊急事項顯示為「紅色」 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠從陣列刪除元素 認識 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 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 DOM」的寫法 現在要認真開始學習，如何在 JavaScript 中，用各種變數、資料型別，建立出 data model 這一課來學學新增元素到陣列的方法 ``` <button onclick="more()"> more </button> ``` ``` var fruits = ["apple", "banana"]; function more() { fruits.push("orange"); console.log(fruits); } ``` 非常簡單，使用陣列的 `.push()` 函式就可以 在 JavaScript 中，陣列相關操作的函式、寫法，有非常多種 我的建議是，各種寫法都可以，如果你有查到，隨便挑你喜歡的用就可以了 ## 課後作業 接續上一課作業，這次來實作「新增事項」 請在 html 的部份加入「輸入資料的 UI」，大概類似這樣 ``` <input type="text"> <button onclick="add()">新增</button> <div id="root"> </div> ``` 接著請將 `add` 函式完成，過程中不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` function add() { // 請寫出此函式內容（更新 todos 陣列） render(); } ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識 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> ``` 做出以上功能，你就完成這次的課程目標了！
>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習JS， >累積滿多經驗，也累積不少疑問。 >之前站長阿川有跟我提到相關話題，也就是UJS，想說把它拿過來聊一聊。 >剛好最近弄的東西，跟這個也有一些關聯性。 ## html與JS的交互關係。 Inline JavaScript是什麼呢？ 就把JS寫在html裡面的一種手段，也就是onclick那些東西，在自學教材會學到唷：））。 其中也有個東西叫做JavaScript pseudo-protocol，他好像有點像是給一個js的前綴， 讓瀏覽器讀取html的時候知道要開始讀取JS了，用法如： `<a href="javascript:alert(1)">my website</a>` 這樣子的作法都讓JS侵入到html裡面，也就是行為跟結構沒有分離。 是否要UJS，站長上次有提到這可以看專案大小來區分，這篇閒聊開起來可以提供更多細節。 --- 不過我不打算就此結束文章，我要額外分享與XSS相關的內容。 XSS其實是CSS，跨站指令碼Cross Site Script的意思，只是因為縮寫重複CSS樣式（Cascading Style Sheets ）所以用X代替。 簡單理解它就是一種攻擊手段，讓別人網站上執行我的代碼。 --- 有趣的事情來了，那html跟JS交互關係跟XSS又有什麼關聯呢？ 想像一下，當今天小明要做一個討論區，讓使用者用html編輯打文章，就必須小心有人會放一些JS的代碼。 小明想說，我要過濾`<script>`標籤來保證他們乖乖地寫html。 請問這樣子是否就安全了呢？ 答案是否定的，這時候使用Inline JavaScript會發生什麼狀況？ 試想一下因為小明沒有CSP相關設定，防止使用者偷偷塞JS到html裡面，導致小明的壞朋友大胖， 可以直接寫一個`<img src=x onerror="alert(1)">`在留言區裡面， 完全沒有使用到`<script>`標籤，卻也能造成XSS。 --- ## 關於防禦： ### CSP 設定嚴格一點，可以阻止很多XSS，舉例來說文章一開始有`href="javascript:alert(1)"`， 可以設定href後面只能接上http開頭的東西。 ### WAF 他是Web Application Firewall 的簡稱，中文通常叫作「網站應用程式防火牆」 可以建立及管理避免網際網路威脅的規則，包括IP 位址、HTTP 標頭、HTTP 主體、URI 字串、跨網站命令檔(XSS)、SQL 隱碼攻擊及其他OWASP 定義的漏洞。 ### 自己建立fliter 自己過濾也是可行的（不建議），把字串符碼都轉成HTML Entities，例如把 (<)寫成 ` < or <` ，透過這樣的過濾render出來的就不會是指令了。 為什麼不建議，是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。 或是你覆蓋了document.write，以為安全了，但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。 這剛好就是我最近在研究的東西。 ## 相關討論問題： 1.對於文章的內容，有沒有什麼錯誤呢？或相關名詞想法想補充？ 2.是否要UJS的實際使用，有哪些想法？或是有什麼經驗？
## 課程目標 學會結合 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 元件內 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識 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 提醒用戶稍後再試 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識基本的 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` 就對了 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識變數作用域 認識函式的不同寫法與特性 ## 課程內容 來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="action2()"> local scope </button> ``` ``` var counterA = 0; function action1() { counterA = counterA + 1; alert(counterA); } function action2() { var counterB = 0; counterB = counterB + 1; alert(counterB); } ``` 到 jsfiddle 跑跑看，會發現第一個計數器會不斷 +1 疊加上去；第二個計數器卻永遠顯示 1 這就是變數作用域的區別：變數宣告在很外面的，會在很大的範圍內都可使用這變數；變數宣告在很裡面的，只在裡面的範圍內才可使用這變數 宣告在最外面的稱為全域變數（global），反之則稱為區域變數（local） 目前為止的作業，其實你已經到處在寫 global 與 local 變數了，這觀念還算簡單、直觀 --- 用精確的技術名詞來說明的話 在 ES6 (2015) 之前，JavaScript 中的變數作用域只有 Global Scope 跟 Function Scope 兩種 並且，在使用 `var` 關鍵字時，要留意一種名為 Hoisting 的現象，這是一種會讓人搞錯變數作用域的現象 在 ES6 之後，有了 `const` 與 `let` 兩種新關鍵字，宣告的變數為 Block Scope 使用這兩種關鍵字，就不會出現 Hoisting 的現象 --- 我個人認為，Hoisting 是一個設計失敗的程式語言特性 應該要讓 JavaScript 引擎直接報錯、程式直接壞掉比較好 一般程式語言沒有 Hoisting 這種現象，此為 JavaScript 獨有特性 這是當年 Netscape 瀏覽器公司，為了衝市占率、歡迎大家亂寫 JS 程式碼的產物 我不想細談 Hoisting，反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 實務上，現在大家都寫 `const` 與 `let`，比較不寫 `var` 了 所以 Function Scope 跟 Block Scope 的差別在哪？ 簡單來說，這樣的程式碼，x 正常顯示，y 會報錯 ``` if (true) { var x = 1; const y = 2; } alert(x); alert(y); ``` `var` 會覺得變數作用域，只有 `function 函式` 內、外的差別，內就是同樣 local，外就是 global `const` `let` 會覺得變數作用域，每次遇到 `大括號 {}` 都算一次內、外的差別，大括號裡面就是 local，裡面的裡面就是 local 中的 local 看不太懂沒關係，總之，變數宣告時，遇到 bug，就往前面找大括號，把變數搬來搬去，試試看，會慢慢搞懂的 本課先教你區分 global 與 local 兩種概念就好，這在大多數程式語言都是通用概念 在本系列教材內容以及作業中，`const` `let` `var` 隨便混著用，都可以 大概知道當前變數是 global 還是 local 就好 反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 接下來談一談 JavaScript 中的函式 之前的課程中，有過這樣的範例 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` `myFunction` 被當成變數一樣，被指派給一個物件的屬性了 在很多程式語言中，函式是不能這樣使用的！函式永遠只能單獨加上小括號去執行 `myFunction()` 這個差別有點像是，其他程式語言認為變數是「名詞」，函式是「動詞」。那些語言認為這樣才能溝通、描述世界 而 JavaScript 認為變數是「名詞」，函式是「動詞」也是「動名詞」，也就是認為函式也是一種「名詞」。JavaScript 認為這樣才能溝通、描述世界 中文說「我開車」跟「開車很好玩」，沒有在管「開車」是動詞還是名詞，中文使用者就是習慣這樣溝通 英文說「I drive」跟「Driving is fun」，句子裡面主詞的部份一定要是名詞，如果想放動詞，就先改寫成 +ing 動名詞，英文使用者就是習慣這樣溝通 上面通通看不懂沒關係，反正知道各種程式語言，都是設計者與社群的主觀偏好，然後都能完成任務、各有不同長處短處就好 --- 最後，跟大家談一下函式的不同寫法 ``` function func1() { alert(1); } var func2 = () => { alert(2); } func1(); func2(); ``` ES6 之後有所謂的箭頭函式 他跟傳統寫法的主要差別，在於對於 `this` 關鍵字的認定 在工程師主流推崇 OOP（物件導向程式設計）的年代，`this` 的使用很巧妙、也很讓人困惑 實務上現在寫前端，比較少用 OOP 寫法，稍微偏向 FP（函數式程式設計）多一點，所以 `this` 問題變比較小 我不想細談 `this` 以及兩種函式寫法的差別，在本系列教材內容以及作業中，隨便混著用，都可以 反正改天你真的遇到問題，大概知道要往這方向研究就是了 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），id 跟 class 之類的你可以自由決定 ``` simple counter: <button>-</button> <button>+</button> <hr> simple calculator: <input type="text" /> <input type="text" /> <button>加/減/乘/除</button> ``` 這邊有兩個小型應用程式 第一個應用程式，是簡單的計數器 - 第一次點擊 + 號按鈕，會用 alert 跳出 1 - 第二次點擊 + 號按鈕，會用 alert 跳出 2 - 依此類推，每次點 + 都會遞增，每次點 - 都會遞減 - 你會宣告一個全域變數，記錄這個累積的值，才能完成此功能 第二個應用程式，是簡單的計算機 - 有兩個欄位可以輸入數字 - 點擊按鈕，連續跳出四個 alert，分別顯示「加/減/乘/除」的計算結果 - 例如：輸入 6 與 2 -> alert 顯示 8 -> alert 顯示 4 -> alert 顯示 12 -> alert 顯示 3 - 你會宣告兩個區域變數，分別記錄兩個輸入的值，接著用來進行四種計算，才能完成此功能 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能使用 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，有資料的話，就復原到畫面上 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能使用 Cookie 相關功能 ## 課程內容 大名鼎鼎的 cookie，很多人在科技新聞上都聽過 某某公司利用網頁 cookie 追蹤個資、某某公司偷偷用 cookie 分享個資 這類新聞提到的 cookie，就是本課在說的 cookie 目前為止的作業，你會發現只要重新整理網頁，畫面上的所有東西就都歸零回預設值了 因為我們說網頁 HTTP 協議是「無狀態」的，也就是每次打開網頁的「狀態」不會被保留 這樣的設計當然有好處以及方便的地方，因為每次打開網頁都是獨立事件、彼此不會互相影響，開發起來單純很多 但是在實務上，經常需要「有狀態」才能完成某些功能，例如「已登入帳號」的狀態，否則網站會變很難用 Cookie 技術就是為了這個原因而誕生 --- Cookie 主要有兩個特性 - cookie 的內容，主機端也能存取 - cookie 的內容，網頁重新整理之後還會保留 Cookie 會出現在 HTTP Request 內，一起送到主機 會員登入功能、各種廣告追蹤功能，就是這樣做到的 HTTP 協議不熟沒關係，反正就是前端工程師設定過 cookie 值之後，後端工程師也能在主機端拿到那些值就對了 --- 注意，由於 cookie 會包含一些網站上的敏感資訊，jsfiddle 等等線上程式碼實驗工具、以及各種免費架站工具，幾乎通通都關閉了 cookie 功能 我目前找到一個可以用 cookie 的架站工具 https://replit.com/ 本課請使用 replit 來跑範例程式碼、寫作業 註冊登入之後，點 Create -> Templates -> 選 HTML, CSS, JS 那個 -> Create Repl 就可以開始寫了，但是右邊的預覽視窗，因為是 iframe，一樣不能用 cookie 請點擊右上方的 Open in a new tab，就可以正常跑 cookie 功能了 --- 來看一些範例程式碼吧 ``` Your Age: <input type="text"> Your Name: <input type="text"> <button onclick="save()">Save</button> <script> if (document.cookie) { alert(document.cookie); var arr = document.cookie.split(';'); var myage = arr[0].split('=')[1]; var myname = arr[1].split('=')[1]; document.querySelectorAll('input')[0].value = myage; document.querySelectorAll('input')[1].value = myname; } function save() { var myage = document.querySelectorAll('input')[0].value; var myname = document.querySelectorAll('input')[1].value; document.cookie = 'myage=' + myage; document.cookie = 'myname=' + myname; alert('saved!'); } </script> ``` 這個範例中，輸入年齡、名字一次，接著重新整理網頁，會發現資料一樣存在欄位裡面，不用重新輸入！ 存取值，都是透過 `document.cookie` 這個物件屬性，值的格式是 `name=value` 雖然 `document.cookie=` 寫了兩次，但第二次並不會蓋掉第一次的值，而是兩個都存進 cookie 了 （這個設計，很糟糕，沒錯，讓人看得很混亂。應該是瀏覽器的設計者，有他們的苦衷，我們先不細究原因，先知道怎麼用就好） 然後，讀取的時候，多個值會用分號 `;` 隔開，所以讀取時我用了 `.split()` 這個字串函式 除此之外，cookie 還可以設定「使用期限」以及「限定網域」，但我這邊就先不示範 總之，cookie 的效果大概就是這樣，稍微理解就好。然後這些值，後端工程師在伺服器端，也會收到，就這樣！ --- 如上所示，cookie 寫起來，有點麻煩 實務上，每次都這樣手寫，太囉唆，通常會直接找套件來用，我是用這款 https://github.com/js-cookie/js-cookie 用來操作 cookie 的 API，漂亮多了！ --- 關於 cookie 的 debug 除錯，也要知道一下 打開瀏覽器開發者工具 -> Application -> Cookies 可以看到網站上有哪些 cookie，也可以直接在這邊修改、刪除 cookie --- cookie 還有一些特性，以及大小限制、使用限制 這邊不細談，稍微知道怎麼用 cookie 就好 有興趣的話，請上網搜尋一下，多研究一些 cookie 的細節 ## 課後作業 請使用 https://replit.com/ 來寫作業 假設你正在幫客戶寫一個「成人限制級網站」 頁面第一次打開會顯示蓋板警告，下方有兩個按鈕 ``` 警告︰您即將進入之網頁內容需滿十八歲方可瀏覽。 根據「兒童及少年福利與權益保障法」規定，本網站已於非闔家皆宜之網頁加以標示。若您尚未年滿十八歲，請點選離開。若您已滿十八歲，亦不可將本站之內容派發、傳閱、出售、出租、交給或借予年齡未滿18歲的人士瀏覽，或將本網站內容向該人士出示、播放或放映。 您年滿十八歲嗎？ [離開] [是，我已年滿十八歲] ``` - 點擊離開，把用戶跳轉到 google 首頁 - 點擊確認，就關閉蓋板警告，在網頁上顯示一張美女 or 帥哥圖片：參考圖庫 https://unsplash.com/ - 只要按過確認，重新整理之後，蓋板警告就不會再跳出來 做出以上功能，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
