MSc-IT Study Material
June 2010 Edition
Computer Science Department, University of Cape Town
Web Programming
Next
Web Programming
The Department of Computer Science, University of Cape Town
Copyright © 2005-2010 University of Cape Town
2010
Table of Contents
1. Basic Concepts
Introduction
Hypertext
Anchors and Links
Jumps
Chain of Links
Loops and Mesh
Hypermedia
Authoring Hypertext
The Ultimate Hypermedia System: The World Wide Web
Basic Ideas of the Web
Summary of Web Terminologies
Web Servers
Distributed Processing
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Answers
Discussions for Exercise 2
Answers to Exercise 3
Answers to Exercise 4
Answers to Exercise 5
Answers to Exercise 6
Answers to Review Question 1
Answers to Review Question 2
Answers to Review Question 3
Answers to Review Question 4
Answers to Review Question 5
Answers to Review Question 6
2. HTML 1: Basics
HTML Basics
HTML Marking Up
Nesting HTML Tags
Standard HTML Document Structure Format
HTML Formatting
The Browser As Formatter
Paragraphs and Line Breaks
Headings
Lists
Preformatted text
HTML Comments
Anchors
Simple Hypertext Links
Linking to Email Addresses & other Non-Web Links
Linking to Sections within Documents
Targeting Windows
Link Appearance
Images
Horizontal Lines
Graphics
Objects
Imagemap
Writing Good HTML
Discussion and Answers
Discussion Topics
Discussion of Activity 3
Discussion of Activity 4
Discussion of Activity 6 — Lists
Discussion of Activity 7 - Preformatted text and comments
Discussion of Activity 9 - Linking to sections within documents
Discussion of Activity 11 - Changing the appearance of links
3. Web Design
Introduction
Website Design
Guidelines for Developing a website
Analysing Overall Site Aims
Website Architecture
Navigation Planning
Designing for Hyper-Reading
Estimating Download Times
Formats of Web Graphic Images
Main Features of the GIF Format
Features of JPEG Format
'Lossy' and 'lossless' compression techniques
Designing Website File Structure
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Review Question 7
Review Question 8
Review Question 9
Review Question 10
Review Question 11
Review Question 12
Discussion and Answers
Discussion of Activity 1: Bad Websites
Discussion of Activity 5: Using GIF Files
Discussion of Activity 6: Image Sizes
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
Answer to Review Question 7
Answer to Review Question 8
Answer to Review Question 9
Answer to Review Question 10
Answer to Review Question 11
Answer to Review Question 12
4. HTML 2: Tables
Objectives
Introduction to Tables
What is a Table?
Why do We Use Tables?
Creating a Data Table
Using Tables in Page Design
Using Tables in Page Design
Flexible Design
Fixed Design
Review Questions
Discussions and Answers
Correct code for Activity 1 step 1
Solution to Activity 2: HTML Colours Table
Discussion Topic
Answers to Review Questions
5. Internet Commerce
Advertising
The DAGMAR Strategy
The Advertising Plan
Advantages to Advertising on the Internet
Disadvantages to Advertising on the Internet
Advertising to support your site
Other ways to find 'the' website
Getting Visitors
Advertising Review
Selling
Everyone's doing it
Selling is Similar to Advertising
Wholesalers and Retailers
Security and Selling
Usability for Internet commerce sites
The Virtual Shopping Trolley
Delivery
Selling Review
Review Questions
Discussions and Answers
Discussion of Exercise 1
Discussion of Exercise 2
Discussion of Exercise 3
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Review Question 7
Review Question 8
Review Question 9
Review Question 10
6. HTML 3: Forms
Introduction
Introduction to Forms
Form Elements
Processing Forms
Writing Forms
Starting a Form
Single-line Text Entry
Multi-line Text Entry
Radio Buttons
Check Boxes
Menu Buttons and Scrolling Lists
Submit and Reset Buttons
Using Forms
Additional Content and Activities
Supplementary information on HTML forms
Additional Activity — Tabular Layout of a Complex Form
Review Questions
Discussions and Answers
Discussion of Activity 1
Discussion of Activity 2
Discussion of Activity 3
Discussion of Activity 4
Discussion of Activity 5
Discussion of Activity 6
Discussion of Activity 7
Discussion of Activity 9
Discussion of Additional Activity
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
Answer to Review Question 7
Answer to Review Question 8
Answer to Exercise 1
Answer to Exercise 2
Answer to Exercise 3
7. Network Infrastructure
Introduction
Circuit and packet switching
Circuit Switching
Packet Switching
LANs and Internetworking
LANs
Internetworking
Protocols and TCP/IP
Protocols
Transport Control Protocol/Internet Protocol (TCP/IP)
Analogy
Routers and routing
Routers
Routing Problems
Segmentation and Re-assembly
Packet processing
Packet Contents
Domain Name and IP Addresses
Why have hierarchy?
Application Level Protocols
Simple Mail Transfer Protocol (SMTP)
Multipurpose Internet Mail Extensions (MIME)
Hypertext Transfer Protocol (HTTP)
Review Questions
Discussion Topic
Answers
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
Answer to Review Question 7
Answer to Review Question 8
Answer to Exercise 7.1
Answer to Exercise 7.2
Answer to Exercise 7.3
8. HTML 4: Frames
Introduction to Frames
Advantages and disadvantages of frames
9. XML
Introduction to Markup Languages
SGML
HTML
XML
Relationship
XML Primer
Validity and Well-Formedness
XML Declaration
Encoding: Unicode
Document Type Definition (DTD)
Elements / Tags
Entities
Creating your own ML based on XML
Parsing and Processing XML
SAX
DOM
SAX vs DOM
XML Namespaces
Default Namespaces
Explicit Namespaces
XML Schema
Schema Structure
Sequences
Nested Elements
Extensions
Attributes
Named Types
Other Content Models
Schema Namespaces
Schema Example
Data and Metadata
Metadata Standards
Metadata Transformation
XPath
XPath Syntax
XSL
XSLT
XSLT Templates
XSLT Special Tags
XSLT Language
XSLT Example
Answers
Answer to Activity 1
10. Style Sheets
Introduction to Style Sheets
Advantages of Style Sheets
Disadvantages of Style Sheets
CSS
Important Note About Rules
In-line Styles
Embedded Style sheets
Imported Style Sheet
Classes
Cascading Style Sheets
Review Questions
Review Question 1: Reflection on Style Sheets
Discussions and Answers
Discussion of Exercise 1
Answer to Exercise 2
Answer to Exercise 3
Solutions to Exercise 4
Solutions to Exercise 5
Solutions to Activity 1
Discussion of Review Question 1
11. Security
Introduction to Internet Security
Why the Internet is Insecure?
Why make information secure?
Securing Information on the Internet
Encryption
PGP - Pretty Good Privacy
Two Keys
Public Keys Example
Digital Signatures
Governments and Encryption
Discussion Topics
Discussion Topic 1
Discussion Topic 2
Answers and Discussions
Discussion of Exercise 1
Discussion of Exercise 2
Discussion of Exercise 3
Discussion of Exercise 4
12. Privacy and Censorship
Introduction to Censorship
An Overview
Why Censor?
Censorship Strategies
Overview
Blocking Software
Ratings
Service Providers
Browsers and search engines
Social Methods
Censorship and Controversy
Ratings
Freedom
Pressure to Control
Investigating Data Trails
Overview
Data Trails On Your Machine
Cookies
Privacy: Personal and Corporate
Introduction
Advantages of privacy
Impact on the Individual
Future Developments
Review Questions
Discussion Topic
Answers and Discussions
Discussions on Activity 4
Discussions on Activity 5
Discussions on Activity 6
Discussions on Activity 7
Discussions on Activity 8
Solutions to Review Questions
13. Virtual Organisation
Development in the Last Ten Years
The New Economy
Industry Growth
New Rules
E-Commerce and the New Economy
Useful e-commerce Links
E-commerce Estimates and Statistics
The New Company
Communication over the Internet
Formal and Informal Communication
How Does the Virtual Organisation Begin?
Groupware and CSCW
Grouputer: An Example of Groupware
Virtual Workplaces
Costs and Benefits
Virtual Reality
Review: The Virtual Organisation
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Discussions and Answers
Discussion of Exercise 1: What happened to Virtual Reality
Discussion of Exercise 2: Defining the Virtual Organisation
Discussion of Exercise 3: Some Advantages of the Virtual Organisation
Discussion of Exercise 4: The virtual meeting place
Discussion of Exercise 5: Advantages and Disadvantages of the Virtual Organisation
Discussion of Exercise 7: Music on the Web
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
14. JavaScript 1: Basic Scripting
Context
Differences Between JavaScript and Java
JavaScript within HTML
Arguments
Accessing and Changing Property Values
Variables
JavaScript Comments
Some Basic JavaScript Objects
Window Objects
Document Object
Date Objects
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Review Question 7
Review Question 8
Review Question 9
Review Question 10
Review Question 11
Discussions and Answers
Discussion of Exercise 1
Discussion of Exercise 2
Discussion of Exercise 3
Discussion of Exercise 4
Activity 1: Checking and Setting Background Colour
Activity 2:Setting a document's foreground colour
Activity 3: Using user input to set colours
Activity 4: Dealing with errors
Activity 5: The confirm method
Activity 6: Changing the window status
Activity 7: Semicolons to end statements
Activity 8: including separate JavaScript files
Activity 9: Opening a new Window
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
Answer to Review Question 7
Answer to Review Question 8
Answer to Review Question 9
Answer to Review Question 10
Answer to Review Question 11
15. JavaScript 2: Event Handling
Context
Event-based Programming
Event Handlers 'One Liners'
Events and objects
Anchor Events
Animating Button Images
Conditional Execution
JavaScript if statement
Code blocks
Boolean operators
General Selection
HTML Attributes for Event handling
Extension
Variables and their Scope
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Review Question 5
Review Question 6
Review Question 7
Review Question 8
Review Question 9
Review Question 10
Discussions and Answers
Discussion of Exercise 1
Discussion of Exercise 2
Discussion of Exercise 3
Discussion of Exercise 4
Discussion of Exercise 5
Discussion of Exercise 6
Discussion of Exercise 7
Discussion of Exercise 8
Discussion of Exercise 9
Discussion of Activity 1
Discussion of Activity 2
Discussion of Activity 3
Discussion of Activity 4
Discussion of Activity 5
Discussion of Activity 6
Answer to Review Question 1
Answer to Review Question 2
Answer to Review Question 3
Answer to Review Question 4
Answer to Review Question 5
Answer to Review Question 6
Answer to Review Question 7
Answer to Review Question 8
Answer to Review Question 9
Answer to Review Question 10
16. JavaScript 3: Functions
Introduction
Introduction to JavaScript Functions
Uses of Functions
Using Functions
Using built-in functions
Using user-defined functions
Defining and invoking a function in the same file
Invoking a file defined in a different file
Executing code using 'eval'
Creating user-defined functions
A simple function to display the String "hello"
Creating a function using function statements
Creating a function using the 'Function()' constructor
Creating a function using function literals
Some simple functions
Mathematical functions
Functions that RETURN a value
Defining a function that returns a value
A date Function
The today function described
Mathematical Functions
A form for calculations
A familiar calculator interface
Some Function activities
Form Validation
Testing for empty fields
The HTML defining the table
The JavaScript function to validate the form fields
Simplifying the code with a new function
Improving user interaction
Validation of multiple fields
Testing for numeric fields
Testing for invalid field combination
The remaining activities
Activity 6: Completing the colour model form
Activity 7: Avoiding Multiple Messages
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Discussion Topic
Extension: More complex functions
Discussions and Answers
Discussion of Exercise 1
Discussion of Activity 1
Discussion of Activity 2
Discussion of Activity 3
Discussion of Activity 4
Discussion of Activity 5
Discussion of Activity 6
Discussion of Activity 7
Discussion of Review Question 1
Discussion of Review Question 2
Discussion of Review Question 3
Discussion of Review Question 4
Thoughts on Discussion Topic
17. JavaScript 4: Objects and Arrays
Introduction
Arrays
Introduction to arrays
Indexing of array elements
Creating arrays and assigning values to their elements
Creating and initialising arrays in a single statement
Displaying the contents of arrays
Array length
Types of values in array elements
Strings are NOT arrays
Variables — primitive types and reference types
Copying primitive type variables
Copying reference type variables
Array activities
Arrays concept map
The JavaScript object model
Introduction to the JavaScript object model
Objects in JavaScript
Naming conventions
Creating objects and variables referring to objects
Object properties and methods
Some important JavaScript objects
The 'Triangle' object
User defined objects
Implementing instance variables and methods
The JavaScript object search chain
Object activities
Arrays as objects
Array method: join
Array method: sort
Array method: reverse
Single and multi-dimensional arrays
Objects as associative arrays
Enumerating associative arrays with FOR/IN loop statements
Using FOR/IN for numerically index arrays
Activities and further work
Review Questions
Discussion Topics
Answers
Discussions of Exercise 1
Discussions of Exercise 2
Discussions of Activity 1
Discussions of Activity 2
Discussions of Exercise 3
Discussions of Activity 3
Discussions of Activity 4
Discussions of Activity 5
Discussions of Activity 6
Discussions of Activity 7
Discussions of Activity 8
Answers to Review Questions
Contribution to Discussion Topics
18. Advanced HTML
Introduction
Introduction to Image maps
The user's viewpoint of image maps
An example of user interaction with an image map
Server-side and client-side image maps
Server-side image maps
Client-side image maps
Implementing client-side image maps in HTML
Images
Relating a map and an image
Overview of HTML <MAP> tags
The <area> tag
Shape
coordinates
Hyperlink
Title text
Reacting to mouse pointer location: onMouseOver and onMouseOut
Setting the status bar
Changing the contents of a text box
Summary exercise
Application and further work
Activity 4: Creating a rectangular area in an image map
Activity 5 — Creating a default hyperlink
Activity 6: Creating an image map for geometric shapes
Activity 7: Responding to onMouseOver events
Activity 8: Controlling frame content from image maps
Review Questions
Frameset hierarchies
Activity 9: Frame hierarchies
Loading Multiple Documents
Loading two frames from one link
Loading more than two frames from one link
Answers
Discussions of Exercise 1
Discussions of Exercise 2
Discussions of Activity 1
Discussions of Activity 2
Discussions of Activity 3
Discussions of Activity 4
Discussions of Activity 5
Discussions of Activity 6
Discussions of Activity 7
Discussions of Activity 8
Discussions of Activity 9
Discussions of the Review Questions
19. Web-Application Development
Examples of Web applications
Blogs
Wikis
Sakai
Digital Libraries
Getting and running Tomcat
Creating a simple Web page
What do Servlets do?
Request Methods
The structure of a Web application
Your first Web application
Handling user input
Cookies and session tracking
Problems with cookies
Response status
The Servlet packages and classes
javax.servlet
javax.servlet.http
Servlet Life-cycle
20. AJAX: Asynchronous JavaScript and XML
Initialisation:
Synchronous example
A more detailed example
Getting data from a server
Sending data to a server
Performing asynchronous communication
Advantages and disadvantages of AJAX based Web pages
21. Hot Topics
Voice Over Internet Protocol (VoIP)
Peer to Peer (P2P) Technology
Portable/Mobile Device Connectivity
Connectivity Technologies
List of Tables
1.1.
2.1.
16.1.
Function to display "Hello"
16.2.
Function to display "Hello"
16.3.
Function to display "Hello"
16.4.
Function to display "Hello"
16.5.
Function to calculate a price, including VAT
16.6.
Function to evaluate expression and place answer in
answer
text field
16.7.
Function to append a String to the
display
text field
16.8.
Function to evaluate expression and place answer in
display
text field
16.9.
Function to double a number and display it
16.10.
Function to multiply two numbers and return the result
16.11.
Function to return the area of a triangle
