Microsoft - Programming in HTML5 with JavaScript and CSS3

Curriculum

MOC 20480C: Programming in HTML5 with JavaScript and CSS3

Module 1: Overview of HTML and CSS

Deze module behandelt de basisprincipes van HTML en CSS en introduceert de tools die deze cursus gebruikt om HTML-pagina's en stijlbladen te maken.

Lessen

• Overview of HTML
• Overview of CSS
• Creating a Web Application by Using Visual Studio 2017

Lab: Exploring the Contoso Conference Application

• Exploring the Contoso Conference Application
• Examining and Modifying the Contoso Conference Application

Na deze module kan de student:

• uitleggen hoe je HTML-elementen en -attributen kunt gebruiken om een webpagina op te maken;
• uitleggen hoe je CSS kunt gebruiken om basisstyling op een webpagina toe te passen;
• de tools beschrijven die Microsoft Visual Studio biedt voor het bouwen van webtoepassingen.

Module 2: Creating and Styling HTML Pages

Deze module introduceert HTML5, beschrijft de nieuwe functies ervan, demonstreert hoe je inhoud kunt presenteren met behulp van de nieuwe functies in HTML5 en geeft aan hoe je deze inhoud kunt stylen met CSS.

Lessen

• Creating an HTML5 Page
• Styling an HTML5 Page

Lab: Creating and Styling HTML5 Pages

• Creating HTML5 Pages
• Styling HTML pages

Na deze module kan de student:

• het doel van HTML5 en nieuwe functies in HTML5 beschrijven en uitleggen hoe je nieuwe HTML5-elementen kunt gebruiken om een webpagina op te maken;
• uitleggen hoe je CSS kunt gebruiken om de indeling, tekst en achtergrond van een webpagina te stylen.

Module 3: Introduction to JavaScript

Deze module introduceert JavaScript-programmering en DOM.

Lessen

• Overview of JavaScript
• Introduction to the Document Object Model

Lab: Displaying Data and Handling Events by Using JavaScript.

• Displaying Data Programmatically
• Handling Events

Na deze module kan de student:

• de basis van JavaScript-syntaxis beschrijven;
• JavaScript-code schrijven die de DOM gebruikt om informatie van een webpagina te wijzigen en op te halen.

Module 4: Creating Forms to Collect and Validate User Input

In deze module leer je hoe je invoerformulieren definieert met behulp van de nieuwe invoertypen die beschikbaar zijn in HTML5. Je zult ook leren hoe je gegevens kunt valideren met behulp van HTML5-attributen. Tot slot leer je hoe je uitgebreide invoervalidatie kunt uitvoeren met behulp van JavaScript-code en hoe je feedback kunt geven aan gebruikers wanneer hun invoer niet geldig is of niet overeenkomt met de’ verwachtingen van de toepassing.

Lessen

• Creating HTML5 Forms
• Validating User Input by Using HTML5 Attributes
• Validating User Input by Using JavaScript

Lab: Creating a Form and Validating User Input

• Creating a Form and Validating User Input by Using HTML5 Attributes
• Validating User Input by Using JavaScript

Na deze module kan de student:

• invoerformulieren maken met HTML5;
• HTML5-formulierattributen gebruiken om gegevens te valideren;
• JavaScript-code schrijven om validatietaken uit te voeren die niet eenvoudig kunnen worden geïmplementeerd met behulp van HTML5-attributen.

Module 5: Communicating with a Remote Server

In deze module leer je hoe je toegang krijgt tot een webservice met behulp van JavaScript-code en hoe je externe gegevens in je webtoepassingen kunt integreren.

Lessen

• Async programming in JavaScript
• Sending and Receiving Data by Using the XMLHttpRequest Object
• Sending and Receiving Data by Using the Fetch API

Lab: Communicating with a Remote Data Source

• Retrieving Data
• Serialising and Transmitting Data
• Refactoring the Code by Using the jQuery ajax Method

Na deze module kan de student:

• asynchrone JavaScript-taken afhandelen met behulp van de nieuwe asynchrone programmeertechnologieën;
• gegevens naar een webservice sturen en gegevens van een webservice ontvangen met behulp van een XMLHttpRequest-object;
• gegevens naar een webservice sturen en gegevens van een webservice ontvangen met behulp van de Fetch API.

