JavaScript Objects and Events




Object References:
       *     objects, properties, and methods
       *     property references:
             -     objectName.propertyName, 
                   +      eg, document.title
             -     objectName["propertyName"], 
                   +      eg, document["title"]
                   +      associative array
             -     objectName[index]
                   +      eg, document.forms[0]
                   +      must be defined by index number
                   +      standard reflective objects in web pages, like forms, anchors,
                          etc., are indexed, but may also be declared with a name and
                          referenced either with an index or a name when so declared.
       *     method references:
             -     objectName.methodName([arguments])
                   +      parens required as distinguishing methods from properties
                   +      eg,
                          var today = new Date();
                          var year = today.getYear();
                   +      eg, setting month to April
                          today.setMonth(3);
       *     keyword this
             -     references current object
             -     eg, references to the form being currently defined:
                   alert(this.form)
       *     keyword with
             -     defines a default object reference
             -     with(objectName){
                   statements
                   ...
                   }
             -     eg,
                   x = "Richard";
                   with(x){
                   y=length;
                   z=toUpperCase();
                   }
       *     keyword typeof
             -     typeof function returns current type of a variable 
                   +      þnumberþ, 
                   +      þstringþ, 
                   +      þbooleanþ, 
                   +      þobjectþ, 
                   +      þfunctionþ, 
                   +      þundefinedþ
             -     eg, 
                   if (typeof x == þnumberþ) {/*stuff to do to a number*/}
                   else if(typeof x == þstringþ) {/*stuff to do to a string */} 
                   ...
       *     construct for...in
             -     interates a variable across all the properties of an object
             -     for(prop in objectName){
                   statements
                   ...
                   }
             -     eg
                   function displayProps(obj){
                          var output = "";
                          for (var prop in obj)
                                output += obj.name + "." + prop + " = " +
                                obj[prop] + "\n";
                          alert(output);
                   }

Common (Built-in) Objects
       *     String (covered earlier)
       *     Date (covered earlier)
       *     Array (covered earlier)
       *     Math
             -     Beware of rounding problems
                   Javascript has limited representation of fractions, pi, etc.
             -     Does not have to be instantiated for use
             -     Math properties provide mathematical constants
             -     Math methods provide a common library of math functions
             -     Properties
                   Math.E the natural logarithm base
                   Math.LOG10E the base 10 logarithm of e
                   Math.LOG2E the base 2 logarithm of e
                   Math.LN10 the natural logarithm of 10
                   Math.LN2 the natural logarithm of 2
                   Math.PI
                   Math.SQRT1_2 the square root of 1/2
                   Math.SQRT2 the square root of 2
             -     Methods
                   Math.abs(number) absolute value of number
                   Math.ceil(number) least integer ò number
                   Math.floor(number) greatest integer ó number
                   Math.max(numbx,numby) greatest of 2 arguments
                   Math.min(numbx,numby) least of 2 arguments
                   Math.random() returns a pseudo-random between 0 & 1
                   Math.round(number) rounds to nearest integer
             -     Methods (trig)
                   Math.cos(number) cosine
                   Math.sin(number) sine
                   Math.tan(number) tangent
                   Math.acos(number) arc cosine
                   Math.asin(number) arc sine
                   Math.atan(number) arc tangent
       *     Function
             -     Although treated as both a keyword and a common object, functions
                   are declared as an object instantiating the Function class, a string of
                   code to be treated as a function.

Standard Objects: The Window Hierarchy

       Window
       |
       +- Location
       +- History
       +- Frames
       +- Navigator
       |     |
       |     +- Plugin
       |     +- Mime-type
       |
       +- Document
             |
             +- Anchor
             +- Applet
             +- Link and Area
             +- Image
             +- Form
                   |
                   +- Button
                   +- Checkbox
                   +- FileUpload
                   +- Hidden
                   +- Password
                   +- Radio
                   +- Reset
                   +- Select
                   +- Submit
                   +- Text
                   +- Textarea

Window
       Window Properties: identity
             name (assigned when opened)
             opener (window that opened self)
             parent (active window when opened)
             self
             top (main browser window)
       Window Properties: contents
             frames (an array)
             length (of frames array)
             status (can be used to set the status message)
             defaultStatus (similarly sets the default "Document: Done" message)
       
       Window Class Method
             open(URL, winName, [, winFeatures] )
             eg.  newWindow = window.open("", "newWindow")
             URL will load window from URL
             winFeatures set to "yes", "no", or 1, 0
                   toolbar
                   location
                   directories
                   status
                   menubar
                   scrollbars (yes means auto)
                   resizable
                   copyhistory (duplicates session history for new win)
                   width (in pixels)
                   height (in pixels)
       
       Window Methods: User Communication
             alert(message) an alert box with message
             confirm(message) offers OK and CANCEL, returns true if OK, false if
                   CANCEL 
             prompt(message [,default])  prompts for input with default value offered,
                   returns input
       Window Methods: General
             blur() deactivate window, eg. myWindow.blur()
             close()
             focus() activate named window
             scroll(x,y) where x,y are axes coordinates (pixels) of new scroll position
       Window Methods: Timing
             setTimeout() delays execution of an expression:
                   timeoutId = setTimeout(expression, msec) eg
                   timerId = setTimeout("doIt();", 1000);// doit() executes after 1sec
             clearTimeout(timeoutId) stops timer
