ACM 262 Course Notes

INTRODUCTION TO CLIENT-SIDE

WEB PROGRAMMING

ACM 511

ACM 262 Course Notes

Javascript

ACM 262 Course Notes

Javascript

ACM 262 Course Notes

Javascript

ACM 262 Course Notes

Determining the Length of a String

ACM 262 Course Notes

Changing the Case of a String

ACM 262 Course Notes

Searching a String: indexOf( ) Technique

ACM 262 Course Notes

Extracting Part of a String with slice( )

ACM 262 Course Notes

Extracting Part of a String with slice( )

ACM 262 Course Notes

Document Object Model

When a Web browser loads an HTML file, it displays the contents of that file onthe screen (appropriately styled with CSS, of course). But that’s not all the Webbrowser does with the tags, attributes, and contents of the file: it also creates andmemorizes a “model” of that page’s HTML. In other words, the Web browserremembers the HTML tags, their attributes, and the order in which they appear inthe file—this representation of the page is called the Document Object Model, orDOM for short.

The DOM provides the information needed for JavaScript to communicate withthe elements on the Web page. The DOM also provides the tools necessary to navigate through, change, and add to the HTML on the page. The DOM itself isn’t actually JavaScript—it’s a standard from the World Wide Web Consortium (W3C)that most browser manufacturers have adopted and added to their browsers. TheDOM lets JavaScript communicate with and change a page’s HTML.

ACM 262 Course Notes

Selecting Page Elements

ACM 262 Course Notes

Selecting Page Elements

ACM 262 Course Notes

DOM Relationships

ACM 262 Course Notes

DOM Relationships

ACM 262 Course Notes

DOM Relationships

ACM 262 Course Notes

Example 5.1

ACM 262 Course Notes

Problem with DOM

A further complication is that the major browsers interpret the DOM

differently. The techniques presented in the earlier pages of this chapter

are all cross-browser compatible, but other parts of the DOM standard

aren’t. For example, Internet Explorer handles events differently from

other browsers; the same HTML can produce more text nodes in Firefox

and Safari than in Internet Explorer; and IE doesn’t always retrieve

HTML tag attributes in the same way as Firefox, Safari, or Opera. In

addition, different browsers treat white space (like tabs and spaces) in

HTML differently—in some cases treating white space like additional text

nodes (Firefox and Safari) and in other cases ignoring that white space

(Internet Explorer). And those are just a few of the differences between

how the most common Web browsers handle the DOM.