12. session 12 java script objects
DESCRIPTION
TRANSCRIPT
JavaScript Objects
Session 12
Objectives Browser objects. Other browser objects.
DOM (Document Object Model)
JavaScript allows you to access HTML elements and also change the existing structure of an HTML page. This can be done by using the different JavaScript properties and methods that follow the DOM specification. DOM is a technique used for accessing and manipulating HTML elements.
DOM specifications are implemented by all the browsers to overcome incompatibility issues. W3C DOM specifications are divided into levels. The level 1 specification of DOM was specification was in the year 1998. The current DOM specification is level 3.
Nodes The DOM is a blueprint through
which can access of HTML elements and use JavaScript to dynamically manipulate them.
The DOM reads all the elements contained in an HTML page. It treats the HTML elements as nodes.
There are element nodes, attribute nodes and text nodes.
Document is highest level node and text is lowest level node.
All these nodes together form up a node tree and are related to each other.
Node properties All nodes present in the node hierarchy
contain certain properties: nodeName: represents the name of the node. It
contains the tag name of the HTML element in upper case.
nodeValue: represents the text contained within the node. This property is only available for attribute nodes and not for document and element nodes.
nodeType: represents the type of the node. For example, the document node, element node, and so on.
window object DOM provides various objects to access and
manipulate HTML elements in a standard way. The window object is the top level object in the JavaScript hierarchy. The window object represents a browser window.
window properties: defaultStatus: specifies or retrieves the default text to
be displayed in the status bar of the browser window. closed: determines whether window is closed. document: represents an HTML document that contains
different elements. history: contains history of the visited Uniform
Resource Locators. location: contains the content of the specified URL. name: specifies or retrieves the name of the window. parent: retrieves the parent window that contains the
child windows and elements.
window methods alert(): displays an alert box that states the message and
an OK button. close(): closes the current window. confirm(): prompts a dialog box that display a message with
the OK and Cancel button. creatPopup(): creates a pop-pup window. focus(): focuses the current windows. open(): opens specified file in a new browser window. prompt(): prompts a dialog box that accepts input from the
user. print(): prints the content contained within the current
element. setInterval(): repeatedly invokes a function or evaluates
an expression after the specified time intervals (in milliseconds).
setTimeout(): invokes a function after the specified time only once.
window object - Demo
Demo:S12_Window.html
document object The document object is one of the basic JavaScript
object. It represents the entire HTML document. It provides access to another elements such links, and so on. Each HTML page has only one document object. This object is created when you use the BODY element.
Collections: the document object uses a collection of arrays that contain information about the document content.
anchors[]: contains information about the anchors contained in a document.
forms[]: contains information about the form contained in a document.
images[]: contains information about the images contained in a document.
links[]: contains information about the links contained in a document.
document object
Properties of document object: body: provides accesses to the BODY element. cookie: specifies or retrieves all the cookies
associated with the current document. domain: retrieves the domain name of the
current document. title: specifies or retrieves the title of the
document.
document object Methods of document object:
close(): closes data stream and displays the data collected using the open() method.
getElementById(): retrieves collection of HTML elements by using the specified ID.
getElementsByName(): retrieves collection of HTML elements by using the specified name.
getElementsByTagName(): retrieves collection of HTML elements with the specified tag name.
open(): opens a stream to accept the output from write()or writeln() methods.
write(): writes the text to HTML expression to a document.
document object - Demo
Demo: S12_Document.html
form object The form accepts input from the user and sends the user data
for validation. JavaScript allows you to process and validate the form data. A single HTML document can contain multiple forms. The form object represents an HTML from. It is created when you use the FORM element.
Properties of the form object: action: Sets or returns the value of the action attribute in a
form. enctype: Sets or returns the value of the enctype attribute in a
form length: Returns the number of elements in a form . method: Sets or returns the value of the method attribute in a
form . name: Sets or returns the value of the name attribute in a
form . target: Sets or returns the value of the target attribute in a
form. Methods of the form object:
submit(): Submits the form data to the server. reset(): resets the form data to their default values.
form object - Demo
Demo: S12_Form.html
frame object Frames allow you to view multiple screens simultaneously. The
frame object represents the HTML frame. It is created when you use the FRAME element. A single browser window can contain multiple frames.
Properties of the frame object: frameBorder: Sets or returns the value of the frame border
attribute in a frame. marginHeight: Sets or returns the value of the margin
height attribute in a frame longDesc: Sets or returns the value of the longdesc attribute
in a frame marginWidth: Sets or returns the value of the marginwidth
attribute in a frame name: Sets or returns the value of the name attribute in a
frame noResize: Sets or returns the value of the noresize attribute
in a frame src: Sets or returns the value of the src attribute in a frame id: Secifies or retrieves the ID of a frame.
frame object - Demo
Demo: S12_FrameDemo.html – S12_Frame.html
history object The history object is a part of the window
object. It contains a set of URLs visited by a user in a browser window.
The history object is an array that allows you to a particular URL by specifying its index number in the array. The length property allows you to determine the number of URLs in the history list.
Methods of the history object: back(): Loads the previous URL in the history list. forward(): Loads the next URL in the history list go(): Loads a specific URL from the history list
history object - Demo
Demo: S12_History.html
navigator object The navigator object contains information about
the browser used by the client. It allows you to retrieve information such as name, version number, and code name of browser.
Properties of the navigator object: appCodeName: Returns the code name of the browser. appName: Returns the name of the browser . appVersion: Returns the version information of the
browser. cookieEnable: Determines whether cookies are enabled
in the browser . platform: Returns for which platform the browser is
compiled userAgent: Returnsthe user-agent header sent by the
browser to the server.
navigator object - Demo
Demo: S12_Navigator.html
location object The location object allows you to access
complete information of URL loaded in browser window. It is a part of the window object. A single URL is composed of different positions such as the host name, port number, and so on.
Properties of the navigator object: hash: Returns the anchor portion of a URL. host: Returns the hostname and port of a URL. hostname: Returns the hostname of a URL. href: Returns the entire URL. pathname: Returns the path name of a URL . port: Returns the port number the server uses for a
URL. protocol: Returns the protocol of a URL. search: Returns the query portion of a URL.
location object Methods of the navigator object:
assign(): Loads a new document. reload(): Reloads the current
document. reload(): Replaces the current
document with a new one.
location object - Demo
Demo: S12_Location.html
Summary DOM is a standard technique that allows accessing
and manipulating HTML element through script. DOM provides various built-in objects to
dynamically access HTML elements: Window object, document object, form object, frame object, history object, navigator object, location object.
The window object is the top level object in the Javacript hierarchy. Window object represents the browser window.
Document object is one of the basic Javascript object. It represents the entire HTML document.
Summary… Form accept input from the user and sends
the user data for validation. Form object represents an HTML form.
Frame allows to view multiple screen simultaneously. The Frame object represent the HTML frame.
History object is a set of URLs visited by users in a browser window
Summary… Navigator object contain information about
the browser used by the client. Location object allows to access complete
information of the URL loaded in the browser window.