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
相同則在視窗畫面加上圖案。
這次我們需要藉助網路上別人寫好的 JavaScript API,讓他幫忙在每次視窗畫面中輸入文字等於secretCode
時,在視窗畫面上新增一個生動的圖案。
<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
宣告常數 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);
});
ps.背景圖是後來改的,原版是空白畫面。
keyup事件
Array.prototype.splice()