10953A HTML5 Programming Companion Content

O F F I C I A L M I C R O S O F T L E A R N I N G P R O D U C T
10953A
HTML5 Programming
Companion Content
2 HTML5 Programming
Information in this document, including URL and other Internet Web site references, is subject to change
without notice. Unless otherwise noted, the example companies, organizations, products, domain names,
e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with
any real company, organization, product, domain name, e-mail address, logo, person, place or event is
intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the
user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in
or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical,
photocopying, recording, or otherwise), or for any purpose, without the express written permission of
Microsoft Corporation.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property
rights covering subject matter in this document. Except as expressly provided in any written license
agreement from Microsoft, the furnishing of this document does not give you any license to these
patents, trademarks, copyrights, or other intellectual property.
The names of manufacturers, products, or URLs are provided for informational purposes only and
Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding
these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a
manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links
may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not
responsible for the contents of any linked site or any link contained in a linked site, or any changes or
updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission
received from any linked site. Microsoft is providing these links to you only as a convenience, and the
inclusion of any link does not imply endorsement of Microsoft of the site or the products contained
therein.
© 2012 Microsoft Corporation. All rights reserved.
Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the
United States and/or other countries.
All other trademarks are property of their respective owners.
Product Number: 10953A
Released: 04/2012
HTML5 Programming 3
4 HTML5 Programming
HTML5 Programming 5
6 HTML5 Programming
HTML5 Programming 7
Module 1
Introduction to HTML5 Development
Contents:
Lesson 1: Overview of HTML 8
Lesson 2: What’s New in HTML5? 12
Lesson 3: Introduction to JavaScript 14
Lesson 4: Introduction to jQuery 17

8 HTML5 Programming
Lesson 1
Overview of HTML
Contents:
Detailed Demonstration Steps 9
Additional Reading 11
HTML5 Programming 9
Detailed Demonstration Steps

Demonstration: Creating an HTML Document
Detailed demonstration steps
1. Log on to the virtual machine, named SEA-DEV as Admin, with the password, Pa$$w0rd.
2. Open a Notepad.exe (On the Windows Start menu, click Run, type notepad and then click OK).
3. Add the following doctype element:
<!DOCTYPE html>
4. Add the HTML element under the doctype element.
<!DOCTYPE html>
<html>
</html>
5. Create the head and body elements inside the HTML element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
6. Add a title to the head element and some content to the body element.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML document</title>
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>
7. Save the file as an HTML file.
8. Run the saved file by double-clicking it, and show the students the completed webpage.
Demonstration: Creating an HTML Document

1. Log on to the virtual machine named SEA-DEV as Admin, with the password Pa$$w0rd
2. Open Visual Studio 2010.
3. Create a new C# ASP.NET Empty Web Application.
4. Create an HTML file.
5. In the HTML file’s body element, add the following elements.

10 HTML5 Programming
<div>This is a division.</div>
<div> This is another division</div>
<span>This is a span</span>
<span>This is another span</span>
<p>This is a paragraph</p>
<a href="http://www.microsoft.com">A link to Microsoft site</a>
<table border="1">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
7. Run the saved file and show the students the completed webpage.
Demonstration: Creating Forms by Using HTML

1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd
2. Open Visual Studio 2010.
3. Create a new C# ASP .NET Empty Web Application.
5. In the HTML file’s body element, add the following element.
<form action="#" method="GET">

<fieldset>
<legend>Client Info:</legend>
<label for="txtName">Name: </label><input type="text" id="txtName"
name="txtName" /><br />
<label for="txtAddress">Address: </label><input type="text" id="txtAddress"
name="txtAddress" /><br/>
<input type="submit" value="Submit" name="btnSubmit" name="btnSubmit" />
</fieldset>
</form>
HTML5 Programming 11
Additional Reading
The HTML Document
• Languages
• Encoding
Lesson 2
What’s New in HTML5?
Contents:

Demonstration: Common Styles
2. Create an HTML file
3. In the HTML file, add the following HTML content to the body element:
<h1>The Header</h1>
<div id="content">The Content</div>
<div class="footer">The Footer</div>
4. In the HTML file, add a style element inside the head element before the head element’s closing tag.
<style type="text/css">
h1
{
font-family: Arial sans-serif;
font-size: 36px;
text-decoration: underline;
color: brown;
text-align: center;
}
#content
{
background-color: brown;
color: white;
font-weight: bold;
height: 200px;
}
.footer
{
font-size: 0.6em;
color: gray;
text-align: right;
}
</style>
5. Save the HTML file.
Lesson 3
Introduction to JavaScript
Contents:

