[請益] 把資料丟在 html 裡還是用 js 處理？
看板Web_Design作者hijkxyzuw (i,j,k) ×(x,y,z)時間8年前 (2016/08/28 16:41)推噓2(2推 0噓 16→)留言18則, 4人參與討論串1/2 (看更多)
最近在做一個倉頡輸入法練習軟體，
用 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 裡，好像還不錯。
(我讓這個程式可以離線跑。)
--
「只有當你可以直視對方眼睛的時候，對方才也可以直視你的眼睛。」
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.207.237
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1472373693.A.EFA.html
推
08/28 17:02, , 1F
08/28 17:02, 1F
推
08/28 17:33, , 2F
08/28 17:33, 2F
→
08/28 18:40, , 3F
08/28 18:40, 3F
→
08/28 18:42, , 4F
08/28 18:42, 4F
→
08/28 18:43, , 5F
08/28 18:43, 5F
HTML 是 content ，是放有內容的東西，樣式要放到 css 。
並不是看不到的東西就不用放。
HTML 裡當然可以放資料，像 table 就是放資料的元素，
還有 head 裡那一大堆後設資料也都是。
我寫過一個小腳本，從 html 裡抓 head 裡的 metadata ，
做成 footer 放到 html 裡。
※ 編輯: hijkxyzuw (140.116.102.135), 08/29/2016 12:18:58
→
08/29 12:41, , 6F
08/29 12:41, 6F
→
08/29 12:41, , 7F
08/29 12:41, 7F
→
08/29 12:42, , 8F
08/29 12:42, 8F
因為如果沒有對照表，那這個網頁就等於沒有內容了……；
只剩標題和其它被 css 藏起來的東西。
我認為 html 是一個架構，可以存任何東西。
像 xml 可以存資料， html 也可以。
→
08/29 12:42, , 9F
08/29 12:42, 9F
我是考慮到要存成可以離線用，
但一般瀏覽器不給讀本機的 json 檔。
否則就是存成 .js 直接用執行的。
※ 編輯: hijkxyzuw (140.116.102.135), 08/29/2016 14:45:57
→
08/31 02:21, , 10F
08/31 02:21, 10F
→
08/31 02:22, , 11F
08/31 02:22, 11F
→
08/31 02:22, , 12F
08/31 02:22, 12F
→
08/31 02:24, , 13F
08/31 02:24, 13F
→
08/31 02:27, , 14F
08/31 02:27, 14F
我的想法是， js 的意義是操縱 html 裡的內容，
而不是 *主動產生內容* 。
這個網頁內容是所有常用字的倉頡碼，使用者可以讀。
而 js 會隨機抓出一組給使用者，並核對對錯。
我後來覺得不應該做出 *把字根翻成字的功能* ，
應該只要核對該組輸入正不正確就好了。
宣告那麼大的物件不太好，而且那樣的確該用一個獨立的資料檔。
※ 編輯: hijkxyzuw (140.116.102.135), 09/01/2016 22:53:49
→
09/02 10:27, , 15F
09/02 10:27, 15F
→
09/02 10:28, , 16F
09/02 10:28, 16F
→
09/02 10:29, , 17F
09/02 10:29, 17F
→
09/02 10:31, , 18F
09/02 10:31, 18F
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 2 篇)：
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
