| JavaScript objects
Objects are things that are visible. People often describe objects things we
can touch, like chair and car but the real meaning of objects in programming
are things you see on your screen, like windows, frames, forms,
fields, etc. Object could have a Property or Method. Property
is an another object within an object. For example, Car is an object, Tire is
property of the car when it's party of the car but
Tire is another object when it's sitting by it self. Drive is not an object but
way of doing. Method is way of doing things like drive.
Now, we know what object.property.method are, but how does it apply to
javascript?.
Look this statement carefully and identify object, property, method:
window.document.write()
Window is an object, document is property, and write
is method. This is similar to car.tires.drive.
If we have just document.write() is object and method
similar to tire.spin.
We could have object.property without a method. For example,
document.formName.textBoxName.value.
Document is an object representing whole html page, form is another object, which is
the property of document and textBox is another object, which is the property of form.
Since we have some idea of what object is, we will discuss different types of objects
that are often used in javascript in detail.
String object
String is one of stand alone objects that takes string value.
For example, var cars = new car("Fox Wagon").
Creates string object containing the value "Fox Wagon".
Be carefull because car="Fox Wagon"
is not an string object. It's string literal. Java script temporarily
converts string literals to string objects so you can use string object methods for
string literals too. If you try to evaluate object string using
eval
function, it will not work because objects do not change in behaviour.
Length and Prototype
are two string object property available.
Length counts the number of characters in the string, for example
car.length will return 9 characters long.
Prototype creates more properties for the object.
Following are list of some string object methods available.
| Method |
Method Decriptions |
Method Example |
| Big(),Small(),Bold(), Italic(), Strike(), sub(), sup() |
Returns big, small, bold, italic, strike, subscript,
or superscript text format
|
var prog="This is is big() example"
document.write(prog.big())
Result:
|
| IndexOf(), lastIndexOf() |
Returns the position of specified
string or -1 if the string is not found.
lastIndexOf() start from right to left |
var prog="JavaScript is not hard"
var pos=prog.indexOf("h")
document.write("found h at: "+pos)
Result:
found h at: 18 |
| fixed() |
Displays a Teletype string format. |
document.write("This is teletype format".fixed()) |
| fontcolor(), fontsize() |
Returns a string in a specified font
color or size. |
var prog="Changes the font color"
document.write(prog.fontcolor('blue'))
Result:
|
| match() |
Returns specified value from string or null
if the value not found. |
var prog = "Do you see the example"
document.write(prog.match("see"))
returns:
see |
| toLowerCase(), toUpperCase() |
Converts strings to upper or lower
case | document.write("chang this to upper
case letters".toUpperCase())
returns: CHANG THIS TO UPPER CASE LETTERS |
| charAt(), charCodeAt() |
Returns
character at specified position and the other returns unicode
instead. |
var prog="What do you see"
document.write(prog.charAt("5"))
returns: d |
| blink() |
Returns blinking link. |
var prog="What do you see"
document.write(prog.blink())
returns: |
| link() |
Returns a string as a hyperlink | document.write("This web site".link("http://www.clik.to/program"))
returns:
|
| replace() |
Replaces specified character with specified
character. |
document.write("Replace him".replace("him","me"))
returns: Replace me |
| research() |
Returns number representing specified character or -1
if no match found. |
document.write("Character search".search("t"))
returns: 6 |
| substring() |
Returns a string starting specified position and contain
specified number of chars. Count starts at 0. |
var prog="Web Programmer/Developer"
document.write(prog.substring(3,14))
returns: Programmer |
Date object
The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties. It's easy to use the Date object and its methods to work with dates and times in your document.
To create a date object, the following syntax is used:
dateObjectName = new Date()
where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object. The following example explains the use of date object.
<html>
<body>
<script type="text/javascript">
var CDate = new Date()
document.write(CDate.getDate())
document.write("/")
document.write(CDate.getMonth()+1)
document.write("/")
document.write(CDate.getFullYear())
document.write("@")
document.write(CDate.getHours()+":")
document.write(CDate.getMinutes()+":"+CDate.getSeconds())
</script>
</body>
</html>
| The variable CDate is set to a date object.
Date() returns date object and has methods set(), get() and to
(). Set() initializes the date object with the specified value and get()
receives date value from the date object. To() converts date object to string
Here is the result of this sample:
|
The following example shows the use for set method to initialize date
object.
<html>
<body>
<script type="text/javascript">
var CDat = new Date()
CDat.setMonth("9")
CDat.setDate("11")
document.write(CDat.getDate()+"/"+CDat.getMonth())
</script>
</body>
</html> |
This example sets the date to 11 and the month to 9.
These value are kept in memory unless you change it.
Here is the result
|
The following example displays full date, with day name and month name.
<html>
<body>
<script type="text/javascript">
var dat=new Date()
var weekday=new Array("Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[dat.getDay()] + " ")
document.write(monthname[dat.getMonth()] + " ")
document.write(dat.getDate() + ", ")
document.write(dat.getFullYear())
</script>
</body>
</html>
|
In this example, we created two array of objects. One populated
with months of the year and the other with days of the week. We can display
the date in numbers using date object as we saw before.
We can also display the name of the month or the day using the date methods as an
index of the array. See array object.
Here is the result of this example:
|
The following are list of methods that can be used and description of it's value.
Date Object Methods
|
| Method |
Description |
| getYear() |
Returns the year in ## format. |
| getFullYear() |
Returns the year #### format. |
| getMonth() |
Returns the month of the year in ##. |
| getDate() |
Returns the date in ##. |
| getDay() |
Returns the day in # (0-6). |
| getHours() |
Returns the hour of 24-hr day |
| getMinutes() |
Returns the minutes of hour |
| getSeconds() |
Returns the seconds within the minute |
| getTime() |
Returns milliseconds since 1/1/1970. |
| getTimezoneOffset() |
Returns minutes offset from GMT |
| toGMTString() |
Returns string in universal format |
| getLocalString() |
Returns string in system's format |
| parse("string") |
Returns string to milliseconds |
| UTC(value) |
Returns date from GMT |
| Set Method | Description |
|---|
| setYear() |
Sets the year in ##. |
| setFullYear() |
Sets the year in ####. |
| setMonth() |
Sets the month of Year in ## |
| setDate() |
Sets the date within the month |
| setDay() |
Sets a day of week in # (0-6) |
| setHours() |
Sets an hour of 24-hr day |
| setMinutes() |
Sets the minutes of hour |
| setSeconds() |
Sets the seconds within minute |
| setTime() |
Sets milliseconds since 1970. |
Array Object
We saw array in the date example above. An array is collection of related data
that is contained within a variable. For example:
daysOfWeek = new Array
("Sunday", "Monday","Tuesday", "Wednesday", "Thursday","Friday", "Saturday")
is an array that stores days of the week.
Getting the data out of the array is just as easy. You refer to a particular
element of data like this:
daysOfWeek[n]
where n is the numeric position of the data element starting at 0. For instance
daysOfWeek[0] would yield Sunday. See variables
& arrays for more array examples.
Alert, Prompt, Confirm boxes   Window object
|
