Download - 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 -
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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§ion=1http://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit§ion=1http://en.wikipedia.org/w/index.php?title=Client-side_scripting&action=edit§ion=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§ion=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 -
8/2/2019 Client Side Programming
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.
-
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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 SubHello 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/2/2019 Client Side Programming
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:
-
8/2/2019 Client Side Programming
9/28
-
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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).
-
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
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.
-
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
16/28
-
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
20/28
ETTT.htm
Client-Side TicTacToe JavaScript using Events
Client-Side
TicTacToe
JavaScriptvar 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
-
8/2/2019 Client Side Programming
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.
-
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
23/28
-
8/2/2019 Client Side Programming
24/28
document.write('Tie!
');return true;
}function place(symbol, move, board) {
i = parseInt(move);
if (i >= 0 && i
-
8/2/2019 Client Side Programming
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 -
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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
-
8/2/2019 Client Side Programming
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