ppk on JavaScript - the example scripts

This page contains information about the example scripts.

Line numbers

The majority of the code examples in the book come from the example scripts. I've done my best to annotate these code examples with line numbers, so that you can easily find and study the complete code. You can download the ZIP file that contains the example scripts in .txt format, including the line numbers. If you want to print them, I advise you to select Landscape format.

The line numbering system is not perfect. I frequently made minor changes to the scripts while I was writing the book, and it was only in May, when I started on the final version, that I froze the example scripts so that I could start adding the line numbers to all code examples.

Unfortunately I made a few slight errors during this freezing. For instance, line 105 of Form Validation is spurious: it occurs between two lines with closing curly braces }, and in general I never use an empty line in such a place. When I noticed this error, I had already annotated the majority of the example scripts and I didn't want to go through six chapters to check all Form Validation line references. Therefore the error has not been removed.

Besides, I'm absolutely certain I made a line numbering mistake somewhere in the book. I just haven't found the mistake(s) yet.

The example scripts

Below you find the eight example scripts, as well as links to the working version and the .txt version with line numbers. See the Introduction for a general description of the scripts.

The book contains three general comparisons of all the example scripts:

In section 2G I discuss their usability and accessibility.
In section 4F I discuss their overall design and their links to the HTML structural layer.
In section 7G I discuss the events I chose for them.

Textarea Maxlength

Working version
Printable version
Line by line explanation.

This script operates in all my Blog pages to restrict comment length

p. 57/8: Usability and accessibility.
p. 113/5: Why Textarea Maxlength needs custom attributes.
p. 118/9: Defining relations between the textarea and the <span> that shows the counter.
p. 129/30: Overall structure and cooperation with HTML.
p. 302/3: Executing the onkeyup event handler directly.
p. 335: Event handling.
p. 383/4: Using innerHTML to insert the <span>. Cooperation of innerHTML with "pure" DOM methods.

Usable Forms

Working version
Printable version
How to use the script in your own sites.

This example script shares a page with Form Validation.

p. 35: use display: none or remove form fields from document structure?
p. 54: don't use CSS to hide the <tr>s!
p. 58/9: Usability and accessibility.
p. 99-102: Mozilla bug.
p. 113/5: Why Usable Forms needs custom attributes.
p. 130/1: Overall structure and cooperation with HTML.
p. 194/5: The if statement on lines 77-81.
p. 202: The while loop in lines 41-51.
p. 309: Why I use addEventSimple().
p. 313/4: Using one onclick event handler to service the entire form.
p. 331: Why I use the this keyword.
p. 336: Event handling.
p. 357/8: Initialization as example of using getElementsByTagName.
p. 363: The if statement on lines 77-81 as an example of the use of nodeName.
p. 369: Line 126 as an example of insertBefore().
p. 372: Line 49 as the sole example of replaceChild().
p. 401-3: Why I create an array to hold the <tr>s that should be removed from the document. How I use that array. shift() and push().
p. 414/5: Storing elements in hyperspace. The hiddenFormFieldPointers associative array.
p. 417/8: The use of markers.

Form Validation

Working version
Printable version

This example script shares a page with Usable Forms.

p. 60: Usability and accessibility.
p. 111/2: The custom validation attribute and why it's better not to use it.
p. 131-3: Overall structure and cooperation with HTML.
p. 185: validForm as an example of boolean variables.
p. 199/200: the switch block in isRequired().
p. 230: the validationFunctions associative array.
p. 234: the reqs array on lines 80-85 as an example of an array.
p. 297: Submitting the form or not (return true or false in line 105).
p. 337/8: Event handling.
p. 411/2: The isRequired() function as an example of checking form fields.
p. 429/30: Why I add the class name "errorMessage" to the form fields.
p. 444/5: Why Form Validation changes a class name instead of using the style property.

Working version
Printable version

This example script shares a page with Edit Style Sheet.

