1 / 20

Javascript

Javascript. Document Object Model. How to use JavaScript. JavaScript can be embedded into your html pages in a couple of ways in <script> elements in both <head> and <body> elements of page in event attributes of appropriate elements

giselle-turner
Download Presentation

Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Javascript Document Object Model

  2. How to use JavaScript • JavaScript can be embedded into your html pages in a couple of ways • in <script> elements in both <head> and <body> elements of page • in event attributes of appropriate elements • by importing an external file <script type="text/javascript" src="source.js"></script> • 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, <a>, <area> • onmousedown, onmouseup • onmouseover, onmouseout • onchange • onsubmit, onreset • onload, onunload

  9. 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 The Window Object

  10. appName appVersion userAgent appCodeName platform The Navigator Object

  11. alinkColor, linkColor, vlinkColor anchors[ ], applets[ ], forms[ ], images[ ], links[ ] bgColor, fgColor cookie domain lastModified referrer title location, URL open() close() write() writeln() The Document Object

  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 <a> and </a> • 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 • <a name="label"></a> • text property is string containing text between <a> and </a>

  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

More Related