Errata

Training Guide: Programming in HTML5 with JavaScript and CSS3

Errata for Training Guide: Programming in HTML5 with JavaScript and CSS3

The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
PDF
Page 497
Under the "S or s" bullet point

Under the "S or s" bullet point, the sentence reads as follows :

Parameters are x2, y2, x, and y. This command **drawls** a cubic B?zier curve from
the current point to the x, y coordinate specified by using the control point from the
previous C command for the beginning of the curve and control point x2, y2 for the
end of the curve.

It should read:
Parameters are x2, y2, x, and y. This command draws a cubic B?zier curve from
the current point to the x, y coordinate specified by using the control point from the
previous C command for the beginning of the curve and control point x2, y2 for the
end of the curve.

Note from the Author or Editor:
On page 497, locate the following word:
drawls

and replace with:
draws

Anthony Froissant  Jul 28, 2013  Aug 09, 2013
PDF
Page 442
Adding support for WebVTT to IIS Express

Under the "Adding support for WebVTT to IIS Express", the command to set the config in IIS reads as follows:

appcmd set config /section:staticContent /+[fileExtension='vtt',mimeType='text/vtt']

But in the base IIS config, extensions start with a period, so the command should be :

appcmd set config /section:staticContent /+[fileExtension='.vtt',mimeType='text/vtt']

Note from the Author or Editor:
On page 442, locate the following command text:
appcmd set config /section:staticContent /+[fileExtension='vtt',mimeType='text/vtt']

and replace with the following:
appcmd set config /section:staticContent /+[fileExtension='.vtt',mimeType='text/vtt']

Anthony  Jul 28, 2013  Aug 09, 2013
Printed
Page 280
1st code block

In creating a derived type in javascript, the constructor function of Car (derived from Vehicle) has the call() function as the last line of code. However, it should be the first line of code as any derived members that hide the parent's will be overwritten unexpectedly. The example itself doesn't have any members that hide; but if someone were to follow these patterns, they would get unexpected behavior if both objects had a common "public" member.

Should read:

var Car = (function (parent) {
function Car(year, make, model) {
parent.call(this, year, make, model);
this.wheelQuantity = 4;
}
return Car;
})(Vehicle);

Note from the Author or Editor:
On page 280, locate the following code (3 times on page 280):
this.wheelQuantity = 4;
parent.call(this, year, make, model);

and replace with:
parent.call(this, year, make, model);
this.wheelQuantity = 4;

On page 281, locate the following code:
this.propellerBladeQuantity = 3;
parent.call(this, year, make, model);

And replace it with the following:
parent.call(this, year, make, model);
this.propellerBladeQuantity = 3;

Gerritt Lansing  Jul 07, 2013  Aug 09, 2013
Printed
Page 105
Headline of last paragraph

"Stepping though the code" misses the 'r' in "through"

Note from the Author or Editor:
On page 105, locate the following heading:
Stepping though the code

Replace with:
Stepping through the code

Robert  Jul 04, 2013  Aug 09, 2013
PDF
Page 59
Step 7

Step 7 suggests to add <br /> (break) after the Human Resources hyperlink but the code below the step adds <br /> (break) after Expense Reports hyperlink

Note from the Author or Editor:
On page 59, step 7 please change:
Add a <br /> element after the Human Resources hyperlink.

to the following:
Add a <br /> element after the Expense Reports hyperlink.

emwhytee  Jun 22, 2013  Aug 09, 2013
Printed
Page 128
Step 20

Code fragment missing document.getElementById to wire up btnPlus button. This causes the test example to fail.

====== CODE FRAGMENT FROM BOOK ========

test("Add Test", function() {
expect(1);
txtInput.value = '10';
txtResult.value = '20';
QUnit.triggerEvent(btnPlus, "click");
var expected = '30';
equal(txtResult.value, expected, 'Expected value: ' + expected + ' Actual value: ' + txtResult.value);
});


====== CORRECTED CODE ========

