SlideShare a Scribd company logo
2
Most read
3
Most read
4
Most read
for more Https://www.ThesisScientist.com
UNIT 2
INTRODUCTION TO CLIENT SIDE PROGRAMMING
Client-side programming can be done to provide dynamism in the Web page at client’s
side. For the purpose it can use various languages such as VBScript, JavaScript. We
have used JavaScript here.
2.1 INTRODUCTION TO JAVASCRIPT
1 JavaScript was designed to add interactivity to HTML pages.
2 It is a scripting language.
3 A scripting language is a lightweight programming language.
4 A JavaScript consists of lines of executable computer code.
5 It is usually embedded directly into HTML pages.
6 It is an interpreted language (means that scripts execute without preliminary
compilation).
7 Everyone can use JavaScript without purchasing a license.
2.2 JAVASCRIPT WORKS
It gives HTML designers a programming tool.
It can put dynamic text into an HTML page.
It can react to events.
It can read and write HTML elements.
It can be used to validate data.
It can be used to detect the visitor’s browser.
It can be used to create cookies.
FOR EXAMPLE
<HTML>.
<BODY>
<SCRIPT TYPE=”text/javascript”>
for more Https://www.ThesisScientist.com
Document.write(“Hello World !”)
</SCRIPT>
</BODY>
</HTML>
2.3 OBJECT , PROPERTIES, AND METHOD IN JAVASCRIPT
Each object has certain properties, and methods associated with it. Properties are
things that describe the object, and they include sub – objects. For example, is a person
is considered to be an object, then hair color, height, etc. are its properties or sub –
objects.
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!”).
2.4 JAVASCRIPT MODEL
There are several objects supported by JavaScript. Some of these are explained as
follows:
WINDOW OBJECT
The Window object is the top level object in JavaScript, and contains in itself several
other objects, such as "document", "history" etc.
Events
Events handlers supported by a Window object may be:
Events Description
onblur Code is executed when the window loses focus.
for more Https://www.ThesisScientist.com
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:
 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.
Window also has several properties you can set, such as location and status.
FRAME OBJECT
The frame object is a browser object of JavaScript used for accessing HTML frames. The
user can use frames array to access all frames within a window. Using the indexing
concept, users can access the frames array.
for more Https://www.ThesisScientist.com
 The frames array index always starts with zero and not 1.
 The frame object is actually a child of the window object. These objects are
created automatically by the browser and help users to control loading and
accessing of frames.
 The properties and methods of frame object are similar to that of Window
object in JavaScript.
 The frame object does not support close() method that is supported by
window object.
 Using the <FRAMESET> document creates frame objects and each frame
created is thus a property of window object.
Properties of frame object:
 frames
 name
 length
 parent
 self
frames:
The frames property of frame object denotes a collection or array of frames in a window
and also in a frame set.
self:
As the name implies, the self property of frames object denotes the current frame.
Using self property, the user can access properties of the current frame window.
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.
for more Https://www.ThesisScientist.com
Methods of frame object:
 blur()
 focus()
 setInterval()
 clearInterval()
 setTimeout(expression, milliseconds)
 clearTimeout(timeout)
blur():
blur() method of frame object removes focus from the object.
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.
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.
Navigator object
The Navigator object of JavaScript returns useful information about the visitor's
browser and system.
for more Https://www.ThesisScientist.com
The navigator object has three methods:
 javaEnabled specifies whether Java is enabled
 preference lets you use a signed script to get or set various user preferences
