Microsoft - Programming in HTML5 with JavaScript and CSS3

Kursplan

MOC 20480C: Programming i HTML5 med JavaScript och CSS3

Modul 1: Översikt av HTML och CSS

I denna modul gås grunderna i HTML och CSS, igenom, och verktygen som används i denna kurs för att skapa HTML-sidor och stilmallar introduceras

Lektioner

• Översikt av HTML
• Översikt av CSS
• Skapa en Web Application med Visual Studio 2017

Lab: Utforska Contoso Conference Application

• Utforska Contoso Conference Application
• Undersöka och modifiera Contoso Conference Application

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Förklara hur man använder HTML element och attribut för att layouta en webbsida.
• Förklara hur man använder CSS för att tillämpa grundläggande stil på en webbsida.
• Beskriva de verktyg som Microsoft Visual Studio tillhandahåller för att skapa webbapplikationer.

Module 2: Skapa och styla HTML sidor

Denna modul introducerar HTML5, beskriver dess nya funktioner, visar hur man presenterar innehåll med hjälp av de nya funktionerna i HTML5 och hur man stylar detta innehåll med hjälp av CSS.

Lektioner

• Skapa en HTML5-sida
• Styla en HTML5-sida

Lab: Skapa och styla HTML5-sidor

• Skapa HTML5-sidor
• Styla HTML-sidor

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Beskriva syftet med och de nya funktionerna i HTML5 samt förklara hur man använder nya HTML5-element för att layouta en webbsida.
• Förklara hur man använder CSS för att styla layouten, texten och bakgrunden på en webbsida.

Modul 3: Introduktion till JavaScript

Denna modul introducerar JavaScript-programmering och DOM.

Lektioner

• Översikt av JavaScript
• Introduktion till Document Object Model

Lab: Visa data och hantera händelser med hjälp av JavaScript.

• Visa data med kod
• Hantera händelser

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Beskriva grundläggande JavaScript syntax
• Skriva JavaScript kod som använder DOM för att ändra och hämta information från en webbsida

Modul 4: Skapa Forms formulär för att samla in och validera User Input

I denna modul kommer du lära dig hur man definierar inmatningsformulär med hjälp av de nya inmatningstyperna som finns tillgängliga i HTML5. Du kommer också att se hur man validerar data med hjälp av HTML5-attribut. Slutligen kommer du att lära dig hur man utför utökad validering av inmatning med hjälp av JavaScript-kod och hur man ger feedback till användare när deras inmatning inte är giltig eller inte överensstämmer med applikationens förväntningar.

Lektioner

• Skapa HTML5-formulär
• Validera användarinput med hjälp av HTML5 Attributes
• Validera användarinput med hjälp av JavaScript

Lab: Skapa ett formulär och validera User Input

• Skapa ett formulär och validera User Input med hjälp av HTML5 Attributes
• Validera User Input med hjälp av JavaScript

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Skapa inmatningsformulär med hjälp av HTML5
• Använda HTML5 formulärattribut för att validera data
• Skriva JavaScript kod för att utföra valideringsuppgifter som inte enkelt kan implementeras med hjälp av HTML5 attribut

Module 5: Kommunikation med en Remote Server

I denna modul kommer du att lära dig hur man får åtkomst till en webbtjänst med hjälp av JavaScript-kod och hur man integrerar remote data i dina webbapplikationer.

Lektioner

• Async-programmering i JavaScript
• Skicka och ta emot data med hjälp av XMLHttpRequest Object
• Skicka och ta emot data med hjälp av Fetch API

Lab: Kommunikation med en Remote Data Source

• Hämta data
• Serialisera och överföra data
• Omskriva koden med hjälp av jQuery ajax Method

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Hantera asynkrona JavaScript uppgifter med hjälp av de nya teknologierna för asynkron programmering
• Skicka data till en webbtjänst och ta emot data från en webbtjänst med hjälp av ett XMLHttpRequest object
• Skicka data till en webbtjänst och ta emot data från en webbtjänst med hjälp av Fetch API

