client side programming

8/2/2019 Client Side Programming

1/28

http://home.comcast.net/~fjhirsch/Presentations/www6_tutorial/slides/html/tsld015.htm

What is Client-Side Programming

Browser is Universal Client

Want power and appearance of application

Increase functionality

Provide more capable Graphic User Interface (GUI)

Incorporate new types of information

Move functionality from server to client

Advantages

Reduce load on server, network traffic, network delay

Use client processing power and resources, scale with number of clients

Localize processing where it is needed

Can be simpler than using server side processing

Disadvantages

Possible need for client disk space and other resources

Increased complexity of client environment

Increased complexity of web pages

Distribution and installation issues

Reduced portability

Security...

Security Issues

Unauthorized access to machine resources: disk, cpu etc.

o (e.g. format disk)

Unauthorized access to information

o (e.g. upload history, files)

Denial of service

o (e.g. crash machine)

Techniques

Features of HTML 3.2 and extensions

Helper Applications and Plugins Browser-supported scripting languages

Java Applets

Combined approaches

Dynamic HTML

HTML 3.2 and Extensions

HTML 3.2 Client-Side image maps

GIF animation
http://home.comcast.net/~fjhirsch/Presentations/www6_tutorial/slides/html/tsld015.htmhttp://home.comcast.net/~fjhirsch/Presentations/www6_tutorial/slides/html/tsld015.htmhttp://home.comcast.net/~fjhirsch/Presentations/www6_tutorial/slides/html/tsld015.htm


2/28

Cascading Style Sheets (CSS)

simple, portable, secure

Helper Applications and Plugins

Independent Program or library used to process specific (new) MIME type

o Must be built for specific platform and operating system, not portable.

o

Must be downloaded, and installed correctly.o Can do anything on machine, no security.

Embedded Browser Scripts

Browser supports use of scripting language

Create HTML during page load

Define events for HTML Form elements

Create windows, dialogs.

JavaScript, Visual Basic

Embedded Browser Scripts

Nothing to install on machine

More secure than application, depending on implementation.

Useful

Content is browser dependent - not portable.

Denial of service attacks are easy.

JavaScript Form Validation Example

Use JavaScript to validate form entryfunctions defined in HEAD, using


3/28

Java features, including

o Abstract Windowing Toolkit (AWT)

o multi-threading, networking to source host

Client-side scripting generally refers to the class ofcomputer programson thewebthat areexecutedclient-side, by the

user'sweb browser, instead ofserver-side(on theweb server).[1]

This type ofcomputer programmingis an important par

of theDynamic HTML(DHTML) concept, enabling web pages to be scripted; that is, to have different and changing

content depending on user input, environmental conditions (such as the time of day), or other variables.

Web authors writeclient-sidescripts in languages such asJavaScript(Client-side JavaScript) andVBScript.

[edit] Method

Client-side scripts are often embedded within anHTMLdocument (hence known as an "embedded script"), but they may

also be contained in a separatefile, which is referenced by the document (or documents) that use it (hence known as an"external script"). Upon request, the necessary files are sent to the user's computer by theweb server(or servers) on which

they reside. The user'sweb browserexecutesthe script, then displays the document, including any visible output from the

script. Client-side scripts may also contain instructions for the browser to follow in response to certain user actions, (e.g.clicking a button). Often, these instructions can be followed without further communication with the server.

By viewing the file that contains the script, users may be able to see itssource code. Many web authors learn how to write

client-side scripts partly by examining the source code for other authors' scripts.

In contrast,server-side scripts, written in languages such asPerl,PHP, andserver-side VBScript, are executed by the web

server when the user requests a document. They produce output in a format understandable by web browsers (usually

HTML), which is then sent to the user's computer. The user cannot see the script's source code (unless the authorpublishes the code separately), and may not even be aware that a script was executed. Documents produced by server-side

scripts may, in turn, contain client-side scripts.

Client-side scripts have greater access to the information and functions available on the user's browser, whereas server-side scripts have greater access to the information and functions available on the server. Server-side scripts require that

their language's interpreter be installed on the server, and produce the same output regardless of the client's browser,

operating system, or other system details. Client-side scripts do not require additional software on the server (making

them popular with authors who lack administrative access to their servers); however, they do require that the user's web

browser understands the scripting language in which they are written. It is therefore impractical for an author to writescripts in a language that is not supported by popular web browsers.

Due to security restrictions, client-side scripts may not be allowed to access the user's computer beyond the web browser

application. Techniques likeActiveXcontrols can be used to sidestep this restriction.

Unfortunately, even languages that are supported by a wide variety of browsers may not be implemented in precisely the

