Open Source Web Development Tutorials - Dev Shed

Active Client Pageの単純な例
（2009/02/10公開）

単純な例のコード

　このコードは比較的長いので、モジュールのような形式に分割して説明します。次のHTMLページにはマスターページ1つしか存在しません。マスターページの骨組みは次のとおりです。

<html>
<head>
//Minimum code used by all pages is here.
</script>
</head>
<body>
<div id="theDIV">

<!?The HTML elements are here -- >

<script type="text/javascript">
<!?JavaScript (Ajax) statements to download text in advance -- >
</script>
</div>
</body>
</html>

　これが骨組みとなります。ここには、HTMLの開始と終了タグと、HEAD要素があります。この要素には、すべてのページで使用されるJavaScriptが含まれています。このスクリプトの全体は、可能な限り短くする必要があります。マスターページのダウンロード時間をできるだけ短くすることが、ここでの目標の1つです。

　またBODY要素と、その開始と終了のタグがあります。BODY要素には、基本的な要素として、DIV要素とSCRIPT要素の2つがあります。SCRIPT要素はDIV要素の中にあります。マスターページのすべてのHTML要素は、このDIV要素の中にあります。

　最後の部分にはSCRIPT要素があります。一般に、このSCRIPT要素には、Ajaxを使ってテキスト（ページ）を前もってダウンロードするためのステートメントが含まれます。この単純な例では、2ページ目のみがダウンロードされます。

HEADスクリプト

　ここでは、マスターページのHEAD要素に含まれるスクリプトについて説明します。このスクリプトは次のとおりです。

<script type="text/javascript">
var theArray = new Array()

function showSecondPage()
{
document.getElementById('theDIV').innerHTML = theArray[2];
}
</script>

　JavaScript配列のtheArrayが作成され、showSecondPage()関数が定義されます。この配列の各要素は、ページの文字列（HTMLタグが含まれます）を保持します。この場合には、文字列要素は2ページ目に対応するものだけです。上の関数が呼び出されると、配列要素のインデックス2に対応する文字列の値を、DIV要素にコピーします。この操作が行われると、DIV要素にそれまで含まれていた内容は置き換えられます。この動作は、関数に含まれているステートメントにより行われます。

最初のページ

　DIV要素には、ページのコンテンツとスクリプトが含まれています。最初のページの場合、これらはすべてサーバーのマスターページに存在することに注意してください。ここで紹介する単純な例は次のようになります（スクリプトはここに示されていません）。

This is the first page.<br />

<button type="button" onclick="showSecondPage()">Next Page</button>

　「This is the first page」という文字列に続いて「
」要素があり、次にボタンが定義されています。このボタンがクリックされると、「showSecondPage()」関数が呼び出されます。この関数により、次のページが生成されます。