(JavaScript 1.2 and later)
 taintEnabled specifies whether data contamination is enabled (JavaScript 1.1
only)
Properties and Methods supported by Navigator Object:
Property/Method Description
appCodeName Represents the code name of the browser
appName Refers to the official browser name
appVersion Refers to the version information of the browser
javaEnabled()
Function that tests to see that Java is supported in the
browser
language Refers to the language of the browser
mimeTypes
Refers to an array of MimeType objects that contains all
the MIME types that the browser supports
platform
A string representing the platform on which the browser
is running
plugins
Refers to an array of Plugin objects that contains all the
plug-ins installed in the browser
plugins.refresh() Checks for any newly installed plug-ins
preference()
Allows reading and setting of various user preferences in
the browser
taintEnabled() Tests to see whether data-tainting is enabled
userAgent String that represents the user-agent header
DOCUMENT OBJECT
Document is the parent object of numerous other objects, such as "images", "forms" etc.
Properties of Document Object:
for more Https://www.ThesisScientist.com
alinkColor String, Specifies the ALINK attribute.
anchors[] Array of anchor objects, contains an entry
for each anchor in the document.
applets[] Array of applet objects, Contains an entry
for each applet in the document.
bgColor String, Specifies the BGCOLOR attribute
cookie String, Specifies a cookie.
domain String, Specifies the domain name of the
server that served a document.
embeds[] Array, Contains an entry for each plug-in
in the document.
fgColor String, Specifies the TEXT attribute.
forms[] Array of Form objects, Contains an entry
for each form in the document
images[] Array of Image objects, contains an entry
for each image in the document.
lastModified String, Specifies the date the document
was last modified.
layers Array of Layer objects, contains an entry
for each layer within the document.
linkColor String, Specifies the LINK attribute.
links[] Array of Link objects, contains an entry
for each link in the document.
referrer String, Specifies the URL of the calling
document.
title String, Specifies the contents of the
TITLE tag.
for more Https://www.ThesisScientist.com
URL String, Specifies the complete URL of a
document.
vlinkColor String, Specifies the VLINK attribute.
Methods of Document Object:
captureEvents() Loads the previous URL in the history list.
close() Closes an output stream and forces data to display.
getSelection() Returns a string containing the text of the current
selection
handleEvent() Invokes the handler for the specified event.
open() Opens a stream to collect the output of write or writeln
methods.
releaseEvents() Sets the window or document to release
captured events of the specified type,
sending the event to objects further along
the event hierarchy.
routeEvent() Passes a captured event along the normal
event hierarchy.
write() Writes one or more HTML expressions to a
document in the specified window.
writeln() Writes one or more HTML expressions to a
document in the specified window and follows
them with a newline character
3 EVENTS
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:
for more Https://www.ThesisScientist.com
 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
1 onLoad AND onUnLoad
These events are triggered when the user enters or leaves the page. The onLoad event is
often used to check the visitor’s browser type and browser version, and load its proper
version of the web page based on the information. Both the events are also often sued to
deal with cookies that should be set when a user enters or leaves a page.
2 onChange And onBlur
These events are often used in combination with validation of form fields.
3 onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.
onMouseOver And onMouseOut
These events are often used to create “animated” buttons.
4 JAVASCRIPT POPUP BOXES
JavaScript supported 3 types of popup boxes as explained below:
1 ALERT BOX
An alert box is often used if the programmer want to make sure information comes
through to the user. When an alert box pops up, the user will have to click “OK” to
proceed.
Example:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
for more Https://www.ThesisScientist.com
<!--
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:
2 CONFIRM BOX
A confir2m box is often used if the programmer want the user to verify or accept
something. When a confirm box pops up, the user will have to click either “OK” or
“Cancel” to proceed. If the user clicks “Cancel”, the box returns false.
Example:
for more Https://www.ThesisScientist.com
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function disp_confirm()
{
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:
3 PROMPT BOX
for more Https://www.ThesisScientist.com
A prompt box is often used if the programmer want the user to input a value before
entering a page. When a prompt box pops up, the user will have to click either “OK” or
“Cancel” to proceed after entering an input value. If the user clicks “OK”, the box returns
the input value. If the user clicks “Cancel” the box returns null.
Example:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
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:
for more Https://www.ThesisScientist.com
Hello Harry Potter! How are you today?
5 FORM HANDLING
JavaScript can be embedded into the HTML document by using <SCRIPT> tag to provide
dynamic feature to various forms. For example, consider the following user – login form
to verify the user name and password before redirecting to an authenticated Web page:
Redirect.html
<HTML>
<HEAD>
<TITLE>Login Form</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
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 !!”);
}
}
for more Https://www.ThesisScientist.com
//-->
</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
<HTML>
<HEAD>
<TITLE>WELCOME</TITLE>
</HEAD>
<BODY BGCOLOR = "AQUA">
<P><CENTER>
"Congratulations!!! You have logged in successfully!!!”
</CENTER></P>
</BODY>
</HTML>
6 COOKIE
A cookie is used to identify a user.
“A COOKIE IS A SMALL FILE THAT THE SERVER EMBEDS ON THE USER’S
COMPUTER. EACH TIME THE SAME COMPUTER REQUESTS A PAGE WITH A
BROWSER, IT WILL SEND THE COOKIE TOO.”
6.1 CREATING A COOKIE
The “Response.Cookies” command is used to create cookies. For example, to create a
cookies named ”firstname” and assigning the value “Ashwin” to it, following command
may be used:
for more Https://www.ThesisScientist.com
< %
Response . Cookies(“firstname”) = “Ashwin”
% >
It is also possible to assign properties to a cookie, like setting a date when the cookie
should expire:
< %
Response . Cookies(“firstname”) = “Ashwin”
Response . Cookies(“firstname”) . Expires = # May 10, 2002 #
% >

