Home arrow JavaScript arrow Page 3 - Principles of Active Client Pages: the Script Approach
JAVASCRIPT

Principles of Active Client Pages: the Script Approach


In this part of the series, I give the principles of the Script Approach to Active Client Pages. I am the one who came up with these principles to suit the advantages I mentioned in the previous part of the series. In order for you to understand the Script Approach, I will have to explain the simple example we saw previously. This article is the second part of a three-part series.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
June 12, 2009
TABLE OF CONTENTS:
  1. · Principles of Active Client Pages: the Script Approach
  2. · Source Code
  3. · String Content
  4. · Principles of the Script Approach

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Principles of Active Client Pages: the Script Approach - String Content
(Page 3 of 4 )

Look at the string content of the first page in the frameset document from the first part of this series. There is a button there. The onclick attribute of this button actually has the following value:

 

parent.pInx = 1;location.replace('myChild.htm')

 

There are two statements here. When the button is clicked, we have to see the next page, so the value of the pInx in the frameset script is set to 1; this is what the first statement does. The next statement asks the document of the frame to redisplay itself. In the course of redisplaying itself, it encounters the following script:

 

<script type="text/javascript">

document.write(parent.theArray[parent.pInx])

</script>

 

Now, the value of pInx is 1, so the second page is displayed. However, before this, the second element (index 1) of the array in the frameset script should have had the content of the second page, excluding the <html> and </html> tags.

Look at the string content of the first page in the frameset document from the first part of the series again. There is an external JavaScript tag at the bottom. This tag is actually

 

<script src="forNextPage.js"></script>

 

When the first page is displayed, this tag downloads the JavaScript file named forNextPage.js. Now with ACP you design your web page so that it should be rendered by the browser as it arrives at the browser.

So, while this file is being downloaded, the user is reading what has been displayed on the page, above this tag. As soon as the first page is displayed, the user starts reading it. Since the page is being rendered as it arrives, by the time the user has read anything useful, this file would have been downloaded. This is the content of the file:

 

parent.theArray[1] = "<html>";

parent.theArray[1] += "<head>";

parent.theArray[1] += "</head>";

parent.theArray[1] += "<body>";

parent.theArray[1] += "This is the second page seen.";

parent.theArray[1] += "</body>";

parent.theArray[1] += "</html>";

 

When the file is downloaded, its statements are executed, while the page in which its tag is, is still open. As you can see, the file assigns the content of the second page as a string to the second element of the array in the frameset script. These statements are executed in the frame document, so to address the array on the frameset script we have to start with the word "parent."

This external script may also have an external script tag that has content for some following page. The following code illustrates this:

 

parent.theArray[1] = "<html>";

parent.theArray[1] += "<head>";

parent.theArray[1] += "</head>";

parent.theArray[1] += "<body>";

parent.theArray[1] += "This is the second page seen.";

parent.theArray[1] += "<script src="forNextPage2.js"></script>";

parent.theArray[1] += "</body>";

parent.theArray[1] += "</html>";

 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials