摘录《professional javascrpt for web developers》

摘录《professional javascrpt for web developers》
p17:
Calling typeof on a variable or value returns one of the following values:
❑ “undefined” if the variable is of the Undefined type.
❑ “boolean” if the variable is of the Boolean type.
❑ “number” if the variable is of the Number type.
❑ “string” if the variable is of the String type.
❑ “object” if the variable is of a reference type or of the Null type.

p142:
The window.open() method returns a window object as its function value that is also the window object
for the newly created window (or for the frame, if the name given is the name of an existing frame).
Using this object, it’s possible to manipulate the new window:

var oNewWin = window.open(“http://www.wrox.com/”, “wroxwindow”,
“height=150,width=300,top=10,left=10,resizable=yes”);
oNewWin.moveTo(100, 100);
oNewWin.resizeTo(200, 200);

Also using this object, it is possible to close the new window using the close() method:

oNewWin.close();

p184:
To create a NodeIterator object, use the createNodeIterator() method of the document object. This
method accepts four arguments:
1. root — the node in the tree that you wish to start searching from
2. whatToShow — a numerical code indicating which nodes should be visited
3. filter — a NodeFilter object to determine which nodes to ignore
4. entityReferenceExpansion — a Boolean value indicating whether entity references should
be expanded
You can combine multiple values by using the bitwise OR operator:

var iWhatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

The filter argument of createNodeIterator() can be used to specify a custom NodeFilter object, but
can also be left null if you don’t want to use it.
To create a simple NodeIterator that visits all node types, use the following:

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null,
false);

p305:
DOM style methods
The DOM also described several methods for the style object, all designed to interact with individual
parts of the CSS style definition:
❑ getPropertyValue(propertyName) — Returns the string value of the CSS property
propertyName. The property must be specified in CSS style, such as “background-color”
instead of “backgroundColor”.
❑ getPropertyPriority() — Returns the string “important” if the CSS property
“!important” is specified in the rule; otherwise it returns an empty string
❑ item(index) — Returns the name of the CSS property at the given index, such as
“background-color”
❑ removeProperty(propertyName) — Removes propertyName from the CSS definition
❑ setProperty(propertyName, value, priority) — Sets the CSS property propertyName
to value with the given priority (either “important” or an empty string)

p388:
Dragged item events
When an item is dragged, the following events fire (in this order):
1. dragstart
2. drag
3. dragend
At the moment you hold a mouse button down and begin to move the mouse, the dragstart event
fires on the item that is being dragged. By default, this event fires on an image or text selection being
dragged. The cursor changes to the no-drop symbol (a circle with a line through it) indicating that the
item cannot be dropped on itself. You can use the ondragstart event handler to run JavaScript code as
the dragging begins.
After the dragstart event fires, the drag event fires and continues firing so long as the object is being
dragged. You can think of this event as similar to mousemove (which also fires repeatedly as the mouse is
moved). When the dragging stops (because you drop the item onto either a valid or invalid drop target)
the dragend event fires.

p393:
The dataTransfer object
Simply dragging and dropping isn’t of any use unless data is actually being affected. To aid in the transmission
of data via drag and drop, Internet Explorer 5.0 introduced the dataTransfer object, which
exists as a property of event and is used to transfer string data from the dragged item to the drop target
(the dataTransfer object is still used in IE 6.0).
393
Drag and Drop
Because it is a property of event, the dataTransfer object doesn’t exist except within the scope of an
event handler, specifically, an event handler for a drag-and-drop event. Within an event handler, you can
use the object’s properties and methods to work with your drag-and-drop functionality.