test("Add Test", function() {
expect(1);
txtInput.value = '10';
txtResult.value = '20';
var btnPlus = document.getElementById('btnPlus');
QUnit.triggerEvent(btnPlus, "click");
var expected = '30';
equal(txtResult.value, expected, 'Expected value: ' + expected + ' Actual value: ' + txtResult.value);
});

Note from the Author or Editor:
On page 128 locate the following:
QUnit.triggerEvent(btnPlus, "click");

Add the following line as shown::
var btnPlus = document.getElementById('btnPlus');
QUnit.triggerEvent(btnPlus, "click");


Next, On page 129 locate the following:
QUnit.triggerEvent(btnMinus, "click");

Add the following line as shown::
var btnMinus = document.getElementById('btnMinus');
QUnit.triggerEvent(btnMinus, "click");

Alan Every  Jun 18, 2013  Aug 09, 2013
Printed
Page 281
Bullet points in centre

"Car has its wheelQuantity property and its set" - this should be "Car has its wheelQuantity property and it's set". Likewise, for the following line.

Note from the Author or Editor:
Add apostrophes. On page 281, locate the following:
Car has its wheelQuantity property and its set.
Boat has its propellerBladeQuantity and its set.

and replace with:
Car has its wheelQuantity property and it's set.
Boat has its propellerBladeQuantity and it's set.

Adrian Wragg  Jun 07, 2013  Aug 09, 2013
Printed
Page 149
Half-way, within 'nth-child' description

The pseudo class is named 'nth-child', but reference is made in the body to 'nthchild', without the hyphen. Similarly for nth-last-child laster on.

Note from the Author or Editor:
on page 149 locate the following:
li:nthchild(3)

and replace with:
li:nth-child(3)

also on page 149, locate the following:
li:nthlast-child(3)

and replace it with:
li:nth-last-child(3)

Adrian Wragg  Jun 07, 2013  Aug 09, 2013
Printed
Page 103
Paragraph 4 and code block

Extremely minor.

A more accurate value of PI is 3.14159265..., therefore PI to six decimal places is actually 3.141593. As a neater alternative, Math.PI is supported across all browsers.

Note from the Author or Editor:
No change needed here. It really is extremely minor if not picky.

Anonymous  Jun 07, 2013 
Printed
Page 85
Code block

The } to end the 'do' code block is missing before the 'while' statement.

The example is more generally flawed, which may confuse a reader learning the syntax by copying it. 'retries' is incorrectly named, as what is being counted are 'tries'. Also, if a user enters correct login information on their third attempt they will still be told they have had too many tries.

Note from the Author or Editor:
On page 85, locate the following code statement:
while(!authenticated() && retries < 3);

and add a right curly brace to the beginning as follows:
} while(!authenticated() && retries < 3);

Adrian Wragg  Jun 07, 2013  Aug 09, 2013
Printed
Page 38
Top paragraph, Quick Check

The attribute used to reference an external JavaScript file is stated as being 'ref'. This should be 'src'. Thus:

<script type="text/javascript" src="/Scripts/MyCode.js"></script>

The Quick Check panel's answer is missing the 'type' attribute, which would be part of the proper syntax the question requires. It is not formatted as code, as per other examples in the book.

The question states the folder as being 'scripts', whilst the answer uses 'Scripts'. For cross-platform compatibility, the cases should match.

Note from the Author or Editor:
On page 38, there are 2 references to the <script> tag. Each use the ref attribute. Also, the first reference has type="text/javascript" which is optional but better to leave out. Please change ref to src so bother <script> tag are as follows:
<script src="/Scripts/MyCode.js"></script>

Adrian Wragg  Jun 07, 2013  Aug 09, 2013
Printed
Page 23
Sample Code

The closing tag </html> appears twice.

Note from the Author or Editor:
On page 23, locate step 16. Please remove the last </html> tag.

Anonymous  Jun 07, 2013  Aug 09, 2013
Printed
Page 262
Lesson objectives

