LOGO Document Object Model (DOM)Document Object Model (DOM) Computer Science & Engineering

LOGO 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. csehui.wordpress.comComputer Science & Engineering window even tframescreenhistorydocumentlocationnavigator form document anchorimage appletlayer classlink elementplug-in embebstyle IDtag button reset check boxselect hiddensubmit passwordtext radiotextarea

LOGO CREATING OBJECTS  Define the function: function ObjectName(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; … this.method1=functionName1; this.method2=functionName2; … } csehui.wordpress.comComputer Science & Engineering

LOGO 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(); csehui.wordpress.comComputer Science & Engineering

LOGO 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"]; csehui.wordpress.comComputer Science & Engineering

LOGO ARRAY OBJECT  Array Object Properties Ex: var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Original length: " + fruits.length); csehui.wordpress.comComputer Science & Engineering

LOGO ARRAY OBJECT  Array Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO 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); csehui.wordpress.comComputer Science & Engineering

LOGO DATE OBJECT  Date Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO DATE OBJECT  Date Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO 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 csehui.wordpress.comComputer Science & Engineering

LOGO MATH OBJECT  Math Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO 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); csehui.wordpress.comComputer Science & Engineering

LOGO MATH OBJECT  String Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Form:  The Form object represents an HTML form.  For each instance of a tag in an HTML document, a Form object is created.  Form Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Form Object Properties csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Form elements Collection  The elements collection returns an array containing each element in the form.  Syntax  formObject.elements[].property. csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT EX: Firstname: Lastname: Get the value of all the elements in the form: var x=document.getElementById("myForm"); for (var i=0;i "); } csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Button Object: The Button object represents a button in an HTML form.  For each instance of an 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(). csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Button Object Properties csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Button Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Select Object  The Select object represents a dropdown list in an HTML form.  For each instance of an HTML 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(). csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Select Object Properties csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Select Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Radio Object  The Radio object represents a radio button in an HTML form.  For each instance of an 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(). csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Radio Object Properties csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Radio Object Methods csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Text Object  The Text object represents a text-input field in an HTML form.  For each instance of an 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(). csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Text Object Properties csehui.wordpress.comComputer Science & Engineering

LOGO FORM OBJECT  Text Object Methods Ex: function setFocus() { document.getElementById('text1').focus() } function loseFocus() { document.getElementById('text1').blur() } csehui.wordpress.comComputer Science & Engineering