The dataTransfer object has two methods: getData() and setData(). As you might expect,
getData() is capable of retrieving a value stored by setData(). Two types of data can be set: plain text
and URLs. The first argument for setData(), and the only argument of getData(), is a string indicating
which type of data is being set, either “text” or “URL”. For example:
oEvent.dataTransfer.setData(“text”, “some text”);
var sData = oEvent.dataTransfer.getData(“text”);
oEvent.dataTransfer.setData(“URL”, “http://www.wrox.com/”);
var sURL = oEvent.dataTransfer.getData(“URL”);
It should be noted that two spaces can be used to store data: one for text and one for a URL. If you make
repeated calls to setData(), you are always overwriting the data stored in the space specified.
The data stored in the dataTransfer object is only available up until the drop event. If you do not
retrieve the data in the ondrop event handler, the dataTransfer object is destroyed and the data is lost.

dropEffect and effectAllowed
The dataTransfer object can be used to do more than simply transport data to and fro; it can also be
used to determine what type of actions can be done with the dragged item and the drop target. You
accomplish this by using two properties: dropEffect and effectAllowed.
395
Drag and Drop
The dropEffect property is set on the drop target to determine which type of drop behavior is allowed.
These are four possible values:
❑ “none” — A dragged item cannot be dropped here. This is the default value for everything but
text boxes.
❑ “move” — Indicates that the dragged item should be moved to the drop target.
❑ “copy” — Indicates that the dragged item should be copied to the drop target.
❑ “link” — Indicates that the drop target will navigate to the dragged item (but only if it is a URL).
Each of these values causes a different cursor to be displayed when an item is dragged over the drop
target. It is up to you, however, to actually cause the actions indicated by the cursor. In other words,
nothing is automatically moved, copied, or linked without your direction intervention. The only thing
you get for free is the cursor change. In order to use the dropEffect property, it must be set in the
ondragenter event handler for the drop target.
The dropEffect property is useless unless you also set the effectAllowed property on the dragged
item. This property indicates which dropEffect is allowed for the dragged item. The possible values
are the following:
❑ “uninitialized” — No action has been set for the dragged item.
❑ “none” — No action is allowed on the dragged item.
❑ “copy” — Only dropEffect “copy” is allowed.
❑ “link” — Only dropEffect “link” is allowed.
❑ “move” — Only dropEffect “move” is allowed.
❑ “copyLink” — dropEffects “copy” and “link” are allowed.
❑ “copyMove” — dropEffects “copy” and “move” are allowed.
❑ “linkMove” — dropEffects “link” and “move” are allowed.
❑ “all” — All dropEffects are allowed.
This property must be set inside the ondragstart event handler.

p405:
zDragDrop
You’ve seen that simulating drag and drop takes a fair amount of JavaScript. You may be wondering,
“Isn’t there some sort of JavaScript library that handles all this for me?” The answer is the zDragDrop
library, freely available from http://www.nczonline.net/downloads/. This library provides a set of
objects that encapsulate much of the simulated drag-and-drop process. You need only include the file
zdragdroplib.js in your page to take advantage of the functionality.

p423:
zDragDrop
You’ve seen that simulating drag and drop takes a fair amount of JavaScript. You may be wondering,
“Isn’t there some sort of JavaScript library that handles all this for me?” The answer is the zDragDrop
library, freely available from http://www.nczonline.net/downloads/. This library provides a set of
objects that encapsulate much of the simulated drag-and-drop process. You need only include the file
zdragdroplib.js in your page to take advantage of the functionality.

p426:
The third edition of ECMAScript also introduced the throw statement to raise exceptions purposely. The
syntax is the following:
throw error_object;
The error_object can be a string, a number, a Boolean value, or an actual object. All the following
lines are valid:
throw “An error occurred.”;
throw 50067;
throw true;
throw new Object();
It is also possible to throw an actual Error object. The constructor for the Error object takes only one
parameter, the error message, making it possible to do the following:
throw new Error(“You tried to do something bad.”);
All the other classes of Error are also available to developers:
throw new SyntaxError(“I don’t like your syntax.”);
throw new TypeError(“What type of variable do you take me for?”);
throw new RangeError(“Sorry, you just don’t have the range.”);
throw new EvalError(“That doesn’t evaluate.”);