Day12-課題內容

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

進入JS30-Day12

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

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']

2. 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']

2. 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

2. 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