課程 20480-C: Programming in HTML5 with JavaScript and CSS3

本課程介紹 HTML5、CSS3和JavaScript。本課程幫助學生獲得基本的 HTML5 / CSS3 / JavaScript 編程技能。本課程是 Web 應用程式和 Windows Store 應用程式培訓路徑的切入點。該課程的重點是使用 HTML5 / CSS3 / JavaScript 來實作編程邏輯,定義和使用變量,執行循環和分支,開髮用戶介面,捕獲和驗證用戶輸入,存放資料以及建立結構良好的應用程式。選擇本課程中的實驗室方案來支援和演示各種應用方案的結構。它們旨在關注用於建立 HTML5 軟體應用程式的原理和編碼元件/結構。本課程使用 Windows 10 上執行的 Visual Studio 2017。

對象設定檔

本課程適用於具有 6-12 個月編程經驗並且對使用 HTML5 和 JavaScript 和 CSS3 開發應用程式(Windows 10 的 Windows Store 應用程式或 Web 應用程式)感興趣的專業開發人員。

職務角色: 開發人員

獲得的技能

  • 說明如何使用 Visual Studio 2017 建立和運行 Web 應用程式。
  • 描述 HTML5 的新功能,並建立 HTML5 頁面並設置其樣式。
  • 使用 JavaScript 將交互性添加到 HTML5 頁面。

必要條件

  • 1-3 個月建立 Web 應用程式的經驗,包括編寫簡單的 JavaScript 代碼
  • 1 個月建立 Windows 客戶端應用程式的經驗
  • 1 個月使用 Visual Studio 2017 的經驗

課程大綱

模組 1: HTML 和 CSS 概述

大多數現代 Web 應用程式都建立在 HTML 頁面的基礎上,HTML 頁面描述了如下內容:用戶閱讀和交互的內容,樣式表使內容在視覺上令人愉悅,JavaScript 代碼則提供了用戶與頁面、頁面與伺服器之間的交互性。Web 瀏覽器使用 HTML 標記和样式表來呈現此內容,並運行 JavaScript 代碼以實作應用程式的行為。本模組回顧了 HTML 和 CSS 的基礎知識,並介紹了本課程用於建立 HTML 頁面和样式表的工具。

課程

  • HTML 概述
  • CSS 概述
  • 使用 Visual Studio 2017 建立 Web 應用程式

實驗室: 探索 Contoso Conference 應用程式

  • 探索 Contoso Conference 應用程式
  • 檢查和修改 Contoso Conference 應用程式

完成本單元後,學生將能夠:

  • 說明如何使用 HTML 元素和屬性來佈置網頁。
  • 說明如何使用 CSS 將基本樣式應用於網頁。
  • 描述 Microsoft Visual Studio 提供的用於構建 Web 應用程式的工具。

模組 2: 建立 HTML 頁面並對其進行樣式設置

構成所有 Web 應用程式 HTML、CSS 和 JavaScript 基礎的技術已經使用了很多年,但是 Web 應用程式的目的和復雜性已經發生了很大變化。HTML5 是這 10 年來的第一個主要的 HTML 版本,它為傳統的 Web 應用程式、在手持式移動設備上以及 Windows 10 平台上運行的應用程式提供了一種非常合適的呈現內容的方法。本模組介紹 HTML5,描述其新功能,演示如何使用 HTML5 中的新功能來呈現內容以及如何使用 CSS 設置內容樣式。

課程

  • 建立 HTML5 頁面
  • 對 HTML5 頁面進行樣式設置

實驗室: 建立 HTML5 頁面並對其進行樣式設置

  • 建立 HTML5 頁面
  • 對 HTML 頁面進行樣式設置

完成本單元後,學生將能夠:

  • 描述 HTML5 的目的和新功能,並說明如何使用新的 HTML5 元素來佈置網頁。
  • 說明如何使用 CSS 設置 web 網頁佈局、文本和背景的樣式。

模組 3: JavaScript 導論