The objectives listed for Lesson 1 of Chapter 6 are actually the objectives for Chapter 7, Lesson 1.

Note from the Author or Editor:
On page 262, locate the following objectives:
Understand basic HTTP protocol actions.
Understand how data is sent to the server.

And replace with the following:
Understand basic object-oriented terminology.
Create JavaScript objects

Andrew Merola  May 20, 2013  Aug 09, 2013
PDF
Page 214
Last paragraph - continues onto 215

The title used for this section is "Using the <abbv> element for abbreviations and acronyms" also in the example <abbv> is used.

There is no <abbv> tag in the HTML5 spec. The tag should be <abbr>.

See here also:
http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-abbr-element

Note from the Author or Editor:
On page 214 and the top of page 215, locate all 7 instances of <abbv> and replace with <appr>. Also locate all 3 instances of </abbv> and replace with </abbr>

Keith MacCutchan  Apr 29, 2013  Aug 09, 2013
Printed
Page 132
Step 40

test "Initialize Test" contains lines to set the value of txtInput and txtResult to 0, this causes the test to pass without the correct code in the calculatorLibrary.js file

Note from the Author or Editor:
On page 132, locate step 40. Replace the following:
txtInput.value = '0';
txtResult.value = '0';

with:
txtInput.value = '';
txtResult.value = '';

Michael Rolph  Apr 20, 2013  Aug 09, 2013
Printed
Page 112
United States

In the Quick Check box, the author asks which method you should use if you want to return a new array based on an existing array. The answer should be slice, not splice.

Note from the Author or Editor:
On Page 112, search for the Quick check with the following:
You want to retrieve a new array that is part of an existing array.

Change the answer to:
Use the slice method.

Shawn Dorman  Apr 19, 2013  Aug 09, 2013
Printed
Page 111
United States

In the definition of splice, the author states that that 'ham' and 'bacon' will be added to the variable 'mySlice', when the example below it references the variable 'mySplice'

Note from the Author or Editor:
On page 111, please search for the following:
mySplice

And replace with the following:
mySlice

Shawn Dorman  Apr 19, 2013  Aug 09, 2013
PDF
Page 548
2nd and 3rd row in the call for showMessage()

This pdf-version is downloaded yesterday April 18:

This is how it shows:

showMessage("Latitude: 28.419436" /*+ position.coords.latitude*/ + "<br />"
+ "Longitude: -81.581203" /*+ position.coords.longitude*/ + "<br />"
+ "Timestamp: " + datetime);

Should the position latitude and longitude really be hardcoded in the message? And should "position.coords.latitude" and "position.coords.longitude" really be outcommented?

