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>
Recommend
More recommend
