javascript
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
Javascript
Document Object Model
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSHow 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSDocument 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSDOM
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSClient-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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSExecution 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSEvent handlersonclick - button elements, <a>, <area>
onmousedown, onmouseuponmouseover, onmouseoutonchangeonsubmit, onresetonload, onunload
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSThe 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSThe Navigator Object appName appVersionuserAgent appCodeNameplatform
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSThe Document Object alinkColor, linkColor, vlinkColor anchors[ ], applets[ ], forms[ ],
images[ ], links[ ] bgColor, fgColor cookie domain lastModified referrer title location, URL
open() close()write()writeln()
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSDocument 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS 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.
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSLinks
Array containing all the hypertext links in the document
Link 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS AnchorsAnchors are named locations in an
HTML document<a name="label"></a>text property is string containing text
between <a> and </a>
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSOther 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSSMiscellaneous 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS 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
PHPJavascriptHTMLperlCGIJavaXMLXHTMLCSS SourcesWeb Design and Programming by Paul S.
Wang and Sanda S. Katila JavaScript The Definitive Guide by David
Flanagan