HTML5 跨平台遊戲設計不設限：從入門到超人氣遊戲的修鍊實戰

類似書籍推薦給您

HTML5跨平台遊戲設計不設限：從入門到超人氣遊戲的修鍊實戰 ISBN13：9789863475613 出版社：碁峰資訊 作者：白乃遠;吳苑瑜;曾奕霖 裝訂／頁數：平裝／368頁 附件：光碟*1 規格：23cm*17cm*2.6cm (高/寬/厚) 版次：1 出版日：2015/05/04 中國圖書分類：特殊電腦方法 內容簡介:跨界整合，打造內外兼具的跨平台遊戲新經典！零成本，讓自己的遊戲行銷全世界！ HTML5是包含HTML5、CSS3和JavaScript的網頁技術組合，優秀的多媒體元素、跨平台能力與標準化特性，改變了行動世代的使用者體驗。根據Digital Buzz Blog統計，使用者在iOS和Android上所花的時間中，有32%是拿來玩遊戲。如果使用HTML5進行手機遊戲開發，就能一次創造出跨平台的遊戲，免除學習多語言開發的困擾。例如Google Chrome Web Store可下載到的>與>，就是從iOS平台移植到HTML5上的經典案例。 本書由淺入深，從HTML5、CSS3和JavaScript三大基礎架構進入遊戲開發的世界，除了基本語法介紹，每個學習主題都設計情境與遊戲範例，加速了解開發精髓。在進階章節中，先以遊戲結合個人履歷互動概念作為創新應用的示範，再引入其它開源遊戲引擎，簡化遊戲製作，開發熱門遊戲，最後結合FB API應用，以及發佈技巧分享遊戲。 綜合本書特點如下： ‧從HTML5基礎架構切入，適合初接觸程式的初學者。 ‧程式語法使用顏色區隔，方便閱讀與學習。 ‧每個學習主題涵蓋多種情境與範例，實練實戰。 ‧獨家提供遊戲式互動個人履歷教學製作，發想創意。 ‧學會應用HTML5遊戲引擎輕鬆開發熱門遊戲，快速上手。 ‧遊戲免費發佈技巧大公開，學會零成本讓遊戲行銷全世界。 書附光碟：範例素材/範例完成檔/軟體工具 目錄 章節說明:01 遊戲設計與HTML5 HTML5受到世人注視的契機，緣起於已故蘋果公司的CEO賈伯斯所發起的公開聲明，表示不讓蘋果公司所生產的行動設備支援「Flash」技術，並以「HTML5」為主要發展方向。這個被蘋果公司大力支持的HTML5，其實是一組包含HTML5、CSS3 和JavaScript 的網頁技術組合，其優秀的多媒體元素及跨平台能力，改變了行動世代的使用者體驗。在本章中將學到的重點包括： › HTML5基礎認識 › HTML5開發環境建立 › HTML5程式測試與除錯技巧範例：HelloWorld 02 HTML5基礎 HTML5比起前幾版而言具有大幅度的變化。首先新增多種「結構化元素」，有助於頁面的排版以及搜尋引擎的辨識；其次是豐富的「內容標記方法」，新增畫布與各種文字層級元素，讓圖文編輯更加精緻；第三是強大的「多媒體應用」，讓瀏覽器不必加載外掛就可以處理影音；另外也提供全新的web表單協助處理資訊流的部份。HTML5語言從靜態到動態所需要的元素通通都考慮到了，也難怪其魅力能夠襲捲全球。在本章中將學到的重點包括： › 認識整齊的結構化元素 › 活用豐富的內容標記方法 › 應用方便的影音多媒體標籤 › 學習Web表單機制 03 CSS3應用 CSS是負責網頁外觀的藝術總監，舉凡網頁裡的文字、圖片、表格、表單⋯⋯等元件，通通得聽它的號令進行排版。雖然HTML裡也有關於外觀設計的標籤，但遠遠不及CSS可以做到的精準定位、多層次的顏色、框線變化，甚至還能更改滑鼠游標的形狀，以及做出類似動畫般夢幻的過場效果，帶給我們更繽紛的線上體驗。在本章中將學到的重點包括： › 認識CSS基礎語法 › 使用CSS設計文字與圖片 › 使用CSS美化表格與表單 04 CSS3網頁小遊戲以往的網頁互動遊戲大多使用Flash呈現，瀏覽器必須安裝Flash player才能執行。但HTML5推出後，只要使用CSS3中的動畫屬性，就可以達到控制動畫與玩家互動的效果，讓瀏覽器不再需要安裝額外插件就能開始玩遊戲，這也是HTML5 帶來最重大的變革。在本章中將學到的重點包括： ›› CSS3的動畫屬性animation ›› CSS3的漸變屬性Transition ›› 實作「打地鼠」網頁遊戲(包括場景/製作地鼠/得分動畫/關卡與結束) 05 常用的觸發事件與元件在開發遊戲的歷程中，往往有許多需要和玩家互動的元件需要處理，但我們知道HTML是專門用來處理遊戲結構，而CSS則是負責遊戲美術，若想讓遊戲具備與玩家互動的效果，就必須導入HTML5家族的另一個成員－JavaScript語言。在這個章節中會和大家介紹在開發HTML5遊戲中常用的觸發事件和元件，並透過JavaScrip來實作。在本章中將學到的重點包括： › 滑鼠點擊事件偵聽 › 鍵盤按鍵事件偵聽 › 網頁錨點跳轉技巧 › 瀏覽器資訊偵測 › DOM控制技巧 › 螢幕解析度偵測 › 簡易E-Mail寄送系統 › 日期物件Date與計時器實作 06 多媒體播放畫面是在HTML5才被定義的新標籤，具備強大的圖形處理能力。標籤在結合JavaScript語法的狀況下，可以進行繪製圖形、合成圖像等等操作，也可以用來實現動畫影片之控制，讓瀏覽器在不需安裝其它插件的情況下處理圖像。標籤之功能完整性，豐富到足以獨立出成一本書，本書僅對比較常用的功能進行介紹。在本章節您將學到的重點包括：在本章中將學到的重點包括： › Canvas圖形繪製與變形控制 › Canvas動畫應用 › Canvas多媒體影音播放 › Canvas動畫劇場實作範例：動畫小劇場 07 WEB應用在連線遊戲中，必須透過伺服器與客戶端不斷地交換遊戲資訊，才能更新與同步每個玩家的遊戲狀態，如此便可以設計出具有連線功能的遊戲內容，例如排行榜、好友資訊⋯等。在HTML5遊戲開發中，我們習慣將遊戲資訊以JSON格式包裝後，透過AJAX技術進行傳輸。 AJAX是資料傳遞的一種技術，可以僅針對網頁某些部份的資料更新，節省不斷重載整個網頁所需耗費的資源；JSON則是一個純文字格式，用於儲存和傳送簡單結構資料。在本章中將學到的重點包括： › AJAX傳輸方法的操作步驟 › 使用AJAX傳輸XML資料 › JSON格式的資料結構 › JSON格式的編譯與解譯範例：web伺服器實際演練 08 網頁資料儲存在HTTP協定中，由於client端與server端間並沒有互相保存資料的機制，因此需要暫時儲存網頁中的資料時，必須依靠Cookie和Session完成。網頁資料儲存的機制就像是飲料店點餐，當結帳買單後店家和顧客會持有一組號碼，透過這組號碼的連結就可以知道顧客所點的飲料內容，省去重複確認餐點的麻煩。在HTML5中提供了新的儲存機制WebStorage，帶來更大的儲存空間、更少的頻寬浪費。在這個章節中將會帶各位釐清這些儲存方式的差異。在本章中將學到的重點包括： › 認識Cookie機制的運作 › 認識Session機制的運作 › 認識HTML5的Web Storage機制範例：表單切換 09 學習使用jQuery jQuery是基於JavaScript語法所開發的輕量級物件導向函式庫。jQuery可以凌駕於HTML與CSS之上，...

