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 0 Downloads 65 Views

Recommend Documents

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.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 5.pdf
Memory Management. 3. Device Management. 4. File Management. 5. Security Management. User. Utilities Application Software. Operating System. Hardware.

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 - Expresate 3.pdf
Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Chapter 5 - Expresate 3.pdf. Chapter 5 - Expresate 3.pdf. Open.

AIFFD Chapter 5 - Age and Growth - GitHub
May 13, 2015 - The following additional packages are required to complete all of the examples (with ... R must be set to where these files are located on your computer. ...... If older or younger age-classes are not well represented in the ... as the

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. Special moulding techniques & Cupola melting.pdf ...
Page 1 of 19. Sl no. Rollno NAME DOB Posting. 1 1201000028 LAKSHMINARAYANA S 23/01/1990 Mysuru. 2 1201000036 BHAGAWANTH THEVISHAN 13/10/1985 Mysuru. 3 1203000037 HEMANTH B 10/01/1993 Mysuru. 4 1203000039 JAYANTH V 21/05/1992 Mysuru. 5 1205000042 SAND

CHAPTER 5: Graphs and Trees - DAINF
Page 166 Mathematical Structures for Computer Science Gersting. CHAPTER ... Not isomorphic; graph in (b) has a node of degree 5, graph in (a) does not. 14. f:.

chapter 5-American Revolution.pdf
Whoops! There was a problem loading more pages. Retrying... chapter 5-American Revolution.pdf. chapter 5-American Revolution.pdf. Open. Extract. Open with.

Chapter 5 Classical Greece.pdf
Page 1 of 34. MAKALAH GLOBAL WARMING. BAB 1. PENDAHULUAN. 1.1. Latar Belakang Masalah. Makalah ini dibuat untuk menambah pengetahuan tentang pemanasan global atau global. warming yang sedang terjadi saat ini. Banyak faktor atau penyebab yang membuat