Demonstration: Using the Console
1. Open Internet Explorer.
2. Press F12 to open the Internet Explorer Developer Tools.
3. If the developer tools opens in a separate window, instead of in a pane at the lowermost part of the
browser window, click the Pin button at the upper-right part of the window.
4. Click the Console tab.

5. Next to the >> symbol, enter the following code and then press Enter to show an alert message.
alert("Hello");
6. Observe the popup and then click OK to close it.
7. Enter the following line of code to print the type string of a number.
typeof 42;
8. Observe the result of the expression (“number”) printed in the console.
9. Enter the following line to declare and assign a new variable called message.
var message = "Hello";
10. Enter the following line to display the value of the message variable.
message;
11. Observe the value of the variable displayed in the console.
12. Enter the following line to show the value of the variable in an alert.
alert(message);
13. Click OK to close the alert.
Demonstration: Using the Console


3. In the HTML file, add HTML content to the body element.
<h1>The Header</h1>
<div id="content">The Content</div>
4. In the HTML file, add a script element inside the head element before the head element’s closing
tag.
<script type="text/javascript">
function contentLoaded() {
var content = document.getElementById("content");
content.textContent = "This content was modified using JavaScript.";
}
document.addEventListener("DOMContentLoaded", contentLoaded, false);

</script>
6. Run the saved file and show the students the completed webpage containing the text modified using
JavaScript.
Lesson 4
Introduction to jQuery
Contents:

Demonstration: How to Get Started with jQuery
2. In Visual Studio 2010, create a new ASP.NET Empty Web Application called HellojQuery.
3. Add a new HTML file called HellojQuery.
4. Add a new JavaScript file called HellojQuery.
5. Add the jquery-1.5.1.js and jquery-1.5.1-vsdoc.js files from D:\Mod01\Democode\Assets.
6. In the HTML file, add the following script tags inside the head element.
<head>
<title>Hello jQuery</title>
<script src="jquery-1.5.1.js"></script>
<script src="HellojQuery.js"></script>
</head>
7. Drag the vsdoc file into the surface of the opened HellojQuery.js file to create the statement and
inform the students that you have added IntelliSense for jQuery by doing that.
/// <reference path="jquery-1.5.1-vsdoc.js" />
8. Add the following code in the HellojQuery.js file to demonstrate the wiring of the ready event.
$(document).ready(function() {
alert("Hello jQuery ready function");
});
9. Set the HellojQuery.html as the startup page.
10. Run the application.

2. Open the previous HellojQuery web application.

3. In the HellojQuery HTML file, in the body element, add a div with an id of main.
<div id="main">
</div>
4. In the main div, add the following code.
<ul id="ulOfItems">
<li>item 1</li>
<li class="red">item 2</li>
<li id="item3">item 3</li>
</ul>
<br />
<div>Hello jQuery</div>
<div id="result"></div>
This creates the page markup containing an unordered list and two divs.
5. In the HellojQuery.js file, add the following code.
var resultDiv;
$(document).ready(function () {
resultDiv = $("#result");
$("li").each(function () {
resultDiv.text(resultDiv.text() + " " + this.tagName);
});
$("#item3").each(function () {
resultDiv.text(resultDiv.text() + " " + this.id);
});
$(".red").each(function () {
resultDiv.text(resultDiv.text() + " " + this.tagName);
});
$("ul#ulOfItems").each(function () {
resultDiv.text(resultDiv.text() + " " + this.id);
});
});
Write to the result div, all tag names of the selected list items, the id of the selected item3, the tag name li
once for the list item with the red class name, and the id of the unordered list, ulOfItems, retrieved by the
precise selector.
6. Run the webpage in the browser to show the results.

2. Open the previous HellojQuery web application.
3. Add the following button at the end of the HellojQuery.html file.
<input type="button" id="btnEach" value="Each Function Example" />

<br />
4. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.
$("#btnEach").click(function () {
$("div").each(function (i) {
alert(i + "=" + $(this).text());
});
});
The code wires a click event to the input with the button type. When the button is clicked, an alert is
shown for each div in the page with the div index and the div text.
5. Run the webpage in the browser.

