來到鐵人賽的最後一篇!
走到現在，人生中如果能學以致用，真的很幸福~雖然心中有過無數將網頁開發結合到自己工作的想法，也有實作出來：

1. 動物狂歡節牌卡：將動物主題與代表樂器做成可以翻的牌卡們
2. 班級分組器：輸入班級人數及一組幾個人，就可以隨機分好組
3. 讀譜練習：按按鈕會有五線譜中央Do到高音Do以隨機的方式出現

但是在小學現場，處於具體運思期的孩子，看到實物的學習效果是比較好且印象比較深的，這也是為什麼老師們總是很用心地在設計實體的教具，實際摸到牌卡比起看到螢幕上的牌卡，那效果真的是天與地的差別。如果可以，我也會盡量想用實體的東西教學。如果說用網頁開發架一個教學網站放置自己的教學歷程，已經有很多開發好的社群或者部落格可以很好的呈現，還能讓自己跟廣大的社群觀眾們互動。

其實很多時候也只是靠著自己的直覺繼續學習網頁開發，對於工作能做什麼、可以做什麼，都沒辦法預先得知。

就在開學前夕，我看到這學期我接了12個班級的音樂課，開始畫座位表時突然想到：

既然我一開始都是固定座號的座位
(每班的1號都是坐同個位子)
何不利用JS動態抽換內容的功能
將12個班級的座位表
用HTML畫好表格後
JS負責抽換每班孩子的姓名就好了呢~

去年的此時我是接了16個班級的音樂課，我畫了16次座位表。這次，我試試看用程式幫我完成這個工作!

HTML碼建構表格結構：

<table border="1">
    <caption>一年甲班</caption>
	<tr>
	    <td data-index='30'>30</td>
	    <td data-index='15'>15</td>
	    <td data-index='25'>25</td>
	    <td data-index='10'>10</td>
	    <td data-index='20'>20</td>
	    <td data-index='5'>5</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='29'>29</td>
	    <td data-index='14'>14</td>
	    <td data-index='24'>24</td>
	    <td data-index='9'>9</td>
	    <td data-index='19'>19</td>
	    <td data-index='4'>4</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='28'>28</td>
	    <td data-index='13'>13</td>
	    <td data-index='23'>23</td>
	    <td data-index='8'>8</td>
	    <td data-index='18'>18</td>
	    <td data-index='3'>3</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='27'>27</td>
	    <td data-index='12'>12</td>
	    <td data-index='22'>22</td>
	    <td data-index='7'>7</td>
	    <td data-index='17'>17</td>
	    <td data-index='2'>2</td>
		    　
	</tr>
		
        <tr>
	    <td data-index='26'>26</td>
	    <td data-index='11'>11</td>
	    <td data-index='21'>21</td>
	    <td data-index='6'>6</td>
	    <td data-index='16'>16</td>
	    <td data-index='1'>1</td>
		    　
	</tr>
</table>

JS碼匯入班級學生姓名並抽換內容：

1. 以字串匯入學生姓名 名字間有空格
2. 將字串分割成擁有班級學生人數的陣列
3. 選出所有td標籤
4. 將td標籤的內容抽換成座號加上學生名字

const str = 'ooo xxx aaa bbb ...'
const arr = str.split(' ',26)
const td = document.querySelectorAll("td");
td.forEach(function (i) {
    i.innerHTML =`<h3>${i.dataset.index}</h3> <h2>${arr[i.dataset.index - 1]
}</h2>`;
});

實際上課一段時間後勢必座位會調整，但一開始最初的固定號碼座位，利用程式碼完成，心裡真的感受到

能學以致用，真好

寫在鐵人賽的最後一篇，謝謝看完我30天的告白，我與網頁開發的故事會繼續下去，相信你們也是:)~