Preface Introduction: What Is Client –Side Scripting ...chettinadtech.ac.in/storage/11-12-15/11-12-15-10-15-27-1326...Client – Side Scripting: Scripting basics ... the Web client,

Dept of Computer Applications WEB TECHNOLOGY

CCET /MCA / SEM IV

1

UNIT II

CONTENTS:

Client – Side Scripting: Scripting basics – Client –Side Image Maps – Introduction Java Script –

Creating simple Java Scripts – Using Java script for forms – using Java Script with Style Sheets.

Preface

This unit introduces the core concepts of Client side scripting. It deals with the image

maps and introduction to java script with forms and Style sheets.

Introduction:

Scripting Basics

Client – side scripting is not HTML in and of itself. The script, as it is commonly called, is

written in one of the supported programming languages and then embedded in a Web page’s

HTML code. The script gets downloaded along with the rest of the Web page, and is run by the

user’s Web browser.

What Is Client –Side Scripting?

Client side scripting refers to creating scripts that are executed in the user’s Web browser,

the Web client, rather than on your Web server. A client side script s typically a small program

embedded within an HTML document. Whenever a Web browser that supports client-side

scripting encounters one of these scripts, it executes the program by interpreting the commands.

Scripts and Programs

Client-side scripts are intended to be cross-browser and cross-platform compatible. The intent

with java is to have a single code base that, when compiled to byte code, runs properly on all

platforms. Byte code is a step between source code and executable code. Client side scripts are

referred to as scripts rather than programs. Scripts are typically code that is not compiled before

being executed, where as programs are compiled code that can be executed without the use of a

command interpreter.

Compiled Programs

A compiled program no longer is a simple text file. It is now referred to as a binary file and

opening the file in a text editor reveals strange characters rather than discernible statements.


CCET /MCA / SEM IV

2

Compiled programs have some advantages.

• It executes much faster than an interpreted program.

• Can distribute them without compromising the source code’s integrity.

Disadvantage:

• The process of compiling a program can take some time, depending on the speed of your

machine.

• A simple change to your program can result in a lot of time coding and compiling.

• The cross- platform compatibility problem.

Interpreted Scripts

Scripts are similar to programs in that both use similar statements structures, depending on

the language being used. A command interpreter is a compiled program. Like all compiled

programs, it is specific to the platform for which it was compiled. The natural advantage to scripts

over programs is the ability to write and distribute a single code base across many platforms.

Advantages:

• By using scripting language, you can write your application in plain text and not worry

about what computer is downloading and running it.

• Creating and maintaining a script is as easy as editing a text file.

Disadvantages:

• The speed at which scripts run.

• The command interpreter recognizes statements and executes the proper machine language

code for that statement.

• Scripts run significantly slower than their program counterparts.

• The integrity of your source code.

Client-Side Scripting Languages

Client-side scripting is relatively new, having only been around for about a year and a half.

The most important thing to remember in choosing a language for your client-side scripts is

browser s compatibility.

Java Script – Java Script was the first client-side scripting language. It is not Java.

JScript – The Microsoft implementation of JavaScript is JScript. JScript contains the

same syntax and structure JavaScript contains.

VBScript- Microsoft introduced another client-side scripting language called Visual Basic

Scripting Edition, or VB Script. It uses the same syntax and structure as standard Visual

Basic.


CCET /MCA / SEM IV

3

Placing Scripts in Your Web Pages

The power of client-side scripts comes from their capability to be integrated within a Web

page. Rather than having a separate page, application, or applet downloaded in order to run a

script, client-side scripts are embedded within the HTML code of the Web page they work with.

This makes the distribution of client –side scripts transparent and simple.

The <SCRIPT> Tag

In order to embed client-side scripts in your Web pages, you need an HTML tag to tell the

browser that the following code is a script and not document text. This is done through the

<SCRIPT> tag.

<SCRIPT LANGUAGE = [scripting language]>

<SCRIPT LANGUAGE = “JavaScript”></SCRIPT>

<SCRIPT LANGUAGE = “VBScript”></SCRIPT>

Hiding Scripts from Incompatible Browsers

Web browsers that support Web page scripts support a syntax style that enables you to hide your

scripts from browsers that do not support client-side scripting.

