12. session 12 java script objects

  • 418 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Objects Session 12
  • 2. Objectives Browser objects. Other browser objects.
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. window object - DemoDemo:S12_Window.html
  • 9. 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.
  • 10. 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.
  • 11. 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.
  • 12. document object - DemoDemo: S12_Document.html
  • 13. 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.
  • 14. form object - DemoDemo: S12_Form.html
  • 15. 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.
  • 16. frame object - DemoDemo: S12_FrameDemo.html – S12_Frame.html
  • 17. 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
  • 18. history object - DemoDemo: S12_History.html
  • 19. 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.
  • 20. navigator object - DemoDemo: S12_Navigator.html
  • 21. 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.
  • 22. 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.
  • 23. location object - DemoDemo: S12_Location.html
  • 24. 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.
  • 25. 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
  • 26. 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.