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