網頁開發與設計

深入網頁程式語言的世界 JavaScript這項程式語言的強項是讓使用者在網頁裡加入程式，幾乎可以說是現今所有網頁應用程式的核心，從社群媒體網站到瀏覽器上運行的遊戲都有JavaScript的身影。不僅如此，幾乎所有設備都能執行JavaScript，使其成為使用者撰寫通用程式碼的絕佳選擇。 這本經典之作的第四版將帶領各位讀者踏上網頁程式語言的學習之旅，從最基本的程式元素開始，逐步建構令人興味盎然的完整程式。本書作者不吝與讀者分享自身多年來維護熱門開放原始碼專案的親身經驗，融入實務見解和範例，讓書中文字更加生動有趣。 《精通 JavaScript 第四版》的更新焦點會放在深入介紹2024年版的JavaScript，調整某些主題的學習重心，更適切地反映現今的開發實務。 本書採用實務導向的教學方式，將理論深植於大量實例之中，激發讀者的學習動機。前半部分的章節內容會完整介紹程式語言的基礎知識，後半部分的章節則會展示如何在兩種程式開發環境中應用前面學到的知識，分別是：網頁瀏覽器和Node.js。本書還納入五個「實作專案」章節，示範如何開發更大型的程式，以對話口吻的輕鬆方式，引導讀者循序漸進學習。這些實作專案包括：路徑搜尋機器人、小型的程式語言、2D平面遊戲、小畫家程式和簡單的動態網站。 多數章節的結尾都會提出練習題來挑戰各位讀者的創造力，藉此練習運用該章節介紹過的概念和技術。本書另有建置一個學習配套網站，提供互動式環境，協助讀者操作這些練習題，探索書中的範例程式。 本書充滿豐富的啟發內容，不論讀者是想要學習JavaScript的初學者或是打算提升自我程式設計技巧的進階學習者，都能從書中找到激發你思考的亮點。 ※本書程式已更新至2024年版的ECMAScript。

第二版全面升級成全彩印刷，閱讀上更加美觀舒適！ 內容也更新成最新技術，快速適應未來潮流！ 「前端效能優化」最全面的書籍！ 精通前端基礎和優化技術，為你打造高效能網站！ 本書內容改編自第 13 屆 2021 iThome 鐵人賽，Modern Web 組冠軍網路系列文章──《今晚，我想來點 Web 前端效能優化大補帖！》。本書彙整了網頁前端應用效能優化的各種技巧，並以此為出發點，延伸至許多前端領域必備的知識。搭配簡易圖文和範例檔實作，讓你打造高效能的前端應用，解決網站效能痛點，提升速度與使用者體驗，增加網站曝光率與流量！ 本次改版除了將一些過時的內容更新，以及新增新的章節以外，也驗證了大部分的篇章概念是不會因為前端技術本身或是 AI 的發展而變成無用的知識。作者希望透過「前端效能優化」這個主題協助讀者掌握前端開發裡的「底層邏輯」，在快速變化的前端領域掌握不變的核心概念，培養能夠快速適應未來改變的扎實基底！ 專注底層邏輯才能永不過時！ 讓你增進網站效能的四劑大補帖 ▍小細節讓效能UP 除了依賴指標，還要從對的地方著手！ ▍前端開發心法 用對優化工具和技術，提升效能&使用者體驗。 ▍深入技術原理 介紹前端技術原理，精通前端應用知識。 ▍提供完整範例 跟著實作範例學習，強化前端優化技能！ 【精彩內容】 •認識 Core Web Vitals、RAIL Model、Lighthouse 等指標和效能監測工具，找出效能不足的地方。 •建立前端必備知識：瀏覽器架構與渲染流程、網路與快取、JavaScript 記憶體管理機制，並學習正確的圖片資源、檔案壓縮與打包技術。 •在不同情境下使用正確的優化技術：Code Splitting、動態載入、Tree Shaking、模組化技巧、Web Workers 與 WebAssembly。 •使用 DevTool 檢測網站效能、實作 Debounce 與 Throttle，達到網站節流。 【目標讀者】 ✦想要了解各種效能優化技巧的前端開發者 ✦想要更理解前端開發底層知識的開發者 ✦想了解前端開發近期發展與未來趨勢的讀者 下載範例程式檔案 本書的程式碼是由GitHub託管，可點選下面圖案前往下載： https://github.com/kylemocode/f2e-performance-optimization-book-demo 升級全彩