<SCRIPT LANGUAGE = “JavaScript”>

<! - -

Your Script goes here.

// - ->

</SCRIPT>

Placing Your Script in Your HTML Code

Client Side scripts can be placed anywhere in your HTML text. The most common place for

scripts in the header section of your Web page is the section between the <HEAD></HEAD>

tags.

----------------------------------------------------------------------------------------------------------------------

Refer the Listing 13.4 in page number 275



-------------------------------------------------------------------------------------------------------------------

Running your Client-Side Scripts

Client-Side scripts are run by loading the Web page in which they are embedded into a Web

browser that supports that scripting language. Depending on how the script is to be run, the Web

browser either executes the code immediately or waits until the user performs some action.


CCET /MCA / SEM IV

4

What Can Client – Side Scripts Do?

Client-side scripts provide a mechanism for building more interactivity into your Web

pages. It is full- featured programming languages with conditional statements, control structures,

and data structures. Examples: Validation of form data, status bar messages, Image Rollovers,

and Cookie manipulation.

Validation of Form Data

Validation of form data was through the CGI script form handler. The CGI script on your

server would do any validation checking, and then return an error to the user if one occurred.

Status Bar Messages

The status bar is the area at the bottom of the Web browser in which the status of actions is

being shown. Typically, the browser uses this area to display messages such as Document Done,

or the URL of a link to which the mouse is currently pointing. Client side scripts have the

capability to send messages to the status bar.

Image Rollovers

Image rollovers are a method of having a picture change, or roll over, to another image

when the user moves the mouse pointer over the image. A common use of rollovers is in

navigation bars, which are composed of images.

Working with Cookies

Cookies are objects that enable Web page authors to save some state information about the

user who just visited their site. A cookie is a simple record that is stored on the user’s machine in

acookie.txt file. This file is created and maintained by the Web browser.

Limitations of Scripting

Client-side scripting provides a powerful tool for creating dynamic and interactive pages.

Limitations:

• One of the biggest problems with client-side scripts is that your source code is embedded

in your HTML page, making it available for viewing by every one who downloads your

Web page.

• Another limitation of client –side scripts is the scope in which they can run. Because they

are embedded in a Web page, that is the scripts scope.

• Client side scripts are also somewhat limited in the actions they can perform.

• In addition to security issues, client-side scripts need to run on whatever platform the user

accessing your page has.


CCET /MCA / SEM IV

5

• Additionally, client-side scripts do not possess all of the power and flexibility of CGI

scripts, making it necessary for you to have CGI scripts for your Web site.

Client-side Image Maps: A Quick Demonstration of Client –side Scripting

Server–side image maps have been around since the early days of the World Wide Web.

Client-side imagemaps have the same basic functionality as their server-side counterparts.

Server-Side Imagemaps versus Client-side Imagemaps

Imagemaps are one of the tasks that have no need to be performed on the server side. In

fact, the only reason they have been in the past is because it was at one time easier it universally

implement them on the server side than the client side.

What are Imagemaps?

Imagemaps are simple text descriptions of shapes and their related coordinates in an image

file. The purpose of an imagemaps is to define multiple hotspots or clickable points on a single

image. Even you can define polygons and circles for areas, whereas breaking down an image into

smaller one results in smaller, rectangular image. This may not always work well for the image

you are using.

How Do Server-Side Imagemaps Work?

Server-side imagemaps function in a straight forward manner. On the client-side, the Web

page author includes the ISMAP attribute in the <IMG> tag of the image to be used with an

Imagemap.

----------------------------------------------------------------------------------------------------------------------

Refer Listing 14.1 in page number 283

Refer Figure 14.1 in page number 285

---------------------------------------------------------------------------------------------------------------------

How DO Client-Side Imagemaps Work?

Client-side imagemaps operate much more efficiently than their server-side counterparts.

Naturally, there are some additional HTML tags you need in order to create client-side

imagemaps: the <MAP> tag and the <AREA> tag. You also need to use the new USEMAP

attribute for the <IMG>.

Making Client-Side Imagemaps

You need to start with the image for which you want to create a mapping. Then you need to use

the client-side imagemaps HTML tags, <MAP> and <AREA>, and the USEMAP attribute for the

