chapter 6 wd 4th sem cse

8/6/2019 Chapter 6 WD 4th SEM CSE

1/13

Chapter 6: Client-Side Programming

6.1 Introduction to Client-Side Programming

Client-side programming can be done to provide dynamism in the Web page atclients side. For the purpose it can use various languages such as VBScript,JavaScript. We have used JavaScript here.

6.2 Introduction to JavaScript

JavaScript was designed to add interactivity to HTML pages.It is a scripting language.A scripting language is a lightweight programming language.A JavaScript consists of lines of executable computer code.It is usually embedded directly into HTML pages.

It is an interpreted language (means that scripts execute without preliminarycompilation).Everyone can use JavaScript without purchasing a license.

6.3 What a JavaScript Can do?

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 visitors browser.It can be used to create cookies.

6.4 How to put?

.Document.write(Hello World !)

6.5 Objects, Properties and Methods in JavaScript

Each object has certain properties, and methods associated with it.Properties are things that describe the object, and they include sub objects.


2/13

Client Side Programming

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 theobject. One method associated with the document object is write(). Forexample, 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!).

6.5.1 JavaScript Object Model

There are several objects supported by JavaScript. Some of these are explainedas follows:

6.5.1.1 Window Object

The Window object is the top level object in JavaScript, and contains initself 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.

onerror Code is executed when a JavaScript error occurs.

onfocus Code is executed when the focus is set on the currentwindow.

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 (visitorleaves the page).

For example,window.onload=dothis //inside your script

The window object has numerous useful methods, including the following:


3/13


open and close: Opens and closes a browser window; you canspecify 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 timethe specified period elapses. setTimeout: Evaluates an expression or calls a function once afterthe specified period elapses.

Window also has several properties you can set, suchas location and status.

6.5.1.2 Frame Object

The frame object is a browser object of JavaScript used for accessingHTML frames. The user can use frames array to access all frameswithin a window. Using the indexing concept, users can access theframes array.

The frames array index always starts with zero and not 1.

The frame object is actually a child of the window object. Theseobjects are created automatically by the browser and help users to controlloading and accessing of frames.

The properties and methods of frame object are similar to that ofWindow object in JavaScript.

The frame object does not support close() method that is supportedby window object.

Using the document creates frame objects and eachframe 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 awindow and also in a frame set.


4/13


self:As the name implies, the self property of frames object denotes the currentframe. Using self property, the user can access properties of the current framewindow.

name:

The name property of frame object denotes the name of the frame. The methodof denoting the name attribute is performed by using the name attribute ofthe tag.

length: The frames array has all the frames present within a window andthe length property of the frame object denotes the length of the frames arrayor 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 parentframe of the current frame.

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 toevaluate an expression after the time interval specified in arguments hasexpired. The time interval in arguments is always specified in milliseconds.

clearInterval():clearInterval method of frame object is used to cancel the correspondingdefinedsetInterval method. This is written by referencing the setInterval methodusing its ID or variable.


5/13


setTimeout(expression, milliseconds):setTimeout method of frame object can be used to execute any function, oraccess any method or property after a specified time interval given to thismethod as argument.

clearTimeout():

clearTimeout method of frame object is used to clear a specifiedsetTimeoutmethod. This is written by referencing the setTimeout method usingits ID or variable.

6.5.1.3 Navigator Object

The Navigator object of JavaScript returns useful information about the visitor'sbrowser and system.

The navigator object has three methods:

javaEnabled specifies whether Java is enabled preference lets you use a signed script to get or set various userpreferences (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 thebrowser

language Refers to the language of the browser

mimeTypesRefers to an array of MimeType objects that contains allthe MIME types that the browser supports

platform A string representing the platform on which thebrowser is running

pluginsRefers to an array of Plugin objects that contains all theplug-ins installed in the browser

plugins.refresh() Checks for any newly installed plug-ins

preference()Allows reading and setting of various user preferencesin the browser


6/13


taintEnabled() Tests to see whether data-tainting is enabled

userAgent String that represents the user-agent header

6.5.1.4 Document Object

Document is the parent object of numerous other objects, such as "images","forms" etc.

Properties of Document Object:

alinkColor String, Specifies the ALINK attribute.

anchors[] Array of anchor objects, contains an entryfor 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 theserver 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 entryfor each form in the document

images[] Array of Image objects, contains an entryfor each image in the document.

lastModified String, Specifies the date the documentwas last modified.

layers Array of Layer objects, contains an entryfor each layer within the document.

linkColor String, Specifies the LINK attribute.

links[] Array of Link objects, contains an entryfor each link in the document.

referrer String, Specifies the URL of the callingdocument.


7/13


title String, Specifies the contents of theTITLE tag.

URL String, Specifies the complete URL of adocument.

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 currentselection

handleEvent() Invokes the handler for the specified event.

open() Opens a stream to collect the output of write orwriteln methods.

releaseEvents()Sets the window or document to releasecaptured events of the specified type,sending the event to objects further alongthe event hierarchy.

routeEvent() Passes a captured event along the normalevent hierarchy.

write() Writes one or more HTML expressions to adocument in the specified window.

writeln() Writes one or more HTML expressions to adocument in the specified window and followsthem with a newline character

6.6 Can Handle

Variables.Conditional statements. (if else, nested if-else)

Switch statementsOperators (logical, Assignment, Conditional etc.)FunctionsLoops (while, do-while, for).Break and Continue

6.7 Events


8/13


Events are actions that can be detected by JavaScript. Every element on a webpage has certain events which can trigger JavaScript functions. For example,one can use the onClick event on a button element to indicate that a functionwill 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.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 visitors browser type and browserversion, 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 setwhen a user enters or leaves a page.

6.7.2 onFocus, onBlur and onChange

These events are often used in combination with validation of form fields.

6.7.3 onSubmit

The onSubmit event is used to validate ALL form fields before submitting it.

6.7.4 onMouseOver and onMouseOut

These events are often used to create animated buttons.

6.8 JavaScript Popup Boxes

JavaScript supported 3 types of popup boxes as explained below:

6.8.1 Alert Box

An alert box is often used if the programmer want to make sure informationcomes through to the user. When an alert box pops up, the user will have toclick OK to proceed.Example:


9/13


Output:

6.8.2 Confirm Box

A confirm box is often used if the programmer want the user to verify or acceptsomething. 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:


10/13


var r=confirm("Press a button");if (r==true){

document.write("You pressed OK!");}else

{ document.write("You pressed Cancel!");}} //-->

Output:

6.8.3 Prompt Box

A prompt box is often used if the programmer want the user to input a valuebefore 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 userclicks OK, the box returns the input value. If the user clicks Cancel the boxreturns null.Example:


11/13


function disp_prompt(){var name=prompt("Please enter your name","Harry Potter");if (name!=null && name!="")

{alert("Hello " + name + "! How are you today?");

}}//-->

Output:

Hello Harry Potter! How are you today?

6.9 Form Handling

JavaScript can be embedded into the HTML document by using tag toprovide dynamic feature to various forms. For example, consider the followinguser login form to verify the user name and password before redirecting to an

authenticated Web page:

Redirect.html

Login Form


12/13


Username:

Password:

next.html


13/13


WELCOME

"Congratulations!!! You have logged in successfully!!!

chapter 6 wd 4th sem cse

Documents