Chapter 5 JavaScript and XHTML Documents

Overview The

Document Object Model (DOM)

Element Events

Access in JavaScript

and Event Handling

Handling

events from Body Elements

Handling

events from Button Elements

Handling

events from Text Box and Password Elements

Dynamic

HTML

Element

positioning and moving

Changing

Colours and Fonts

Dynamic

Content

Reacting

to a Mouse Click

JavaScript Execution Environment •

The Window object provides the largest enclosing referencing environment for scripts



Implicitly defined Window properties: •document - a reference to the Document object that the window displays



•frames - an array of references to the frames of the document Every Document object has: •forms - an array of references to the forms of the document •Each forms object has an elements array, which has references to the form’s elements. Document also has property arrays for anchors, links, & images

The Document Object Model DOM

0 is supported by all JavaScript-enabled browsers (no written specification)

DOM

1 was released in 1998

DOM

2 issued in 2000 •Nearly completely supported by NS7 •IE6’s support is lacking some important things DOM 3 is the latest W3C specification The

DOM is an abstract model that defines the interface between

HTML documents

The Document Object Model A

language that supports the DOM must have a binding to the DOM constructs

In

the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties

e.g., •would be represented as an object with two properties, type and name, with the values "text" and "address"

Figure 5.1 The DOM structure for a simple document

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-6

Element Access in JavaScript There

are several ways to do it 1.DOM address

Example (a document with just one form and one widget):


•document.forms[0].elements[0] • Problem: document changes

Element Access in JavaScript 2. Element names requires the element and all of its ancestors (except body) to have name attributes Example: 

name = "myForm" action = ""> type = "button" name = "pushMe">



document.myForm.pushMe

Element Access in JavaScript 3.getElementById Method (defined in DOM 1)

Example:
•document.getElementById("pushMe") Form elements often have ids and names both set to the same value

Element Access in JavaScript Checkboxes and radio button have an implicit array, which has their name
...

... var numChecked = 0; var dom = document.getElementById("toppingGroup"); for (index = 0; index < dom.toppings.length; index++) if (dom.toppings[index].checked] numChecked++;

Events and Event Handling An event is a notification that something specific has occurred, either with the browser or an action of the browser user An event handler is a script that is implicitly executed in response to the appearance of an event The process of connecting an event handler to an event is called registration Don’t use document.write in an event handler, because the output may go on top of the display

Table 5.1 Events and their tag attributes

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-12

Table 5.2 Event attributes and their tags

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-13

Table 5.2 Event attributes and their tags (cont)

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-14

Figure 5.2 Display of load.html

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-15

Figure 5.3 Display of radio_click.html

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-16

Figure 5.4 The result of pressing the Model 182 button in radio_click

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-17

Figure 5.5 Display of pswd_chk.html after it has been filled out

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-18

Figure 5.6 Display of pswd_chk.html after Submit Query has been clicked

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-19

Figure 5.7 Display of validator.html, with an invalid phone number, while the phone text field has focus

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-20

Figure 5.8 The message created by entering an invalid telephone number in validator.html

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-21

Figure 5.9 The navigator properties appName and appVersion for Firefox 2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-22

Figure 5.10 The navigator properties appName and appVersion for Internet Explorer 7

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

5-23

Chapter 5

Every Document object has: •forms - an array of references to the forms of the document. •Each forms object has an elements array, which has references to the form's elements. Document also has property arrays for anchors, links, & images. JavaScript Execution Environment ...

809KB Sizes 4 Downloads 534 Views

Recommend Documents