<IMG> tag.

The <MAP> Tag


CCET /MCA / SEM IV

6

The <MAP> tag is used to define a client-side imagemap, and has an associated closing </MAP>

tag. You can have multiple client-side imagemaps on the same assign it. The Syntax is as follows:

<MAP NAME = “map1”>

….

</MAP>

The <AREA> Tag

The <AREA> tag defines an area on the image and what action takes place when the user clicks

in that area. All <AREA> tags must go between the <MAP></MAP> tags. The <AREA> tag has

the following six attributes.

• SHAPE

• COORDS

• ALT

• NAME

• TARGET

• HREF

The SHAPE attribute

The SHAPE attribute defines what type of shape the <AREA> tag is defining. There are

four possible values for this attributes:

• rect – The rect shape is a rectangle and is defined by two sets of coordinates.

• circle – The circle shape is a standard circle and is defined by two coordinates.

• poly – the poly shape refers to a polygon, which is a more general shape than a rectangle.

To define a polygon area, you simply supply the x and y coordinates for each point of the

polygon.

• default – the default option for the SHAPE attribute is not like the other options. It is used

to designate the action for any mouse clicks.

COORDS attribute

The COORDS attribute is where you specify the actual numeric values for the x

and y values of the area you are defining. the number of actual x and y coordinates values

you supply for the COORDS attributes have values similar to the following:

<AREA SHAPE = rect COORDS = “19, 20, 49, 40”>

<AREA SHAPE = poly COORDS = “19, 20, 17, 25, 21, 35, 23, 25”>

<AREA SHAPE = circle COORDS = “20, 20, 15, 15”>

ALT Attribute


CCET /MCA / SEM IV

7

The ALT attribute is exactly like the ALT attribute fro the <IMG> tag. We can specify ALT

text to be displayed for that section of the imagemap.

NAME Attribute

The NAME attribute for the <AREA> tag is an optional attribute not typically

used. In this attribute, you specify the same name that is used in the USEMAP attribute of

the <IMG> tag.

TARGET Attribute

The TARGET attribute is where you specify the window’s or frame’s name to

which the referenced document is loaded.

HREF and NOHREF Attributes

The last attribute for the <AREA> tag is the HREF attribute. This is the same

HREF attribute used in the <A> tag for defining links.

The USEMAP Attribute

After you create a client side imagemap using the <MAP></MAP> tags, and have defined

all the shapes using <AREA> tags, you need to tell the Web browser that your image has an

associated client-side imagemap. This is done by using the USEMAP attribute in the <IMG> tag.

USEMAP = “#map1”

WYSIWYG Imagemap Editors

The most challenging task in creating client-side imagemaps is determining the coordinates for

your areas. There are three ways you can do this.

• Take a guess

• Determine the coordinates of each point, one at a time.

• Use a WYSIWYG imagemap editor.

Three of the more popular WYSIWYG imagemap editors are:

• Map Edit – To create a client-side imagemap in Map edit, you need to create an HTML

page with an image that you want to map.. then open up both the HTML file an the image

in Map Edit.

Refer the LISTING 14.2 and FIGURE 14.2 in page number 291 and 292

• Hotspots – its ability to automatically create a combination client- and sever side

imagemap.

Refer the LISTING 14.4 and FIGURE 14.3 in page number 295


CCET /MCA / SEM IV

8

• LiveImage – Also supports both client – and server side imagemaps. Its interface makes

it extremely easy to add, delete, and modify areas in your image.


Enhancing Your Client-Side Imagemaps with Client-Side Scripting

One of the biggest benefits of using client-side imagemaps over server-side imagemaps is

the ability to add scripting to your <AREA> tags. A common application is to replace the

destination URL in the browser window’s status bar with a more descriptive explanation.

<AREA SHAPE =”polygon” ALT = “Union Stage” COORDS = “ 26, 93, 14, 104, 30, 122, 52, 130, 62, 123,

60, 113” HREF = “union-stage.html”>

Using the Java script onmouseover event handler, you could create a line of JavaScript

that outputs the string “Union Stage Casting Calls” to the browser window’s status bar.

onmouseOver = ‘window.status= “Union Stage Casting Calls”; return true’

