Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

ADSAFE.keys

  • Loading branch information...
commit fc87cee2bffea593e5e1a39c9cd73d39d4d68ee5 1 parent 329d41d
@douglascrockford authored
Showing with 431 additions and 427 deletions.
  1. +52 −76 adsafe.js
  2. +329 −329 dom.html
  3. +37 −18 index.html
  4. +13 −4 widget.html
View
128 adsafe.js
@@ -1,5 +1,5 @@
// adsafe.js
-// 2012-02-23
+// 2012-05-09
// Public Domain.
@@ -20,43 +20,42 @@
/*global window*/
-/*jslint browser: true, devel: true, nomen: true */
-
-/*properties "", "#", "&", "*", "+", ".", "\/", ":blur", ":checked",
- ":disabled", ":enabled", ":even", ":focus", ":hidden", ":odd", ":tag",
- ":text", ":trim", ":unchecked", ":visible", ">", "[", "[!=", "[$=",
- "[*=", "[=", "[^=", "[|=", "[~=", _, "___ on ___", "___adsafe root___",
- ___nodes___, ___star___, __defineGetter__, "_adsafe mark_", _intercept,
- a, abbr, acronym, addEventListener, address, altKey, append,
- appendChild, apply, area, arguments, autocomplete, b, bdo, big,
- blockquote, blur, br, bubble, button, call, callee, caller,
- cancelBubble, canvas, caption, center, change, charAt, charCode, check,
- checked, childNodes, cite, class, className, clientX, clientY, clone,
- cloneNode, code, col, colgroup, combine, concat, console, constructor,
- count, create, createDocumentFragment, createElement, createRange,
- createTextNode, createTextRange, cssFloat, ctrlKey, currentStyle, dd,
- defaultView, del, dfn, dir, disabled, div, dl, dt, each, em, empty,
- enable, ephemeral, eval, exec, expand, explode, fieldset, fire,
+/*jslint browser: true, devel: true, forin: true, nomen: true */
+
+/*properties
+ '', '#', '&', '*', '+', '.', '/', ':blur', ':checked', ':disabled',
+ ':enabled', ':even', ':focus', ':hidden', ':odd', ':tag', ':text', ':trim',
+ ':unchecked', ':visible', '>', '[', '[!=', '[$=', '[*=', '[=', '[^=', '[|=',
+ '[~=', _, '___ on ___', '___adsafe root___', ___nodes___, ___star___,
+ __defineGetter__, '_adsafe mark_', _intercept, a, abbr, acronym,
+ addEventListener, address, altKey, append, appendChild, apply, area,
+ arguments, autocomplete, b, bdo, big, blockquote, blur, br, bubble, button,
+ call, callee, caller, cancelBubble, canvas, caption, center, change, charAt,
+ charCode, check, checked, childNodes, cite, class, className, clientX,
+ clientY, clone, cloneNode, code, col, colgroup, combine, concat, console,
+ constructor, count, create, createDocumentFragment, createElement,
+ createRange, createTextNode, createTextRange, cssFloat, ctrlKey,
+ currentStyle, dd, defaultView, del, dfn, dir, disabled, div, dl, dt, each,
+ em, empty, enable, ephemeral, eval, exec, expand, explode, fieldset, fire,
firstChild, focus, font, form, fragment, fromCharCode, get, getCheck,
getChecks, getClass, getClasses, getComputedStyle, getElementById,
- getElementsByTagName, getMark, getMarks, getName, getNames,
- getOffsetHeight, getOffsetHeights, getOffsetWidth, getOffsetWidths,
- getParent, getSelection, getStyle, getStyles, getTagName, getTagNames,
- getTitle, getTitles, getValue, getValues, go, h1, h2, h3, h4, h5, h6,
- has, hasOwnProperty, hr, i, id, img, inRange, indexOf, input, ins,
- insertBefore, isArray, kbd, key, keyCode, klass, label, later, legend,
- length, li, lib, log, map, mark, menu, message, name, nextSibling,
- nodeName, nodeValue, object, off, offsetHeight, offsetWidth, ol, on,
- onclick, ondblclick, onfocusin, onfocusout, onkeypress, onmousedown,
- onmousemove, onmouseout, onmouseover, onmouseup, op, optgroup, option,
- p, parent, parentNode, postError, pre, prepend, preventDefault, protect,
- prototype, push, q, remove, removeChild, removeElement, replace,
+ getElementsByTagName, getMark, getMarks, getName, getNames, getOffsetHeight,
+ getOffsetHeights, getOffsetWidth, getOffsetWidths, getParent, getSelection,
+ getStyle, getStyles, getTagName, getTagNames, getTitle, getTitles, getValue,
+ getValues, go, h1, h2, h3, h4, h5, h6, has, hasOwnProperty, hr, i, id, img,
+ inRange, indexOf, input, ins, insertBefore, isArray, kbd, key, keyCode, keys,
+ klass, label, later, legend, length, li, lib, log, map, mark, menu, message,
+ name, nextSibling, nodeName, nodeValue, object, off, offsetHeight,
+ offsetWidth, ol, on, onclick, ondblclick, onfocusin, onfocusout, onkeypress,
+ onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, op, optgroup,
+ option, p, parent, parentNode, postError, pre, prepend, preventDefault,
+ protect, prototype, push, q, remove, removeChild, removeElement, replace,
replaceChild, returnValue, row, samp, select, selection, selectionEnd,
selectionStart, set, shiftKey, slice, small, span, srcElement, stack,
- stopPropagation, strong, style, styleFloat, sub, sup, table, tag,
- tagName, target, tbody, td, test, text, textarea, tfoot, th, that,
- thead, title, toLowerCase, toString, toUpperCase, tr, tt, type, u, ul,
- unwatch, value, valueOf, var, visibility, watch, window, writeln, x, y
+ stopPropagation, strong, style, styleFloat, sub, sup, table, tag, tagName,
+ target, tbody, td, test, text, textarea, tfoot, th, that, thead, title,
+ toLowerCase, toString, toUpperCase, tr, tt, type, u, ul, unwatch, value,
+ valueOf, var, visibility, watch, window, writeln, x, y
*/
var ADSAFE = (function () {
@@ -208,44 +207,6 @@ var ADSAFE = (function () {
Object.prototype.hasOwnProperty.call(object, string_check(string));
}
- if (Function.__defineGetter__) {
-
-// Firefox implemented some of its array methods carelessly. If a method is
-// called as a function it returns the global object. ADsafe cannot tolerate
-// that, so we must wrap the methods to make them safer and slower.
-
- (function mozilla(name) {
- var method = Array.prototype[name];
- Array.prototype[name] = function () {
- return !this || this.window ? error() : method.apply(this, arguments);
- };
- return mozilla;
- }
- ('concat')
- ('every')
- ('filter')
- ('forEach')
- ('map')
- ('reduce')
- ('reduceRight')
- ('reverse')
- ('slice')
- ('some')
- ('sort'));
-
-// Firefox also leaked some internal state through negative subscripts of
-// functions. This plugs the holes.
-
- (function (p, f) {
- p.__defineGetter__('-1', f);
- p.__defineGetter__('-3', f);
- p.__defineGetter__('-6', f);
- }(Function.prototype, function () {
- return null;
- }));
- }
-
-
// The reject functions enforce the restriction on property names.
// reject_property allows access only to objects and arrays. It does not allow
// use of the banned names, or names that are not strings and not numbers,
@@ -1222,7 +1183,7 @@ var ADSAFE = (function () {
a[i] = node.nodeValue;
} else if (node.tagName && node.type !== 'password') {
a[i] = node.value;
- if (a[i] === undefined && node.firstChild &&
+ if (!a[i] && node.firstChild &&
node.firstChild.nodeName === '#text') {
a[i] = node.firstChild.nodeValue;
}
@@ -1552,7 +1513,7 @@ var ADSAFE = (function () {
node.value = value[i];
} else {
while (node.firstChild) {
- purge_event_handlers(node);
+ purge_event_handlers(node.firstChild);
node.removeChild(node.firstChild);
}
node.appendChild(document.createTextNode(
@@ -1569,11 +1530,12 @@ var ADSAFE = (function () {
for (i = 0; i < b.length; i += 1) {
node = b[i];
if (node.tagName) {
- if (typeof node.value === 'string') {
+ if (node.tagName !== 'BUTTON' &&
+ typeof node.value === 'string') {
node.value = value;
} else {
while (node.firstChild) {
- purge_event_handlers(node);
+ purge_event_handlers(node.firstChild);
node.removeChild(node.firstChild);
}
node.appendChild(document.createTextNode(value));
@@ -1825,6 +1787,20 @@ var ADSAFE = (function () {
},
+
+// ADSAFE.keys returns an array of keys.
+
+ keys: Object.keys || function (object) {
+ var key, result = [];
+ for (key in object) {
+ if (owns(object, key)) {
+ result.push(key);
+ }
+ }
+ return result;
+ },
+
+
// ADSAFE.later calls a function at a later time.
later: function (func, timeout) {
View
658 dom.html 100755 → 100644
@@ -2,25 +2,53 @@
<head>
<title>ADsafe DOM API</title>
<style>
-table, th, td, caption {border: 1px solid black;}
-td {background-color: white; padding-left: 1em; padding-right: 1em;}
-th {background-color: thistle;}
-table {background-color: navajowhite;}
-caption {background-color: navajowhite; margin-bottom: 2px; font-weight: bold;}
-h1, p {color: black; font-weight: normal;}
-b {color: darkblue; font-weight: normal;}
-h1 {font-size: 120%; text-align: center;}
-pre {margin-left: 1em;}
+table, th, td, caption {
+ border: 1px solid black;
+}
+td {
+ background-color: white;
+ padding-left: 1em;
+ padding-right: 1em;
+}
+th {
+ background-color: thistle;
+}
+table {
+ background-color: navajowhite;
+}
+caption {
+ background-color: navajowhite;
+ margin-bottom: 2px;
+ font-weight: bold;
+}
+h1, p {
+ color: black;
+ font-weight: normal;
+}
+b {
+ color: darkblue;
+ font-weight: normal;
+}
+h1 {
+ font-size: 120%;
+ text-align: center;
+}
+pre {
+ margin-left: 1em;
+}
</style>
</head>
-
<body bgcolor="darkseagreen" text="black">
<div style="float: left; width: 304;"> <a href="http://www.ADsafe.org/"><img src="adsafe.gif" border="2" width="300" height="147"></a><br>
- <div style="color: dimgray; font-size: 200%; font-family: sans-serif; text-align: center;">ALPHA</div>
+ <div style="color: dimgray; font-size: 200%; font-family: sans-serif; text-align: center;">ALPHA</div>
<div style="margin-top: 6px; padding: 1em; background-color: lemonchiffon; border: 2px solid black;">
<div><a href="widget.html">Widget Structure</a></div>
<div>DOM API</div>
- <div>Sample widgets: <a href="roman.html">Roman</a> <a href="bats.html">Bats</a> <a href="sudoku.html">Sudoku</a> <a href="http://www.JSLint.com/">JSLint</a></div>
+ <div>Sample widgets:
+ <a href="roman.html">Roman</a>
+ <a href="bats.html">Bats</a>
+ <a href="sudoku.html">Sudoku</a>
+ <a href="http://www.JSLint.com/">JSLint</a></div>
</div>
</div>
<div style="margin-left: 310px; padding: 1em; background-color: lemonchiffon; border: 2px solid black;">
@@ -44,204 +72,201 @@
a sequence of one or more selectors. There are two kinds of selectors:
hunters and peckers.</p>
<ul>
-
- <li>The hunters are <code>#</code><var>id</var>, <var>tagName</var>,
- <code>+</code><var>tagName</var>, <code>&gt;</code><var>tagName</var>,
- <code>*</code>, and <code>/</code>. They descend into the tree, finding
- a new selection of nodes to replace the current selection of nodes.
- The <code>#</code><var>id</var> hunter is the most efficient. The <code>*</code>
- hunter is the least efficient. The hunters shift attention from the
+ <li>The hunters are <code>#</code><var>id</var>, <var>tagName</var>,
+ <code>+</code><var>tagName</var>, <code>&gt;</code><var>tagName</var>,
+ <code>*</code>, and <code>/</code>. They descend into the tree, finding
+ a new selection of nodes to replace the current selection of nodes.
+ The <code>#</code><var>id</var> hunter is the most efficient. The <code>*</code>
+ hunter is the least efficient. The hunters shift attention from the
root to nodes within the subtree.</li>
-
- <li>The peckers are <code>&amp;</code><var>name</var>, <code>_</code><var>type</var>,
- <code>.</code><var>class</var>, <code>[</code> <var>attribute</var>
- ... <code>]</code>, and <code>:</code><var>option</var>. They remove
- nodes from the current selection of nodes that do not match somehow.
+ <li>The peckers are <code>&amp;</code><var>name</var>, <code>_</code><var>type</var>,
+ <code>.</code><var>class</var>, <code>[</code> <var>attribute</var>
+ ... <code>]</code>, and <code>:</code><var>option</var>. They remove
+ nodes from the current selection of nodes that do not match somehow.
The peckers reduce the set of nodes currently under consideration.</li>
</ul>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1" cols=2>
<caption>Query Selectors</caption>
- <tbody>
- <tr>
+ <tbody>
+ <tr>
<th>Hunter Selector</th>
<th>Meaning</th>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>#</code> <var>id</var></td>
- <td valign="top">Select the descendent node that has an <code>id</code>
- that matches the <var>id</var>. AD<b>safe</b> requires that every
- <code>id</code> be unique. This selector only makes sense in the
+ <td valign="top">Select the descendent node that has an <code>id</code>
+ that matches the <var>id</var>. AD<b>safe</b> requires that every
+ <code>id</code> be unique. This selector only makes sense in the
first position.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><var>tagName</var></td>
- <td valign="top">Select all of the descendent nodes that have a
- <var>tagName</var> that matches. <var>dom</var><code>.q('p')</code>
+ <td valign="top">Select all of the descendent nodes that have a
+ <var>tagName</var> that matches. <var>dom</var><code>.q('p')</code>
matches all <code>&lt;p&gt;</code> elements. </td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>+</code> <var>tagName</var></td>
- <td valign="top">Select all of the immediate siblings that have
+ <td valign="top">Select all of the immediate siblings that have
a <var>tagName</var> that matches.</td>
- </tr><tr>
+ </tr><tr>
<td valign="top" nowrap><code>&gt;</code> <var>tagName</var></td>
- <td valign="top">Select all of the immediate children that have
+ <td valign="top">Select all of the immediate children that have
a <var>tagName</var> that matches.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>/</code></td>
<td valign="top">Select all of the immediate child nodes.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>*</code></td>
- <td valign="top">Select all of the descendent nodes. After matching
+ <td valign="top">Select all of the descendent nodes. After matching
<code>*</code>, only peckers may be matched.</td>
</tr>
- <tr>
+ <tr>
<th>Pecker Selector</th>
<th>Meaning</th>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>.</code> <var>class</var></td>
- <td valign="top">Keep the nodes that have a <code>class</code> attribute
+ <td valign="top">Keep the nodes that have a <code>class</code> attribute
that matches the <var>class</var>. Same as <code>[class~=</code><var>class</var><code>]</code>.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>&amp;</code> <var>name</var></td>
- <td valign="top">Keep the nodes that have a <code>name</code> attribute
+ <td valign="top">Keep the nodes that have a <code>name</code> attribute
that matches the <var>name</var>. Same as <code>[name=</code><var>name</var><code>]</code>.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>_</code> <var>type</var></td>
- <td valign="top">Keep the nodes that have a <code>type</code> attribute
- that matches the <var>type</var>. Same as <code>[type=</code><var>type</var><code>]</code>.
- This is usually used with <code>&lt;input&gt;</code> and <code>&lt;button&gt;</code>
- tags. It can also be used with <code>&lt;link&gt;</code>, <code>&lt;object&gt;</code>,
- <code>&lt;param&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>,
+ <td valign="top">Keep the nodes that have a <code>type</code> attribute
+ that matches the <var>type</var>. Same as <code>[type=</code><var>type</var><code>]</code>.
+ This is usually used with <code>&lt;input&gt;</code> and <code>&lt;button&gt;</code>
+ tags. It can also be used with <code>&lt;link&gt;</code>, <code>&lt;object&gt;</code>,
+ <code>&lt;param&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>,
<code>&lt;li&gt;</code>, and <code>&lt;style&gt;</code>.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>[</code> <var>attribute</var> <code>]</code></td>
<td valign="top">Keep the nodes that have the named <var>attribute</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
that matches the <var>value</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>!=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>!=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
that do not match the <var>value</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>*=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>*=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
that contain the <var>value</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>^=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>^=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
that start with the <var>value</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>$=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>$=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
that end with the <var>value</var>.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>~=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>~=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
- that contain the <var>value</var> as an element in a space-separated
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
+ that contain the <var>value</var> as an element in a space-separated
list.</td>
</tr>
- <tr>
- <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>|=</code>
+ <tr>
+ <td valign="top" nowrap><code>[</code> <var>attribute</var> <code>|=</code>
<var>value</var> <code>]</code></td>
- <td valign="top">Keep the nodes with the named <var>attribute</var>
- that contain the <var>value</var> as an element in a minus-separated
+ <td valign="top">Keep the nodes with the named <var>attribute</var>
+ that contain the <var>value</var> as an element in a minus-separated
list.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: first</code></td>
<td valign="top">Keep the first node in the bunch.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: rest</code></td>
<td valign="top">Keep all of the nodes in the bunch except the first.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: even</code></td>
- <td valign="top">Keep half of the nodes in the bunch, starting with
+ <td valign="top">Keep half of the nodes in the bunch, starting with
the second.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: odd</code></td>
- <td valign="top">Keep half of the nodes in the bunch, starting with
+ <td valign="top">Keep half of the nodes in the bunch, starting with
the first.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: hidden</code></td>
<td valign="top">Keep nodes that are currently hidden.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: visible</code></td>
<td valign="top">Keep nodes that are currently visible.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: disabled</code></td>
<td valign="top">Keep nodes that are currently disabled.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: enabled</code></td>
<td valign="top">Keep nodes that are currently enabled.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: checked</code></td>
<td valign="top">Keep nodes that are currently checked.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: unchecked</code></td>
<td valign="top">Keep nodes that are not currently checked.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: focus</code></td>
<td valign="top">Keep the node that has focus.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: blur</code></td>
<td valign="top">Keep nodes that do not have focus.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: text</code></td>
<td valign="top">Keep text nodes.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: tag</code></td>
<td valign="top">Keep nodes that are not text nodes.</td>
</tr>
- <tr>
+ <tr>
<td valign="top" nowrap><code>: trim</code></td>
<td valign="top">Keep nodes that are not useless text nodes.</td>
</tr>
- </tbody>
+ </tbody>
</table>
-</div>
+</div>
<p>The <var>dom<code>.</code></var><code>q</code> method returns a
bunch object that represents zero or more nodes (depending on the
success of the query). A bunch has methods that can act upon all
of the nodes it represents. A bunch also has a <code>q</code> method,
so a bunch can be the root (or roots) of subtrees for additional
searches.</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table>
<caption>Sample Queries</caption>
<tbody>
@@ -250,28 +275,24 @@
<th>Action</th>
</tr>
<tr>
-
<td valign="top"><code>h1 + p * : text</code></td>
- <td>Select the text in all of the paragraphs that immediately follow
+ <td>Select the text in all of the paragraphs that immediately follow
<code>H1</code> tags.</td>
</tr>
<tr>
-
<td valign="top"><code>input_radio&amp;tikki:unchecked</code></td>
-
- <td>Select all radio buttons named <code>&quot;tikki&quot;</code>
+ <td>Select all radio buttons named <code>&quot;tikki&quot;</code>
that are currently unchecked.</td>
</tr>
<tr>
-
<td valign="top"><code>#KODA_FORM button_submit</code></td>
<td>Select the submit button that is a descendent of the element
with an <code>id</code> of <code>KODA_FORM</code>.</td>
</tr>
<tr>
<td valign="top"><code>p.topic.special</code></td>
-
- <td>Select all paragraph tags that have a <code>class</code>
+
+ <td>Select all paragraph tags that have a <code>class</code>
attribute containing both <code>topic</code> and <code>special</code>.</td>
</tr>
<tr>
@@ -285,7 +306,7 @@
that are grandchildren.</td>
</tr>
<tr>
-
+
<td valign="top"><code>form input_hidden</code></td>
<td>Select all hidden fields within forms.</td>
</tr>
@@ -294,7 +315,7 @@
<td>Select all input nodes that are hidden within forms.</td>
</tr>
<tr>
-
+
<td valign="top"><code>*_text</code></td>
<td>Select all nodes with<code> type=&quot;text&quot;</code> attributes.</td>
</tr>
@@ -304,92 +325,90 @@
</tr>
</tbody>
</table>
-</div>
+</div>
<p>In addition to the <code>q</code> method, the <var>dom</var> object
has methods for making new HTML nodes and for altering the structure
of the document tree.</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
-
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1">
<caption><var>dom</var> Methods</caption>
- <tbody>
- <tr>
+ <tbody>
+ <tr>
<th>Method</th>
<th>Description</th>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.append(</code><var>bunch</var><code>)</code></td>
- <td>Append the nodes in the <var>bunch</var> after the last element
+ <td>Append the nodes in the <var>bunch</var> after the last element
of the <var>dom</var> subtree. It returns the <var>dom</var> object.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.combine(</code><var>array</var><code>)</code></td>
- <td>Combine an array of bunches into a single bunch. This is the
+ <td>Combine an array of bunches into a single bunch. This is the
opposite of the <var>bunch</var><code>.explode</code> method.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.count()</code></td>
<td>It returns the number 1.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.ephemeral(</code><var>bunch</var><code>)</code></td>
- <td>Designate a bunch as ephemeral. The nodes will be removed when
- <code>ephemeral</code> is called again, or when the mouse button
- comes up, or when the escape key is pressed. This is a convenient
- way of getting rid of short-lived things like tips and popups.
- If <var>bunch</var> is <code>null</code>, then the current ephemeral
+ <td>Designate a bunch as ephemeral. The nodes will be removed when
+ <code>ephemeral</code> is called again, or when the mouse button
+ comes up, or when the escape key is pressed. This is a convenient
+ way of getting rid of short-lived things like tips and popups.
+ If <var>bunch</var> is <code>null</code>, then the current ephemeral
nodes are removed.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.fragment(</code><code>)</code></td>
- <td>Make a new HTML document fragment. A fragment can be a container
+ <td>Make a new HTML document fragment. A fragment can be a container
of nodes. It disappears when appended to the live document tree.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.prepend(</code><var>bunch</var><code>)</code></td>
- <td>Prepend the nodes in the <var>bunch</var> before the first element
+ <td>Prepend the nodes in the <var>bunch</var> before the first element
of the <var>dom</var> subtree. It returns the <var>dom</var> object.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.q(</code><var>query</var><code>)</code></td>
- <td>Search the <var>dom</var> subtree. It returns a new bunch object
- containing the nodes that matched the query. It always returns
- a bunch object, even if the query selected no nodes. It will throw
- an exception if the query is not well formed or if the first selector
+ <td>Search the <var>dom</var> subtree. It returns a new bunch object
+ containing the nodes that matched the query. It always returns
+ a bunch object, even if the query selected no nodes. It will throw
+ an exception if the query is not well formed or if the first selector
is not a hunter.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.remove()</code></td>
- <td valign="top">The widget's nodes are all removed from the document.
+ <td valign="top">The widget's nodes are all removed from the document.
At this point, the widget is useless.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.row(</code><var>array</var><code>)</code></td>
- <td>Make a new <code>&lt;tr&gt;</code> node. Append to it a new
- <code>&lt;td&gt;</code> node wrapping a text node for each element
- of the <var>array</var>. It returns a bunch containing the <code>&lt;tr&gt;</code>
+ <td>Make a new <code>&lt;tr&gt;</code> node. Append to it a new
+ <code>&lt;td&gt;</code> node wrapping a text node for each element
+ of the <var>array</var>. It returns a bunch containing the <code>&lt;tr&gt;</code>
node. The row will not be attached to the document tree.</td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.tag(</code><var>tagName</var><code><code>,</code>
+ <tr>
+ <td nowrap valign="top"><code>.tag(</code><var>tagName</var><code><code>,</code>
</code><var>type</var><code><code>,</code> </code><var>name</var><code>)</code></td>
- <td>Make a new HTML node. If <var>tagName</var> is <code>'button'</code>
- or <code>'input'</code>, supply an extra parameter that determines
- the <var>type</var> of the element, such as <code>'submit'</code>
- or <code>'radio'</code>. A third parameter optionally names the
- node. This is used to group radio buttons together, so that at
- most one radio button in a group can be checked. It returns a
- bunch containing the one new node. It will not be attached to
+ <td>Make a new HTML node. If <var>tagName</var> is <code>'button'</code>
+ or <code>'input'</code>, supply an extra parameter that determines
+ the <var>type</var> of the element, such as <code>'submit'</code>
+ or <code>'radio'</code>. A third parameter optionally names the
+ node. This is used to group radio buttons together, so that at
+ most one radio button in a group can be checked. It returns a
+ bunch containing the one new node. It will not be attached to
the document tree.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.text(</code><var>string</var><code>)</code></td>
- <td>Make a new text node. It returns a bunch containing the text
- node. It will not be attached to the document tree. If the argument
+ <td>Make a new text node. It returns a bunch containing the text
+ node. It will not be attached to the document tree. If the argument
is an array of strings, it will return an array of text nodes.</td>
</tr>
- </tbody>
+ </tbody>
</table>
</div>
<h1>Bunch Objects</h1>
@@ -406,145 +425,139 @@
is an array, then each node will get one value from the array. An
exception will be thrown if the <code>length</code> of the <var>value</var>
array is not the same as the number of nodes in the bunch.</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
-
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1">
<caption>Bunch Set Methods</caption>
- <tbody>
- <tr>
+ <tbody>
+ <tr>
<th>Method</th>
<th>Description</th>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.append(</code><var>appendees</var><code>)</code></td>
- <td>Append the nodes in the bunch of <var>appendees</var> after
- the last element of each node. If the bunch contains more than
- one node, the <var>appendees</var> will be deeply cloned before
+ <td>Append the nodes in the bunch of <var>appendees</var> after
+ the last element of each node. If the bunch contains more than
+ one node, the <var>appendees</var> will be deeply cloned before
each insertion. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.blur(</code><code>)</code></td>
- <td>Remove focus from the nodes. This only makes sense for <code>&lt;button&gt;</code>,
- <code>&lt;input&gt;</code>, and <code>&lt;textarea&gt;</code>
+ <td>Remove focus from the nodes. This only makes sense for <code>&lt;button&gt;</code>,
+ <code>&lt;input&gt;</code>, and <code>&lt;textarea&gt;</code>
nodes.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.check(</code><var>value</var><code>)</code></td>
<td>Set the check state for checkbox and radio nodes.</td>
- </tr> <tr>
+ </tr> <tr>
<td nowrap valign="top"><code>.class(</code><var>string</var><code>)</code><br><code>.klass(</code><var>string</var><code>)</code></td>
- <td>Set the CSS class of the nodes. (The alternate spelling
- is to circumvent a reserved word problem in the ECMAScript
+ <td>Set the CSS class of the nodes. (The alternate spelling
+ is to circumvent a reserved word problem in the ECMAScript
Standard, Third Edition.)</td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.each(</code><var>func</var><code>)</code></td>
- <td>Pass each node to a function. The <var>func</var> argument is a function that takes a bunch argument.</td>
+ <tr>
+ <td nowrap valign="top"><code>.each(</code><var>func</var><code>)</code></td>
+ <td>Pass each node to a function. The <var>func</var> argument is a function that takes a bunch argument.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.empty()</code></td>
<td>Remove all of the descendants from the nodes.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.enable(</code><var>boolean</var><code>)</code></td>
<td>Set the enable for the nodes.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.ephemeral()</code></td>
- <td>Remove all the nodes when the escape key is pressed, or when
+ <td>Remove all the nodes when the escape key is pressed, or when
the mouse buttom goes up, or when another bunch is declared ephemeral.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.fire(</code><var>event</var><code>)</code></td>
- <td>Fire an event on every node in the bunch. The event value is
- either a string (<code>&quot;click&quot;</code>) or an object
- with an <code>event</code> property (<code>{event: &quot;click&quot;}</code>).
- Events fired by this method will notify only handlers registered
- with the <code>on</code> method, and will not trigger any browser
+ <td>Fire an event on every node in the bunch. The event value is
+ either a string (<code>&quot;click&quot;</code>) or an object
+ with an <code>event</code> property (<code>{event: &quot;click&quot;}</code>).
+ Events fired by this method will notify only handlers registered
+ with the <code>on</code> method, and will not trigger any browser
actions.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.focus(</code><code>)</code></td>
- <td>Give focus to the node. This throws an exception if the bunch
- does not hold exactly one node, or if this method is called at
- any time other than the handling of a <code>'click'</code> event
- unless ADsafe is able to determine that the widget already has
- focus. This only makes sense for <code>&lt;button&gt;</code>,
- <code>&lt;input&gt;</code>, and <code>&lt;textarea&gt;</code>
+ <td>Give focus to the first node. This throws an exception if the bunch
+ is empty, or if this method is called at
+ any time other than the handling of a <code>'click'</code> event
+ unless ADsafe is able to determine that the widget already has
+ focus. This only makes sense for <code>&lt;button&gt;</code>,
+ <code>&lt;input&gt;</code>, and <code>&lt;textarea&gt;</code>
nodes. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.mark(</code><var>value</var><code>)</code></td>
<td>Set a mark on every tag node in the bunch.</td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.off(</code><var>eventName</var><code>,</code>
+ <tr>
+ <td nowrap valign="top"><code>.off(</code><var>eventName</var><code>,</code>
<var>func</var><code>)</code></td>
- <td>Remove event handlers from nodes. <code>bunch.off()</code> removes
- all event handlers. <code>bunch.off('click')</code> removes all
- <code>onclick</code> handlers. <code>bunch.off('click', myclickhandler)</code>
+ <td>Remove event handlers from nodes. <code>bunch.off()</code> removes
+ all event handlers. <code>bunch.off('click')</code> removes all
+ <code>onclick</code> handlers. <code>bunch.off('click', myclickhandler)</code>
removes a particular <code>onclick</code> handler.</td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.on(</code><var>eventName</var><code>,</code>
+ <tr>
+ <td nowrap valign="top"><code>.on(</code><var>eventName</var><code>,</code>
<var>func</var><code>)</code></td>
<td>Add an event handler to the nodes in the bunch. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.prepend(</code><var>prependees</var><code>)</code></td>
- <td>Prepend the nodes in the bunch of <var>prependees</var> before
- the first element of each node. If the bunch contains more than
- one node, the <var>prependees</var> will be deeply cloned before
+ <td>Prepend the nodes in the bunch of <var>prependees</var> before
+ the first element of each node. If the bunch contains more than
+ one node, the <var>prependees</var> will be deeply cloned before
each insertion. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.protect(</code><code>)</code></td>
- <td>Protect the nodes. Once protected, a node's <code>getParent</code>
- method will throw instead of providing access to the node's parent.
+ <td>Protect the nodes. Once protected, a node's <code>getParent</code>
+ method will throw instead of providing access to the node's parent.
Events will not bubble up past a protected node. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.select()</code></td>
- <td>Give focus to the node and select its contents. This only makes
- sense for <code>&lt;input&gt;</code> and <code>&lt;textarea&gt;</code>
- nodes. It throws an exception if the bunch does not hold exactly
- one node.</td>
+ <td>Give focus to the first node and select its contents. This only makes
+ sense for <code>&lt;input&gt;</code> and <code>&lt;textarea&gt;</code>
+ nodes. It throws an exception if the bunch is empty.</td>
</tr>
<tr>
<td valign="top"><code>.selection(</code><var>string</var><code>)</code></td>
-
- <td>Replace the user-selected text in an <code>input_text</code>
+ <td>Replace the user-selected text in an <code>input_text</code>
or <code>textarea</code> with the <var>string</var>. </td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.style(</code><var>name</var><code>,</code>
+ <tr>
+ <td nowrap valign="top"><code>.style(</code><var>name</var><code>,</code>
<var>value</var><code>)</code></td>
- <td>Set the style element of the nodes to the <var>value</var>. Use the <var>name</var>
- <code>'float'</code>, not <code>'cssFloat'</code> or <code>'styleFloat'</code>,
+ <td>Set the style element of the nodes to the <var>value</var>. Use the <var>name</var>
+ <code>'float'</code>, not <code>'cssFloat'</code> or <code>'styleFloat'</code>,
to set the <code>float</code> style property. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.title(</code><var>value</var><code>)</code></td>
<td>Set the <code>title</code> attribute of the nodes to the <var>value</var>. </td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.value(</code><var>value</var><code>)</code></td>
- <td>Set the value for the nodes. For nodes that do not have <code>value</code>
- attributes, it removes all of the child nodes and appends a new
+ <td>Set the value for the nodes. For nodes that do not have <code>value</code>
+ attributes, it removes all of the child nodes and appends a new
text node. It does nothing to nodes that have a <code>type</code> of <code>"password"</code>.</td>
</tr>
- </tbody>
+ </tbody>
</table>
</div>
<h1>Bunch Get Methods</h1>
<p>The <code>get</code>- methods return <code>undefined</code> if the bunch contains
no nodes; or a single value (usually a string) if the bunch contains one or more nodes. The <code>get</code>-<code>s</code> methods return a possibly empty array.</p>
<p>The <code>get</code>- and <code>get</code>-<code>s</code> methods do not cascade.</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
-
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1">
<caption>Bunch Get Methods</caption>
<tbody>
@@ -553,25 +566,19 @@
<th>Description</th>
</tr>
<tr>
-
<td valign="top"><code>.getCheck()</code><br>
<code>.getChecks()</code></td>
<td>Get the <code>checked</code> boolean for the nodes.</td>
</tr>
<tr>
-
<td valign="top"><code>.getClass()</code><br><code>.getClasses()</code>
</td>
-
<td>Get the <code>class</code> attributes for the nodes.</td>
</tr>
<tr>
-
<td valign="top"><code>.getEnable()</code><br><code>.getEnables()</code></td>
-
<td>Get the <code>enable</code> boolean for the nodes.</td>
</tr><tr>
-
<td valign="top"><code>.getMark()</code><br><code>.getMarks()</code></td>
<td>Get the mark from the nodes.</td>
</tr>
@@ -581,34 +588,32 @@
</tr>
<tr>
<td valign="top"><code>.getOffsetHeight()</code><br><code>.getOffsetHeights()</code></td>
-
- <td>Get the <code>offsetHeight</code> of the nodes. The <code>offsetHeight</code>
+ <td>Get the <code>offsetHeight</code> of the nodes. The <code>offsetHeight</code>
is the actual height, including the border and excluding the margin.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.getOffsetWidth()</code><br>
<code>.getOffsetWidths()</code></td>
- <td>Get the <code>offsetWidth</code> of the nodes. The <code>offsetWidth</code>
+ <td>Get the <code>offsetWidth</code> of the nodes. The <code>offsetWidth</code>
is the actual width, including the border and excluding the margin.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.getParent()</code></td>
- <td>Get a bunch containing the parents of the nodes. This can produce
- duplicates if the query is over two or more siblings. An attempt
+ <td>Get a bunch containing the parents of the nodes. This can produce
+ duplicates if the query is over two or more siblings. An attempt
to get the root node of the widget will throw an exception<code></code>.</td>
</tr>
<tr>
<td valign="top"><code>.getSelection(</code><code>)</code></td>
-
- <td>Get the user-selected text in an <code>input_text</code> or
+
+ <td>Get the user-selected text in an <code>input_text</code> or
<code>textarea</code>. </td>
</tr>
<tr>
<td valign="top"><code>.getStyle(</code><var>name</var><code>)</code><br><code>.getStyles(</code><var>name</var><code>)</code></td>
-
- <td>Get the values of the named style element of the nodes. Use
- the <var>name</var> <code>'float'</code>, not <code>'cssFloat'</code>
- or <code>'styleFloat'</code>, to get the <code>float</code> style
+ <td>Get the values of the named style element of the nodes. Use
+ the <var>name</var> <code>'float'</code>, not <code>'cssFloat'</code>
+ or <code>'styleFloat'</code>, to get the <code>float</code> style
property. </td>
</tr>
<tr>
@@ -622,110 +627,108 @@
<tr>
<td valign="top"><code>.getValue()</code><br>
<code>.getValues()</code></td>
- <td>Get the <code>value</code> for the nodes. If a node does not
- have a value, but has a first child that is a text node, then
- the value of that text node will be obtained. It
- produces <code>undefined</code> from nodes that have
+ <td>Get the <code>value</code> for the nodes. If a node does not
+ have a value, but has a first child that is a text node, then
+ the value of that text node will be obtained. It
+ produces <code>undefined</code> from nodes that have
a <code>type</code> of <code>"password"</code>.</td>
</tr>
</tbody>
</table>
</div>
<h1>Bunch Miscellaneous Methods</h1>
-
- <p>There are 9 miscellaneous methods. The miscellaneous methods do not
- cascade.</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
+ <p>There are 9 miscellaneous methods. The miscellaneous methods do not
+ cascade.</p>
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1">
<caption>Bunch Miscellaneous Methods</caption>
- <tbody>
- <tr>
+ <tbody>
+ <tr>
<th>Method</th>
<th>Description</th>
</tr>
- <tr>
- <td valign="top"><code>.clone(</code><var>deep</var><code>,</code>
+ <tr>
+ <td valign="top"><code>.clone(</code><var>deep</var><code>,</code>
<var>number</var><code>)</code></td>
- <td>Clone the nodes. It returns a new bunch of nodes that are not
- attached to the document tree. If the optional <var>deep</var>
- parameter is <code>true</code>, then all of the child nodes are
- also cloned. If the optional <var>number</var> parameter is a
- number, then an array will be returned containing <var>number</var>
+ <td>Clone the nodes. It returns a new bunch of nodes that are not
+ attached to the document tree. If the optional <var>deep</var>
+ parameter is <code>true</code>, then all of the child nodes are
+ also cloned. If the optional <var>number</var> parameter is a
+ number, then an array will be returned containing <var>number</var>
copies of the bunch.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.count()</code></td>
- <td>Get the number of nodes in the bunch. (This count does not include
+ <td>Get the number of nodes in the bunch. (This count does not include
the children.)</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.explode()</code></td>
- <td>Get an array of bunches that each contain a single node for
- each node in the bunch. The <code>length</code> of the array will
+ <td>Get an array of bunches that each contain a single node for
+ each node in the bunch. The <code>length</code> of the array will
be the same as the <code>.count()</code> of the bunch. </td>
- </tr><tr>
+ </tr><tr>
<td valign="top"><code>.fragment()</code></td>
<td>Make a new HTML document fragment.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.q(</code><var>query</var><code>)</code></td>
- <td>Search the subtrees of the nodes. It returns a new bunch object
- containing the nodes that matched the query. It always returns
- a bunch object, even if the query selected no nodes. It will throw
- an exception if the query is not well formed. A query never modifies
+ <td>Search the subtrees of the nodes. It returns a new bunch object
+ containing the nodes that matched the query. It always returns
+ a bunch object, even if the query selected no nodes. It will throw
+ an exception if the query is not well formed. A query never modifies
the bunch; it produces a new bunch.</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.remove()</code></td>
- <td>
- <p>Remove the nodes. It removes nodes that have parents from their
+ <td>
+ <p>Remove the nodes. It removes nodes that have parents from their
parents. </p>
- <p>When a node is removed, its event handlers are removed, as
+ <p>When a node is removed, its event handlers are removed, as
well as the event handlers of all of its children.</p>
</td>
</tr>
- <tr>
+ <tr>
<td nowrap valign="top"><code>.replace(</code><var>replacement</var><code>)</code></td>
- <td>
- <p>Replace the nodes. The optional <var>replacement</var> parameter
- is either a bunch object or an array of bunch objects. It does
- not replace nodes that do not have parents. It returns nothing.
- Replacement has no effect on nodes that do not have parents.
- If the replacement is empty, this bunch is removed. Otherwise,
+ <td>
+ <p>Replace the nodes. The optional <var>replacement</var> parameter
+ is either a bunch object or an array of bunch objects. It does
+ not replace nodes that do not have parents. It returns nothing.
+ Replacement has no effect on nodes that do not have parents.
+ If the replacement is empty, this bunch is removed. Otherwise,
the bunch is replaced with all of the nodes in the replacement.</p>
- <p>When a node is removed, its event handlers are removed, as
+ <p>When a node is removed, its event handlers are removed, as
well as the event handlers of all of its children.</p>
</td>
</tr>
- <tr>
- <td nowrap valign="top"><code>.tag(</code><var>tagName</var><code><code>,</code>
+ <tr>
+ <td nowrap valign="top"><code>.tag(</code><var>tagName</var><code><code>,</code>
</code><var>type</var><code><code>,</code> </code><var>name</var><code>)</code></td>
- <td>Make a new HTML node. If <var>tagName</var> is <code>'button'</code>
- or <code>'input'</code>, supply an extra parameter that determines
- the <var>type</var> of the element, such as <code>'submit'</code>
- or <code>'radio'</code>. A third parameter optionally names the
- node. This is used to group radio buttons together, so that at
- most one radio button in a group can be checked. It returns a
- bunch containing the one new node. It will not be attached to
+ <td>Make a new HTML node. If <var>tagName</var> is <code>'button'</code>
+ or <code>'input'</code>, supply an extra parameter that determines
+ the <var>type</var> of the element, such as <code>'submit'</code>
+ or <code>'radio'</code>. A third parameter optionally names the
+ node. This is used to group radio buttons together, so that at
+ most one radio button in a group can be checked. It returns a
+ bunch containing the one new node. It will not be attached to
the document tree.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>.text(</code><var>string</var><code>)</code></td>
- <td>Make a new text node. It returns a bunch containing the text
- node. It will not be attached to the document tree. If the argument
+ <td>Make a new text node. It returns a bunch containing the text
+ node. It will not be attached to the document tree. If the argument
is an array of strings, it will return a bunch of text nodes.</td>
</tr>
- </tbody>
+ </tbody>
</table>
</div>
<h1>Text Nodes</h1>
<p>The <code>q</code> method provides access to two kinds of nodes:
tag nodes (the stuff in HTML that is inside the angle brackets),
and text nodes (the stuff outside the angle brackets). </p>
-
- <p>The <code>*</code> and <code>/</code> selectors will select both tag
+
+ <p>The <code>*</code> and <code>/</code> selectors will select both tag
and text nodes. The other hunter selectors select only tag nodes.</p>
<p>The <code>:text</code> selector keeps only text nodes.
The <code>:first</code>, <code>:rest</code> , and <code>:trim</code> selectors can keep
@@ -741,12 +744,11 @@
nodes.</p>
<h1>Events</h1>
-
- <p>Event handlers can be placed on an object with the <code>on</code>
- method. You can invent your own event types. These are the events that
+
+ <p>Event handlers can be placed on an object with the <code>on</code>
+ method. You can invent your own event types. These are the events that
can be fired by the browser in response to user action:</p>
-<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
-
+<div style="position: relative; left: -4em; background-color: papayawhip; padding: 1em; border: 2px solid black;">
<table border="1">
<caption>Browser events</caption>
<tbody>
@@ -804,71 +806,69 @@
</tr>
<tr>
<td valign="top"><code>change</code></td>
-
- <td>On select, input and textarea tags: The value was changed by
+
+ <td>On select, input and textarea tags: The value was changed by
the user. This event does not bubble.</td>
</tr>
</tbody>
</table>
-</div>
-
- <p>You can fire any of these events yourself, but doing so will not trigger
- the browser's default action. Only the user can trigger the default
+</div>
+ <p>You can fire any of these events yourself, but doing so will not trigger
+ the browser's default action. Only the user can trigger the default
action.</p>
<p>An event object could have any of these properties:</p>
<table border="1">
- <tr>
+ <tr>
<th>Event Property Name</th>
<th>Meaning</th>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>altKey</code></td>
<td>A boolean that indicates the state of an alt key.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code> ctrlKey</code></td>
<td>A boolean that indicates the state of the control key.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>key</code></td>
<td>The code of the pressed key.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>shiftKey</code></td>
<td>A boolean that indicates the state of the shift key.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>target</code></td>
- <td>A bunch that gives access to the node that was the target of the
+ <td>A bunch that gives access to the node that was the target of the
event. </td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>that</code></td>
- <td>A bunch that gives access to the node that is handling the event.
- <code>that</code> could be the same as <code>target</code>, or it
- could be a parent or ancestor of the <code>target</code> if bubbling
+ <td>A bunch that gives access to the node that is handling the event.
+ <code>that</code> could be the same as <code>target</code>, or it
+ could be a parent or ancestor of the <code>target</code> if bubbling
occurs.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>type</code></td>
<td>A string containing the type of the event.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>x</code></td>
- <td>The horizontal position of the cursor relative to the target's
+ <td>The horizontal position of the cursor relative to the target's
container.</td>
</tr>
- <tr>
+ <tr>
<td valign="top"><code>y</code></td>
<td>The vertical position of the cursor relative to the target's container.</td>
</tr>
</table>
- <p>An event object may have a <code>bubble</code> method. Calling that
- method will cause the event to bubble up to the parent of <code>that</code>
+ <p>An event object may have a <code>bubble</code> method. Calling that
+ method will cause the event to bubble up to the parent of <code>that</code>
object.</p>
- <p>An event object may have a <code>preventDefault</code> method. Calling
- that method will cause the cancellation of the browser's default action.
+ <p>An event object may have a <code>preventDefault</code> method. Calling
+ that method will cause the cancellation of the browser's default action.
</p>
-
-</div>
+</div></body>
</html>
View
55 index.html 100755 → 100644
@@ -2,9 +2,18 @@
<head>
<title>ADsafe</title>
<style>
-h1, p {color: black; font-weight: normal;}
-b {color: darkblue; font-weight: normal;}
-h1 {font-size: 120%; text-align: center;}
+h1, p {
+ color: black;
+ font-weight: normal;
+}
+b {
+ color: darkblue;
+ font-weight: normal;
+}
+h1 {
+ font-size: 120%;
+ text-align: center;
+}
</style>
</head>
@@ -13,11 +22,17 @@
<img src="adsafe.gif" border="2" width="300" height="147"><br>
<div style="color: dimgray; font-size: 200%; font-family: sans-serif; text-align: center;">ALPHA</div>
<div style="margin-top: 6px; padding: 1em; background-color: lemonchiffon; border: 2px solid black;">
- <div> <a href="widget.html">Widget Structure</a></div>
- <div> <a href="dom.html">DOM API</a></div>
+ <div> <a href="widget.html">Widget Structure</a></div><hr>
+ <div> <a href="dom.html">DOM API</a></div><hr>
<div>Sample widgets: <a href="roman.html">Roman</a> <a href="bats.html">Bats</a> <a href="sudoku.html">Sudoku</a> <a href="http://www.JSLint.com/">JSLint</a></div>
</div>
+ <div style="margin-top: 12px; padding: 1em; background-color: lemonchiffon; border: 2px solid black;">
+ <div> <a href="http://www.cs.brown.edu/research/plt/dl/adsafety/v1/adsafety.pdf">ADsafety: Type-Based Verification of JavaScript Sandboxing</a></div><hr>
+ <div> <a href="http://seclab.stanford.edu/websec/jsPapers/csf09-camera-ready.pdf">Language-Based Isolation of Untrusted JavaScript</a></div><hr>
+ <div> <a href="http://www-cs-students.stanford.edu/~ataly/Papers/sp11.pdf">Automated Analysis of Security-Critical JavaScript APIs</a></div><hr>
+ <div> <a href="http://www.adambarth.com/papers/2010/finifter-weinberger-barth.pdf">Preventing Capability Leaks in Secure JavaScript Subsets</a></div>
+ </div>
<div style="padding: 2px; text-align: center;"><a href="http://www.JSLint.com/"><img src="jslint.gif" alt="JSLint" width="32" height="17" border="0"></a> <a href="http://waterken.com/"><img src="w.gif" alt="Waterken" width="16" height="16" border="0"></a></div>
</div>
<div style="margin-left: 310px; padding: 1em; background-color: lemonchiffon; border: 2px solid black;">
@@ -62,14 +77,15 @@
and <code>Math</code> is allowed.</li>
</ul>
</li>
- <li> <code>this</code>
+ <li><code>this</code>
<ul>
<li>If a method is called as a function, <code>this</code> is
bound to the global object. Since AD<b>safe</b> needs to restrict
access to the global object, it must prohibit the use of <code>this</code>
in guest code.</li>
</ul>
- <li> <code>arguments</code>
+ </li>
+ <li><code>arguments</code>
<ul>
<li>Access to the <code>arguments</code> pseudo-array is not allowed.</li>
</ul>
@@ -103,8 +119,8 @@
</li>
<li><code>[ ]</code> subscript operator except when the subscript is
- a numeric literal or string literal or an expression that must produce a number value.
- <ul>
+ a numeric literal or string literal or an expression that must produce a number value. So expressions like <code>a[i]</code> are disallowed because we cannot statically determine that <code>i</code> is not one of the dangerous property names. But <code>a[+i]</code> is allowed, because <code>+i</code> will always produce a number.
+ <ul>
<li>Lookup of dynamic properties could provide access to the restricted
members. Use the <code>ADSAFE.get</code> and <code>ADSAFE.set</code>
@@ -132,7 +148,7 @@
<p>Untrusted code will be able to indirectly call the <code>window.onerror</code>
handler. The handler must be coded such that being called by untrusted
code will cause no breach.</p>
- <p>None of the prototypes of the builtin types may be augmented with
+ <p>None of the prototypes of the built-in types may be augmented with
methods that can breach AD<b>safe</b>'s containment.</p>
<p>All of the HTML <code>id</code> attributes defined on the page must
@@ -164,7 +180,7 @@
<tr>
<td valign="top"><code>has(</code><var>object</var><code>,</code>
<var>name</var><code>)</code></td>
- <td><code>true</code> if the <var>object</var> has an own proerty with that <var>name</var>.</td>
+ <td><code>true</code> if the <var>object</var> has an own property with that <var>name</var>.</td>
</tr>
<tr>
<td valign="top"><code>id(</code><var>id</var><code>)</code></td>
@@ -172,17 +188,20 @@
string must match the <code>id</code> of the widget's <code>div</code>.</td>
</tr>
<tr>
- <td valign="top"><code>isArray(</code><var>value</var><code>)</code></td>
- <td>Returns <code>true</code> if the <var>value</var> is an array.</td>
+ <td valign="top"><code>isArray(</code><var>value</var><code>)</code></td>
+ <td>Returns <code>true</code> if the <var>value</var> is an array.</td>
+ </tr>
+ <tr>
+ <td nowrap valign="top"><code>keys(</code><var>object</var><code>)</code></td>
+ <td>Produce an array of keys from the own enumerable properties of an object.</td>
</tr>
<tr>
- <td nowrap valign="top"><code>later(</code><var>function</var><code>,</code>
- <var>milliseconds</var><code>)</code></td>
- <td>Call a function in the future.</td>
+ <td nowrap valign="top"><code>later(</code><var>function</var><code>,</code> <var>milliseconds</var><code>)</code></td>
+ <td>Call a function in the future.</td>
</tr>
<tr>
- <td valign="top"><code>lib(</code><var>name</var><code>,</code> <var>function</var><code>)</code></td>
- <td>Register an ADsafe <a href="widget.html">library</a>.</td>
+ <td valign="top"><code>lib(</code><var>name</var><code>,</code> <var>function</var><code>)</code></td>
+ <td>Register an ADsafe <a href="widget.html">library</a>.</td>
</tr>
<tr>
<td valign="top"><code>log(</code><var>string</var><code>)</code></td>
View
17 widget.html 100755 → 100644
@@ -2,9 +2,18 @@
<head>
<title>ADsafe Widget Structure</title>
<style>
-h1, p {color: black; font-weight: normal;}
-b {color: darkblue; font-weight: normal;}
-h1 {font-size: 120%; text-align: center;}
+h1, p {
+ color: black;
+ font-weight: normal;
+}
+b {
+ color: darkblue;
+ font-weight: normal;
+}
+h1 {
+ font-size: 120%;
+ text-align: center;
+}
</style>
</head>
@@ -168,7 +177,7 @@
var style = bunch.prototype.style;
bunch.prototype.style = function (name, value) {
- if (name.toLowerCase() === 'position' &&
+ if (name.toLowerCase() === 'position' &amp;&amp;
value.toLowerCase() === 'absolute') {
throw {
name: 'error',
Please sign in to comment.
Something went wrong with that request. Please try again.