HTML 和 CSS 提供了 web 網頁的結構、語義和呈現方面的訊息。但是,這些技術沒有描述用戶如何使用瀏覽器與頁面進行交互。為了實作此功能,所有現代瀏覽器都包括一個 JavaScript 引擎,以支援在頁面中使用腳本。他們還實作了文檔對像模型(DOM),這是一種 W3C 標準,用於定義瀏覽器應如何在內存中反映頁面,以使腳本引擎能夠存取和更改該頁面的內容。本模組介紹 JavaScript 編程和 DOM。

課程

  • JavaScript 概述
  • 文檔對像模型導論

實驗室: 使用 JavaScript 顯示資料和處理事件。

  • 以編程方式顯示資料
  • 處理事件

完成本單元後,學生將能夠:

  • 描述基本的 JavaScript 語法。
  • 編寫使用 DOM 更改和檢索 web 網頁訊息的 JavaScript 代碼。

模組 4: 建立表單以收集和驗證用戶輸入

Web 應用程式經常需要收集用戶輸入以執行其任務。Web 網頁在有關用戶輸入的內容方面需要簡潔明了,以最大程度地減少對用戶提供的訊息所發生的令人沮喪的誤解。此外,必須驗證所有輸入以確保其符合應用程式的要求。在本模組中,您將學習如何使用 HTML5 中提供的新輸入類型來定義輸入表單。您還將看到如何使用 HTML5 屬性來驗證資料。最後,您將學習如何使用 JavaScript 代碼執行擴展的輸入驗證,以及如何在用戶輸入無效或與應用程式期望不符時向用戶提供反饋。

課程

  • 建立 HTML5 表單
  • 使用 HTML5 屬性驗證用戶輸入
  • 使用 JavaScript 驗證用戶輸入

實驗室: 建立表單並驗證用戶輸入

  • 使用 HTML5 屬性建立表單並驗證用戶輸入
  • 使用 JavaScript 驗證用戶輸入

完成本單元後,學生將能夠:

  • 使用 HTML5 建立輸入表單。
  • 使用 HTML5 表單屬性來驗證資料。
  • 編寫 JavaScript 代碼以執行無法使用 HTML5 屬性輕鬆實作的驗證任務。

模組 5: 與遠端伺服器通信

許多 Web 應用程式需要使用遠端站點保存的資料。在某些情況下,您可以簡單地透過從指定的 URL 下載來存取此資料,但在其他情況下,資料由遠端站點封裝並可以透過 Web 服務進行存取。在本模組中,您將學習如何使用 JavaScript 代碼存取 Web 服務以及如何將遠端資料合併到 Web 應用程式中。您將看到實作這一點所需要的兩種技術:XMLHttpRequest 對象,它充當遠端 web 網站 HTTP 請求的編程包裝;以及 Fetch API,它簡化了發送請求和接收資料中涉及的許多任務。因為 Fetch API 和 XMLHttpRequest 對像是異步 API,所以您將首先了解如何使用 Promise 對象、箭頭函數和新的 async / await 語法處理異步任務,這些工具使您可以像處理同步請求一樣處理異步請求。

課程

  • JavaScript 中的異步編程
  • 使用 XMLHttpRequest 對象發送和接收資料
  • 使用 Fetch API 發送和接收資料

實驗室: 與遠端資料源進行通信

  • 檢索資料
  • 序列化和傳輸資料
  • 使用 jQuery ajax 方法重構代碼

完成本單元後,學生將能夠:

  • 使用新的異步編程技術處理異步 JavaScript 任務。
  • 使用 XMLHttpRequest 對象將資料發送到 Web 服務並從 Web 服務接收資料。
  • 使用 Fetch API 將資料發送到 Web 服務並從 Web 服務接收資料。

模組 6: 使用 CSS3 對 HTML5 進行樣式設置