onmouseOut = ‘window.status= “”; return true’

Introducing Java Script

What is Java Script?

Java Script is a primarily client-side scripting language for the World Wide Web, that is

similar to the syntax of the Java programming language.

Why Java script?

Because it makes the Web experience better for producer and consumer alike.

Introducing JavaScript Syntax

Example:

<html>

<head>

<title> Hello World in JavaScript </title>

</head>

<body>

<script language = “JavaScript”>

document. write (“Hello, World Wide Web”);

</script>

</body>

</html>

The script tag that sets apart the JavaScript example. Here language attribute specifies wht

scripting language is used.

Refer the FIGURE 15.1 and 15.2

Statements

A statement is at the heart of Java Script syntax.

What is statement?


CCET /MCA / SEM IV

9

It is simply a line of code that contains some kind of instruction.

document. write (“<H2> Hello </H2> <I> World </I> Wide Web”);

Blocks

The grouping of statements is a block:

{

document. write (“<H2> Each line is a Statement </H2>”);

document. write (“<P> These statements, <BR>”);

document. write(“ are part of a block”);

}

Comments

JavaScript provides you with a mechanism that can be used to place comments with in your

code. There are two types of comments that can be used with Java script: single-line and

multi-line comments.

A single –line comment is denoted with two slashes (//);

Multi-line comment is denoted between /* and */

Data Types

The information, or data, that you use in your Java Scripts can be in a wide variety of forms.

Keeping track of the type of data you use in your scripts is important because a number of

factors concerning the data type come into play later. There are five basic data types in

JavaScript: string, number, Boolean, object, and function.

Strings

The string is probably one of the most commonly used data types. A string is simply a

character, or series of characters, such as “This is a String.”

Strings can be any alphabetic characters, numbers, or combination. The following

examples are all strings:

The quick brown fox.

January 1, 1999

“This is a string”

‘This is also a string’

“Fridays are a ‘casual’ dress day”

Numbers


CCET /MCA / SEM IV

10

It allows performing arithmetic operations on the data. Some examples of numbers include

the following:

-5, 1, 1.75, .125

Booleans

A Boolean simply has two values: true or false.

Example;

Var button_has_been_clicked= true;

Var button_has_been_clicked= false;

Variables

It is a storage container for information. Variables can contain any type of data.

Example:

Var Day = Thursday;

Altering Variable Values

var inventory = 10;

Refer the figure 15.3 In page number 311.

Expressions

The methods that can be employed to manipulate the data are called expressions.

There are two types of expressions: numerical and logical.

Numeric Expressions

They are very straightforward. They are the same types of statements you would use to

perform basic mathematical function. Example:

“add the number 2 to the number 2”

2 + 2

Operators Include as follows: +, - , *, /, %

Logical Expressions

Another type of java script expressions is the logical, or Boolean, expression. These are

expressions that, when evaluated, can return either a true or a false.

2 + 2 = 4

(2 + 2 = 4) && (5 – 3 ) = 2)

Logical Operators are as follows: &&, ||, !, ==, !=, >, >=, <, <=.

Flow Control

The decision making process is called controlling the flow of your script.


CCET /MCA / SEM IV

11

If

The if statement is at the core of flow control to determine a course of action if a statement

is true, or false.

if (expression)

do something;

If . . . else

This conditional expression is used similarly to the if statement, but provides a mechanism

for specifying actions to perform if the expression is false.

if (some expression)

if the expression is true, do this;

else

if the expression is false, do this instead;

for Loops

The for loop is another basic conditional expression. A for loop can repeat an action a

certain number of times, until the conditions you have set for the repeat have been met.

for (some variable; A conditional; the counter)

{ the actions to be repeated;

}

While Loops

The while loop is another type of loop very similar to the for loop. A while loop simply

takes a test case and then, as long as the test case is true, continues to perform an action.

while (conditional statements)

{ perform these actions;

}

Arrays

An array is simply a data structure designed to hold multiple values or elements. For

example each day of the week would be an example of an array element. Here’s how you

could create an array:

Days = new Array (6);

Functions

A function is simply a block of code with a name, which allows the block of code to be

called by other components in your scripts to perform certain tasks. A function can also

accept parameters or arguments that they use to complete their task.