6. Click the button to run each functionality.
7. Add the following paragraph and buttons to the HellojQuery.html file.
<p></p>
<input type="button" id="btnCreateParagraph" value="Create Paragraph Data" /><br
/>
<input type="button" id="btnAppendToUl" value="Append Two List Items Using
appendTo" />
8. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.
$("#btnCreateParagraph").click(function () {
$("p").html("<div>Hello jQuery!</div>");
});
$("#btnAppendToUl").click(function () {
$("<li />").html("last").appendTo("ul");
$("<li />").html("new first").prependTo("ul");
});
The code wires two click event handlers to the buttons. The first handler adds a new div element with the
“Hello jQuery!” text to the paragraph element. The second event handler creates two list items that are
added as the first and last list items in the unordered list in the HTML.
9. Run the webpage in the browser.
10. Click the buttons to run their functionality.

Module 2
Creating Page Structure and Navigation
Contents:
Lesson 1: HTML5 Structural Elements 22
Lesson 2: Navigation and Menus 27
Module Reviews and Takeaways 30

Lesson 1
HTML5 Structural Elements
Contents:

Demonstration: The New Structural Elements
1. Create a new C# ASP.NET Empty Web Application
3. In the HTML file’s body element add the following elements:
<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li>navigation 1</li>
<li>navigation 1</li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Article content</p>
</article>
</section>
<footer>
<p>Copyright 2011 Microsoft</p>
</footer>
</body>
4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

<body>
This is<mark>marked</mark> text <p>Your test score in the test was <meter
value="70" min="0" max="100" low="54" high="100" optimum="100">70</meter></p>
<p>Downloaded: <progress value="16" max="48">33%</progress> of the content</p>
<p>Output: <input type="text" value="1" /> + <input type="text" value="3" /> =
<output>4</output></p>
<p>The time is now: <time>2011-11-12T14:54Z</time></p>
</body>

<body>
<header>
<h1>
Something Important Happened Somewhere</h1>
<nav>

<ul>
<li><a href="/">Home</a></li>
<li><a href="/entertainment">Entertainment</a></li>
<li><a href="/politics">Politics</a></li>
<li><a href="/sports">Sports</a></li>
</ul>
</nav>
</header>
<article>
<header>
<p>
Table of Contents</p>
<nav>
<ul>
<li><a href="#summary">Summary</a></li>
<li><a href="#details">The Details</a></li>
<li><a href="#sources">Sources</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h2>
Somebody did Something Vital Yesterday</h2>
</header>
<p>
This is the summary of the article.</p>
</section>
<section>
The main content of the article would be here.
</section>
<section>
<header>
<h2>
Sources</h2>
</header>
<ul>

<li><a href="http://www.example.com/link1">A Well Known
Source</a></li>
</ul>
</section>
</article>
</body>

Additional Reading
Other New Elements
• HTML5 Specifications
Lesson 2
Navigation and Menus
Contents:

Demonstration: The nav Element
<body>
<header>
<h1>
Something Important Happened Somewhere</h1>
<nav>

<ul>
<li><a href="/">Home</a></li>
<li><a href="/entertainment">Entertainment</a></li>
<li><a href="/politics">Politics</a></li>
<li><a href="/sports">Sports</a></li>
</ul>
</nav>
</header>
<article>
<header>
<p>
Table of Contents</p>
<nav>
<ul>
<li><a href="#summary">Summary</a></li>
<li><a href="#details">The Details</a></li>
<li><a href="#sources">Sources</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h2>
Somebody did Something Vital Yesterday</h2>
</header>
<p>
This is the summary of the article.</p>
</section>
<section>
The main content of the article would be here.
</section>
<section>
<header>
<h2>
Sources</h2>
</header>
<ul>

<li><a href="http://www.example.com/link1">A Well Known
Source</a></li>
</ul>
</section>
</article>
</body>
Module Reviews and Takeaways

Review questions
Question: Why should developers migrate from HTML4 elements to HTML5 elements?
Answer: The new elements in HTML5 help achieve the following:
• Better accessibility
• Better searchability
• Support for internationalization
• Better interoperability
Real-World Issues and Scenarios

The migration from HTML4 to HTML5 should not be done without thinking. This is a very complicated
task that may break the appearance of the webpage if not done carefully.
Tools
Visual Studio 2010
Module 3
Creating Form Input and Validation
Contents:
Lesson 1: Working with Input Types 32
Lesson 2: Using Form Attributes 35
Lesson 3: Validation 37
Lesson 4: Using Browser Detection, Feature Detection, and Modernizr 39

