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.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

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

Version Location Description Submitted by Date submitted
PDF Page Last Paragraph
294

2ns sentence does not mean any sense "The second expression wraps the this object, which is a DOM element being passed to an event listener." It should be deleted.
Also, theirs sentence, there is extra "the" at the end.

Ibrahem Khalil  Dec 13, 2013 
Printed Page 17
1st paragraph

Text says that "project also contains the package.manifest file" while Figure 1-8 shows that the name of such file is "package.appxmanifest".

Rafael Domene  Sep 09, 2013 
PDF Page 36
8 paragraph (question 4)

Just a notice :

On that question, I thought that the answer B. contained a simple double quote (not 2 simple quote). So I made it a syntax error in my answer.


You want to use the disabled Boolean attribute on a text box. How can you accomplish
this? (Choose all that apply.)
A. <input name=?firstName? type=?text? disabled />
B. <input name=?firstName? type=?text? disabled=?? />
C. <input name=?firstName? type=?text? disabled=?true? />
D. <input name=?firstName? type=?text? disabled=?disabled? />

on page 36, its easier to reconize the 2 double quotes cause a space sperate them on that text :

<input type="checkbox" name="fruit" value="Apple" checked='' />

Anonymous  Mar 10, 2014 
Printed Page 45
4

missing value for sandbox

replace
<iframe sandbox src="http://someOtherDomain.net/content">
</iframe>

with
<iframe sandbox="" src="http://someOtherDomain.net/content">
</iframe>

Linda  Oct 01, 2013 
Printed Page 50
Under "The embed tag" heading

The book states that the embed tag supports fallback content and this will be displayed if the browser does not support the content being embedded.

This is not the case, from the HTML5 specification, "The embed element has no fallback content." (http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element)

It is only the object tag that supports this, not the embed tag as suggested by the book.

Fiona Holder  Oct 10, 2013 
PDF Page 52
2nd paragraph

The last sentence:
The following is an example of using a <param> tag with an audio file to keep the audio file from automatically playing when the page is loaded.

"keep" should be replaced with "prevent".

Ibrahem Khalil  Dec 10, 2013 
Printed Page 79-86
pages

pages 79-86 are missing.

Frank Cheung  Aug 28, 2013 
PDF Page 79
3rd parahraph

When you run this code and input a number such as 20, the message displays as You Will Soon Be 201 Years Old!,,,,,

You capitalize the first letter of each word in the sentence where in the alert they are not so.

Ibrahem Khalil  Dec 11, 2013 
Printed, PDF Page 84
United States

The comparison operator for "not same value or type" is "!==", not "!===".

Dan Francis  Sep 23, 2013 
PDF Page 105
Last Paragraph

By pressing F11, you step into the areaOfPizza function. When you?re in the function, press F11 again to set the radius.

The second F11 should be F10 (Step Over). Although in this case, both will do the same behavior, but we want to move to the next line. If there was another function call during calculating the radius, pressing F11 would cause to step into that function instead of moving to the next line as desired.

Ibrahem Khalil  Dec 11, 2013 
PDF Page 118
Keyboard event reference

The explanation implies that "keypress" and "keyup" are the same. Of course, you know that there is a difference. Fresh developers who are reading your book may misunderstand you. So I suggest adding more explanation.

Keydown:
The keydown event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

Keypress:
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character. In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.

Keyup:
The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

Ibrahem Khalil  Dec 11, 2013 
Printed Page 121
4th bullet point

should be publisher-subscriber pattern rather than publisher or subscriber pattern.

Frank Cheung  Aug 28, 2013 
Printed Page 126
Step 13

March 10, 2014

Firefox does not support the this.innerText property.

Running the QUnit test would pass using IE and Chrome but fail with Firefox. Firefox returns undefined value when this.innerText is referenced.


function numberClick() {

// Replaced this.innerText with this.textContent
//
txtInput.value = txtInput.value == '0' ?
this.textContent : txtInput.value + this.textContent;

// Code listed in the book using this.innerText which causes a "undefine" error in Firefox.
//
//txtInput.value = txtInput.value == '0' ?
//this.innerText : txtInput.value + this.innerText;

}

chi ernie cheung  Mar 10, 2014 
PDF Page 131
Step 36

var btnPlus = document.getElementById('btnPlus');
is missing before
QUnit.triggerEvent(btnPlus, "click");
&
var btnMinus = document.getElementById('btnMinus');
is missing before
QUnit.triggerEvent(btnMinus, "click");

Ibrahem Khalil  Dec 11, 2013 
Printed Page 132
step 40