CCET /MCA / SEM IV

12

printDay (Monday);

squareRoot (16);

Creating Custom Functions

In addition to using the functions, you can also create and use your own

functions.

To build such function, you need to define the function itself:

Function printDay (theDay){}

Creating Simple JavaScripts

Formatting Scripts

The scripts can be formatted following ways:

<SCRIPT>

Here is some JavaScript.

<SCRIPT>

<SCRIPT LANGUAGE = “JavaScript1.1”>

</SCRIPT>

The HTML comments with in the style tag.

<SCRIPT LANGUAGE = “JavaScript 1.1”>

<!- -

Our JavaScript.

// - - >

</SCRIPT>

Date and Time Entry

Date () function that returns a value of the current date and time from the local system.

<SCRIPT LANGUAGE = “JavaScript”>

<!- -

rightNow = new Date()

// - - >

</SCRIPT>

Similarly you can use two functions.

getHours( ) and getMinutes ( ) that return the hours and minutes for your time of day:

hour = rightNow.getHours( );

minute = rightNow.getMinutes( );



CCET /MCA / SEM IV

13

Determining Browser Information

Objects – The elements with in the language are treated as objects that can be used in different

scripts, and manipulated to create other objects.

Interchangeable – is an advantage of an object.

Using the navigator Object

Navigator is an object – which contains properties and methods that can be used to find

information about the version, configuration, and features of the current browser, including

the status of plug-ins.

Refer the LISTIBNG 16.2 and FIGURE 16.2 in page number 334 and 335.

Linking Scripts to Windows Events

In addition t9o JavaScript that are executed immediately when a page loads, it might also

be useful to have a script that executes when a specific task occurs.

Refer the FIGURE 16.2 in page number 336.

Alert Boxes and Confirmations

There are many times when you might want to present viewers of your site with an alert or

a confirmation dialog box in order to make sure they understand what the consequences of

their actions are.

Refer the LISTING 16.2 and FIGURE 16.4 in page number 337and 338.

Altering the status Bar

The JavaScript window object contains properties and methods for manipulating the text in

the status bar.

function msg (text)

{

Window.status=text;

}


Scrolling Text in the Status Bar

Although it might seen very complicated, in reality it can be done with a relatively short

script.

Function scrollStatus (counter)


CCET /MCA / SEM IV

14

{}

The function is called scroll status, and it accepts a value called counter, which you use within

the function to keep track of how your message is displayed in the scrollbar.


Using JavaScripts for Forms

CGI versus JavaScript Forms

Creating form with JavaScript doesn’t vary that much from creating forms with CGI. You still

make use of the same HTML tags you may have used before to create the form itself. Wher

JavaScript takes a drastic turn from traditional form development is the way in which data is

entered and processed.

The FORM Object

The elements of a form are actually stored in the Forms[] array, which is property of the

Document Object. That means that all of your form elements are stored sequentially in the

forms array and can be accessed by their index number.

Document. forms [0]

Form Elements

The Form Object’s elements conform to the elements that are created with the HTML form

tags. These elements each have a number of associated properties, methods, and events

handlers that can be used to customize your forms or to manipulate the data that is contained

on the form.

• Button

• Checkbox

• Radio

• Select

• Text

• Textarea

• Hidden

• Password

• Submit

• reset

Refer the LISTING and FIGURE in page number 349and 355.


CCET /MCA / SEM IV

15

Form Element Properties

Each properties represents the same type of data for each element, the properties are listed

here for you to cross reference back to the element property listings.

• form

• name

• type

• value

• chacked

• defaultChecked

• options

• length

• selectedIndex

• defaultValue

form Elements Methods

There are four form element methods that can be invoked to change the status of elements

within your form.

• blur( )

• click ( )

• focus ( )

form Element Event Handlers

The event handlers are the methods that get called when a user interface event occurs. The

event handlers that are associated with form elements follow.

• onblur

• onclick

• onfocus

• onchange

Refer the Coding for Accessing form Elements with JavaScript in page number 360 and

361.

form Validation

Form validation is simply checking the data users have entered, or making sure that they

have entered all of the required information before the form is processed.

Refer the LISTING 17.2 and FIGUR 17.11 in page number 370 and 372.