Lesson 1
Working with Input Types
Contents:

Demonstration: Date Pickers
<body>
<form>
<label for="dpBirthDate">Date: </label><input type="date" name="dpBirthDate"
value="2011-12-19" /><br/>
<label for="dpCCExpiration">Month: </label><input type="month"
name="dpCCExpiration" value="2011-12" /><br/>
<label for="dpArrivalWeek">Week: </label><input type="week"
name="dpArrivalWeek" value="2011-W16" /><br/>
<label for="dpDepartureTime">Time: </label><input type="time"
name="dpDepartureTime" value="17:39:57" /><br/>
<label for="dpBirthDate">Datetime: </label><input type="datetime"
name="dpBirthDate" value="2011-12-31T23:59:60Z" /><br/>
<label for="dpBirthDate">Datetime-local: </label><input type="datetime-local"
name="dpBirthDate" value="2011-12-19T16:39:57" /><br/>
</form>
</body>

1. In the HTML file’s body element after the last </br> element, add the following elements:
<label for="txtEmail">Email: </label><input type="email" name="txtEmail"

value="email@company.com" /><br/>
<label for="txtUrl">Url: </label><input type="url" name="txtUrl"
value="http://www.microsoft.com" /><br/>
<label for="txtPhoneNumber">Telephone: </label><input type="tel"
name="txtPhoneNumber" /><br/>
<label for="txtSearch">Search: </label><input type="search" name="txtSearch"
/><br/>

1. In the HTML file’s body element after the last </br> element, add the following elements:
<label for="txtAge">Number: </label><input type="number" name="txtAge" min="0"

max="120" /><br/>
<label for="txtAge">Range: </label><input type="range" name="txtAge" min="0"

max="120" /><br/><label for="txtCarColor">Color: </label><input type="color"
name="txtCarColor" /><br/>
Lesson 2
Using Form Attributes
Contents:

Demonstration: Using Form Attributes
<body>
<form>
<input type="text" placeholder="Enter your full name" name="FullName"
autofocus="autofocus" autocomplete="on" />
<input type="password" placeholder="Type your password" name="Password" />
<input type="number" placeholder="Enter your age" name="Age" />
<input type="text" name="country" list="countries" />
<datalist id="countries">
<option value="Canada" />
<option value="England" />
<option value="France" />
<option value="Germany" />
<option value="Japan" />
<option value="Russia" />
<option value="United States" />
</datalist>
<input type="file" name="photos" multiple="multiple" />
</form>
<section id="products" hidden="hidden">

<header>
<h1>Products Screen</h1>
</header>
This screen displays the company's products.
</section>
</body>

Lesson 3
Validation
Contents:

Demonstration: General Validation Attributes
<body>
<form>
<input type="text" name="username" required="required" />
<label> Zip Code: <input type="text" pattern="\d{5}" name=”zip” /></label>
<input type="text" name="address" maxlength="10" />
<input type="submit" name="submit" value="Submit The Form" />
</form>
</body>

Lesson 4
Using Browser Detection, Feature Detection, and
Modernizr
Contents:
Question and Answers 40
Question and Answers

Feature Detection
Question: Why is feature detection preferable to browser detection?
Answer: Feature detection makes no assumptions. Using this technique will reveal whether a
feature exists. On the other hand, browser detection makes the assumption that you
succeeded in detecting the browser, although knowing the browser does not always mean
that you know the value of each feature.
Using HTML5 Polyfills

Question: Why should you use polyfills?
Answer: Polyfills help to introduce HTML5 features or elements to browsers that do not
support them. This helps to create the same behavior, markup, and user experience across
most of the browsers.

Demonstration: Modernizr
3. Add the modernizr-1.7.js file from D:\Mod03\Democode\Assets.
4. In the html file add the following script tag inside the head element:
<head>
<title>Hello Modernizr</title>
<script src="modernizr-1.7.js"></script>
</head>
5. Add an empty script tag at the end of the body tag:
<body>
<script type=”text/javascript”></script>
</body>
6. In the empty script tag, add the following code:
if (Modernizr.canvas)
{
alert(‘canvas is available’);
}
if (Modernizr.video)
{
alert(‘video is available’);
}
if (Modernizr.audio)
{
alert(‘audio is available’);
}

Additional Reading
Browser Detection
• Conditional Comments

