JAVASCRIPT

Active Client Pages: Summary of the Document Phase of Chrys`s Approach

In this part of the series, I give you a summary of the Document Phase of my approach to Active Client Pages. In order to help you better understand this phase, I need to explain two other approaches to ACP. When I finish that, we will proceed to the next phase. It may seem a little complicated (this is, after all the eighth part of a 12-part series), but by the time we're done you'll understand a number of ways to make your pages load faster over a slow Internet connection, even when they're full of images.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 2

August 21, 2009

TABLE OF CONTENTS:

We can make the URLs for the archive attribute of the HTML object element, those of the images at the server. We can have an HTML OBJECT as an element in the web page. The images will be downloaded in advance as the specification indicates. We can then display the image when we want. This is a subject for an entire article, which I will write later.

Rendering web pages as they arrive

With ACP in general, the first web page should be rendered as it arrives at the browser. If you design your web page according to the normal CSS flow, it should be rendered by the browser as it arrives, everything else being equal.

The main problem occurs with HTML tables. If you want a table to be rendered as it arrives, declare column properties (e.g. widths) at the start of a table definition. Avoid the particular use of "0*" to specify column width. If you do not specify the column widths, the table may not be rendered incrementally, as it arrives.

The secret lies with giving values to the table column widths at the beginning of the table definition. The widths can be in pixels, percentages or in a proportional form, e.g. width="3*" (but not 0*).

The innerHTML property

Now that you are producing the content at the client, you might want to be able to change the content of HTML elements. You probably already knew that you could change the table cell content with the innerHTML property. Many browsers today can allow you to change the content of almost any HTML element.

Consider the following code:

<html>

<head>

function changeContent()

{

document.getElementById('S1').innerHTML = "two";

document.getElementById('D1').innerHTML = "second";

}

</script>

</head>

<body>

<div id="D1">First</div>

<button type="button" onclick="changeContent()">Click</button>

</body>

</html>

When you click the button, the contents of the SPAN and DIV elements will be changed by the function in the script. This is just to show you that now, as your web pages or forms would be produced at the client, you may have to change the contents of HTML elements. This feature is not imperative for ACP. It comes as a complement. You can try the above code.

Now, innerHTML is a string. So if you have 34 or 78.6 in an element, know that you have a string. You do not have an integer or s float. To convert a string integer to a proper integer, you have to use the top level JavaScript parseInt function. To convert a string float to a proper float, you have to use the top level JavaScript parseFloat function. I intend to write an article about “innerHTML as a welcome innovation” in web development. There I will give you more details on what I have said here.

Next: Introduction to the Window Phase of Chrys’s Approach to ACP >>