Javascript Objects

JavaScript Objects

Hierarchy Objects
Object / Properties / Methods / Event Handlers
Window / defaultStatus
frames
opener
parent
scroll
self
status
top
window / alert
blur
close
confirm
focus
open
prompt
clearTimeout
setTimeout / onLoad
onUnload
onBlur
onFocus
Frame / defaultStatus
frames
opener
parent
scroll
self
status
top
window / alert
blur
close
confirm
focus
open
prompt
clearTimeout
setTimeout / none (The onLoad and onUnload event handlers belong to the Window object)
Location / hash
host
hostname
href
pathname
por
protocol
search / reload
replace / none
History / length
forward
go / back / none
Navigator / appCodeName
appName
appVersion
mimeTypes
plugins
userAgent / javaEnabled / none
document / alinkColor
anchors
applets
area
bgColor
cookie
fgColor
forms
images
lastModified
linkColor
links
location
referrer
title
vlinkColor / clear
close
open
write
writeln / none (the onLoad and onUnload event handlers belong to the Window object.
image / border
complete
height
hspace
lowsrc
name
src
vspace
width / none / none
form / action
elements
encoding
FileUpload
method
name
target / submit
reset / onSubmit
onReset
text / defaultValue
name
type
value / focus
blur
select / onBlur
onCharge
onFocus
onSelect
Built-in Objects
Array / length / concat
join
reverse
sort xx / none
Date / none / getDate
getDay
getHours
getMinutes
getMonth
getSeconds
getTime
getTimeZoneoffset
getYear
parse
prototype
setDate
setHours
setMinutes
setMonth
setSeconds
setTime
setYear
toGMTString
toLocaleString
UTC / none
String / length
prototype / anchor
big
blink
bold
charAt
fixed
fontColor
fontSize
indexOf
italics
lastIndexOf
link
small
split
strike
sub
substring
sup
toLowerCase
toUpperCase / Window

Window Object

The Window object is the top level object in the JavaScript hierarchy.

The Window object represents a browser window.

A Window object is created automatically with every instance of a <body> or <frameset> tag.

Back

History Object

The History object is automatically created by the JavaScript runtime engine and consists of an array of URLs. These URLs are the URLs the user has visited within a browser window.

The History object is part of the Window object and is accessed through the window.history property.

The length property returns the number of elements in the history list.

<html>

<body>

document.write(history.length);

</script>

</body>

</html>

The back() method loads the previous URL in the history list.

This is the same as clicking the Back button and history.go(-1).

Syntax

history.back()

Example

The following example creates a back-button on a page:

<html>
<head>
<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>

The forward() method loads the next URL in the history list.

This is the same as clicking the Forward button and history.go(1).

Syntax

history.forward()

Example

The following example creates a forward-button on a page:

<html>
<head>
<script type="text/javascript">
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()" />
</body>
</html>

The go() method loads a specific page in the history list.

Syntax

history.go(number|URL)

Example

The following example loads the previous page in the history list:

<html>
<head>
<script type="text/javascript">
function goBack()
{
window.history.go(-1)
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>

Back

Navigator Object

The Navigator object is automatically created by the JavaScript runtime engine and contains information about the client browser.

<html>

<body>

var x = navigator;

document.write("CodeName=" + x.appCodeName);

document.write("<br />");

document.write("MinorVersion=" + x.appMinorVersion);

document.write("<br />");

document.write("Name=" + x.appName);

document.write("<br />");

document.write("Version=" + x.appVersion);

document.write("<br />");

document.write("CookieEnabled=" + x.cookieEnabled);

document.write("<br />");

document.write("CPUClass=" + x.cpuClass);

document.write("<br />");

document.write("OnLine=" + x.onLine);

document.write("<br />");

document.write("Platform=" + x.platform);

document.write("<br />");

document.write("UA=" + x.userAgent);

document.write("<br />");

document.write("BrowserLanguage=" + x.browserLanguage);

document.write("<br />");

document.write("SystemLanguage=" + x.systemLanguage);

document.write("<br />");

document.write("UserLanguage=" + x.userLanguage);

</script>

</body>

</html>

Alert user depending on browser:

<head>

function detectBrowser()

{

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") & (version>=4))

{

alert("Your browser is good enough!");

}

else

{

alert("It's time to upgrade your browser!");

}

</script>

</head>

</body>

</html>

Back

Array

Create an Array

The following code creates an Array object called myCars:

var myCars=new Array()

There are two ways of adding values to an array (you can add as many values as you need to define as many variables you require).

var myCars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

You could also pass an integer argument to control the array's size:

var myCars=new Array(3);
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

Note: If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string.

Access an Array

You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.

The following code line:

document.write(myCars[0]);

will result in the following output:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index number:

myCars[0]="Opel";

Now, the following code line:

document.write(myCars[0]);

will result in the following output:

Opel

Sample:

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

for (i=0;i<mycars.length;i++)

{

document.write(mycars[i] + "<br />");

}

</script>

For…in statement:

var x;

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

for (x in mycars)

{

document.write(mycars[x] + "<br />");

}

</script>

Join two Arrays-concat

<html>

<body>

var arr = new Array(3);

arr[0] = "Jani";

arr[1] = "Tove";

arr[2] = "Hege";

var arr2 = new Array(3);

arr2[0] = "John";

arr2[1] = "Andy";

arr2[2] = "Wendy";

document.write(arr.concat(arr2));

</script</body</html>

Literal Array Sort:

var arr = new Array(6);

arr[0] = "Jani";

arr[1] = "Hege";

arr[2] = "Stale";

arr[3] = "KaiJim";

arr[4] = "Borge";

arr[5] = "Tove";

document.write(arr + "<br />");

document.write(arr.sort());

</script>

Back

Date Object

Use the following syntax to create a Date object

var ObjectName = new Date(parameters)

where ObjectName is the name of the object

new is the object construction keyword

paremeters are optional and can

define a specific date

The Date object you create is a snapshot of an exact millisecond in time. It contains information on both date and time. It is important to understand that once the Date object is created, the date and time that it contains does not change unless acted on by one of its many methods.

If the parameters are left out when you create a Date object as shown below, the object then contains the date and time that your computer clock is at.

var today = new Date()

You can also create a Date object for a specific date and time. You will want to do this to be able determine specific information on a particular date such as what day of the week it falls on and to allow you to do date math such as calculating the number of days between two dates. The 5 ways to create a Date object for a specific date and time are shown below:

new Date("Month dd, yyyy hh:mm:ss")

new Date("Month dd, yyyy")

new Date(yy,mm,dd,hh,mm,ss)

new Date(yy,mm,dd)

new Date(milliseconds)

Here is a example of creating a Date object for each of the 5 ways:

var myDateTime = new Date("May 1, 1999 12:00:00")

var myDateTime = new Date("May 1, 1999")

var myDateTime = new Date(99,04,01,12,00,00)

var myDateTime = new Date(99,04,01)

var myDateTime = new Date(100)

The last example probably looks a little strange to you. It is important to realize that all time in JavaScript is referenced to midnight, January 1, 1970, Greenwich Mean Time. As stated before, this elapsed time is measured in milliseconds. Therefore this example sets the time to 100 milliseconds past midnight GMT, January 1, 1970.

The Date object does not have any properties but it has 21 methods, listed in the following table. Use the first 8 methods to extract specific date and time information from the object. The next 8 methods allow you to change specific information in the Date object. The last 5 methods are rather specialized.

Date Object Methods
Method / Description
getYear() / Year minus 1900
getMonth() / Month of Year (Jan = 0)
getDate() / Date within the month
getDay() / Day of week (sun = 0)
getHours() / Hour of 24-hr day
getMinutes() / Minutes of hour
getSeconds() / Seconds within minute
getTime() / Milliseconds since 1/1/70
setYear() / Year minus 1900
setMonth() / Month of Year (Jan = 0)
setDate() / Date within the month
setDay() / Day of week (sun = 0)
setHours() / Hour of 24-hr day
setMinutes() / Minutes of hour
setSeconds() / Seconds within minute
setTime() / Milliseconds since 1/1/70
getTimezoneOffset() / Minutes offset from GMT
toGMTString() / String in universal format
getLocalString() / String in system's format
parse("string") / String to milliseconds
UTC(value) / Date from GMT

use setFullYear() to set a specific date:

var d = new Date();

d.setFullYear(1992,10,3);

document.write(d);

</script>

Back