Review questions
Question: How can you use HTML5 today, when there are browsers that do not support
some of its features?
Answer: There are many strategies to apply HTML5 features today. One strategy is feature
detection (and in particular, the Modernizr JavaScript library), which enables you to detect
features, and reacts if these do not exist in the browser. You can also use polyfills to meet
your requirements.
Module 4
Laying Out and Styling Webpages
Contents:
Lesson 1: Creating Layouts 45
Lesson 2: Advanced CSS by Using CSS3 48

Lesson 1
Creating Layouts
Contents:

Demonstration: Using HTML5 Structural Elements for Layout
<body>
<div>
<header><h1>Page Title</h1></header>
<div>
<menu style=" width:200px;float:left;"> Menu</menu>
<section style="width:400px;float:left;">Page Content</section>
</div>
<footer style="clear:both;">Footer</footer>
</div>
</body>
Additional Reading
Using CSS3 for Layout
• CSS3 Template Layout
• CSS3 Multi-Coulmn
Lesson 2
Advanced CSS by Using CSS3
Contents:

Demonstration: Transformations
<div id="element"></div>
4. In the HTML file’s head element add the following style tag:
#element
{
position: absolute;
left: 50px;
top: 50px;
height: 20px;
width: 20px;
background-color: Red;
-ms-transform: rotate(30deg) scale(1.5, 2);
}
</style>
Demonstration: Media Queries

<div id="element">This element has a border. When the screen’s width is less than
400 pixels the border is removed</div>
4. In the HTML file’s head element add the following style tag:
#element
{
border: solid 1px black;
}
@media screen and (max-width:400px)
{
#element
{
border: none;
}
}
</style>
6. Run the saved file and show the students the completed web page.
7. Change the screen’s width to show the students the media query effect
Additional Reading
Selectors
• CSS3 Selectors
Animations
• CSS3 Animations
Media Queries
• CSS3 Media Queries

Review questions
Question: What are the basic considerations for creating layouts?
Answer: The basic considerations include aspects such as space and white space, using
images and graphics, working with text width, and element placement and position.
Module 5
Getting Started with Graphics and Multimedia Elements
Contents:
Lesson 1: Canvas Basics 54
Lesson 2: Video/Audio Formats and Codecs 59
Lesson 3: Controlling Multimedia with JavaScript 61

Lesson 1
Canvas Basics
Contents:

Demonstration: Canvas with Fallback Content
3. In the HTML file, add a canvas element with fallback content inside the body element.
<canvas id="canvas">
<div>Your browser does not support the canvas element.</div>
</canvas>
4. In the HTML file, add a style element inside the head element before the head element’s closing tag.
canvas { border: solid 1px green; }
div { background-color: orange; }
</style>
5. Save the file.
6. Run the saved file.
Demonstration: Drawing Shapes


3. In the HTML file, add a canvas element inside the body element.
</canvas>
4. In the HTML file, add a script element inside the head element before the head element’s closing
tag.
<head>
...
</script>
</head>
5. Inside the script element, call the new draw function after the page finishes loading, and retrieve the
canvas context before starting to draw.
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}
document.addEventListener("DOMContentLoaded", draw, false);

</script>
6. At the end of the draw function, add the following code to draw a filled rectangle.
function draw() {
...
context.fillRect(20, 30, 100, 40);

}
8. Run the saved file and show the students the filled rectangle drawn on the canvas.
9. At the end of the draw function, add the following code to draw the circumference of a circle.
function draw() {
...
context.arc(70, 110, 30, 0, 2 * Math.PI, true);

context.stroke();
}
11. Run the saved file and show the students the circle drawn on the canvas.
12. At the end of the draw function, add the following code to draw part of a rectangle inside a clipping
region defined by a circle.
function draw() {
...
context.beginPath();
context.moveTo(260, 75);
context.arc(230, 75, 30, 0, 2 * Math.PI, true);
context.clip();
context.rect(180, 55, 100, 40);
context.fill();
}
14. Run the saved file and show the students the partially filled circle drawn on the canvas.
Demonstration: Applying Styles

</canvas>
4. In the HTML file, add a script element with a draw function inside the head element, before the
head element’s closing tag.
<head>
...
function draw() {
}

</script>
</head>
5. At the end of the draw function, draw a rectangle with a radial gradient and three color stops.
function draw() {
var gradient = context.createLinearGradient(0, 0, 300, 150);

gradient.addColorStop(0.1, "blue");
gradient.addColorStop(0.4, "green");
gradient.addColorStop(0.7, "yellow");
context.fillStyle = gradient;
context.arc(50, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI);
context.fill();
context.rect(50, 30, 200, 90);
context.fill();
context.arc(250, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI, true);
context.fill();
}