More Related Content

PPT
Learn javascript easy steps
PPTX
Web-Dev Portfolio
PPT
ExtJs Basic Part-1
PPTX
Lab#1 - Front End Development
Learn javascript easy steps
Web-Dev Portfolio
ExtJs Basic Part-1
Lab#1 - Front End Development

What's hot (20)

PPT
Java script -23jan2015
PPTX
2. overview of c#
PDF
JavaScript 101
PPT
Java script
DOCX
Rhino Mocks
PPS
CS101- Introduction to Computing- Lecture 32
ODP
Creating a Java EE 7 Websocket Chat Application
PDF
Spring 3: What's New
PPTX
Introduction to JavaScript Basics.
DOCX
Java script basics
PPTX
Java script basics
PPT
Complex Data Binding
PDF
Javascript Best Practices
PDF
jQuery -Chapter 2 - Selectors and Events
PPTX
WinRT Holy COw
PPTX
Sencha / ExtJS : Object Oriented JavaScript
PPTX
Introduction to Javascript By Satyen
PPT
JavaScript
PPTX
An Introduction to JavaScript
PPTX
Presentation
Java script -23jan2015
2. overview of c#
JavaScript 101
Java script
Rhino Mocks
CS101- Introduction to Computing- Lecture 32
Creating a Java EE 7 Websocket Chat Application
Spring 3: What's New
Introduction to JavaScript Basics.
Java script basics
Java script basics
Complex Data Binding
Javascript Best Practices
jQuery -Chapter 2 - Selectors and Events
WinRT Holy COw
Sencha / ExtJS : Object Oriented JavaScript
Introduction to Javascript By Satyen
JavaScript
An Introduction to JavaScript
Presentation
Ad

Similar to INTRODUCTION TO CLIENT SIDE PROGRAMMING (20)

PPTX
12. session 12 java script objects
PDF
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
PDF
Java script browser objects 1
 
PPTX
Javascript
PPT
Reversing JavaScript
PPTX
Cordova training : Day 4 - Advanced Javascript
PPT
Easy javascript
PPTX
JavaScript
PPT
lecture 6 javascript event and event handling.ppt
PPT
Week8
PPT
Applied component i unit 2
PPT
13488117.ppt
PPT
13488117.ppt
PDF
Advanced guide to develop ajax applications using dojo
PPTX
Java scriptforjavadev part2a
PPTX
Advanced JavaScript
PPT
jQuery with javascript training by Technnovation Labs
PDF
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
PDF
Java script
PPTX
Awesomeness of JavaScript…almost
12. session 12 java script objects
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
Java script browser objects 1
 
Javascript
Reversing JavaScript
Cordova training : Day 4 - Advanced Javascript
Easy javascript
JavaScript
lecture 6 javascript event and event handling.ppt
Week8
Applied component i unit 2
13488117.ppt
13488117.ppt
Advanced guide to develop ajax applications using dojo
Java scriptforjavadev part2a
Advanced JavaScript
jQuery with javascript training by Technnovation Labs
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
Java script
Awesomeness of JavaScript…almost
Ad

