JAVA SCRIPT OBJECTS & DOM BY A.CATHREEN GRACIAMARY

INTRODUCTION TO JAVA SCRIPT OBJECTS Java Script is an object-oriented language. It facilitates objects to be defined and used in the documents. Java script objects have a container to contain object relationship. There are 2 main types of java script objects. They are : 1. Language Objects. 2. Navigator Objects.

INTRODUCTION TO DOCUMENT OBJECT MODEL A Document object represents the HTML Document that is displayed in that window. The way a document content is accessed and modified is called the Document Object Model ,Or DOM. The objects are arranged in a hierarchy.

DOCUMENT OBJECT The java script document object is the container for all HTML HEAD and BODY objects associated within the HTML tags of an HTML document. Properties: bgColor,fgColor,linkColor,etc ., are specified in the body tag. Method: write()-add data to a document. ex: document.write(“This is an example for document object”);

EVENT HANDLING Events are actions that occur on the web page, something the user does. An event is the action which triggers an event handler. Syntax: <tag attribute1 attribute2 onEventName=“javascript code;”> Ex: <a href=“ ” onMouseOver=“popupfunc();”>

Named Java Script Event Handlers: onClick onDblClick. onDragDrop. onFocus. onKeyDown. onKeyPress. onKeyUp. onMouseDown onMouseMove onResize onSubmit onUnload onLoad onMouseUp

FORM OBJECT We can place button, text, or other UI(user interface)object within the confines of a form. The objects are as follows: Button objects. Select object. Checkbox object. Radio object. Text object. Textarea object. Password object.

Form Syntax: <form [NAME=“formname”] [ACTION = “serverURL”] [METHOD = GET|POST] [TARGET= “windowName”] [onSubmit=“methodname”] > Ex: <FORM NAME=“f1” ACTION=http://www.amjaincollege.edu/job/application METHOD=POST OnSubmit=“alert(‘Data Submitted’)” >

<INPUT TYPE=“button |submit|reset” [NAME=“objname”] BUTTON OBJECTS: Syntax: <INPUT TYPE=“button |submit|reset” [NAME=“objname”] [VALUE=“labeltext”] [onClick=“method name”]> Javascript has 3 button objects: Button: It is a generic button that you need to add code. Submit: It is a specialized version ,default action is to submit the form. Reset: It is used to reset the values of all controls within a form.

Select object It is a drop-down list or selection list box. Syntax: <SELECT [NAME=“objname”] [SIZE=“numbervisible”] [MULTIPLE] [onBlur|onChange|onFocus=“methodname”]> <OPTION VALUE=“optionvalue” [SELECTED] > display text</OPTION> <OPTION VALUE=“optionvalue” [SELECTED] > display text</OPTION> </SELECT>

CHECK BOX & RADIO OBJECT: RADIO BUTTON This element allows the user to specify a yes/no or true/false value by clicking the check box control. We can choose more than one checkbox. Syntax: <INPUT TYPE=“checkbox” [NAME=“objname”] [VALUE=“value”] [CHECKED] onClick=“methname”] > [displaytext] Radio buttons are a set of mutually exclusive controls, such that if one radio button is selected, all other buttons in the set become unselected. Syntax: <INPUT TYPE=“checkbox” [NAME=“groupname”] [VALUE=“value”] [CHECKED] onClick=“methname”] > [displaytext]

TEXT & TEXT AREA OBJECT: TEXT OBJECT: TEXT AREA OBJECT This object is used to get data from the user. It allows single-line of data. Syntax: <INPUT TYPE=“text” [NAME=“objname”] [VALUE=“value”] [SIZE=size] [MAXLENGTH=size] [onBlur|onChange|onFocus|onSelect=“methname”]> It allows user to enter multiple lines of text . Syntax: <TEXTAREA NAME=“obname” ROWS=“number” COLS=“number” [onBlur|onChange|onFocus|onSelect=“methname”]> displaytext </TEXTAREA>

PASSWORD OBJECT The only difference between the text and password is that all the character entered into password object are displayed as asterisks(*). Syntax: <INPUT TYPE=“password” [NAME=“objname”] [VALUE=“defaultPassword”] [SIZE=integer]>

Browser,Navigator & screen Object Java script has the capability to identify the properties of the browser object. Properties of Navigator Object: appName – give the current browser. appVersion-gives the browser Version. appCodeName-gives the code name of browser. Platform-gives the platform.

Properties of Screen Object: Width-gives the width of the screen. Height-gives the height of the screen. Avail Width- gives the available width of the screen. Avail height- gives the available height of the screen. Color depth-gives the color depth of the screen.