對 web 網頁顯示的內容進行樣式設置是使應用程式具有吸引力且易於使用的重要方面。CSS 是 web 應用程式用於實作樣式設置的主要機制,並且 CSS3 中添加的功能支援現代瀏覽器中的許多新功能。在 CSS1 和 CSS2.1 是單個文檔的情況下,萬維網聯合會選擇將 CSS3 編寫為一組模組,每個模組專注於內容呈現的單個方面,例如顏色,文本,框模型和動畫。這允許規範及其實作可以增量地發展。每個規範定義 CSS1 和 CSS2 中已經存在的屬性和值,以及新的屬性和值。在本模組中,您將檢查在其中幾個模組中定義的屬性和值,在 CSS3 中定義的新選擇程式,以及使用偽類和偽元素來完善這些選擇。

課程

  • 使用 CSS3 設置文字樣式
  • 樣式塊元素
  • 偽類和偽元素
  • 使用 CSS3 增強圖形效果

實驗室: 使用 CSS3 設置文本和塊元素的樣式

  • 設置導航欄的樣式
  • 設置寄存器鏈接的樣式
  • 設置關於頁面的樣式

完成本單元後,學生將能夠:

  • 使用 CSS3 的新功能來設置文本元素的樣式。
  • 使用 CSS3 的新功能來設置塊元素的樣式。
  • 使用 CSS3 選擇程式、偽類和偽元素來完善元素的樣式設置。
  • 透過使用 CSS3 圖形效果增強頁面效果。

模組 7: 使用 JavaScript 建立對象和方法

代碼重用和易於維護是編寫結構良好的應用程式的主要目標。如果可以實作這些目標,則將減少與編寫和維護代碼相關的成本。本模組描述如何透過使用語言功能(例如名稱空間,對象,封裝和繼承)編寫結構良好的 JavaScript 代碼。如果您具有使用 Java 或 C# 等語言的經驗,這些概念可能看起來會很熟悉,但是 JavaScript 方法卻大不相同,如果要編寫可維護的代碼,則必須理解許多細微之處。

課程

  • 編寫結構良好的 JavaScript 代碼
  • 建立自定義對象
  • 延伸物件

實驗室: 完善代碼的可維護性和可擴展性

  • 對象繼承
  • 重構 JavaScript 代碼以使用對象

学完本模組後,學生將能夠:

  • 編寫結構良好的 JavaScript 代碼。
  • 使用 JavaScript 代碼建立自定義對象。
  • 透過使用 JavaScript 習慣用法實作面向對象的技術。

模組 8: 使用 HTML5 API 建立交互式頁面

交互性是現代 Web 應用程式的關鍵方面,使您能夠構建引人注目的網站,這些網站可以快速響應用戶的操作,並使自己適應用戶的位置。本模組描述如何建立可存取本地檔案系統的交互式 HTML5 Web 應用程式,使用戶能夠將資料拖放到 Web 頁面中的元素上、播放多媒體檔案以及獲取地理位置訊息。

課程

  • 與檔案互動
  • 合併多媒體
  • 對瀏覽器的位置和上下文做出反應
  • 調試和分析 Web 應用程式

實驗室: 使用 HTML5 API 建立交互式頁面

  • 拖放圖像
  • 合併視頻
  • 使用地理位置 API 報告用戶的當前位置

完成本單元後,學生將能夠:

  • 存取本地檔案系統,並向 web 網頁添加拖放支援。
  • 無需插件即可播放 web 網頁中的視頻和音頻檔案。取得有關用戶當前位置的訊息。
  • 使用 Microsoft Edge 中的 F12 開發人員工具調試和分析 Web 應用程式。

模組 9: 向 Web 應用程式添加脫機支援

Web 應用程式依賴於能夠連接到網路以取得 web 網頁和資料的能力。但是,在某些環境中,網路連接可能是間斷的。在這些情況下,使用用戶設備上緩存的資料使應用程式繼續運行可能會很有用。HTML5 提供了新的客戶端存放選項供您選擇,包括會話存放和本地存放,以及一種稱為 Application Cache 的資源緩存機制。在本模組中,您將學習如何使用這些技術來建立強健的 Web 應用程式,即使網路連接不可用,Web 應用程式也可以繼續運行。

