JavaScript專案

--- title: JavaScript專案 tags: JavaScript --- # **_JavaScript專案_** > 負責人：王譽錚 > 授課時間：[2019-11-27 (三)] > -- # **參考資源** > 1. [JavaScript30](https://github.com/guahsu/JavaScript30) > 2. [HTML5的lang速查](https://reurl.cc/9z043n) > 3. [[技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）](https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html) > 4. [HTML5 Audio w3school](https://www.w3schools.com/html/html5_audio.asp) > 5. [Array.from](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/from) > 6. [[筆記] JS30系列：監聽按鍵事件及撥放音效（Day1）](https://pjchender.blogspot.com/2017/01/js30day1.html) > 7. [HTML DOM querySelector()方法](https://www.runoob.com/jsref/met-element-queryselector.html) > 8. [陣列的運用](https://reurl.cc/gvNrxN) > 9. [函式的運用](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Functions) > 10. [JavaScript30_BLOG](https://guahsu.io/2017/05/JavaScript30-01-Java-Script-Drum-Kit/) > 11. [flex](https://wcc723.github.io/css/2017/07/21/css-flex/) --- # **課程大綱** [TOC] --- ## 語法 ### 陣列 * 宣告 ```javascript= let colors = ["Red", "Green", "Blue"]; let colors = new Array("Red", "Green", "Blue"); let colors = new Array(5); let colors = Array("Red", "Green", "Blue"); ``` * 呼叫 ```javascript= // 呼叫index = 1的元素 let colors = ["Red", "Green", "Blue"]; colors[1] // Green ``` * 增加 ```javascript= // 增加'Orange'到陣列最後端 colors[colors.length] = 'Orange'; colors.push('Orange'); colors[3] = 'Orange' ``` * 刪除 ```javascript= let lastElement = colors.pop(); // lastElement 會獲得colors 的最後一個元素，並從colors 中移除 ``` #### lab 1 ### 函式 1. 陳述式 function 函式名稱(參數){執行內容} ```javascript= function square(number) { return number * number; } ``` 2. 函式表達式 let 變數名稱 = function(參數){執行內容}; ```javascript= let square = function(number) {return number * number}; ``` 3. 箭頭函式 (參數1，參數2，參數3...... => {陳述式/表示式} * 單一個參數的可以不加小括號 * concise 語法 * 只需要輸入運算式，會直接內建return ```javascript= let func = x => x * x; ``` * block body * 需要明確的return 宣告 ```javascript= let func = (x, y) => { return x + y; }; ``` #### lab2 ## **實作：按下按鍵發出特定聲音以及產生特效** [JavaScript Drum Kit](https://github.com/guahsu/JavaScript30/blob/master/01_Java-Script-Drum-Kit/readme.md) ### 初始頁面最初始的html，只有設定畫面，但是還沒有加上效果 * 代表此html所用的語系 ```html= <html lang="en"> ``` * data-* 屬性 * 定義一個自命名的屬性，*為可以任意命名的部分，可以透過JavaScript或CSS來取得此屬性 * < kbd > * 它將產生一个行内元素，以瀏覽器的默認monospace字體顯示。 ```html= <div data-key="65" class="key"> <kbd>A</kbd> <span class="sound">clap</span> </div> ``` * < audio > * 音頻標籤，可在網頁中插入音檔 * data-key="65" 的數字代表想要設定的鍵碼(ASCII碼) * src="sounds/clap.wav" 為想要放出的音檔 ```html= < data-key="65" src="sounds/clap.wav"></audio> ``` css的部分 ```css= html { font-size: 10px; background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; } body,html { margin: 0; padding: 0; font-family: sans-serif; } .keys { display: flex; flex: 1; min-height: 100vh; /*最低高度值*/ align-items: center; /* 對齊 */ justify-content: center; /* 確定項目位於容器中心(可用於留白的語法)*/ } .key { border: .4rem solid black; /* 邊框設定, .4 = 0.4 */ border-radius: .5rem; /*設定邊框圓角*/ margin: 1rem; /*key 跟 key之間的距離(外距)*/ font-size: 1.5rem; /*字的大小*/ padding: 1rem .5rem; /*內距(上下，左右)*/ transition: all .07s ease; /*設置屬性名稱，執行0.07秒，轉場效果為ease*/ width: 10rem; text-align: center; color: white; background: rgba(0,0,0,0.4); text-shadow: 0 0 .5rem black; } .playing { transform: scale(1.1); /* 水平與垂直方向縮小1.1倍 */ border-color: #ffc600; box-shadow: 0 0 1rem #ffc600; /*增加陰影*/ } kbd { display: block; font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; /* 定義所有字母均為大寫，並免因為鍵盤切換大小寫而導致感應失敗 */ letter-spacing: .1rem; /* 文字間距*/ color: #ffc600; } ``` ### 加上音樂放在< audio >的下一行，要用< script >包起來 ```javascript= // 如果屬性名稱改變，就移除正在撥放的狀態 function removeTransition(e) { if (e.propertyName !== 'transform') return; e.target.classList.remove('playing'); } ``` * .querySelector("class") * 一種JS 的CSS 選擇器 * 如果找不到就會回傳null ，不然就回傳第一個符合的元素 * currentTime * 可以使用audio 或是video 標籤 * 可設置時間位置 * keyCode * 取得按下的按鍵的Unicode值 ```javascript= // 撥放音效 function playSound(e) { // 如果有e.keyCode，就取e.keyCode，否則取this.getAttribute('data-key') let keyNo = e.keyCode; //add const audio = document.querySelector(`audio[data-key="${keyNo}"]`); const key = document.querySelector(`div[data-key="${keyNo}"]`); //判斷傳入的e.keyCode是否有對應的audio標籤 if (!audio) return; key.classList.add('playing'); audio.currentTime = 0; //回到音效檔的起點 audio.play(); //撥放音效 } ``` * .querySelectorAll("class名稱") * 取出所有符合class的元素 * Array.from() * 將括號內的物件生成為一個陣列 * forEach() * 將陣列內的每個元素，皆傳入並執行給定的函式一次。 * .addEventListener() * 監聽事件 * 第一個變數放 'keydown' 代表監聽鍵盤 * 第二個變數代表待這第一個變數發生的時候，要執行怎樣的事情 * transitionend * 在CSS完成後觸發 ```javascript= const keys = Array.from(document.querySelectorAll('.key')); // 當狀態改變時，呼叫removeTransition keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 如果鍵盤按下按鍵時，呼叫playsound window.addEventListener('keydown', playSound); // 如果鼠標按下畫面上的按鍵時，呼叫playsound keys.forEach(key => key.addEventListener('click', playSound)); //add ``` 1. 如果有人按下對應的按鍵，則先呼叫removeTransition，確定是放開後又按下，還是一直按著(前者的話移除撥放狀態) 2. 判定鍵盤為按下狀態時，呼叫playSound，並增加播放狀態 3. 判定滑鼠為按下狀態時，呼叫playSound，並增加播放狀態 --- # 備註: * 鍵碼 = ASCII 的大寫對應號碼 * [鍵碼查詢網站](http://keycode.info/) * wav檔案可不可以換成mp4檔案 >>> 可以 * http://www.aigei.com/sound/class/piano_notes_85_mp3/ ![](https://i.imgur.com/GPEOExm.png) * 教他們如何判斷鍵盤按下，滑鼠的放給他們嘗試 * 可以改數字來更換要使用的按鍵 * 可以增加按鍵(自己要先去研究) # 暫時存放只有"A"會響 ```javascript= function playSound(e) { if (e.keyCode !== 65) return; let keyNo = 65; const audio = document.querySelector(`audio[data-key="${keyNo}"]`); const key = document.querySelector(`div[data-key="${keyNo}"]`); if (!audio) return; key.classList.add('playing'); audio.currentTime = 0; audio.play(); } ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.