Javascript Document Object Model

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

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

DOM

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

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

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

Event handlers  onclick - button elements,,  onmousedown, onmouseup  onmouseover, onmouseout  onchange  onsubmit, onreset  onload, onunload

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

The Navigator Object  appName  appVersion  userAgent  appCodeName  platform

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

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

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.

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

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

Anchors  Anchors are named locations in an HTML document   text property is string containing text between and

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

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

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

Sources  Web Design and Programming by Paul S. Wang and Sanda S. Katila  JavaScript The Definitive Guide by David Flanagan