HTML/CSS/JavaScript與前端框架的完美結合：使用Bootstrap與PWA技術，新手從這開始！(AI加強版) (4版)

類似書籍推薦給您

【簡介】 全新章節教您巧妙運用AI，讓寫程式更有效率！！ 掌握HTML/CSS/JavaScript技巧， 搭配高效前端框架技術，輕鬆成為專業網頁設計師 　　以淺顯易懂的方式從設計網站開始談起，從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源，再循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript，並加入前端框架Bootstrap技術，加上書中介紹好用的配色工具，就算沒有美工基礎，藉由Bootstrap工具模組以及配色表，也能快速建構出專業美觀的RWD網站。 　　本書也安排了Progressive Web Application(PWA)技術，手把手教您逐步將網站優化為Web APP，讓網站能像Native App在手機等行動裝置建立桌面捷徑，瀏覽網頁時具有操作Native App相似的感受。 　　本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 　　本次改版新增了一個全新的章節「善用ChatGPT寫JavaScript程式」。透過這個章節，讀者可以學習如何應用AI，來協助自己更有效率地撰寫程式。 　　|重點特色| 　　✰以淺顯易懂的方式快速了解前端開發的觀念及技術。 　　✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。 　　✰循序漸進介紹 Web 前端三大核心技術：HTML、CSS 及 JavaScript。 　　✰活用前端框架 Bootstrap 技術以及工具模組，建構 RWD 網站。 　　✰使用 Progressive Web Application(PWA)技術，逐步將網站優化為 Web APP。 　　✰學習如何聰明使用 ChatGPT 來協助程式開發。 　　|適用對象| 　　✰對前端技術有興趣卻不知從何入門的初學者 　　✰前端開發技術相關從業人員 　　✰大專院校網站設計相關課程教材  【目錄】 CHAPTER 01 網站開發的觀念與技術 1-1 網站開發的基礎觀念 1-1-1 網站及網頁 1-1-2 網頁開發的前端與後端 1-1-3 網址的組成 1-2 網站建置流程與技術 1-2-1 擬定網站主題 1-2-2 規劃網站架構與內容 1-2-3 製作網頁工具 1-2-4 上傳雲端 1-3 網頁介面原型建構工具 1-3-1 網站原型架構 1-3-2 介面線框與原型工具 1-3-3 實作網頁介面原型 CHAPTER 02 HTML與CSS基礎 2-1 學習HTML前的準備工作 2-1-1 建立HTML文件 2-1-2 自動生成HTML5架構程式碼 2-2 HTML語法概念與架構 2-2-1 HTML的標記型態 2-2-2 HTML的組成 2-2-3 標記屬性的運用 2-3 HTML5文件結構與語意標記 2-3-1 語意化的HTML標記 2-3-2 HTML5宣告與編碼設定 2-4 認識CSS基本架構 2-4-1 使用CSS樣式表 2-4-2 CSS基本格式 2-4-3 認識CSS選擇器 2-4-4 CSS的度量單位 2-4-5 CSS的顏色表示法 CHAPTER 03 HTML常用標記 3-1 排版相關標記 3-1-1 瀏覽器呈現網頁的過程 3-1-2 標題標記 3-1-3 段落及換行標記 3-2 項目列表清單 3-2-1 有序列表 3-2-2 無序列表清單 3-2-3 定義列表 3-3 表格與表單 3-3-1 表格 3-3-2 表單 3-3-3 表單元件 3-4 插入圖片與超連結 3-4-1 插入圖片 3-4-2 超連結 3-4-3 內置框架（iframe） 3-5 div標記與span標記 3-5-1 認識div標記 3-5-2 認識span標記 3-5-3 替程式碼加上註解 3-5-4 使用特殊符號及Emoji字符集 CHAPTER 04 CSS常用語法 4-1 文字與段落樣式 4-1-1 文字樣式 4-1-2 文字段落樣式 4-1-3 邊框 4-1-4 文繞圖 4-2 掌握CSS定位 4-2-1 網頁元件的定位（position） 4-2-2 立體網頁的定位 4-2-3 好用的calc()函式 CHAPTER 05 CSS Flexbox響應式排版 5-1 Flexbox模型概念 5-1-1 認識CSS盒子模型（Box Model） 5-1-2 認識Flexbox彈性盒子 5-2 Flexbox屬性 5-2-1 fl¬ex container屬性 5-2-2 ¬flex Items屬性 CHAPTER 06 善用網路資源 6-1 圖庫素材分享平台 6-1-1 認識創用CC授權 6-1-2 搜尋CC授權素材 6-1-3 Icon nder-icon圖庫 6-1-4 替網站加入Logo小圖示 6-2 實用的網頁應用產生器 6-2-1 CSS Layout產生器 6-2-2 按鈕產生器 6-2-3 網站配色 CHAPTER 07 整合練習—詩詞展示網頁設計與實作 7-1 網頁架構說明 7-1-1 網頁架構圖 7-1-2 選擇合適的HTML標記 7-2 建立HTML與CSS程式碼 7-2-1 建立網頁架構的HTML語法 7-2-2 加入超連結 7-2-3 加入CSS語法 7-2-4 加入偽元素 7-2-5 利用Icon Fonts產生社群圖示 CHAPTER 08 JavaScript基礎 8-1 認識JavaScript 8-1-1 JavaScript基本觀念 8-1-2 JavaScript運行環境 8-1-3 瀏覽器主控台console 8-1-4 JavaScript語法架構 8-2 JavaScript基礎語法 8-2-1 JavaScript語法架構 8-2-2 JavaScript註解符號 8-2-3 資料型別（Data Type） 8-3 變數宣告與作用範圍 8-3-1 全域變數與區域變數 8-3-2 使用var關鍵字宣告變數 8-3-3 var宣告的作用域 8-3-4 使用Let關鍵字宣告變數 8-3-5 使用const關鍵字宣告常數 8-3-6 變數名稱的限制 CHAPTER 09 函式與作用域 9-1 自訂函式 9-1-1 函式的定義與呼叫 9-1-2 函式參數 9-1-3 函式回傳值 9-2 函式的多重用法 9-2-1 函式宣告式（Function Declaration） 9-2-2 函式表達式（Function Expressions） 9-2-3 物件與this關鍵字 9-2-4 立即執行函式（IIFE） CHAPTER 10 JavaScript操控DOM元素 10-1 DOM物件的方法與屬性 10-1-1 取得物件資訊 10-1-2 處理物件節點 10-1-3 屬性的讀取與設定 10-2 DOM物件的操作 10-2-1 Window物件 10-2-2 DOM集合（Collection） 10-3 DOM風格樣式 10-3-1 查詢元素樣式 10-3-2 設定元件樣式 CHAPTER 11 前端資料儲存 11-1 認識Web Storage 11-1-1 Web Storage概念 11-1-2 偵測瀏覽器是否支援Web Storage 11-2 localStorage及sessionStorage 11-2-1 存取localStorage 11-2-2 刪除localStorage 11-2-3 存取sessionStorage 11-3 IndexedDB資料庫 11-3-1 IndexedDB重要概念 11-3-2 IndexedDB基本操作 11-3-3 讀取資料 11-3-4 刪除資料 11-3-5 清空資料 CHAPTER 12 整合練習—個人通訊錄實作 12-1 網頁架構說明 12-1-1 網頁功能架構圖及線框圖 12-1-2 CSS Image Sprites 12-2 IndexedDB的CURD 12-2-1 建置資料庫物件及開啟交易 12-2-2 設定事件的處理函式 12-2-3 新增會員與新增完成 12-2-4 動態產生資料列表 12-2-5 修改與刪除單筆資料 12-2-6 清空資料與刪除資料庫 12-2-7 阻止事件傳遞與預設行為 CHAPTER 13 響應式網頁框架—Bootstrap 13-1 認識Bootstrap 13-1-1 為什麼要使用Bootstrap 13-1-2 下載Bootstrap 13-1-3 RWD的設計理念 13-2 Bootstrap排版 13-2-1 斷點（Breakpoint）與容器（Container） 13-2-2 了解Grid System 13-2-3 Viewport與Media queries 13-3 Bootstrap的樣式 13-3-1 Bootstrap通用顏色 13-3-2 Bootstrap間距 13-3-3 Bootstrap寬度與高度 13-3-4 Bootstrap文字 13-4 圖片與表格 13-4-1 響應式圖片 13-4-2 邊框圓角 13-4-3 建立Bootstrap表格 CHAPTER 14 Bootstrap擴充元件庫 14-1 導覽與選單 14-1-1 導覽列（Navigation Bar） 14-2 表單與按鈕 14-2-1 表單控制元件 14-2-2 表單排版 14-3 輪播元件（Carousel） 14-3-1 基本的輪播效果 14-3-2 利用JavaScript控制輪播 CHAPTER 15 PWA實作—我的記帳本Web App 15-1 實作「我的記帳本」網頁 15-1-1 「我的記帳本」網頁功能與介面 15-1-2 下拉式選單 15-1-3 按鈕群組 15-1-4 互動視窗 15-1-5 IndexedDB關鍵字查詢 15-1-6 善用Bootstrap Icons製作小圖示 15-2 將網頁轉換成PWA 15-2-1 什麼是PWA 15-2-2 製作各種尺寸的App圖示按鈕 15-2-3 將網頁變成PWA CHAPTER 16 善用ChatGPT 寫 JavaScript 程式 16-1 AI人工智慧聊天機器人 16-1-1 認識ChatGPT 16-1-2 認識聊天機器人 16-1-3 聊天機器人的種類 16-2 ChatGPT初體驗 16-2-1 寫在使用ChatGPT之前 16-2-2 註冊免費ChatGPT帳號 16-2-3 與ChatGPT文字對談 16-2-4 開啟新的對話與登出ChatGPT 16-3 使用ChatGPT寫JavaScript程式 16-3-1 利用ChatGPT AI撰寫JavaScript程式 16-3-2 複製ChatGPT寫的程式碼 16-4 ChatGPT AI JavaScript程式範例集 16-4-1 實作基本的計算機 16-4-2 模擬大樂透的開獎程式 16-4-3 實作具有時針、分針、秒針的時鐘 16-4-4 製作電子簽名板 16-4-5 實作簡單的貪吃蛇遊戲 16-5 課堂上學不到的ChatGPT使用秘訣 16-5-1 善用ChatGPT指令大全 16-5-2 GPT-3.5與GPT-4

