
such changes of state are to be expressed in an 
implementation computer language (Ratcliff, 1994, 
Jacky, 1997, Derrick, 2001). 
 In operation refinement the process of 
conversions of descriptions of state changes can be 
carried into executable instruction sequences. 
4 CONTROL STRUCTURES 
All programs can be written in terms of only three 
control structures, namely the sequence structure, 
the  selection structure and the repetition structure. 
The if structure is called a single-selection structure, 
because it selects or ignores a single action. The 
if/else structure is called a double-selection 
structure,  because it selects between two different 
actions (or groups of actions) (Deitel, 2002). 
5 THE CAR1 EXAMPLE 
In brief, in the Car1 example, the information of 6 
cars is given in an XML document car1.xml. This 
information is used to display the Web site 
demonstrated in Figure 2. The make, model number, 
year, price and picture of each car are given. The 
price of some cars is more than R200000.00 and 
some are less. The user can choose either one to get 
a display of the make, model number, year and price 
for the relevant cars. This if selection structure in the 
JavaScript program constitutes the crux of the 
discussion regarding the refinement of the 
specifications of the programs.  
6 Z SPECIFICATIONS 
Basic types, sets, data, constants, choices and 
messages:  Basic types (given sets): 
[MAKE, MODEL, YEAR, PRICE, IMAGE, X] 
  Refer to figures 1. The following are these sets: 
X = {01, 02, 03, 04, 05, 06} e N This represents 
the record counter for the data. 
MAKE = {(01, Peugeot), (02, Audi), (03, Citroën), 
(04, Mazda), (05, Mercedes), (06, Mercedes)} e  X 
ß MAKE 
MODEL = {(01, 307CC), (02, A6), (03, C5), (04, 
1.6), (05, E-class), (06, SLRMcLaren)} e  X  ß 
MODEL 
YEAR = {(01, 2004), (02, 2004), (03, 2004), (04, 
2004), (05, 2002), (06, 2004)} e X ß YEAR  
PRICE = {(01, 250000.00), (02, 340000.00), (03, 
150000.00), (04, 170000.00), (05, 540000.00), (06, 
640000.00)} e X ß PRICE 
IMAGE = {(01, car(01).jpg), (02, car(02).jpg), (03, 
car(03).jpg), (04, car(04).jpg), (05, car(05).jpg), (06, 
car(06).jpg)} e X ß IMAGE 
STR::= Price| Year| Model| Over| Under; N: Natural 
numbers;  ∅: Empty set; maxSize:  N;  n:  N The 
number of cars. For this example n = 6. 
 
Table 1: Car1 data file (given in car1.xml). 
X 
(recor
d 
counte
r) 
make  model  year  img  price 
01 Peugeot  307CC  2004 car(01).jpg 2500
00.0 
02 Audi  A6  2004 car(02).jpg 3400
00.0 
03 Citroën  C5  2004 car(03).jpg 1500
00.0 
04 Mazda  1.6  2004 car(04).jpg 1700
00.0 
05 Mercedes E-class  2002 car(05).jpg 5400
00.0 
06 Mercedes SLRMcLaren 2004 car(06).jpg 6400
00.0 
 
»_Car_System
_________________
___ 
ƻ____________________ 
ÆÆcar1.html   (User Interface) 
ÆÆcar1.js; car1.xml; car1.xsd 
Æ–____________________ 
–__________________________ 
Figure 1a: The Z Car system. 
 
»_car1.html
__________________
___ 
ÆDisplay Welcome page; On click: car1.js [Detail of this 
Æspecification not relevant to the discussion] 
–__________________________ 
Figure 1b: The Car1.html file (User Interface). 
 
»_car1.xml_____________________ 
Æx: P X  [X is not a field in the record, it is used 
Æonly in the schema as a record counter]   
Æmake: Xß MAKE; model: Xß MODEL;  
Æyear: Xß YEAR; img: Xß IMAGE; 
Æprice: Xß PRICE; n: N; car1.xsd; 
 
«_______________ 
Æ  (x = dom make; dom model; dom year; dom  
Æ  img; dom price); n = 6 
–__________________________ 
Figure 1c: car1.xml. 
 
»_car1.xsd_____________________ 
Æ  X car1.xml 
Æ[Information not relevant to the discussion of this paper] 
–__________________________ 
Figure 1d: car1.xsd. 
WEBIST 2006 - INTERNET TECHNOLOGY
90