Errata

... die Beispieldateien von der Verlagswebsite unter www.//examples.orreily.de/german_examples/javascriptmmger.

RICHTIG:
... die Beispieldateien von der Verlagswebsite unter examples.oreilly.de/german_examples/javascriptmmger.


... the sample files from the publisher website at www.//examples.orreily.de/german_examples/javascriptmmger.

TRUE:
... the sample files from the publisher website at http://examples.oreilly.de/german_examples/javascriptmmger/

Wrong link:
www.//examples.oreilly.de/german_examples/javascriptmmger/

Correct link:
http://examples.oreilly.de/german_examples/javascriptmmger/

by following the step by step the code should look like this:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.striped tr:even').addClass('even');
});
</script>

but you have it as
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('table.striped tr:even').addClass('even');
});
</script>

Note from the Author or Editor:
In step 7 code should be:

$(document).ready(function() {
$('table.striped tr:even').addClass('even');
});

Character [^ ]

Towards the end of the description, it says that this is the same as \d when in fact it would be the same as \D, the exact opposite of what is stated in the book.

Change (the same as \d) to (the same as \D)

Also, on a separate note, when you go to http://missingmanuals.com/cds and click on J to find the JavaScript book, the JavaScript book has an incorrect heading. It reads CSS: The Missing Manual.

You might want to fix that.

Note from the Author or Editor:
Table 4-3 change description for [^ ] to

Any character except one in brackets. For example, [^aeiouAEIOU/ will match any character that isn't a vowel. [^0-9] matches any character that's not a number (the same as \D).

Error corrected. Will be fixed in next printing.

On page 149 you are missing the "else" part of the "if/else"statements which create the variables "fillMonth" in step 6 and "fillDate" in step 8.

Eliminating these from the step by step directions meant the explanation of what they do was also missing.

If I did not carefully proofread my code against the completed function, rather than the step-by-step instructions, I would not have been able to debug the code.

Note from the Author or Editor:
Code in steps 6 and 8 on page 149 is correct.
However, there are two mistaken blocks of code in final code listed in step 13 on page 151.
This is wrong:
if (realMonth<10) {
fillMonth = '0' + realMonth;
} else {
fillMonth = realMonth;
}

Should be:
var fillMonth=realMonth;
if (realMonth<10) {
fillMonth = '0' + realMonth;
}

Also this is wrong:
if (day<10) {
fillDate='0' + day;
} else {
fillDate=day;
}

should be
var fillDate=day;
if (day<10) {
fillDate='0' + day;
}

Error corrected. Will be fixed in next printing.

The step-by-step instructions do not include the line:

var fillDate = (day<10) ? '0' + day : day;

Therefore you have not given any explanation of what this line is supposed to do.

The script will run either with or without the line, but I would like to know what I am coding!

Thank you for your help.
Margie Lynch-Freshner

Note from the Author or Editor:
The code on page 151 mistakenly lists the following line:
var fillDate = (day<10) ? '0' + day : day;
This is not necc. and is shorthand method for achieving the same code in step 9 on page 149.

Error corrected. Will be fixed in next printing.

The complete dateString function on page 151 is wrong and does not match the complete_4.1.html example from www.sawmac.com/javascript.

It is missing the declaration of the fillMonth variable

var fillMonth

before the line that reads "if (realMonth<10) {".

It is also missing the declaration of the fillDate variable

var fillDate

before the line that reads "if (day<10) {"

Lastly the line that reads "var fillDate = (day<10) ? '0' + day : day;" can, I beleive, be removed. It is not explained in the text nor matches the example. If that is the intended way of declaring the fillDate variable, it at least needs to be moved higher in the function prior to the IF (day<10) statement, and the example would need changing to match it.

Additionally, with regards to the function summary on page 151 and the complete_4.1.html file from the supplemental materials, neither of these functions matches the technique explained on the previous pages 148-150. Any true beginners to javascript will probably be very confused when working with this example.

On Page 149 you declare the fillmonth vairable as follows:

var fillmonth = realMonth;

which eliminates the need to have the ELSE statement to account for months which are greater than 10. In the example and on page 151 you instead simply define fillmonth but then use the ELSE statement as follows:

var fillMonth
if (realMonth<10) {
fillMonth = '0' + realMonth;
}
else {
fillMonth = realMonth;

The same discrepancy is found with the fillDate variable. On page 149 you use the declaration

var fillDate=day;

but then in the example and on page 151 you use the ELSE statement:

var fillDate
if (day<10) {
fillDate='0' + day;
} else {
fillDate=day;
}

Note from the Author or Editor:
Step 13 on page 151. The complete function code should look like this:

function dateString(date,string) {

var year=date.getFullYear();
var month=date.getMonth();
var realMonth=month+1;
var fillMonth=realMonth;
if (realMonth<10) {
fillMonth = '0' + realMonth;
}
var months = ['January','February','March','April','May',
'June','July','August','September',
'October','November','December'];
var monthName=months[month];
var day=date.getDate();
var fillDate=day;
if (day<10) {
fillDate='0' + day;
}
var weekday=date.getDay();
var weekdays = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
var dayName=weekdays[weekday];
string = string.replace(/%Y/g,year); // 2008
string = string.replace(/%y/g,year.toString().slice(-2)); //08
string = string.replace(/%M/g,monthName); //January
string = string.replace(/%m/g,monthName.slice(0,3)); //Jan
string = string.replace(/%N/g,fillMonth); // 01
string = string.replace(/%n/g,realMonth); // 1
string = string.replace(/%W/g,dayName); //Monday
string = string.replace(/%w/g,dayName.slice(0,3)); //Mon
string = string.replace(/%D/g,fillDate); //05
string = string.replace(/%d/g,day); // 5
return string;
}

Error corrected. Will be fixed in next printing.

Tip: Because the ready() function is used nearly anytime you add jQuery to a page, there's a shorthand way of writing it. You can remove the $(document).ready part, and just type this:

Missing content at end of this line!

Note from the Author or Editor:
$(function() {
// do something on document ready
});

Error corrected. Will be fixed in next printing.

What the heck is wrong with tutorial 7.1??!

I input it exactly as described in the printed tutorial but when I hovered over each picture, I could see the link to the large copy of the picture in the status bar. My understanding of this tutorial is that when I hovered over the image it would change to the color version based on the line near the bottom of page 242:

"In this function (line 13), you access that value again to set the src back to its original value. Save the page, view it in a Web browser, and mouse over each of the black and white images to see them pop into full color."

If I click on one of the pictures, then it loads a new page giving me the large image on a separate page. I have to back-arrow to return to my page.

I opened up the completed copy of the file. When I ran it I got a fatal error on line 16 saying "console is not defined". Other than that, the page ran exactly the same way.

This first sample is my typed in script. The second sample is the script from the complete_7.1.html.

<script type="text/javascript">
$(document).ready(function()
{
$('#gallery.img').each(function()
{
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt, '_h$1');
$(this).hover(
function()
{
$(this).attr('src', preloadImage.src);
},
function()
{
$(this).attr('src', imgFile);
}
);//end hover
}); //end each
}); // end ready
</script>
___________________________
<script type="text/javascript">
$(document).ready(function() {

$('#gallery img').each(function() {
var imgFile = $(this).attr('src');
console.log(imgFile);
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');

$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
$(this).attr('src', imgFile);
}
); // end hover
}); // end each
}); // end ready()
</script>
___________________________