Chapter 5
not in the domain. The only critical point is x = 0. As x moves away from 0 on either side, the values of y decrease. The function has a local maximum value at (0, ...... (b) Since. ,. dV. dV dr dt dr dt. = we have. 2 . dV dr rh dt dt π. = (c). 2. 2

Chapter 5 - DLSCRIB
Three different washing solutions are being compared to study their ... Plot the mean tensile strengths observed for each chemical type in Problem 4.3 and ...... np y p y .... h... n-1. Treatment x Squares. Squares. Treatments .... h.j.. SS. SS np y

Chapter 5 Density matrix formalism
In chap 2 we formulated quantum mechanics for isolated systems. In practice systems interect with their environnement and we need a description that takes this ...

chapter 5.pdf
Memory Management. 3. Device Management. 4. File Management. 5. Security Management. User. Utilities Application Software. Operating System. Hardware.

Word Chapter 5
Select the text from the first paragraph (do not select the title) to the end of the ... Insert the Simple Quote (NOT Simple text box—scroll down to find it) and make ...

Chapter 5.pdf
Loading… Page 1. Whoops! There was a problem loading more pages. Chapter 5.pdf. Chapter 5.pdf. Open. Extract. Open with. Sign In. Main menu. Displaying Chapter 5.pdf.

Chapter 5.pdf
hydraulic cylinder BC (short link). Explain the significance. of each force on the .... Chapter 5.pdf. Chapter 5.pdf. Open. Extract. Open with. Sign In. Main menu.

Chapter NR 5
cubic feet (one decimal place). Step 2. Compute Maximum Weight Capacity. Formula: Capacity = Cubic Capacity. 62.5 * Boat Weight B 5. Capacity = [(. 62.5) *. ] B 5. Capacity = pounds (nearest whole number). Note: The volume of integral structure aft o

Chapter 5 and 6 - GitHub
Mar 8, 2018 - These things are based on the sampling distribution of the estimators (ˆβ) if the model is true and we don't do any model selection. • What if we do model selection, use Kernels, think the model is wrong? • None of those formulas

Chapter 5 2015.09.18 Clean.pdf
all services and shall be paid in advance of the services rendered. Application and renewal fees. may also be paid by personal check. (b) All fees collected by ...

Chapter 5. Special moulding techniques & Cupola melting.pdf ...
Chapter 5. Special moulding techniques & Cupola melting.pdf. Chapter 5. Special moulding techniques & Cupola melting.pdf. Open. Extract. Open with. Sign In.

Chapter 5. The Apportionment Act.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Chapter 5.

Chapter 5 Project Stages
The design and construction of buildings, bridges, and roadways follow a .... and distribution, lighting and branch wiring, communication and security systems.

Chapter 5- Common Interest Communities.pdf
Whoops! There was a problem loading more pages. Retrying... Chapter 5- Common Interest Communities.pdf. Chapter 5- Common Interest Communities.pdf.

Chapter 5 Review Sheet.pdf
James Madison. “Father of the Constitution”. Alexander Hamilton. Gouverneur Morris. John Adams. Virginia Plan. Edmund Randolph. New Jersey Plan.

Chapter 5 Lab 5-1, Configure and Verify Path Control
Note: This lab uses Cisco 1841 routers with Cisco IOS Release 12.4(24)T1, ... Cisco IOS Software versions if they have comparable capabilities and features.

Chapter 5- Common Interest Communities.pdf
fee in the amount set by the Director of the Division of Real Estate. The association must. complete an initial registration and renew its registration on an annual ...

Chapter 5 The Americans.pdf
with Bangkok. as the capital. 1782 Russia annexes. the Crimean Peninsula. Ludwig van. Beethoven's first works. are published. 1783. 1783 Jean-Pierre. Blanchard and. John Jeffries. cross the English. Channel in a. balloon. 1785. 1782 1782 1784 1784. W

Chapter 5 - Medieval Japan.pdf
Page 3 of 28. Forming your own men- tal images will help you. remember what you. read. Visualize by forming mental images of the text as you read. Imagine ...

Unit 2 chapter 5.pdf
PERATURAN DIRJEN DIKTI PEDOMAN OPERASIONAL. Desember 2014. Page 3 of 4. Unit 2 chapter 5.pdf. Unit 2 chapter 5.pdf. Open. Extract. Open with.

Chapter 5 Retake Test
©t O250A103N uKWuXtFaB sStoofYtOwXanrYe2 fLIL1Cz.h 2 7AOl2lD 5rziLgWhCtysO FrweSsZesr7vDeHdA.A w RMRandWej Twoijtnhk KInnwfpi7nIimtTem ...

NOH Chapter 5 062915.pdf
Whoops! There was a problem loading more pages. Retrying... Whoops! There was a problem previewing this document. Retrying... Download. Connect more ...