CodeLove 愛寫扣論壇 - 新手友善的程式設計討論區，歡迎參與討論！

🔍 搜尋結果：hoisting

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

0個讚 9留言 246瀏覽

我愛JS · 01月23日

此篇閒聊-關於這個網站以及關於站長（＋此站使用心得

因為我有個點子是搞一個梗圖的網站就想說上網先看看人家怎麼弄的看著就到了梗圖倉庫欸突然眼熟的看到站長阿川！？稍微確認一下才知道是我們的站長挖真的是偶像啊0.0 早我好幾百年就已經弄得票漂亮亮有聲有色　　我還在那邊１＋１咧　哭暈在廁所難怪自我介紹說有經驗相關問題都能回答這豈止是回答是模範是偶像欸（跪了是說站長人格方面可能才是我最欽佩的　　為人善良熱情　　低調謙虛沒有把自己的行頭　　作品都丟上來搞一個自我經歷很豐富這樣的介紹　　真的很低調欸小弟個人覺得這真的是各位學習的典範這邊不知道會不會不太好推薦這篇 [工程師的缺德行為：叫朋友去學C/C++](https://blog.turn.tw/?p=2568) 太中肯啦最屌的一句話我真心覺得屌非吹捧是「別擔心，這不是你的錯，是那些書寫得不夠好」說實話要說那些書很爛嗎也沒有但說真的真的不夠好其實現在的網路課程線上教學也是有同樣的問題課程編排都很死講老半天的閉包 hoisting 那些東西不是說這些不重要要面試要工作恐怕那是最基本的可是我身為一個愛好者我沒看見那些觀念真的被套用&應用在實際狀況舉例來說我學變數的觀念是經由RPG製作大師要修復做寶箱會無限開的bug 因此設定一個變數是off 打開是on 然後用if條件式去判斷我一次學會好多東西第一個我懂了變數我知道需要記憶體幫我存資料第二資料型態 Boolean 就是on跟off兩種然後我也學會流程判斷也就是if x=off then....這樣子後來用CE修改器發現要找血量是小數點所以搜尋要用浮點數(float) 再來是玩VB要寫自動發話所以瞭解了迴圈並知道要寫一個函式再去call它多麼精彩啊這些片段！每一個細節我都忘不了！全部都是畫面！全部都很有趣！以此類推講真的到現在每一個語法都是我靠著自己實踐找出來的雖然這樣子花了十來幾年程度還很弱但我敢說這樣子的內容有趣甚至我也敢說這樣才有意義我至今到現在常常看網路教學影片還是一堆講課講老半天都是程式的語法沒有實戰也就算了先理解語法但講解的都很生硬完完全全都只是為了講課而解釋&示範真正要實戰了的話也都玩那幾招沒有變化明明這個網路世界程式世界是如此的繽紛到了他們教學的手上真的是變黑白也難怪需要特別聰明跟有天分的人才能駕馭因為教學資源的傾向就是科板書的教法當然要足夠聰明而不是有熱誠純有熱誠也要能像我這樣十來年慢慢去搞錯誤了沒地方搞懂再等好幾年後發現問題對我來說我不是特別聰明我一路走來也理解了我的確偏笨但打開書本或是課程從VScode建置開始慢慢開始介紹語言的歷史我真的看不下去無聊死了我寧願花個十年用我有趣的摸索去實戰去玩也不要聽課對我來說這些課不是爛是真的不夠好我用我的自學證明有一套比他們的課程更生動活潑更有愛的方法能學程式至少對我自己來說永遠為真嗯嗯離題了主要是在這個論壇真的很棒鼓勵大家也多多發文分享大多數擁有聰明頭腦的人或是自己熬過來的工程師只會轉頭批評外行人蠢或笨要不然就是酸藏私　不回答你還講幹話說　　這你就不懂　　或是重複一次問題說　　就把這個解決就好啦優越感灌下去見不得你好甚至批評你是在搞東搞西我真的遇到一個我發問問A問題結果有個嘴臭仔他不回答就算了在那邊嘴說看我過去發文過去問B過去問C 說我是搞東搞西沒屁用叫我去系統性學在那邊講跟我問題無關的屁話系統性學要是能解決我早就解決了== 要怎樣的系統笑死你說的系統才是系統喔我只想知道我研究的領域你要我系統去哪裡真的超傻眼雖然文長有點抒發心情但收尾主要還是想說這個網站的資源是不同於其他地方的還有這個網站的站長也是很真心要提升台灣程式社群的所以我們可以一起利用這個資源～一起好好努力～讓未來新加入的分子　可以看到有趣的例子、找到真的有用的問答文章~ 站長是個很熱心很有才華想法的大家長我認為難得的是也很善良與見解獨到能體會我們這種熱愛程式的人的心 https://codelove.tw/@howtomakeaturn/post/VaGR3p 各位都應該去點個讚！！

3個讚 1留言 180瀏覽

站長阿川 · 01月20日

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

0個讚 10留言 271瀏覽

站長阿川 · 01月20日

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

## 課程目標認識變數作用域認識函式的不同寫法與特性 ## 課程內容來認識一些程式語言觀念與名詞 ``` <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 - 你會宣告兩個區域變數，分別記錄兩個輸入的值，接著用來進行四種計算，才能完成此功能 --- 做出以上功能，你就完成這次的課程目標了！

0個讚 10留言 275瀏覽