Location: Properties of current location
       location.href, complete URL, eg
             http://www.binghamton.edu:80/som/mine.exe#xxx?yyy
       location.protocol, eg http:
       location.host, eg www.binghamton.edu
       location.hostname, eg www.binghamton.edu:80
       location.port, eg 80
       location.pathname, eg /som/mine.exe
       location.hash, eg #xxx
       location.search, eg ?yyy 

History
       array of HREFs and URLs visited in a session
       may belong to a window or a frame
       Property
             length, number of elements
       Methods
             back(), previous URL in list
             forward(), next URL in list
             go(), relative jumps, 
                   eg, go(-2) or go(3), 
                   can also use URLs or titles, eg  go("Main Page");

Frames
       An array within a window or a frame
       Properties
             window.frames.length (number of frames contained in window)
             window.frames[0].frames.length (number of frames in frame[0])
       References
             window.frames[0].document.title (title of the document contained in
                   frame[0] of the window

Navigator
       Contains data about the browser
       Properties
             appCodeName, browser code name
             appName, browser name
             appVersion, browser version
             userAgent, browser-server user-agent header
       Methods
             javaEnabled(), returns boolean

mimeTypes
       An array of MIME types supported by loaded plugins
       Properties
             length, eg, navigator.mimeTypes.length
             description
             suffixes, default file suffix
             type, string containing mimetype name
             enabledPlugin, points to plugins array, eg
                   navigator.mimeTypes[0].enabledPlugin.name
       

Plugins
       An array of plugins currently loaded in browser
       Properties
             length, eg navigator.plugins.length
             name
             description
             filename, complete path
             length, number of mime types supported, eg
                   navigator.plugins[0].length
       A second dimension points to each mimetype supported, eg
             navigator.plugins[0][0].suffixes

Document
       Can be part of a window or a frame object, only one contained
       Properties
             alinkColor, activated links color
             anchors, array of anchor objects
             applets, array of Java Applet objects
             bgColor, background color
             cookie, current value of browser's cookie object
             embeds, array of embedded plugin objects
             fgColor
             forms, array of forms
             images, array of images
             lastModified, a date
             linkColor, unvisited links color
             links, array of links
             location, URL of document
             referrer, URL of referring document
             title
             vlinkColor, visited links color

             applets & embeds correspond to  and  HTML
                   that is defines Java Applets (beyond scope of this course).

       Methods
             write(), covered earlier
             writeln(), covered earlier
             clear(), erases a document's contents
             open(), open(["mime type"]), specifies different output stream for write()
                   and writeln(), eg,
                   outDoc = newWindow.document.open();
             close(), the currently open stream is closed

Anchors
       array of anchors
       referenced by name, eg document.anchorName
             or index, eg, document.anchors[0]
       properties
             length, document.anchors.length

Links
       An array containing document HREF links
       Properties
             length, number of links in page
             target, contains entire HREF string
             other properties the same as location, but arrayed

Areas
       Same as Links but array of AREA HREF links
       Uses area name as defined, eg document.areaname.target

Images
       An array containing document image data
       document.images[index].property or document.imagename.property
       Properties
             border, see HTML syntax
             height
             hspace
             lowsrc
             name
             src
             vspace
             width
             complete, boolean indicator of loading status
             length, number of images in document

Forms
       An array containing document forms
       Refer by index or name, eg
             document.forms[0].action
             document.myform.action
       Properties
             length, number of forms, eg, document.forms.length
             elements, array of form component elements
             length, number of elements, eg, document.forms[0].length
             action, see HTML FORM ACTION
             method, see HTML FORM METHOD
             target, see HTML FORM TARGET
             encoding, see HTML FORM ENCTYPE

Button
       Properties
             name
             type, "button"
             value
       Methods
             click(), simulates a click

Checkbox
       Properties
             checked, boolean
             defaultChecked, boolean
             name
             type,"checkbox"
             value
       Methods
             click()

FileUpload
       Properties
             name
             type, "file"
             value

Hidden
       Properties
             name
             type, "hidden"
             value

Password
       Properties
             name
             type, "password"
             value
       Methods
             blur()
             focus()
             select()

Radio
       Properties
             name
             length, number of buttons with this name
             type, "radio"
             checked, boolean
             defaultChecked, boolean
             value
       Methods
             click()

Reset
       Properties
             name
             type, "reset"
             value
       Methods
             click()

Select
       Properties
             length, see HTML SELECT SIZE
             name
             selectedIndex, first currently selected option
             type, either "select-one" or "select-multiple"
             options, an array, see HTML SELECT OPTION
                   options.length, number of options
                   options[0].defaultSelected, boolean
                   options[0].selected, boolean
                   options[0].text
                   options[0].value
       Methods
             blur()
             focus()

Submit
       Properties
             name
             type, "submit"
             value
       Methods
             click()

Text
       Properties
             defaultValue
             name
             type, "text"
             value
       Methods
             blur()
             focus()
             select()

Textarea
       same as Text

Events
       Defined in HTML, eg,
             
       General displayed object events
             onFocus, bringing an object to the front
                   Java simulates with focus() methods
             onBlur, placing an object in the background
                   Java simulates with blur() methods
             onChange, object has been changed AND blurs
             onMouseOver, mouse cursor moves onto an object
             onMouseOut, mouse cursor moves off of an object
       Document events
             see HTML BODY
             onLoad, document load completes
             onUnload, document is closed
             onError, image or document loading error,
                   see HTML IMAGE
             onAbort, user keys STOP button
       Form events
             onClick, in button & checkbox definitions
                   simulated by click() methods
             onSelect, text is selected within an text or textarea object
                   Java simulates with select()
             onReset, pressing a reset object type (button)