Download presentation
Presentation is loading. Please wait.
1
LOGO Document Object Model (DOM)Document Object Model (DOM) Computer Science & Engineering
2
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
3
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
4
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
5
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
6
LOGO ARRAY OBJECT Array Object Properties Ex: var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Original length: " + fruits.length); csehui.wordpress.comComputer Science & Engineering
7
LOGO ARRAY OBJECT Array Object Methods csehui.wordpress.comComputer Science & Engineering
8
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
9
LOGO DATE OBJECT Date Object Methods csehui.wordpress.comComputer Science & Engineering
10
LOGO DATE OBJECT Date Object Methods csehui.wordpress.comComputer Science & Engineering
11
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
12
LOGO MATH OBJECT Math Object Methods csehui.wordpress.comComputer Science & Engineering
13
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
14
LOGO MATH OBJECT String Object Methods csehui.wordpress.comComputer Science & Engineering
15
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
16
LOGO FORM OBJECT Form Object Properties csehui.wordpress.comComputer Science & Engineering
17
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
18
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
19
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
20
LOGO FORM OBJECT Button Object Properties csehui.wordpress.comComputer Science & Engineering
21
LOGO FORM OBJECT Button Object Methods csehui.wordpress.comComputer Science & Engineering
22
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
23
LOGO FORM OBJECT Select Object Properties csehui.wordpress.comComputer Science & Engineering
24
LOGO FORM OBJECT Select Object Methods csehui.wordpress.comComputer Science & Engineering
25
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
26
LOGO FORM OBJECT Radio Object Properties csehui.wordpress.comComputer Science & Engineering
27
LOGO FORM OBJECT Radio Object Methods csehui.wordpress.comComputer Science & Engineering
28
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
29
LOGO FORM OBJECT Text Object Properties csehui.wordpress.comComputer Science & Engineering
30
LOGO FORM OBJECT Text Object Methods Ex: function setFocus() { document.getElementById('text1').focus() } function loseFocus() { document.getElementById('text1').blur() } csehui.wordpress.comComputer Science & Engineering
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.