Preface Introduction: What Is Client –Side Scripting...
Transcript of Preface Introduction: What Is Client –Side Scripting...
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.
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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
Refer the Listing 13.5 in page number 276
Refer the Listing 13.6 in page number 276
-------------------------------------------------------------------------------------------------------------------
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.
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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.
Refer the LISTING 14.5 and FIGURE 14.4 in page number 296
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?
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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( );
Refer the LISTING 16.1 and FIGURE 16.1 in page number 31
Dept of Computer Applications WEB TECHNOLOGY
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;
}
Refer the LISTING 16.4 and FIGURE 16.5 in page number 339and 340.
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)
Dept of Computer Applications WEB TECHNOLOGY
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.
Refer the LISTING 16.5 and FIGURE 16.6 in page number 342and 343.
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.
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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
Dept of Computer Applications WEB TECHNOLOGY
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
---------------------------------------------------------------------------------------------------------------
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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.
Refer the LISTING 14.4 and FIGURE 14.3 in page number 295
• 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>
Dept of Computer Applications WEB TECHNOLOGY
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.
Dept of Computer Applications WEB TECHNOLOGY
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.
-----------------------------------------------------------------------------------------
Dept of Computer Applications WEB TECHNOLOGY
CCET /MCA / SEM IV
22