Using JavaScript with Style Sheets


CCET /MCA / SEM IV

16

Dynamic Style Sheets.

Just recently, two new technologies have been released that promise to put an end to all the

extra work you have to do make your site look nice.

• Cascading Style Sheets

• Using JavaScript to Control Style Sheets

What are the advantages?

• Make the text on your page adjust its size to adapt to the user’s browser size.

• Create text rollover effects without the need for graphics

• Create an HTML-based menu that can expand and collapse to show its contents

• Change text properties on-the-fly without a full page refresh

• Fade in and fade out page elements.

Getting Started Working with dynamic styles is simple and fairly straight forward. You should be able to create

your own dynamic styles in a very short time.

The Changing of the Names

The naming conventions used in scripting are different from those in HTML.

Refer the table that shows some examples of CSS attributes and their scripting property

names.

Something New

The <DIV> and <SPAN> tags are two new tags that have been added to the already long list of

tags available to you.

Two Different Browsers, Two different Object Models

The two most popular browsers are Netscape Navigator and Microsoft Internet Explorer.

Refer the LISTING 18.1 in page number 379.

The Events That Make It All Happen

Events are an important part of using JavaScript to create dynamic styles, so you need to

understand and know how to deal with them.

Refer the table 18.1 and Listing 18.2 in page number 381.

More Advanced Topics

Refer the FIGURE 18.2 , Lisiting 18.3 and Figure 18.3 in page number 382 and 383.

Accessing the Elements

The all Collection


CCET /MCA / SEM IV

17

The all collection is used a lot when creating dynamic style sheets. The all collection is your

ticker to all the elements on your page; you can use it to access any valid HTML tags on your

page.

document.all.tags (“B”)

Using the item ( ) Method for More Control

Refer the LISTING 18.4 and FIGURE 18.4 in page number 384 and 385.

Assigning a Class to an Element

You can use a slightly different version of the previous example to assign a class to an element

dynamically. It’s a fast and easy way to apply a set of style rules to an element when you are

scripting.

Refer the LISTNG 18.5 and FIGURE 18.5 in page number 386.

Where’s Your Id?

The id and name properties are usually used for scripting. They provide a way to give your

elements a unique name that makes your code easier to read. This is how to access elements by

their id or name when you are scripting:

document .all.elementid.style.property

Refer the FIGURE 18.8 and LISTING 18.8 in page number 389.

Refer the FIGURE 18.9 and FIGURE 18.10 in page number 390.

The styleSheets Collection

The styleSheets collection is used to work with style sheets contained in your document. you can

use it to collect information about and manipulate your style sheets.

• Find out how many style sheets are in your document.

• Add a style sheet

• Replace style sheet

• Delete a style sheet

• Disable a style sheet

• Add a rule to the style sheet

Refer the LISTING 18.9 and FUGURE 18.11 in page number 391 and 392

---------------------------------------------------------------------------------------------------------------


CCET /MCA / SEM IV

18

UNIT II (2 – Marks)

1. What Is Client –Side Scripting?

Client side scripting refers to creating scripts that are executed in the user’s Web browser,

the Web client, rather than on your Web server. A client side script s typically a small program

embedded within an HTML document. Whenever a Web browser that supports client-side

scripting encounters one of these scripts, it executes the program by interpreting the commands.

2. What is a Compiled Programs?

A compiled program no longer is a simple text file. It is now referred to as a binary file and

opening the file in a text editor reveals strange characters rather than discernible statements.

3. Define Interpreted Scripts.

A command interpreter is a compiled program. Like all compiled programs, it is specific

to the platform for which it was compiled. The natural advantage to scripts over programs is the

ability to write and distribute a single code base across many platforms.

4. Give the Examples of Client Side Scripting Java Script – Java Script was the first client-side scripting language. It is not Java.

JScript – The Microsoft implementation of JavaScript is JScript. JScript contains the

same syntax and structure JavaScript contains.

VBScript- Microsoft introduced another client-side scripting language called Visual Basic

Scripting Edition, or VB Script. It uses the same syntax and structure as standard Visual

Basic.

5. What Can Client – Side Scripts Do?

• Validation of Form Data

• Status Bar Messages

• Image Rollovers

• Working with Cookies