p. 39-40: use CSS :hover or JavaScript?
p. 60: Usability and accessibility.
p. 106: HTML design: nested <ul>s.
p. 119: Use class="menutree" as a hook.
p. 122/3: Including Dropdown Menu and Edit Style sheet in one page.
p. 133/4: Overall structure and cooperation with HTML.
p. 313/4: Using one onmouseover and one onmouseout event handler to service the entire dropdown menu.
p. 328-330: Avoiding unexpected event targets.
p. 332/3: Why I use the event target.
p. 338/9: Event handling.
Section 7H, passim: The mouseout event.
p. 431-3: Why and how I use document.write() to add an extra style sheet.

Edit Style Sheet

Working version
Printable version

This example script shares a page with Dropdown Menu.

p. 61: Usability and lack of accessibility.
p. 122/3: Including Dropdown Menu and Edit Style sheet in one page.
p. 134/5: Overall structure and cooperation with HTML.
p. 197: the switch block on lines 74-86.
p. 205/6: the do/while loop on lines 79-95.
p. 228/9: the assignStyles() function as an example of the [] notation of JavaScript objects.
p. 232: the for in statement on lines 68-70.
p. 234: findPos returns an array.
p. 303: Executing the onchange event handler directly.
p. 321: Why not to use the mouse position to determine the position of the color picker.
p. 339/40: Event handling.
Section 9D, passim: How Edit Style Sheet edits a style sheet.
p. 460-2: Finding the position of the "Pick" link.

Sandwich Picker

Working version
Printable version

p. 61-63: Usability and accessibility. Problems with the usability of the accessible version.
p. 106: HTML design: one <tr> equals one sandwich.
p. 107/8: CSS design: show and hide Order and Trash buttons by CSS, not by JavaScript.
p. 109: Using one id as a hook.
p. 136: Overall structure and cooperation with HTML.
p. 213/4: createReadablePrice() as an example of the return value of a function.
p. 224/5: The price property.
p. 309: Why I use the traditional event handling model.
p. 333/4: Comparison of using the this keyword and the event target.
p. 341: Event handling.
p. 359: One <tr> as example of the short-distance document travel properties.
p. 360/1: moveToOrder() and removeFromOrder() as examples of the use of parentNode.
p. 364: The use of nodeValue on line 38.
p. 368: addExtraButton() as an example of appendChild().
p. 371: removeExtraButton() as an example of removeChild().
p. 374: Creating the Order and Trash buttons.
p. 377: Cloning the Order and Trash buttons.
p. 378: Appending the <tr>s to the <tbody>.
p. 390/1: The JavaScript price property vs. the HTML price attribute.
p. 416: Determining whether an element is in DOM hyperspace in removeButton().

XMLHTTP Speed Meter

Working version
Printable version

Live version. I wrote the script for the ISP Wanadoo, but meanwhile it has changed its name to Orange; and the graphic design of the page has changed. The script still works, though.

p. 64: Usability and accessibility.
p. 137: Overall structure and cooperation with HTML.
p. 216/7: the sendRequest function as an example of nested functions and definition scope of variables.
p. 232/3: the speedText array.
p. 341/2: Event handling.
p. 422: The setWidth() function.
p. 434: Why lines 21-22 are wrong: the submit button should be hidden as soon as possible; and not onload.
Section 9G, passim: How the animation works.
p. 464/5: Creating an XMLHttpRequest object.
p. 466: Object detection for the XMLHttpRequest object.
p. 471: The sendRequest() function.
p. 473: The HTTP status code.
p. 474: The callback function.
p. 475: The catchData() function.

Site Survey

Working version
Printable version survey.js
Printable version popup.js

This is the only example script that consists of two JavaScript files: survey.js for use in all pages of the host site; popup.js for use in the popup.

p. 64/5: Usability and accessibility.
p. 81/82: Object-detection-once-removed in popup.js
p. 116/7: Determining visitor status (general overview).
p. 138/9: Overall structure and cooperation with HTML.
p. 210: addInput() from popup.js as an example of a function.
p. 246: checking if the popup is already available (survey.js lines 66-73).
p. 251: Referring to other windows.
p. 252/5: Re-establishing contact with the main window.
p. 256: Attempting to communicate with another window.
p. 264: resizeTo() and focus()in lines 59-63.
p. 269: The timeout in trackMain(), lines 34-37.
p. 280: Use of cookies.
p. 282: Determining cookie support.
p. 309: Why I use addEventSimple().
p. 342: Event handling.
p. 383: Using innerHTML to show the popup warning text.