document object model dom n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Document Object Model (DOM) PowerPoint Presentation
Download Presentation
Document Object Model (DOM)

Loading in 2 Seconds...

play fullscreen
1 / 30
lee

Document Object Model (DOM) - PowerPoint PPT Presentation

151 Views
Download Presentation
Document Object Model (DOM)
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Document Object Model (DOM) Computer Science & Engineering

  2. window document event frame history location navigator screen document anchor imageappletlayerclass linkelement plug-inembeb styleID tag form button resetcheck box selecthidden submitpasswordtextradio textarea HTML DOM • The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. Computer Science & Engineering

  3. CREATING OBJECTS • Define the function: function ObjectName(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; … this.method1=functionName1; this.method2=functionName2; … } Computer Science & Engineering

  4. CREATING OBJECTS • To call object we use the keyword new. • Exemple: function myobject() { this.containedValue = 0; this.othercontainedValue = 0; this.anothercontainedValue = 0; } var mything = new myobject(); Computer Science & Engineering

  5. ARRAY OBJECT • Array: An array is a special variable, which can hold more than one value, at a time. • An array can be defined in three ways: • var myCars=new Array(); myCars[0]="Saab";   myCars[1]="Volvo";myCars[2]="BMW"; • var myCars=new Array("Saab","Volvo","BMW"); • var myCars=["Saab","Volvo","BMW"]; Computer Science & Engineering

  6. ARRAY OBJECT • Array Object Properties Ex: var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Original length: " + fruits.length); Computer Science & Engineering

  7. ARRAY OBJECT • Array Object Methods Computer Science & Engineering

  8. DATE OBJECT • Date Object: The Date object is used to work with dates and times. • Date objects are created with new Date(). • There are four ways of instantiating a date: var d = new Date();var d = new Date(milliseconds);var d = new Date(dateString);var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); Computer Science & Engineering

  9. DATE OBJECT • Date Object Methods Computer Science & Engineering

  10. DATE OBJECT • Date Object Methods Computer Science & Engineering

  11. MATH OBJECT • The Math object allows you to perform mathematical tasks. • Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it. • Ex: var x = Math.PI; // Returns PI var y = Math.sqrt(16); // Returns the square root of 16 Computer Science & Engineering

  12. MATH OBJECT • Math Object Methods Computer Science & Engineering

  13. STRING OBJECT • String: • The String object is used to manipulate a stored piece of text. • String objects are created with new String(). • Syntax var txt = new String(string); Computer Science & Engineering

  14. MATH OBJECT • String Object Methods Computer Science & Engineering

  15. FORM OBJECT • Form: • The Form object represents an HTML form. • For each instance of a <form> tag in an HTML document, a Form object is created. • Form Object Methods Computer Science & Engineering

  16. FORM OBJECT • Form Object Properties Computer Science & Engineering

  17. FORM OBJECT • Form elements Collection • The elements collection returns an array containing each element in the form. • Syntax • formObject.elements[].property. Computer Science & Engineering

  18. FORM OBJECT EX: <form id="myForm">Firstname: <input id="fname" type="text" value="Mickey" />Lastname: <input id="lname" type="text" value="Mouse" /><input id="sub" type="button" value="Submit" /> </form><p>Get the value of all the elements in the form:<br /><script type="text/javascript">var x=document.getElementById("myForm");for (var i=0;i<x.length;i++)  {  document.write(x.elements[i].value);  document.write("<br />");  }</script></p> Computer Science & Engineering

  19. FORM OBJECT • Button Object: The Button object represents a button in an HTML form. • For each instance of an <input type="button"> tag in an HTML form, a Button object is created. • You can access a button by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  20. FORM OBJECT • Button Object Properties Computer Science & Engineering

  21. FORM OBJECT • Button Object Methods Computer Science & Engineering

  22. FORM OBJECT • Select Object • The Select object represents a dropdown list in an HTML form. • For each instance of an HTML <select> tag in a form, a Select object is created. • You can access a Select object by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  23. FORM OBJECT • Select Object Properties Computer Science & Engineering

  24. FORM OBJECT • Select Object Methods Computer Science & Engineering

  25. FORM OBJECT • Radio Object • The Radio object represents a radio button in an HTML form. • For each instance of an <input type="radio"> tag in an HTML form, a Radio object is created. • You can access a radio object by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  26. FORM OBJECT • Radio Object Properties Computer Science & Engineering

  27. FORM OBJECT • Radio Object Methods Computer Science & Engineering

  28. FORM OBJECT • Text Object • The Text object represents a text-input field in an HTML form. • For each instance of an <input type="text"> tag in an HTML form, a Text object is created. • You can access a text-input field by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  29. FORM OBJECT • Text Object Properties Computer Science & Engineering

  30. FORM OBJECT • Text Object Methods Ex: <script type="text/javascript"> function setFocus() { document.getElementById('text1').focus() } function loseFocus()  {  document.getElementById('text1').blur() } </script> Computer Science & Engineering