More from Prof Ansari (20)

PDF
Sci Hub New Domain
PDF
Sci Hub cc Not Working
PDF
basics of computer network
PDF
JAVA INTRODUCTION
PDF
Project Evaluation and Estimation in Software Development
PDF
Stepwise Project planning in software development
PDF
Database and Math Relations
PDF
Normalisation in Database management System (DBMS)
PDF
Entity-Relationship Data Model in DBMS
PDF
A Detail Database Architecture
PDF
INTRODUCTION TO Database Management System (DBMS)
PDF
Master thesis on Vehicular Ad hoc Networks (VANET)
PDF
Master Thesis on Vehicular Ad-hoc Network (VANET)
PDF
INTERFACING WITH INTEL 8251A (USART)
PDF
HOST AND NETWORK SECURITY by ThesisScientist.com
PDF
SYSTEM NETWORK ADMINISTRATIONS GOALS and TIPS
PDF
INTRODUCTION TO VISUAL BASICS
PDF
introduction to Blogging ppt
PDF
INTRODUCTION TO SOFTWARE ENGINEERING
PDF
Introduction to E-commerce
Sci Hub New Domain
Sci Hub cc Not Working
basics of computer network
JAVA INTRODUCTION
Project Evaluation and Estimation in Software Development
Stepwise Project planning in software development
Database and Math Relations
Normalisation in Database management System (DBMS)
Entity-Relationship Data Model in DBMS
A Detail Database Architecture
INTRODUCTION TO Database Management System (DBMS)
Master thesis on Vehicular Ad hoc Networks (VANET)
Master Thesis on Vehicular Ad-hoc Network (VANET)
INTERFACING WITH INTEL 8251A (USART)
HOST AND NETWORK SECURITY by ThesisScientist.com
SYSTEM NETWORK ADMINISTRATIONS GOALS and TIPS
INTRODUCTION TO VISUAL BASICS
introduction to Blogging ppt
INTRODUCTION TO SOFTWARE ENGINEERING
Introduction to E-commerce

Recently uploaded (20)

PPTX
Internet of Things (IOT) - A guide to understanding
PPTX
Foundation to blockchain - A guide to Blockchain Tech
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PDF
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PPT
Project quality management in manufacturing
PDF
composite construction of structures.pdf
PDF
R24 SURVEYING LAB MANUAL for civil enggi
PDF
Well-logging-methods_new................
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
PPTX
Artificial Intelligence
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
PPTX
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
PDF
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
PPTX
web development for engineering and engineering
PPT
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...
DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
PPTX
Sustainable Sites - Green Building Construction
PPTX
bas. eng. economics group 4 presentation 1.pptx
Internet of Things (IOT) - A guide to understanding
Foundation to blockchain - A guide to Blockchain Tech
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
Project quality management in manufacturing
composite construction of structures.pdf
R24 SURVEYING LAB MANUAL for civil enggi
Well-logging-methods_new................
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Artificial Intelligence
UNIT-1 - COAL BASED THERMAL POWER PLANTS
CYBER-CRIMES AND SECURITY A guide to understanding
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
BMEC211 - INTRODUCTION TO MECHATRONICS-1.pdf
web development for engineering and engineering
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
Sustainable Sites - Green Building Construction
bas. eng. economics group 4 presentation 1.pptx

