JS30 Day12

這次的課較簡單,學會記錄使用者輸入的資料,並且檢查該資料。


Key Sequence Detection

完成目標

  • 做一個打密碼出現彩蛋的功能。

    • 像是在這個網站:https://www.buzzfeed.com/

      輸入「上、上、下、下、左、右、左、右、B、A」之後會出現彩蛋




index-START.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>

index-FINISHED.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
const pressed = [];
const secretCode = 'wesbos';

window.addEventListener('keyup', (e) => {
console.log(e.key);
pressed.push(e.key);
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
if (pressed.join('').includes(secretCode)) {
console.log('DING DING!');
cornify_add();
}
console.log(pressed);
});
</script>
</body>
</html>



學習筆記


★ KeyboardEvent.key

key 事件在按下按鍵時返回鍵盤按鈕的字串,該屬性的返回值可以是:

  • 單個字母:如 aG1+&
  • 多個字母:F1EnterHOMECAPS LOCK

如果想查看是否按下了 altctrlmetashift 鍵,可使用 altKeyctrlKeymetaKeyshiftKey 屬性。

範例:

1
2
3
window.addEventListener('keyup', (e) => {
console.log(e.key);
})

key、keydown、keypress、keyup
  • KeyboardEvent.key
    按鍵按下後,回傳一個鍵盤值。

  • KeyboardEvent.Events.keydown
    keydown 按鍵按下時觸發。

  • KeyboardEvent.Events.keypress
    keypress 按鍵按下時觸發。按鍵不是特殊鍵( modifier key 如:Ctrl 、Alt 等)。

  • KeyboardEvent.Events.keyup
    keyup 當按鍵放開時觸發。


★ Array.includes()

includes() 方法會判斷陣列是否包含特定的元素,並回傳布林值。

語法:arr.includes(searchElement[, fromIndex])

  • searchElement: 要搜尋的元素。
  • fromIndex: 要於此陣列中開始搜尋 searchElement 的位置。如為負數值,則自 array.length + fromIndex 開始向後搜尋。預設值為 0。

範例:

1
2
3
4
5
6
7
8
9
10
const number = [1, 2, 3];
console.log(number.includes(2));
// true

const me = ['Chai', 'Choo', 'Chia'];
console.log(me.includes('Chai'));
// true

console.log(me.includes('Ch'));
// false

★ Array.push()

push() 方法會添加一個或多個元素至陣列的末端,並且回傳陣列的新長度。

*注意:回傳的不是新陣列,而是新陣列的長度,此方法會直接改變原本的 Array。

範例:

1
2
3
4
5
6
7
8
9
10
11
const friends = ['Annie', 'KAWA', 'WeiWei'];

const count = friends.push('Anthony');
console.log(count);
// 4
console.log(friends);
// ["Annie", "KAWA", "WeiWei", "Anthony"]

friends.push('Chester', 'Louis', 'River');
console.log(friends);
// ["Annie", "KAWA", "WeiWei", "Anthony", "Chester", "Louis", "River"]

★ Array.shift()

shift() 方法會移除並回傳陣列的第一個元素。

*注意:回傳的是被移除的那個第一個元素,此方法會直接改變原本的 Array。

*若要刪除並返回數組的最後一個元素,可以使用 pop()

範例:

1
2
3
4
5
6
7
const character = ['a', 'b', 'c'];
const firstElement = character.shift();

console.log(character);
// ["b", "c"]
console.log(firstElement);
// "a"