Script入門
Script入門4 | Script入門6

5. Script入門5

各ファイルの内容(HTMLファイル)
  • 全ソースの説明を行うと長くなってしまうので、ソースをダウンロードし、
    参照しながら進めていってください。

    ソースコード一式は以下のリンクからダウンロードできます。
    ダウンロード

    index.html
     4:    <script type="text/javascript" src="taffy.js"></script>
 5:    <script type="text/javascript">
 6:      // Taffy DB の初期化
 7:      dataset = new TAFFY([]);
 8:      searchInfo = new TAFFY([]);
 9:      editIndex = 0;
10:    </script>

    　4行目でtaffy.jsの読み込み処理を行い、5～10行目でTAFFYオブジェクトの
    　初期化と、更新時に使用するindexの初期化を行います。


    menu.html
    10:    <a href="registration.html" target="main">Registration</a>
13:    <a href="search.html" target="main">Search</a>

    　各機能へのリンクを表示しています。


    registration.html
     4:    <script type="text/javascript" src="taffy.js"></script>
 5:    <script type="text/javascript" src="main.js"></script>
73:    <input type="button" onclick="writeData();" value="regist">
74:    <input type="reset" value="clear">

    　4,5行目でそれぞれtaffy.jsとmain.jsを読み込んでいます。
    　73行目のregistボタン押下のイベントとしてwriteData関数を実行します。


    search.html
     4:    <script type="text/javascript" src="taffy.js"></script>
 5:    <script type="text/javascript" src="main.js"></script>
 7:  <body onload="onInit();">
65:    <input type="button" onclick="searchData();" value="search">
71:    <form id="editForm" method="POST">
72:      <div id="result">
73:      </div>
74:    </form>

    　4,5行目でそれぞれtaffy.jsとmain.jsを読み込んでいます。
    　7行目で画面読み込み時の処理処理としてonInit関数を実行します。
    　65行目のsearchボタン押下のイベントとしてsearchData関数を実行します。
    　実行結果は72行目のdivタグへinnerHTMLを使用し置き換えます。


    edit.html
     4:    <script type="text/javascript" src="taffy.js"></script>
 5:    <script type="text/javascript" src="main.js"></script>
 7:  <body onload="editOnInit();">
73:    <input type="button" onclick="editData();" value="edit">
74:    <input type="button" onclick="returnSearch();" value="return">
75:    <input type="hidden" id="index">

    　4,5行目でそれぞれtaffy.jsとmain.jsを読み込んでいます。
    　7行目で画面読み込み時の処理処理としてeditOnInit関数を実行します。
    　73行目のeditボタン押下のイベントとしてeditData関数を実行します。
    　74行目のreturnボタン押下のイベントとしてreturnSearch関数を実行します。
    　75行目のhiddenフィールドにてindexを保持します。

    blank.html
    　空の画面です。

    次回は、メイン処理となるmain.jsの内容説明です。

    ＜次回は「Script入門6」です。＞

　　
　
Script入門4 | Script入門6