W8_實作練習 + 作業檢討

如何用 XMLHttpRequest 發 req 拿資料

影片：[FE102] 傳送資料的第二種方式：ajax
- XMLHttpRequest 簡寫是 xhr

// 一定要給 new，'XMLHttpRequest' 是瀏覽器提供的一個 class
const request = new XMLHttpRequest()

// 跟 request.addEventListener('load', function...) 一樣
// 要放一個 fn 到 onload 上面
    request.onload = function(){
      if (request.status >= 200 && request.status < 400) {
        console.log(request.responseText)
      } else {
        console.log('error')
      }
    }

    request.onerror = function() {
      console.log('error')
    }

// 第一個參數是 method，2nd 是網址，3rd 要不要非同步
// open 的意思就是要發一個 req 到這個地方
    request.open('get', 'https://reqres.in/api/users', true)

// 一定要有個 send 在最後，才會把 req 傳出去
    request.send()

拿到資料以後，如何顯示在網頁上

[FE102] 綜合示範：抓取資料並顯示


  <div class="app">
  </div>
  <script>
    const request = new XMLHttpRequest()
    const container = document.querySelector('.app')

    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        const response = request.responseText
        const json = JSON.parse(response)
        const users = json.data

        for(let i = 0; i < users.length; i++) {
          const div = document.createElement('div')
          div.classList.add('profile')
          div.innerHTML =
          `
            <div class="profile__name">${users[i].first_name} ${users[i].last_name}</div>
            <img class="profile__img" src="${users[i].avatar}"/>
          `
          container.appendChild(div)
        }
      } else {
        console.log('error')
      }
    }

    request.onerror = () => {
      console.log('error')
    }

    request.open('get', 'https://reqres.in/api/users', true)
    request.send()

如果要複習這週的話，看這三個影片實作：

傳送資料的第二種方式：ajax
詳細解析 XMLHttpRequest
綜合示範：抓取資料並顯示

W8 作業一的實作重點：

MTR05 W8: 參考範例：hw1 抽獎活動 - 功能篇（請先寫完作業再看）
- 08'00" - 20'00" 之前切版，之後功能
- 20'00" 改善程式碼

先把需要的版面切好，途中花比較多時間的就是「置中」、「對齊」、「RWD」，學到目前為止，認為切版就是實作幾個部分：
- 導覽列
- 中間的內容
- 註腳 footer
思考實作流程：
- 點擊抽獎頁面按鈕 -> 跳轉畫面，產生結果
- 點按鈕（監聽按鈕點擊事件）-> 拿到 API 給的抽獎結果（串API）-> 把原本的內容藏起來（選對元素，利用 classList.add('hide')）-> 顯示抽獎結果內容
實作時有可能發生的問題：
- 選錯元素、選不到元素
- 邏輯錯誤，不知道怎麼拆解流程
- 多熟悉要應用的函式
  - 常用的有哪些呢？


// 讓一個變數等於新增的 li，把想要新增的 li 放進去 class 叫做 gamelist
的容器裡面（天啊我的中文需要精進）

const gameli = document.createElement('li')
document.querySelector('.gamelist').appendChild(gameli)

// 讓內文等於 XXX
document.querySelector('h1').innerText = 'XXX'

在瀏覽器上用 JS 發 request，大致上會有需要五個步驟：

 // 一定要 new
 const req = new XMLHttpRequest

 // 有五個參數：req method, api 網址, 同步或非同步（false or true）, id, password
 req.open('GET', 'api 網址', true)

 req.onload = () => {
     if (req.status >= 200 && req.status < 400) {
         const json = JSON.parse(req.response)
         ...
     }
 }

 req.onerror = () => {
     console.log(err)
 }

 req.send()

 // 假設發 api 需要設定 header，使用的是 req.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json')

 // 要特別注意的是，發 header 要放在 req.open 及 req.send 中間

 參考資料：MDN https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader

W8 作業二的實作重點：

MTR05 W8: Twitch API 講解 Part1（新版）
- 2'00" 整理版面
- 2'16" - 10'38" 拿到前五個熱門遊戲，把遊戲名稱放到 navbar 裡
- 10'50" - 點擊右上角的遊戲名稱之後，顯示正在直播這遊戲的前 20 個實況
- 21'00" 點擊不同遊戲名稱，換功能
- 解題想法：
  - 先把版面切好，特別注意實況裡面的結構，像是遊戲畫面、下面的資訊說明
  - 拿到遊戲名稱，動態新增 li 標籤，把名稱放進 ul 裡面
  - 把 title 顯示為第一名的遊戲

實作有可能卡住的地方：

當點擊導覽列的遊戲名稱時，就把 h1 換成點擊的名稱

我犯了邏輯上的錯誤，看下面的註解

document.querySelector('.gamelist').addEventListener('click', e => {
  if (e.target.tagName.toLowerCase() === 'li') {
      const gameNavList = e.target.innerText
      // 下面兩行是完全不一樣的東西
      // 一個等號是賦值的概念，在這裡我要做的是「當我點擊導覽列的遊戲名稱時，把點到的遊戲名稱賦予給 h1」
      // 這個是對的
      document.querySelector('h1').innerText = gameNavList

      // 這個不合題意
      gameNavList = document.querySelector('h1').innerText
  }
})