</script>
Demonstration: Drawing and Transforming Text


</canvas>
4. In the HTML file, add a script element with a draw function inside the head element, before the
head element’s closing tag.
<head>
...
function draw() {
}

</script>
</head>
5. At the end of the draw function, draw a circle skewed to look like an ellipse and translated to the
center of the canvas.
function draw() {
context.translate(canvas.width / 2, canvas.height / 2);

context.scale(4, 2); // enlarge the grid and stretch it horizontally
context.arc(0, 0, 30, 0, 2 * Math.PI); // draw a circle skewed by the scale
method to look like an ellipse
context.fillStyle = "orange";
context.fill();
}

</script>
6. At the end of the draw function, draw text and rotate it.
function draw() {
...
context.rotate(Math.PI); // turn upside down
context.font = "bold 9px Arial";
context.fillStyle = "blue";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("upside down", 0, 0); // draw the text "upside down" upside
down
}

</script>
Lesson 2
Video/Audio Formats and Codecs
Contents:

Demonstration: Playing Video
2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or

dragging the file to the new project’s folder in Solution Explorer.
4. In the HTML file, add a video element with built-in controls supporting automatic playback and
looping inside the body element.
<video src="trailer.m4v" width="400" autoplay="autoplay" loop="loop"

controls="controls">
</video>
Lesson 3
Controlling Multimedia with JavaScript
Contents:

Demonstration: Controlling Video Playback
2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or

dragging the file to the new project folder in Solution Explorer.
4. In the HTML file, add a video element with the id attribute and automatic playback inside the body
element.
<video id="video" src="trailer.m4v" autoplay="autoplay" width="400">

</video>
5. Inside the head element, before the closing tag, add a script element that pauses and plays the
video.
function toggleVideoPlayback() {
var video = document.getElementById("video");
if(video.paused) video.play();
else video.pause();
}
document.getElementById("video").addEventListener("click",
toggleVideoPlayback, false);
}
document.addEventListener("DOMContentLoaded", contentLoaded, false);

</script>

7. Run the saved file, and show the students how the video is paused and resumed when it is clicked.

Review questions
Question: When using JavaScript to control video playback, what considerations affect
whether a video element should be used alone, or played on a canvas?
Answer: The primary considerations are the level of complexity of the application, support
for accessibility, and development speed.
Module 6
Creating Advanced Graphics
Contents:
Lesson 1: Drawing with SVG 65
Lesson 2: Animation 68
Lesson 1
Drawing with SVG
Contents:

Demonstration: Drawing Shapes
3. In the HTML file, add an svg element with the correct version and schema inside the body element.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

</svg>
4. In the svg element, add a rect element.

<rect x="20" y="30" width="150" height="40" rx="5" ry="5" fill="orange" />
</svg>
5. Before the svg element’s closing tag, add a circle element.

...
<circle cx="250" cy="50" r="40" fill="blue" />
</svg>
6. Before the svg element’s closing tag, add a path element.

...
<path d="M 20,200 C 20,100 170,100 170,200 S 320,300 320,200" fill="red"
stroke="green" stroke-width="3" />
</svg>
7. Before the svg element’s closing tag, add a text element.

...
<text x="160" y="130" font-family="Arial" font-size="36" fill="black"
stroke="gray" stroke-width="2">Hello SVG</text>
</svg>
Additional Reading
Working with Shapes
• Attributes
Working with Filters

• Filters
Lesson 2
Animation
Contents:

Demonstration: Drawing SVG Animations by Using Markup
3. In the HTML file, add an svg element with a blue circle containing various animations, inside the
body element.

<circle cx="50" cy="50" r="40" fill="blue">
<animate attributeName="fill" to="yellow" begin="click" dur="5" fill="freeze"
/>
<animate attributeName="cx" to="200" begin="click" dur="5" fill="freeze" />
<animate attributeName="cy" to="150" begin="click" dur="5" fill="freeze" />
<animate attributeName="r" to="80" begin="click" dur="5" fill="freeze" />
</circle>
</svg>
5. Run the saved file and show the students how clicking the blue circle triggers the animations.
Module 7
Using Client-Side Storage
Contents:
Lesson 1: Web Storage vs. Cookies 71
Lesson 2: Web Storage API 73