Module 6: Styling HTML5 by Using CSS3

In deze module onderzoek je de eigenschappen en waarden die zijn gedefinieerd in verschillende van deze modules, de nieuwe selectoren die zijn gedefinieerd in CSS3 en het gebruik van pseudo-klassen en pseudo-elementen om deze selecties te verfijnen.

Lessen

• Styling Text by Using CSS3
• Styling Block Elements
• Pseudo-Classes and Pseudo-Elements
• Enhancing Graphical Effects by Using CSS3

Lab: Styling Text and Block Elements by Using CSS3

• Styling the Navigation Bar
• Styling the Register Link
• Styling the About Page

Na deze module kan de student:

• de nieuwe kenmerken van CSS3 gebruiken om tekstelementen te stylen;
• de nieuwe kenmerken van CSS3 gebruiken om blokelementen te stylen;
• CSS3-selectors, pseudoklassen en pseudo-elementen gebruiken om de styling van elementen te verfijnen;
• pagina's verbeteren door CSS3 grafische effecten te gebruiken.

Module 7: Creating Objects and Methods by Using JavaScript

In deze module wordt beschreven hoe je een goed gestructureerde JavaScript-code kunt schrijven met behulp van taalfuncties zoals naamruimten, objecten, encapsulatie en overerving. Deze concepten lijken misschien vertrouwd als je ervaring hebt in een taal als Java of C#, maar de JavaScript-benadering is heel anders en er zijn veel subtiliteiten die je moet begrijpen als je onderhoudbare code wilt schrijven.

Lessen

• Writing Well-Structured JavaScript Code
• Creating Custom Objects
• Extending Objects

Lab: Refining Code for Maintainability and Extensibility

• Object Inheritance
• Refactoring JavaScript Code to Use Objects

Na deze module kan de student:

• goed gestructureerde JavaScript-code schrijven;
• JavaScript-code gebruiken om aangepaste objecten te maken;
• objectgeoriënteerde technieken implementeren door JavaScript-taal te gebruiken.

Module 8: Creating Interactive Pages by Using HTML5 APIs

In deze module wordt beschreven hoe interactieve HTML5-webtoepassingen kunnen worden gemaakt die toegang hebben tot het lokale bestandssysteem, waarmee de gebruiker gegevens kan slepen en neerzetten op elementen op een webpagina, multimediabestanden kan afspelen en geolocatiegegevens kan verkrijgen.

Lessen

• Interacting with Files
• Incorporating Multimedia
• Reacting to Browser Location and Context
• Debugging and Profiling a Web Application

Lab: Creating Interactive Pages with HTML5 APIs

• Dragging and Dropping Images
• Incorporating Video
• Using the Geolocation API to Report the User's Current Location

Na deze module kan de student:

• het lokale bestandssysteem openen en ondersteuning voor slepen en neerzetten toevoegen aan webpagina's;
• video- en audiobestanden afspelen op een webpagina, zonder plug-ins;
• informatie verkrijgen over de huidige locatie van de gebruiker;
• de F12 Developer Tools in Microsoft Edge gebruiken om een webtoepassing te debuggen en te profileren.

Module 9: Adding Offline Support to Web Applications

In deze module leer je hoe je deze technologieën kunt gebruiken om robuuste webtoepassingen te maken die zelfs kunnen blijven draaien als er geen netwerkverbinding beschikbaar is.

Lessen

• 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

Na deze module kan de student:

• gegevens lokaal opslaan op het apparaat van de gebruiker en deze gegevens openen vanuit een webtoepassing;
• een webtoepassing configureren om offline bewerkingen te ondersteunen met behulp van de Application Cache.

Module 10: Implementing an Adaptive User Interface

In deze module leer je hoe je een website kunt bouwen die de indeling en functionaliteit van de pagina's aanpast aan de mogelijkheden en de vormfactor van het apparaat waarop deze wordt bekeken. Je zult zien hoe je het type apparaat kunt detecteren dat wordt gebruikt om een pagina te bekijken en strategieën kunt leren voor het uitzetten van inhoud die zich effectief richt op bepaalde apparaten.

Lessen

• Supporting Multiple Form Factors
• Creating an Adaptive User Interface

Lab: Implementing an Adaptive User Interface

• Creating a Print-Friendly Style Sheet
• Adapting Page Layout to Fit Different Form Factors

