2014年5月12日月曜日

ボタンで動的にHtmlファイルの表示している文字を変更

ボタンからの表示しているHTMLファイルを、その場で変更する方法です。

通常、ブラウザがWebサーバへ要求して、Htmlファイルを取得し表示した後、
Htmlファイルの表示を変更したい場合には、ファイルの内容を変更し、再読み込みが
必要になります。

再読み込みを不要にし、動的に変更する技術がAjax(あやっくす)の機能のひとつです。

Ajaxと聞くと、難しそうと感じるかもしれませんが、それほどでもないです。
さっそく、サンプルから順に見ていきましょう。


0.最小限のプロジェクトを用意(最小限のプロジェクトの作り方)
  プラグイン設定で、jQueryとjQueryMobileを有効にします。
 参考:http://make-monaca.blogspot.jp/2014/05/input.html
 
 
1.さっそく書いてみます。
index.htmlファイル内の 幅設定(monaca.viewport)とYour code hereを消して、コードを書きます。


ボタンをクリックすると、表示欄へラッキーアイテムを表示する動作を書きます。

 <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script src="plugins/plugin-loader.js"></script>
    <link rel="stylesheet" href="plugins/plugin-loader.css">
    <script>
        // Set virtual screen width size to 640 pixels
        monaca.viewport({width: 320});
    </script>
</head>
<body>
  <br>
  <br>

<div id="msg">今日のラッキーアイテムは?</div>

<div>
    <button onclick="lu_click()">見る</button>
</div>

<script>
    function lu_click(){
        var message=document.getElementById("msg");
        message.innerHTML="アイスコーヒー";
    }
</script>

</body>
</html>


2.コードを解説
buttonタグのなかで、クリックされた時、呼び出されるのが関数 lu_click()であることを定義します。
それが、onclickです。

クリックされたときの動作を決める関数 lu_click() を確認します。
  var message=document.getElementById("msg")
変数 message へIDがmsgの要素をまるまる、セットします。
変数messageのinnerHTMLへ"アイスコーヒー"をセットすることで、今の文字を上書きします。

では、IDが、msgの要素は、どこかと言うと、
   <div id="msg">今日のラッキーアイテムは?</div>
です。

今日のラッキーアイテムは?   を アイスコーヒー へ書き換えています。

3.実際の画面




















タップすると、




















再読み込みせずに、画面の文字を変更できる技術が簡単に実現できます。
Ajaxはすごいです。

占いアプリに発展させることができそうです。


0 件のコメント:

コメントを投稿