HTML/CSS/JavaScript與前端框架的完美結合：使用Bootstrap與PWA技術，新手從這開始！(好評回饋版) (3版)

類似書籍推薦給您

【簡介】 精采內容不容錯過，好評回饋中！！ 掌握HTML/CSS/JavaScript技巧， 搭配高效前端框架技術，輕鬆成為專業網頁設計師 以淺顯易懂的方式從設計網站開始談起，從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源，再循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript，並加入前端框架Bootstrap技術，加上書中介紹好用的配色工具，就算沒有美工基礎，藉由Bootstrap工具模組以及配色表，也能快速建構出專業美觀的RWD網站。 本書也安排了Progressive Web Application(PWA)技術，手把手教您逐步將網站優化為Web APP，讓網站能像Native App在手機等行動裝置建立桌面捷徑，瀏覽網頁時具有操作Native App相似的感受。 本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 |適用對象| ✰對前端技術有興趣卻不知從何入門的初學者 ✰前端開發技術相關從業人員 ✰大專院校網站設計相關課程教材 |重點特色| ✰以淺顯易懂的方式快速了解前端開發的觀念及技術。 ✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。 ✰循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript。 ✰活用前端框架Bootstrap技術以及工具模組，建構RWD網站。 ✰使用Progressive Web Application(PWA)技術，逐步將網站優化為Web APP。 精采內容不容錯過，好評回饋中！！ 本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 【目錄】 CHAPTER 01 網站開發的觀念與技術 1-1 網站開發的基礎觀念 1-1-1 網站及網頁 1-1-2 網頁開發的前端與後端 1-1-3 網址的組成 1-2 網站建置流程與技術 1-2-1 擬定網站主題 1-2-2 規劃網站架構與內容 1-2-3 製作網頁工具 1-2-4 上傳雲端 1-3 網頁介面原型建構工具 1-3-1 網站原型架構 1-3-2 介面線框與原型工具 1-3-3 實作網頁介面原型 CHAPTER 02 HTML與CSS基礎 2-1 學習HTML前的準備工作 2-1-1 建立HTML文件 2-1-2 自動生成HTML5架構程式碼 2-2 HTML語法概念與架構 2-2-1 HTML的標記型態 2-2-2 HTML的組成 2-2-3 標記屬性的運用 2-3 HTML5文件結構與語意標記 2-3-1 語意化的HTML標記 2-3-2 HTML5宣告與編碼設定 2-4 認識CSS基本架構 2-4-1 使用CSS樣式表 2-4-2 CSS基本格式 2-4-3 認識CSS選擇器 2-4-4 CSS的度量單位 2-4-5 CSS的顏色表示法 CHAPTER 03 HTML常用標記 3-1 排版相關標記 3-1-1 瀏覽器呈現網頁的過程 3-1-2 標題標記 3-1-3 段落及換行標記 3-2 項目列表清單 3-2-1 有序列表 3-2-2 無序列表清單 3-2-3 定義列表 3-3 表格與表單 3-3-1 表格 3-3-2 表單 3-3-3 表單元件 3-4 插入圖片與超連結 3-4-1 插入圖片 3-4-2 超連結 3-4-3 內置框架（iframe） 3-5 div標記與span標記 3-5-1 認識div標記 3-5-2 認識span標記 3-5-3 替程式碼加上註解 3-5-4 使用特殊符號及Emoji字符集 CHAPTER 04 CSS常用語法 4-1 文字與段落樣式 4-1-1 文字樣式 4-1-2 文字段落樣式 4-1-3 邊框 4-1-4 文繞圖 4-2 掌握CSS定位 4-2-1 網頁元件的定位（position） 4-2-2 立體網頁的定位 4-2-3 好用的calc()函式 CHAPTER 05 CSS Flexbox響應式排版 5-1 Flexbox模型概念 5-1-1 認識CSS盒子模型（Box Model） 5-1-2 認識Flexbox彈性盒子 5-2 Flexbox屬性 5-2-1 flex container屬性 5-2-2 flex Items屬性 CHAPTER 06 善用網路資源 6-1 圖庫素材分享平台 6-1-1 認識創用CC授權 6-1-2 搜尋CC授權素材 6-1-3 Icon nder-icon圖庫 6-1-4 替網站加入Logo小圖示 6-2 實用的網頁應用產生器 6-2-1 CSS Layout產生器 6-2-2 按鈕產生器 6-2-3 網站配色 CHAPTER 07 整合練習—詩詞展示網頁設計與實作 7-1 網頁架構說明 7-1-1 網頁架構圖 7-1-2 選擇合適的HTML標記 7-2 建立HTML與CSS程式碼 7-2-1 建立網頁架構的HTML語法 7-2-2 加入超連結 7-2-3 加入CSS語法 7-2-4 加入偽元素 7-2-5 利用Icon Fonts產生社群圖示 CHAPTER 08 JavaScript基礎 8-1 認識JavaScript 8-1-1 JavaScript基本觀念 8-1-2 JavaScript運行環境 8-1-3 瀏覽器主控台console 8-1-4 JavaScript語法架構 8-2 JavaScript基礎語法 8-2-1 JavaScript語法架構 8-2-2 JavaScript註解符號 8-2-3 資料型別（Data Type） 8-3 變數宣告與作用範圍 8-3-1 全域變數與區域變數 8-3-2 使用var關鍵字宣告變數 8-3-3 var宣告的作用域 8-3-4 使用Let關鍵字宣告變數 8-3-5 使用const關鍵字宣告常數 8-3-6 變數名稱的限制 CHAPTER 09 函式與作用域 9-1 自訂函式 9-1-1 函式的定義與呼叫 9-1-2 函式參數 9-1-3 函式回傳值 9-2 函式的多重用法 9-2-1 函式宣告式（Function Declaration） 9-2-2 函式表達式（Function Expressions） 9-2-3 物件與this關鍵字 9-2-4 立即執行函式（IIFE） CHAPTER 10 JavaScript操控DOM元素 10-1 DOM物件的方法與屬性 10-1-1 取得物件資訊 10-1-2 處理物件節點 10-1-3 屬性的讀取與設定 10-2 DOM物件的操作 10-2-1 Window物件 10-2-2 DOM集合（Collection） 10-3 DOM風格樣式 10-3-1 查詢元素樣式 10-3-2 設定元件樣式 CHAPTER 11 前端資料儲存 11-1 認識Web Storage 11-1-1 Web Storage概念 11-1-2 偵測瀏覽器是否支援Web Storage 11-2 localStorage及sessionStorage 11-2-1 存取localStorage 11-2-2 刪除localStorage 11-2-3 存取sessionStorage 11-3 IndexedDB資料庫 11-3-1 IndexedDB重要概念 11-3-2 IndexedDB基本操作 11-3-3 讀取資料 11-3-4 刪除資料 11-3-5 清空資料 CHAPTER 12 整合練習—個人通訊錄實作 12-1 網頁架構說明 12-1-1 網頁功能架構圖及線框圖 12-1-2 CSS Image Sprites 12-2 IndexedDB的CURD 12-2-1 建置資料庫物件及開啟交易 12-2-2 設定事件的處理函式 12-2-3 新增會員與新增完成 12-2-4 動態產生資料列表 12-2-5 修改與刪除單筆資料 12-2-6 清空資料與刪除資料庫 12-2-7 阻止事件傳遞與預設行為 CHAPTER 13 響應式網頁框架—Bootstrap 13-1 認識Bootstrap 13-1-1 為什麼要使用Bootstrap 13-1-2 下載Bootstrap 13-1-3 RWD的設計理念 13-2 Bootstrap排版 13-2-1 斷點（Breakpoint）與容器（Container） 13-2-2 了解Grid System 13-2-3 Viewport與Media queries 13-3 Bootstrap的樣式 13-3-1 Bootstrap通用顏色 13-3-2 Bootstrap間距 13-3-3 Bootstrap寬度與高度 13-3-4 Bootstrap文字 13-4 圖片與表格 13-4-1 響應式圖片 13-4-2 邊框圓角 13-4-3 建立Bootstrap表格 CHAPTER 14 Bootstrap擴充元件庫 14-1 導覽與選單 14-1-1 導覽列（Navigation Bar） 14-2 表單與按鈕 14-2-1 表單控制元件 14-2-2 表單排版 14-3 輪播元件（Carousel） 14-3-1 基本的輪播效果 14-3-2 利用JavaScript控制輪播 CHAPTER 15 PWA實作—我的記帳本Web App 15-1 實作「我的記帳本」網頁 15-1-1 「我的記帳本」網頁功能與介面 15-1-2 下拉式選單 15-1-3 按鈕群組 15-1-4 互動視窗 15-1-5 IndexedDB關鍵字查詢 15-1-6 善用Bootstrap Icons製作小圖示 15-2 將網頁轉換成PWA 15-2-1 什麼是PWA 15-2-2 製作各種尺寸的App圖示按鈕 15-2-3 將網頁變成PWA