What are Imagemaps?

Imagemaps are simple text descriptions of shapes and their related coordinates in an image

file. The purpose of an imagemaps is to define multiple hotspots or clickable points on a single

image. Even you can define polygons and circles for areas, whereas breaking down an image into

smaller one result in smaller, rectangular image. This may not always work well for the image

you are using.


CCET /MCA / SEM IV

19

6. How Do Server-Side Imagemaps Work?

Server-side imagemaps function in a straight forward manner. On the client-side, the Web

page author includes the ISMAP attribute in the <IMG> tag of the image to be used with an

Imagemap.

7. How DO Client-Side Imagemaps Work?

Client-side imagemaps operate much more efficiently than their server-side counterparts.

Naturally, there are some additional HTML tags you need in order to create client-side

imagemaps: the <MAP> tag and the <AREA> tag. You also need to use the new USEMAP

attribute for the <IMG>.

8. State the Popular WYSIWYG imagemap editors

Three of the more popular WYSIWYG imagemap editors are:

• Map Edit – To create a client-side imagemap in Map edit, you need to create an HTML

page with an image that you want to map.. then open up both the HTML file an the image

in Map Edit.

Refer the LISTING 14.2 and FIGURE 14.2 in page number 291 and 292

• Hotspots – its ability to automatically create a combination client- and sever side

imagemap.


• LiveImage – Also supports both client – and server side imagemaps. Its interface makes

it extremely easy to add, delete, and modify areas in your image.

9. What is Java Script?

Java Script is a primarily client-side scripting language for the World Wide Web, that is similar to

the syntax of the Java programming language.

10. Why Java script?

Because it makes the Web experience better for producer and consumer alike.

11. Give the Examples for JavaScript Syntax

Example:

<html>

<head>

<title> Hello World in JavaScript </title>

</head>

<body>

<script language = “JavaScript”>

document. write (“Hello, World Wide Web”);

</script>

</body>


CCET /MCA / SEM IV

20

</html>

12.What is statement?

A statement is at the heart of Java Script syntax.

It is simply a line of code that contains some kind of instruction.

document. write (“<H2> Hello </H2> <I> World </I> Wide Web”);

13. Define Blocks with Example

The grouping of statements is a block:

{

document. write (“<H2> Each line is a Statement </H2>”);

document. write (“<P> These statements, <BR>”);

document. write(“ are part of a block”);

}

14. define Comments with Example

JavaScript provides you with a mechanism that can be used to place comments with in your code.

There are two types of comments that can be used with Java script: single-line and multi-line

comments.

A single –line comment is denoted with two slashes (//);

Multi-line comment is denoted between /* and */

15. Define Flow Control with Example

The decision making process is called controlling the flow of your script.

• If

• If . . . else

• for Loops

• While Loops

16. Define Arrays and Functions

An array is simply a data structure designed to hold multiple values or elements. For

example each day of the week would be an example of an array element. Here’s how you

could create an array:

Days = new Array (6);

Functions

A function is simply a block of code with a name, which allows the block of code to be

called by other components in your scripts to perform certain tasks. A function can also

accept parameters or arguments that they use to complete their task.


CCET /MCA / SEM IV

21

17. Define Objects

The elements with in the language are treated as objects that can be used in different scripts, and

manipulated to create other objects. Interchangeable – is an advantage of an object.

18. Define form Validation

Form validation is simply checking the data users have entered, or making sure that they

have entered all of the required information before the form is processed.

UNIT II (12 – Marks)

1. Explain in detail about the Scripting Basics.

2. Describe about the Client-Side Imagemaps in detail.

3. Explain in details about the JavaScript

4. Explain in detail about how to create a simple JavaScript

5. Explain in details about the using of JavaScripts for Forms

6. Describe about the usage of form Elements properties and form Element Methods

7. Explain how to integrate the JavaScript with Style Sheets

8. Explain in detail about the Dynamic Style Sheets.

-----------------------------------------------------------------------------------------


CCET /MCA / SEM IV

22

Documents

Preface Introduction: What Is Client –Side Scripting ...chettinadtech.ac.in/storage/11-12-15/11-12-15-10-15-27-1326...Client – Side Scripting: Scripting basics ... the Web client,