{"id":43002,"student_id":1661,"content":"// \n\n\n\n\u003chtml\u003e\u003chead\u003e\u003ctitle\u003e資料表欄位設計 | 橘蘋學習平台\u003c/title\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" name=\"description\" /\u003e\u003cmeta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\u003e\u003cmeta content=\"width=device-width, initial-scale=1\" name=\"viewport\" /\u003e\u003cmeta content=\"1801378909903067\" property=\"fb:app_id\" /\u003e\u003cmeta content=\"資料表欄位設計 | 橘蘋學習平台\" itemprop=\"name\" /\u003e\u003cmeta content=\"/facebook_og_default_preview.png\" itemprop=\"image\" /\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" itemprop=\"description\" /\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" property=\"og:description\" /\u003e\u003cmeta content=\"資料表欄位設計 | 橘蘋學習平台\" property=\"og:title\" /\u003e\u003cmeta content=\"website\" property=\"og:type\" /\u003e\u003cmeta content=\"https://koding.school/courses/javascript/dt-db/lessons/5/3\" property=\"og:url\" /\u003e\u003cmeta content=\"https://cdn9.koding.school/facebook_og_default_preview.png\" property=\"og:image\" /\u003e\u003cmeta content=\"橘蘋學習平台\" property=\"og:site_name\" /\u003e\u003cmeta content=\"\" property=\"og:video\" /\u003e\u003cmeta content=\"\" property=\"og:video:secure_url\" /\u003e\u003cmeta content=\"video/mp4\" property=\"og:video:type\" /\u003e\u003cmeta content=\"400\" property=\"og:video:width\" /\u003e\u003cmeta content=\"300\" property=\"og:video:height\" /\u003e\u003clink href=\"https://cdn2.koding.school/favicon.ico\" rel=\"shortcut icon\" type=\"image/x-icon\" /\u003e\u003c!--GA Code--\u003e\u003cscript\u003e(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\nga('create', 'UA-99102104-1', 'auto');\nga('send', 'pageview');\u003c/script\u003e\u003c!--Facebook Pixel Code--\u003e\u003cscript\u003e!function (f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function () {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n}(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '841617052639483');\nfbq('track', 'PageView');\u003c/script\u003e\u003cnoscript\u003e\u003cimg height=\"1\" src=\"https://www.facebook.com/tr?id=841617052639483\u0026amp;ev=PageView\u0026amp;noscript=1\" width=\"1\" /\u003e\u003c/noscript\u003e\u003c!--End Facebook Pixel Code--\u003e\u003cmeta name=\"csrf-param\" content=\"authenticity_token\" /\u003e\n\u003cmeta name=\"csrf-token\" content=\"7jutCICiEWfAsFYgxV6dOfZok17yxT5sQqedYcazauMhsJ+6SWtRTQFHeTn1wFNroShWk2+LeH48n9flCCHYiQ==\" /\u003e\u003clink rel=\"stylesheet\" media=\"screen\" href=\"https://cdn9.koding.school/assets/editor-3089e33bf37dae665cae5b7b5ed3279563022b5dd478087da753775e60889e3a.css\" /\u003e\u003cscript\u003e!function (f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function () {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n}(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '841617052639483');\nfbq('track', 'PageView');\u003c/script\u003e\u003cnoscript\u003e\u003cimg height=\"1\" src=\"https://www.facebook.com/tr?id=841617052639483\u0026amp;ev=PageView\u0026amp;noscript=1\" width=\"1\" /\u003e\u003c/noscript\u003e\u003c/head\u003e\u003cbody\u003e\u003ctextarea id=\"projectJsonData\" style=\"display: none;\"\u003e{\u0026quot;id\u0026quot;:131471,\u0026quot;student_id\u0026quot;:1661,\u0026quot;content\u0026quot;:\u0026quot;{\\\u0026quot;html\\\u0026quot;:\\\u0026quot;\\u003c!DOCTYPE html\\u003e\\\\n\\u003chtml\\u003e\\\\n\\u003chead\\u003e\\\\n\\\\t\\u003ctitle\\u003eDocument\\u003c/title\\u003e\\\\n\\\\t\\u003cscript src=\\\\\\\u0026quot;https://code.jquery.com/jquery-3.4.1.min.js\\\\\\\u0026quot;\\u003e\\u003c/script\\u003e\\\\n\\u003c/head\\u003e\\\\n\\u003cbody\\u003e\\\\n \\u003cdiv\\u003e\\\\n \\u003cselect id=\\\\\\\u0026quot;type\\\\\\\u0026quot;\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;食物\\\\\\\u0026quot;\\u003e 🍖 食物 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;衣服\\\\\\\u0026quot;\\u003e 👕 衣服 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;生活\\\\\\\u0026quot;\\u003e 🏠 生活 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;交通\\\\\\\u0026quot;\\u003e 🚌 交通 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;學習\\\\\\\u0026quot;\\u003e 📖 學習 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;娛樂\\\\\\\u0026quot;\\u003e 🎮 娛樂 \\u003c/option\\u003e\\\\n \\u003c/select\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;date\\\\\\\u0026quot; id=\\\\\\\u0026quot;date\\\\\\\u0026quot;\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;number\\\\\\\u0026quot; id=\\\\\\\u0026quot;cost\\\\\\\u0026quot; placeholder=\\\\\\\u0026quot;價格\\\\\\\u0026quot;\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;text\\\\\\\u0026quot; id=\\\\\\\u0026quot;note\\\\\\\u0026quot; placeholder=\\\\\\\u0026quot;註記\\\\\\\u0026quot;\\u003e\\\\n \\u003cbutton id=\\\\\\\u0026quot;create\\\\\\\u0026quot;\\u003e新增\\u003c/button\\u003e\\\\n \\u003c/div\\u003e\\\\n \\\\n \\u003c!-- 總和 --\\u003e\\\\n \\u003ch1\\u003e\\\\n 總和 \\u003cspan id=\\\\\\\u0026quot;sum\\\\\\\u0026quot;\\u003e325\\u003c/span\\u003e 元\\\\n \\u003c/h1\\u003e\\\\n \\\\n \\u003c!-- 分類 --\\u003e\\\\n \\u003cdiv\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;食物\\\\\\\u0026quot;\\u003e 🍖 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;衣服\\\\\\\u0026quot;\\u003e 👕 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;生活\\\\\\\u0026quot;\\u003e 🏠 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;交通\\\\\\\u0026quot;\\u003e 🚌 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;學習\\\\\\\u0026quot;\\u003e 📖 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;娛樂\\\\\\\u0026quot;\\u003e 🎮 \\u003c/span\\u003e\\\\n \\u003c/div\\u003e\\\\n \\\\n \\u003c!-- 表格 --\\u003e\\\\n \\u003ctable\\u003e\\\\n \\u003cthead\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003cth\\u003e圖示\\u003c/th\\u003e\\\\n \\u003cth\\u003e種類\\u003c/th\\u003e\\\\n \\u003cth\\u003e日期\\u003c/th\\u003e\\\\n \\u003cth\\u003e花費\\u003c/th\\u003e\\\\n \\u003cth\\u003e註記\\u003c/th\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003c/thead\\u003e\\\\n \\u003ctbody\\u003e\\\\n \\u003c!-- 用來複製使用的範例資料，完成專案後即可移除 --\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e65元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e早餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🚌\\u003c/td\\u003e\\\\n \\u003ctd\\u003e交通\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e20元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e捷運\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e80元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e午餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e110元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e晚餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🏠\\u003c/td\\u003e\\\\n \\u003ctd\\u003e生活\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e50元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e文具\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003c/tbody\\u003e\\\\n \\u003c/table\\u003e\\\\n\\u003c/body\\u003e\\\\n\\u003c/html\\u003e\\\u0026quot;,\\\u0026quot;css\\\u0026quot;:\\\u0026quot;body {\\\\n padding: 30px;\\\\n color: #ddd;\\\\n background-color: rgb(22, 28, 37);\\\\n text-align: center;\\\\n}\\\\n\\\\nbutton, select, input {\\\\n display: block;\\\\n outline: none;\\\\n width: 100%;\\\\n height: 40px;\\\\n padding: 5px 10px;\\\\n margin-top: 10px;\\\\n border-radius: 5px;\\\\n border: 1px solid #555;\\\\n color: #ddd;\\\\n background-color: rgba(0, 0, 0, 0);\\\\n font-size: 1rem;\\\\n box-sizing: border-box;\\\\n}\\\\n\\\\n.icon {\\\\n display: inline-block;\\\\n width: 45px;\\\\n height: 45px;\\\\n line-height: 45px;\\\\n font-size: 1.5rem;\\\\n border-radius: 50%;\\\\n border: 1px solid #555;\\\\n margin: 0px 5px;\\\\n cursor: pointer;\\\\n}\\\\n\\\\ntable {\\\\n font-size: 0.9rem;\\\\n border-collapse: collapse;\\\\n width: 100%;\\\\n margin-top: 15px;\\\\n background-color: rgb(22, 28, 37);\\\\n}\\\\nth, tr {\\\\n padding: 15px;\\\\n border-bottom: 1px solid #3555;\\\\n}\\\\ntr td:nth-child(1) {\\\\n font-size: 1.8rem;\\\\n}\\\\n\\\\n#sum {\\\\n color: rgb(52, 235, 161);\\\\n}\\\\nbutton:active, select:focus, input:focus, .icon:hover {\\\\n color: rgb(52, 235, 161);\\\\n border-color: rgb(52, 235, 161);\\\\n}\\\\n\\\\n\\\u0026quot;,\\\u0026quot;js\\\u0026quot;:\\\u0026quot;var account = DB.table(\u0026#39;account\u0026#39;);\\\\n\\\\n$(\u0026#39;#create\u0026#39;).click(create); // 點擊「新增」新增一筆資料\\\\n$(\u0026#39;.filter\u0026#39;).click(filter); // 點擊「圖示」篩選所有資料\\\\n\\\\n// 專案一開始執行，預設查詢所有資料並更新至表格\\\\naccount.read({}, updateTable);\\\\n\\\\n\\\\n// 新增一筆記帳紀錄到資料表並更新畫面\\\\nfunction create () {\\\\n\\\\n}\\\\n\\\\n// 將查詢的記帳紀錄 data 更新至畫面上\\\\nfunction updateTable (data) {\\\\n $(\u0026#39;tbody\u0026#39;).empty();\\\\n \\\\n var row = `\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e65元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e早餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n `\\\\n $(\u0026#39;tbody\u0026#39;).append(row); \\\\n}\\\\n\\\\n// 將類型的字串轉換成 emoji 符號\\\\nfunction typeToEmoji (type) {\\\\n\\\\n}\\\\n\\\\n// 依據類型查詢所有資料並更新至表格\\\\nfunction filter () {\\\\n\\\\n}\\\u0026quot;}\u0026quot;,\u0026quot;created_at\u0026quot;:\u0026quot;2020-03-08T13:35:25.560+08:00\u0026quot;,\u0026quot;updated_at\u0026quot;:\u0026quot;2020-03-08T13:35:25.560+08:00\u0026quot;,\u0026quot;name\u0026quot;:\u0026quot;記帳達人 - 完整版 副本 副本\u0026quot;,\u0026quot;language\u0026quot;:\u0026quot;web\u0026quot;,\u0026quot;screenshot\u0026quot;:{\u0026quot;url\u0026quot;:null},\u0026quot;parent_id\u0026quot;:116348,\u0026quot;plugin\u0026quot;:\u0026quot;\u0026quot;,\u0026quot;description\u0026quot;:null,\u0026quot;note\u0026quot;:null,\u0026quot;status\u0026quot;:\u0026quot;public\u0026quot;,\u0026quot;like_student_ids\u0026quot;:[],\u0026quot;is_featured\u0026quot;:false,\u0026quot;views\u0026quot;:0,\u0026quot;hashid\u0026quot;:\u0026quot;4y3sy3z5\u0026quot;,\u0026quot;is_content_changed\u0026quot;:false,\u0026quot;review_status\u0026quot;:\u0026quot;unsubmitted\u0026quot;,\u0026quot;submitted_at\u0026quot;:null,\u0026quot;reviewed_at\u0026quot;:null,\u0026quot;advise\u0026quot;:null,\u0026quot;is_deleted\u0026quot;:false}\u003c/textarea\u003e\u003ctextarea id=\"projectJsonAssets\" style=\"display: none;\"\u003e[]\u003c/textarea\u003e\u003cscript\u003efunction htmlDecode (input) {\n var doc = new DOMParser().parseFromString(input, \"text/html\");\n return doc.documentElement.textContent;\n}\nvar PROJECT = JSON.parse(htmlDecode(projectJsonData.innerHTML));\nvar PROJECT_ASSETS = JSON.parse(htmlDecode(projectJsonAssets.innerHTML));\nvar SANDBOX_URL = 'https://sb.koding.school/projects/4y3sy3z5/js_inject';\nvar PROJECT_ASSET_NAMES = [];\u003c/script\u003e\u003cscript\u003eLOCALES = {\n main_script: \"程式碼\",\n plugin: \"擴充\",\n asset: \"素材\",\n backdrop: \"遊戲場景\",\n console: \"主控台\",\n screenshot: \"截取圖片\",\n preview: \"預覽\",\n filename: \"檔案名稱\",\n control: \"操作\",\n rename: \"重新命名\",\n insert_script: \"插入程式...\",\n run: \"執行\",\n stop: \"暫停\",\n clear: \"清除\",\n upload_image: \"圖片上傳\",\n format_document: \"格式化\"\n};\u003c/script\u003e\u003cscript\u003evar MODE;\nvar PROJECT_ID;\nvar PROJECT_NAME;\nvar IS_MY_PROJECT;\nvar CODE_LANGUAGE;\nvar SANDBOX_URL;\nvar HAS_PROJECT;\nvar SHOW_PLUGIN;\nvar NEXT_SECTION_URL;\nvar RESOURCE_TYPE;\nvar NEDD_EXAMINE;\nvar ANSWER_SCRIPT;\nvar FORM_POST_URL;\u003c/script\u003e\u003cscript\u003eHAS_PROJECT = true;\nPROJECT_ID = '4y3sy3z5';\nPROJECT_NAME = '記帳達人 - 完整版 副本 副本';\nIS_MY_PROJECT = true;\nCODE_LANGUAGE = 'web';\nSHOW_PLUGIN = false;\u003c/script\u003e\u003cscript\u003eSANDBOX_URL = 'https://sb.koding.school/projects/4y3sy3z5/web_inject';\u003c/script\u003e\u003cscript\u003eMODE = 'course';\nNEXT_SECTION_URL = \"/courses/javascript/dt-db/lessons/5/3/next\";\nRESOURCE_TYPE = \"vimeo\";\nNEDD_EXAMINE = \"false\";\nANSWER_SCRIPT = ``;\nIS_COMPLETED = false;\nCOURSE_SLUG = \"dt-db\";\nLESSON_ID = 889;\nLESSON_ORDER = 5;\nSECTION_ORDER = 3;\nPROBLEMS = [];\nSTUDENT_ID = 1661;\u003c/script\u003e\u003cdiv id=\"container\"\u003e\u003cdiv class=\"section-header\"\u003e\u003cspan class=\"nav-item px-2 js-section-list bg-black-1\" style=\"border-bottom: 1px solid #888\"\u003e\u003ci class=\"fa fa-bars\"\u003e\u0026nbsp;\u003c/i\u003e課程列表\u003c/span\u003e\u003cspan class=\"nav-item lesson-title js-section-list\"\u003e\u003ci class=\"fa fa-angle-right\"\u003e\u003c/i\u003e記帳軟體\u003cdiv class=\"mask\"\u003e\u003c/div\u003e\u003c/span\u003e\u003cspan class=\"nav-item lesson-title js-section-list\"\u003e\u003ci class=\"fa fa-angle-right\"\u003e\u003c/i\u003e資料表欄位設計\u003cdiv class=\"mask\"\u003e\u003c/div\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-tutorial\"\u003e\u003cspan class=\"tab-outline bg-black-1 active\"\u003e學習\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-editor\"\u003e\u003cspan class=\"tab-outline bg-black-1\"\u003e練習\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-topics\"\u003e\u003cspan class=\"tab-outline bg-black-1 js-need-help\"\u003e我有問題\u003c/span\u003e\u003c/span\u003e\u003ca href=\"/courses/javascript/dt-db\"\u003e\u003cspan class=\"nav-item nav-btn float-right\"\u003e\u003ci class=\"fa fa-sign-out\"\u003e\u003c/i\u003e\u003cbr /\u003e返回課程\u003c/span\u003e\u003c/a\u003e\u003ca class=\"nav-item nav-btn float-right bg-black-1 js-next-section\" href=\"/courses/javascript/dt-db/lessons/5/3/next\"\u003e\u003ci class=\"fa fa-forward\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e下一章\u003c/span\u003e\u003c/a\u003e\u003cstyle type=\"text/css\"\u003e.dropdown-toggle::after {\n display: none;\n}\u003c/style\u003e\u003cspan class=\"dropdown\"\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 dropdown-toggle\" data-toggle=\"dropdown\"\u003e\u003ci class=\"fa fa-columns\"\u003e\u003c/i\u003e\u003cbr /\u003e\u0026nbsp;版型\u003cdiv class=\"dropdown-menu dropdown-menu-right\" data-toggle=\"dropdown\"\u003e\u003cspan class=\"dropdown-item js-layout-1-1-1\"\u003e1:1:1\u003c/span\u003e\u003cspan class=\"dropdown-item js-layout-1-1\"\u003e1:1\u003c/span\u003e\u003cspan class=\"dropdown-item js-layout-1\"\u003e全寬\u003c/span\u003e\u003c/div\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 js-save-project js-save-btn\"\u003e\u003ci class=\"fa fa-floppy-o\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e儲存\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 js-open-web-fullscreen\"\u003e\u003ci class=\"fa fa-floppy-o\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e前往網站頁面\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv id=\"main\"\u003e\u003cdiv class=\"tutorial-body js-img-larger\" style=\"height: 100%; z-index: 100; position: relative;\"\u003e\u003cdiv class=\"page\" id=\"resource-bar-container\" style=\"position: absolute;\"\u003e\u003c/div\u003e\u003cdiv class=\"page resource\" style=\"height: 100%;\"\u003e\u003cdiv class=\"page-iframe\"\u003e\u003ciframe allowfullscreen=\"\" class=\"js-vimeo-iframe\" frameborder=\"0\" mozallowfullscreen=\"\" scrolling=\"no\" src=\"https://player.vimeo.com/video/382523587\" style=\"overflow: hidden;\" webkitallowfullscreen=\"\" width=\"100%\"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript\u003efunction renew_action(action) {\n data = {section: { action: action, admission_id: '31450'}}\n $.ajax({\n type: 'POST',\n url: '/sections/renew_action',\n data: data,\n success: {status: 'ok'},\n dataType: 'json'\n });\n}\u003c/script\u003e\u003cdiv class=\"course-topcis p-5 topics\" id=\"app\" style=\"background-color: #eee; width: 100%; height: 100%; overflow: scroll; position: absolute; top: 0;\"\u003e\u003ch3 class=\"text-center\"\u003e老師我有問題！\u003c/h3\u003e\u003cscript\u003eDEFAULT_AVATAR = \"https://cdn1.koding.school/assets/resume/avator-c1bf83f40b17d0c94c261e3599f205845d72093590d9681619b9e53460c9d47e.jpg\";\u003c/script\u003e\u003cdiv class=\"ks-container js-topics\"\u003e\u003cdiv v-show=\"!showComments\"\u003e\u003cdiv class=\"pt-3 d-flex\" v-if=\"!isFormShow\"\u003e\u003cdiv style=\"width: 150px;\"\u003e\u003cbutton @click=\"toggleForm\" class=\"ks-orange ks-btn ks-btn-orange ks-btn-lg cursor-pointer\"\u003e新增主題\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"search-box d-inline-block px-4 ml-4\"\u003e\u003cinput placeholder=\"搜尋\" v-model=\"search\"\u003e\u003ci class=\"fa fa-search\"\u003e\u003c/i\u003e\u003c/input\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"my-3\" v-show=\"isFormShow\"\u003e\u003cinput class=\"form-control\" placeholder=\"問題標題\" v-model=\"topicName\" /\u003e\u003cdiv class=\"js-trumbowyg\" id=\"topicForm\" style=\"background-color: #fff;\"\u003e\u003c/div\u003e\u003cbutton @click=\"cancel\" class=\"ks-btn ks-btn-red ks-btn-lg\"\u003e取消\u003c/button\u003e\u003cbutton :disabled=\"topicName.trim() == \u0026#39;\u0026#39; || topicFormIsEmpty\" @click=\"submit\" class=\"ks-btn ks-btn-red ks-btn-lg ml-2\"\u003e送出\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"pt-5\"\u003e\u003cul class=\"ks-list\"\u003e\u003ca @click=\"showComment(idx)\" class=\"ks-link\" href=\"#\" v-for=\"(topic, idx) in filteredList\"\u003e\u003cli class=\"ks-list-item\"\u003e\u003cdiv class=\"pt-2 px-3\"\u003e\u003cstrong class=\"h5 ks-orange\"\u003e{{topic.title}}\u003c/strong\u003e\u003c/div\u003e\u003cdiv class=\"py-2 px-3 ks-gray\"\u003e\u003csmall\u003e{{topic.student_name}}發問\u003c/small\u003e\u003csmall class=\"px-2 float-right\"\u003e{{topic.post_count}}則回覆\u003c/small\u003e\u003csmall class=\"px-2 float-right\" v-if=\"topic.last_reply_date\"\u003e{{passTime(topic.last_reply_date)}}前更新\u003c/small\u003e\u003c/div\u003e\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv v-show=\"showComments\"\u003e\u003cdiv class=\"pt-3\"\u003e\u003cbutton @click=\"showComments = false\" class=\"ks-btn ks-btn-red ks-btn-lg\"\u003e返回主題列表\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"mt-4 p-3\" style=\"background-color: #fff;\"\u003e\u003ch1 class=\"h3 ks-orange\"\u003e{{currentTopic.title}}\u003c/h1\u003e\u003cspan\u003e\u003csmall class=\"px-2\"\u003e{{currentTopic.student_name}}\u003c/small\u003e\u003csmall class=\"px-2 float-right\"\u003e{{passTime(currentTopic.last_reply_date)}}前發布\u003c/small\u003e\u003c/span\u003e\u003cdiv class=\"py-3\" v-html=\"currentTopic.content\"\u003e\u003c/div\u003e\u003chr /\u003e\u003cdiv class=\"ks-comments\"\u003e\u003cdiv class=\"ks-comment\" v-for=\"comment in comments\"\u003e\u003cdiv :style=\"{backgroundImage: \u0026#39;url(\u0026#39; + avatar(comment.student_avatar.url) + \u0026#39;)\u0026#39;}\" class=\"avatar\"\u003e\u003c/div\u003e\u003cdiv class=\"comment-body\"\u003e\u003cdiv class=\"title\"\u003e\u003cstrong class=\"ks-orange\"\u003e{{comment.studentName}}\u003c/strong\u003e\u003csmall class=\"pl-2\"\u003e{{passTime(comment.created_at)}}前更新\u003c/small\u003e\u003c/div\u003e\u003cdiv class=\"content\" v-html=\"comment.content\"\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"ks-comment\"\u003e\u003cdiv class=\"avatar\" style=\"background-image: url(https://cdn8.koding.school/uploads/student/avatar/1661/20190422-006.jpg)\"\u003e\u003c/div\u003e\u003cdiv class=\"comment-body\"\u003e\u003cdiv class=\"js-trumbowyg\" id=\"postForm\" style=\"background-color: #fff;\"\u003e\u003c/div\u003e\u003cbutton :disabled=\"postFormIsEmpty\" @click=\"submitPost\" class=\"ks-btn ks-btn-red ks-btn-lg ml-2\"\u003e留言\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003ciframe class=\"editor js-editor\" data-src=\"/projects/4y3sy3z5/editor\" style=\"width: 100%; height: 100%; border-width: 0px; position: absolute; top: 0; left: 0;\"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"section-list\"\u003e\u003cdiv class=\"section-hide js-lesson-hide\"\u003e\u003c/div\u003e\u003cdiv class=\"section-content hide-scrollbar\"\u003e\u003cdiv class=\"hide-scrollbar-content pt-3\"\u003e\u003ch3\u003e\u003ci aria-hidden=\"true\" class=\"fa fa-times js-lesson-hide\"\u003e\u003c/i\u003e\u0026nbsp;課程列表\u003c/h3\u003e\u003col class=\"mb-5\"\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-0\" data-toggle=\"collapse\"\u003e1. 寶可夢百科(1)\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-0\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 認識資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案介紹與說明\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 多筆資料儲存的方式\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 物件、屬性、方法\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 印出陣列中第一筆物件\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 透過程式印出假資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 認識「字串模板」\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 印出陣列中所有的資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 陣列的「方法」應用\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 發現問題\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-1\" data-toggle=\"collapse\"\u003e2. 寶可夢百科(2)\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-1\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案介紹與說明\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料庫四大操作 C、R、U、D\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 讀取資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將資料更新至網頁表格\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 篩選資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料的顯示方式\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除資料\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-2\" data-toggle=\"collapse\"\u003e3. 代辦事項\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-2\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹＆試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹介面\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增一筆事項到資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介面新增一筆假資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將所有事項更新到畫面上\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除全部事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 動態事件綁定\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除指定事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 修改事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 避免相同名稱被移除\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-3\" data-toggle=\"collapse\"\u003e4. 老師小幫手\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-3\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹＆試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 程式架構\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 輸入姓名與成績\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增成績至資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 顯示所有資料到列表_講解\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 顯示所有資料到列表_解答\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 用另外一種語法改寫迴圈\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 刪除成績_講解\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 刪除成績_實作\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 排序成績\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/12\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 反轉排序\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-4\" data-toggle=\"collapse\"\u003e5. 記帳軟體\u003c/div\u003e\u003col class=\"mt-2 collapse show\" id=\"lesson-4\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹\u0026amp;試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案架構(1)\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli class=\"focus\"\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料表欄位設計\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 取得輸入值\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增資料到資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料驗證\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將所有資料印上表格\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 計算總和並顯示在畫面上\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將 type 轉為 emoji\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 篩選資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 重點整理\u0026amp;挑戰題\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-5\" data-toggle=\"collapse\"\u003e6. 線上問卷\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-5\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹與學習重點\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設的程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;填寫問卷並送出\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;前後台切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增資料\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;重設表單內容\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新後台表格\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;後台的統計資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;挑戰題\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-6\" data-toggle=\"collapse\"\u003e7. 我是知識王\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-6\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹 與 學習重點\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設程式碼介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲開始\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示題目\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;送出答案\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;下一題\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲結束\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示排行榜\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;禁止點擊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-7\" data-toggle=\"collapse\"\u003e8. 手指百米衝刺大賽\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-7\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設的程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;按鍵事件\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;走路動畫\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;印出步數\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;狀態機\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲結束\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;計算遊戲時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;將成績新增至資料表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示排行榜\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-8\" data-toggle=\"collapse\"\u003e9. 購物大平台(1)\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-8\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設程式碼介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;分頁切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;購買商品\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;送出訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;資料驗證\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示訂單資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;重點整理\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-9\" data-toggle=\"collapse\"\u003e10. 購物大平台(2)\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-9\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹 \u0026amp; 回顧上週課程\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;查詢訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;查無訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;電商後台管理員\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;後台訂單列表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新指定的訂單狀態\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;訂單取消\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;出貨前才能取消訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-10\" data-toggle=\"collapse\"\u003e11. 社群網站（1）\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-10\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹預設程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;頁面切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增文章到資料表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;資料驗證\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;將資料更新到文章列表上\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;篩選指定類型的文章\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;底部的文字提示\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;課程回顧\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-11\" data-toggle=\"collapse\"\u003e12. 社群網站（2）\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-11\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;取得文章的ID\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新文章頁面\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增留言\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新留言列表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;字串切割\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;幫類型標籤上色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;檢視文章的類別標籤上色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;公布上章解答 \u0026amp; 總結\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-12\" data-toggle=\"collapse\"\u003e13. 多人聊天室\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-12\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲試玩\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增訊息「加入聊天室」\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;時間格式\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;分配隨機顏色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;Enter 送出留言\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;使用 Socket 傳遞訊息\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;一次傳遞更多資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;捲動對話框\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;回顧總結\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv aria-hidden=\"true\" class=\"modal fade\" id=\"exportAPKModal\" role=\"dialog\" tabindex=\"-1\"\u003e\u003cdiv class=\"modal-dialog\" role=\"document\" style=\"max-width: 400px\"\u003e\u003cdiv class=\"modal-content\"\u003e\u003cdiv class=\"modal-body\" style=\"text-align: center;\"\u003e\u003cp style=\"font-size: 16px\"\u003e用手機掃描下方 QRCode 進行安裝\u003c/p\u003e\u003cdiv\u003e\u003cimg src=\"https://chart.apis.google.com/chart?cht=qr\u0026amp;chld=L|0\u0026amp;chl=https%3A%2F%2Fkoding.school%2Fprojects%2F4y3sy3z5%2Fexport.apk\u0026amp;chs=240x240\" /\u003e\u003c/div\u003e\u003cp style=\"font-size: 12px; color: #999;\"\u003e或您也可以\n\u003ca id=\"export-apk-link\" style=\"cursor: pointer; color: #999; text-decoration: underline;\" target=\"_blank\"\u003e下載 APK\u003c/a\u003e\n到這台電腦\n\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"modal-footer\"\u003e\u003cbutton class=\"btn\" data-dismiss=\"modal\" style=\"color: #333; width: 70px; background-color: #fff; border: 1px solid; border-color: #ccc;\" type=\"button\"\u003e關閉\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript src=\"https://cdn6.koding.school/assets/sections-ac05abeca134a2ec8254e9ed390915da625eb14f11ec15f45676baa94a34c76d.js\"\u003e\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e\n\u003c!DOCTYPE html\u003e\u003chtml\u003e\u003chead\u003e\u003ctitle\u003e資料表欄位設計 | 橘蘋學習平台\u003c/title\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" name=\"description\" /\u003e\u003cmeta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\u003e\u003cmeta content=\"width=device-width, initial-scale=1\" name=\"viewport\" /\u003e\u003cmeta content=\"1801378909903067\" property=\"fb:app_id\" /\u003e\u003cmeta content=\"資料表欄位設計 | 橘蘋學習平台\" itemprop=\"name\" /\u003e\u003cmeta content=\"/facebook_og_default_preview.png\" itemprop=\"image\" /\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" itemprop=\"description\" /\u003e\u003cmeta content=\"線上學會 MIT Scratch, JavaScript, micro:bit, Ozobot! 全球第一個華文兒童程式學習平台!\" property=\"og:description\" /\u003e\u003cmeta content=\"資料表欄位設計 | 橘蘋學習平台\" property=\"og:title\" /\u003e\u003cmeta content=\"website\" property=\"og:type\" /\u003e\u003cmeta content=\"https://koding.school/courses/javascript/dt-db/lessons/5/3\" property=\"og:url\" /\u003e\u003cmeta content=\"https://cdn9.koding.school/facebook_og_default_preview.png\" property=\"og:image\" /\u003e\u003cmeta content=\"橘蘋學習平台\" property=\"og:site_name\" /\u003e\u003cmeta content=\"\" property=\"og:video\" /\u003e\u003cmeta content=\"\" property=\"og:video:secure_url\" /\u003e\u003cmeta content=\"video/mp4\" property=\"og:video:type\" /\u003e\u003cmeta content=\"400\" property=\"og:video:width\" /\u003e\u003cmeta content=\"300\" property=\"og:video:height\" /\u003e\u003clink href=\"https://cdn2.koding.school/favicon.ico\" rel=\"shortcut icon\" type=\"image/x-icon\" /\u003e\u003c!--GA Code--\u003e\u003cscript\u003e(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\nga('create', 'UA-99102104-1', 'auto');\nga('send', 'pageview');\u003c/script\u003e\u003c!--Facebook Pixel Code--\u003e\u003cscript\u003e!function (f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function () {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n}(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '841617052639483');\nfbq('track', 'PageView');\u003c/script\u003e\u003cnoscript\u003e\u003cimg height=\"1\" src=\"https://www.facebook.com/tr?id=841617052639483\u0026amp;ev=PageView\u0026amp;noscript=1\" width=\"1\" /\u003e\u003c/noscript\u003e\u003c!--End Facebook Pixel Code--\u003e\u003cmeta name=\"csrf-param\" content=\"authenticity_token\" /\u003e\n\u003cmeta name=\"csrf-token\" content=\"7jutCICiEWfAsFYgxV6dOfZok17yxT5sQqedYcazauMhsJ+6SWtRTQFHeTn1wFNroShWk2+LeH48n9flCCHYiQ==\" /\u003e\u003clink rel=\"stylesheet\" media=\"screen\" href=\"https://cdn9.koding.school/assets/editor-3089e33bf37dae665cae5b7b5ed3279563022b5dd478087da753775e60889e3a.css\" /\u003e\u003cscript\u003e!function (f, b, e, v, n, t, s) {\n if (f.fbq) return;\n n = f.fbq = function () {\n n.callMethod ?\n n.callMethod.apply(n, arguments) : n.queue.push(arguments)\n };\n if (!f._fbq) f._fbq = n;\n n.push = n;\n n.loaded = !0;\n n.version = '2.0';\n n.queue = [];\n t = b.createElement(e);\n t.async = !0;\n t.src = v;\n s = b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t, s)\n}(window, document, 'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '841617052639483');\nfbq('track', 'PageView');\u003c/script\u003e\u003cnoscript\u003e\u003cimg height=\"1\" src=\"https://www.facebook.com/tr?id=841617052639483\u0026amp;ev=PageView\u0026amp;noscript=1\" width=\"1\" /\u003e\u003c/noscript\u003e\u003c/head\u003e\u003cbody\u003e\u003ctextarea id=\"projectJsonData\" style=\"display: none;\"\u003e{\u0026quot;id\u0026quot;:131471,\u0026quot;student_id\u0026quot;:1661,\u0026quot;content\u0026quot;:\u0026quot;{\\\u0026quot;html\\\u0026quot;:\\\u0026quot;\\u003c!DOCTYPE html\\u003e\\\\n\\u003chtml\\u003e\\\\n\\u003chead\\u003e\\\\n\\\\t\\u003ctitle\\u003eDocument\\u003c/title\\u003e\\\\n\\\\t\\u003cscript src=\\\\\\\u0026quot;https://code.jquery.com/jquery-3.4.1.min.js\\\\\\\u0026quot;\\u003e\\u003c/script\\u003e\\\\n\\u003c/head\\u003e\\\\n\\u003cbody\\u003e\\\\n \\u003cdiv\\u003e\\\\n \\u003cselect id=\\\\\\\u0026quot;type\\\\\\\u0026quot;\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;食物\\\\\\\u0026quot;\\u003e 🍖 食物 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;衣服\\\\\\\u0026quot;\\u003e 👕 衣服 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;生活\\\\\\\u0026quot;\\u003e 🏠 生活 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;交通\\\\\\\u0026quot;\\u003e 🚌 交通 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;學習\\\\\\\u0026quot;\\u003e 📖 學習 \\u003c/option\\u003e\\\\n \\u003coption value=\\\\\\\u0026quot;娛樂\\\\\\\u0026quot;\\u003e 🎮 娛樂 \\u003c/option\\u003e\\\\n \\u003c/select\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;date\\\\\\\u0026quot; id=\\\\\\\u0026quot;date\\\\\\\u0026quot;\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;number\\\\\\\u0026quot; id=\\\\\\\u0026quot;cost\\\\\\\u0026quot; placeholder=\\\\\\\u0026quot;價格\\\\\\\u0026quot;\\u003e\\\\n \\u003cinput type=\\\\\\\u0026quot;text\\\\\\\u0026quot; id=\\\\\\\u0026quot;note\\\\\\\u0026quot; placeholder=\\\\\\\u0026quot;註記\\\\\\\u0026quot;\\u003e\\\\n \\u003cbutton id=\\\\\\\u0026quot;create\\\\\\\u0026quot;\\u003e新增\\u003c/button\\u003e\\\\n \\u003c/div\\u003e\\\\n \\\\n \\u003c!-- 總和 --\\u003e\\\\n \\u003ch1\\u003e\\\\n 總和 \\u003cspan id=\\\\\\\u0026quot;sum\\\\\\\u0026quot;\\u003e325\\u003c/span\\u003e 元\\\\n \\u003c/h1\\u003e\\\\n \\\\n \\u003c!-- 分類 --\\u003e\\\\n \\u003cdiv\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;食物\\\\\\\u0026quot;\\u003e 🍖 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;衣服\\\\\\\u0026quot;\\u003e 👕 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;生活\\\\\\\u0026quot;\\u003e 🏠 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;交通\\\\\\\u0026quot;\\u003e 🚌 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;學習\\\\\\\u0026quot;\\u003e 📖 \\u003c/span\\u003e\\\\n \\u003cspan class=\\\\\\\u0026quot;icon filter\\\\\\\u0026quot; data-type=\\\\\\\u0026quot;娛樂\\\\\\\u0026quot;\\u003e 🎮 \\u003c/span\\u003e\\\\n \\u003c/div\\u003e\\\\n \\\\n \\u003c!-- 表格 --\\u003e\\\\n \\u003ctable\\u003e\\\\n \\u003cthead\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003cth\\u003e圖示\\u003c/th\\u003e\\\\n \\u003cth\\u003e種類\\u003c/th\\u003e\\\\n \\u003cth\\u003e日期\\u003c/th\\u003e\\\\n \\u003cth\\u003e花費\\u003c/th\\u003e\\\\n \\u003cth\\u003e註記\\u003c/th\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003c/thead\\u003e\\\\n \\u003ctbody\\u003e\\\\n \\u003c!-- 用來複製使用的範例資料，完成專案後即可移除 --\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e65元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e早餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🚌\\u003c/td\\u003e\\\\n \\u003ctd\\u003e交通\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e20元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e捷運\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e80元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e午餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e110元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e晚餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🏠\\u003c/td\\u003e\\\\n \\u003ctd\\u003e生活\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e50元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e文具\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n \\u003c/tbody\\u003e\\\\n \\u003c/table\\u003e\\\\n\\u003c/body\\u003e\\\\n\\u003c/html\\u003e\\\u0026quot;,\\\u0026quot;css\\\u0026quot;:\\\u0026quot;body {\\\\n padding: 30px;\\\\n color: #ddd;\\\\n background-color: rgb(22, 28, 37);\\\\n text-align: center;\\\\n}\\\\n\\\\nbutton, select, input {\\\\n display: block;\\\\n outline: none;\\\\n width: 100%;\\\\n height: 40px;\\\\n padding: 5px 10px;\\\\n margin-top: 10px;\\\\n border-radius: 5px;\\\\n border: 1px solid #555;\\\\n color: #ddd;\\\\n background-color: rgba(0, 0, 0, 0);\\\\n font-size: 1rem;\\\\n box-sizing: border-box;\\\\n}\\\\n\\\\n.icon {\\\\n display: inline-block;\\\\n width: 45px;\\\\n height: 45px;\\\\n line-height: 45px;\\\\n font-size: 1.5rem;\\\\n border-radius: 50%;\\\\n border: 1px solid #555;\\\\n margin: 0px 5px;\\\\n cursor: pointer;\\\\n}\\\\n\\\\ntable {\\\\n font-size: 0.9rem;\\\\n border-collapse: collapse;\\\\n width: 100%;\\\\n margin-top: 15px;\\\\n background-color: rgb(22, 28, 37);\\\\n}\\\\nth, tr {\\\\n padding: 15px;\\\\n border-bottom: 1px solid #3555;\\\\n}\\\\ntr td:nth-child(1) {\\\\n font-size: 1.8rem;\\\\n}\\\\n\\\\n#sum {\\\\n color: rgb(52, 235, 161);\\\\n}\\\\nbutton:active, select:focus, input:focus, .icon:hover {\\\\n color: rgb(52, 235, 161);\\\\n border-color: rgb(52, 235, 161);\\\\n}\\\\n\\\\n\\\u0026quot;,\\\u0026quot;js\\\u0026quot;:\\\u0026quot;var account = DB.table(\u0026#39;account\u0026#39;);\\\\n\\\\n$(\u0026#39;#create\u0026#39;).click(create); // 點擊「新增」新增一筆資料\\\\n$(\u0026#39;.filter\u0026#39;).click(filter); // 點擊「圖示」篩選所有資料\\\\n\\\\n// 專案一開始執行，預設查詢所有資料並更新至表格\\\\naccount.read({}, updateTable);\\\\n\\\\n\\\\n// 新增一筆記帳紀錄到資料表並更新畫面\\\\nfunction create () {\\\\n\\\\n}\\\\n\\\\n// 將查詢的記帳紀錄 data 更新至畫面上\\\\nfunction updateTable (data) {\\\\n $(\u0026#39;tbody\u0026#39;).empty();\\\\n \\\\n var row = `\\\\n \\u003ctr\\u003e\\\\n \\u003ctd\\u003e🍖\\u003c/td\\u003e\\\\n \\u003ctd\\u003e食物\\u003c/td\\u003e\\\\n \\u003ctd\\u003e2019-01-01\\u003c/td\\u003e\\\\n \\u003ctd\\u003e65元\\u003c/td\\u003e\\\\n \\u003ctd\\u003e早餐\\u003c/td\\u003e\\\\n \\u003c/tr\\u003e\\\\n `\\\\n $(\u0026#39;tbody\u0026#39;).append(row); \\\\n}\\\\n\\\\n// 將類型的字串轉換成 emoji 符號\\\\nfunction typeToEmoji (type) {\\\\n\\\\n}\\\\n\\\\n// 依據類型查詢所有資料並更新至表格\\\\nfunction filter () {\\\\n\\\\n}\\\u0026quot;}\u0026quot;,\u0026quot;created_at\u0026quot;:\u0026quot;2020-03-08T13:35:25.560+08:00\u0026quot;,\u0026quot;updated_at\u0026quot;:\u0026quot;2020-03-08T13:35:25.560+08:00\u0026quot;,\u0026quot;name\u0026quot;:\u0026quot;記帳達人 - 完整版 副本 副本\u0026quot;,\u0026quot;language\u0026quot;:\u0026quot;web\u0026quot;,\u0026quot;screenshot\u0026quot;:{\u0026quot;url\u0026quot;:null},\u0026quot;parent_id\u0026quot;:116348,\u0026quot;plugin\u0026quot;:\u0026quot;\u0026quot;,\u0026quot;description\u0026quot;:null,\u0026quot;note\u0026quot;:null,\u0026quot;status\u0026quot;:\u0026quot;public\u0026quot;,\u0026quot;like_student_ids\u0026quot;:[],\u0026quot;is_featured\u0026quot;:false,\u0026quot;views\u0026quot;:0,\u0026quot;hashid\u0026quot;:\u0026quot;4y3sy3z5\u0026quot;,\u0026quot;is_content_changed\u0026quot;:false,\u0026quot;review_status\u0026quot;:\u0026quot;unsubmitted\u0026quot;,\u0026quot;submitted_at\u0026quot;:null,\u0026quot;reviewed_at\u0026quot;:null,\u0026quot;advise\u0026quot;:null,\u0026quot;is_deleted\u0026quot;:false}\u003c/textarea\u003e\u003ctextarea id=\"projectJsonAssets\" style=\"display: none;\"\u003e[]\u003c/textarea\u003e\u003cscript\u003efunction htmlDecode (input) {\n var doc = new DOMParser().parseFromString(input, \"text/html\");\n return doc.documentElement.textContent;\n}\nvar PROJECT = JSON.parse(htmlDecode(projectJsonData.innerHTML));\nvar PROJECT_ASSETS = JSON.parse(htmlDecode(projectJsonAssets.innerHTML));\nvar SANDBOX_URL = 'https://sb.koding.school/projects/4y3sy3z5/js_inject';\nvar PROJECT_ASSET_NAMES = [];\u003c/script\u003e\u003cscript\u003eLOCALES = {\n main_script: \"程式碼\",\n plugin: \"擴充\",\n asset: \"素材\",\n backdrop: \"遊戲場景\",\n console: \"主控台\",\n screenshot: \"截取圖片\",\n preview: \"預覽\",\n filename: \"檔案名稱\",\n control: \"操作\",\n rename: \"重新命名\",\n insert_script: \"插入程式...\",\n run: \"執行\",\n stop: \"暫停\",\n clear: \"清除\",\n upload_image: \"圖片上傳\",\n format_document: \"格式化\"\n};\u003c/script\u003e\u003cscript\u003evar MODE;\nvar PROJECT_ID;\nvar PROJECT_NAME;\nvar IS_MY_PROJECT;\nvar CODE_LANGUAGE;\nvar SANDBOX_URL;\nvar HAS_PROJECT;\nvar SHOW_PLUGIN;\nvar NEXT_SECTION_URL;\nvar RESOURCE_TYPE;\nvar NEDD_EXAMINE;\nvar ANSWER_SCRIPT;\nvar FORM_POST_URL;\u003c/script\u003e\u003cscript\u003eHAS_PROJECT = true;\nPROJECT_ID = '4y3sy3z5';\nPROJECT_NAME = '記帳達人 - 完整版 副本 副本';\nIS_MY_PROJECT = true;\nCODE_LANGUAGE = 'web';\nSHOW_PLUGIN = false;\u003c/script\u003e\u003cscript\u003eSANDBOX_URL = 'https://sb.koding.school/projects/4y3sy3z5/web_inject';\u003c/script\u003e\u003cscript\u003eMODE = 'course';\nNEXT_SECTION_URL = \"/courses/javascript/dt-db/lessons/5/3/next\";\nRESOURCE_TYPE = \"vimeo\";\nNEDD_EXAMINE = \"false\";\nANSWER_SCRIPT = ``;\nIS_COMPLETED = false;\nCOURSE_SLUG = \"dt-db\";\nLESSON_ID = 889;\nLESSON_ORDER = 5;\nSECTION_ORDER = 3;\nPROBLEMS = [];\nSTUDENT_ID = 1661;\u003c/script\u003e\u003cdiv id=\"container\"\u003e\u003cdiv class=\"section-header\"\u003e\u003cspan class=\"nav-item px-2 js-section-list bg-black-1\" style=\"border-bottom: 1px solid #888\"\u003e\u003ci class=\"fa fa-bars\"\u003e\u0026nbsp;\u003c/i\u003e課程列表\u003c/span\u003e\u003cspan class=\"nav-item lesson-title js-section-list\"\u003e\u003ci class=\"fa fa-angle-right\"\u003e\u003c/i\u003e記帳軟體\u003cdiv class=\"mask\"\u003e\u003c/div\u003e\u003c/span\u003e\u003cspan class=\"nav-item lesson-title js-section-list\"\u003e\u003ci class=\"fa fa-angle-right\"\u003e\u003c/i\u003e資料表欄位設計\u003cdiv class=\"mask\"\u003e\u003c/div\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-tutorial\"\u003e\u003cspan class=\"tab-outline bg-black-1 active\"\u003e學習\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-editor\"\u003e\u003cspan class=\"tab-outline bg-black-1\"\u003e練習\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item tab js-show-topics\"\u003e\u003cspan class=\"tab-outline bg-black-1 js-need-help\"\u003e我有問題\u003c/span\u003e\u003c/span\u003e\u003ca href=\"/courses/javascript/dt-db\"\u003e\u003cspan class=\"nav-item nav-btn float-right\"\u003e\u003ci class=\"fa fa-sign-out\"\u003e\u003c/i\u003e\u003cbr /\u003e返回課程\u003c/span\u003e\u003c/a\u003e\u003ca class=\"nav-item nav-btn float-right bg-black-1 js-next-section\" href=\"/courses/javascript/dt-db/lessons/5/3/next\"\u003e\u003ci class=\"fa fa-forward\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e下一章\u003c/span\u003e\u003c/a\u003e\u003cstyle type=\"text/css\"\u003e.dropdown-toggle::after {\n display: none;\n}\u003c/style\u003e\u003cspan class=\"dropdown\"\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 dropdown-toggle\" data-toggle=\"dropdown\"\u003e\u003ci class=\"fa fa-columns\"\u003e\u003c/i\u003e\u003cbr /\u003e\u0026nbsp;版型\u003cdiv class=\"dropdown-menu dropdown-menu-right\" data-toggle=\"dropdown\"\u003e\u003cspan class=\"dropdown-item js-layout-1-1-1\"\u003e1:1:1\u003c/span\u003e\u003cspan class=\"dropdown-item js-layout-1-1\"\u003e1:1\u003c/span\u003e\u003cspan class=\"dropdown-item js-layout-1\"\u003e全寬\u003c/span\u003e\u003c/div\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 js-save-project js-save-btn\"\u003e\u003ci class=\"fa fa-floppy-o\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e儲存\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"nav-item nav-btn float-right bg-black-1 js-open-web-fullscreen\"\u003e\u003ci class=\"fa fa-floppy-o\"\u003e\u003c/i\u003e\u003cbr /\u003e\u003cspan\u003e前往網站頁面\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv id=\"main\"\u003e\u003cdiv class=\"tutorial-body js-img-larger\" style=\"height: 100%; z-index: 100; position: relative;\"\u003e\u003cdiv class=\"page\" id=\"resource-bar-container\" style=\"position: absolute;\"\u003e\u003c/div\u003e\u003cdiv class=\"page resource\" style=\"height: 100%;\"\u003e\u003cdiv class=\"page-iframe\"\u003e\u003ciframe allowfullscreen=\"\" class=\"js-vimeo-iframe\" frameborder=\"0\" mozallowfullscreen=\"\" scrolling=\"no\" src=\"https://player.vimeo.com/video/382523587\" style=\"overflow: hidden;\" webkitallowfullscreen=\"\" width=\"100%\"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript\u003efunction renew_action(action) {\n data = {section: { action: action, admission_id: '31450'}}\n $.ajax({\n type: 'POST',\n url: '/sections/renew_action',\n data: data,\n success: {status: 'ok'},\n dataType: 'json'\n });\n}\u003c/script\u003e\u003cdiv class=\"course-topcis p-5 topics\" id=\"app\" style=\"background-color: #eee; width: 100%; height: 100%; overflow: scroll; position: absolute; top: 0;\"\u003e\u003ch3 class=\"text-center\"\u003e老師我有問題！\u003c/h3\u003e\u003cscript\u003eDEFAULT_AVATAR = \"https://cdn1.koding.school/assets/resume/avator-c1bf83f40b17d0c94c261e3599f205845d72093590d9681619b9e53460c9d47e.jpg\";\u003c/script\u003e\u003cdiv class=\"ks-container js-topics\"\u003e\u003cdiv v-show=\"!showComments\"\u003e\u003cdiv class=\"pt-3 d-flex\" v-if=\"!isFormShow\"\u003e\u003cdiv style=\"width: 150px;\"\u003e\u003cbutton @click=\"toggleForm\" class=\"ks-orange ks-btn ks-btn-orange ks-btn-lg cursor-pointer\"\u003e新增主題\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"search-box d-inline-block px-4 ml-4\"\u003e\u003cinput placeholder=\"搜尋\" v-model=\"search\"\u003e\u003ci class=\"fa fa-search\"\u003e\u003c/i\u003e\u003c/input\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"my-3\" v-show=\"isFormShow\"\u003e\u003cinput class=\"form-control\" placeholder=\"問題標題\" v-model=\"topicName\" /\u003e\u003cdiv class=\"js-trumbowyg\" id=\"topicForm\" style=\"background-color: #fff;\"\u003e\u003c/div\u003e\u003cbutton @click=\"cancel\" class=\"ks-btn ks-btn-red ks-btn-lg\"\u003e取消\u003c/button\u003e\u003cbutton :disabled=\"topicName.trim() == \u0026#39;\u0026#39; || topicFormIsEmpty\" @click=\"submit\" class=\"ks-btn ks-btn-red ks-btn-lg ml-2\"\u003e送出\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"pt-5\"\u003e\u003cul class=\"ks-list\"\u003e\u003ca @click=\"showComment(idx)\" class=\"ks-link\" href=\"#\" v-for=\"(topic, idx) in filteredList\"\u003e\u003cli class=\"ks-list-item\"\u003e\u003cdiv class=\"pt-2 px-3\"\u003e\u003cstrong class=\"h5 ks-orange\"\u003e{{topic.title}}\u003c/strong\u003e\u003c/div\u003e\u003cdiv class=\"py-2 px-3 ks-gray\"\u003e\u003csmall\u003e{{topic.student_name}}發問\u003c/small\u003e\u003csmall class=\"px-2 float-right\"\u003e{{topic.post_count}}則回覆\u003c/small\u003e\u003csmall class=\"px-2 float-right\" v-if=\"topic.last_reply_date\"\u003e{{passTime(topic.last_reply_date)}}前更新\u003c/small\u003e\u003c/div\u003e\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv v-show=\"showComments\"\u003e\u003cdiv class=\"pt-3\"\u003e\u003cbutton @click=\"showComments = false\" class=\"ks-btn ks-btn-red ks-btn-lg\"\u003e返回主題列表\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"mt-4 p-3\" style=\"background-color: #fff;\"\u003e\u003ch1 class=\"h3 ks-orange\"\u003e{{currentTopic.title}}\u003c/h1\u003e\u003cspan\u003e\u003csmall class=\"px-2\"\u003e{{currentTopic.student_name}}\u003c/small\u003e\u003csmall class=\"px-2 float-right\"\u003e{{passTime(currentTopic.last_reply_date)}}前發布\u003c/small\u003e\u003c/span\u003e\u003cdiv class=\"py-3\" v-html=\"currentTopic.content\"\u003e\u003c/div\u003e\u003chr /\u003e\u003cdiv class=\"ks-comments\"\u003e\u003cdiv class=\"ks-comment\" v-for=\"comment in comments\"\u003e\u003cdiv :style=\"{backgroundImage: \u0026#39;url(\u0026#39; + avatar(comment.student_avatar.url) + \u0026#39;)\u0026#39;}\" class=\"avatar\"\u003e\u003c/div\u003e\u003cdiv class=\"comment-body\"\u003e\u003cdiv class=\"title\"\u003e\u003cstrong class=\"ks-orange\"\u003e{{comment.studentName}}\u003c/strong\u003e\u003csmall class=\"pl-2\"\u003e{{passTime(comment.created_at)}}前更新\u003c/small\u003e\u003c/div\u003e\u003cdiv class=\"content\" v-html=\"comment.content\"\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"ks-comment\"\u003e\u003cdiv class=\"avatar\" style=\"background-image: url(https://cdn8.koding.school/uploads/student/avatar/1661/20190422-006.jpg)\"\u003e\u003c/div\u003e\u003cdiv class=\"comment-body\"\u003e\u003cdiv class=\"js-trumbowyg\" id=\"postForm\" style=\"background-color: #fff;\"\u003e\u003c/div\u003e\u003cbutton :disabled=\"postFormIsEmpty\" @click=\"submitPost\" class=\"ks-btn ks-btn-red ks-btn-lg ml-2\"\u003e留言\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003ciframe class=\"editor js-editor\" data-src=\"/projects/4y3sy3z5/editor\" style=\"width: 100%; height: 100%; border-width: 0px; position: absolute; top: 0; left: 0;\"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"section-list\"\u003e\u003cdiv class=\"section-hide js-lesson-hide\"\u003e\u003c/div\u003e\u003cdiv class=\"section-content hide-scrollbar\"\u003e\u003cdiv class=\"hide-scrollbar-content pt-3\"\u003e\u003ch3\u003e\u003ci aria-hidden=\"true\" class=\"fa fa-times js-lesson-hide\"\u003e\u003c/i\u003e\u0026nbsp;課程列表\u003c/h3\u003e\u003col class=\"mb-5\"\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-0\" data-toggle=\"collapse\"\u003e1. 寶可夢百科(1)\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-0\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 認識資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案介紹與說明\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 多筆資料儲存的方式\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 物件、屬性、方法\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 印出陣列中第一筆物件\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 透過程式印出假資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 認識「字串模板」\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 印出陣列中所有的資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 陣列的「方法」應用\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/1/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 發現問題\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-1\" data-toggle=\"collapse\"\u003e2. 寶可夢百科(2)\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-1\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案介紹與說明\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料庫四大操作 C、R、U、D\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 讀取資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將資料更新至網頁表格\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 篩選資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料的顯示方式\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/2/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除資料\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-2\" data-toggle=\"collapse\"\u003e3. 代辦事項\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-2\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹＆試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹介面\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增一筆事項到資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介面新增一筆假資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將所有事項更新到畫面上\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除全部事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 動態事件綁定\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 移除指定事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 修改事項\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/3/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 避免相同名稱被移除\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-3\" data-toggle=\"collapse\"\u003e4. 老師小幫手\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-3\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹＆試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 試玩時間\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 程式架構\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 輸入姓名與成績\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增成績至資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 顯示所有資料到列表_講解\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 顯示所有資料到列表_解答\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 用另外一種語法改寫迴圈\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 刪除成績_講解\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 刪除成績_實作\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 排序成績\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/4/12\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 反轉排序\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-4\" data-toggle=\"collapse\"\u003e5. 記帳軟體\u003c/div\u003e\u003col class=\"mt-2 collapse show\" id=\"lesson-4\"\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/1\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 介紹\u0026amp;試玩\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/2\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 專案架構(1)\u003ci aria-hidden=\"true\" class=\"fa fa fa-check\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli class=\"focus\"\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/3\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料表欄位設計\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/4\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 取得輸入值\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/5\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 新增資料到資料庫\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/6\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 資料驗證\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/7\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將所有資料印上表格\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/8\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 計算總和並顯示在畫面上\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/9\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 將 type 轉為 emoji\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/10\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 篩選資料\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"/courses/javascript/dt-db/lessons/5/11\" style=\"display: block;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp; 重點整理\u0026amp;挑戰題\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-5\" data-toggle=\"collapse\"\u003e6. 線上問卷\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-5\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹與學習重點\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設的程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;填寫問卷並送出\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;前後台切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增資料\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;重設表單內容\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新後台表格\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;後台的統計資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;挑戰題\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-6\" data-toggle=\"collapse\"\u003e7. 我是知識王\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-6\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹 與 學習重點\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設程式碼介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲開始\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示題目\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;送出答案\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;下一題\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲結束\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示排行榜\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;禁止點擊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-7\" data-toggle=\"collapse\"\u003e8. 手指百米衝刺大賽\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-7\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設的程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;按鍵事件\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;走路動畫\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;印出步數\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;狀態機\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲結束\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;計算遊戲時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;將成績新增至資料表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示排行榜\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-8\" data-toggle=\"collapse\"\u003e9. 購物大平台(1)\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-8\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;預設程式碼介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;分頁切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;購買商品\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;送出訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;資料驗證\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;顯示訂單資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;重點整理\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-9\" data-toggle=\"collapse\"\u003e10. 購物大平台(2)\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-9\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹 \u0026amp; 回顧上週課程\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;查詢訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;查無訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;電商後台管理員\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;後台訂單列表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新指定的訂單狀態\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;訂單取消\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;出貨前才能取消訂單\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-10\" data-toggle=\"collapse\"\u003e11. 社群網站（1）\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-10\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;試玩時間\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;介紹預設程式碼\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;頁面切換\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增文章到資料表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;資料驗證\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;將資料更新到文章列表上\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;篩選指定類型的文章\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;底部的文字提示\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;課程回顧\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-11\" data-toggle=\"collapse\"\u003e12. 社群網站（2）\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-11\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;取得文章的ID\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新文章頁面\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增留言\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;更新留言列表\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;字串切割\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;幫類型標籤上色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;檢視文章的類別標籤上色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;公布上章解答 \u0026amp; 總結\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003cli\u003e\u003cdiv class=\"sections-toggler\" data-target=\"#lesson-12\" data-toggle=\"collapse\"\u003e13. 多人聊天室\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/div\u003e\u003col class=\"mt-2 collapse \" id=\"lesson-12\"\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;專案介紹\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;遊戲試玩\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;新增訊息「加入聊天室」\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;時間格式\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;分配隨機顏色\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;Enter 送出留言\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;使用 Socket 傳遞訊息\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;一次傳遞更多資訊\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;捲動對話框\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca href=\"#\" style=\"color: #ccc;\"\u003e\u0026emsp;\u003ci aria-hidden=\"true\" class=\"fa fa-angle-right\"\u003e\u003c/i\u003e\u0026nbsp;\u0026nbsp;回顧總結\u0026nbsp;\u003ci class=\"fa fa-lock\"\u003e\u003c/i\u003e\u003c/a\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv aria-hidden=\"true\" class=\"modal fade\" id=\"exportAPKModal\" role=\"dialog\" tabindex=\"-1\"\u003e\u003cdiv class=\"modal-dialog\" role=\"document\" style=\"max-width: 400px\"\u003e\u003cdiv class=\"modal-content\"\u003e\u003cdiv class=\"modal-body\" style=\"text-align: center;\"\u003e\u003cp style=\"font-size: 16px\"\u003e用手機掃描下方 QRCode 進行安裝\u003c/p\u003e\u003cdiv\u003e\u003cimg src=\"https://chart.apis.google.com/chart?cht=qr\u0026amp;chld=L|0\u0026amp;chl=https%3A%2F%2Fkoding.school%2Fprojects%2F4y3sy3z5%2Fexport.apk\u0026amp;chs=240x240\" /\u003e\u003c/div\u003e\u003cp style=\"font-size: 12px; color: #999;\"\u003e或您也可以\n\u003ca id=\"export-apk-link\" style=\"cursor: pointer; color: #999; text-decoration: underline;\" target=\"_blank\"\u003e下載 APK\u003c/a\u003e\n到這台電腦\n\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"modal-footer\"\u003e\u003cbutton class=\"btn\" data-dismiss=\"modal\" style=\"color: #333; width: 70px; background-color: #fff; border: 1px solid; border-color: #ccc;\" type=\"button\"\u003e關閉\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cscript src=\"https://cdn6.koding.school/assets/sections-ac05abeca134a2ec8254e9ed390915da625eb14f11ec15f45676baa94a34c76d.js\"\u003e\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e","created_at":"2018-09-26T10:17:38.929+08:00","updated_at":"2020-04-12T14:23:42.213+08:00","name":"000","language":"javascript","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/43002/89edcce60b8890776f43b51e69f48ea4.jpg"},"parent_id":2,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":79,"hashid":"5j3s8dem","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}
[{"id":753837,"file_name":"Gymnopedie_No_1.mp3","project_id":43002,"asset_id":86527,"created_at":"2018-09-26T10:17:38.938+08:00","updated_at":"2018-09-26T10:17:38.938+08:00"},{"id":753838,"file_name":"koding.png","project_id":43002,"asset_id":86714,"created_at":"2018-09-26T10:17:38.942+08:00","updated_at":"2018-09-26T10:17:38.942+08:00"},{"id":753839,"file_name":"space_bg.jpg","project_id":43002,"asset_id":86716,"created_at":"2018-09-26T10:17:38.944+08:00","updated_at":"2018-09-26T10:17:38.944+08:00"},{"id":753840,"file_name":"earth.png","project_id":43002,"asset_id":86717,"created_at":"2018-09-26T10:17:38.945+08:00","updated_at":"2018-09-26T10:17:38.945+08:00"}]
橘蘋學習平台
我的作品
檢視專案頁
匯出
複製
匯入
刪除
下載 Android APP (APK)
截圖
繁中
简中
English
日本語
1:1:1
1:1
全寬
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦
