JS30 全攻略 第12天

前言

JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教學影片裡，建立30個JavaScript的有趣小東西。

另外，Wes Bos 也很無私地在 Github 上公開了所有 JS 30 課程的程式碼，有興趣的話可以去 fork 或下載。

---

本日目標

預先設定一組secretCode，如果在視窗畫面內輸入的文字與secretCode相同則在視窗畫面加上圖案。

(ps.背景圖是後來改的，原版是空白畫面。)

---

解析程式碼

這次我們需要藉助網路上別人寫好的 JavaScript API，讓他幫忙在每次視窗畫面中輸入文字等於secretCode時，在視窗畫面上新增一個生動的圖案。

觀看完整的 JavaScript API 內容

<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>

JS 部分

宣告常數 pressed 為一個空陣列，用來存放我們在視窗畫面所輸入的值。

宣告常數secretCode作為預設的文字密碼。

const pressed = [];
const secretCode = 'saber';

我們替整個視窗註冊keyup 事件(放開按鍵時觸發)的監聽器，藉由console.log(e.key);可以在console看到我們按下的是哪一個按鍵，緊接著我們將按下的那個按鍵(key)放入陣列pressed的末端。

為了比對輸入文字是否等於secretCode，我們可以利用splice(start,deleteCount)來讓陣列的長度跟secretCode保持一樣，沒做這個處理的話，我們會發現陣列中的元素愈來愈多、長度愈來愈長，永遠沒有和secretCode相同的可能。

splice(start,deleteCount)可以刪除陣列自start索引開始的deleteCount個元素，要注意的是deleteCount要大於0才會開始刪去元素，範例中的secretCode長度是5，也就是說只有輸入到第6次才會開始刪去元素。

有趣的是我們將deleteCount指定為pressed.length - secretCode則效果和直接指定為1相同。只要pressed的長度到達6，經過計算後deleteCount是1，刪去一個元素後，pressed長度又變為5，由此周而復始(5->6；6->5)。

指定start = -secretCode.length - 1的效果是讓我們從最早被 push 進陣列(最前端)的元素開始刪除。

window.addEventListener('keyup',(e)=>{
    console.log(e.key);
    pressed.push(e.key);
    pressed.splice(-secretCode.length - 1,pressed.length - secretCode.length);
});

最後，我們利用 if 判斷用pressed.join('')串聯出的字串是否有包含secretCode，如果有包含就在console印出DING DING!並呼叫 API 中的cornify_add()在視窗畫面裡加上圖片。我們也可以再補上console.log(pressed);，查看目前pressed陣列內的元素。

window.addEventListener('keyup',(e)=>{
    /***省略***/
    /***省略***/
    if(pressed.join('').includes(secretCode)){
      console.log('DING DING!');
      cornify_add();
    }

    console.log(pressed);
});

補充資料:

keyup事件
Array.prototype.splice()

範例網頁請按此