Introduction to Objects are a natural way of thinking about the - PowerPoint PPT Presentation

Introduction to

 Objects are a natural way of thinking about the world and about scripts that manipulate XHTML documents.  JavaScript uses objects to perform many tasks and therefore is referred to as an object-based programming language ( not object-oriented).  Objects have attributes and exhibit behaviors.

 Array  Boolean  Date  Math  Number  String  RegExp  Global

 Window  Navigator  Screen  History  Location

 Window  The top-level object; has properties that apply to the entire window. There is also a window object for each "child window" in a frame document.  Navigator  Screen  History  Location

 http://www.w3schools.com/jsref/obj_window .asp

 Window  Navigator  Has properties for the name and version of the Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client.  Screen  History  Location

 Window  Navigator  Screen  The screen object contains information about the visitor's screen.  History  Location

 Window  Navigator  Screen  History  The history object contains the URLs visited by the user (within a browser window).  The history object is part of the window object and is accessed through the window.history property.  Location

 Examples:  // goes to the URL the user visited three clicks ago in // the current window ▪ history.go(-3)  // causes window2 to go back one item in its window // (or session) history: ▪ window2.history.back()

 Window  Navigator  Screen  History  Location  The location object contains information about the current URL.  The location object is part of the window object and is accessed through the window.location property.

 Examples:  // sets the URL of the current window to the Netscape home page: ▪ window.location.href=“ http://home.netscape.com/ ” or simply ▪ window.location=“ http://home.netscape.com/ ”  // sets the URL of a frame named frame2 to the Sun home page: ▪ parent.frame2.location.href="http://www.sun.com/"

 A piece of text that can be the target of a hypertext link.  If an anchor object is also a link object, the object has entries in both the anchors and links arrays.  Example: Define an anchor for the text "Welcome to JavaScript". ▪ <A NAME="javascript_intro"><H2>Welcome to JavaScript</H2></A>  Example: If the preceding anchor is in a file called intro.htm , a link in another file could define a jump to the anchor as follows: ▪ <A HREF="intro.html#javascript_intro">Introduction</A>

 A pushbutton on an HTML form.  Cannot be customized (can only change its length)  Properties  name reflects the NAME attribute  value reflects the VALUE attribute  Methods  click  Event handlers  onClick

 A checkbox on an HTML form  A toggle switch that lets the user set a value on or off  Properties  checked lets you programatically check a checkbox  defaultChecked reflects the CHECKED attribute  name reflects the NAME attribute  value reflects the VALUE attribute

 Methods: click  Event handlers: onClick  Property of: form  Example: The following example displays a group of four checkboxes that all appear checked by default. <B>Specify your music preferences (check all that apply):</B>  <BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B  <BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz  <BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues  <BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age 

 Example: FileName: toUpper.htm <SCRIPT> function convertField(field) { if (document.form1.convertUpper.checked) { field.value = field.value.toUpperCase()} } function convertAllFields() { document.form1.lastName.value = document.form1.lastName.value.toUpperCase() document.form1.firstName.value = document.form1.firstName.value.toUpperCase() } </SCRIPT> <FORM NAME="form1"> <B>Last name:</B> <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> <BR><B>First name:</B> <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> <P><INPUT TYPE="checkBox" NAME="convertUpper" onClick="if (this.checked) {convertAllFields()}"> Convert fields to upper case </FORM>

 Contains information on the current document (e.g., title, last modified, color), and provides methods for displaying HTML output to the user.  To use a document object's properties and methods:  1. document.propertyName  2. document.methodName(parameters)

 Properties  alinkColor reflects the ALINK attribute  anchors is an array reflecting all the anchors in a document  bgColor reflects the BGCOLOR attribute  cookie specifies a cookie  fgColor reflects the TEXT attribute  forms is an array reflecting all the forms in a document  lastModified reflects the date a document was last modified  linkColor reflects the LINK attribute  links is an array reflecting all the links in a document  location reflects the complete URL of a document  referrer reflects the URL of the calling document  title reflects the contents of the <TITLE> tag  vlinkColor reflects the VLINK attribute

 Methods  clear, close, open, write, writeln  Event handlers  None. The onLoad and onUnload event handlers are specified in the <BODY> tag but are actually event handlers for the window object.  Property of  Window (or Frame) object  Examples:  document.fgColor = "#ff0000"  document.form1.controlname = ...

 Lets users input text and make choices from form objects such as checkboxes, radio buttons, and selection lists.  Can also be used to post data to a server

 The forms array  2 ways of referencing forms ▪ by using the forms array ▪ by using the form names  form array contains an entry for each form object (<FORM> tag) in a document in source order.  e.g., if a document contains three forms, these forms are reflected as document.forms[0], document.forms[1], and document.forms[2].  To use the forms array: ▪ 1. document.forms[index] ▪ 2. document.forms.length

 Properties  action reflects the ACTION attribute  elements is an array reflecting all the elements in a form  encoding reflects the ENCTYPE attribute  length reflects the number of elements on a form  method reflects the METHOD attribute  target reflects the TARGET attribute  length reflects the number of forms in a document (for forms array)  Methods: submit  Event handlers: onSubmit  Property of: document

 A text object that is suppressed from form display on an HTML form. A hidden object is used for passing name/value pairs when a form submits.  Typically used with PHP scripts to pass special data between the browser and the server  Value is reset when the document is reloaded (unlike other form elements)

 Properties  name reflects the NAME attribute  value reflects the current value of the hidden object  Methods  None.  Event handlers  None.  Property of  form

 Image array called document.images  created for all images defined by <IMG>  each is an Image object  use: document.images[0], document.images[1], etc.  can dynamically change the content of graphics ▪ document.images[0].src = “http://xyz.com/1.gif”;

 A piece of text or an image identified as a hypertext link. When the user clicks the link text, the link hypertext reference is loaded into its target window.  Each link object is a location object and has the same properties as a location object.  If a link object is also an anchor object, the object has entries in both the anchors and links arrays.

 Properties hash specifies an anchor name in the URL  host specifies the hostname:port portion of the URL  hostname specifies the host and domain name, or IP address, of a  network host href specifies the entire URL  pathname specifies the url-path portion of the URL  port specifies the communications port that the server uses for  communications protocol specifies the beginning of the URL, including the colon  search specifies a query  target reflects the TARGET attribute  length reflects the number of links in a document (for link array) 

 Methods: None.  Event handlers: onClick, onMouseOver  Property of: document  Examples // creates a hypertext link to an anchor named numbers in the file  DOC3.HTML in the window window2. If window2 does not exist, it is created. <A HREF=doc3.html#numbers TARGET="window2">Numbers</A>  // takes the user back x entries in the history list:  ▪ <A HREF=" javascript :history.go(-1 * x)">Click here</A>