Professional Documents
Culture Documents
Methods are things that the object can do or things that can be done to the
object. One method associated with the document object is write(). For
example, the document.write() method writes HTML to a Web page. The
argument to be passed to write() method is a string of text that will be written.
For example, document.write(“Hello World!”).
Events
Events handlers supported by a Window object may be:
Events Description
onblur Code is executed when the window loses focus.
onerror Code is executed when a JavaScript error occurs.
onfocus Code is executed when the focus is set on the current
window.
onload Code is executed when the page has finished loading.
onresize Code is executed when the window is resized.
onunload Code is executed when the page is unloaded (visitor
leaves the page).
For example,
<body onload="dothis()">
window.onload=dothis //inside your script
The window object has numerous useful methods, including the following:
Client – Side Programming
• open and close: Opens and closes a browser window; you can
specify the size of the window, its content, and whether it has a button bar,
location field, and other "chrome" attributes.
• alert: Displays an Alert dialog box with a message.
• confirm: Displays a Confirm dialog box with OK and Cancel buttons.
• prompt: Displays a Prompt dialog box with a text field for entering a
value.
• blur and focus: Removes focus from, or gives focus to a window.
• scrollTo: Scrolls a window to a specified coordinate.
• setInterval: Evaluates an expression or calls a function each time
the specified period elapses.
• setTimeout: Evaluates an expression or calls a function once after
the specified period elapses.
name:
The name property of frame object denotes the name of the frame. The method
of denoting the name attribute is performed by using the name attribute of
the <frame>tag.
length:
The frames array has all the frames present within a window and
the length property of the frame object denotes the length of the frames array
or gives the number of frames present in a window or a frames array.
parent:
As the name implies, the parent property of frames object denotes the parent
frame of the current frame.
focus():
focus() method of frame object gives focus to the object.
setInterval():
setInterval() method of frame object is used to call a function of JavaScript or to
evaluate an expression after the time interval specified in arguments has
expired. The time interval in arguments is always specified in milliseconds.
clearInterval():
clearInterval method of frame object is used to cancel the corresponding
definedsetInterval method. This is written by referencing the setInterval method
using its ID or variable.
Client – Side Programming
setTimeout(expression, milliseconds):
setTimeout method of frame object can be used to execute any function, or
access any method or property after a specified time interval given to this
method as argument.
clearTimeout():
clearTimeout method of frame object is used to clear a specified
setTimeoutmethod. This is written by referencing the setTimeout method using
its ID or variable.
The Navigator object of JavaScript returns useful information about the visitor's
browser and system.
The navigator object has three methods:
Property/Metho
Description
d
appCodeName Represents the code name of the browser
appName Refers to the official browser name
appVersion Refers to the version information of the browser
Function that tests to see that Java is supported in the
javaEnabled()
browser
language Refers to the language of the browser
Refers to an array of MimeType objects that contains all
mimeTypes
the MIME types that the browser supports
A string representing the platform on which the
platform
browser is running
Refers to an array of Plugin objects that contains all the
plugins
plug-ins installed in the browser
plugins.refresh() Checks for any newly installed plug-ins
Allows reading and setting of various user preferences
preference()
in the browser
Client – Side Programming
6.7 Events
Client – Side Programming
Events are actions that can be detected by JavaScript. Every element on a web
page has certain events which can trigger JavaScript functions. For example,
one can use the onClick event on a button element to indicate that a function
will run when a user clicks on the button.
Examples of events:
A mouse click
A web page or an image loading
Mouse over a hot spot on the web page.
Selecting an input box in an HTML form
Submitting an HTML form
A keystroke
6.7.3 onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.
<HTML>
Client – Side Programming
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function disp_alert()
{
alert("I am an alert box!!");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" onClick="disp_alert()" VALUE="Display alert box" />
</FORM>
</BODY>
</HTML>
Output:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function disp_confirm()
{
Client – Side Programming
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
} //-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" onClick="disp_confirm()" VALUE="Display a confirm
box" />
</FORM>
</BODY></HTML>
Output:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
Client – Side Programming
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
alert("Hello " + name + "! How are you today?");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" onclick="disp_prompt()" VALUE="Display a prompt
box" />
</FORM>
</BODY>
</HTML>
Output:
Redirect.html
<HTML>
<HEAD>
<TITLE>Login Form</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
Client – Side Programming
<!--
function passuser(form)
{
if(form.id.value.length>=5)
{
if(form.id.value=="student")
{
if(form.passwd.value=="college")
{
location = "next.html";
}
else
{
alert("Invalid Password !!");
}
}
else
{
alert ("Invalid UserName!!");
}
}
else
{
alert(“Username should be more than 4 characters !!”);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<PRE>
<P>Username: <INPUT TYPE = "text" NAME = "id"></P>
<P>Password: <INPUT TYPE = "password" NAME = "passwd"></P>
<CENTER><INPUT TYPE = "button" VALUE = "login" onClick =
"passuser(this.form)">
</CENTER>
</PRE>
</FORM>
</BODY>
</HTML>
next.html
Client – Side Programming
<HTML>
<HEAD>
<TITLE>WELCOME</TITLE>
</HEAD>
<BODY BGCOLOR = "AQUA">
<P><CENTER>
"Congratulations!!! You have logged in successfully!!!”
</CENTER></P>
</BODY>
</HTML>