Modul 6: Styla HTML5 med CSS3

I denna modul kommer du att undersöka egenskaperna och värdena som definieras i flera av dessa moduler, de nya selektorerna som definieras i CSS3, samt användningen av pseudo-klasser och pseudo-element för att förbättra dessa val.

Lektioner

• Styla text med CSS3
• Styla blockelement
• Pseudo-Classes and Pseudo-Elements
• Förbättra grafiska effekter med CSS3

Lab: Styla text och blockelement med CSS3

• Styla Navigation Bar
• Styla Register Link
• Styla About Page

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Använda de nya funktionerna i CSS3 för att styla textelement
• Använda de nya funktionerna i CSS3 för att styla blockelement
• Använda CSS3 selectors, pseudo-classes, och pseudo-elements för att förbättra stilningen av element
• Förbättra sidor genom att använda CSS3-grafiska effekter

Modul 7: Skapa objekt och metoder med JavaScript

Denna modul beskriver hur man skriver välstrukturerad JavaScript-kod genom att använda språkfunktioner som namnområden, objekt, inkapsling och arv. Dessa begrepp kan vara bekanta om du har erfarenhet av ett språk som Java eller C#, men JavaScript-approachen är ganska annorlunda och det finns många nyanser som du måste förstå om du vill skriva underhållbar kod.

Lektioner

• Skriva välstrukturerad JavaScript-kod
• Skapa Custom Objects
• Extending Objects

Lab: Förbättra Code for Maintainability and Extensibility

• Object Inheritance
• Omskriva JavaScript Code to Use Objects

Efter denna modul kommer studenterna att kunna:

• Skriva välstrukturerad JavaScript code
• Använda JavaScript för att skapa anpassade objekt
• Implementera objektorienterade tekniker genom att använda JavaScript-idiom

Modul 8: Skapa interaktiva sidor med HTML5 APIs

Denna modul beskriver hur man skapar interaktiva HTML5-webbapplikationer som kan komma åt den lokala filsystemet, låter användaren dra och släppa data på element på en webbsida, spela multimediafiler och få geografisk platsinformation.

Lektioner

• Interagera med filer
• Inkludera multimedia
• Reagera på webbläsarens plats och kontext
• Debugging and Profiling a Web Application

Lab: Skapa interaktiva sidor med HTML5 APIs

• Dra och släppa bilder
• Inkludera video
• Använda Geolocation API för att rapportera User's Current Location

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Komma åt det lokala filsystemet och lägga till stöd för drag-och-släpp på webbsidor.
• Spela video- och ljudfiler på en webbsida utan att behöva använda tillägg.
• Få information om användarens aktuella plats.
• Använda F12 Developer Tools i Microsoft Edge för felsökning och profilering av en webbapplikation.

Modul 9: Adding Offline Support to Web Applications

I denna modul kommer du att lära dig hur man använder dessa tekniker för att skapa robusta webbapplikationer som kan fortsätta köra även när nätverksanslutningen är otillgänglig.

Lektioner

• Reading and Writing Data Locally
• Adding Offline Support by Using the Application Cache

Lab: Adding Offline Support to Web Applications

• Caching Offline Data by Using the Application Cache API
• Persisting User Data by Using the Local Storage API

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Spara data lokalt på användarens enhet och komma åt denna data från en webbapplikation
• Konfigurera en webbapplikation för att stödja offline-funktioner med hjälp av Application Cache

Modul 10: Implementera en Adaptive User Interface

I denna modul kommer du att lära dig hur man bygger en webbplats som anpassar layouten och funktionaliteten hos sina sidor efter kapabiliteterna och formfaktorn hos enheten där den visas. Du kommer att lära dig hur man identifierar typen av enhet som används för att visa en sida och lära dig strategier för att lägga ut innehåll som effektivt riktar sig mot specifika enheter.

Lektioner

• Supporting Multiple Form Factors
• Creating an Adaptive User Interface

