JavaScript - More Examples

HTML/ASP

Executed Code

Window object
The window object is the highest level object, and can be assumed (if it is left off) that it refers to the current document. The main methods are:

· alert(msg) - display an alert message with a message.
· back() - go back one page.
· close(-n) - close the window.
· confirm(msg) - display a confirmation window. The return value is true or false (de-pending on what the user selects.
· find(searchstr, [matchCase, [searchUpwards]]) - finds a string (searchstr) in the docu-ment. The matchcase defines whether the search should be case sensitive, and the searchUpwards option defines whether the search should be upwards in the document.
· forward() - go forward one page.
· home() - go the users home page.
· length() - number of displayed frames.
· name() - the name of the window.
· open(URL, windowname [, options]) - open another window.
· print() - print the current window.
· prompt(msg, default reply) - display a prompt window.
· stop() - stop downloading data

<a href="javascript:window.close();"> Close window</a>

Close window

<a href="javascript:window.print();"> Print window</a>

Print window

<script type="text/javascript">
alert("Hello World!")
</script>

History object
Often the user requires to go back to a previous page. The history object contains several methods, such as:

· back() - go back on page.
· forward() - go forward one page.
· go(-n) - go back n pages.

The following gives an example using these methods applied to the history object:

<a href="Javascript:history.back()">Back </a>

Back

<a href="Javascript:history.forward()">Forward</a>

Forward

<a href="Javascript:history.go(-2)">Go back two pages</a>

Go back two pages

Document properties.
The document object has several properties which can be used to display its properties. The with statement allows an object to be specified and the properties referenced to it. For example in the following example, the properties defined are document.title, document.byColor, document.fgColor, and so on.

<script>

document.write("Title of this page: <B>");
document.write(title + "</B>");
document.write("<BR>Bk color: <B>");
document.write(bgColor + "</B>");
document.write("<BR>Fg color: <B>");
document.write(fgColor + "</B>");
document.write("<BR>Link color: <B>");
document.write(linkColor + "</B>");
document.write("<BR>Visited color: <B>");
document.write(vlinkColor + "</B>");
document.write("<BR>Links: <B>");
document.write(links + "</B>");
document.write("<BR>Modified: <B>");
document.write(lastModified + "</B>");
document.write("<BR>URL: <B>");
document.write(URL+ "</B>");
document.write("<BR>Referrer: <B>");
document.write(referrer + "</B>");
document.write("<BR>Domain: <B>");
document.write(domain + "</B>");
</script>

Date and time
The Date object contains several methods, such as:

· getDate() - get current date. Returns a value between 1 and 31.
· getDay() - get current day. Returns a value of between 0 (Sunday) and 6 (Saturday).
· getFullYear() - get current year.
· getHours() - get current hours. Returns a value between 1 and 23.
· getMillisecond() - get current milliseconds. Returns a value between 0 and 999.
· getMinutes() - get current minutes. Returns a value between 0 and 59.
· getMonth() - get current month. Return a value between 0 (Jan) and 11 (Dec).
· getSeconds() - get current seconds. Returns a value between 0 and 59.
· getTime() - get current time. Returns a value of the number of seconds since 1 January 1970.
· getTimezoneOffset() - get current time zone. Returns a values between -720 and 720, based on the number of minutes away from GMT.
· getYear() - get the year. Two digit year from between 1900 and 1999, else a four digit year value.
· toString() - convert the number of seconds from 1 January 1970 into a string date format.

The following examples use the toGMTString(), getMonth(), and getYear() methods:

<script language="JavaScript">
var dat=new Date();
document.write("<BR>Current date: " +dat.getDate());
document.write("<BR>Current day: " + dat.getDay() );
document.write("<BR>Current year:" + dat.getFullYear() );
document.write("<BR>Current hours: " + dat.getHours() );
document.write("<BR>Milliseconds: " + dat.getMilliseconds());
document.write("<BR>Minutes: " + dat.getMinutes());
document.write("<BR>Month:" + dat.getMonth());
document.write("<BR>Seconds:" + dat.getSeconds());
document.write("<BR>Seconds since 1/1/70:" + dat.getTime() );
document.write("<BR>Time zone offset: " + dat.getTimezoneOffset() );
document.write("<BR>Year: " + dat.getYear() );
</script>

<script>
var dat=new Date(),
mon=["Jan","Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
document.write("Month is ");
document.write(dat.getMonth());
document.write(" and the name of the month is "
document.write(mon[dat.getMonth()]);
</script>

String object
Methods are applied to object. An example JavaScript object is String. Typical methods in-clude:

· big(). Make text large
· blink(). Make text blink
· charAt(char). Find a character in a string
· fontcolor(color). Set font color
· fontsize(size). Set font size
· italics(). Make italic
· link(URL). Make a link
· small(). Make font small
· sub(). Make font subscript
· toLowerCase(). Convert to lowercase
· toUpperCase(). Convert to uppercase

<script language="JavaScript">
var txt1 = new String("Hello");
var txt2 = new String(" World");
var txt3 = new String(" CNDS page");document.write("<BR>Large:" + txt1.big() + txt2.big());
document.write("<BR> Small:" + txt1.small() + txt2.small());
document.write("<BR> Lowercase:" + txt1.toLowerCase());
document.write("<BR> Uppercase:" + txt1.toUpperCase());
document.write("<BR> Italic:" + txt1.italics());
document.write("<BR> Size (1):" + txt1.fontsize("1"));
document.write("<BR> Size (2):" + txt1.fontsize("2"));
document.write("<BR> Size (3):" + txt1.fontsize("3"));
document.write("<BR> Size (4):" + txt1.fontsize("4"));
document.write("<BR> Green:" + txt1.fontcolor("green") );
document.write("<BR> Red:" + txt1.fontcolor("red"));
document.write("<BR> Blink:" + txt1.blink());document.write("<BR>Subscript:" + txt1 + txt2.sub());
document.write("<BR> Link:" + txt3.link("cnds.html"));

</script>

Navagator object
The Navigator object contains several properties, which can be usage in determining the system, such as:

· appVersion . Returns the client browser version.
· cookieEnabled . Returns a true if cookies or enabled, else a false.
· cpuClass. Returns the CPU type of the client competer. A PC returns a 'x86'.
· onLine. Returns the on-line state.
· userAgent. Returns full browser details, such as operating system, platform and brand.

Functions called from events
An important operation in JavaScript is to call functions from events. In the next example, a pull-down menu is used, with the onChange event. When the user select a different option in the pull down menu, the chback() function is called, with the newly selected option. In this case the background color of the document is changed. In this case the background color of the document is changed.

<script>
function chback(selObj)
{
document.bgColor=
selObj.options[selObj.selectedIndex].value
}
</script>
<form>
<select name="select" onChange="chback(this)">
<option selected>Bg Color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
<option value="Orange">Orange</option>
<option value="Cyan">Cyan</option>
<option value="Magenta">Magenta</option>
</select>
</form>

Functions called from events
The following will open a related window when the related hypertext link is selected:

<script>
function chback1()
{
alert("Hello");
}
</script>

<a href="jscript_examples.htm#t2" onClick= "chback1()">Show alert</A>

Show alert

<script>
function chback2(page)
{
winnew=window.open(page,"Test","scrollbars=yes,width=310, height=200");
}
</script>

<a href="jscript_examples.htm#t1" onClick="chback2('message.html')">Message (Main)</A>
<br><a href="jscript_examples.htm#t1" onClick="chback2('message_books.html')">Message (Books)</A>
<br><a href="jscript_examples.htm#t1" onClick="chback2('message_cnds.html')">Message (CNDS)</A> <br><a href="jscript_examples.htm#t1" onClick="chback2('message_mypics.html')">Message (Pics)</A>
<br><a href="jscript_examples.htm#t1" onClick="chback2('message_research.html')">Message (Research)</A>

Message (Main)
Message (Books)
Message (CNDS)
Message (My Pics)
Message (Research)

<script>
function openWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>
<img border="0" src="design_files/message.gif"
width="159" height="25" onMouseDown="openWindow('message.html',
'','toolbar=yes,menubar=yes,scrollbars=yes,
resizable=yes, width=310,height=200')" align="left">