[JS 60 Days] Day 36 to Day 46 - ES6 Git window.location

Introduction

• Day 36 - ES6 起步走 - Template String 樣板字串
• Day 37 - let 與 const
• Day 38 - let 與 const 觀念複習
• Day 39 - 箭頭函式(arrow function)
• Day 40 - ES6 團戰關卡
• Day 41 - new Date() 時間處理
• Day 42 - new Date() 與字串處理
• Day 43 - GitHub Pages
• Day 44 - window.location
• Day 45 - window.location
• Day 46 - window.location

---

Day36

ES6 起步走 - Template String 樣板字串

第36天的作業是改寫[第 20 關]的字串相加邏輯，以符合 ES6 寫法，因為當初寫時就已經是用樣板字面字的方式寫了，所以這次會來練習fetch，這兩篇是我的整理筆記同步非同步霧煞煞(上)-AJAX
同步非同步霧煞煞(下)-Promise,Async,Await

如果你已經早就會 ES6 字串處理，請觀看以下文章，挑選一個你不會的技術觀念，並分享你學到了什麼

• 邁向 JavaScript 勇者之路
• 重新認識 JavaScript
• ES6 入門手冊(較於艱深)

Day37

let 與 const

比較了這三個用法 var let const
var, let, const 差異比較

Day38

let 與 const 觀念複習

問題一

請問下面會出現的 console 是？

console.log(a); // ReferenceError: a is not defined
let a = 10;

問題二

以下是否會正常執行？若不會，會顯示什麼紅字錯誤？

let a = 1;
a=3;
//會正常執行，let可以重新賦值

let b = 1;
let b = 2;
//會錯誤 不能重複宣告

const c = 3;
c=4
//會錯誤 const不能重新賦值

問題三：此為熱門面試題目(選答)

請問 var、let、const 的區別是？

我整理了一篇比較文章
var, let, const 差異比較

Day39

箭頭函式(arrow function)

arrow function 會如何影響到 this？
我整理了一篇文章
箭頭函式 Arrow Functions 和 this

Day40

ES6 團戰關卡

請挑選20天或35天改為ES6寫法，若已經改寫，以下面試題目請挑選一題來解釋，並下方附上你的 HackMD 文章
a. 請解釋什麼是 this？請寫範例解釋？
箭頭函式 Arrow Functions 和 this

b. 你對 promise、promise all 有多熟悉？請寫範例解釋？
c. Fetch 與 XMLHttpRequest
同步非同步霧煞煞(上)-AJAX
同步非同步霧煞煞(下)-Promise,Async,Await

d. 什麼是原型繼承(prototype)？
物件導向: 原型Prototype與物件Object

Day41

new Date() 時間處理

我的時間處理整理文章
關於時間 new Date()

Day42

new Date() 與字串處理

問題

請用你學會的語法，取出今日時間，並依序組出以下字串
假設今天時間為 8/5，則需透過 new Date() 處理後，印出以下資料

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

Day43

GitHub Pages

問題

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

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

我的github

Day44

window.location

來了解 window.location 類別的功能，例如轉址、取得網址參數等等

我的整理文章
關於window.location類別功能：轉址、取得網址參數

Day45

window.location

Day46

window.location

問題一

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

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

問題二

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

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

<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 寫法。

let url = new URL('https://www.hexschool.com/?recommend=tom');
url.searchParams.get('recommend');  // tom