提昇TypeScript技術的83個具體做法 「Effective TypeScript探討使用TypeScript時最常見的問題，並提出實用的、結果導向的建議。無論你的TypeScript經驗如何，都可以從本書學到一些東西。」 ―Ryan Cavanaugh，微軟TypeScript工程主管 「本書滿載著實用的撇步，專業的TypeScript開發者都應該把這本書放在桌上。即使你認為已經熟悉TypeScript了，買下這本書也絕對不會後悔。」 ―Yakov Fain, Java Champion TypeScript是包含型態的JavaScript超集合，能有效解決許多JavaScript惡名昭彰的問題。然而，TypeScript有自成一格的學習曲線，開發者往往需投入大量時間來實際操作才能有效運用其強大功能。這本實用的書籍採取《Effective C++》與《Effective Java》（皆由Addison-Wesley出版）風糜已久的寫作風格，提出83條具體建議，明確說明哪些做法值得採用、哪些應該避免，以及如何深入理解這門語言的設計思維。 作者Dan Vanderkam將透過實際範例指引你如何實際運用每一項建議。無論你是TypeScript的初學者，還是已掌握基礎知識、希望更進一步的開發者，本書都將協助你晉升為能熟練運用 TypeScript的專家。 第二版內容更新至TypeScript 5.X，並加入了兩個全新章節，深入介紹型態級程式設計與各種進階的 TypeScript技巧。 •學習TypeScript型態系統的運作細節 •使用型態推斷，以最少的型態註記來獲得嚴密的安全性 •設計型態，讓程式碼更安全且更容易瞭解 •使用泛型型態與型態級設計來定義複雜的API •瞭解依賴項目與型態宣告檔案在TypeScript之中如何運作 •將JavaScript程式順利遷移至TypeScript

最容易理解、讓初學者秒懂的範例解說！ 最關鍵的完整範例，一個抵十個，重點觀念一次搞懂 最實務的程式碼練習，別再說網頁設計難以上手 ■ 內容再強化 -整合GitHub Copilot人工智慧輔助功能，加速程式編寫效率，體驗AI驅動的網頁開發流程。 -強化CSS3與HTML5最新特性詳解，掌握最新網頁技術趨勢，打造現代化行動網頁介面。 -多個超實務專案範例，從零開始一步步完成完整行動網頁設計作品。 ■ Visual Studio Code網頁編輯器入門教學 快速熟悉輕便型╱專業型的熱門網站開發工具，搭配擴充套件大幅提升網頁建置效率。 ■ GitHub Copilot AI程式輔助工具 學習如何善用AI協作工具提高開發效率，讓你更輕鬆、更快速地完成網頁設計任務。 ■ 雲端版本控制服務GitHub應用 立刻掌握Git核心概念，透過GitHub輕鬆放置網頁作品、團隊協作，掌握業界實務技能。 ■ HTML5與CSS3核心技術詳解 圖文並茂，透過最淺顯易懂的範例說明，快速理解並奠定紮實的網頁開發基礎。 ■ 超實務響應式網頁設計範例（RWD） 多個完整且實用的專案實作範例，讓你徹底了解從零打造各種螢幕尺寸都完美呈現的網頁技巧。 Bootstrap 5語法教學，帶你迅速掌握框架語法，輕鬆建構美觀且功能完整的響應式網頁。 ■ 掌握主流響應式版面設計技巧 企業網頁╱多欄式網頁╱視差網頁╱側欄固定網頁，最完整的範例說明，一次搞懂主流版面設計方式。 ■ 搭配範例邊學邊做更有效！

這本經典暢銷書邁入第九版，感謝眾多讀者與授課教師的支持！ 此次改版除了更新網頁設計相關技術的最新規格，更融入了與AI助理協同作業的觀念與技巧。 傳統以語法為導向的學習模式，在AI時代已轉向「以問題解決為核心」：面對需求時，先拆解問題規劃解法，接著才是撰寫程式碼、測試程式碼。 本書不只教您寫出正確語法，更培養能與 AI 高效溝通的問題解決能力，讓您能生成、審閱並測試出安全、正確且效能良好的程式碼。 ★網頁設計小白一學就會★ 語法教學、範例導向、全彩圖解、淺顯易懂！ ★快速掌握網頁設計關鍵技術★ 網羅最新技術、最新語法、活用熱門前端框架！ 【HTML】、【CSS】與【JavaScript】是網頁設計最核心、也最基礎的技術，無論您是想從頭開發一個網頁或改寫既有的網頁，這三種技術都是必學的基本功。此外，我們還會介紹【響應式網頁設計 (RWD)】、【Bootstrap】、【Vue.js】、【jQuery】等進階的技術與前端框架，幫助您更有效率地開發網頁。 ★與ChatGPT合作寫程式★ 提示工程、拆解問題、生成程式碼、完整測試與除錯！ 在本書中，我們會在章節的開頭講解重要的語法與主題，然後在結尾的地方透過【ChatGPT程式助理新思維】專欄，示範如何與AI助理協同作業，讓初學者不再糾結於繁瑣的語法，快速寫出正確、高效、有用的程式，相同的技巧也可以運用到Gemini、Copilot、Perplexity、Claude等AI助理！ ★提示工程技巧大公開★ 規劃網站架構與繪製網站地圖◎根據線框圖生成網頁、測試與修改◎查詢HTML元素的用途、語法及範例◎根據試算表或表格資料生成網頁、測試、修改與美化◎生成表單網頁、測試、修改與美化◎查詢CSS屬性、針對指定樣式與效果撰寫程式碼◎設定網頁的外觀◎查詢JavaScript語法、撰寫、解讀與轉換程式、註解、除錯◎撰寫綜所稅試算網頁◎查詢Bootstrap語法與元件、撰寫Bootstrap網頁。

