iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

新手也能懂的JS30系列 第 12

JS30-Day12-Key Sequence Detection

Day12-課題內容

邁入JS30的第12篇,在今天的題目中,當我們輸入的字元與的隱藏密碼一致時,便會打開隱藏在頁面中的彩蛋![1]
實作連結-大家可以嘗試在上面連續輸入ironman這七個英文字母,沒有事情發生的話記得先打開右上角的盾牌,點選載入不安全指令碼才能讀取到我們的指令。

進入JS30-Day12

在影片的一開始,作者提供了一個網址buzzfeed,當我們依序輸入"上、上、下、下、左、右、左、右、B、A",網頁就出現意想不到的彩蛋。
為了達到這樣效果,我們需要做到兩件事:

  1. 一筆含有輸入紀錄的資料。
  2. 檢查該資料是否符合我們的隱藏密碼。

提到資料處理相關的問題,我們的腦中就會馬上浮現前面經常使用的陣列。

步驟一

在第一天的Javascript Drum Kit當中,我們利用鍵盤事件的event.keyCode取得鍵盤的編碼,並利用他來觸發對應的功能。今天我們則是需要透過event.key來取得按下按鍵時的輸入值,並將它記錄到我們的陣列當中。
首先我們需要建立一個空的陣列,再將透過事件觸發取得的輸入值,一個一個加入我們的陣列當中。而把元素加入陣列之中的常見方法有兩種。[2]

  1. unshift() :將一個新元素從陣列的開頭加入。
let testArray = ['B', 'C', 'D', 'E'];
testArray.unshift('A');
console.log(testArray);
//['A', 'B', 'C', 'D', 'E']
  1. push():將一個新元素從陣列的尾端加入。
let testArray = ['A', 'B', 'C', 'D'];
testArray.push('E');
console.log(testArray);
//['A', 'B', 'C', 'D', 'E']

我們已經知道如何將元素加入陣列,但是隨著我們輸入的字數越來越多,我們的陣列將會越來越長。而我們的密碼長度只有七個字母,因此當陣列的長度超過這個長度,我們就需要將陣列內的內容做更動,讓陣列維持在只有前七次的按鍵輸入值。
在前幾個章節中,我們學過splice()這個可以更動陣列內容的方法,而在這邊我們可以透過先移除舊的元素,再將新的元素加入陣列當中,因此在這邊介紹把元素從陣列移除的常見方法。

  1. shift():將陣列裡第一個元素移除。
let testArray = ['A', 'B', 'C', 'D', 'E'];
testArray.shift();
console.log(testArray);
//['B', 'C', 'D', 'E']
  1. pop():將陣列裡最後的元素移除。
let testArray = ['A', 'B', 'C', 'D', 'E'];
testArray.pop();
console.log(testArray);
//['A', 'B', 'C', 'D']

在觸發的函式中,透過判斷式來將新增元素以及移除元素的方法結合,如此一來就能讓我們的陣列內容一直維持在七個元素:

//建立一新的陣列
let checkArray = [];
//指定隱藏密碼為wesbos
let secretCode = 'ironman';
//將頁面加上監聽事件keydown
window.addEventListener('keydown', checkStart);

function checkStart(event) {
    //當陣列長度小於7
    if (checkArray.length < 7) {
        //直接將取得的按鍵輸入值加入陣列之中
        checkArray.push(event.key); 
    //當陣列長度不小於7
    } else {
        //先將最前面的元素移除
        checkArray.shift();
        //再將最新的按鍵輸入值加入陣列之中
        checkArray.push(event.key);
};

步驟二

我們已經成功將資料存入我們的陣列中,再來只需將陣列資料轉為字串,然後判斷這個字串是否與我們的隱藏密碼字串相同。
這邊嘗試了一下陣列轉字串的方法:

  1. toString():將陣列中的元素以逗號分隔轉為字串。
let testArray = ['A', 'B', 'C', 'D', 'E']
let arrayString = testArray.toString();
console.log(arrayString);
//A,B,C,D,E
  1. join(): 將陣列中的元素以指定的字元分隔轉為字串,若未指定預設為逗號。
let testArray = ['A', 'B', 'C', 'D', 'E']
let arrayString = testArray.join('<->');
console.log(arrayString);
//A<->B<->C<->D<->E

了解這兩個方法之間的差異之後,在這邊我們會選用join()方法,並將分隔元素間的字串指定為空字串join(''),如此一來我們就能成功將陣列轉符合隱藏密碼格式的字串。當比對成功時,就執行我們開啟特效的函示,將上面已完成的code結合起來的完整函式內容如下:

function checkStart(event) {
    if (checkArray.length < 7) {
        checkArray.push(event.key);
    } else {
        checkArray.shift();
        checkArray.push(event.key);
    };
    //將陣列轉為符合格式的字串
    let checkCode = checkArray.join('');
    console.log(checkCode);
    //當輸入值組成的字串與隱藏密碼相同,執行以下的事情
    if (checkCode === secretCode) {
        console.log('Goal!!!');
        cornify_add();
      };
};

總結

在今天課題當中,我們學到以下的技能:

  1. 將元素加入陣列的方法:unshift()push()
  2. 將元素移出陣列的方法:shift()pop()
  3. 將陣列轉為字串的方法:toString()join()

今天的課題也是很經典的陣列應用,透過陣列方法來將資料新增或移除,並將資料轉成我們想要的格式,而這些方法在網頁的開發中是非常容易被使用到的,就讓我們一起來將陣列摸熟吧!

參考資料

  1. javascript30
  2. JavaScript Array Methods

上一篇
JS30-Day11-Custom Video Player
下一篇
JS30-Day13-Slide in on Scroll
系列文
新手也能懂的JS3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言