Client-Side Programming
Download
Report
Transcript Client-Side Programming
E-Commerce:
Fundamentals and Applications
Chapter 3 : Client-Side Programming
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
1
Wiley and the book authors 2001
Outline
Key issues on client-side Web programming
Web page design and production techniques
Overview of HTML
Basic HTML tags on Web page design such as:
Hyperlinks
Images & Image maps
HTML Tables
HTML Frames
HTML Forms
Other advanced techniques such as Cascading Style
sheets and JavaScript
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
2
Wiley and the book authors 2001
Important factors on Client-side Web
programming
Major factors in client-side Web programming
include:
Downloading time
Data validation (e.g. type checking)
Usability of existing computer software
measured by how easily and how effectively it can be used
by a specific set of users, given particular kinds of support,
to carry out a defined set of tasks, in a defined set of
environments
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
3
Wiley and the book authors 2001
Important factors on Client-side Web
programming (cont.)
Factors which make up a usable user interface:
System feedback
Consistency
Error prevention
Performance / efficiency
User like / dislike
Error recovery
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
4
Wiley and the book authors 2001
Web page design and production
Major steps in Web page design and production:
Define audiences and the information
requirements
Develop logical design of the Web site
Develop the perceptual design
Content creation
Programming
Posting and hosting the site
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
5
Wiley and the book authors 2001
Overview of HTML
Hypertext Markup Language (HTML) is a markup
language for telling a Web browser how to format and
display a Web page
It is a subset of the Standard Generalized Markup
Language (SGML) - a formal markup language for
defining document format.
HTML employs pre-defined tags to specify the format of a
web page.
For example, by putting the word “Italics” inside the
<I></I> tag pairs (i.e., <I> Italics </I>), the word “Italics”
will be displayed by the Web browser in Italics form.
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
6
Wiley and the book authors 2001
HTML - Basic format
The basic structure of a HTML document is
formed by the following tags:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”>
<HTML>
<HEAD>
<TITLE>.... </TITLE>
</HEAD>
<BODY>
.....
</BODY>
</HTML>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
7
Wiley and the book authors 2001
Basic HTML tags and a simple example
<html>
<head>
<title>A simple web page</title>
</head>
<body>
<h1 align="center">First level heading</h1>
<h2>Second level heading</h2>
<p><font face="Courier" size="4">The font face is Courier and the font
size is 15pt.</font></p>
<p><font color="#FF0000">The font colour is red.</font></p>
<p><em>The text is in italic form.</em></p>
<p><u>The text is underlined.</u></p>
<p><strong>The text is expressed in bold face.</strong></p>
<p>This is<sup>superscript</sup>and this is<sub>subscript.</sub></p>
<p><blink>This text is blinking.</blink></p>
<hr>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
8
Wiley and the book authors 2001
Simple example (cont’d)
<p>This is a simple bullet list:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<p>This is a simple numbered list:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
</body>
</html>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
9
Wiley and the book authors 2001
Snapshot of the example Web Page
(Fig.
3.3)
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
10
Wiley and the book authors 2001
Links
Define by <A HREF …></A>, HREF gives the URL to be accessed
The URL can be absolute or relative:
<A HREF=http://www.vbs.com/Books/Art.html>Art</A> (absolute URL)
<A HREF=Science.html>Science</A> (in the current directory)
<A HREF=../Welcome.html></A> (go back one directory)
<A HREF=/Welcome.html></A> (in the webroot directory)
What are the differences?
<A HREF=/directory/Welcome.html></A>
<A HREF=directory/Welcome.html></A>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
11
Wiley and the book authors 2001
Images
There are two commonly used compressed image formats:
GIF and JPEG
GIF:
Lossless compression
Transparent
Give 256 colors
Support animation (animated GIF)
Suitable for general-purpose images
JPEG:
Lossy compression
Give “million of colors”
Suitable for photos
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
12
Wiley and the book authors 2001
Images (cont.)
Here is an example of the image tag using all the attributes:
<IMG SRC = “VBS.gif” ALT=“logo” HEIGHT=“100”
WIDTH=“100” ALIGN=“LEFT” BORDER=“1”>
SRC: URL of the image
ALT: image description during loading
HEIGHT: height of the image
WIDTH: width of the image
BORDER: border size
ALIGN: alignment method
You can also create an image link, e.g.,
<A HREF=“VBS.html”><IMG SRC=“VBS.gif”></A>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
13
Wiley and the book authors 2001
HTML Table
The table tag is <TABLE ....> ... </TABLE>
The row tag is <TR ...> ... </TR>
The heading tag is <TH ...> ...</TH>
The data cell tag is <TD ...>... </TD>
Fig. 3.4 shows an example of a simple table
incorporating the table tags and other common
attributes.
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
14
Wiley and the book authors 2001
Table Example
(Fig. 3.4)
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
15
Wiley and the book authors 2001
What are HTML Forms?
Forms are generally used to obtain data from
the client for submission to the server.
Typically, a program in the server is invoked
to process the data, possibly with the
assistance of the backend system.
The result (in most cases, an HTML file) will
then be passed to the web client by using the
HTTP.
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
16
Wiley and the book authors 2001
HTML Forms - general format
General format:
<FORM ACTION=“Program URL” METHOD=“GET or POST”>
Form input elements
Regular HTML content
</FORM>
ACTION: URL of the program for processing the form data
METHOD: methods for passing data to the server:
GET: attach at the end of the URL
POST: embed in the HTTP request message
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
17
Wiley and the book authors 2001
Common HTML Form elements
Common HTML Form elements include:
Input tag types:
Text
Password
Checkbox
Radio button
Submit button
Reset button
Button (to be assigned a function using JavaScript)
File
Hidden
Image
Textarea
Select menu
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
18
Wiley and the book authors 2001
Cascading Style Sheets (CSS)
In HTML 4.0, Cascading Style Sheet (CSS) is
available to separate the style from the structure
By using CSS, a single style sheet can be applied to
several web pages requiring the same style
There are three types of CSS, namely
external style sheets;
embedded style sheets;
inline style sheets.
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
19
Wiley and the book authors 2001
What is JavaScript?
JavaScript is a scripting language proposed by Netscape
to enhance the functions of HTML
It is often called an Object-oriented (OO) scripting
language with syntax looking like Java
It can be used to produce interactive and dynamic Web
pages
It is supported by most commonly-used browsers
including MS. IE and Netscape’s Navigator.
Unlike the server-side programs, a JavaScript code is
included in an HTML document and executed on the
client-side
For details, refer to Netscape's site on JavaScript
(http://developer.netscape.com/docs/manuals/index.html).
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
20
Wiley and the book authors 2001
Basic structure of JavaScript
A JavaScript code is embedded between the <SCRIPT>
and </SCRIPT> tags as follows:
<HTML>
<HEAD>
<TITLE>HTML file with JavaScript code</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Put the JavaScript code here.
//-->
</SCRIPT>
</HEAD>
<BODY>
…
</BODY>
</HTML>
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
21
Wiley and the book authors 2001
Sample JavaScript: Hello World
A sample Javascript example: Hello World
<HTML>
<HEAD>
<TITLE>JavaScript Hello World</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("<HR ALIGN='left' WIDTH=80%><BR>");
document.write("<H1>JavaScript : Hello World!!</H1><BR>");
document.write("<HR ALIGN='left' WIDTH=80%><BR>");
document.write("Current URL is: ");
document.write(location.toString());
document.write("<BR>Current time is: ");
document.write(Date());
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
_______________________________________________________________________________________________________________
</HTML>
E-Commerce: Fundamentals and Applications
22
Wiley and the book authors 2001
Sample JavaScript : Hello World
(Fig. 3.6)
_______________________________________________________________________________________________________________
E-Commerce: Fundamentals and Applications
23
Wiley and the book authors 2001