全新章節教您巧妙運用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 來協助程式開發。 全新章節教您巧妙運用AI，讓寫程式更有效率！！ 本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端

JavaScript快速入門與樂趣兼備 《JavaScript程式設計的樂趣》是一本節奏明快又充滿樂趣的程式設計入門指南，帶你用 JavaScript輕鬆踏進程式設計的世界。翻開本書，立刻開始撰寫程式、解決問題，並在短時間內完成可運作的網頁應用與遊戲。 你將從學習變數、陣列、物件、函式、條件判斷、迴圈、類別等基本的程式設計概念開始；在生動的範例和實作練習的幫助下，這些基礎知識將幫助你結合JavaScript、HTML與CSS，建立可以立即執行的互動式網頁應用程式。 接著，你將運用新習得的技能完成三個專案：  一個有虛擬對手的乒乓球模擬遊戲  一個能產生電子音樂的應用程式  一個能從API取得資料並進行視覺化的平台 在這個過程中，你將學到如何： ．透過操作文件物件模型（DOM）來即時更新網頁內容。 ．觸發函式來回應按鍵和滑鼠點擊等事件。 ．使用JavaScript和HTML的Canvas元素產生圖形和動畫。 ．利用D3.js程式庫和可縮放向量圖形（SVG）進行資料視覺化。 ．運用Tone.js和Web Audio API製作電子音樂。 如果你正想一探程式設計，《JavaScript程式設計的樂趣》就是你的魔法工具，帶你快速進入這個奇妙世界，輕鬆寫出真正的程式。別再等了，現在就出發吧！

打造高品質Vue Components的實戰設計指南 讓你成為可設計元件的專業人才 掌握Vue Components核心設計思維與實戰技巧 全面提升前端開發的維護性、擴充性與易用性 【內容簡介】 ♚從基礎到進階：掌握元件開發的核心技巧與設計思維 ♚原子元件設計：打造高可重用、易維護的元件庫 ♚實戰案例導向：完整拆解從UI到邏輯的設計與實作過程 ♚豐富技術細節：涵蓋高階開發技巧，全面提升實戰技能 本書改編自第16屆iThome鐵人賽Modern Web組冠軍系列文章《為你自己寫Vue Component》。在前端開發的世界裡，Vue Components是連結UI設計與商業邏輯的關鍵橋梁，從畫面呈現、資料綁定到可重用的功能模組，元件不只是程式碼片段，更是專案維護性、擴充性與團隊協作的核心。 《為你寫的Vue Components》將帶你從零開始，逐步建立屬於自己的元件設計思維。書中不僅示範如何撰寫高效、可擴充的元件，還深入探討如何實作鍵盤操作與無障礙設計的細節，而SSR應該注意的小訣竅，讓我們設計出來的元件不只自己好用，也為你身邊的各種角色帶來開發與生活上的便利性。 無論你是剛接觸Vue的新手，或是想精進架構與設計能力的前端工程師，本書都將是你打造高品質Vue Components的最佳指南。 【目標讀者】 ✪正在學習或重構Vue元件的工程師。 ✪想要打造UI Library的團隊成員。 ✪在意高效、可維護性、無障礙與一致性的開發人員。 ✪對Atomic Design與元件化實戰有興趣的開發人員。 本書改編自第16屆iThome鐵人賽Modern Web組冠軍系列文章《為你自己寫Vue Component》。在前端開發的世界裡，Vue Components是連結UI設計與商業邏輯的關鍵橋梁，從畫面呈現、資料綁定到可重用的功能模組，元件不只是程式碼片段，更是專案維護性、擴充性與團隊協作的核心。《為你寫的Vue Components》將帶你從零開始，逐步建立屬於自己的元件設計思維。書中不僅示範如何撰寫高效、可擴充的元件，還深入探討如何實作鍵盤操作與無障礙設計的細節，而SSR應該注意的小訣竅，讓我們設計出來的元件不只自己好用，也為你身邊的各種角色帶來開發與生活上的便利性。無論你是剛接觸Vue的新手，或是想精進架構與設計能力的前端工程師，本書都將是你打造高品質Vue Comp