javascript document object model. how to use javascript javascript can be embedded into your html...
Post on 30-Jan-2016
245 views
TRANSCRIPT
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 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
Document Object ModelUsed for HTML and XML documentsSpecifies the elements of a document that
JavaScript code has access toDOM0 supported by most browsers
Subset of DOM1
DOM
Client-Side JavaScriptBrowser provides environment for code
to run The Window object serves as a global
object and global execution contextRepresents Window or frame that displays a
documentWindow contains a Document object
Uses event-driven programming model
Execution SequenceJavaScript code is executed once as the
html file is read into the browserCode is executed as th document is
parsedin order it appears in the HTML code
Event handlers provide dynamic behaviorevent handlers are attributes of objects such
as input elements
LifetimesWindow object representing top-level
window of browser exists as long as window existsWindow 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 handlersonclick - button elements, <a>, <area>
onmousedown, onmouseuponmouseover, onmouseoutonchangeonsubmit, onresetonload, 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 ObjectappNameappVersionuserAgentappCodeNameplatform
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 ArraysEach 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
FormsA 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.
ImagesThe images array contains all the inline
images in the documentan image has a src property which can be
changed by the JavaScript codeimages can have onmouseover, onmouseout
event handlersYou can create image variables in the code
to pre-load image files
LinksArray containing all the hypertext links in the
documentLink objects have same properties as Location
objecttext property contains text between <a> and </a>
Links can have event handlers associated with themonmouseover, onmouseout, onclick
Hyperlinks can be dynamically modified
AnchorsAnchors are named locations in an
HTML document<a name="label"></a>text property is string containing text
between <a> and </a>
Other Arraysapplets 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 documentaudio, video, …this data requires the presence of an
appropriate viewer
Miscellaneous ObjectsScreen object give access to information
about display - height, width, colorDepthLocation object represents a URL - href,
protocol, host, pathname, searchHistory object - script does not have
access to URLs for previously visited web sites but can use back() and forward() to traverse them
CookiesA cookie is a small amount of named data
stored by the browser and associated with a particular web siteprovide a way of saving state of a web pagelast for current session by default
Server-side programs use cookiesJavaScript can manipulate cookie data
SourcesWeb Design and Programming by Paul S.
Wang and Sanda S. Katila JavaScript The Definitive Guide by David
Flanagan