same way across all browsers and operating systems. Authors are well-advised to review the behavior of their client-side

scripts on a variety ofplatformsbefore they put them into use.

Client Side Pros and Cons

HTML is basically static, the browser displays the text and graphics and waits for the user to click a link or fill in a form

to return data to the server. Any dynamic behavior is limited mainly to clicking a link or submitting a form to a server and

receiving more static HTML. Client side programming is designed to add dynamic behavior to the client by executing a
http://en.wikipedia.org/wiki/Computer_programhttp://en.wikipedia.org/wiki/Computer_programhttp://en.wikipedia.org/wiki/Computer_programhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Server-sidehttp://en.wikipedia.org/wiki/Server-sidehttp://en.wikipedia.org/wiki/Server-sidehttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Client-side_scripting#cite_note-0http://en.wikipedia.org/wiki/Client-side_scripting#cite_note-0http://en.wikipedia.org/wiki/Client-side_scripting#cite_note-0http://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Dynamic_HTMLhttp://en.wikipedia.org/wiki/Dynamic_HTMLhttp://en.wikipedia.org/wiki/Dynamic_HTMLhttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Script_(computer_programming)http://en.wikipedia.org/wiki/Script_(computer_programming)http://en.wikipedia.org/wiki/Script_(computer_programming)http://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/JavaScripthttp://en.wikipedia.org/wiki/JavaScripthttp://en.wikipedia.org/wiki/JavaScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit&section=1http://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit&section=1http://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit&section=1http://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Computer_filehttp://en.wikipedia.org/wiki/Computer_filehttp://en.wikipedia.org/wiki/Computer_filehttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Source_codehttp://en.wikipedia.org/wiki/Source_codehttp://en.wikipedia.org/wiki/Source_codehttp://en.wikipedia.org/wiki/Server-side_scriptinghttp://en.wikipedia.org/wiki/Server-side_scriptinghttp://en.wikipedia.org/wiki/Server-side_scriptinghttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/PHPhttp://en.wikipedia.org/wiki/PHPhttp://en.wikipedia.org/wiki/PHPhttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/Interpreter_(computing)http://en.wikipedia.org/wiki/Interpreter_(computing)http://en.wikipedia.org/wiki/Operating_systemhttp://en.wikipedia.org/wiki/Operating_systemhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/ActiveXhttp://en.wikipedia.org/wiki/ActiveXhttp://en.wikipedia.org/wiki/ActiveXhttp://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/ActiveXhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Operating_systemhttp://en.wikipedia.org/wiki/Interpreter_(computing)http://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/PHPhttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/Server-side_scriptinghttp://en.wikipedia.org/wiki/Source_codehttp://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Computer_filehttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit&section=1http://en.wikipedia.org/wiki/VBScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/JavaScripthttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Script_(computer_programming)http://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Dynamic_HTMLhttp://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Client-side_scripting#cite_note-0http://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Server-sidehttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Client-sidehttp://en.wikipedia.org/wiki/Execution_(computers)http://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Computer_program


4/28

program on the browser. There are a number of reasons for client side programming, though the most common are for

verifying that data has been correctly entered (e.g. all required fields of a form are filled in) or for extending the capability

of the browser (e.g. Shockwave for animation). The most common tools and reasons for using them are:

Pros and Cons of Client Side Programming Tools

Type Examples Pros Cons

Scripting

Language

JavaScript

PerlScript

Safe, in theory cannot access client

files/hardware.

Common to client and server.

Limited, cannot access client

files/hardware.

Little interactivity, cannot generate

graphics, sound, etc.

Scripting

Language

VBScript Can access client files/hardware, extensible

using ActiveX.

Common to client and server.

Demands trust, OK perhaps for an intranet.

Requires installation of ActiveX objects on

client system.

Plug-in Shockwave Can extend browser capabilities. Demands trust that the plug-in is safe.

Applet Java Safe, cannot access client files/hardware

directly.

General programming language with graphics,

user interface, etc.

Program delivered to client on demand by

server.

Cannot access client files/hardware

High user interface development time,

comparable to C++.

Rantings - Generally, scripting languages are light-weight programming languages, which is not intended to be a

compliment. It takes a lot of imagination to implement a script with anything more than trivial user interaction. Though

basic user interfaces with buttons, menus, etc. can be easily generated, scripting languages lack the ability to directly

generate graphics so something as simple as a line graph is not very feasible.

VBScript qualifies as a curse when coupled with ActiveX technology. To offset weak scripting languages, it attempts to

provide to the browser client all the power of Visual Basic or any language that can generate DLLs. The curse is that the

DLL must reside on the client, has complete access to the client hardware, be uniquely identified, have an entry in the