Lesson 1
Web Storage vs. Cookies
Contents:
Additional Reading
IndexedDB
• IndexedDB
Lesson 2
Web Storage API
Contents:

Demonstration: Web Storage Functions and Attribute
<body>
<form id="form1">
<p>
You have viewed this page <span id="counter"></span> times.
</p>
</form>
</body>
4. In the HTML file’s head element add the following script tag:
function setCounter() {
if (!localStorage.getItem('numberOfPageLoads')) {
localStorage.setItem('numberOfPageLoads', 0);
}
localStorage.setItem('numberOfPageLoads',
parseInt(localStorage.getItem('numberOfPageLoads')) + 1);
document.getElementById('counter').innerHTML =
localStorage.getItem('numberOfPageLoads');
}
window.addEventListener("load", setCounter, false);

</script>

6. In Solution Explorer, click on project with the right mouse button
7. Click on the Set As Startup Page menu item
8. Run the project by pressing CTRL+F5 and show the students the completed web page
Demonstration: Web Storage Functions and Attribute

1. In the HTML file’s head element add the following script statement at the end of the script tag:
function logEventProperties(e) {
console.log(e.key);
console.log(e.oldValue);
console.log(e.newValue);
console.log(e.url);
console.log(e.storageArea);
}
window.addEventListener("storage", logEventProperties, false);

3. In Solution Explorer, click on project with the right mouse button
4. Click on the Set As Startup Project menu item
Additional Reading
Security and Privacy Considerations
• Web Storage Security and Privacy

Review questions
Question: Why is it so important to have client-side storage capabilities?
Answer: Client-side storage capabilities can help increase the performance of websites and
applications, reduce network latency by minimizing server calls, and help scale up the site or
application.
Module 8
Using Advanced HTML5 JavaScript APIs
Contents:
Lesson 1: Using the Drag-and-Drop API 79
Lesson 2: File API 83
Lesson 3: Geolocation API 86

Lesson 1
Using the Drag-and-Drop API
Contents:

Demonstration: Using the Drag-and-Drop API
<body>
<div id="draggableDiv" draggable="true" style="width:150px;
height:150px;border: solid 1px black;">The div can be dragged</div>
<div id="dropDiv" dropzone="copy" style="width:300px; height:300px; padding-
top:50px; border: solid 2px black;">a dropzone</div>
</body>
function wireDragEvents() {
var div = document.getElementById('draggableDiv');
div.addEventListener('dragstart', handleDragStart, false);
var div = document.getElementById('dropDiv');

div.addEventListener('drop', handleDrop, false);
div.addEventListener('dragover', handleDragOver, false);
}
function handleDragStart(ev) {
console.log('handling drag start event');
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData("text", "stored text");
}
function handleDrop(ev) {
if (ev.stopPropagation) ev.stopPropagation();
console.log('handling drop event');
var data = ev.dataTransfer.getData("text");
console.log(data);
return false;
}
function handleDragOver(ev) {
if (ev.preventDefault) ev.preventDefault();
console.log('handling drag over event');
ev.dataTransfer.dropEffect = "copy";
return false;
}
window.addEventListener("DOMContentLoaded", wireDragEvents, false);

</script>
6. In Solution Explorer, click on file with the right mouse button

9. Drag the first div and drop it inside the second div
10. Show to the students the Visual Studio console view

Additional Reading
Dragging Events
• Drag and Drop
dataTransfer Object
• Data Transfer
• Drag and Drop Specifications

Lesson 2
File API
Contents:

Demonstration: File API
<body>
<input type="file" id="file" name="file" multiple />
</body>
function handleSelectedFiles(e) {
var files = e.target.files;
for (var i = 0; i < files.length; i++) {

var reader = new FileReader();
reader.onload = (function (theFile) {

return function (e) {
console.log(e.target.result);
};
})(files[i]);
// Read the file as a text.

reader.readAsText(files[i]);
}
}
document.getElementById('file').addEventListener('change',
handleSelectedFiles, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);

</script>

9. Press the Browse button and pick any text file to see the result of the reading in the Visual Studio’s
console view
Additional Reading
Security Considerations
• File API Security
Lesson 3
Geolocation API
Contents:

Demonstration: Geolocation API
<script type=”text/javascript”>
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{
enableHighAccuracy: true,
maximumAge: 1000,
timeout:500
});
function successCallback(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}
function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "Permissions denied by the user ";
break;
case error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "timeout occurred ";
break;
}
console.log(message);
}
</script>
8. You should press the Allow Once button that is popped up by the browser
Module 9
Using WebMatrix and Other Developer Tools
Contents:
Lesson 2: ASP.NET MVC 3 and Razor 89
Lesson 2
ASP.NET MVC 3 and Razor
Contents:
Additional Reading
Design Patterns and Rationale for Using the ASP.NET MVC 3 Framework
• ASP.NET Webforms
• A loosely coupled system is a system whose components are minimally dependent on other
components in the system. This usually makes it easy to modify or replace components in a
predictable, isolated manner without affecting the rest of the system.
Send Us Your Feedback

You can search the Microsoft Knowledge Base for known issues at Microsoft Help and Support before
submitting feedback. Search using either the course number and revision, or the course title.
Note Not all training products will have a Knowledge Base article – if that is the case,
please ask your instructor whether or not there are existing error log entries.
Courseware Feedback
Send all courseware feedback to support@mscourseware.com. We truly appreciate your time and effort.
We review every e-mail received and forward the information on to the appropriate team. Unfortunately,
because of volume, we are unable to provide a response but we may use your feedback to improve your
future experience with Microsoft Learning products.
Reporting Errors
When providing feedback, include the training product name and number in the subject line of your e-
mail. When you provide comments or report bugs, please include the following:
1. Document or CD part number

1. Page number or location
2. Complete description of the error or suggested change
Please provide any details that are necessary to help us verify the issue.
Important All errors and suggestions are evaluated, but only those that are validated are
added to the product Knowledge Base article.

10953A HTML5 Programming Companion Content

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

10953A HTML5 Programming Companion Content

Загружено:

Авторское право:

Доступные форматы

O F F I C I A L M I C R O S O F T L E A R N I N G P R O D U C T

Product Number: 10953A

Lesson 2: What’s New in HTML5? 12

Lesson 3: Introduction to JavaScript 14

Lesson 4: Introduction to jQuery 17

Detailed Demonstration Steps

3. Add the following doctype element:

4. Add the HTML element under the doctype element.

7. Save the file as an HTML file.

Demonstration: Creating an HTML Document

2. Open Visual Studio 2010.

3. Create a new C# ASP.NET Empty Web Application.

4. Create an HTML file.

5. In the HTML file’s body element, add the following elements.

6. Save the file as an HTML file.

Demonstration: Creating Forms by Using HTML

2. Open Visual Studio 2010.

3. Create a new C# ASP .NET Empty Web Application.

4. Create an HTML file.

5. In the HTML file’s body element, add the following element.

<form action="#" method="GET">

6. Save the file as an HTML file.

Detailed Demonstration Steps

2. Create an HTML file

5. Save the HTML file.

Detailed Demonstration Steps

2. Press F12 to open the Internet Explorer Developer Tools.

4. Click the Console tab.

6. Observe the popup and then click OK to close it.

8. Observe the result of the expression (“number”) printed in the console.

var message = "Hello";

11. Observe the value of the variable displayed in the console.

13. Click OK to close the alert.

Demonstration: Using the Console

2. Create an HTML file.

document.addEventListener("DOMContentLoaded", contentLoaded, false);

5. Save the HTML file.

Detailed Demonstration Steps

3. Add a new HTML file called HellojQuery.

4. Add a new JavaScript file called HellojQuery.

5. Add the jquery-1.5.1.js and jquery-1.5.1-vsdoc.js files from D:\Mod01\Democode\Assets.

/// <reference path="jquery-1.5.1-vsdoc.js" />

9. Set the HellojQuery.html as the startup page.

10. Run the application.

Demonstration: How to Get Started with jQuery

Detailed demonstration steps

2. Open the previous HellojQuery web application.

4. In the main div, add the following code.

5. In the HellojQuery.js file, add the following code.

6. Run the webpage in the browser to show the results.

Demonstration: How to Get Started with jQuery

2. Open the previous HellojQuery web application.

3. Add the following button at the end of the HellojQuery.html file.

<input type="button" id="btnEach" value="Each Function Example" />

5. Run the webpage in the browser.

7. Add the following paragraph and buttons to the HellojQuery.html file.

9. Run the webpage in the browser.

10. Click the buttons to run their functionality.

Lesson 2: Navigation and Menus 27

Module Reviews and Takeaways 30

Detailed Demonstration Steps

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

4. Save the file as an HTML file