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

# 4/7 線上 Slack 助教

## 今日輪班助教時間

至榮：4/7（三）
早上 9:00 - 下午 5:00

## 發問規範

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

## 注意

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

## 問題

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

---

（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）

1. **Dora:**
老師助教同學們好，這是第七堂講義的 [CodePen](https://codepen.io/hexschool/pen/eYgOBeN?editors=0011)，我不了解js code第49-53行的參數設定，像是x軸的時間顯示方式，還有y軸為什麼是從0開始，接下來是2，y軸的顯示方式是怎麼設定的呢? 因為我看c3官網都沒看到那些設定阿，謝謝!
> 助教回覆：
> C3.js 的詳細設定可以在 Reference 參考喔，以下是 x 軸的參數設定:
https://c3js.org/reference.html#axis-x-type
format: '%Y/%m/%d' 指的是要用 year/month/date 的方式呈現 x 軸資料。
>
> 至於 y 軸的 range 範圍也是可以調整的，沒有特別設定的話就會按照官方預設顯示:
https://c3js.org/reference.html#axis-y-default

2. **Vivian Yeh **

老師助教同學們好，我想要詢問的問題是有關4/7每日任務透過DOM選取data-property的問題：
想請問圖片裡的第二行
`querySelectorAll('[data-title]')[0]`
這邊的data-title 外面為什麼要再加一層中括號呢？難道跟一般選取tag的方式不同嗎？
我嘗試自己去搜尋相關的介紹，但我不太會下關鍵字，請問助教有沒有什麼關鍵字我能拿去google找到我需要的東西呢？
謝謝助教～

> 助教回覆：
> 同學可以參考以下連結:
https://stackoverflow.com/questions/7084557/select-all-elements-with-a-data-xxx-attribute-without-using-jquery
https://developer.mozilla.org/zh-TW/docs/Web/API/Element/querySelectorAll#example
>
>如果要取得帶有某個 attribute 的 HTML 標籤，就必須使用 [] 喔，關鍵字的下法是 querySelector + dataset。

3. **雅帆**
老師助教同學們好，這是我的 [CodePen](https://codepen.io/yafanchung/pen/vYgJxov?editors=1111)，我原本預期撈回來的 api 資料可以成功渲染在畫面上，但卻沒有把撈回來的資料成功渲染在畫面上，想問下問題出在哪裡？我是哪邊有寫錯呢?
有幾點問題想請較: 我有點搞不太清楚處理 api 的 function 和 render 的 function 該如何搭配使用，render 的內容是不是盡量以"函式"的方式獨立出來寫，不要直接以非函式的方式包在 api 的 function 裡面? 有點不太理解 render() 中 括號裡面到底要不要傳參數?看同學和助教的程式碼好像兩種方式都可以
謝謝!

> 助教回覆：
> 1. 同學需要在 JS 的第 26 行將 img 的 src 也替換成 ${product.images} 才能正確渲染圖片喔，其他部分是有正確渲染的。
>2. 建議的程式碼撰寫方式為將「資料處理」與「畫面渲染」拆成不同函式，比較專業的說法叫做【關注點分離】，同學有興趣的話可以參考以下影片講解:
https://www.youtube.com/watch?v=WRBv4G-omjc
像是透過 axios 撈回資料、對資料進行篩選處理，這就應該被歸類在「資料處理」的函式;
而針對篩選完的資料，將其呈現於網頁畫面，就應該被歸類在「畫面渲染」;
這樣的好處是程式碼邏輯清楚，像是 Vue.js 就是依照這種方式設計的。
>
>3. 都可以喔，端看同學的撰寫方式、以及資料的取得方法。如果使用的資料是全域範疇，就可以不用傳參數。

4. 老師助教同學們好，這是我的 [CodePen](https://codepen.io/nekorice/pen/dyNzxeJ)
想請問 js 4 ~11行中
首先關於透過querySelectorAll所取出的值的部分
在影音課程的哪裡可以看到相關的講解?
取出來的值為什麼可以直接使用forEach呢?
另外關於js第6行的監聽事件所帶的參數當中
第二個以往都是function(e)
這次卻直接帶入addAlertMsg
想請問這部分的相關教材可以在哪裡看到呢?
由於上述兩個操作方法都不清楚也不知道的情況，自己是用這種方法來寫今天的每日，自己也知道是非常愚蠢的寫法...所以迫不急待想知道關於上述兩個問題的影音教程，非常想要重新複習，謝謝

> 助教回覆:
> 對應的章節是下面這個:
>https://courses.hexschool.com/courses/1289881/lectures/30768830
>1. 因為 querySelectorAll 會取回所有符合條件的 HTML 標籤，形成一個類陣列 (跟一般的陣列很像，但是少了一些可以用的陣列方法)，因此可以使用 forEach 喔。
>
>2. 兩者是一樣的喔，addEventListener 中除了直接寫 function(e)，也可以引用外部的其他函數，在此就是引用了 addAlertMsg 這個函數。
同學可以參考先前的每日任務教學: https://rpg.hexschool.com/training/17/show?embedhm=xIKzaf5kSXqj78BvAEB5vg

5. **yu0917**
助教您好，想詢問 patch的使用時機是不是在「已確定會更動哪幾筆資料」的情況下
就以此 [codepen](https://codepen.io/guymrzme/pen/OJWjKrq?editors=1010) 例子而言，因為不確定每次修改到的值有幾個，所以是否只能用 put 一次統一修改。
謝謝~~~

> 助教回覆:
> 可以參考以下連結:
https://ithelp.ithome.com.tw/articles/10224134
> PATCH 跟 PUT 的差異在於 PATCH 只會修改指定的資料內容，沒有需要修改的資料部分會照舊，
> PUT 的話則是會整個資料做抽換，除了指定要修改的部分以外，沒有指定的欄位會被替換成預設值。
> 依照同學的情境來說兩者都是可以用的，但是要記得如果要使用 PUT，則所有的物件屬性都要設定，否則沒有設定的部分會被替換成預設值。
>
> 另外，patch 跟 put 的使用也是需要看後端開出的方法是哪一個，並非前端進行修改的喔

6. **雅帆**
老師助教同學們好，我想請問一下關於 [4/1 的每日任務](https://hackmd.io/Nqjs-2nARbCSC9JTyf-vNQ?view)
從以下兩種方式可以判斷此 API 連結是否可以直接透過 axios 「在瀏覽器端」讀取使用。
我想請問以 「全球運動場館資訊網」來說，text-cors 的結果 status 是 200，不過瀏覽器端沒有header 參數：Access-Control-Allow-Origin: *; 而 「Unsplash」 則是相反過來，想請教 text-cors 跟查看瀏覽器端讀取關鍵 header 參數該以哪一個為主?還是我誤會了什麼? 請指教，謝謝

> 助教回覆:
> 1.「全球運動場館資訊網」是符合 Access-Control-Allow-Origin: * 的喔，同學打開 Network 後可以選擇 XHR，這樣就可以只觀察 request。


>至於 text-cors 這項服務的測試是輔助性質的，其實最明確的方式還是自己用 axios 串看看 :D

7. RitaHuang
021/4/06（二）每日任務
老師助教同學們好，我想請問一下
為什麼相同的程式碼，顯示會不一樣，
產品顯示，一個完全直行，另一個產品並排後，排行。
程式碼完全用 VS Code 都比對過了，可是顯示為什麼不一樣？

> 助教回覆:
任務模板有載入 Bootstrap 的 CSS 喔，所以排版上會不一樣，
同學可以直接 Fork 任務模板，設定就會是一樣的了。

8. **雅帆**
感謝助教的回覆與 debug，這邊想要再針對 4/7 問題集中第三題的第三小點助教回覆的部分發問，可能我的函式觀念還不是很清楚，常常搞不懂什麼時候要傳參數，什麼時候不用傳參數
以助教範例解法中，我有點不太理解 JS 第14行 product 的變數要如何傳到 render function 中當成參數使用?記得 function 執行完畢時裡面的參數不是也會消失嗎 ，為什麼還可以當成是 render function 的參數使用?
而我發現以助教範例的解法中，可以有第二種做法是將 JS 第 13 行拿掉 let，JS 第 14、22 行就可以不用傳入 product 參數，但這樣必須在 getProduct 函式外在另外宣告 let products = []; 當成是全域變數來用，請問我的理解對嗎?

> 助教回覆:
> 1. function 執行完畢時裡面的參數的確就不能再取用了，不過範例中是在第 14 行、function 內部取用 product 變數的，所以運作是沒有問題的。關於參數你可以想像它是這麼運作的，首先一開始程式碼長這樣:

axios.get(url)
  .then(function (res) {
    let product = res.data.products
    render(product);
  })
}

> 其實上面的程式碼跟下面的程式碼是一樣的:

axios.get(url)
  .then(function (res) {
    let product = res.data.products

    // 底下是 render(product) 函式內容
    let str = '';
    product.forEach((item) => {
      str += `
        <div class="col-6 mb-3">
        <div class="card">
          <img src="${item.images}" class="card-img-top productImg" alt="${item.title}">
          <div class="card-body">
            <h5 class="card-title"><strong>標題:</strong> ${item.title}</h5>
            <p class="card-text"><strong>種類:</strong> ${item.category}</p>
            <p class="card-text"><strong>原始價格:</strong> ${item.origin_price}</p>
            <p class="card-text"><strong>售價:</strong> ${item.price}</p>
            <p class="card-text"><strong>描述:</strong> ${item.description}</p>
          </div>
        </div>
      </div>
      `
    })
    productList.innerHTML = str;
  })
}

> 上面做的是「呼叫」render 函式，然後在「參數」作用範圍內把參數帶入函式做運算，類似套公式的感覺，而不是把參數「送出去」。
> 2. 至於後面同學的理解是正確的，這是因為 render() 函式裡面有使用到一個叫 product 的變數，如果沒有代入參數，它預設會去抓取全域變數。

9. **王懷英**
老師助教同學們好，這是 [我的 CodePen連結](https://codepen.io/huaiying/pen/ExZwjmQ?editors=1011)。
我原本預期「JS 第 6 行」console.log的測試結果是data-title的文字，但顯示 `<p>~<p>` 請問是我哪裡理解有誤嗎? ><" (附上截圖)
謝謝

> 助教回覆: 同學這邊將 JS 第 6 行更改為 console.log(item.dataset.title); 就可以顯示 data-title的文字囉

10. **李濬智**
老師助教同學們好，我想請問一下：自己練習第六周小組任務
卻撈不懂 再麻煩助教老師看看
https://codepen.io/xu3rmp454x/pen/zYNEPNy?editors=1011

> 助教回覆:
> 以下會針對同學目前的程式碼進行修正，
> 首先同學是有抓取到資料的，不過後續的資料處理有點問題所以會呈現錯誤:
> 1. JS 第 28 行，因為 JSON 資料會是字串型別，所以 item.jsGroup == 1 需要改成 item.jsGroup === "1" (建議用嚴格等於)
> 2. obj.第一組 += parseInt(1); 這行
> a. obj 中的「第一組」這個屬性一開始還沒有定義，所以不可以直接做 += 1。同學可以參考 [這個範例](https://codepen.io/hexschool/pen/wvgwoBj?editors=0011) 的 JS 27 - 31 行進行修正。，也可以先練習看看 [3/31 的每日任務](https://rpg.hexschool.com/training/17/show?embedhm=afis2b22Ta-FbbT_Lny9Ew)
> b. 1 本身就是數字型別，不需要再用 parseInt 轉成數字。

11. **雅帆**
助教不好意思，關於 4/7 問題集的第六題回覆我還是有些疑惑想請教:
為什麼助教說打開 Network 後可以選擇 XHR，這樣就可以只觀察 request，可是我這樣做會看不到任何的資料，所以我是打開 Network 然後選擇 ALL
2.關於以下原本的問題我還是覺得很困惑，我跟助教測是跟看到的畫面不一樣，[我將我看到的畫面整理在這邊](https://hackmd.io/k3752kgXTl-ERvntgaNj6w?both)，再麻煩解惑@@(不確定是不是 API 連結 本身的問題)
「全球運動場館資訊網」來說，text-cors 的結果 status 是 200，不過瀏覽器端沒有header 參數：Access-Control-Allow-Origin: *; 而 「Unsplash」 則是相反過來

> 助教回覆:
> 同學可以嘗試看看打開 Devtool 後重整一下頁面，應該就會正常顯示 xhr 項目了。
> 另外在「All」也是可以查看的，不過也是需要查看 Type 為「xhr」的項目，助教觀察同學的操作畫面，發現你似乎是點錯項目了。
> 如附圖，也可以參考這個連結: https://support.deskpro.com/en/kb/articles/how-to-inspect-ajax-requests-with-chrome-tools


> Unsplash 的確是帶有 Access-Control-Allow-Origin: * 的，但是因為每日任務的網址沒有帶上金鑰，所以用 test-cors 會串接失敗。