Download presentation
Presentation is loading. Please wait.
1
Javascript Document Object Model
2
How to use JavaScript JavaScript can be embedded into your html pages in a couple of ways in elements in both and elements of page in event attributes of appropriate elements by importing an external file JavaScript URLs javascript:code javascript:alert( "Hello, World! ") If no value is returned, current document will not be modified
3
Document Object Model Used for HTML and XML documents Specifies the elements of a document that JavaScript code has access to DOM0 supported by most browsers Subset of DOM1
4
DOM
5
Client-Side JavaScript Browser provides environment for code to run The Window object serves as a global object and global execution context Represents Window or frame that displays a document Window contains a Document object Uses event-driven programming model
6
Execution Sequence JavaScript code is executed once as the html file is read into the browser Code is executed as th document is parsed in order it appears in the HTML code Event handlers provide dynamic behavior event handlers are attributes of objects such as input elements
7
Lifetimes Window object representing top-level window of browser exists as long as window exists Window is restored to default state when a new Document is loaded Variables exist persist only as long as the Document that defines them exists
8
Event handlers onclick - button elements,, onmousedown, onmouseup onmouseover, onmouseout onchange onsubmit, onreset onload, onunload
9
The Window Object Properties closed status, defaultStatus document self, window parent, top opener name history frames[] navigator (browser info) Methods open(), close() alert(), confirm(), prompt() focus(), blur() moveBy(), moveTo() print() scrollBy(), ScrollTo() setInterval(), clearInterval() for repeated actions setTimeout, clearTimeout for single action
10
The Navigator Object appName appVersion userAgent appCodeName platform
11
The Document Object alinkColor, linkColor, vlinkColor anchors[ ], applets[ ], forms[ ], images[ ], links[ ] bgColor, fgColor cookie domain lastModified referrer title location, URL open() close() write() writeln()
12
Document Arrays Each of the arrays in the Document properties is an array of objects of the appropriate type Order corresponds to the order the objects appear in the HTML document HTML elements can be given a name attribute. The name can be used in the code instead of indexing into the array
13
Forms A Form object contains an array of elements. The individual elements correspond to the input elements in the form. Each element can have event handlers associated with it.
14
Images The images array contains all the inline images in the document an image has a src property which can be changed by the JavaScript code images can have onmouseover, onmouseout event handlers You can create image variables in the code to pre-load image files
15
Links Array containing all the hypertext links in the document Link objects have same properties as Location object text property contains text between and Links can have event handlers associated with them onmouseover, onmouseout, onclick Hyperlinks can be dynamically modified
16
Anchors Anchors are named locations in an HTML document text property is string containing text between and
17
Other Arrays applets list all the applets in the document JavaScript code can call the public methods of the applet embeds represent other types of date embedded in the document audio, video, … this data requires the presence of an appropriate viewer
18
Miscellaneous Objects Screen object give access to information about display - height, width, colorDepth Location object represents a URL - href, protocol, host, pathname, search History object - script does not have access to URLs for previously visited web sites but can use back() and forward() to traverse them
19
Cookies A cookie is a small amount of named data stored by the browser and associated with a particular web site provide a way of saving state of a web page last for current session by default Server-side programs use cookies JavaScript can manipulate cookie data
20
Sources Web Design and Programming by Paul S. Wang and Sanda S. Katila JavaScript The Definitive Guide by David Flanagan
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.