JS 學徒特訓班 - Date、Location 41 ~ 46 關

竹白的 JS 學徒特訓班筆記 - 目錄

記錄六角學院所開的 JS 學徒特訓班，為期 60天的特訓。

第四十一關 - new Date() 時間處理

題目連結

41. 問題

請觀看以下文章，以了解如何透過 JS 去取得年月日的資料，並用 Slack 回傳你的學習心得，42 關將會出題目來練習。

41. 參考解答

竹白記事本 - 日期時間

教學、延伸知識連結

第四十二關 new Date() 與字串處理

題目連結

42. 問題

請用你學會的語法，取出今日時間，並依序組出以下字串。

假設今天時間為 8/5，則需透過 new Date() 處理後，印出以下資料：

// 目前時間是 2020/8/5 14:20 
// 2020/08/05
// 2020-08-05
// 今天是禮拜五
// 今天是八月五日，時間為 14:20

42. 參考解答

四十三關你熟悉 GitHub Pages 嗎？

題目連結

43. 問題

請依照技術主管的指示，將網頁放在 GitHub Pages 上的服務

在本地端新增一個 index.html，裡面多加上一個 h1 的標籤，裡面寫自己 Slack 的暱稱
觀看此文件，讓自己的網頁上傳到 GitHub Pages 上
在下方列表，張貼自己的 GitHub Pages 網址
接下來我們將會持續用 GitHub Pages 更新網頁

43. 參考解答

略

四十四關 window.location

題目連結

44. 問題

請觀看以下文件，了解 window.location 類別的功能，例如轉址、取得網址參數等等

44. 參考解答

竹白記事本 - window.location

教學、延伸知識連結

Location 對象，URL 對象，URLSearchParams 對象

四十五關、四十六關 window.location

題目連結

45. 問題

以下有兩顆按鈕，請使用 JavaScript 語法，操控點擊後，能夠轉址到對應網站去

1
2


<button class="google">連到 Google</button>
<button class="yahoo">連到 Yahoo</button>

45. 參考解答

1
2
3
4
5
6
7


document.querySelector('.google').addEventListener('click', function () {
  window.location.href = 'https://www.google.com';
});

document.querySelector('.yahoo').addEventListener('click', function () {
  window.location.href = 'https://tw.yahoo.com';
});

CodePen

46. 問題

問題一：

以下有兩顆按鈕，是部落格推薦連結，請抓取 data-id 的值後進行轉址：

點擊 Tom 時，網址為 https://www.hexschool.com/?recommend=tom
點擊 John 時，網址為 https://www.hexschool.com/?recommend=John

1
2


<button class="google" data-id="tom">Tom 推薦六角學院</button>
<button class="yahoo" data-id="John">John 推薦六角學院</button>

問題二：

如果網址規則是https://www.hexschool.com/?recommend="值"，該如何取出 recommend 的值？

例如 https://www.hexschool.com/?recommend=tom，可以透過 JS，精準取出 tom 的值？請提供 JS 寫法。

PS：Codepen 做法是抓不到值的，需自行開 web server，或到六角官網開啟 console 面板測試

46. 參考解答

問題一：

1
2
3
4
5
6
7
8


document.querySelector('.google').addEventListener('click', buttonHandler);
document.querySelector('.yahoo').addEventListener('click', buttonHandler);

function buttonHandler() {
  const id = this.dataset.id;
  const url  = 'https://www.hexschool.com';
  window.location.assign(`${url}/?recommend=${id}`);
}

CodePen

問題二：

1

window.location.search.replace('?recommend=', '');