Day6-Ajax Type Ahead

輸入特定的城市名片段後會出現 json 檔中符合該名字的城市

1. (複習)正則表達式

常見的使用方式有兩種:

1. 直接用兩個斜線代表

const regex = /\w/gi;

2. 建立 RegExp 物件，本實作採用此寫法

const regex = new RegExp('\\w+', 'gi');

以上兩者是相同的意思

而在處理人口數字的部分，作者使用了千位分隔符，程式碼如下:

num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

至於此段程式碼的意義，可以參考我之前的發問:

https://ithelp.ithome.com.tw/questions/10195924

2. change 監聽事件

這邊要補充的是 change 和 input 事件的比較:

• change: 在<input>，<select>，和<textarea>內的值改變時且不再是 focus 狀態時觸發
• input: <input>，<select>，和<textarea>內的值改變時就會觸發

在此實作中，作者綁定了兩個事件: change & keyup 去搜尋資料，但其實只要使用 input 事件就能達到一樣的效果

3. (複習)replace 函式

將一個 str 字串的某個部分用新的字串取代
語法:

str.replace(regexp|substr, newSubstr|function)

Day8-Fun with HTML5 Canvas

使用 Canvas 讓我們可以在網頁上畫畫的一個小實作

1. 建立 Canvas 畫布

// 利用 draw 建立畫布，且畫布的內容是 2d 的
const canvas = document.querySelector('#draw'),
      ctx = canvas.getContext('2d');

// 設定畫布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

補充:

因為在這邊看到 innerWidth，innerHeight，所以在此補充一下 innerWidth vs. outerWidth vs. width 的差別:

可以了解到:

• innerWidth: 不包括 border，包括 padding
• outerWidth: 包括 border 和 padding
• width: 只包括該 DOM Element
  然後 height 也是一樣的規則喔~~

2. 寫一些繪圖的設定

ctx.strokeStyle = '#BADA55'; // 設定勾勒圖形時用的顏色
ctx.lineJoin = 'round'; // 讓線條轉彎時它的拐角是圓的
ctx.lineCap = 'round'; // 讓線條末端是圓的
ctx.lineWidth = 100; // 線條寬度

let isDrawing = false, // 判斷是否繼續繪畫
    lastX = 0, // 設定從哪裡開始繪畫/哪裡結束繪畫的初始值
    lastY = 0;

3. 建立繪畫的函式並建立監聽事件

function draw(e) {
  if(!isDrawing) {
    return;
  } else {
    // 開始畫線
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    // 利用解構重新指定 lastX 和 lastY 值
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }
}

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', (e) => {
  // 從滑鼠按下的點開始畫
  [lastX, lastY] = [e.offsetX, e.offsetY];
  isDrawing = true;
});
canvas.addEventListener('mouseup', () => isDrawing = false);

此時就能在網頁上繪畫了，下一步是新增一些變化

4. 新增繪畫時線條的變化(顏色，線寬)

這邊和原程式碼有些不同，有按照自己的想法修改

let hue = 0;
let direction = true;

function draw(e) {
  if(!isDrawing) {
    return;
  } else {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];

    // 控制顏色
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    hue+= 10;
    
    // 控制線寬
    if(ctx.lineWidth >= 20 || ctx.lineWidth < 5) {
      direction = !direction;
    }
    direction === true ? ctx.lineWidth++ : ctx.lineWidth--;
  }
}

全部練習的程式碼都在此連結:
https://github.com/a90100/JavaScript30