client system registry, only runs on Microsoft systems, and be completely trustworthy since an ill-mannered DLL can

access anything on a client machine. Oh yes, it presently only runs on Internet Explorer. Otherwise, this is a wonderful

technology. To be fair, it probably is manageable on an intranet where everyone can trust everyone else, the threat ofpersonal abuse does not exist, the software is always completely tested, and every browser is IE. Don't count on ActiveXgaining ground as a client technology.

Plug-ins are fine from the user point of view, they can decide that they want to listen to RealAudio and download the

plug-in. However, for implementing a real Web-site, unless it caters to a select group, remember that most users won't

have the plug-in and many are not willing to download a plug-in just to see your wonderful stuff. VBScript and other

Microsoft scripting language implementations coupled with ActiveX is sort of like plug-ins for the masses, anyone that

can write a Visual Basic program and generate a DLL can do much of what plug-in writers do. A neat technology but one

with too great of technical demands and security risks to be worthwhile for the masses.


5/28

Java applets represent a compromise between power and security risks. Applets are downloaded by the browser and are

run within a virtual machine on the browser. An applet is restricted by the browser security which generally, in theory at

least, forbids applet access to local hardware directly or establishing a new Internet connection. Otherwise an applet can

do most of what a regular Java program can do; real time graphics, threads, etc. Proponents claim that it is a write once,

run anywhere language. Reality is that each browser behaves slightly differently, applets that run reliably on oneWindows browser may crash the same browser on Linux. The biggest complaints against it are that it is slow (somewhat

over 10 times slower that C++, where C++ takes 0.001 seconds an applet takes 0.01 seconds) which is generally not an

issue; that the user interface is clunky which is true since it attempts to work on every computer so is tailored to none; and

the applet download time which usually includes the startup time of the Java virtual machine (JVM). While not perfect, it

boils down to trusting an ActiveX component programmer to not on purpose or accidentally cause harm versus trusting alanguage design to be safe. Java currently represents the only serious programming language that can be somewhat trusted

not to thrash the client computer.

Key Script Programming Points

Mixed HTML/Script - Scripting languages are typically mixed with HTML in a single file. The HTML provides a user

interface and the script program provide the logic. Consider the following JavaScript that displaysHello World5 times.

The file, JHelloWorld.htm, consists of a mixture of HTML and JavaScript.

JavaScript and HTML

JHelloWorld.htmJavaScript

Hello World JavaScript

