Object demo

Objects in JavaScript

Objects are important components of the JavaScript language. Objects are abstract entities which are characterized by their properties, their methods and their contexts (that is, some objects are parts of larger objects).

For example, consider a single point on a cartesian plane. This abstract entity has two important properties associated with it, the value of the x-coordinate and the value of the y-coordinate. Also, there is a property which we might call quadrant which would indicate that the point in the figure is in quadrant 1. Properties need not be numeric. For example, there is a boolean property which we might call atOrigin which would be true if and only if the point was at location (0,0) on the plane. A point might have methods associated with it. Perhaps we would define a method distanceToOrigin() which would report the length of a line from the origin to our point.

There is no built-in "point" object in JavaScript and the definition of our own new objects is beyond the scope of this course. However, some objects are pre-defined in JavaScript. For example, strings are JavaScript objects.

s = "This is a string"

The string object has a value — the concatenated characters inside the quotes — and it also has many properties and methods. For example, a simple property of a string is its length:

s.length

This string has a length of 16 since there are 16 characters inside the quotes. The string object has many methods assoociated with it. Recall that methods look like functions inside an object context, for example,

s = s.toUpperCase()

will cause the letters in s to all be converted to uppercase. A string object is actually an array. An array is a collection of items, each of which has the same type, which can be referred to as a whole (such as our entire string s) or individually by using an "index." For example, the first character in the string, s, is referred to as,

s.charAt(0)

Notice that we begin counting from 0, not from 1, when referring to the items in the array. Thus, s.charAt(4) refers to the fifth character in the string, counting from 0. The last character in a string is at position length-1. Since we will discuss string objects further during lab, we will instead consider other important objects in the domain of the browser.

Objects often have properties which are arrays. For example, the JavaScript document object (described below) has an images array as one of its properties. Arrays other than strings can be accessed by using square brackets. For example, to refer to the third entry in an array called theArray, we would use the following syntax:

theArray[2]

By examining the hierarchy of objects in the JavaScript environment, we see that there is a multileveled organization. For example, window objects contain document objects, document objects contain form objects, etc. Below we present a limited discussion of some of the more common or interesting JavaScript objects. This is not meant to serve as a substitute for a good reference — no attempt to be complete has been made.

Screen object

Examples of Properties: 

    colorDepth
    height
    width



    




Window object

Examples of Properties/Methods: 

    document
    history

        back()
        forward()
        length
        go(n)

    location

        host
        href
        protocol

    Math

        abs(x)      -- absolute value |x|
        acos(x)
        asin(x)
        atan(x)
        atan2(x,y)  -- counterclockwise angle, in radians, between 
                       the positive x-axis and point (x,y)
        ceil(x)     -- rounds up
        cos(x)
        E
        exp(x) 
        floor(x)    -- rounds down
        log(x)
        LN10
        LN2
        LOG10E
        LOG2E
        max(x,y)
        min(x,y) 
        PI
        pow(x,y)    -- returns x to the y power
        random()    -- pseudorandom number between 0.0 and 1.0
        round()     -- rounds to nearest integer
        sin()
        SQRT1_2
        SQRT2
        sqrt()
        tan() 

    name 
    open(url,name,features,replace)  -- complex method!
    setTimeout(code,delay)           -- waits delay milliseconds before 
                                        executing code
    status 



    




Document object

Examples of Properties/Methods: 

    anchors (array of objects)

        length
        name
        text (Navigator 4)

    bgColor

    forms (array of form objects)

        forms.length

    images (array of objects)
    lastModified (string)
    title
    write()
    writeln()



    




Form object

Examples of Properties: 

    action

    elements (array of element objects)

        elements.length

    name



    




Image object

Examples of Properties: 

    complete (boolean is it loaded yet?)
    height
    name
    src
    width



    




Element object

Examples of Properties: 

    form
    name
    type

    Text type:

        defaultValue
        value

    Checkbox type:

        checked
        defaultChecked
        value

    Radio type (array):

        checked
        defaultChecked
        value

    Select (menu) type:

        length  (for Select elements, length of options array)
        options (array)

            text
            value
            defaultSelected
            selected

        selectedIndex
        type

form, name=first


input, type=text name=one  



input, type=checkbox, name=two 

input, type=checkbox, name=three

Radio buttons are arrays:

input, type=radio, name=four input, type=radio, name=four input, type=radio, name=four

Form, name=examine