defaultChecked
Compatibility WinIE3 , MacIE3 , NN2 , Moz , Safari Sometimes you may find it beneficial to know if the initial setting of a checkbox has changed. The checked property alone can't tell you this because it reflects only the current state of a checkbox. Another property, defaultChecked, keeps up with the initial state of a checkbox. If you add the checked attribute to the lt input gt definition for a checkbox, the defaultChecked property for that object is true otherwise, the property is false....
referrer
Compatibility WinIE3 , MacIE3 , NN2 , Moz , Safari When a link from one document leads to another, the second document can, under JavaScript control, reveal the URL of the document containing the link. The document.referrer property contains a string of that URL. This feature can be a useful tool for customizing the content of pages based on the previous location the user was visiting within your site. A referrer contains a value only when the user reaches the current page through a link. Any...
Using getBoundingClientRect
lt title gt getClientRects and getBoundClientRect Methods lt titl lt script type text javascript gt function hilite var hTop, hLeft, hRight, hBottom, hWidth var select document.forms 0 .choice var n var clientRects var mainElem if n gt 0 amp amp n lt clientRects.length if document.forms 0 .fullWidth.checked hLeft mainElem.getBoundingClientRect .left hRight mainElem.getBoundingClientRect .right else hLeft clientRects n .left hRight clientRects n .right clientRects n .top document.body.scrollTop...
ondrag ondragend ondragstart
Compatibility WinIE5 , MacIE-, NN-, Moz-, Safari 1.3 The ondrag event fires after the ondragstart event and continues firing repeatedly while the user drags a selection or object onscreen. Unlike the onmousemove event, which fires only as the cursor moves onscreen, the ondrag event continues to fire even when the cursor is stationary In the WinIE5 Safari 1.3 , users can drag objects to other browser windows or other applications. The event fires while the dragging extends beyond the browser...
onhelp
Compatibility WinIE4 , MacIE5 , NN-, Moz-, Safari- The onhelp event handler fires in Windows whenever an element of the document has focus and the user presses the F1 function key on a Windows PC. As of MacIE5, the event fires only on the window in other words, event handler specified in the lt body gt tag and does so via the dedicated Help key on a Mac keyboard. Browser Help menu choices do not activate this event. To prevent the browser's Help window from appearing, the event handler must...
isChar
Compatibility WinlE-, MacIE-, NN6 , Moz , Safari- You can find out from each keyboard event whether the key being pressed is a character key by examining the isChar property. Most typically, however, you are already filtering for character or non-character keys by virtue of the event handlers used to capture keyboard actions onkeypress for character keys onkeydown or onkeyup for non-character keys. Be aware that the isChar property returns inconsistent values even for the same key in the first...
A Simple Parallel Array Lookup
lt title gt Parallel Array Lookup lt title gt lt script type text javascript gt the data var regionalOffices New York, Chicago, Houston, Portland var regionalManagers Shirley Smith, Todd Gaston, Leslie Jones, Harold Zoot var regOfficeQuotas 300000, 250000, 350000, 225000 do the lookup into parallel arrays function getData form var i form.offices.selectedlndex form.manager.value regionalManagers i form.quota.value regOfficeQuotas i lt body lt h1 gt Parallel Array Lookup lt h1 gt lt hr gt form...
innerHTML innerText
Compatibility WinIE4 , MacIE4 , NN6 , Moz , Safari One way that Internet Explorer exposes the contents of an element is through the innerHTML and innerText properties. NN6 Moz Safari offer only the innerHTML property. All content defined by these inner properties consists of document data that is contained by an element's start and end tags but does not include the tags themselves see the outerText and outerHTML properties . Setting these inner properties is a common way to modify a portion of...
Walkchildren Javascript
Listing 15-4 shows how you can use the children property to walk the child nodes of a given node. This function accumulates and returns a hierarchical list of child elements from the point of view of the document's HTML element the default or any element whose ID you pass as a string parameter. This function is embedded in The Evaluator so that you can inspect the parent-child hierarchy of that page or when using evaluator.js for debugging as described in Chapter 45 on the CD-ROM the element...
formelements[ property
In addition to keeping track of each type of element inside a form, the browser maintains a list of all control elements within a form. This list is another array, with items listed according to the order in which their HTML tags appear in the source code. It is generally more efficient to create references to elements directly, using their names. However, sometimes a script needs to look through all of the elements in a form. This is especially true if the content of a form changes with each...
Exercises Ncp
1. Rework Listings 9-1, 9-2, 9-3, and 9-4 so that all the script functions receive the most efficient form or form element references directly from the invoking event handler. 2. For the following form assume that it's the only form on the page , write at least 10 ways to reference the text input field as an object in all modern scriptable browsers. lt form name subscription action cgi-bin maillist.pl method post gt lt input type text id email name email gt lt input type submit gt lt form gt 3....
Control Structures
In the vernacular of programming, the kinds of statements that make decisions and loop around to repeat themselves are called control structures. A control structure directs the execution flow through a sequence of script statements based on simple decisions and other factors. An important part of a control structure is the condition. Just as you may travel different routes to work depending on certain conditions for example, nice weather, nighttime, attending a soccer game , so, too, does a...
Exercises
1. Which of the following applications are well suited to client-side JavaScript Why or why not a. Product catalog page that lets visitors view the product in five different colors b. A counter that displays the total number of visitors to the current page d. Graphical Fahrenheit-to-Celsius temperature calculator 2. Which of the following object names are valid in JavaScript For each one that is invalid, explain why. 3. Using the diagram from Figure 4-7 for reference, draw a diagram of the...
if constructions
The simplest program decision is to follow a special branch or path of the program if a certain condition is true. Formal syntax for this construction follows. Items in italics get replaced in a real script with expressions and statements that fit the situation. Don't worry about the curly braces yet. Instead, get a feel for the basic structure. The keyword, if, is a must. In the parentheses goes an expression that evaluates to a Boolean value. This is the condition being tested as the program...
Expressions in scripts
You probably didn't recognize it at the time, but you have seen how expression evaluation came in handy in several scripts in previous chapters. Let's look at one in particular from Listing 5-6 where a script writes dynamic text to the page as the page loads. Recall the second document.write statement document.write of navigator.appName . You can begin experimenting with the way JavaScript evaluates expressions with the help of The Evaluator Jr. shown in the following figure , an HTML page you...
Scripts in the Head and Body
lt title gt A Document lt title gt lt script type text javascript gt script statement s here lt script type text javascript gt script statement s here You are not limited to one lt script gt tag set in either the Head or Body. You can include as many lt script gt tag sets in a document as are needed to complete your application. In Listing 5-4, for example, two lt script gt tag sets are located in the Head portion. One set is used to load an external .js library the other includes code...