Lab: Implementera ett Adaptive User Interface

• Skapa en Print-Friendly Style Sheet
• Anpassa Page Layout f]or olika Form Factors

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Beskriva kraven i en webbplats för att svara på olika formfaktorer
• Skapa webbsidor som kan anpassa sin layout till formfaktorn hos enheten där de visas

Module 11: Skapande Advanced Graphics

Denna modul beskriver hur man skapar avancerad grafik i HTML5 genom att använda skalbar vektorgrafik (SVG) och Microsoft Canvas API. Du kommer att lära dig hur man använder SVG-relaterade element som

Lektioner

• Skapande av interaktiv grafik med hjälp av SVG
• Rita grafik med hjälp av Canvas API

Lab: Skapande Advanced Graphics

• Skapande av en Interactive Venue Map med hjälp av SVG
• Skapande av en Speaker Badge med hjälp av Canvas API

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Använda SVG för att skapa interaktivt grafiskt innehåll
• Använda Canvas API för att generera grafiskt innehåll programmatiskt

Modul 12: Animating the User Interface

Denna modul beskriver hur man förbättrar webbsidor genom att använda CSS-animationer. Du kommer att lära dig hur man tillämpar övergångar på egenskapsvärden. Sedan kommer du att lära dig hur man tillämpar 2D- och 3D-transformeringar på element. I slutet av denna modul kommer du att lära dig hur man tillämpar nyckelramsanimationer på element.

Lektioner

• Tillämpning av CSS Transitions
• Transformering av Elements
• Tillämpning av CSS Keyframe Animations

Lab: Animering av User Interface

• Tillämpning av CSS Transitions
• Tillämpning av Keyframe Animations

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Använda övergångar för att animera egenskapsvärden för HTML-element
• Tillämpa 2D- och 3D-transformeringar på HTML-element
• Tillämpa nyckelramsanimationer på HTML-element

Modul 13: Implementering Real-time Communication med hjälp av Web Sockets

Denna modul introducerar websockets, beskriver hur de fungerar och förklarar hur man skapar en websocket-anslutning som kan användas för att överföra data i realtid mellan en webbsida och en webbserver.

Lektioner

• Introduktion till Web Sockets
• Användning av WebSocket API

Lab: Utförande av Real-time Communication med hjälp av Web Sockets

• Mottagande av meddelanden från Web Socket
• Sändande av meddelanden till Web Socket
• Hantering av olika Web Socket Message Types

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Beskriva hur användning av websockets hjälper till att möjliggöra realtidskommunikation mellan en webbsida och en webbserver
• Använda WebSocket API för att ansluta till en webbserver från en webbsida och utbyta meddelanden mellan webbsidan och webbservern

Modul 14: Utförande Background Processing med hjälp av Web Workers

Denna modul beskriver hur webbarbetare fungerar och hur du kan använda dem i dina webbapplikationer.

Lektioner

• Förståelse för Web Workers
• Utförande Asynchronous Processing med hjälp av Web Workers

Lab: Skapande av en Web Worker Process

• Förbättring av Responsiveness med hjälp av Web Worker

Efter att ha genomfört denna modul kommer studenterna att kunna:

• Förklara hur webbarbetare kan användas för att implementera flertrådning och förbättra responsiviteten hos en webbapplikation
• Utföra bearbetning med hjälp av web worker, kommunicera med en web worker, och styra en web worker

Modul 15: Packaging JavaScript for Production Deployment

Verktyg som Node.js, Webpack, och Babel gör det möjligt att använda nya språkfunktioner tillsammans med stöd för olika webbläsare för att undvika att skada användarupplevelsen. I denna modul kommer vi att introducera teorin bakom dessa verktyg, när vi behöver använda dem och de olika alternativen för användning.

Lektioner

• Förståelse för Transpilers och Module bundling
• Skapande av Separate Packages for Cross Browser Support

Lab: Konfigurering av Webpack Bundle for Production

• Skapande och distribution av Packages med hjälp av WebPack