The printed test sets the values of both txtInput and txtResult to an empty string by these two lines:
txtInput.value = '';
txtResult.value = '';

Since these lines are being executed after the initialization function, they overwrite the values that are being set there by these lines:
txtInput.value = '0';
txtResult.value = '0';

The test should let the initialization function do it's work and then it should verify whether the correct values are being set, so these two lines have to be removed completely, resulting in the following test:

test("Initialize Test", function () {
expect(2);
var expected = "0";
equal(txtInput.value, expected, 'Expected value: ' + expected + ' Actual value: ' + txtInput.value);
equal(txtResult.value, expected, 'Expected value: ' + expected + ' Actual value: ' + txtResult.value);
});

Sven de Gilde  Nov 06, 2013 
Other Digital Version 132
step 40

Confirmed errata solution for this breaks it even more....

>On page 132, locate step 40. Replace the following:
>txtInput.value = '0';
>txtResult.value = '0';

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

THEN....
Add a call to the initialise() function BEFORE the two tests.

OR
On page 132, locate step 40. REMOVE the following:
txtInput.value = '0';
txtResult.value = '0';

Please correct this. Most unprofessional to provide a solution that doesn't work, but more so to ignore the fact that this error has been on the "unconfirmed errata" since last year!





Tom Odulate  Feb 28, 2014 
Printed Page 144
First paragraph

In the example, multiple @import statements are being shown. The media types in the example are placed after the semicolon, like below:
@import url('/Content/header.css'); screen

This placement is incorrect. The media type needs to be placed before the semicolon, like below:
@import url('/Content/header.css') screen;

Incorrect placement might result in the style sheet not being processed properly.

Sven de Gilde  Nov 11, 2013 
PDF Page 144
First example

The explanation should include also various formats, like the following:
@import "mystyle.css";
@import url("mystyle.css");
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@media print {
/* style sheet for print goes here */
}

Ibrahem Khalil  Dec 12, 2013 
Printed Page 149
:only-of-type

:only-of-type is described as "selects elements that are the only child of the parent and have the specified type"

Should read "selects elements that are the only child of the parent with the specified type".

Fiona Holder  Feb 10, 2014 
Printed Page 153
Last paragraph

Consider the following HTML document that has is three...

"is" is superfluous.

Frank Cheung  Aug 29, 2013 
PDF Page 157
3rd paragraph

Consider the following HTML document that has is three <a> elements, one of which sets the href attribute to http://microsoft.com.

http://microsoft.com must be replaced with logo.jpg

Ibrahem Khalil  Dec 12, 2013 
PDF Page 157
Last paragraph

a datalinktype should be replaced with a data-linktype

Ibrahem Khalil  Dec 12, 2013 
PDF Page 163
1st paragraph

'background color' should be replaced with 'font size'

Ibrahem Khalil  Dec 12, 2013 
Printed Page 165
second example

The CSS selector is: div p:first-of-type.
There is a . at its end, so it is not a valid one and in that case the correct answer will be A.
Page 203 states the correct answer is B so the . is a typo.

Emile Wintraeken  Dec 03, 2013 
PDF Page 172
1st paragraph

This is especially useful when content is placed over an image and you still want to see the image.

I think the right explanation would be:
This is especially useful when text is placed "under" an image and you still want to see the "text".

Ibrahem Khalil  Dec 12, 2013 
PDF Page 188
2nd paragraph

Last sentence "... their width property is set to 33 percent,
using the following style rules."
It's 32 not 33.

Ibrahem Khalil  Dec 12, 2013 
ePub, Page 189
Rules for naming variables, last two bullet points

The second bullet point states that "Variable names must not contain mathematical or logical operators" while the last two bullet points contradict this by stating that "for-Loop" and "my-Data" are legal examples.

Dan Lewis  Feb 28, 2014 
PDF Page 192
Last paragraph

Last sentence "... you can take div3, div4, and div5 out of div2."
Or we can modify div2 style to be:
#div2 {
background-color: cyan;
border: 0px;
}

Ibrahem Khalil  Dec 12, 2013 
PDF Page 207
1st paragraph

The link is:
http://www.nvda-project.org/
http://www.nvaccess.org/

not:
http://www.nvdaproject.org/.

Ibrahem Khalil  Dec 12, 2013 
PDF Page 208
Figure 5-2

HTML content for document footer in Figure 5-2 should be <div id="footer">

Anonymous  Sep 19, 2013 
PDF Page 212
2nd paragraph under "Using roles"

