Web Programming
101

  
  1. HTML
  2. JavaScript
  3. Perl

top -- cas-prog

Having found during the past few years, and especially this summer, how scarce and therefore marketable programming skills are still in many Third World countries (and indeed in First World countries too ...,) I decided to run an Activity to help students develop some of these skills.

There used to be quite a few students every year who were keen on and often extremely good at writing programs, but now hardly anybody seems to do that kind of 'playing around,' largely perhaps because Microsoft programs are designed to hide that side of things from the user.

But there is, I have found, a lot of fun to be had -- rather more than from just playing computer games, even for non-nerds. In the Activity we are also trying to do something useful, by designing and hopefully maintaining a website for the Growing Businesses Foundation, a Nigerian micro-finance corporation founded by an AC ex-student.

top -- cas-prog

1. HTML

An HTML (= Hyper-Text Mark-up Language) document, i.e. a webpage, consists of (a) content and (b) instructions according to which a browser displays that content: the mark-up information contained in a 'head'-section and in tags, which are surrounded by corner brackets, e.g. <h1>My Page Heading</h1>, allow one to control many aspects of the lay-out. The reason for the usefulness of HTML on the web is of course the ability to create hyper-links from one page to other pages anywhere on the web.

The two major browsers (or 'user agents',) IE and NN, used to have different conventions, W3C logo. but over the last few years there has been some convergence, and the latest versions largely support the W3C's HTML 4.01 and Cascading Style Sheets, level 1 specifications, so that pages can be written that are rendered similarly on different browsers.

A good learning resource for both HTML and JavaScript are the W3Schools Online Web Tutorials.

top -- cas-prog

2. JavaScript

JavaScript is processed together with the HTML on a webpage, and allows the manipulation of data entered on the page and the modification of the content and appearance of the page, enabling webpages to be dynamic. The most serious difficulties with JavaScript are not with the language itself, but are due to the significant differences, until recent versions of the major browsers, in the way in which the objects on the page have to be addressed depending on whether IE or NN is used.

Students will, in small groups, write small programs, all with some international theme, taking as their starting point a simple sample of JavaScript. To understand the basics, it will be enough to write the scripts so that they display well in the recent W3C DOM (= Document Object Model) compliant browsers (IE5+, NN6+.)

To find out about JavaScript, there are a Core JavaScript Guide 1.5 from Netscape, a JScript User's Guide from Microsoft, and a list of other articles, including some basic introductions, but some of them for older versions of the language or the browsers, from WebReference.

  1. Sample Script  (KA)

    To see the script use 'View' > 'Source'.

    Enter two short numbers:   number 1 = , number 2 = .
    Select an operation: add, subtract,  
    multiply,   divide,
    swap the two numbers.
    (See the result here.)
  2. Learn Shona    (Fabienne, Alex, Don)

    Still to do:

    1. not show again too soon the last words that have been answered correctly,
    2. to add a counter for the number of all and of correct responses.

top -- cas-prog

3. Perl

Perl is a very enjoyable language, I have found, combining ease of use with great power. It is the language in which most CGI scripts are written, i.e. server-side programs that can take input from a client, (i.e. a user's browser,) process it, and produce output that can be passed back to the browser.

Every Perl-installation comes with a very full set of documentation, but here are Rex Swain's HTMLified Perl 5 Reference Guide and a link to a useful site, perldoc.com .

  1. Sample Script (KA)

    #!/usr/bin/perl -w

# use diagnostics;
use CGI qw(:all);

@month = qw(Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec);

open(LastChange,"pl-ex0.txt");
@last = <LastChange>;
close(LastChange);
chomp(@last);

$now = time;
@now = gmtime($now);
$mnth = $month[$now[4]];
$year = $now[5] + 1900;
$past = $now - $last[0];

if ((!param) or (param('newcol') eq 'none') or (param('newcol') eq $last[1])) {
    $line = "The background colour was last changed <b>$past</b> seconds ago.";
}
else {
    $last[1] = param('newcol');
    $line = "You have just changed the background colour to <b>$last[1]</b>.";
    open(LastChange,">pl-ex0.txt");
    print LastChange "$now\n$last[1]\n";
    close(LastChange);
}

print "Content-type: text/html\n\n";

print <<end
<html>
<head>
<title>Demo of 'pl-ex0.pl'</title>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
</head>
<body bgcolor=$last[1]>
The date is <b>$now[3] $mnth $year</b>.<br>
The time is <b>$now[2]:$now[1]:$now[0] GMT</b>.<br>
(Refresh the page if it is not current.)<p>
$line<p>
<form action=pl-ex0.pl>
You can change the background colour now:
<select name=newcol size=1>
<option value=none>no change</option>
<option value=none>-----------------</option>
<option value=gray>gray</option>
<option value=silver>silver</option>
<option value=white>white</option>
<option value=yellow>yellow</option>
</select>
<input type=hidden name=time value=$now>
<input type=submit value="Submit."><p>
<input type=button value="Close." onClick="window.close()">
</form>
</body>
</html>
end

    (Note that since 'file locking' is not used, the file pl-ex0.txt on the server could become corrupted if more than one user changed the background colour at the same time.)

  2. Multiple Choice Test

    We will together plan the structure of a CGI script, and then write the program in Perl, to read a multiple choice test from a file on the server and display it in a browser, with the questions and answers in random order, and with the option for the student at the end to submit their score to a list that the teacher can access.

top -- cas-prog