for( i=1; i


6/28

Exercise 0 - JavaScript

Using the JavaScript program above as a starting point:

modify to display your name in bold 1000 times

display the line number with each name; concatenate a string and number by: "hi "+5 gives "hi 5"

Hint: Trust the C++ force, much of JavaScript is the same syntax. JavaScript data is dynamically typed so numbers andstrings are interchangeable.

Tag

To distinguish script from HTML. Some possible languages are VBScript, JScript, JavaScript, and PerlScript.

Document.Write - Provides a way for the script to write to the browser with new HTML.

document.write ("Hello World
");

Generating HTML - The document.write statement generates new HTML for the browser. For example, the followingdisplays the table at right:

document.writeln("");

document.writeln("4x3 Table");

for (row=1;row


7/28

4,3

User-Interface

The user-interface HTML components, such as buttons, can interact with script code.

Consider the following VBScript and JavaScript that displays the current time and the name entered in the text box when

the button is clicked. The VBScript example can only be run in IE.

VBScript/JavaScript and HTML

VBHello.htmVBScript

Sub Button1_onClick

Document.Write ("Hello " &

Document.NameForm.Text1.Value & "
")End Sub

Hello in VBScript

Enter your name and click button:

Document.Write "Current time: " & time & "
"

IE Browser Output

JHello.htmJavaScript

function Button1_onClick() {

document.write ("Hello " +document.NameForm.Text1.value + "
")

}

Hello in JavaScript

Enter your name and click button:
http://homepages.ius.edu/rwisman/A348/html/VBHello.htmhttp://homepages.ius.edu/rwisman/A348/html/VBHello.htmhttp://homepages.ius.edu/rwisman/A348/html/JHello.htmhttp://homepages.ius.edu/rwisman/A348/html/JHello.htmhttp://homepages.ius.edu/rwisman/A348/html/JHello.htmhttp://homepages.ius.edu/rwisman/A348/html/VBHello.htm


8/28

var now = new Date();

document.write ("Current time: " + now.getHours()

+ ":" + now.getMinutes())

Events

When a user clicks on a button, passes the mouse over a link, etc. an event is generated that can be used to execute a

specific function. The examples above illustrate the onClickevent handling, when Button1 is clicked a call is made to the

Button1_onClick function.

In JavaScript the event handler (function called) can be any name, in VBScript it must be a concatenation of object _

eventsimilar to VB;Button1_onClickis theButton1 object and the onClickevent.

The event to event handler name is automatically created in VBScript but in JavaScript the event handler must beexplicitly designated (e.g. onClick="Button1_onClick()" ).

Note that JavaScript does not support all the events of VBScript but only IE supports VBScript.

Form Objects

User interaction occurs through buttons, text boxes, hyperlinks, etc. that can generate events to execute a script function

such as the onClick event. Buttons and text boxes are defined in a HTML form but can be referenced in a scripting

language.

To define formButtonInputwithButton1 object as:

Form Object Access

Accessing a specific form object can be relatively simple. The following JavaScript changes the value of the Button1object to "OK":

document.ButtonInput.Button1.value = "OK";

document - The current document displayed in the browser.

ButtonInput - Name of the form.

Button1 - Name of the object.

value - The object's attribute. This assignment statement changes the value of the button object.

Document.Write

One point of confusion is that:


9/28


10/28

Start Execution of Script

All scripting code outside offunctions is executed when the form is loadedor refreshed. Function definitions are no

executed until called.

Button1_onClickabove is never executed until Button1 is clicked. In C++ and Java execution starts with a main function

in JavaScript and VBScript, script execution starts with the first script code encountered outside of a function definition.

Any document.write statements encountered during loading the page are executed and addedto the current window; thisallows the script to construct the HTML displayed when the page is loaded by the browser.

Any document.write statements encountered afterloading the page are executed and overwrite the currentwindow; the

effect is to overwrite the loaded HTML with new HTML, erasing the display and rendering the new HTML in the

window.

Global variables - Any variable defined or first used outside of a function is globally accessible.

Exercise 1 - JavaScript Forms

Using the JavaScript Hello program above as a starting point:

open the Hello program to observe the effect when the page is loaded and when a new document.write is executed

in Button1_onClick(),

add another button labeled Factorial;

when the Factorial button is clicked, compute the factorial of the value in the text box (if 5 is in the text box

compute 5!);

write the factorial as HTML.

Hint: Trust the C++ or Java force, much of JavaScript has the same syntax. JavaScript data is dynamically typed so

numbers and strings are interchangeable.

Yes, you can use recursion in JavaScript.

For example, neither sum or i require definitions of type.

sum = 0

for (i=0; i


11/28

Note that the parameter inputis the value ofdocument.TextInput.Text1.value or text.

Passing Values

function Button1_onClick(input) {

document.write("Value entered: " + input + "");

}

Hello

Value entered: Hello

Passing Objects to Script Functions

Objects (references) can be explicitly accessed, as above, or passed as function parameters.

Passing Objects

function Button1_onClick(input) {

document.write("Value entered: " + input.value + "");

}

Hello

Value entered: Hello

The following passes the document.TextInput.Text1 object to functionButton1_onClick.

Button1_onClick(document.TextInput.Text1)

TheButton1_onClickfunction accesses the document.TextInput.Text1 object passed using the parameter name input.

function Button1_onClick(input)

Note that the parameter inputis precisely document.TextInput.Text1 so its attributes are only those of a textobject. The

following increments the value of the object passed by first evaluating the text to a number then adding 1 (e.g. eval("5")+1

is 5+1 or 6).


12/28

input.value = eval(input.value) + 1;

Form Object Access and Passing

ClientForm.htm

function Button1_onClick( input ) {

document.TextInput.Text2.value = input.value;

input.value = eval(input.value) + 1;

document.ButtonInput.Button1.value = "Button " + document.TextInput.Text2.value;}

Exercise 2 - JavaScript Objects and Functions

Using the JavaScript program above as a starting point, create a simple dice rolling script.

Three buttons, one for each of the dice and one to roll the dice, When the roll button is clicked, call a function two times; pass one of the dice button objects as a parameter each

time,

The function changes thevalue of the button object toa random number 1-6.

multiple JavaScript statements are separated by ; and can be performed for the onClick event, for example:

onClick="Button1_onClick(document.TextInput.Text1) ;

Button1_onClick(document.TextInput.Text2)" >

Hint: A random number 1-6 is generated by: Math.round(6*Math.random( ))%6+1;

Selection Lists

Pull-down lists limit input choice to users. The following gives choices of Red, Green or Blue colors and displays the

associated value. The default selected value is Red with the value 1.

Selection Lists

Red
http://homepages.ius.edu/rwisman/A348/html/ClientForm.htmhttp://homepages.ius.edu/rwisman/A348/html/ClientForm.htmhttp://homepages.ius.edu/rwisman/A348/html/ClientForm.htm


13/28

Green

Blue

function printColor() {

document.write( "Selected value: " + SelectForm.ColorSelect.value);

}

Green

Selected value: 2

Arrays

JavaScript arrays, while similar to C++ or Java arrays, are dynamically typed and created.

var color = ["Red", "Green", "Blue"];

defines an array color with the values:

color[0] = "Red"color[1] = "Green"

color[2] = "Blue";

The following example uses an array to translate the selection value into the entry selected. Note that the selection values

are 1-3 but the array indices are 0-2, hence the need to subtract 1 from SelectForm.ColorSelect.value as an index.

Arrays and Selection Lists

Red

Green

Blue

var color = ["Red", "Green", "Blue"];

function printColor() {

document.write( "Selected color: " + color[ SelectForm.ColorSelect.value - 1]);}

Green

Selected color:Green

Link Events

An example often used to simulate button presses using a graphic image is the mouseOverand mouseOutevents.


14/28

The following switches between an image used as a link reference to another page. The name of the HREF

(SYLLABUS.HTM in this case) is referenced, that could also be a parameter to the change function. The empty

HREF="" and return=false are needed for some browsers, return false prevents processing of the HREF=""

mouseOver.htm

function change(newImage,name) {name.src=newImage;

}

JavaScript Events

Moving the mouse over the image will switch from one image to another, and back when the

mouse is out of the image. Clicking the image will load the page referenced.

JavaScript Events

Moving the mouse

over the image wil

switch from one

image to another, and

back when the mouse

is out of the image

Clicking the image

will load the page

referenced.

Explanation

function change(newImage,name) {

name.src=newImage;

}

Defines the function change but does not execute. When change is called by:

change('html_3.jpg', document.TWO)

the execution is:

document.TWO.src = 'html_3.jpg'

which makes the IMAGE SRC = 'html_3.jpg' for the HREF NAME=TWO.

Explanation
http://homepages.ius.edu/rwisman/A348/html/mouseOver.htmhttp://homepages.ius.edu/rwisman/A348/html/mouseOver.htmhttp://homepages.ius.edu/rwisman/A348/html/Syllabus.htmhttp://homepages.ius.edu/rwisman/A348/html/Syllabus.htmhttp://homepages.ius.edu/rwisman/A348/html/mouseOver.htm


15/28

just defines a normal HREF link to "Syllabus.htm" that is has an image of "html_2.jpg" and

NAME=ONE.

The document.ONE can refer to this particular HREF.

onMouseOver="change('html_1.jpg', document.ONE)"

executes the change function when the mouse is over the "html_2.jpg" image.

Program State

Maintaining state is critical for user interaction such as games, shopping carts, etc. but somewhat challenging given that

the HTTP protocol of the Web is a stateless protocol. Generally, the server does not automatically maintain user state;

with many potential users, keeping track of what each has done would make the server much more complex. A simpler

approach is to maintain state by the client and pass current state to the server when needed. We'll examine several ways tomaintain state: appending to the URL, client scripts such as JavaScript, and applets. The state of a computation broadly

means the values of program variables.

Global variables - In scripting languages, variables defined outside of a function can be accessed globally

throughout the program, importantly keeping the value.

Local variables - Parameters and variables defined inside a function are local to the function and do not keep

value between calls to that function.

In the following example, the button value is incremented each time clicked. The state of the button value is maintained in

the variable count and of course the document.ButtonInput.Button1.value itself since it is a global object

Maintaining State

Count.htm

var count = 0; // Global

function increment() {

count++;

document.ButtonInput.Button1.value = count;}

Not Maintaining State

NoCount.htm

var count = 0; // Global

function increment() {

var count = 0

count++;

document.ButtonInput.Button1.value = count

}
http://homepages.ius.edu/rwisman/A348/html/Count1.htmhttp://homepages.ius.edu/rwisman/A348/html/Count1.htmhttp://homepages.ius.edu/rwisman/A348/html/NoCount.htmhttp://homepages.ius.edu/rwisman/A348/html/NoCount.htmhttp://homepages.ius.edu/rwisman/A348/html/NoCount.htmhttp://homepages.ius.edu/rwisman/A348/html/Count1.htm


16/28


17/28

URL State

A JavaScript script is executed independent of other JavaScript, that means that variables from one page of the browser

are not accessible on other pages. However, state of one script can be passed through the URL by appending the state as a

parameter to the URL. For example, a script that is invoked by:

Count.htm?15

passes the value 15 to the Count.htm script as part of the URL. A JavaScript in Count.htm can access the URL parameters

The location.search attribute returns the string "?15" which must be parsed from a string to an integer by:

query = location.search;

n = parseInt(query.substring(1, query.length))+ 1; // Begin parse after "?"

One advantage of this method is that no server overhead is required, in fact, no server is needed if the page of the URL is

already loaded by the browser. A recursive example to increment a counter each time the link is clicked:

Count.htm

Counting Example using URL parameters

var n, query;query = location.search;

if (query.length == 0) { // Initialize when executed by: Count.htm

document.write ('Count 0');

} else { // Increment counter

n = parseInt(query.substring(1, query.length)); // Skip '?' and convert to integer

document.write ('Count ' + (n+1) + '');

}

Points of note:

The URL loading the page is initially: Count.htm

location.search - A predefined JavaScript parameter that holds the string passed to the page. If the page were

loaded by:

Count.htm?1234

location.search = "1234"

The script tests whether any URL parameters exist by location.search.length == 0, generating a link of Count 0 if not, or increments the URL parameter and generates a link of Count 5 after 5 clicks. Note that each link click causes the page to be reloaded by the

browser with the URL parameters.

Exercise 5 - Factorial using URL State
http://homepages.ius.edu/rwisman/A348/html/count.htmhttp://homepages.ius.edu/rwisman/A348/html/count.htmhttp://homepages.ius.edu/rwisman/A348/html/count.htm


18/28

Modify the above Counter.htm to compute the factorial. Start with an initial value of 1, display as: Factorial 4 = 24

Exercise 6 - URL State

ModifyExercise - Link Events and Internal State to use URL state.

Reset

1. Create an HTML file named URL.htm.2. Define a link to reset the count to 0 by loading URL.htm with no parameters.3. Define HREF for each digit. HREF linking should occur, that is generate

)

when the digit image is clicked. The value of the digit clicked should be added to the modulus 4 counter and

displayed.

VBScript/JavaScript Differences

At the basic level of functionality the two scripting languages are very similar. The main problem with VBScript is that

only IE supports it. This problem will disappear after Microsoft achieves world domination but for now it makes it unwise

to use VBScript for client-side programming except where the browser is known to be IE. Try the VBHello.htm in

Netscape.

Some VBScript and JavaScript Differences

JavaScript VBScript

Browser Any IE

Safe Yes Maybe

Extensible Yes using Java Yes using ActiveX

Case Sensitive Yes No

Concatentation + &

Events handlers Any function name Must be concatentation of object _ event
http://homepages.ius.edu/rwisman/A348/html/Count.htm?1http://homepages.ius.edu/rwisman/A348/html/Count.htm?1http://homepages.ius.edu/rwisman/A348/html/Client.htm#Exercise%203%20-%20URL%20Statehttp://homepages.ius.edu/rwisman/A348/html/Client.htm#Exercise%203%20-%20URL%20Statehttp://homepages.ius.edu/rwisman/A348/html/VBHello.htmhttp://homepages.ius.edu/rwisman/A348/html/VBHello.htmhttp://homepages.ius.edu/rwisman/A348/html/VBHello.htmhttp://homepages.ius.edu/rwisman/A348/html/Client.htm#Exercise%203%20-%20URL%20Statehttp://homepages.ius.edu/rwisman/A348/html/Count.htm?1


19/28

Conclusions? - VBScript can be both a client and server side scripting language, is powerful and, through ActiveX,

extensible by the average programmer. As a client scripting language, one grave concern is security since VBScript

provides full access to the file system and other resources of the host computer via ActiveX. A simple example illustrates

this in a script that deletes a file (c:\delete.me) on the host computer, given below. To be fair, VBScript does generally

warn that bad things might happen but this sort of message is unlikely to inspire faith in your clients. As a server-sidescripting language on Microsoft server operating systems it seems to have better access to the Microsoft technologies than

other scripting languages

VBScript to Delete a File on Host

Delete.htm

Dim fso

Set fso = CreateObject("Scripting.FileSystemObject")

fso.DeleteFile("c:\delete.me")

Examples

Three similar TicTacToe examples are given in Java and JavaScript for comparison. Java will be examined more closely

later in the course if time permits. In the game, the user always plays X and the computer O. Whenever an empty board

position is clicked, an X is placed there. For simplicity, the computer then randomly places an O in any empty position

checking for ties and wins. The board positions are numbered as:

0|1|2

3|4|5

6|7|8

Key similarities beyond that in the code are that both can be safely run without installing any software components on the

client machine. Try both the JavaScript and Java applet (no apology for the poor computer play).

Example 1 - Client Side JavaScript TicTacToe with Events and Internal State

The example is of interest primarily due to the use ofevents to signal when and what board position should be changed on

the screen. The state of the game is held in a string variable boardinitialized to "012345678" to indicate that no moves

have been taken. If an X is placed in position 2 then board = "01x345678", and an X is placed in the two position. When a

position is clicked, a move functionis called with the position number and the image object, if the move is valid a graphicfor the X is assigned to the image object. The following initially places a blank image named "gameb.gif" for the HREF

namedZERO, since it is the first image it is placed in the first position. The emptyHREF="" and return=false are neededfor Netscape, return false prevents processing of theHREF="".

Client Side JavaScript TicTacToe with Events and Internal State
http://homepages.ius.edu/rwisman/A348/html/Delete.htmhttp://homepages.ius.edu/rwisman/A348/html/Delete.htmhttp://homepages.ius.edu/rwisman/A348/html/Delete.htm


20/28

ETTT.htm

Client-Side TicTacToe JavaScript using Events

Client-Side
TicTacToe
JavaScript

var board = "012345678"; // Initial board

function move(imageName, position) {

newBoard = process(position, board );

if (newBoard != board) { // newBoard different? then valid X move

imageName.src="gamex.gif";

board = newBoard;}

}

function win(player, board) {

var wins = "012345678036147258048246";

for (awin=0; awin


21/28

if (win("X", newBoard) || tie(newBoard) || newBoard==oldBoard) return newBoard;

do { // Random O move

oBoard = place('o', (oMove=(Math.round(Math.random()*10)%9)), newBoard);

} while (!win("O", oBoard) && !tie(oBoard) && oBoard == newBoard);

switch (oMove) { // Put an O image at the move

case 0 : document.ZERO.src="gameo.gif"; break;

case 1 : document.ONE.src="gameo.gif"; break;case 2 : document.TWO.src="gameo.gif"; break;

case 3 : document.THREE.src="gameo.gif"; break;

case 4 : document.FOUR.src="gameo.gif"; break;

case 5 : document.FIVE.src="gameo.gif"; break;

case 6 : document.SIX.src="gameo.gif"; break;

case 7 : document.SEVEN.src="gameo.gif"; break;

case 8 : document.EIGHT.src="gameo.gif"; break;

}return oBoard;

}

// Draw the board

// When New Game submit button clicked, execute the ETTT.htm page again to restart the game.


22/28

Example 2 - Client Side JavaScript TicTacToe with State Data Passed through URL

The example illustrates how an HTML file can reload itself and pass the current state through the URL. The original

HTML file is loaded for each X move but with a new starting state appended. The state of the game board is updated witheach move and passed back as part of the URL. The first time the file is loaded by:

JTTT.htm

Assuming that an X move is made to position 2, the JTT.htm file would be loaded with the URL:

JTTT.htm?2012345678

Assuming an O move to 5 and X to 7, the JTT.htm file would be loaded with:

JTTT.htm?701x34o678

This method actually parallels that used by Web servers operating without state or memory of any previous operation. As

we've already seen with the Yahoo! search, parameters can be passed as part of the URL. That is precisely what is being

done in this example, it just happens that the HTML file contains a reference to itself; recursion!

The data that is passed in is used to generate HTML as the file is being loaded. For example, the URL

JTTT.htm?701x34o678 corresponds to a move to position 7 where position 2 is "x" and 5 is an "o". It would generate the

partial HTML of:

which contains the move and current board and, for position 3, uses the X image instead of a blank

Client Side JavaScript TicTacToe with State Data Passed

JTTT.htm

Client-Side TicTacToe

JavaScript

Browser client output
http://homepages.ius.edu/rwisman/A348/html/JTTT.htmhttp://homepages.ius.edu/rwisman/A348/html/JTTT.htmhttp://homepages.ius.edu/rwisman/A348/html/JTTT.htm


23/28


24/28

document.write('Tie!

');

return true;

}function place(symbol, move, board) {

i = parseInt(move);

if (i >= 0 && i


25/28

with a reference to a URL. For example, the following displays the gameb.gifand loads the JTTT.htm file when

the blank board position 2 image is clicked:

document.write ('')

document.write ('');

Java also has internal user interface controls for buttons, menus, etc. but the programmer must associate a mouseclick with a specific button, menu entry. There are some very good GUI development environments (IBM,

Microsoft, Borland) that turn much of the graphical layout into drag-n-drop design. For this example, the HTML

form supplied a button that was used to start a new game by reloading the ATTT.htm file. Within the Java apple

example, user defined graphic images and strings instead of standard controls are used. The overhead of using

non-standard controls is that the program must monitor each mouse click to determine if the mouse was over aboard position at the time clicked (see the mouseUp method of the ATTT.java program). Essentially each mouse

click must be decoded from a screen x,y coordinate system to something meaningful to the program. Standard

user controls of HTML or Java perform this screen to method invocation operation automatically.

Client Side Java Applet TicTacToe

ATTT.java

import java.awt.*;

import java.applet.*;

public class ATTT extends Applet {

String board, message;

Image OImage, XImage, HImage, VImage, BImage;

public void init() {

OImage = getImage(getCodeBase(), "gameo.gif");XImage = getImage(getCodeBase(), "gamex.gif");

HImage = getImage(getCodeBase(),"gamedh.gif");

VImage = getImage(getCodeBase(),"gamedv.gif");

BImage = getImage(getCodeBase(),"gameb.gif");

}

// Called whenever applet starts (window open, etc.)

public void start() {

board="012345678";

message=" ";

repaint();

}// Called when mouse button released at (x, y) of

screen

public boolean mouseUp(Event evt, int x, int y) {

int width =

(OImage.getWidth(null)+VImage.getWidth(null));

int height =

(OImage.getHeight(null)+HImage.getHeight(null));

int r = (y/height)-1, c = (x/width)-1;

// Is move over the board?

if (r < 0 || r > 2 || c < 0 || c > 2) return true;

ATTT.htm

Client-Side TicTacToe Java

Applet

Client-Side

TicTacToe

Java Applet

Browser client output
http://homepages.ius.edu/rwisman/A348/html/ATTT.htmhttp://homepages.ius.edu/rwisman/A348/html/ATTT.htmhttp://homepages.ius.edu/rwisman/A348/html/ATTT.htm


26/28

int move = c+r*3;

String newBoard = process(move, board);

if (board == newBoard) return true; // Position occupied,

ignore.

board = newBoard; // Otherwise redraw

board.

repaint();

return true;}

// Display board

void display(String board, Graphics g) {

g.setColor(Color.black);

int xoff =

(OImage.getWidth(null)+VImage.getWidth(null)); ;

int yoff =

(OImage.getHeight(null)+HImage.getHeight(null));

int r, c;

for (int i=0; i


27/28

message = "Tie!";

return true;

}

boolean win(char player, String board) {

String wins = "012345678036147258048246";

int i0, i1, i2;

for (int awin=0; awin= 0 && i


28/28

JavaScript, thread control, etc. Maybe its the thought of trying to get an application to work reliably that uses three

languages: HTML, JavaScript, and Java, on different browser platforms that dampens my enthusiasm.

Difference Between Client Side & Server Side

Programming

When programming a web application, it's important to know the difference between client-sideprogramming and server-side programming. Client-side programming is run on the clients machine,creating some advantages and disadvantages. Even with client-side advantages, server-sideprogramming is more secure and is preferred by most programmers. Server-side programming alsohas more options for languages than client-side.

Client-side

1. Client-side programming is run on the user's computer. An example of client-side programming isJavascript. Javascript can be used to run checks on form values and send alerts to the user's browser. Theproblem with client-side scripts is the limit of control and problems with operating systems and webbrowsers. Since programming a website involves users with several options of computer software, it'sdifficult for programmers to account for any bugs in the code or compatibility issues with browsers.

Server-side

2. Server-side scripts are run on the server. This reduces the amount of bugs or compatibility issues since thecode is run on one server using one language and hosting software. Server-side programming can also beencrypted when users send form variables, protecting users against any hack attempts. Some examples ofserver-side programming languages are C#, VB.NET, and PHP.

Security

3. Server-side scripts are more secure than client-side. For instance, when a user accesses a bank accountonline, the server side-script communicates with the client using encryption. A client-side script is plain textand run on the client's browser. Any unscrupulous hacker can view the code and eavesdrop, stealingprivate information from the user's computer.

Browser Compatibility

4. The code run on the user's computer using scripts like Javascript can be blocked. Most browsers give theuser the option to block client-side code, which causes a problem with web developers who needJavascript to run on the computer for the web application to load properly. Server-side scripting does nothave any browser limitations.

Ajax

5. Ajax is a newer technology that uses both client-side scripting and server-side scripting in conjunction. Ajaxcan call adatabase without refreshing the page. Ajax is an example of a client-side script that calls aserver-side script. The call is transparent to the user since a new call to the server is done in the currentwindow without refreshing the page like typical server-side calls.
http://www.ehow.com/about_5377868_difference-side-server-side-programming.htmlhttp://www.ehow.com/about_5377868_difference-side-server-side-programming.htmlhttp://www.ehow.com/about_5377868_difference-side-server-side-programming.htmlhttp://www.ehow.com/about_5377868_difference-side-server-side-programming.htmlhttp://www.ehow.com/about_5377868_difference-side-server-side-programming.html