---
tags: JS 直播班 - 2021 春季班
---

# 4/9 線上 Slack 助教

## 今日輪班助教時間

暄雯：4/9（五）
早上 9:00 - 早上 11:00，下午 1:30 - 下午 5:30

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：

---
2. **Hsin：**
助教好，這是我的 [codepen](https://codepen.io/hsinhui/pen/xxgPjyO?editors=0011)，我預期在 29 行的程式碼，會因為沒有訂單而填上 textContent，但是卻沒有跑出來，再麻煩助教看一下問題出在哪裡，感謝！
> 助教回覆：
> 判斷物件是否為空陣列，建議可以改用 `orderList.length === 0` 來判斷哩。修改後，if 結果才會回傳 true 來執行大括弧內的程式碼

想請問為什麼不能用 === [] 判斷呢?
> 助教回覆：
> 因為陣列屬於物件，兩個物件它們指向的記憶體位置不會相同，使用 === 或 == 來判斷時，如果物件的記憶體位置不同則會回傳 false。因此兩個陣列即使內容一樣，做比較時也會回傳 false。可以嘗試用 `console.log([1,2,3] === [1,2,3])` 來檢視比較結果
> 這邊附上一篇文章討論給你參考：[Why is [] !== [] in JavaScript? [duplicate]](https://stackoverflow.com/questions/40313263/why-is-in-javascript)
---
3. **雅帆：**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/yafanchung/pen/zYNPaOB?editors=0011)，我目前要做取得產品列表的部分，在 JS 19 行取得產品列表的資料，在 JS 32 行是渲染畫面的 function，預期結果畫面上會出現 8 筆產品列表，可是卻只出現 1 筆產品列表，想請問我是哪邊有寫錯?謝謝
> 助教回覆：
建議把 renderProducts() 裡的 `let str = ""` 移到 products.forEach() 外面。
因為目前每跑一筆資料，str 的內容就會變為空字串，無法累加，導致最後只有印出一筆產品資料哩。
---
4. **Cass：**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/casslam/pen/JjEOZBL?editors=1010)，目前重新整理之前的作業在 JS 78 行設 function clearInputVal 用作清除input的值 但我發現自定義的變數 ticketNameVal = '' 不能清除input 的值, 反而用原始的 ticketName.value = '' 可以。 但我在 function checkDataVal() 已經定義 const ticketNameVal = ticketName.value; 為何不能使用ticketNameVal = '' 去清除。 想請問我是哪邊的概念有錯?謝謝
> 助教回覆：
這邊有兩個觀念要跟同學釐清：
>1. 不同函式的作用域是不一樣的，function 中的變數都屬於區域變數的作用範圍，不會被其他函式所用。因此在 checkDataVal() 宣告 ticketNameVal 為變數，是無法帶到 clearInputVal() 來使用。
>同學可以在 clearInputVal() 先用 console.log 檢查 ticketNameVal 的值，會看到 `ticketNameVal is not defined` 的訊息
>2. `const ticketNameVal = ticketName.value` 這行程式的意思為：宣告 ticketNameVal 為變數，並賦予它目前 ticketName.value 的值。假如當時 input 欄位輸入「台北一日遊」，則 ticketNameVal 的值為 "台北一日遊"。
>因此 `ticketNameVal = ''` 代表的是將 ticketNameVal 這個變數的值重新賦予為空字串。
>`ticketName.value = ''` 可以成功清除欄位是因為 ticketName 被賦予的值為 `document.querySelector('#ticketName')`，因此這行程式可以看作 `document.querySelector('#ticketName').value`，有選取到 DOM，因此可以設定 DOM 的 value 為空字串
---
5. **Hsin：**
助教好，我又有問題了
這是我的 [codepen](https://codepen.io/hsinhui/pen/VwPrddG)，今天在測試的時候突然發現，如果一開始填寫表單有空格，會跑驗證，所以無法提交訂單，但後來填寫資料上去後按送出卻會跳錯(若一開始直接填寫完畢送出不會跳錯)，還有另個問題是想請教 validate 套件，若想在電話那邊多一個驗證數字型別該如何寫呢? 看了半天文件還是不懂 QQ
> 助教回覆：
> 目前檢視 submitBtn 綁定兩次監聽，分別是第 214、235 行。可以嘗試改為點擊後只會執行 checkValidate 的函式。如果驗證沒有問題再去執行 createOrder() 看看
> 在 validate 網站的 numericality，可以驗證數字型別：https://validatejs.org/#validators-numericality
>其中的 onlyInteger 屬性為只能使用整數的意思youting：
---
6. **youting：**
助教好，我使用了 bootStrap 的驗證樣式，我該如何改寫才能在判斷表單全部都有值之後再執行送出表單的函式，第 9 行判斷，假如全部都有值才執行 13 行的函式，我想使用 filter 去判斷卻不行，Array.from(forms).filter 回傳還是空陣列 https://codepen.io/youtinglou/pen/ZELaqEG?editors=1011
> 助教回覆：
> 這邊不是很確定同學使用 filter 的作法是如何設定的，建議可以把原本測試失敗的程式碼也放上來，這樣助教可以比較清楚邏輯上是哪裡出錯哩。
> 如果要確認是否全部都有值，這邊提供一個做法給你參考：可以先試著設定一個變數，並賦予它布林值，例如：`let verify = true`。執行 forms.forEach 時，如果有欄位未填寫，則重新賦予變數值為 false。
假如 forEach 跑完後，變數的值為 true 再執行第 13 行的函式
---
7. **Yu sung：**
請問助教，最終版型有嘗試自己切，但我看了一下助教版型有一個地方我切不太出來有參考試著弄弄看。
我希望效果跟助教版型一樣讓 x 軸消失後，用滑鼠滑圖片也會有 x 軸的效果應該要怎麼去做顯示呢?
https://codepen.io/kevin-hsu-the-encoder/pen/Bapmvow?editors=0100
> 助教回覆：
> 範例程式碼中除了用 CSS 語法將 x 軸隱藏外，還有使用 JS 來呈現這個效果哩，可以參考 HTML 第 427 - 464 行。
> 這邊可以將範例中 ele 變數選取的 DOM 換成 .recommendation-scrollBar 就可以執行了
---
8. **yu0917：**
助教您好~
想針對影音課程的「從 wireshark、Fiddler 深入了解網路請求」做提問
想請問為什麼有些網站 ping 不到(如附圖)?是因為該網站不是放在 server 上嗎
> 助教回覆：
ping 是用來 ping host，不是 page 哦
以同學使用的網站為例，主機是設置在 `briian.com`，不是 `briian.com/5577` 這個網頁哩
可以嘗試改用 `ping briian.com` 來測試看看～
---
9. **Jordan_Tseng：**
老師、助教、同學好，在寫 JS 時，會怎麼建議安排版面？會是可以先宣告的全域變數、監聽動作、function各自放一區嗎？當然也不能太不相關的，像這次作業都比較有關，我就在想說把這幾個監聽都放在一起。dom 的 queryselector 這種都放一起，data 和 cartData 等都放一起感覺也滿好找的。
> 助教回覆：
> 同學這樣安排的方法蠻好的～
這邊也是建議可以將全域變數的宣告、監聽、function 各自放在一區，這樣日後在檢視時也會比較方便 :D
---
10. **ted31539：**
這是我的 code：https://codepen.io/Ted31539/pen/yLgvYPb
老師、助教、同學大家好，想請問最終任務，我貼上了老師給的 html、css 到 vs code，但是用瀏覽器開起來，圖片這地方一直跑掉。
一模一樣的 html、css 放到 CodePen 卻都正常。
是哪邊出了問題呢？
> 助教回覆：
> 同學附圖圈起來的地方是使用到 Material Icon，需要加上 Material Icon 的 CDN 才能正確顯示哦。
> 目前在 CodePen 的 HTML 設定裡，有在 head 加上 CDN：
> `<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">`
因此可以顯示哩。可以嘗試將這段 CDN 也加到 VS Code 的程式碼內，讓 Material Icon 可以正確載入
---
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）