The index.html file includes JavaScript code for storing a list of items ordered by the customer, and defines the left hand (navigation) and right hand (content) frames.
<html>
<head>
<title>FOMS</title>
<script>
<!--
function makeEmptyArray() {
this.count = 0;
return(this);
}
function item(productType, id, name, price) {
this.productType = productType;
this.id = id;
this.name = name;
this.price = price;
return(this);
}
function olAddItem(productType, id, name, price) {
this.items.count++;
this.items[this.items.count] = new item(productType, id, name, price);
}
function olRemoveItem(id) {
var index = 0;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].id == id) {
index = i;
break;
}
}
if(index) {
for(var i = index; i < this.items.count; i++) {
this.items[i] = this.items[i+1];
}
this.items.count--;
}
}
function olClear() {
this.items.count = 0;
}
function orderList() {
this.items = new makeEmptyArray();
this.addItem = olAddItem;
this.removeItem = olRemoveItem;
this.clear = olClear;
}
var myOrderList = new orderList();
//-->
</script>
</head>
<frameset cols="255,*">
<frame name="navFrame" src="navframe.html">
<frame name="contentFrame" src="main.html">
</frameset>
</html>
|
For the sake of clarity, <noscript> and <noframes> tags have been omitted from the source. The prime function of this page (as far as the user is concerned) is the definition of the main frameset. It pretty much speaks for itself, and so will not be discussed further. The JavaScript is of much more interest to us.
The item object describes one item, be it a CD, record or tape. It has the following properties:
Worth noting is the existence of the id property. We could have left it out, but it provides a neat way of referring to an individual item regardless of product type. For example, if The Beatles Anthology was available on both CD and Record, it is much more elegant (and less resource intensive) to search for a single integer than it is to search for an item with a product type of "CDs" and a name of "The Beatles Anthology".
The orderList object defines an array of all the items ordered by the customer, and methods to manipulate the items in that array. Specifically, it has the following properties and methods:
For an understanding of the orderList object, we need to discuss the makeEmptyArray function. This function returns an object with one property - count - which is initially set to zero. To add an element to an array defined by this function, we increment the count property and set object[object.count] to whatever value we want that element to have.
This is perhaps better demonstrated than explained. The addItem function does exactly what is described in the above paragraph. It increments the count property of the items array, then puts a new item object in items[items.count].
The removeItem function removes an item object from the items array by searching for the id of the item to remove, then shifting all the other items in the array up by one. Finally, the count is decremented.
The clear function simply sets the count of the items array to zero. Technically this means that any items previously added to the array are still in memory somewhere, but as JavaScript doesn't have a delete operator, this is the best we can do.
The reason we are not using the JavaScript Array object is because it did not exist in JavaScript 1.0, which is what this code was written for. It means that this code will work on Netscape 2.0, assuming someone somewhere is still using it.
The myOrderList object is the one and only instance of the orderList object. The items ordered by the customer will end up in the myOrderList.items array.
This tutorial has been translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.
This tutorial has been translated to Slovak by Juraj Rehorovsky from Coupofy team.
If you find this tutorial useful and want to show your apprectiation, a small donation is most welcome, either in Bitcoins to 19QpWDmZPmTqawcr8VsXcbdc4Znq1ecrza, or via PayPal.