3rd sentence, missing "parent"
There are many parent role classes, and there are child role classes that inherit from "parent" role classes.

Ibrahem Khalil  Dec 12, 2013 
PDF Page 212
1st paragraph under "Using roles"

It's "Web Accessibility Initiative" not "Web Accessible Initiative"

Ibrahem Khalil  Dec 12, 2013 
PDF Page 241
Adding a caption to a table

Last sentence "If you use the <caption> element, it must be the first element within the <table> element."
That is not required, it can also be at the end of a table, or after defining colgroup.

Ibrahem Khalil  Dec 13, 2013 
PDF Page 242
The paragraph above the figure

"the existing style for the first column has been removed"
How?!!

Ibrahem Khalil  Dec 13, 2013 
Printed Page 265
5th bullet point

local should be locale.

Frank Cheung  Sep 02, 2013 
Printed Page 318
2nd html example

The "for" parameter in the element <label for="Id"> won't work because "for" expects an id and the input element doesn't have one as only a name parameter defined.

Alan  Nov 12, 2013 
Printed Page 350
section "Publishing the package"

The book asks the reader to publish a package "math_example" to the node package manager. I am either missing something or this can never work - the author has already published a package of this name so I get a version error. Maybe if I correct the version I could update the author's code, but surely you don't intend every reader to update the author's code with their own untried version?

Alan  Dec 04, 2013 
PDF Page 371
after "readyState codes"

As these values show, you need to subscribe to the onreadystatechange event before you call the open method.

"open" must be replaced with "send".

Ibrahem Khalil  Dec 14, 2013 
PDF Page 388
HTML Markup

The form element is missing ID="ContactForm". This prevents the form from being serialized.

Adam S  Nov 06, 2013 
PDF Page 395
function fetchAjaxAsync

The signature of that function should be changed to be:
function fetchAjaxAsync(url, processResult, errorCallback) {

which means "processResult" instead of "callback"
because you are using "processResult" later inside the function
if (xhr.status == 200) {
processResult();
}

Ibrahem Khalil  Dec 15, 2013 
Printed Page 421
code snippet, function cancelKeepAlive()

In the second printing, in the code example, in function cancelKeepAlive(), the following call is being made to cancel the started timer.

cancelTimeout(timerId);

This function does not exist. The following should be used instead:

clearTimeout(timerId);

Sven de Gilde  Nov 21, 2013 
PDF Page 427
11 & 12

What is the difference between the code of 11 & 12?

Ibrahem Khalil  Dec 15, 2013 
PDF Page 448
currentSrc & src

The difference is not clear, it should be more explained.

currentSrc Read only: The absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the networkState is EMPTY.

src: Reflects the src HTML attribute, containing the URL of a media resource to use.

Ibrahem Khalil  Dec 15, 2013 
PDF Page 475
Drawing by using paths

Step #5
"and/or" must be added on step 5 to be as the following:
5. Render the filled shape and/or outlined shape by .....

Ibrahem Khalil  Dec 16, 2013 
PDF Page 512
function dropItem(e)

last line of code, replace $(e.target) with hole, as we already defined it in the 1st line.

Ibrahem Khalil  Dec 17, 2013 
PDF Page 518
bottom section

If you drop a file anywhere on the webpage, the file opens in another window. For example, if you drag and drop a movie onto the webpage, the movie will start playing in a new window.

- that behavior does not apply to videos - they download (chrome Version 29.0.1547.66 m)
firefox version 23.0.1

Jakob  Sep 15, 2013 
Printed Page 543
showError function, first case

under case error.PERMISSION_DENIED:
showMessge should be showMessage

Frank Cheung  Sep 04, 2013 
Printed Page 544
Paragraph 'Specifying options', item 'timeout'

In the description for timeout, the last line reads 'Default id -1, which means there is no timeout.'

This is incorrect, there is no default value for timeout. If you don't want an explicit timeout, leave the timeout from the options.

Sven de Gilde  Nov 29, 2013 
PDF Page 544
Specifying options, timeout

The default value used for the timeout attribute is Infinity, if the options parameter to getCurrentPosition or watchPosition is omitted. If a negative value is supplied, the time-out value is considered to be zero.

Ibrahem Khalil  Dec 17, 2013 
PDF Page 554
Lesson 1, 2., A.

Missing r in parameter

Ibrahem Khalil  Dec 17, 2013 
Printed Page 597
fourth line of function FindAuthors()

The constant 'IDBCursor.PREV' is no longer supported. The constant has been replaced by the string value 'prev'.

See https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor#Constants

Sven de Gilde  Nov 29, 2013