Note the line that says: console.log(imgFile);
Not only is this not in the printed book or the Safari Online copy, but its existence gives me an error.

Could you please send me a copy of the correct file?

I specifically chose the JavaScript Missing Manual because other books in the series have been effective and accurate at explaining the processes I am trying to learn. This is the third errata report I have submitted and I have only gotten halfway through the book!

Marjorie Lynch-Freshner

Note from the Author or Editor:
Console.log(imgFile) is in the final tutorial file. That line has been removed from the files online.

The other problem I could not replicated. We need more information such as what browser, what browser version and which platform you are on.

The object literals used in the first and second code examples are not correctly formatted. Object literals contain name/value pairs. Each name/value pair ends with a comma, except for the last one in the list.

First code example should look like this:
{
left: '650px',
opacity: .5,
fontSize: '24px'
}

The second code example should have the same object literal listed above:
{
left: '650px',
opacity: .5,
fontSize: '24px'
}

Note from the Author or Editor:
Error corrected. Will be fixed in next printing.

In accordion tutorial 10.1 the opened panel's tab bar would not change to dark blue.
Tried changing "selectedClass:'current'" to "selectedClass:'.current'".
Still did not work.

Then ran "completed_10.1" file.
It did not work.

Note from the Author or Editor:
Page 363, step 8: skip this step.

Correction Entered:
Note from the Author or Editor:
Page 363, step 8: skip this step. Page 364, step 9, CSS code should read: .ui-accordion-content-active { background: #036; }

Correction Should Have Been:
Note from the Author or Editor:
Page 363, step 8: skip this step. Page 364, step 9, CSS code should read: #accordion h2.ui-state-active { background: #036;}

Note from the Author or Editor:
Error corrected for step 9.

This tutorial is supposed to allow you to create a Google map on a webpage including allowing the user to get driving directions. I went through the tutorial but despite my best efforts, whenever I input a location and clicked the submit button, directions were not forthcoming.

I attempted to test this function in the "complete" sample provided by the author to see where my mistake might be, but the complete webpage (complete_12.2.html) also displayed the same failure.

The only thing I can think of is that this code needs to be run on a web server (some of the AJAX tutorials can only operate on a web server and not a local computer), but I didn't see explicit instructions or a caveat stating that this was so for the JMaps Tutorial.

Thanks.

Note from the Author or Editor:
There have been several reports that the tutorial for Google maps driving directions does not for some readers of the book. Unfortunately, neither I nor the developer of the jQuery Maps plugin know what is causing this. We're looking into this further and will hopefully have an answer that we can post on the companion web site (www.sawmac.com/javascript/) soon.