最近在做一個倉頡輸入法練習軟體，
用 html + css + js 寫的。
我想建立一個物件可以依倉頡輸入法輸出字根。
( cangJieDecode['hapi'] // 輸出 '的' )
可以把倉頡字根對應資料丟在 js 或 html 裡。
js 的話我的程式會超級長......，所以我沒有，
我是認為資料應該和程式分開。
但分開就是丟到 html 裡了......。
一開始是在 for 迴圈裡存取 dom 來建立 cangJie 的屬性。
<tr>
<td alt="hapi">的</td>
<td alt="vfbtv">網</td>
....
</tr>
// 大概是這樣
// for(var i=0; i<tr.length; i++)
// cangJie[td.alt] = td.textContent;
但後來發現瀏覽器要解析會很慢，
就改成存在一個標籤裡，要用再用 javascript 解析。
<pre>
的hapi
網vfbtv
就yfiku
...
</pre>
// var array = pre.textContent.split('\n');
// for(var i=0; i<array.length; i++){
// var s = array[i];
// cangJie[s.substr(1)] = s.charAt(0);
後來我想嵌入 flickr 或其它網站的圖片，
或比較複雜的 html ，像：
<p>
歡迎你進入 <strong>倉頡練習</strong> ！
如果遇到困難可以參見 <a href="help.html">使用說明</a> 。
</p>
如果用 js 創建會很麻煩。
所以我是丟在 html 裡，用 css 讓她不顯示。
需要的時候 clone 或 move 出來。
上面兩項我覺得我的處理方法不錯，不知道各位怎麼想。
最後我想做一個鍵盤的圖。
js 中至少要有方法： keyboard.highLight('a');
// 讓畫面上該字改變顏色或做變化，
// 應該是由改 css class 來達成。
那我應該把 html 寫成：
<div id="keyboard">
<div>手田水口廿卜山戈人心</div>
...
</div>
或是
<div>
<span alt="q">手</span>
<span alt="w">田</span>
...
</div>
如果是第一種方法，我得在 js 裡動態把內容改成第二種，
因為要可以讓每個字個別變化，要每個字都是 html 元素。
或是直接用第二種就好了？
***************
打完全文我覺得好像直接寫成第二種就好了......，
畢竟才 25 個字，解析起來應該不會差太多。
只是到時候我還是要用 js 一個個存取 dom 抓資料。
這是我的程式，我的第一個 js 程式。
可能寫的很爛，也請不吝賜教。
https://gholk.github.io/cjns/exercise.html
另外我還不會用 ajax ，目前也不打算用。
不然把資料存在 json 裡，好像還不錯。
(我讓這個程式可以離線跑。)