INTRODUCTION TO CLIENT SIDE PROGRAMMING

  • 1. for more Https://www.ThesisScientist.com UNIT 2 INTRODUCTION TO CLIENT SIDE PROGRAMMING Client-side programming can be done to provide dynamism in the Web page at client’s side. For the purpose it can use various languages such as VBScript, JavaScript. We have used JavaScript here. 2.1 INTRODUCTION TO JAVASCRIPT 1 JavaScript was designed to add interactivity to HTML pages. 2 It is a scripting language. 3 A scripting language is a lightweight programming language. 4 A JavaScript consists of lines of executable computer code. 5 It is usually embedded directly into HTML pages. 6 It is an interpreted language (means that scripts execute without preliminary compilation). 7 Everyone can use JavaScript without purchasing a license. 2.2 JAVASCRIPT WORKS It gives HTML designers a programming tool. It can put dynamic text into an HTML page. It can react to events. It can read and write HTML elements. It can be used to validate data. It can be used to detect the visitor’s browser. It can be used to create cookies. FOR EXAMPLE <HTML>. <BODY> <SCRIPT TYPE=”text/javascript”>
  • 2. for more Https://www.ThesisScientist.com Document.write(“Hello World !”) </SCRIPT> </BODY> </HTML> 2.3 OBJECT , PROPERTIES, AND METHOD IN JAVASCRIPT Each object has certain properties, and methods associated with it. Properties are things that describe the object, and they include sub – objects. For example, is a person is considered to be an object, then hair color, height, etc. are its properties or sub – objects. 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!”). 2.4 JAVASCRIPT MODEL There are several objects supported by JavaScript. Some of these are explained as follows: WINDOW OBJECT The Window object is the top level object in JavaScript, and contains in itself several other objects, such as "document", "history" etc. Events Events handlers supported by a Window object may be: Events Description onblur Code is executed when the window loses focus.
  • 3. for more Https://www.ThesisScientist.com 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:  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. Window also has several properties you can set, such as location and status. FRAME OBJECT The frame object is a browser object of JavaScript used for accessing HTML frames. The user can use frames array to access all frames within a window. Using the indexing concept, users can access the frames array.
  • 4. for more Https://www.ThesisScientist.com  The frames array index always starts with zero and not 1.  The frame object is actually a child of the window object. These objects are created automatically by the browser and help users to control loading and accessing of frames.  The properties and methods of frame object are similar to that of Window object in JavaScript.  The frame object does not support close() method that is supported by window object.  Using the <FRAMESET> document creates frame objects and each frame created is thus a property of window object. Properties of frame object:  frames  name  length  parent  self frames: The frames property of frame object denotes a collection or array of frames in a window and also in a frame set. self: As the name implies, the self property of frames object denotes the current frame. Using self property, the user can access properties of the current frame window. 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.
  • 5. for more Https://www.ThesisScientist.com Methods of frame object:  blur()  focus()  setInterval()  clearInterval()  setTimeout(expression, milliseconds)  clearTimeout(timeout) blur(): blur() method of frame object removes focus from the object. 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. 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. Navigator object The Navigator object of JavaScript returns useful information about the visitor's browser and system.
  • 6. for more Https://www.ThesisScientist.com The navigator object has three methods:  javaEnabled specifies whether Java is enabled  preference lets you use a signed script to get or set various user preferences (JavaScript 1.2 and later)  taintEnabled specifies whether data contamination is enabled (JavaScript 1.1 only) Properties and Methods supported by Navigator Object: Property/Method Description appCodeName Represents the code name of the browser appName Refers to the official browser name appVersion Refers to the version information of the browser javaEnabled() Function that tests to see that Java is supported in the browser language Refers to the language of the browser mimeTypes Refers to an array of MimeType objects that contains all the MIME types that the browser supports platform A string representing the platform on which the browser is running plugins Refers to an array of Plugin objects that contains all the plug-ins installed in the browser plugins.refresh() Checks for any newly installed plug-ins preference() Allows reading and setting of various user preferences in the browser taintEnabled() Tests to see whether data-tainting is enabled userAgent String that represents the user-agent header DOCUMENT OBJECT Document is the parent object of numerous other objects, such as "images", "forms" etc. Properties of Document Object:
  • 7. for more Https://www.ThesisScientist.com alinkColor String, Specifies the ALINK attribute. anchors[] Array of anchor objects, contains an entry for each anchor in the document. applets[] Array of applet objects, Contains an entry for each applet in the document. bgColor String, Specifies the BGCOLOR attribute cookie String, Specifies a cookie. domain String, Specifies the domain name of the server that served a document. embeds[] Array, Contains an entry for each plug-in in the document. fgColor String, Specifies the TEXT attribute. forms[] Array of Form objects, Contains an entry for each form in the document images[] Array of Image objects, contains an entry for each image in the document. lastModified String, Specifies the date the document was last modified. layers Array of Layer objects, contains an entry for each layer within the document. linkColor String, Specifies the LINK attribute. links[] Array of Link objects, contains an entry for each link in the document. referrer String, Specifies the URL of the calling document. title String, Specifies the contents of the TITLE tag.
  • 8. for more Https://www.ThesisScientist.com URL String, Specifies the complete URL of a document. vlinkColor String, Specifies the VLINK attribute. Methods of Document Object: captureEvents() Loads the previous URL in the history list. close() Closes an output stream and forces data to display. getSelection() Returns a string containing the text of the current selection handleEvent() Invokes the handler for the specified event. open() Opens a stream to collect the output of write or writeln methods. releaseEvents() Sets the window or document to release captured events of the specified type, sending the event to objects further along the event hierarchy. routeEvent() Passes a captured event along the normal event hierarchy. write() Writes one or more HTML expressions to a document in the specified window. writeln() Writes one or more HTML expressions to a document in the specified window and follows them with a newline character 3 EVENTS 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:
  • 9. for more Https://www.ThesisScientist.com  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 1 onLoad AND onUnLoad These events are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitor’s browser type and browser version, and load its proper version of the web page based on the information. Both the events are also often sued to deal with cookies that should be set when a user enters or leaves a page. 2 onChange And onBlur These events are often used in combination with validation of form fields. 3 onSubmit The onSubmit event is used to validate ALL form fields before submitting it. onMouseOver And onMouseOut These events are often used to create “animated” buttons. 4 JAVASCRIPT POPUP BOXES JavaScript supported 3 types of popup boxes as explained below: 1 ALERT BOX An alert box is often used if the programmer want to make sure information comes through to the user. When an alert box pops up, the user will have to click “OK” to proceed. Example: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">
  • 10. for more Https://www.ThesisScientist.com <!-- 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: 2 CONFIRM BOX A confir2m box is often used if the programmer want the user to verify or accept something. When a confirm box pops up, the user will have to click either “OK” or “Cancel” to proceed. If the user clicks “Cancel”, the box returns false. Example:
  • 11. for more Https://www.ThesisScientist.com <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function disp_confirm() { 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: 3 PROMPT BOX
  • 12. for more Https://www.ThesisScientist.com A prompt box is often used if the programmer want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value. If the user clicks “OK”, the box returns the input value. If the user clicks “Cancel” the box returns null. Example: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- 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:
  • 13. for more Https://www.ThesisScientist.com Hello Harry Potter! How are you today? 5 FORM HANDLING JavaScript can be embedded into the HTML document by using <SCRIPT> tag to provide dynamic feature to various forms. For example, consider the following user – login form to verify the user name and password before redirecting to an authenticated Web page: Redirect.html <HTML> <HEAD> <TITLE>Login Form</TITLE> <SCRIPT LANGUAGE = "JavaScript"> <!-- 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 !!”); } }
  • 14. for more Https://www.ThesisScientist.com //--> </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 <HTML> <HEAD> <TITLE>WELCOME</TITLE> </HEAD> <BODY BGCOLOR = "AQUA"> <P><CENTER> "Congratulations!!! You have logged in successfully!!!” </CENTER></P> </BODY> </HTML> 6 COOKIE A cookie is used to identify a user. “A COOKIE IS A SMALL FILE THAT THE SERVER EMBEDS ON THE USER’S COMPUTER. EACH TIME THE SAME COMPUTER REQUESTS A PAGE WITH A BROWSER, IT WILL SEND THE COOKIE TOO.” 6.1 CREATING A COOKIE The “Response.Cookies” command is used to create cookies. For example, to create a cookies named ”firstname” and assigning the value “Ashwin” to it, following command may be used:
  • 15. for more Https://www.ThesisScientist.com < % Response . Cookies(“firstname”) = “Ashwin” % > It is also possible to assign properties to a cookie, like setting a date when the cookie should expire: < % Response . Cookies(“firstname”) = “Ashwin” Response . Cookies(“firstname”) . Expires = # May 10, 2002 # % >