Note from the Author or Editor:
On page 548, search for the following:
showMessage("Latitude: 28.419436" /*+ position.coords.latitude*/ + "<br />"


Replace that line, PLUS the line that follows it with the following:
showMessage("Latitude: " + position.coords.latitude + "<br />"
+ "Longitude: " + position.coords.longitude + "<br />"


Jennie Rahm  Apr 19, 2013  Aug 09, 2013
PDF
Page 507
Last paragraph, Second sentence from the end

The example that shows, with a missing comma between 255 and 0.25:

"rgba(0,0,2550.25)"

should say:

"rgba(0,0,255,0.25)"

Note from the Author or Editor:
On page 465, search for the following:
"rgba(0,0,2550.25)"

a d replace with:
"rgba(0,0,255,0.25)"

Jennie Rahm  Apr 10, 2013  Aug 09, 2013
PDF
Page 494
first row

On the first row, a missing ' at the end of media:

$('#media).on('play', function () { $('#play').html('Pause'); });

It should say:

$('#media').on('play', function () { $('#play').html('Pause'); });

Note from the Author or Editor:
On page 450, search for the following:
$(?#media)

and replace with $(?#media')

Jennie Rahm  Apr 10, 2013  Aug 09, 2013
PDF
Page 451
In the code for point number 25

Number 25 has the following code shown:

function showMessageAsync(message) {
var coverPromise = displayCoverAsync();
var messagePromise = coverPromise.pipe(function () {
return showMessageContentAsync(message);
});
return messagePromise;

There is a missing curly bracket at the end, so the code should look like this instead:

function showMessageAsync(message) {
var coverPromise = displayCoverAsync();
var messagePromise = coverPromise.pipe(function () {
return showMessageContentAsync(message);
});
return messagePromise;
}

Note from the Author or Editor:
On Page 410, search for the following:
return messagePromise;

and add a closing curly brace on the next line as follows:
return messagePromise;
}

Jennie Rahm  Apr 05, 2013  Aug 09, 2013
PDF
Page 447
Number 11

Number 11:
Add a folder to the Content project and, in the Content folder, add a default.css style sheet file.

Note:
The project has the name AnimationExample. I assume that it should say something like this instead:

Add a Content folder to the project and, in the Content folder, add a default.css style sheet file.

Or, maybe it should say something like this:

In the Solution Explorer window, right-click the AnimationExample project, choose Add, select New Folder, and name it Content. In the Content folder, add a default.css style sheet file.

Note from the Author or Editor:
On page 407, search for the following text:
Add a folder to the Content project and, in the Content folder, add a default.css style sheet file.

and replace with:

In the Solution Explorer window, right-click the AnimationExample project, choose Add, select New Folder, and name it Content. In the Content folder, add a default.css style sheet file.

Jennie Rahm  Apr 05, 2013  Aug 09, 2013
PDF
Page 394
The example for app.get, line beginning with response.end

In the example for the app.get, the third line is:

response.end('Hello ' + request.query.userName + '!<br />');

The third line should instead start with:

response.write('Hello...

In the next code example, where showing the completed app.js file, app.get is correct with response.write for the 'Hello'

Note from the Author or Editor:
On page 358, search for the following text:
response.end('Hello ' + request.query.userName + '!<br />');

and replace with:
response.write('Hello ' + request.query.userName + '!<br />');

Jennie Rahm  Apr 03, 2013  Aug 09, 2013
PDF
Page 36
7th paragraph

In an effort comply with as many standards as possible

should be:

In an effort to comply with as many standards as possible

Note from the Author or Editor:
This is an error on the pre-release only. The release is correct.

Anonymous  Mar 07, 2013  Mar 07, 2013
PDF
Page 364
Styling the validations

The code reads:

:valid {
border :solid lime;
font-weight:normal;
}

For the 'border' property the space needs to be removed from before the ':'. To make it read:

:valid {
border:solid lime;
font-weight:normal;
}

Note from the Author or Editor:
On page 364, please locate:
border :solid lime;

And replace it with the following:
border:solid lime;

Christopher Peerman  Feb 26, 2013  Aug 09, 2013
PDF
Page 293
Chapter 6, 'Creating dynamic objects using the factory pattern' code listing

The code listing is as follows:

var car1 = new getVehicle(2000, 'Ford', 'Fusion');
var car2 = new getVehicle(2010, 'BMW', 'Z4');

The getVehicle is returning an object which can be used by car1 & car2. By using the 'new' keyword is in effect creating a copy of the object returned by getVehicle and then deleting the original object which is unnecessary and inefficient. This code listing should either be the following, or a description given as to why the 'new' keyword is there:

var car1 = getVehicle(2000, 'Ford', 'Fusion');
var car2 = getVehicle(2010, 'BMW', 'Z4');

Note from the Author or Editor:
On page 293, locate:
var car1 = new getVehicle(2000, 'Ford', 'Fusion');

var car2 = new getVehicle(2010, 'BMW', 'Z4');

And change to:
var car1 = getVehicle(2000, 'Ford', 'Fusion');

var car2 = getVehicle(2010, 'BMW', 'Z4');

Christopher Peerman  Feb 26, 2013  Mar 07, 2013