課程

  • 本地讀寫資料
  • 使用 Application Cache 添加脫機支援

實驗室: 向 Web 應用程式添加脫機支援

  • 使用 Application Cache API 緩存脫機資料
  • 使用本地存放 API 保留用戶資料

完成本單元後,學生將能夠:

  • 將資料保存在本地用戶設備上,然後從 Web 應用程式存取此資料。
  • 使用 Application Cache 將 Web 應用程式設定為支援脫機操作。

模組 10: 實作自適應用戶介面

Web 網路最持久的功能之一就是它的臨時性。鍵盤和鼠標的壟斷第一次受到挑戰,這意味著質疑用戶介面的設計方式。您可以在帶有大型高分辨率顯示器、鼠標和鍵盤的計算機上開發 Web 應用程式,但其他用戶則可以在沒有鼠標的情況下在智能手機或平板電腦或者使用帶有不同的分辨率的顯示器上查看您的應用程式並與之交互。用戶可能還需要打印應用程式的頁面。在本模組中,您將學習如何建立一個網站,以使其頁面的佈局和功能適應查看網站的設備的功能和外形尺寸。您將看到如何檢測用於查看頁面的設備的類型,並學習如何佈置可有效針對特定設備的內容的策略。

課程

  • 支援多種尺寸
  • 建立自適應用戶介面

實驗室: 實作自適應用戶介面

  • 建立適合打印的樣式表
  • 調整頁面佈局以適合不同的外形尺寸

完成本單元後,學生將能夠:

  • 描述在網站中對不同外形尺寸的要求。
  • 建立可調整其佈局以匹配顯示設備的外形尺寸的 web 網頁。

模組 11: 建立高級圖形

高分辨率的交互式圖形是大多數現代應用程式的關鍵部分。圖形可以透過為內容提供視覺效果來幫助增強用戶的體驗,從而使網站更具吸引力並且更易於使用。交互性使網站中的圖形元素能夠適應並響應用戶的輸入或對環境的更改,並且是保持用戶的注意力及其對內容的興趣的另一個重要元素。

本模組介紹如何使用可縮放矢量圖形(SVG)和 Microsoft Canvas API 在 HTML5 中建立高級圖形。您將學習如何使用與 SVG 相關的元素,以及如何在 web 網頁上顯示圖形內容。您還將學習如何透過使用鍵盤事件和鼠標事件等事件使用戶與 SVG 元素進行交互。

Canvas API 與 SVG 有所不同。Canvas API 提供了一個元素和一組 JavaScript 函數,您可以調用這些元素和函數在畫布表面上繪製圖形。您將學習如何使用 Canvas API,並找出何時更適合使用 Canvas 或 SVG。

課程

  • 使用 SVG 建立交互式圖形
  • 使用 Canvas API 繪製圖形

實驗室: 建立高級圖形

  • 使用 SVG 建立交互式場館地圖
  • 使用 Canvas API 建立演講者徽章

完成本單元後,學生將能夠:

  • 使用 SVG 建立交互式圖形內容。
  • 使用 Canvas API 以編程方式生成圖形內容。

模組 12: 對用戶介面進行動畫處理

動畫是保持用戶對網站的興趣的關鍵元素。精心實作的動畫可以改善 web 網頁的可用性,並提供有關用戶操作的有用視覺反饋。

本模組描述如何使用 CSS 動畫增強 web 網頁效果。您將學習如何將过渡應用於屬性值。过渡使您可以指定屬性更改的時間。例如,您可以指定當鼠標指針懸停在某個元素上時,元素應在五秒鐘內更改其寬度和高度。接下來,您將學習如何將 2D 和 3D 轉換應用於元素。轉換使您能夠縮放、平移、旋轉和傾斜元素。您還可以將過渡應用於變換,以便在指定的動畫週期內逐漸應用變換。