Na deze module kan de student:

• de websitevereisten beschrijven voor het reageren op verschillende vormfactoren;
• webpagina's maken die hun indeling kunnen aanpassen aan de vormfactor van het apparaat waarop ze worden weergegeven.

Module 11: Creating Advanced Graphics

In deze module wordt beschreven hoe geavanceerde afbeeldingen in HTML5 kunnen worden gemaakt met behulp van Scalable Vector Graphics (SVG) en de Microsoft Canvas API. Je leert hoe je SVG-gerelateerde elementen kunt gebruiken zoals en om grafische inhoud op een webpagina weer te geven. Je leert ook hoe je de gebruiker in staat stelt om te communiceren met SVG-elementen door het gebruik van gebeurtenissen zoals toetsenbord- en muisgebeurtenissen. De Canvas API is iets anders dan SVG.

Lessen

• Creating Interactive Graphics by Using SVG
• Drawing Graphics by Using the Canvas API

Lab: Creating Advanced Graphics

• Creating an Interactive Venue Map by Using SVG
• Creating a Speaker Badge by Using the Canvas API

Na deze module kan de student:

• SVG gebruiken om interactieve grafische inhoud te maken;
• de Canvas API gebruiken om op een programmatische manier grafische inhoud te genereren.

Module 12: Animating the User Interface

In deze module wordt beschreven hoe je een goed gestructureerde JavaScript-code kunt schrijven met behulp van taalfuncties zoals naamruimten, objecten, encapsulatie en overerving. Je leert hoe je overgangen kunt toepassen op eigenschapswaarden. Vervolgens leer je hoe je 2D- en 3D-transformaties kunt toepassen op elementen. Aan het einde van deze module leer je hoe je keyframe-animaties kunt toepassen op elementen.

Lessen

• Applying CSS Transitions
• Transforming Elements
• Applying CSS Keyframe Animations

Lab: Animating the User Interface

• Applying CSS Transitions
• Applying Keyframe Animations

Na deze module kan de student:

• overgangen toepassen om eigenschapswaarden te animeren op HTML-elementen;
• 2D- en 3D-transformaties toepassen op HTML-elementen;
• keyframe-animaties toepassen op HTML-elementen.

Module 13: Implementing Real-time Communication by Using Web Sockets

Deze module introduceert websockets, beschrijft hoe ze werken en legt uit hoe je een websocketverbinding kunt maken die gebruikt kan worden om gegevens in realtime te verzenden tussen een webpagina en een webserver.

Lessen

• Introduction to Web Sockets
• Using the WebSocket API

Lab: Performing Real-time Communication by Using Web Sockets

• Receiving Messages from a Web Socket
• Sending Messages to a Web Socket
• Handling Different Web Socket Message Types

Na deze module kan de student:

• beschrijven hoe het gebruik van websockets helpt om realtime communicatie tussen een webpagina en een webserver mogelijk te maken;
• de websockets-API gebruiken om verbinding te maken met een webserver vanaf een webpagina en berichten uit te wisselen tussen de webpagina en de webserver.

Module 14: Performing Background Processing by Using Web Workers

In deze module wordt beschreven hoe webworkers werken en hoe je ze kunt gebruiken in jouw webtoepassingen.

Lessen

• Understanding Web Workers
• Performing Asynchronous Processing by Using Web Workers

Lab: Creating a Web Worker Process

• Improving Responsiveness by Using a Web Worker

Na deze module kan de student:

• uitleggen hoe webworkers kunnen worden gebruikt om multithreading te implementeren en de responsiviteit van een webtoepassing te verbeteren;
• verwerking uitvoeren met behulp van een webworker, communiceren met een webworker en een webworker controleren.

Module 15: Packaging JavaScript for Production Deployment

Tools zoals Node.js, Webpack en Babel maken het gebruik van nieuwe taalfuncties mogelijk, samen met ondersteuning voor verschillende browsers om te voorkomen dat de gebruikerservaring wordt geschaad. In deze module introduceren we de theorie achter deze tools, wanneer we ze moeten gebruiken en de verschillende opties voor gebruik.

Lessen

• Understanding Transpilers And Module bundling
• Creating Separate Packages for Cross Browser Support

Lab: Setting Up Webpack Bundle for Production

• Creating and Deploying Packages using WebPack