在本模組的最後,您將學習如何將關鍵幀動畫應用於元素。關鍵幀動畫使您可以在動畫過程中的特定時刻定義一組屬性值。例如,可以在動畫週期的0%,33%,66%和100%處指定元素的顏色和位置。

課程

  • 應用 CSS 過渡
  • 轉換元素
  • 應用 CSS 關鍵幀動畫

實驗室: 動畫處理用戶介面

  • 應用 CSS 過渡
  • 應用關鍵幀動畫

完成本單元後,學生將能夠:

  • 應用過渡以將屬性值設置為 HTML 元素的動畫。
  • 將 2D 和 3D 轉換應用於 HTML 元素。
  • 將關鍵幀動畫應用於 HTML 元素。

模組 13: 使用 Web 套接字實作實時通信

Web 網頁透過提交 HTTP 請求來按需從 Web 伺服器請求資料。該模型是構建交互式應用程式的理想選擇,該應用程式的功能由用戶的操作來驅動。但是,在需要顯示不斷變化的訊息的應用程式中,此機制不太適合。例如,如果金融股票頁面顯示的甚至只是幾分鐘前的價格,那麼它就一文不值,並且您不能指望用戶不斷刷新瀏覽器中顯示的頁面。這時,Web 套接字就非常有用。Web Sockets API 提供了一種用於在 Web 伺服器和瀏覽器之間實作實時雙向通信的機制。

本模組介紹 Web 套接字,描述它們的工作方式,並說明如何建立 web 套接字連接,該連接可用於在 web 網頁和 web 伺服器之間實時傳輸資料。

課程

  • Web 套接字導論
  • 使用 WebSocket API

實驗室: 使用 Web 套接字執行實時通信

  • 從 Web 套接字接收消息
  • 將消息發送到 Web 套接字
  • 處理不同的 Web 套接字消息類型

完成本單元後,學生將能夠:

  • 描述使用 Web 套接字如何幫助實作 Web 網頁和 Web 伺服器之間的實時通信。
  • 使用 Web Sockets API 從 web 網頁連接到 web 伺服器,並在 web 網頁和 web 伺服器之間交換消息。

模組 14: 使用 Web Workers 執行後台處理

JavaScript 代碼是用於在 web 網頁中實作功能的強大工具,但是您需要記住,此代碼在 web 網頁加載時或在顯示 web 網頁時響應用戶操作時運行。該代碼由瀏覽器運行,並且如果該代碼執行需要花費大量時間才能完成的操作,則瀏覽器可能會無響應並降低用戶體驗。

HTML5 引入了 Web Worker,使您可以將處理工作轉移到單獨的後台線程,從而使瀏覽器保持響應狀態。本模組描述了 Web Worker 的操作方式以及如何在 Web 應用程式中使用它們。

課程

  • 了解 Web Worker
  • 使用 Web Worker 執行異步處理

實驗室: 建立 Web Worker 進程

  • 透過使用 Web Worker 來提高響應能力

完成本單元後,學生將能夠:

  • 說明如何使用 Web Worker 來實作多線程並提高 Web 應用程式的響應速度。
  • 透過使用 Web Worker 執行處理工作,與 Web Worker 進行通信並控製 Web Worker 。

模組 15: 打包 JavaScript 以進行生產部署

使用模型可以構建大型的複雜的應用程式。ECMAScript6 版本中語言的進步可以使應用程式構建程式簡化應用程式構建過程。 但是,並非所有瀏覽器都支援使用 ECMAScript6 模組和其他功能。諸如 Node.js,Webpack 和 Babel 之類的工具允許使用新的語言功能以及支援不同的瀏覽器,以避免損害用戶體驗。

在本模組中,我們將介紹這些工具背後的理論,何時需要使用它們以及使用的不同選項。在模組的最後,我們將看到如何使用這些工具來編寫所有瀏覽器都支援的 ECMAScript6 代碼。

課程

  • 了解編譯器和模組捆綁
  • 為跨瀏覽器支援建立單獨的軟體包

實驗室: 設置 Webpack 捆綁用於生產

  • 使用 WebPack 建立和部署程序包